:root{--pageBg:#F4F2EC;--surface:#FFFFFF;--surfaceAlt:#FBFAF6;--hairline:rgba(20,20,24,0.07);--divider:rgba(20,20,24,0.06);--ink:#15151A;--ink70:#3D3D45;--ink50:#6B6B74;--ink30:#A6A6AD;--ink10:rgba(20,20,24,0.08);--missed:#15151A0A;--hlt:#EF4444;--prf:#F97316;--app:#06B6D4;--mst:#EC4899;--bnd:#22C55E;--fin:#EAB308;--rec:#A855F7}
html[data-theme="dark"]{color-scheme:dark;--pageBg:#111114;--surface:#1B1B20;--surfaceAlt:#232329;--hairline:rgba(255,255,255,0.09);--divider:rgba(255,255,255,0.07);--ink:#F5F4F0;--ink70:#D1D0CC;--ink50:#A09FA6;--ink30:#68686F;--ink10:rgba(255,255,255,0.10);--missed:rgba(255,255,255,0.04)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:"Inter",-apple-system,system-ui,sans-serif;background:var(--pageBg);color:var(--ink);display:flex;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;cursor:pointer}
a:hover{color:var(--ink70)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.sidebar{width:236px;flex-shrink:0;height:100vh;background:var(--surface);border-right:1px solid var(--hairline);display:flex;flex-direction:column}
.brand{padding:24px 22px 16px;font-size:19px;font-weight:800;letter-spacing:-0.6px}
.nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:4px 10px}
.nav-item{display:flex;align-items:center;gap:13px;padding:8px 12px 8px 14px;border-radius:12px;cursor:pointer;position:relative;border:none;background:transparent;font-family:inherit;text-align:left;width:100%}
.nav-item img{width:34px;height:34px;object-fit:contain}
.nav-item span{font-size:13px;font-weight:600;letter-spacing:0.1px;color:var(--ink50)}
.nav-item:hover{background:var(--surfaceAlt)}
.nav-item.active{background:var(--ink10)}
.nav-item.active span{color:var(--ink);font-weight:700}
.nav-item.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--ink)}
.nav-foot{padding:8px 10px 14px;border-top:1px solid var(--divider);margin-top:8px}
.main{flex:1;height:100vh;overflow-y:auto}
.content{max-width:1520px;margin:0 auto;min-height:100%;padding:20px 28px 24px;display:flex;flex-direction:column;gap:14px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;flex-shrink:0}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink50)}
.page-title{font-size:26px;font-weight:700;letter-spacing:-0.8px;margin-top:2px}
.stat-strip{display:flex;background:var(--surface);border:1px solid var(--hairline);border-radius:13px;overflow:hidden}
.stat-strip .cell{padding:8px 18px;border-right:1px solid var(--divider)}
.stat-strip .cell:last-child{border-right:none}
.stat-strip b{display:block;font-size:17px;font-weight:700;letter-spacing:-0.4px;font-variant-numeric:tabular-nums}
.stat-strip i{display:block;font-style:normal;font-size:10.5px;color:var(--ink50);margin-top:1px;white-space:nowrap}
.panel{background:var(--surface);border:1px solid var(--hairline);border-radius:16px;padding:13px 18px 14px;min-width:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 8px}
.panel-head .hl{display:flex;align-items:center;gap:8px;min-width:0}
.panel-head .hl img{width:28px;height:28px;object-fit:contain}
.panel-head .t{font-size:13.5px;font-weight:700;letter-spacing:-0.2px;white-space:nowrap}
.panel-head .t em{font-style:normal;font-weight:500;color:var(--ink50)}
.panel-link{font-size:11.5px;font-weight:700;white-space:nowrap}
.lbl{font-size:10px;font-weight:700;letter-spacing:0.7px;text-transform:uppercase;color:var(--ink50)}
.grp{font-size:9.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--ink50);padding:8px 0 2px}
.bar{height:6px;border-radius:3px;background:var(--ink10);overflow:hidden}
.bar span{display:block;height:100%;border-radius:3px;background:var(--ink)}
.seg{display:flex;gap:4px}
.seg b{flex:1;height:4px;border-radius:2px;background:var(--ink10)}
.seg b.on{background:var(--ink)}
.q-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--divider)}
.q-row:last-child{border-bottom:none}
.q-time{width:40px;flex-shrink:0;font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink50)}
.q-row.done .q-time{color:var(--ink70)}
.q-mark{width:14px;flex-shrink:0;font-size:13px;line-height:1;text-align:center}
.q-title{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-row.done .q-title{color:var(--ink50);text-decoration:line-through;text-decoration-color:var(--ink30)}
.q-tag{font-size:9.5px;font-weight:700;flex-shrink:0}
.eng-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--divider)}
.eng-row:last-child{border-bottom:none}
.eng-name{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eng-ticks{display:flex;gap:4px}
.eng-ticks b{width:9px;height:9px;border-radius:50%;background:var(--ink10)}
.eng-ticks b.on{background:var(--ink)}
.eng-ticks b.now{background:transparent;border:1.5px solid var(--ink50)}
.eng-count{width:26px;text-align:right;font-size:10.5px;font-weight:600;color:var(--ink50);font-variant-numeric:tabular-nums}
.ach-row{padding:6px 0;border-bottom:1px solid var(--divider)}
.ach-row:last-child{border-bottom:none}
.ach-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.ach-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ach-top .val{font-size:10px;font-weight:600;color:var(--ink50);font-variant-numeric:tabular-nums;white-space:nowrap}
.ach-row .bar{height:5px}
.mini-cal{flex:1;display:flex;flex-direction:column;min-height:0}
.mc-dow,.mc-row{display:grid;grid-template-columns:repeat(7,1fr)}
.mc-dow span{text-align:center;font-size:9.5px;font-weight:600;color:var(--ink50);padding:1px 0 4px}
.mc-row{flex:1}
.mc-d{position:relative;display:flex;align-items:center;justify-content:center;min-height:26px;border-radius:8px;font-size:11.5px;font-weight:500}
.mc-d.out{color:var(--ink30);opacity:0.55}
.mc-d.today{background:var(--ink);color:#fff;font-weight:700}
.mc-d.miss{background:var(--missed);color:var(--ink50)}
.mc-d .mk{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-size:6px;line-height:1;color:var(--ink)}
.mc-d.miss .mk{color:var(--ink50);font-size:6.5px}
.mc-d.pend .mk{font-size:8px}
.cycle-window{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cycle-window b{font-size:14.5px;font-weight:700;letter-spacing:-0.2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cycle-window i{font-style:normal;font-size:11px;color:var(--ink50);white-space:nowrap}
.cycle-week{display:flex;justify-content:space-between;gap:6px}
.cw-day{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.cw-track{width:15px;height:44px;border-radius:8px;background:var(--ink10);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.cw-fill{width:100%;border-radius:8px;background:var(--ink)}
.cw-day em{font-style:normal;font-size:9.5px;font-weight:600;color:var(--ink50)}
.cw-day.today em{color:var(--ink);font-weight:700}
.cw-day u{text-decoration:none;font-size:9px;color:var(--ink50);font-variant-numeric:tabular-nums}
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--divider);font-size:11.5px;color:var(--ink50)}
.p-foot b{font-weight:600;color:var(--ink70)}
.gate{background:var(--surfaceAlt);border:1px solid var(--hairline);border-radius:12px;padding:10px 13px}
.gate .g-t{font-size:13px;font-weight:600;margin-top:3px;line-height:1.35}

/* ── sidebar: tool group ── */
.nav{overflow-y:auto}
.nav-grp{font-size:9.5px;font-weight:700;letter-spacing:0.9px;text-transform:uppercase;color:var(--ink30);padding:13px 14px 4px}
.nav-item.sm{padding:2px 10px;gap:9px;min-height:40px}
.nav-item.sm img{width:36px;height:36px}
.nav-item.sm span{font-size:12.5px}
/* ── tool screens: shared primitives ── */
.t-fig{font-size:42px;font-weight:800;letter-spacing:-2px;font-variant-numeric:tabular-nums;line-height:1}
.t-fig em{font-style:normal;font-size:16px;font-weight:700;letter-spacing:-0.2px;color:var(--ink50)}
.t-cap{font-size:11.5px;color:var(--ink50);margin-top:6px}
.t-kpi{display:flex;flex-direction:column;justify-content:center;background:var(--surfaceAlt);border:1px solid var(--hairline);border-radius:13px;padding:10px 14px;min-width:0}
.t-kpi b{font-size:23px;font-weight:700;letter-spacing:-0.9px;font-variant-numeric:tabular-nums;line-height:1.1}
.t-kpi i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink50);margin-top:2px;white-space:nowrap}
.t-chart{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:space-between;gap:8px;padding-top:8px}
.t-bar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.t-track{flex:1;min-height:0;width:100%;max-width:30px;background:var(--ink10);border-radius:8px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.t-fill{background:var(--ink);border-radius:8px}
.t-bar em{font-style:normal;font-size:10px;font-weight:600;color:var(--ink50)}
.t-bar u{text-decoration:none;font-size:9.5px;color:var(--ink30);font-variant-numeric:tabular-nums}
.t-rows{flex:1;min-height:0;display:flex;flex-direction:column}
.t-row{flex:1;min-height:0;display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--divider)}
.t-row:last-child{border-bottom:none}
.t-time{width:58px;flex-shrink:0;font-size:11px;font-weight:600;color:var(--ink50);font-variant-numeric:tabular-nums}
.t-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-sub{font-size:10.5px;color:var(--ink50);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0}
.t-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surfaceAlt);border:1px solid var(--hairline);border-radius:10px;padding:7px 11px;font-size:11.5px;font-weight:700;white-space:nowrap}
.t-chip u{text-decoration:none;color:var(--ink50);font-weight:600;font-variant-numeric:tabular-nums}
.t-dot{width:8px;height:8px;border-radius:50%;background:var(--ink10);flex-shrink:0}

/* ── narrow viewports (≤820px): the SAME sidebar collapses to an icon rail —
   nav order and targets unchanged, labels hidden; tap targets stay ≥40px ── */
@media (max-width:820px){
.sidebar{width:60px}
.brand{padding:16px 4px 8px;font-size:10.5px;letter-spacing:0;text-align:center;white-space:nowrap;overflow:hidden}
.nav{padding:4px 6px}
.nav-item{justify-content:center;padding:0;gap:0;min-height:44px}
.nav-item.sm{padding:0;min-height:40px}
.nav-item span{display:none}
.nav-grp{padding:8px 0 2px;text-align:center;font-size:8px;letter-spacing:0.4px}
.nav-item.active::before{left:-6px}
.nav-foot{padding:6px 6px 12px}
.content{padding:14px 12px 20px}
.stat-strip{overflow-x:auto}
}