:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eef6ff;background:#06111f;--bg:#06111f;--panel:#0b1b2e;--panel2:#0e2239;--line:#27415f;--muted:#8298b2;--blue:#2487ff;--cyan:#53d8ff;--green:#2bd08f;--red:#ff536b;--gold:#ffba26;--violet:#7e74ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% -5%,rgba(36,135,255,.16),transparent 28%),radial-gradient(circle at 90% 5%,rgba(83,216,255,.08),transparent 24%),linear-gradient(180deg,#06101d,#081725 50%,#06111f);color:#eef6ff}.app-shell{max-width:980px;margin:0 auto;padding:0 12px 106px}.hidden{display:none!important}.app-header{height:72px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;border-bottom:1px solid rgba(120,160,205,.12)}.brand-center{text-align:center}.brand-center strong{display:block;font-size:21px}.brand-center small{display:block;color:#849ab3;font-size:11px;margin-top:1px}.verified{color:#34a4ff;font-size:12px}.round-btn{width:42px;height:42px;border-radius:50%;border:1px solid #27415f;background:#0b1828;color:#dceaff;font-size:20px}.round-btn.ghost{display:grid;place-items:center}.welcome-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:17px 8px 15px}.hello{color:#9eb1c6;font-size:13px}.name-row{display:flex;align-items:center;gap:9px}.name-row h1{font-size:29px;margin:2px 0 0;line-height:1.05}.role-badge{background:#1677ff;color:#fff;font-size:9px;font-weight:900;padding:6px 10px;border-radius:999px}.date-line{margin:8px 0 0;color:#8094ac;font-size:11px}.period-pill{display:flex;gap:9px;align-items:center;padding:11px 13px;border:1px solid #314967;background:#0a1829;border-radius:18px;min-width:128px}.period-pill small{display:block;color:#8096af;font-size:9px}.period-pill strong{font-size:12px}.filter-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;border:1px solid rgba(123,160,200,.13);border-radius:15px;background:rgba(5,14,25,.62)}.segment,.period{border:0;border-radius:10px;padding:9px 4px;background:transparent;color:#7890a9;font-size:10px;font-weight:900}.segment.active,.period.active{background:linear-gradient(135deg,#1c83ff,#4fd7ff);color:white;box-shadow:0 5px 18px rgba(36,135,255,.2)}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.kpi-card{min-height:112px;border:1px solid #263d59;border-radius:20px;background:linear-gradient(180deg,#0d1d31,#091726);padding:15px;display:flex;align-items:center;gap:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 14px 35px rgba(0,0,0,.18)}.kpi-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;font-size:19px;font-weight:900;flex:0 0 auto}.kpi-card.blue .kpi-icon{background:linear-gradient(135deg,#1f7cff,#3e58ff);box-shadow:0 0 22px rgba(45,118,255,.28)}.kpi-card.green .kpi-icon{background:linear-gradient(135deg,#18a771,#32d7a0);box-shadow:0 0 22px rgba(43,208,143,.2)}.kpi-card.red .kpi-icon{background:linear-gradient(135deg,#e94658,#ff6c7a);box-shadow:0 0 22px rgba(255,83,107,.2)}.kpi-card.amber .kpi-icon{background:linear-gradient(135deg,#d18c09,#ffbd2f);box-shadow:0 0 22px rgba(255,186,38,.18)}.kpi-card small{display:block;color:#93a6bb;font-size:10px}.kpi-card strong{display:block;font-size:29px;line-height:1;margin:7px 0 4px}.kpi-card em{display:block;font-style:normal;font-size:9px;color:#71879f}.dashboard-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:12px;margin-top:12px}.panel{border:1px solid #263e5b;border-radius:20px;background:linear-gradient(180deg,rgba(12,29,48,.97),rgba(8,23,38,.98));box-shadow:0 15px 38px rgba(0,0,0,.18);padding:15px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}.panel-head>div{display:flex;align-items:center;gap:8px}.panel-head strong{font-size:14px}.panel-icon{color:#55d9ff}.panel-meta{color:#7f95ad;font-size:10px}.panel-sub{margin:0 0 10px;color:#748aa2;font-size:10px}.trend-chart{height:205px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:8px;padding-top:14px}.trend-col{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px}.trend-value{font-size:10px;color:#dce9f6}.trend-bar-wrap{height:142px;width:100%;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid rgba(92,130,169,.18)}.trend-bar{width:min(28px,66%);min-height:5px;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,#57e6ff,#2287ff 55%,#2457d9);box-shadow:0 0 18px rgba(40,145,255,.28)}.trend-label{font-size:9px;color:#8196ae;font-weight:800}.progress-wrap{display:flex;align-items:center;justify-content:center;gap:26px;min-height:205px}.progress-ring{--p:0deg;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#2bd08f 0deg,#2487ff var(--p),#1a2e45 var(--p));position:relative}.progress-ring:after{content:"";width:108px;height:108px;background:#091827;border-radius:50%;position:absolute}.progress-ring>div{z-index:1;text-align:center}.progress-ring strong{display:block;font-size:31px}.progress-ring small{color:#8aa0b8;font-size:11px}.progress-copy p{margin:11px 0;color:#8fa5bc;font-size:11px}.progress-copy p strong{display:block;color:#eef6ff;margin-left:18px;margin-top:2px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px}.dot.cyan{background:#2487ff}.dot.green{background:#2bd08f}.dot.gold{background:#ffba26}.search-wrap{display:flex;align-items:center;gap:8px;border:1px solid #223b58;background:#081727;border-radius:12px;padding:0 11px;margin:10px 0}.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:white;padding:10px 0;font-size:11px}.leaderboard{display:grid;gap:5px}.leader-row{display:grid;grid-template-columns:32px 1fr auto 15px;gap:9px;align-items:center;width:100%;padding:9px 7px;border:0;border-bottom:1px solid rgba(87,119,153,.13);background:transparent;color:#eef6ff;text-align:left}.rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#16283d;color:#a9bdd2;font-size:11px}.leader-row:nth-child(1) .rank{background:linear-gradient(135deg,#ffd166,#e89b00);color:#3b2600}.leader-row:nth-child(2) .rank{background:linear-gradient(135deg,#d5dfeb,#8299ae);color:#203144}.leader-row:nth-child(3) .rank{background:linear-gradient(135deg,#d88a54,#9e542d);color:#2d1609}.leader-name{display:block;font-size:12px}.leader-meta{display:block;color:#7288a1;font-size:9px;margin-top:2px}.leader-score{font-size:18px;color:#31d795;font-weight:900}.chevron{color:#728aa5;font-size:18px}.area-row{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;border-bottom:1px solid rgba(87,119,153,.13);background:transparent;color:white;padding:11px 2px}.area-row strong{display:block;font-size:12px}.area-row small{display:block;color:#758ba2;font-size:9px;margin-top:3px}.area-row>span{font-size:20px;color:#7590aa}.info-box{display:flex;gap:9px;margin-top:13px;background:#091827;border:1px solid #203753;border-radius:12px;padding:11px}.info-box p{margin:0;color:#8398af;font-size:10px;line-height:1.45}.activity-list{padding-top:6px}.activity-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(87,119,153,.13)}.activity-bullet{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#153457;color:#5fdcff}.activity-item strong{display:block;font-size:11px}.activity-item small{display:block;color:#758aa2;font-size:9px;margin-top:3px}.skeleton-line{height:14px;border-radius:8px;background:#102840;margin:10px 0}.skeleton-line.short{width:65%}.placeholder-chart{min-height:170px;display:flex;align-items:center;justify-content:center;gap:18px}.placeholder-pie{width:100px;height:100px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#8d2dce 0 36%,#ee4f5d 36% 60%,#ffb62c 60% 78%,#2584ef 78%);font-size:32px;font-weight:900;box-shadow:inset 0 0 0 24px #0a1929}.placeholder-chart strong{display:block;font-size:13px}.placeholder-chart p{max-width:220px;color:#7d92aa;font-size:10px;line-height:1.5}.bottom-nav{position:fixed;left:12px;right:12px;bottom:max(8px,env(safe-area-inset-bottom));max-width:956px;margin:auto;z-index:80;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:7px 10px;border:1px solid #2b4564;border-radius:22px;background:rgba(10,26,43,.94);backdrop-filter:blur(18px)}.nav-item{border:0;background:transparent;color:#8196ad;border-radius:14px;padding:5px 2px;display:grid;place-items:center;gap:2px}.nav-item span{font-size:21px;position:relative}.nav-item small{font-size:9px}.nav-item.active{color:#4ba7ff}.nav-plus span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#3d9cff,#176cff);color:white;font-size:31px;margin-top:-22px;box-shadow:0 0 25px rgba(31,123,255,.45)}.nav-item.disabled{opacity:.45}.payroll-nav b{position:absolute;right:-7px;top:-4px;width:16px;height:16px;border-radius:50%;background:#ff7d20;color:white;font-size:10px;display:grid;place-items:center}.payroll-hero{text-align:center;margin-top:20px;padding:32px 20px}.warning-orb{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;margin:auto;background:radial-gradient(circle at 35% 30%,#ffe7a2,#ffb31b 58%,#d97800);color:#2a1600;font-size:46px;font-weight:1000;box-shadow:0 0 0 11px rgba(255,180,25,.07),0 20px 55px rgba(255,172,22,.18)}.payroll-hero h1{margin:16px 0 6px}.payroll-hero p{max-width:520px;margin:auto;color:#8197ae;font-size:12px;line-height:1.55}.payroll-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.pay-stat{border:1px solid #263e5b;border-radius:18px;background:#0b1b2e;padding:16px}.pay-stat.wide{grid-column:1/-1}.pay-stat small{color:#7d94ac;font-size:9px}.pay-stat strong{display:block;font-size:30px;margin:5px 0}.pay-stat span{color:#71879e;font-size:10px}.empty{text-align:center;padding:25px;color:#7289a2}.detail-panel{position:fixed;inset:0;z-index:100}.detail-backdrop{position:absolute;inset:0;background:rgba(0,6,14,.72);backdrop-filter:blur(5px)}.detail-sheet{position:absolute;left:0;right:0;bottom:0;max-width:820px;margin:auto;max-height:85vh;overflow:auto;border-radius:26px 26px 0 0;background:linear-gradient(180deg,#10243b,#091725);border:1px solid #294562;padding:18px 16px 28px}.detail-handle{width:42px;height:4px;border-radius:99px;background:#3a526d;margin:-5px auto 12px}.close-detail{position:absolute;right:15px;top:16px;width:34px;height:34px;border:0;border-radius:11px;background:#162b44;color:white}.section-kicker{color:#54d9ff;font-size:9px;font-weight:900;letter-spacing:.16em}.subtle{color:#8197ae;font-size:11px}.detail-sheet h2{margin:0}.detail-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.detail-metrics div{padding:12px 8px;border-radius:13px;background:#0a1929;border:1px solid #203b59;text-align:center}.detail-metrics span{display:block;color:#748ca5;font-size:9px}.detail-metrics strong{display:block;font-size:19px;margin-top:4px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.section-heading h3{margin:0;font-size:14px}.section-heading span{color:#7c92aa;font-size:10px}.detail-orders{display:grid;gap:7px;margin-top:8px}.order-row{display:grid;grid-template-columns:1fr auto;gap:8px;border:1px solid #203a57;background:#0a1828;border-radius:12px;padding:10px 11px}.order-row strong{font-size:11px}.order-row small{display:block;color:#71869e;font-size:9px;margin-top:3px}.order-date{font-size:9px;color:#8ca0b7}@media(max-width:760px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.progress-wrap{min-height:185px}.welcome-row{align-items:flex-start}.name-row h1{font-size:24px}}@media(max-width:430px){.app-shell{padding-left:9px;padding-right:9px}.app-header{height:62px}.brand-center strong{font-size:18px}.welcome-row{padding:13px 5px}.period-pill{min-width:112px;padding:9px}.filter-strip{grid-template-columns:1fr}.kpi-card{min-height:94px;padding:11px}.kpi-icon{width:36px;height:36px}.kpi-card strong{font-size:23px}.trend-chart{height:180px}.trend-bar-wrap{height:120px}.progress-wrap{gap:16px}.progress-ring{width:128px;height:128px}.progress-ring:after{width:92px;height:92px}.placeholder-chart{flex-direction:column;text-align:center}.bottom-nav{left:7px;right:7px}.nav-item small{font-size:8px}}