:root {
  --bg:     #F8F6F2;
  --white:  #FFFFFF;
  --s2:     #F1EEE8;
  --s3:     #E8E4DC;
  --s4:     #DED9CF;
  --border: #D4CFC5;
  --b2:     #C4BEB2;
  --ink:    #1C1A16;
  --ink2:   #4A4640;
  --ink3:   #8A8580;
  --ink4:   #BCB8B2;
  --accent: #1E56D6;
  --acc2:   #EBF0FF;
  --acc3:   #1440A8;
  --green:  #1A7A4A;
  --grn2:   #E6F4EE;
  --amber:  #8C5200;
  --amb2:   #FEF4E0;
  --red:    #C42828;
  --red2:   #FDEAEA;
  --purple: #6030C0;
  --prp2:   #F0EAFF;
  --teal:   #0C6E6E;
  --tel2:   #E2F4F4;
  --orange: #C44E00;
  --org2:   #FFF1E8;
  --font:   'Outfit', sans-serif;
  --mono:   'Fira Code', monospace;
  --r:8px; --rl:12px; --rx:16px;
  --sh: 0 1px 3px rgba(28,26,22,.07), 0 4px 16px rgba(28,26,22,.04);
  --sh-md: 0 2px 10px rgba(28,26,22,.09), 0 8px 28px rgba(28,26,22,.05);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); font-size:13px; line-height:1.55; -webkit-font-smoothing:antialiased; }

/* ── Shell ── */
.shell { display:flex; min-height:100vh; }
.sidebar { width:222px; flex-shrink:0; background:var(--ink); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar::-webkit-scrollbar { width:0; }
.sb-brand { padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.sb-name { font-size:15px; font-weight:700; color:#fff; letter-spacing:-.3px; }
.sb-mod { font-size:11px; color:rgba(255,255,255,.3); margin-top:2px; }
.sb-grp { padding:14px 16px 4px; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.25); }
.sbi { display:flex; align-items:center; gap:9px; padding:7px 12px 7px 16px; margin:1px 6px; border-radius:6px; cursor:pointer; color:rgba(255,255,255,.48); font-size:12.5px; transition:all .12s; user-select:none; }
.sbi:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.82); }
.sbi.on { background:rgba(30,86,214,.28); color:#8AB0FF; font-weight:500; }
.sb-ic { font-size:13px; width:15px; text-align:center; flex-shrink:0; }
.sb-badge { margin-left:auto; background:var(--red); color:#fff; font-size:10px; padding:1px 5px; border-radius:10px; font-weight:700; }

.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.topbar { height:54px; background:var(--white); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 24px; gap:12px; flex-shrink:0; }
.topbar-title { font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.3px; }
.chip { border-radius:6px; padding:4px 12px; font-size:12px; font-weight:500; display:flex; align-items:center; gap:5px; }
.chip-fy { background:var(--s2); border:1px solid var(--border); color:var(--ink2); }
.chip-warn { background:var(--amb2); border:1px solid rgba(140,82,0,.2); color:var(--amber); }
.chip-ok { background:var(--grn2); border:1px solid rgba(26,122,74,.2); color:var(--green); }
.topbar-acts { margin-left:auto; display:flex; gap:8px; }

.subnav { display:flex; background:var(--white); border-bottom:1px solid var(--border); padding:0 24px; overflow-x:auto; flex-shrink:0; }
.subnav::-webkit-scrollbar { height:0; }
.snt { display:flex; align-items:center; gap:6px; padding:11px 16px; font-size:12.5px; font-weight:500; color:var(--ink3); cursor:pointer; border-bottom:2.5px solid transparent; white-space:nowrap; transition:all .12s; user-select:none; }
.snt:hover { color:var(--ink2); }
.snt.on { color:var(--accent); border-bottom-color:var(--accent); }
.snt-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

.content { flex:1; overflow-y:auto; padding:22px 24px 60px; }
.content::-webkit-scrollbar { width:4px; }
.content::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.view { display:none; }
.view.active { display:block; animation:fu .2s ease; }
@keyframes fu { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:var(--r); font-family:var(--font); font-size:12.5px; font-weight:500; cursor:pointer; border:none; transition:all .13s; white-space:nowrap; }
.bp { background:var(--accent); color:#fff; } .bp:hover { background:var(--acc3); }
.bs { background:var(--white); color:var(--ink); border:1px solid var(--b2); } .bs:hover { background:var(--s2); }
.bg { background:transparent; color:var(--ink2); border:1px solid var(--border); } .bg:hover { background:var(--s2); }
.bsucc { background:var(--green); color:#fff; } .bsucc:hover { background:#135c38; }
.bamb { background:var(--amb2); color:var(--amber); border:1px solid rgba(140,82,0,.2); }
.btn-sm { padding:5px 11px; font-size:12px; } .btn-xs { padding:3px 8px; font-size:11px; }
.icon-btn { width:30px; height:30px; border-radius:7px; background:var(--s2); border:1px solid var(--border); color:var(--ink3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:13px; transition:all .1s; }
.icon-btn:hover { background:var(--s3); color:var(--ink); }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:500; white-space:nowrap; }
.bgg { background:var(--grn2); color:var(--green); }
.bga { background:var(--amb2); color:var(--amber); }
.bgr { background:var(--red2); color:var(--red); }
.bgb { background:var(--acc2); color:var(--acc3); }
.bgp { background:var(--prp2); color:var(--purple); }
.bgt { background:var(--tel2); color:var(--teal); }
.bgo { background:var(--org2); color:var(--orange); }
.bgmt { background:var(--s3); color:var(--ink2); }

/* ── Cards ── */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--rx); overflow:hidden; box-shadow:var(--sh); }
.card-hd { padding:13px 18px; border-bottom:1px solid var(--border); background:var(--s2); display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:13px; font-weight:600; color:var(--ink); }
.card-sub { font-size:11.5px; color:var(--ink3); margin-top:1px; }
.card-body { padding:18px; }

/* ── Stat cards ── */
.sg5 { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
.sg4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.sg3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sc { background:var(--white); border:1px solid var(--border); border-radius:var(--rl); padding:14px 16px; box-shadow:var(--sh); position:relative; overflow:hidden; }
.sc::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.sg::after { background:var(--green); } .sa::after { background:var(--amber); } .sr::after { background:var(--red); }
.sb::after { background:var(--accent); } .sp::after { background:var(--purple); } .st::after { background:var(--teal); }
.sc-lbl { font-size:11px; color:var(--ink3); font-weight:500; letter-spacing:.03em; }
.sc-val { font-size:22px; font-weight:700; color:var(--ink); margin-top:4px; letter-spacing:-.5px; }
.sc-sub { font-size:11px; color:var(--ink3); margin-top:3px; }

/* ── Table ── */
.tbl-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--rx); overflow:hidden; box-shadow:var(--sh); }
table { width:100%; border-collapse:collapse; }
thead th { background:var(--s2); padding:9px 14px; text-align:left; font-size:11px; font-weight:600; color:var(--ink2); letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--border); white-space:nowrap; }
thead th:first-child { padding-left:18px; }
tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--s2); }
td { padding:11px 14px; vertical-align:middle; font-size:13px; color:var(--ink); }
td:first-child { padding-left:18px; }
.mono { font-family:var(--mono); font-size:12px; }
.ng { color:var(--green); font-weight:600; } .na { color:var(--amber); font-weight:600; }
.nr { color:var(--red); font-weight:600; } .nm { color:var(--ink3); }
.tbl-foot { padding:10px 16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink3); background:var(--s2); }
.row-act { display:flex; gap:4px; opacity:0; transition:opacity .12s; }
tbody tr:hover .row-act { opacity:1; }

/* ── Forms ── */
.fld { height:33px; padding:0 10px; background:var(--white); border:1px solid var(--border); border-radius:var(--r); color:var(--ink); font-family:var(--font); font-size:13px; outline:none; transition:border-color .15s,box-shadow .15s; width:100%; }
.fld:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--acc2); }
.fld::placeholder { color:var(--ink4); }
select.fld { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8580' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:26px; }
.fld-lbl { font-size:11.5px; font-weight:600; color:var(--ink2); margin-bottom:4px; display:block; }
.fld-hint { font-size:11px; color:var(--ink3); margin-top:3px; }
.frow { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.fg { display:flex; flex-direction:column; flex:1; min-width:120px; }
.fg.w120 { flex:0 0 120px; } .fg.w140 { flex:0 0 140px; } .fg.w160 { flex:0 0 160px; }
.fg.w200 { flex:0 0 200px; } .fg.w240 { flex:0 0 240px; } .fg.full { flex:1 1 100%; }

/* Toggle */
.tog { position:relative; width:34px; height:18px; display:inline-block; cursor:pointer; flex-shrink:0; }
.tog input { opacity:0; width:0; height:0; position:absolute; }
.tog-track { position:absolute; inset:0; background:var(--b2); border-radius:9px; transition:background .2s; }
.tog input:checked + .tog-track { background:var(--accent); }
.tog-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:transform .2s; }
.tog input:checked ~ .tog-thumb { transform:translateX(16px); }
.tog-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.tog-row:last-child { border-bottom:none; }

/* Callout */
.callout { display:flex; gap:9px; padding:10px 14px; border-radius:var(--r); font-size:12.5px; line-height:1.5; margin-bottom:16px; }
.ci { background:var(--acc2); color:var(--acc3); border-left:3px solid var(--accent); }
.cw { background:var(--amb2); color:var(--amber); border-left:3px solid #D4A017; }
.cg { background:var(--grn2); color:var(--green); border-left:3px solid var(--green); }
.cr { background:var(--red2); color:var(--red); border-left:3px solid var(--red); }

/* Layout */
.ph { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.ph-title { font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.4px; }
.ph-sub { font-size:13px; color:var(--ink3); margin-top:3px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.det-lay { display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; }
.sticky-r { position:sticky; top:16px; }
.divider { height:1px; background:var(--border); margin:16px 0; }
.sec-hd { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); padding-bottom:8px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.pbar { height:5px; background:var(--s3); border-radius:3px; overflow:hidden; }
.pfill { height:100%; border-radius:3px; }
.ec { display:flex; align-items:center; gap:9px; }
.av { width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.sl { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--border); }
.sl:last-child { border-bottom:none; }
.sl-lbl { font-size:12.5px; color:var(--ink2); }
.sl-val { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); }
.ropt { display:flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--border); border-radius:var(--r); cursor:pointer; font-size:12.5px; color:var(--ink2); background:var(--s2); transition:all .12s; }
.ropt.on { border-color:var(--accent); background:var(--acc2); color:var(--acc3); }
.rgrp { display:flex; gap:8px; flex-wrap:wrap; }

/* ── SPECIFIC ── */

/* Form 16 document preview */
.f16-preview {
  background:var(--white); border:1px solid var(--border); border-radius:var(--rl);
  box-shadow:var(--sh-md); overflow:hidden; font-size:12.5px;
}
.f16-header {
  background:var(--ink); color:#fff; padding:14px 20px; text-align:center;
}
.f16-header-title { font-size:14px; font-weight:700; letter-spacing:.5px; }
.f16-header-sub { font-size:11px; color:rgba(255,255,255,.55); margin-top:3px; }
.f16-body { padding:16px 20px; }
.f16-row { display:flex; gap:0; margin-bottom:8px; }
.f16-lbl { flex:0 0 220px; font-size:12px; color:var(--ink3); }
.f16-val { flex:1; font-size:12.5px; color:var(--ink); font-weight:500; }
.f16-section { background:var(--s2); border-radius:var(--r); padding:10px 14px; margin:10px 0; }
.f16-section-title { font-size:11px; font-weight:700; color:var(--ink2); letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.f16-line { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--border); font-size:12px; }
.f16-line:last-child { border-bottom:none; }
.f16-total { display:flex; justify-content:space-between; padding:8px 0; border-top:2px solid var(--ink); margin-top:4px; font-weight:700; font-size:13px; }
.f16-sig { padding:14px 20px; border-top:1px solid var(--border); background:var(--s2); display:flex; justify-content:space-between; align-items:center; }

/* Compliance card */
.comp-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--rl);
  padding:0; overflow:hidden; box-shadow:var(--sh); margin-bottom:10px;
}
.comp-card-hd { padding:12px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); background:var(--s2); }
.comp-card-icon { font-size:22px; }
.comp-card-name { font-size:13px; font-weight:600; color:var(--ink); }
.comp-card-sub { font-size:11.5px; color:var(--ink3); margin-top:1px; }
.comp-card-body { padding:12px 16px; }

/* Calendar event */
.cal-event {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.cal-event:last-child { border-bottom:none; }
.cal-date { flex-shrink:0; width:44px; text-align:center; background:var(--s2); border-radius:var(--r); padding:6px 4px; border:1px solid var(--border); }
.cal-date-day { font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.5px; line-height:1; }
.cal-date-mon { font-size:9px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.cal-event-body { flex:1; }
.cal-event-title { font-size:13px; font-weight:500; color:var(--ink); }
.cal-event-sub { font-size:11.5px; color:var(--ink3); margin-top:2px; }
.cal-event-due { flex-shrink:0; text-align:right; }
.cal-urgency { width:4px; flex-shrink:0; border-radius:2px; align-self:stretch; }

/* Stepper */
.stepper { display:flex; align-items:center; margin-bottom:20px; }
.step { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; position:relative; }
.step::after { content:''; position:absolute; top:16px; left:calc(50% + 18px); right:calc(-50% + 18px); height:2px; background:var(--border); }
.step:last-child::after { display:none; }
.step.done::after { background:var(--green); }
.step-circle { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border:2px solid var(--border); background:var(--white); color:var(--ink3); position:relative; z-index:1; }
.step.done .step-circle { background:var(--green); border-color:var(--green); color:#fff; }
.step.cur .step-circle { background:var(--accent); border-color:var(--accent); color:#fff; }
.step-lbl { font-size:11px; font-weight:500; color:var(--ink3); text-align:center; }
.step.done .step-lbl, .step.cur .step-lbl { color:var(--ink2); }

/* Status pill for return filing */
.return-row { display:flex; align-items:center; gap:0; padding:12px 16px; border-bottom:1px solid var(--border); }
.return-row:last-child { border-bottom:none; }
.return-icon { font-size:22px; width:38px; text-align:center; flex-shrink:0; }
.return-name { flex:1; }
.return-title { font-size:13px; font-weight:500; color:var(--ink); }
.return-sub { font-size:11.5px; color:var(--ink3); margin-top:1px; }
.return-due { font-size:12px; font-family:var(--mono); color:var(--ink2); min-width:90px; text-align:center; }
.return-status { min-width:130px; text-align:right; }
.return-action { margin-left:8px; }

/* Stats bar for Form 16 progress */
.progress-ring-wrap { display:flex; align-items:center; gap:14px; }
.progress-ring { width:56px; height:56px; flex-shrink:0; }
.pring-track { fill:none; stroke:var(--s3); stroke-width:5; }
.pring-fill { fill:none; stroke-width:5; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .5s; }

/* Period badge for ECR etc */
.period-badge { font-family:var(--mono); font-size:11px; background:var(--s2); border:1px solid var(--border); border-radius:5px; padding:2px 7px; color:var(--ink2); }

/* Part A vs Part B selector */
.part-selector { display:flex; gap:0; background:var(--s2); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:16px; }
.part-btn { flex:1; padding:8px; text-align:center; font-size:12.5px; font-weight:500; cursor:pointer; color:var(--ink3); transition:all .12s; border-right:1px solid var(--border); }
.part-btn:last-child { border-right:none; }
.part-btn.on { background:var(--accent); color:#fff; }
.part-btn:not(.on):hover { background:var(--s3); color:var(--ink); }

/* Audit item */
.ai { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.ai:last-child { border-bottom:none; }
.ai-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.ai-msg { font-size:12.5px; color:var(--ink); }
.ai-meta { font-size:11px; color:var(--ink3); margin-top:1px; }