@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');
/* ════════════════════════════════════════════════════
   DARK / LIGHT MODE + PROFESSIONAL COLOR THEMES
   ════════════════════════════════════════════════════ */
:root {
  --db:#1E293B;--mb:#3B82F6;--lb:#DBEAFE;--sb:#EFF6FF;--lg:#F8FAFC;
  --gold:#92400E;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#166534;--greenbg:#DCFCE7;--red:#991B1B;--redbg:#FEE2E2;
  --border:#CBD5E1;--text:#0F172A;--muted:#64748B;--white:#fff;
  --bg-page:#F1F5F9;--bg-card:#ffffff;--bg-sidebar:#ffffff;
  --text-primary:#0F172A;--text-muted:#64748B;
  --accent:#F59E0B;
  --r:8px;--sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  color-scheme: light;
  /* Anti-flicker: GPU layer hints & font smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ════════════════════════════════════════════════════
   ANTI-FLICKER, ANTI-GLITCH & GPU ACCELERATION
   ════════════════════════════════════════════════════ */
.topbar, .sidebar, .bottom-nav, .mobile-sec-tabs, .card, .sec, .btn, .ar, .fl input, .fl select {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Fixed tabular-nums for numeric figures to prevent layout shaking during typing */
.mono, .ad, .av, .nm, .sv, .ai, input[type="number"], .pt td {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

/* Zero Cumulative Layout Shift (CLS) & rendering optimization */
.card {
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: 0 120px;
}

.no-transitions * {
  transition: none !important;
}
/* ── DARK MODE ── */
[data-theme="dark"] {
  --lg:#1E293B;--white:#1E293B;
  --bg-page:#0F172A;--bg-card:#1E293B;--bg-sidebar:#162032;
  --text-primary:#E2E8F0;--text-muted:#94A3B8;
  --border:#334155;--lb:#1E3A5F;--sb:#172554;
  --sh:0 1px 3px rgba(0,0,0,.4);
  color-scheme: dark;
}
[data-theme="dark"] body { background:var(--bg-page); color:var(--text-primary); }
[data-theme="dark"] .card { background:var(--bg-card); border-color:var(--border); }
[data-theme="dark"] .sidebar { background:var(--bg-sidebar); border-color:var(--border); }
[data-theme="dark"] .fl input,[data-theme="dark"] .fl select { background:#0F172A; color:var(--text-primary); border-color:var(--border); }
[data-theme="dark"] .fl input:focus,[data-theme="dark"] .fl select:focus { background:#1E293B; }
[data-theme="dark"] .ar { background:var(--bg-card); border-color:var(--border); }
[data-theme="dark"] .ar:nth-child(even) { background:#162032; }
[data-theme="dark"] .ar.tot { background:var(--lb); color:var(--text-primary); }
[data-theme="dark"] .ar.sub { background:var(--lb); color:var(--text-primary); }
[data-theme="dark"] .ad { color:var(--text-primary); }
[data-theme="dark"] .ar.note { background:#1C1917; border-color:#44403C; color:#FCD34D; }
[data-theme="dark"] .ai { background:#0F172A; color:var(--text-primary); border-color:var(--border); }
[data-theme="dark"] .sec-h { color:var(--accent); }
[data-theme="dark"] .ng { color:var(--text-muted); }
[data-theme="dark"] .ni { color:var(--text-muted); }
[data-theme="dark"] .ni:hover { background:var(--lb); color:var(--accent); }
[data-theme="dark"] .ni.active { background:var(--lb); color:var(--accent); }
/* Preview panel always stays white/light regardless of dark theme */
[data-theme="dark"] .pw { background:#ffffff; border-color:#CBD5E1; }
[data-theme="dark"] .pt td { border-color:#DBEAFE; color:#0F172A; }
[data-theme="dark"] .pt tr:nth-child(even) td { background:#F8FAFC; }
[data-theme="dark"] .pt tr.tr td { background:#DBEAFE; color:#1E293B; }
[data-theme="dark"] .pt tr td { color:#0F172A; }
[data-theme="dark"] .pt tr.sc td { background:#3B82F6; color:#fff; }
[data-theme="dark"] .pl { background:#ffffff; color:#3B82F6; }
[data-theme="dark"] .itr-tabs { border-color:var(--border); }
[data-theme="dark"] .it { background:#0F172A; color:var(--text-muted); border-color:var(--border); }
[data-theme="dark"] .rt { border-color:var(--border); }
[data-theme="dark"] .rb { background:#0F172A; color:var(--text-muted); }
[data-theme="dark"] .yb { background:#0F172A; color:var(--text-muted); border-color:var(--border); }
[data-theme="dark"] .yb:hover { background:var(--lb); }
[data-theme="dark"] .um-box { background:#1E293B; }
[data-theme="dark"] .um-form { background:#162032; border-color:var(--border); }
[data-theme="dark"] .um-form .fl input,[data-theme="dark"] .um-form .fl select { background:#0F172A; color:var(--text-primary); }
[data-theme="dark"] .um-table td { border-color:var(--border); }
[data-theme="dark"] .um-table tr:hover td { background:#1E3A5F; }
[data-theme="dark"] .login-box { background:#1E293B; }
[data-theme="dark"] .login-field input { background:#0F172A; color:var(--text-primary); border-color:var(--border); }
[data-theme="dark"] .login-demo-hint { background:#172554; }
[data-theme="dark"] .notice.nb { background:var(--sb); border-color:var(--lb); }
[data-theme="dark"] .notice.ng { background:#14532D; border-color:#166534; color:#DCFCE7; }
[data-theme="dark"] .ng2 { background:#292524; border-color:#57534E; }
[data-theme="dark"] .slab-t td { border-color:var(--border); }
[data-theme="dark"] .slab-t tr:nth-child(even) td { background:#162032; }
[data-theme="dark"] .sb-search input { background:#0F172A; color:var(--text-primary); border-color:var(--border); }
[data-theme="dark"] .sb-search input:focus { background:#1E293B; }
[data-theme="dark"] .breadcrumb-bar { background:#0F172A; border-color:var(--border); }
[data-theme="dark"] .breadcrumb-bar .bc-current { color:var(--accent); }
[data-theme="dark"] .ni.bookmarked .bm-star { color:#FCD34D; }
[data-theme="dark"] .last-updated { color:var(--text-muted); border-color:var(--border); }
[data-theme="dark"] .ref-table-wrap table { border-color:var(--border); }
[data-theme="dark"] .ref-table-wrap th { background:#162032; color:var(--text-primary); border-color:var(--border); }
[data-theme="dark"] .ref-table-wrap td { border-color:var(--border); color:var(--text-primary); }
[data-theme="dark"] .ref-table-wrap tr:nth-child(even) td { background:#162032; }


/* ── PROFESSIONAL COLOR THEMES ── */
[data-color="default"] {
  --db:#1E293B;--mb:#3B82F6;--lb:#DBEAFE;--sb:#EFF6FF;
  --gold:#92400E;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#166534;--greenbg:#DCFCE7;--accent:#F59E0B;
  --border:#CBD5E1;
}

[data-color="ocean"] {
  --db:#0C4A6E;--mb:#0284C7;--lb:#BAE6FD;--sb:#E0F2FE;
  --gold:#92400E;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#155E75;--greenbg:#CFFAFE;--accent:#38BDF8;
  --border:#BAE6FD;
}

[data-color="emerald"] {
  --db:#064E3B;--mb:#059669;--lb:#A7F3D0;--sb:#D1FAE5;
  --gold:#92400E;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#065F46;--greenbg:#D1FAE5;--accent:#34D399;
  --border:#A7F3D0;
}

[data-color="rose"] {
  --db:#881337;--mb:#E11D48;--lb:#FFE4E6;--sb:#FFF1F2;
  --gold:#92400E;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#166534;--greenbg:#DCFCE7;--accent:#FB7185;
  --border:#FFE4E6;
}

[data-color="violet"] {
  --db:#3B0764;--mb:#7C3AED;--lb:#DDD6FE;--sb:#EDE9FE;
  --gold:#92400E;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#166534;--greenbg:#DCFCE7;--accent:#A78BFA;
  --border:#DDD6FE;
}

[data-color="teal"] {
  --db:#134E4A;--mb:#0D9488;--lb:#99F6E4;--sb:#CCFBF1;
  --gold:#92400E;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#115E59;--greenbg:#CCFBF1;--accent:#2DD4BF;
  --border:#99F6E4;
}

[data-color="slate"] {
  --db:#1E293B;--mb:#475569;--lb:#E2E8F0;--sb:#F1F5F9;
  --gold:#78350F;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#166534;--greenbg:#DCFCE7;--accent:#94A3B8;
  --border:#CBD5E1;
}

[data-color="amber"] {
  --db:#78350F;--mb:#D97706;--lb:#FDE68A;--sb:#FEF3C7;
  --gold:#78350F;--goldbg:#FFFBEB;--goldbd:#F59E0B;
  --green:#166534;--greenbg:#DCFCE7;--accent:#FBBF24;
  --border:#FDE68A;
}

[data-color="indigo"] {
  --db:#312E81;--mb:#4F46E5;--lb:#C7D2FE;--sb:#E0E7FF;
  --gold:#92400E;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#166534;--greenbg:#DCFCE7;--accent:#818CF8;
  --border:#C7D2FE;
}

[data-color="stone"] {
  --db:#292524;--mb:#78716C;--lb:#E7E5E4;--sb:#F5F5F4;
  --gold:#78350F;--goldbg:#FFFBEB;--goldbd:#FCD34D;
  --green:#166534;--greenbg:#DCFCE7;--accent:#A8A29E;
  --border:#D6D3D1;
}

[data-color="plaintext"] {
  --db:#262626;--mb:#525252;--lb:#e5e5e5;--sb:#fcfcfc;
  --gold:#737373;--goldbg:#fafafa;--goldbd:#d4d4d4;
  --green:#166534;--greenbg:#f0fdf4;--accent:#737373;
  --border:#d4d4d4;
}

/* ── MONOCHROME (ChatGPT-style) ── */
[data-color="mono"] {
  --db:#0d0d0d;--mb:#444444;--lb:#e5e5e5;--sb:#f0f0f0;
  --gold:#555555;--goldbg:#f5f5f5;--goldbd:#cccccc;
  --green:#10a37f;--greenbg:#e6f6f3;--red:#d32f2f;--redbg:#fdf0f0;
  --border:#e0e0e0;--accent:#10a37f;
  --bg-page:#f7f7f8;--bg-card:#ffffff;--bg-sidebar:#ffffff;
  --text-primary:#0d0d0d;--text-muted:#6e6e6e;
}
/* Monochrome topbar: pure black */
[data-color="mono"] .topbar { background:#000000 !important; }
[data-color="mono"] .topbar .tb-left h1 { color:#ffffff; }
[data-color="mono"] .topbar .tb-left p  { color:#a0a0a0; }
[data-color="mono"] .ni.active { background:#f0f0f0; color:#0d0d0d; border-left-color:#10a37f; }
[data-color="mono"] .ni:hover  { background:#f7f7f8; color:#0d0d0d; }
[data-color="mono"] .ct { color:#444444; }
[data-color="mono"] .sec-h { color:#0d0d0d; }
[data-color="mono"] .btn.bp { background:#0d0d0d; }
[data-color="mono"] .btn.bp:hover { background:#333333; }
[data-color="mono"] .it.active { background:#0d0d0d; color:#ffffff; }
[data-color="mono"] .rb.rn { background:#e6f6f3; color:#10a37f; }
[data-color="mono"] .yb.active { background:#0d0d0d; color:#ffffff; }
[data-color="mono"] .badge { background:#e0e0e0; color:#0d0d0d; }
[data-color="mono"] .ar.tot { background:#f0f0f0; }
[data-color="mono"] .ar.sub { background:#f5f5f5; }

/* Monochrome DARK (ChatGPT true dark: #212121) */
[data-color="mono"][data-theme="dark"] {
  --db:#ececec;--mb:#b0b0b0;--lb:#2f2f2f;--sb:#292929;
  --gold:#a0a0a0;--goldbg:#2a2a2a;--goldbd:#444444;
  --green:#10a37f;--greenbg:#1a2e2a;--red:#e57373;--redbg:#2e1a1a;
  --border:#3e3e3e;--accent:#10a37f;
  --bg-page:#212121;--bg-card:#2f2f2f;--bg-sidebar:#171717;
  --text-primary:#ececec;--text-muted:#8e8ea0;
}
[data-color="mono"][data-theme="dark"] .topbar { background:#000000 !important; }
[data-color="mono"][data-theme="dark"] .fl input,
[data-color="mono"][data-theme="dark"] .fl select { background:#3e3e3e; color:#ececec; border-color:#555555; }
[data-color="mono"][data-theme="dark"] .fl input:focus,
[data-color="mono"][data-theme="dark"] .fl select:focus { background:#4a4a4a; border-color:#888888; }
[data-color="mono"][data-theme="dark"] .it { background:#2f2f2f; color:#8e8ea0; border-color:#3e3e3e; }
[data-color="mono"][data-theme="dark"] .it.active { background:#ececec; color:#000000; }
[data-color="mono"][data-theme="dark"] .yb { background:#2f2f2f; color:#8e8ea0; border-color:#3e3e3e; }
[data-color="mono"][data-theme="dark"] .yb:hover,
[data-color="mono"][data-theme="dark"] .yb.active { background:#ececec; color:#000000; }
[data-color="mono"][data-theme="dark"] .btn.bp { background:#ececec; color:#000000; }
[data-color="mono"][data-theme="dark"] .btn.bp:hover { background:#ffffff; }
[data-color="mono"][data-theme="dark"] .ar.tot { background:#383838; }
[data-color="mono"][data-theme="dark"] .ar.sub { background:#333333; }
[data-color="mono"][data-theme="dark"] .ar { background:#2f2f2f; border-color:#3e3e3e; }
[data-color="mono"][data-theme="dark"] .ar:nth-child(even) { background:#292929; }
[data-color="mono"][data-theme="dark"] .ni.active { background:#2f2f2f; color:#ececec; border-left-color:#10a37f; }
[data-color="mono"][data-theme="dark"] .ni:hover { background:#292929; color:#ececec; }
[data-color="mono"][data-theme="dark"] .badge { background:#3e3e3e; color:#ececec; }
[data-color="mono"][data-theme="dark"] .sec-h { color:#ececec; }
[data-color="mono"][data-theme="dark"] .ct { color:#b0b0b0; border-color:#3e3e3e; }
[data-color="mono"][data-theme="dark"] .rb { background:#2f2f2f; color:#8e8ea0; }
[data-color="mono"][data-theme="dark"] .rb.rn { background:#1a2e2a; color:#10a37f; }
[data-color="mono"][data-theme="dark"] .theme-panel { background:#2f2f2f; border-color:#3e3e3e; }
[data-color="mono"][data-theme="dark"] .toggle-sw .slider { background:#555555; }
/* Preview forced white in all theme/color combos */
[data-theme="dark"] .pw { background:#ffffff !important; border-color:#C8D8EE !important; }
[data-color="mono"][data-theme="dark"] .pt td { border-color:#D6E4F7 !important; color:#1A1A2E !important; }
[data-color="mono"][data-theme="dark"] .pt tr:nth-child(even) td { background:#F5F7FA !important; }
[data-color="mono"][data-theme="dark"] .pt tr.tr td { background:#D6E4F7 !important; color:#1B3A6B !important; }
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Sans',sans-serif;background:var(--bg-page);color:var(--text-primary);transition:background .15s ease,color .15s ease;overflow-x:hidden}
.topbar{background:var(--db);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:54px;position:sticky;top:0;z-index:200;box-shadow:0 1px 4px rgba(0,0,0,.12);will-change:transform;transform:translate3d(0,0,0)}
.tb-left h1{color:#fff;font-size:14px;font-weight:700}.tb-left p{color:#93C5FD;font-size:10px}
.tb-right{display:flex;gap:8px;align-items:center}
.tb-right button{min-height:36px;min-width:36px}
.badge{background:var(--accent);color:var(--db);font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.layout{display:grid;grid-template-columns:196px 1fr;min-height:calc(100vh - 54px)}
.sidebar{background:var(--white);border-right:1px solid var(--border);padding:14px 0;position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto;will-change:transform;transform:translate3d(0,0,0)}
/* Sidebar search */
.sb-search{padding:0 12px 10px;position:relative}
.sb-search input{width:100%;border:1px solid var(--border);border-radius:6px;padding:7px 10px 7px 30px;font-size:11.5px;font-family:inherit;color:var(--text);background:var(--lg);outline:none;transition:border .13s}
.sb-search input:focus{border-color:var(--mb);box-shadow:0 0 0 2px rgba(46,95,163,.08)}
.sb-search .sb-icon{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.sb-search .sb-clear{position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;cursor:pointer;display:none;background:none;border:none;padding:2px}
.sb-search .sb-clear:hover{color:var(--red)}
/* Collapsible sidebar groups */
.ng{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;padding:12px 16px 4px;cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px;transition:color .12s}
.ng:hover{color:var(--db)}
.ng .ng-arrow{font-size:8px;transition:transform .2s;display:inline-block;flex-shrink:0}
.ng.collapsed .ng-arrow{transform:rotate(-90deg)}
.ng.collapsed+.ni,.ng.collapsed~.ni{display:none}
/* Hide items until next .ng */
.ng+.ni{display:flex}
.ng-group-items{display:flex;flex-direction:column}
.ng-group-items.collapsed{display:none}
.ni{display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;border-left:3px solid transparent;transition:all .12s ease;will-change:background}
.ni:hover{background:var(--sb);color:var(--db)}.ni.active{background:var(--lb);color:var(--db);border-left-color:var(--mb);font-weight:600}
.ni.hidden-by-search{display:none !important}
.nd{width:6px;height:6px;border-radius:50%;background:var(--border);flex-shrink:0}.ni.active .nd{background:var(--mb)}
/* Bookmark star */
.ni .bm-star{font-size:11px;cursor:pointer;opacity:0;transition:opacity .12s;flex-shrink:0;margin-left:auto}
.ni:hover .bm-star,.ni.bookmarked .bm-star{opacity:1}
.ni.bookmarked .bm-star{color:var(--accent)}
/* Breadcrumb bar */
.breadcrumb-bar{display:flex;align-items:center;gap:6px;padding:6px 26px;font-size:11px;color:var(--muted);background:var(--lg);border-bottom:1px solid var(--border);flex-wrap:wrap}
.breadcrumb-bar .bc-sep{color:var(--border);font-size:10px}
.breadcrumb-bar .bc-item{color:var(--muted);font-weight:500;cursor:pointer;transition:color .12s}
.breadcrumb-bar .bc-item:hover{color:var(--db)}
.breadcrumb-bar .bc-current{color:var(--db);font-weight:600}
/* Last updated timestamps */
.last-updated{font-size:9.5px;color:var(--muted);font-style:italic;margin-top:8px;padding-top:6px;border-top:1px dashed var(--border)}
.last-updated::before{content:'🕐 '}
.main{padding:22px 26px;overflow-y:auto}
.sec{display:none;animation:fadeSlideIn .2s ease}.sec.active{display:block}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.sec-h{font-size:17px;font-weight:700;color:var(--db);margin-bottom:3px}
.sec-d{font-size:11px;color:var(--muted);margin-bottom:16px}
.card{background:var(--bg-card,var(--white));border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;margin-bottom:14px;box-shadow:var(--sh);transition:box-shadow .15s ease,background .15s ease,border-color .15s ease;contain:layout style}
.ct{font-size:10px;font-weight:700;color:var(--mb);letter-spacing:.8px;text-transform:uppercase;margin-bottom:11px;padding-bottom:6px;border-bottom:1px solid var(--lb)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}.full{grid-column:1/-1}
.fl label{display:block;font-size:10.5px;font-weight:600;color:var(--db);margin-bottom:4px}
.fl input,.fl select{width:100%;border:1px solid var(--border);border-radius:4px;padding:6px 9px;font-size:12px;font-family:inherit;color:var(--text);background:var(--lg);outline:none;transition:border .13s}
.fl input:focus,.fl select:focus{border-color:var(--mb);background:#fff;box-shadow:0 0 0 3px rgba(46,95,163,.10)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:11.5px}
.hint{font-size:9.5px;color:var(--muted);margin-top:2px}
/* date-wrap removed */
/* date picker button removed */
.itr-tabs{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:visible;margin-bottom:6px;flex-wrap:nowrap}
.it{flex:1;min-width:0;padding:9px 4px;text-align:center;font-size:11px;font-weight:600;cursor:pointer;background:var(--lg);color:var(--muted);border:none;border-right:1px solid var(--border);transition:all .13s;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it:last-child{border-right:none}.it.active{background:var(--db);color:#fff}
.it small{display:block;font-size:9px;font-weight:400;opacity:.8;margin-top:1px;white-space:normal}
.rt{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:5px}
.rb{flex:1;padding:8px 10px;font-size:11.5px;font-weight:600;cursor:pointer;border:none;background:var(--lg);color:var(--muted);font-family:inherit;transition:all .13s}
.rb.rn{background:var(--greenbg);color:var(--green)}.rb.ro{background:var(--redbg);color:var(--red)}
.notice{border-radius:5px;padding:8px 12px;font-size:11px;font-weight:500;margin-bottom:10px}
.ng2{background:var(--goldbg);border:1px solid var(--goldbd);color:var(--gold)}
.nb{background:var(--sb);border:1px solid var(--lb);color:var(--db)}
.yr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:5px}
.yb{padding:8px;text-align:center;border:1.5px solid var(--border);border-radius:5px;cursor:pointer;font-size:11px;font-weight:600;color:var(--muted);background:var(--lg);transition:all .13s;font-family:inherit}
.yb:hover{background:var(--sb);color:var(--db)}.yb.active{background:var(--db);color:#fff;border-color:var(--db)}
.yb small{display:block;font-size:9px;font-weight:400;margin-top:1px}
.ar{display:flex;align-items:center;padding:5px 9px;border:1px solid var(--border);border-radius:3px;margin-bottom:2px;background:var(--white);gap:6px}
.ar:nth-child(even){background:var(--lg)}.ar.tot{background:var(--lb);border-color:var(--mb);font-weight:700;color:var(--db)}
.ar.sub{background:var(--sb);border-color:var(--lb);justify-content:center;font-weight:600;font-size:11px;color:var(--db)}
.ar.note{background:#FFFDF0;border-color:#F0E08A;font-size:10px;color:#7A6000;font-style:italic}
.al{flex:1;font-size:11.5px;line-height:1.35}.al .ht{font-size:9px;color:var(--muted);display:block;margin-top:1px}
.ai{width:128px;text-align:right;border:1px solid var(--border);border-radius:3px;padding:4px 6px;font-family:'IBM Plex Mono',monospace;font-size:11px;background:#fff;color:var(--text);outline:none;flex-shrink:0}
.ai:focus{border-color:var(--mb);box-shadow:0 0 0 2px rgba(46,95,163,.10)}.ai:disabled{opacity:.3;background:var(--lg)}
.ad{width:128px;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--db);font-weight:700;flex-shrink:0;padding:4px 6px}
.ab{font-size:8px;background:var(--sb);color:var(--mb);border-radius:3px;padding:1px 4px;font-weight:700;flex-shrink:0}
.sp{background:var(--db);color:#fff;border-radius:var(--r);padding:16px 18px;margin-bottom:14px}
.sp h3{font-size:9.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:10px}
.sr{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sr:last-child{border-bottom:none}.sr .sl{font-size:11px;color:rgba(255,255,255,.6)}.sr .sv{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:#fff}
.sr.hl .sl,.sr.hl .sv{color:var(--accent);font-weight:700}.sr.rf .sv{color:#6EE7A0}.sr.py .sv{color:#F87171}
.btn-row{display:flex;gap:7px;margin-top:7px;flex-wrap:wrap}
.btn{padding:8px 18px;font-family:inherit;font-size:12px;font-weight:600;border-radius:5px;cursor:pointer;border:none;transition:all .13s;display:inline-flex;align-items:center;gap:5px}
.bp{background:var(--mb);color:#fff}.bp:hover{background:var(--db)}
.bs{background:var(--green);color:#fff}.bs:hover{background:#155730}
.bo{background:transparent;border:1.5px solid var(--border);color:var(--db)}.bo:hover{background:var(--sb)}
.bd{background:#C0392B;color:#fff}.bd:hover{background:#962d22}
.pw{background:#ffffff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.ph{background:var(--db);color:#fff;text-align:center;padding:13px}
.ph h2{font-size:13px;font-weight:700}.ph p{font-size:9px;color:rgba(255,255,255,.55);margin-top:1px}.ph .fy{font-size:9px;color:var(--accent);font-weight:600;margin-top:1px}
.pt{width:100%;border-collapse:collapse;font-size:10px}
.pt th{background:var(--mb);color:#fff;padding:4px 8px;text-align:left}.pt th:last-child{text-align:right}
.pt td{padding:3px 8px;border-bottom:1px solid var(--lb);color:var(--text)}.pt tr:nth-child(even) td{background:var(--lg)}
.pt tr.tr td{background:var(--lb);font-weight:700;color:var(--db)}.pt tr.sc td{background:var(--mb);color:#fff;font-weight:600;text-align:center}
.pt .nm{text-align:right;font-family:'IBM Plex Mono',monospace}
.pl{font-size:9px;font-weight:700;color:var(--db);letter-spacing:.6px;text-transform:uppercase;padding:8px 10px 3px;background:#fff}
.slab-t{width:100%;border-collapse:collapse;font-size:10.5px;margin-top:6px}
.slab-t th{padding:4px 8px}.slab-t td{padding:3px 8px;border-bottom:1px solid var(--lb)}
.slab-t tr:nth-child(even) td{background:var(--lg)}
.mcv-footer{background:var(--db);color:rgba(255,255,255,.5);text-align:center;padding:10px;font-size:11px;font-family:'IBM Plex Sans',sans-serif;border-top:1px solid rgba(255,255,255,.08);}
.mcv-footer span{color:var(--accent);font-weight:700;}

/* ── THEME SWITCHER ── */
.theme-panel{position:fixed;top:54px;right:0;z-index:1000;background:var(--bg-card,#fff);border:1px solid var(--border);border-radius:0 0 0 10px;box-shadow:-4px 4px 20px rgba(0,0,0,.2);padding:14px 16px;min-width:230px;display:none;font-family:'IBM Plex Sans',sans-serif;}
.theme-panel.open{display:block;}
.theme-panel-head{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted,#6B7A99);margin-bottom:8px;}
.theme-toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.theme-toggle-label{font-size:12px;font-weight:600;color:var(--text-primary,#1A1A2E);flex:1;}
.toggle-sw{position:relative;width:44px;height:24px;cursor:pointer;}
.toggle-sw input{opacity:0;width:0;height:0;}
.toggle-sw .slider{position:absolute;inset:0;background:var(--border);border-radius:12px;transition:.2s;}
.toggle-sw input:checked+.slider{background:var(--mb);}
.toggle-sw .slider:before{content:'';position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.toggle-sw input:checked+.slider:before{transform:translateX(20px);}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px;}
.theme-dot{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;position:relative;}
.theme-dot:hover{transform:scale(1.15);}
.theme-dot.active{border-color:#fff;box-shadow:0 0 0 2px var(--db,#1B3A6B);}
.theme-dot[title]:hover::after{content:attr(title);position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;background:var(--db,#1B3A6B);color:#fff;padding:2px 6px;border-radius:4px;pointer-events:none;z-index:100;}
#theme-btn{cursor:pointer;padding:4px 10px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px;}
.moon-icon,.sun-icon{font-size:14px;}

.toast{position:fixed;bottom:20px;right:20px;background:var(--db);color:#fff;padding:10px 16px;border-radius:6px;font-size:12px;font-weight:500;box-shadow:0 6px 24px rgba(27,58,107,.22);z-index:9999;opacity:0;transform:translateY(8px);transition:all .2s;pointer-events:none}
/* A visible toast must accept taps/clicks; the old pointer-events:none made its close button unusable. */
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}.toast.ok{background:var(--green)}.toast.er{background:#C0392B}
.toast button{min-width:36px;min-height:36px;margin:-8px -9px -8px 8px;padding:0;border-radius:50%;touch-action:manipulation}
@media(max-width:768px){.toast{left:12px;right:12px;bottom:78px;font-size:14px;display:flex;align-items:center;justify-content:space-between;border-radius:14px;padding:14px 16px}.toast button{font-size:22px!important;min-width:44px;min-height:44px;margin:-10px -12px -10px 10px}}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:#C8D8EE;border-radius:10px}

/* ── MOBILE RESPONSIVE ─────────────────────────────────────────── */
/* Hamburger button */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px;background:none;border:none;z-index:300;-webkit-tap-highlight-color:transparent}
.hamburger span{display:block;width:22px;height:2.5px;background:#fff;border-radius:2px;transition:all .25s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Sidebar overlay for mobile */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:149}
.sidebar-overlay.open{display:block}

/* Bottom navigation bar for mobile */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:var(--white);border-top:1px solid var(--border);
  padding:4px 0 env(safe-area-inset-bottom,4px);
  box-shadow:0 -2px 12px rgba(0,0,0,.10)}
.bn-items{display:flex;justify-content:space-around;align-items:center}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 10px;cursor:pointer;border:none;background:none;
  font-size:9px;font-weight:600;color:var(--muted);font-family:inherit;
  min-width:56px;border-top:2px solid transparent;transition:all .15s;
  -webkit-tap-highlight-color:transparent}
.bn-item.active{color:var(--mb);border-top-color:var(--mb)}
.bn-item:active{transform:scale(.93)}
.bn-item svg{width:20px;height:20px}

/* Mobile quick-nav strip (swipeable section tabs) */
.mobile-sec-tabs{display:none;overflow-x:auto;white-space:nowrap;
  padding:8px 14px;background:var(--sb);border-bottom:1px solid var(--lb);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mobile-sec-tabs::-webkit-scrollbar{display:none}
.mst-btn{display:inline-block;padding:5px 12px;border-radius:20px;
  font-size:11px;font-weight:600;border:1.5px solid var(--lb);
  color:var(--muted);background:var(--white);cursor:pointer;
  margin-right:6px;white-space:nowrap;font-family:inherit;
  transition:all .13s}
.mst-btn.active{background:var(--mb);color:#fff;border-color:var(--mb)}

@media(max-width:768px){
  /* Show hamburger, hide regular sidebar on mobile */
  .hamburger{display:flex}
  .sidebar{
    position:fixed;top:54px;left:0;bottom:0;z-index:150;
    transform:translate3d(-100%,0,0);transition:transform .22s cubic-bezier(.4,0,.2,1);
    width:260px;height:calc(100vh - 54px);box-shadow:4px 0 20px rgba(0,0,0,.2);
    will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    padding-bottom:70px /* space for bottom nav */
  }
  .sidebar.mobile-open{transform:translate3d(0,0,0)}
  .layout{grid-template-columns:1fr}
  .main{padding:14px 14px 80px}
  
  /* Bottom nav visible */
  .bottom-nav{display:block}
  
  /* Mobile section tabs */
  .mobile-sec-tabs{display:block}

  /* Topbar compact */
  .topbar{padding:0 8px;height:50px}
  .tb-left{display:flex;align-items:center;gap:6px;}
  .tb-left h1{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
  .tb-left p{display:none}
  .tb-left img{height:26px}
  .tb-right{display:flex;align-items:center;gap:4px;}
  .tb-right .badge{font-size:9px;padding:3px 6px}
  
  /* Form grids → single column */
  .fg{grid-template-columns:1fr !important}
  .full{grid-column:1}
  
  /* Cards */
  .card{padding:12px 14px;margin-bottom:10px}
  .ct{font-size:9.5px}
  
  /* Buttons full width */
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%;justify-content:center;text-align:center}
  
  /* Summary preview table */
  .pw{font-size:11px}
  .pt th,.pt td{padding:4px 6px;font-size:10px}
  .ph h2{font-size:11px}
  .ph p{font-size:9px}
  
  /* Floating WA button — move up above bottom nav */
  #wa-float{display:none !important}
  
  /* About card */
  .about-card{padding:20px 16px;margin:0}
  .about-btns{flex-direction:column;align-items:center}
  .about-btn{width:100%;justify-content:center}
  
  /* Head selection grid → single column */
  .ct+div[style*="grid-template-columns:1fr 1fr"],.bs-grid{grid-template-columns:1fr !important}

  /* Slab compare → single column */
  #slab-compare div[style*="grid-template-columns"]{grid-template-columns:1fr !important}

  /* date picker responsive rules removed */

  /* Year grid */
  .yg{grid-template-columns:repeat(3,1fr) !important}
  
  /* ITR form tabs */
  .itr-tabs{flex-wrap:wrap}
  .it{min-width:calc(25% - 2px);font-size:10px;padding:7px 2px}
  
  /* Slab reference table */
  .slab-t td,.slab-t th{font-size:10px;padding:3px 5px}
  
  /* Login box */
  .login-box{width:92vw;padding:24px 20px}
  
  /* User manager */
  .um-box{width:96vw;max-height:85vh}
  .um-form .fg{grid-template-columns:1fr !important}

  /* Theme panel */
  .theme-panel{position:fixed;top:50px;right:6px;bottom:auto;left:auto;width:280px;max-width:calc(100vw - 12px);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.3);z-index:1001}

  /* Section headings */
  .sec-h{font-size:14px}
  .sec-d{font-size:10px}
}

@media(max-width:420px){
  .tb-left h1{display:none}
  .it{min-width:calc(33.33% - 2px);font-size:9.5px}
  .main{padding:10px 10px 80px}
  .card{padding:10px 12px}
  .topbar{height:48px}
  .sidebar{top:48px}
  #wa-float{display:none !important}
}

/* ── MOBILE IMPROVEMENTS ── */
@media(max-width:768px){
  /* Input fields full size on mobile */
  .fl input,.fl select{font-size:16px !important;padding:9px 10px !important}

  /* Summary preview table scrollable */
  .pw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pt{min-width:480px}

  /* Reference & Schedule tables scrollable on mobile */
  .ref-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;display:block;}
  .ref-table-wrap table{min-width:750px;}
  #bp-dep-card .ref-table-wrap table{min-width:900px;}

  /* Tax computation rows bigger tap targets */
  .ar{padding:9px 10px !important;font-size:12px}
  .ai{font-size:12px;padding:7px 10px}

  /* Section heading */
  .sec-h{font-size:15px}

  /* Notice boxes readable */
  .notice{font-size:11.5px;padding:10px 12px}

  /* Slab reference scrollable */
  .slab-t{overflow-x:auto;display:block}

  /* Bottom nav items bigger */
  .bn-item{min-width:52px;padding:5px 6px;font-size:8.5px}
  .bn-item svg{width:22px;height:22px}

  /* P&L and BS tables */
  .pl-table{overflow-x:auto;display:block}

  /* Login box */
  .login-box{width:94vw;padding:28px 22px;margin:0 12px}
  .login-btn{padding:13px;font-size:15px}

  /* About page */
  .about-card{border-radius:8px}
  .about-name{font-size:18px}

  /* Regime toggle */
  .rt{border-radius:6px}
  .rb{padding:10px 8px;font-size:12px}

  /* Year buttons */
  .yb{font-size:11px;padding:5px 8px}

  /* Badges in topbar */
  #regime-badge{display:none}

  /* Scrollable itr tabs */
  .itr-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .it{flex-shrink:0;min-width:70px}

  /* Theme panel dropdown positioning handled above */

  /* User manager */
  .um-table{font-size:11px}
  .um-table th,.um-table td{padding:5px 6px}

  /* Breadcrumb on mobile */
  .breadcrumb-bar{padding:5px 14px;font-size:10px}

  /* Sidebar search on mobile */
  .sb-search input{font-size:14px !important;padding:9px 10px 9px 30px !important}

  /* Bookmark star always visible on mobile */
  .ni .bm-star{opacity:0.6}

  /* Ref tables overflow on mobile */
  .ref-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ref-table-wrap table{min-width:500px}
}

/* ── ABOUT DEVELOPER ── */
.about-card{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:32px 28px;text-align:center;max-width:480px;margin:0 auto 20px;
  box-shadow:0 4px 24px rgba(27,58,107,.10);
}
.about-avatar{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--db),var(--mb));
  display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:700;color:#fff;
  margin:0 auto 16px;letter-spacing:1px;
  box-shadow:0 4px 16px rgba(27,58,107,.25);
}
.about-name{font-size:22px;font-weight:700;color:var(--db);margin-bottom:4px;}
.about-role{font-size:12px;color:var(--muted);margin-bottom:20px;letter-spacing:.3px;}
.about-divider{width:40px;height:3px;background:linear-gradient(90deg,var(--db),var(--mb));border-radius:2px;margin:0 auto 20px;}
.about-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;}
.about-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;border:none;text-decoration:none;font-family:inherit;
  transition:transform .15s,box-shadow .15s;
}
.about-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15);}
.about-btn-wa{background:#25D366;color:#fff;}
.about-btn-li{background:#0A66C2;color:#fff;}
.about-tool-info{
  background:var(--sb);border:1px solid var(--lb);border-radius:8px;
  padding:14px 16px;font-size:11px;color:var(--db);line-height:1.7;
  text-align:left;
}
.about-tool-info strong{color:var(--mb);}
.about-footer{margin-top:16px;font-size:10px;color:var(--muted);line-height:1.6;}
[data-theme="dark"] .about-card{background:var(--bg-card);border-color:var(--border);}
[data-theme="dark"] .about-tool-info{background:var(--lb);border-color:var(--border);color:var(--text-primary);}

/* ═══ PRINT: force light mode, hide chrome ═══ */
@media print {
  [data-theme="dark"] body{background:#fff !important;color:#1A1A2E !important}
  [data-theme="dark"] .card{background:#fff !important;border-color:#C8D8EE !important}
  [data-theme="dark"] .fl input,[data-theme="dark"] .fl select{background:#fff !important;color:#1A1A2E !important}
  [data-theme="dark"] .pw{background:#fff !important}
  [data-theme="dark"] .pt td{background:#fff !important;color:#1A1A2E !important;border-color:#D6E4F7 !important}
  [data-theme="dark"] .pt tr:nth-child(even) td{background:#F5F7FA !important}
  [data-theme="dark"] .pt tr.tr td{background:#D6E4F7 !important;color:#1B3A6B !important}
  [data-theme="dark"] .ref-table-wrap th{background:#EFF6FF !important;color:#1A1A2E !important}
  [data-theme="dark"] .ref-table-wrap td{color:#1A1A2E !important;border-color:#D6E4F7 !important}
  .sidebar,.topbar,#demo-banner,#theme-panel,#wa-float,.bottom-nav,.mobile-sec-tabs,.hamburger,.breadcrumb-bar,.sb-search{display:none !important}
  .tb-left img,.login-logo img,.about-card img{display:none !important}
  .layout{grid-template-columns:0 1fr !important}
  .main{padding:10px !important}
  .card{break-inside:avoid;page-break-inside:avoid;margin-bottom:10px}
  .sec{display:block !important;page-break-before:auto}
  .ref-table-wrap table{font-size:10px}
  .ref-table-wrap th,.ref-table-wrap td{padding:4px 6px}
  .last-updated{font-size:8px}
  a::after{content:" (" attr(href) ")";font-size:9px;color:#666}
}

/* ── USER MANAGER MODAL ── */
#user-manager-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;font-family:'IBM Plex Sans',sans-serif;}
#user-manager-overlay.open{display:flex;}
.um-box{background:#fff;border-radius:12px;width:520px;max-width:96vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.4);}
.um-head{background:var(--db);color:#fff;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;}
.um-head h2{font-size:14px;font-weight:700;margin:0;}
.um-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:0 4px;}
.um-body{padding:20px 22px;overflow-y:auto;flex:1;}
.um-section{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin:0 0 8px;}
.um-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:18px;}
.um-table th{background:var(--mb);color:#fff;padding:6px 10px;text-align:left;font-size:10.5px;}
.um-table td{padding:6px 10px;border-bottom:1px solid var(--lb);}
.um-table tr:hover td{background:var(--sb);}
.um-table .um-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;}
.um-badge.full{background:#EAF7EE;color:var(--green);}
.um-badge.demo{background:var(--goldbg);color:var(--gold);}
.um-badge.admin{background:#F3E5F5;color:#7B1FA2;}
.um-badge.builtin{background:var(--lb);color:var(--mb);font-size:9px;}
.um-del-btn{background:none;border:1px solid #F5C4B3;border-radius:4px;color:#B83200;font-size:10px;padding:2px 8px;cursor:pointer;}
.um-del-btn:hover{background:#FFF3EE;}
.um-form{background:var(--sb);border:1px solid var(--lb);border-radius:8px;padding:14px 16px;}
.um-form .fg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;}
.um-form .fl label{font-size:10px;font-weight:600;color:var(--db);display:block;margin-bottom:3px;}
.um-form .fl input,.um-form .fl select{width:100%;border:1px solid var(--border);border-radius:4px;padding:5px 8px;font-size:12px;font-family:inherit;background:#fff;}
.um-add-btn{background:var(--mb);color:#fff;border:none;border-radius:5px;padding:7px 18px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;}
.um-add-btn:hover{background:var(--db);}
.um-msg{font-size:11px;margin-top:8px;padding:6px 10px;border-radius:4px;display:none;}
.um-msg.ok{background:#EAF7EE;color:var(--green);display:block;}
.um-msg.er{background:#FFF3EE;color:var(--red);display:block;}

/* ── LOGIN PAGE ─────────────────────────────────── */
#login-overlay{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(135deg,#0F172A 0%,var(--db) 60%,#1E3A5F 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Sans',sans-serif;
}
.login-box{
  background:#fff;border-radius:12px;padding:36px 40px;width:360px;
  box-shadow:0 24px 64px rgba(0,0,0,.45);
}
.login-logo{
  text-align:center;margin-bottom:24px;
}
.login-logo h1{font-size:20px;font-weight:700;color:var(--db);margin-bottom:2px}
.login-logo p{font-size:11px;color:#6B7A99;}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:11px;font-weight:600;color:var(--db);margin-bottom:5px}
.login-field input{
  width:100%;border:1.5px solid var(--border);border-radius:6px;
  padding:9px 12px;font-size:13px;font-family:inherit;
  color:#1A1A2E;background:#F5F7FA;outline:none;transition:border .13s;
}
.login-field input:focus{border-color:var(--mb);background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.login-btn{
  width:100%;padding:11px;background:var(--mb);color:#fff;
  border:none;border-radius:7px;font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;margin-top:4px;transition:background .15s;
  letter-spacing:.3px;
}
.login-btn:hover{background:var(--db)}
.login-err{
  display:none;background:#FFF3EE;border:1px solid #F5C4B3;
  border-radius:5px;padding:8px 12px;font-size:11.5px;color:#B83200;
  margin-bottom:12px;font-weight:500;
}
.login-badge{
  margin-top:20px;text-align:center;font-size:10px;color:rgba(255,255,255,.5);
}
.login-demo-hint{
  margin-top:14px;padding:10px 12px;background:var(--sb);border-radius:6px;
  font-size:10.5px;color:var(--mb);text-align:center;line-height:1.5;
}
#demo-banner{
  display:none;position:fixed;top:54px;left:0;right:0;z-index:300;
  background:var(--accent);color:var(--db);text-align:center;padding:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.3px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* ── CODE PROTECTION ── */
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
input, textarea, select, .ad, .ai, .mono{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}

/* ════════════════════════════════════════════════════
   PRINT STYLES (REM-012)
   Hide UI chrome, show only main content for printing
   ════════════════════════════════════════════════════ */
@media print {
  /* Hide navigation, toolbars, modals, overlays */
  .sidebar, .sidebar-overlay, .topbar, #hamburger-btn,
  .modal-overlay, .theme-panel, #toast,
  #demo-banner, .login-overlay, #user-manager-overlay,
  .mobile-nav, .mst-bar { display: none !important; }

  /* Hide buttons and interactive controls */
  .btn-row, .btn, button, input[type="file"],
  .sb-search, .itr-tabs, .rb, .regime-toggle,
  #regime-default-notice, .via-inp:disabled { display: none !important; }

  /* Main content fills the page */
  .layout { display: block !important; }
  .main { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }

  /* Show all sections for printing (not just active) */
  .sec { display: block !important; page-break-inside: avoid; }

  /* Tables print with borders */
  table, th, td { border: 1px solid #000 !important; border-collapse: collapse !important; }
  table { width: 100% !important; }
  th { background: #f0f0f0 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Preview/Summary print-friendly */
  .pw, #prev-wrap, #live-sum, #regime-compare { display: block !important; }
  .ph { page-break-after: avoid; }
  .ph h2 { font-size: 16pt; }
  .pt { font-size: 10pt; }
  .pl { font-size: 12pt; font-weight: 700; margin-top: 12pt; }

  /* Card styling for print */
  .card { border: 1px solid #ccc !important; box-shadow: none !important; margin-bottom: 8pt; page-break-inside: avoid; }

  /* Background colors for print */
  .tr td, .sc td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Page setup */
  @page { margin: 15mm; size: A4; }
  body { font-size: 10pt; line-height: 1.4; }

  /* Links show URL */
  a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
  a[href^="#"]::after { content: ""; }
}

/* ════════════════════════════════════════════════════
   MOBILE APP DESIGN & RESPONSIVE UI/UX STYLESHEET
   ════════════════════════════════════════════════════ */

/* Hamburger Menu Button */
.hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  justify-content: space-around;
  width: 36px;
  height: 36px;
  z-index: 210;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.25s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop Overlay for Slide-out Mobile Drawer */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 290;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* Bottom App Navigation Dock (Mobile) */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  z-index: 250;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.08);
}
.bn-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 56px;
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s ease, transform 0.1s ease;
  touch-action: manipulation;
}
.bn-item svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  transition: stroke 0.15s ease;
}
.bn-item:active { transform: scale(0.95); }
.bn-item.active {
  color: var(--mb);
  font-weight: 700;
}
.bn-item.active svg {
  stroke: var(--mb);
}

/* Mobile Horizontal Section Tabs Bar */
.mobile-sec-tabs {
  display: none;
  overflow-x: auto;
  white-space: nowrap;
  padding: 8px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  gap: 6px;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 50px;
  z-index: 180;
}
.mobile-sec-tabs::-webkit-scrollbar { display: none; }
.mst-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--lg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  touch-action: manipulation;
}
.mst-btn.active {
  background: var(--mb);
  color: #ffffff;
  border-color: var(--mb);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

/* Touch scroll container wrapper for wide data tables */
.ref-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE MEDIA QUERIES (Mobile App Viewport)
   ════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
  .hamburger { display: flex; }
  .topbar {
    padding: 0 12px;
    height: 50px;
  }
  .tb-left h1 { font-size: 13px; }
  .tb-left p { display: none; }
  .tb-right { gap: 6px; }
  .badge { font-size: 9.5px; padding: 2px 7px; }
  
  .layout {
    display: block;
    min-height: calc(100vh - 50px);
  }
  
  /* Mobile Slide-Out Drawer Navigation */
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 285px;
    height: 100vh;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    padding-top: 16px;
    background: var(--bg-sidebar);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  
  .mobile-sec-tabs { display: flex; }
  .bottom-nav { display: block; }
  
  /* Content Container Adjustment */
  .main {
    padding: 14px 12px 72px 12px;
  }
  .sec-h { font-size: 15px; margin-bottom: 2px; }
  .sec-d { font-size: 10.5px; margin-bottom: 12px; }
  .card {
    padding: 14px 14px;
    margin-bottom: 12px;
    border-radius: 12px;
  }
  
  /* Form Field Responsive Stacking */
  .fg {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .fl label {
    font-size: 11px;
    margin-bottom: 4px;
  }
  /* Prevent iOS Safari input auto-zoom by requiring 16px minimum font size */
  .fl input, .fl select {
    font-size: 16px !important;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: 6px;
  }
  
  /* Touch Button Enhancements */
  .btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 6px;
  }
  .btn-row {
    flex-direction: column;
    gap: 8px;
  }
  .btn-row .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Stack calculation rows cleanly on small screens */
  .ar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
  }
  .ar .al { width: 100%; font-size: 11.5px; }
  .ar .av, .ar .ad {
    width: 100%;
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
  }
  
  /* Hide desktop breadcrumbs on mobile */
  .breadcrumb-bar { display: none; }
}

@media screen and (max-width: 480px) {
  .topbar { padding: 0 10px; }
  .main { padding: 10px 10px 72px 10px; }
  .card { padding: 12px 12px; }
  .bn-items { height: 52px; }
  .bn-item { font-size: 9.5px; }
  .bn-item svg { width: 18px; height: 18px; }
}

/* ════════════════════════════════════════════════════
   PRINT STYLESHEET — REM-012
   Optimized for Ctrl+P browser print
   ════════════════════════════════════════════════════ */
@media print {
  /* Hide non-essential UI elements */
  .sidebar, .topbar, .mobile-nav, .sidebar-overlay,
  .hamburger-btn, #theme-panel, #login-overlay,
  .toast, #toast, .demo-banner, .btn-row,
  .btn, button, [onclick], .bm-star,
  #user-manager-overlay, .mst-bar, .bn-bar {
    display: none !important;
  }
  /* Reset layout for print */
  .layout { display: block !important; }
  .main { margin-left: 0 !important; padding: 0 !important; max-width: 100% !important; }
  /* Show only the active section */
  .sec { display: none !important; page-break-inside: avoid; }
  .sec.active { display: block !important; }
  /* Card styling for print */
  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 8px;
  }
  /* Summary/Preview section */
  .pw, #prev-wrap, #live-sum {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Force light colors for print */
  :root {
    --db:#1E293B;--mb:#3B82F6;--lb:#DBEAFE;--sb:#EFF6FF;
    --bg-page:#fff;--bg-card:#fff;--text:#000;--muted:#555;
    --border:#ccc;--green:#166534;--red:#991B1B;
  }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  /* Tables */
  .slab-t, .pt, table { border-collapse: collapse; }
  .slab-t th, .slab-t td, .pt th, .pt td, table th, table td {
    border: 1px solid #999 !important;
    padding: 3px 6px;
  }
  /* Input fields — show values, hide input chrome */
  .ai, input[type="number"], input[type="text"], select {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-weight: 600;
  }
  /* Auto-calculated fields */
  .ad { font-weight: 700; }
  /* Headings */
  .sec-h { font-size: 16pt; font-weight: 700; border-bottom: 2px solid #333; padding-bottom: 4px; }
  .ct { font-size: 12pt; font-weight: 600; }
  /* Reference tables — allow horizontal scroll hint */
  .ref-table-wrap { overflow: visible !important; }
  /* Page margins */
  @page { margin: 15mm; size: A4; }
  /* No background colors/graphics */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* Links */
  a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
  a[href^="#"]::after { content: ""; }
}