:root{
  --bg:#f3f4f8;
  --card:#ffffff;
  --green-1:#0e6b48;
  --green-2:#16895d;
  --green-3:#0d5f40;
  --text:#2d3556;
  --muted:#8b93a7;
  --line:#e8eaf1;
  --active:#245ca8;
  --danger:#ff5b5b;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text)}
.hero-gradient{background:linear-gradient(135deg,var(--green-3),var(--green-2));color:#fff}
.mobile-shell{max-width:480px;margin:0 auto;background:#f7f8fb;min-height:100vh}
.app-topbar{background:#fff;position:sticky;top:0;z-index:20}
.bottom-nav{background:#fff;position:sticky;bottom:0}
.stat-card,.card-soft{border:0;border-radius:22px;background:#fff;box-shadow:0 8px 24px rgba(34,51,84,.06)}
.menu-card{border:1px solid #eef0f5;border-radius:18px;background:#fff;padding:14px;text-align:left;color:inherit}
.menu-card:hover{border-color:#d9deea}
.menu-icon{font-size:22px;margin-bottom:8px}

.admin-body{margin:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text)}
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{width:266px;background:linear-gradient(180deg,#0f6e48,#0d603f);color:#fff;padding:16px 12px;position:fixed;left:0;top:0;bottom:0;overflow:auto}
.admin-main{flex:1;margin-left:266px;padding:14px 20px 28px}
.brand-box{display:flex;gap:12px;align-items:flex-start;padding:10px 12px 16px}
.brand-logo{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#38d39f 0,#0ba56d 45%,#0a5d43 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.08)}
.brand-title{font-weight:800;letter-spacing:.4px;font-size:18px;line-height:1.1}
.brand-sub{font-size:11px;opacity:.85;line-height:1.2;margin-top:3px}
.user-card{background:rgba(255,255,255,.08);border-radius:16px;padding:14px 14px;margin:8px 10px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.avatar{width:42px;height:42px;border-radius:50%;background:#f4faf7;color:#0d6d49;display:flex;align-items:center;justify-content:center;font-weight:700}
.avatar-sm{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#fff}
.user-name{font-weight:700;line-height:1}.user-role{font-size:11px;opacity:.85;margin-top:4px}
.icon-btn{border:0;background:rgba(0,0,0,.12);color:#fff;border-radius:10px;width:34px;height:34px}
.side-nav{display:flex;flex-direction:column;gap:8px;padding:0 10px 20px}
.nav-group{border-radius:14px;overflow:hidden}
.nav-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;color:#fff;text-decoration:none;background:transparent;border-radius:14px;font-weight:600}
.nav-top.active,.nav-top:hover,.nav-group.open>.nav-top{background:#148455}
.nav-label{display:flex;align-items:center;gap:10px}.nav-badge{background:var(--danger);color:#fff;border-radius:999px;padding:2px 8px;font-size:11px}
.nav-children{padding:6px 0 6px 0;background:transparent}
.nav-child{display:block;color:#fff;text-decoration:none;padding:8px 18px 8px 40px;opacity:.95;position:relative}
.nav-child::before{content:'';width:6px;height:6px;border:1.8px solid #c7f7df;border-radius:50%;position:absolute;left:22px;top:15px}
.nav-child.active,.nav-child:hover{background:rgba(39,104,190,.9);border-radius:8px}
.topbar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 2px 8px rgba(33,44,77,.03)}
.search-pill{flex:1;display:flex;align-items:center;gap:10px;color:#9aa3b7}.search-pill input{border:0;outline:0;width:100%;font-size:15px}
.page-title{font-size:18px;font-weight:500;margin:28px 0 22px}
.filter-btn{border:1px solid #cfd5e4;background:#fff;border-radius:8px;padding:8px 14px;color:#80879b}
.welcome-card{background:linear-gradient(135deg,var(--green-3),#1b7f58);border-radius:24px;color:#fff;padding:28px 28px;display:flex;align-items:center;justify-content:space-between;min-height:150px}
.welcome-title{font-size:21px;font-weight:700;line-height:1.3}.welcome-name{font-size:46px;font-weight:800;line-height:1.05;margin:6px 0 8px}
.welcome-date{display:flex;gap:8px;align-items:center;opacity:.95}.wave{font-size:44px}
.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:22px}
.info-card{background:#fff;border-radius:22px;padding:18px 20px;min-height:128px;box-shadow:0 8px 24px rgba(34,51,84,.06)}
.info-card.primary{background:var(--green-1);color:#fff}.info-top{display:flex;justify-content:space-between;align-items:flex-start}.info-title{font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;opacity:.9}.info-num{font-size:31px;font-weight:800;line-height:1;margin-top:10px}.info-desc{margin-top:18px;font-size:13px;opacity:.85}
.round-icon{width:40px;height:40px;border-radius:50%;background:#f1f2f4;display:flex;align-items:center;justify-content:center;color:#6c758e}.info-card.primary .round-icon{background:rgba(255,255,255,.16);color:#fff}
.storage-bar{height:8px;border-radius:999px;background:#eef0f6;overflow:hidden;margin:16px 0 12px}.storage-bar>span{display:block;height:100%;width:96% ;background:#0f6b48;border-radius:999px}
.employee-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(34,51,84,.06);margin-top:14px}
.employee-cell{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-right:1px solid var(--line)}.employee-cell:last-child{border-right:0}.employee-cell .big{font-size:16px;font-weight:700}.employee-cell .muted{font-size:13px;color:#6f7890}.emoji{font-size:44px;line-height:1}
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:14px}.panel{background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(34,51,84,.06);padding:22px}.panel-title{font-size:18px;font-weight:500;margin-bottom:8px}.panel-sub{font-size:13px;color:#8a91a5;margin-bottom:16px}.empty-spot{height:170px;border-radius:18px;background:linear-gradient(180deg,#fcfcfd,#f5f7fb);display:flex;align-items:center;justify-content:center;color:#c4cad8}.tag{display:inline-block;background:#ffe8d3;color:#ff9b32;font-size:12px;padding:4px 10px;border-radius:999px}
.chart-pie{width:240px;height:240px;border-radius:50%;background:conic-gradient(#ff6387 0 72%, #2f9bff 72% 100%);margin:8px auto 0}
.legend{display:flex;gap:14px;justify-content:flex-end;font-size:13px}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}
.table-lite{width:100%;font-size:14px}.table-lite th,.table-lite td{padding:10px 8px;border-bottom:1px solid var(--line)}
.placeholder-list a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;margin-bottom:10px;background:#fff}
.admin-mobile-toggle{display:none}
@media (max-width: 1200px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.employee-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 991px){.admin-sidebar{transform:translateX(-100%);transition:.2s ease;z-index:30}.admin-sidebar.show{transform:translateX(0)}.admin-main{margin-left:0;padding:12px}.admin-mobile-toggle{display:inline-flex}.welcome-name{font-size:34px}.stats-grid{grid-template-columns:1fr}.employee-strip{grid-template-columns:1fr}.topbar{position:sticky;top:0;z-index:20}.brand-box{padding-top:18px}}