/* ============ Dashboard Keuangan — design system ============ */
:root{
  --bg:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --border:#e6e9ef;
  --border-strong:#d4d9e2;
  --ink:#16213a;
  --ink-2:#5a6478;
  --ink-3:#9aa2b1;
  --primary:#2f5cd6;
  --primary-ink:#1c3d96;
  --primary-soft:#eaf0fd;
  --navy:#16294e;

  /* segments (blue family, strong -> light) */
  --seg-super:#16357d;
  --seg-value:#2f5cd6;
  --seg-growth:#5e9be6;
  --seg-emerg:#a9b8d2;

  /* collectability good -> bad */
  --col-lancar:#1f9d76;
  --col-dpk:#d8a13c;
  --col-kurang:#e07c3a;
  --col-ragu:#cf5d4e;
  --col-macet:#b22f28;

  --pos:#1f9d76;
  --neg:#cf4a3c;

  --accent-grad:linear-gradient(135deg,#2f5cd6,#5b54e0 55%,#7c3aed);
  --chart-grid:#eef1f6;
  --chart-label:#4a5568;

  --shadow-sm:0 1px 2px rgba(20,33,58,.04), 0 1px 3px rgba(20,33,58,.06);
  --shadow-md:0 2px 8px rgba(20,33,58,.06), 0 8px 24px rgba(20,33,58,.05);
  --shadow-lg:0 18px 44px rgba(20,33,58,.16), 0 6px 16px rgba(20,33,58,.08);
  --radius:14px;
  --radius-sm:10px;
  --sidebar-w:248px;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

/* ============ THEMES ============
   Setiap tema hanya perlu definisikan --primary & turunannya.
   bg/surface/ink/border dihandle oleh data-scheme (auto siang/malam).
   Warna native di sini aktif saat auto-mode OFF. */
[data-theme="aviation"]{
  --bg:#0a1428; --surface:#0f1b2d; --surface-2:#141f33; --border:#1e2d45; --border-strong:#2a3d52;
  --ink:#e8f1ff; --ink-2:#c8ddf5; --ink-3:#92b4d8;
  --primary:#0088dd; --primary-ink:#66b3ff; --primary-soft:#0a2d52;
  --navy:#050e1a; --accent-grad:linear-gradient(135deg,#0055a5,#0088dd);
  --chart-grid:#1e2d45; --chart-label:#6b87b8;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 2px 8px rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.6);
}
[data-theme="sapphire"]{
  --primary:#1a4a9e; --primary-ink:#0d3a8c; --primary-soft:#dce8fb;
  --navy:#0a1f55; --accent-grad:linear-gradient(140deg,#1a4a9e,#0d3a8c);
}
[data-theme="ocean"]{
  --primary:#0277bd; --primary-ink:#01579b; --primary-soft:#d6eaf8;
  --navy:#012f5a; --accent-grad:linear-gradient(140deg,#0288d1,#01579b);
}
[data-theme="teal"]{
  --primary:#0e9aa7; --primary-ink:#0a6f78; --primary-soft:#dff3f4;
  --navy:#0c2b30; --accent-grad:linear-gradient(140deg,#19b3c0,#0a6f78);
}
[data-theme="emerald"]{
  --primary:#1f9d6b; --primary-ink:#157a52; --primary-soft:#e1f4ea;
  --navy:#11271e; --accent-grad:linear-gradient(140deg,#27b97f,#157a52);
}
[data-theme="indigo"]{
  --primary:#5a54d6; --primary-ink:#3f39a8; --primary-soft:#ebeafb;
  --navy:#211e45; --accent-grad:linear-gradient(140deg,#6d67e6,#3f39a8);
}
[data-theme="gold"]{
  --primary:#b8860b; --primary-ink:#8a6508; --primary-soft:#fef3cd;
  --navy:#3d2c00; --accent-grad:linear-gradient(140deg,#f9a825,#b8860b);
}
[data-theme="crimson"]{
  --primary:#9e1a2a; --primary-ink:#7b1522; --primary-soft:#fce4e7;
  --navy:#3d0a10; --accent-grad:linear-gradient(140deg,#c62828,#9e1a2a);
}
/* ============ AUTO SCHEME (siang/malam) — bekerja di atas semua tema ============
   Hanya override bg/surface/ink/border/shadow; warna aksen (--primary/--navy) tetap dari tema.
   Diaktifkan oleh add-polish.js ketika auto mode ON. */
html[data-scheme="day"]{
  --bg:color-mix(in srgb,var(--primary) 5%,#f4f6f9)!important;
  --surface:color-mix(in srgb,var(--primary) 2%,#ffffff)!important;
  --surface-2:color-mix(in srgb,var(--primary) 4%,#f8f9fc)!important;
  --border:color-mix(in srgb,var(--primary) 10%,#e6e9ef)!important;
  --border-strong:color-mix(in srgb,var(--primary) 16%,#d4d9e2)!important;
  --ink:#16213a!important; --ink-2:#5a6478!important; --ink-3:#9aa2b1!important;
  --chart-grid:#eef1f6!important; --chart-label:#4a5568!important;
  --primary-soft:color-mix(in srgb,var(--primary) 12%,#ffffff)!important;
  --primary-ink:color-mix(in srgb,var(--primary) 68%,#000000)!important;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)!important;
  --shadow-md:0 4px 6px rgba(0,0,0,.05),0 10px 20px rgba(0,0,0,.08)!important;
}
html[data-scheme="night"]{
  --bg:color-mix(in srgb,var(--primary) 12%,#080f1e)!important;
  --surface:color-mix(in srgb,var(--primary) 10%,#0d1628)!important;
  --surface-2:color-mix(in srgb,var(--primary) 8%,#121d32)!important;
  --border:color-mix(in srgb,var(--primary) 16%,#1a2840)!important;
  --border-strong:color-mix(in srgb,var(--primary) 22%,#243550)!important;
  --ink:#e8f1ff!important; --ink-2:#c8ddf5!important; --ink-3:#92b4d8!important;
  --chart-grid:color-mix(in srgb,var(--primary) 14%,#1a2840)!important;
  --chart-label:#92b4d8!important;
  --primary-soft:color-mix(in srgb,var(--primary) 22%,#0f1b2d)!important;
  --primary-ink:color-mix(in srgb,var(--primary) 65%,#ffffff)!important;
  --shadow-sm:0 1px 3px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.15)!important;
  --shadow-md:0 2px 8px rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.6)!important;
}

[data-theme="horizon"]{
  --bg:#e8f4ff; --surface:#ffffff; --surface-2:#f0f8ff; --border:#c8e3f8; --border-strong:#a8cff0;
  --ink:#082040; --ink-2:#2c5880; --ink-3:#6088b0;
  --primary:#0ea5e9; --primary-ink:#0369a1; --primary-soft:#d8eefa;
  --navy:#051530; --accent-grad:linear-gradient(140deg,#38bdf8,#0284c7);
  --chart-grid:#c8e3f8; --chart-label:#6088b0;
}
/* ===== TABLE & CHART CONTRAST FIX — hanya tabel & chart axis siang ===== */
html[data-scheme="day"] .tbl td,
html[data-scheme="day"] .tbl th,
html[data-scheme="day"] .atbl td,
html[data-scheme="day"] .atbl th {
  color: var(--ink) !important;
}
html[data-scheme="day"] .clab {
  fill: #1a2744 !important;
}
.cgrid{stroke:var(--chart-grid)}
.clab{fill:var(--chart-label);font-family:var(--mono)}
.ctrack{stroke:var(--chart-grid)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* ============ ANIMATED BACKGROUND (theme-aware, multiple styles) ============ */
.bg-fx{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg-fx .blob,.bg-fx .bg-grid,.bg-fx .bg-mesh,.bg-fx .bg-canvas{display:none}
.bg-fx .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.34;will-change:transform}
.bg-fx .bg-canvas{position:absolute;inset:0;width:100%;height:100%}
/* --- aurora --- */
.bg-fx.fx-aurora .blob,.bg-fx.fx-aurora .bg-grid{display:block}
.bg-fx .b1{width:46vw;height:46vw;left:-8vw;top:-10vw;
  background:radial-gradient(circle at 50% 50%, var(--primary), transparent 68%);
  animation:blobA 34s ease-in-out infinite alternate}
.bg-fx .b2{width:40vw;height:40vw;right:-6vw;top:18vh;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 55%, #ffffff), transparent 66%);
  animation:blobB 42s ease-in-out infinite alternate}
.bg-fx .b3{width:42vw;height:42vw;left:24vw;bottom:-16vw;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent2, var(--primary)) 70%, var(--navy)), transparent 64%);
  animation:blobC 38s ease-in-out infinite alternate}
.bg-fx .bg-grid{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(color-mix(in srgb, var(--ink-3) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink-3) 22%, transparent) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%)}
@keyframes blobA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8vw,6vh) scale(1.15)}}
@keyframes blobB{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-7vw,5vh) scale(1.1)}}
@keyframes blobC{0%{transform:translate(0,0) scale(1.05)}100%{transform:translate(5vw,-6vh) scale(.92)}}
/* --- mesh gradient --- */
.bg-fx.fx-mesh .bg-mesh{display:block;position:absolute;inset:-20%;opacity:.5;
  background:
    radial-gradient(40% 40% at 20% 25%, color-mix(in srgb,var(--primary) 70%,transparent), transparent 70%),
    radial-gradient(38% 42% at 80% 20%, color-mix(in srgb,var(--primary) 45%,#fff), transparent 70%),
    radial-gradient(45% 45% at 70% 80%, color-mix(in srgb,var(--navy) 60%,var(--primary)), transparent 70%),
    radial-gradient(40% 40% at 25% 85%, color-mix(in srgb,var(--primary) 55%,transparent), transparent 70%);
  filter:blur(46px);animation:meshMove 28s ease-in-out infinite alternate}
@keyframes meshMove{0%{transform:translate(0,0) rotate(0deg) scale(1)}100%{transform:translate(3%,-3%) rotate(8deg) scale(1.12)}}
/* --- particles / waves / interactive canvas styles use canvas --- */
.bg-fx.fx-particles .bg-canvas,.bg-fx.fx-waves .bg-canvas,
.bg-fx.fx-spotlight .bg-canvas,.bg-fx.fx-starfield .bg-canvas,.bg-fx.fx-ripple .bg-canvas{display:block}
/* starfield gets a deep radial tint behind the stars */
.bg-fx.fx-starfield::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 35%, color-mix(in srgb,var(--primary) 12%,transparent), transparent 70%)}
/* --- grid pulse --- */
.bg-fx.fx-grid .bg-grid{display:block;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 40%, #000 35%, transparent 80%);
  mask-image:radial-gradient(ellipse 90% 85% at 50% 40%, #000 35%, transparent 80%);
  animation:gridPulse 6s ease-in-out infinite}
.bg-fx.fx-grid::before{content:"";position:absolute;width:60vw;height:60vw;left:50%;top:-10vw;transform:translateX(-50%);
  background:radial-gradient(circle, color-mix(in srgb,var(--primary) 40%,transparent), transparent 60%);filter:blur(70px);opacity:.4}
@keyframes gridPulse{0%,100%{opacity:.32}50%{opacity:.6}}

/* REMOVED: radar background animation — clean solid background */
body{background:var(--bg);position:relative}
/* default: hidden until body.fx-bg set by visualfx.js */
body:not(.fx-bg) .bg-fx{display:none}
body.fx-bg .main{background:transparent}
@media(prefers-reduced-motion:reduce){.bg-fx .blob,.bg-fx .bg-mesh,.bg-fx .bg-grid{animation:none}}

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.005em;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mono{font-family:var(--mono)}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:
    radial-gradient(125% 55% at 50% -8%, color-mix(in srgb,var(--primary) 26%, transparent), transparent 62%),
    linear-gradient(184deg, color-mix(in srgb,var(--navy) 96%, #fff) 0%, var(--navy) 32%, color-mix(in srgb,var(--navy) 86%, #000) 100%);
  color:#cdd6e8;
  transition:width .22s cubic-bezier(.2,.7,.2,1), flex-basis .22s cubic-bezier(.2,.7,.2,1);
  position:relative;
  position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;
  padding:22px 14px;
  z-index:30;overflow-y:auto;
  border-right:1px solid color-mix(in srgb,var(--primary) 16%, transparent);
}
.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
.sidebar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.main{margin-left:var(--sidebar-w);flex:1;min-width:0;padding:30px 40px 60px;transition:margin-left .22s cubic-bezier(.2,.7,.2,1)}

/* ---------- sidebar collapse ---------- */
.sb-toggle{position:absolute;top:14px;right:-13px;width:26px;height:26px;border-radius:50%;background:var(--navy);
  border:1px solid rgba(255,255,255,.16);color:#cdd6e8;display:grid;place-items:center;cursor:pointer;z-index:40;
  box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .2s,background .15s}
.sb-toggle:hover{background:var(--primary);color:#fff}
.sb-toggle svg{transition:transform .22s}
.app.sidebar-collapsed{--sidebar-w:74px}
.app.sidebar-collapsed .sidebar{width:74px;flex-basis:74px}
.app.sidebar-collapsed .main{margin-left:74px}
.app.sidebar-collapsed .sb-toggle svg{transform:rotate(180deg)}
.app.sidebar-collapsed .nav-tx,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .nav-item .idx,
.app.sidebar-collapsed .brand-txt,
.app.sidebar-collapsed .data-loader,
.app.sidebar-collapsed .sidebar-foot{display:none}
.app.sidebar-collapsed .brand{justify-content:center;padding:4px 0 18px}
.app.sidebar-collapsed .nav-item{justify-content:center;padding:11px 0}
.app.sidebar-collapsed .nav-item .ic{margin:0}
.app.sidebar-collapsed .nav-item.active::before{left:-12px;height:24px}
.app.sidebar-collapsed .sidebar{padding:22px 12px}

/* ---------- sidebar ---------- */
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 18px;margin-bottom:8px;position:relative}
.brand::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--primary) 38%, transparent) 30%, color-mix(in srgb,var(--primary) 38%, transparent) 70%, transparent)}
.brand-mark{
  width:40px;height:40px;border-radius:12px;flex:0 0 40px;
  background:var(--accent-grad);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;
  box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
  border:none;cursor:pointer;position:relative;padding:0;overflow:visible;
}
.brand-mark::after{content:"";position:absolute;inset:-3px;border-radius:15px;padding:1px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 60%, transparent), transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;pointer-events:none}
.brand-mark:hover{filter:brightness(1.08)}
.brand-mark.has-logo{background:#fff;padding:3px;overflow:visible}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;border-radius:7px}
.logo-x{position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;background:var(--neg);color:#fff;font-size:9px;display:none;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.brand-mark.has-logo:hover .logo-x{display:flex}
.brand-txt b{display:block;color:#fff;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.brand-txt span{display:block;font-size:11px;color:#8a98b8;letter-spacing:.02em}
.nav-label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#69789d;padding:14px 10px 8px;font-weight:600}
.brand-txt b{letter-spacing:-.015em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-group{display:flex;flex-direction:column}
.nav-grp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:none;background:none;cursor:pointer;
  padding:9px 12px 6px;color:#69789d;font-family:var(--sans);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;transition:color .15s}
.nav-grp-head:hover{color:#9aa8c4}
.nav-caret{transition:transform .2s;opacity:.7}
.nav-group:not(.open) .nav-caret{transform:rotate(-90deg)}
.nav-grp-items{display:flex;flex-direction:column;gap:3px;overflow:hidden;max-height:0;opacity:0;transition:max-height .25s ease,opacity .2s}
.nav-group.open .nav-grp-items{max-height:420px;opacity:1}
.nav-group.flat{margin-top:2px}
/* collapsed sidebar: hide group headers, show all items as icons */
.app.sidebar-collapsed .nav-grp-head{display:none}
.app.sidebar-collapsed .nav-grp-items{max-height:none;opacity:1;gap:3px;margin-bottom:6px}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:8px 11px;border-radius:11px;cursor:pointer;
  color:#aeb9d2;font-size:13.5px;font-weight:500;letter-spacing:-.005em;
  transition:background .18s,color .18s,box-shadow .18s;border:none;background:none;text-align:left;width:100%;
  position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.055);color:#eef2fb}
.nav-item:hover .ic{background:rgba(255,255,255,.1);opacity:1}
.nav-item.active{background:color-mix(in srgb,var(--primary) 20%, transparent);color:#fff;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 34%, transparent)}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:4px;height:21px;border-radius:0 4px 4px 0;background:var(--accent-grad);
  box-shadow:0 0 12px color-mix(in srgb,var(--primary) 80%, transparent)}
.nav-item .ic{width:18px;height:18px;padding:6px;box-sizing:content-box;flex:0 0 auto;
  border-radius:9px;background:rgba(255,255,255,.045);opacity:.82;
  transition:background .18s,opacity .18s}
.nav-item.active .ic{background:color-mix(in srgb,var(--primary) 42%, transparent);opacity:1;
  box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 40%, transparent)}
.nav-item .idx{font-family:var(--mono);font-size:10.5px;opacity:.5;margin-left:auto}
.nav-item.active .idx{opacity:.85}
.sidebar-foot{margin-top:auto;padding:14px 10px 2px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#69789d;line-height:1.6}

/* ---------- data loader ---------- */
.data-loader{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.load-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:10px 12px;border-radius:10px;
  background:var(--accent-grad);color:#fff;border:none;font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(47,92,214,.28);transition:filter .15s,transform .1s}
.load-btn:hover{filter:brightness(1.08)}
.load-btn:active{transform:translateY(1px)}
.data-status{font-size:11px;color:#9aa8c8;line-height:1.55;padding:11px 4px 4px}
.data-status b{color:#dfe6f5;font-weight:600}
.data-status .ds-time{color:#69789d}
.ds-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle}
.ds-dot.ds-default{background:#69789d}
.ds-dot.ds-live{background:#3fd08a;box-shadow:0 0 0 3px rgba(63,208,138,.18)}
.reset-btn{background:none;border:none;color:#69789d;font-family:var(--sans);font-size:11px;cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:2px}
.reset-btn:hover{color:#aeb9d2}

/* ---------- theme picker ---------- */
.theme-block{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.07)}
.theme-label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#69789d;font-weight:600;padding:0 2px 10px}
.theme-row{display:flex;flex-wrap:wrap;gap:9px;padding:0 2px}
.theme-sw{width:27px;height:27px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;background:none;position:relative;transition:transform .12s}
.theme-sw span{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.theme-sw:hover{transform:translateY(-1px)}
.theme-sw:hover span{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.theme-sw.active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.18)}

/* ---------- language toggle ---------- */
.lang-block{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.07)}
.lang-seg{display:flex;gap:4px;background:rgba(255,255,255,.05);border-radius:9px;padding:3px}
.lang-opt{flex:1;border:none;background:none;color:#aeb9d2;font-family:var(--sans);font-size:12px;font-weight:600;padding:7px 8px;border-radius:7px;cursor:pointer;transition:.15s}
.lang-opt:hover{color:#e6ecf8}
.lang-opt.active{background:var(--accent-grad);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* ---------- macro assumption panel ---------- */
.macro-panel{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.macro-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.macro-title{font-size:13px;font-weight:700;letter-spacing:-.01em}
.macro-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.macro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px 16px}
.macro-group-label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:11px}
.macro-sl-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.macro-sl-top b{font-family:var(--mono);color:var(--primary);font-size:13px}
.macro-range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--primary) 0%,var(--primary) 0%,#dfe4ec 0%);outline:none}
.macro-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:pointer;box-shadow:0 1px 4px rgba(20,33,58,.2)}
.macro-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:pointer}
.macro-hint{font-size:11px;color:var(--ink-3);margin-top:13px;line-height:1.55}
.macro-active-tag{display:inline-block;font-size:11.5px;font-weight:600;color:var(--primary);background:var(--primary-soft);border:1px solid var(--primary);border-radius:8px;padding:6px 11px;margin-bottom:14px}
.chip.mp.active{background:var(--primary);border-color:var(--primary);color:#fff}
@media(max-width:760px){.macro-grid{grid-template-columns:1fr}}

/* ---------- drop overlay ---------- */
.drop-overlay{position:fixed;inset:0;z-index:200;background:rgba(22,41,78,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center}
.drop-overlay.show{display:flex}
.drop-card{background:var(--surface);border:2px dashed var(--primary);border-radius:20px;padding:46px 64px;text-align:center;color:var(--primary);box-shadow:var(--shadow-md)}
.drop-card .dt{font-size:18px;font-weight:700;color:var(--ink);margin-top:14px}
.drop-card .ds{font-size:12.5px;color:var(--ink-3);margin-top:5px}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);z-index:210;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;display:flex;align-items:center;gap:10px;max-width:80vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:#15694e}
.toast.err{background:#9a2f28}
.toast.load{background:var(--navy)}
.spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- header ---------- */
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.view-head h1{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.view-head .sub{color:var(--ink-2);font-size:13.5px;margin-top:5px;max-width:640px}
.period-pill{
  display:inline-flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:8px 15px;font-size:12.5px;
  color:var(--ink-2);box-shadow:var(--shadow-sm);white-space:nowrap;
}
.period-pill b{color:var(--ink);font-weight:600}
.period-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px rgba(31,157,118,.16)}

/* period selector */
.period-ctl{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:7px 10px 7px 15px;box-shadow:var(--shadow-sm);font-size:12.5px;color:var(--ink-2)}
.period-ctl .dot{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px rgba(31,157,118,.16)}
.period-ctl .pl{font-weight:600;color:var(--ink-2)}
.selwrap{position:relative}
.selwrap::after{content:"";position:absolute;right:9px;top:50%;width:7px;height:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-65%) rotate(45deg);pointer-events:none}
.period-sel{appearance:none;-webkit-appearance:none;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:6px 26px 6px 12px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s}
.period-sel:hover{border-color:var(--border-strong)}
.period-sel:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:18px}

/* ===== 3D / glass depth (gated on body.fx-3d) ===== */
body.fx-3d .card,
body.fx-3d .statcard,
body.fx-3d .list-panel,
body.fx-3d .t4-card,
body.fx-3d .kpi{
  background:linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, #ffffff), var(--surface));
  box-shadow:var(--shadow-md), inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent);
  backdrop-filter:saturate(1.1);
}
body.fx-3d .card{transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
body.fx-3d .tilt3d{transition:transform .12s ease-out, box-shadow .25s;transform-style:preserve-3d;will-change:transform}
body.fx-3d .tilt3d:hover{box-shadow:var(--shadow-lg, 0 18px 44px rgba(20,33,58,.16)), inset 0 1px 0 color-mix(in srgb,#ffffff 70%,transparent)}
body.fx-3d .kpi-ic,
body.fx-3d .logo-box,
body.fx-3d .brand-mark{box-shadow:0 6px 16px color-mix(in srgb, var(--primary) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.25)}
body.fx-3d .nav-item.active{box-shadow:0 6px 18px color-mix(in srgb, var(--primary) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.18)}
/* sheen sweep on hover for KPI tiles */
body.fx-3d .tilt3d::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 48%, transparent 62%);transition:opacity .3s}
body.fx-3d .tilt3d:hover::after{opacity:1}

/* ===== glass transparency (gated on body.fx-glass) — lets animated bg show through ===== */
/* ===== glass transparency (gated on body.fx-glass) — lets animated bg show through ===== */
/* --glass-op = surface opacity 0..1 (set by Settings slider; default 0.72) */
body.fx-glass{--glass-op:0.72}
body.fx-glass .card,
body.fx-glass .list-panel,
body.fx-glass .t4-card,
body.fx-glass .period-ctl,
body.fx-glass .period-pill,
body.fx-glass .kpi,
body.fx-glass .statcard{
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  background:color-mix(in srgb, var(--surface) calc(var(--glass-op) * 100%), transparent);
  border-color:color-mix(in srgb, var(--border) 55%, transparent);
}
body.fx-glass.fx-3d .card,
body.fx-glass.fx-3d .statcard,
body.fx-glass.fx-3d .kpi,
body.fx-glass.fx-3d .list-panel,
body.fx-glass.fx-3d .t4-card{
  background:linear-gradient(160deg, color-mix(in srgb, var(--surface) calc((var(--glass-op) + 0.08) * 100%), transparent), color-mix(in srgb, var(--surface) calc((var(--glass-op) - 0.06) * 100%), transparent));
}
body.fx-glass .sidebar{
  background:color-mix(in srgb, var(--navy) 82%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
}
/* nested panels & sticky table column follow a lighter tint so text stays readable */
body.fx-glass .metric,
body.fx-glass .risk-tile,
body.fx-glass .st-met,
body.fx-glass .st-npl,
body.fx-glass .st-slider,
body.fx-glass .st-verdict,
body.fx-glass .st-deb,
body.fx-glass .fx-toggle,
body.fx-glass .fx-style,
body.fx-glass .risk-thresh,
body.fx-glass .macro-panel,
body.fx-glass .lm-field,
body.fx-glass .amsg.bot .abody,
body.fx-glass .proj-tbl tbody td:first-child,
body.fx-glass .proj-tbl thead th:first-child{background:color-mix(in srgb, var(--surface-2) calc((var(--glass-op) - 0.05) * 100%), transparent)}
/* table hover & chart wrappers stay see-through */
body.fx-glass .tbl tbody tr:hover{background:color-mix(in srgb, var(--surface-2) 45%, transparent)}
body.fx-glass .proj-tbl tbody tr:hover td:first-child{background:color-mix(in srgb, var(--surface-2) 55%, transparent)}
body.fx-glass .hbar .track,
body.fx-glass .split-bar,
body.fx-glass .st-bar{background:color-mix(in srgb, var(--ink-3) 16%, transparent)}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:20px 22px;min-width:0;
}
.grid>*{min-width:0}
.tbl-scroll{overflow-x:auto;width:100%}
.card.flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.card-title{font-size:14px;font-weight:700;letter-spacing:-.01em}
.card-sub{font-size:11.5px;color:var(--ink);margin-top:3px;font-weight:500}
.card-tag{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);padding:4px 9px;border-radius:7px}
.section-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:34px 2px 14px;display:flex;align-items:center;gap:12px}
.section-label::after{content:"";flex:1;height:1px;background:var(--border)}
.section-label:first-child{margin-top:0}

/* ---------- KPI ---------- */
.kpi{display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden;min-width:0}
.kpi .lab{font-size:11.5px;color:var(--ink);font-weight:600;letter-spacing:.01em;display:flex;align-items:center;gap:7px;line-height:1.3;min-height:2.6em}
.kpi .val{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:10px;line-height:1.05;white-space:nowrap}
.kpi .val .unit{font-size:13px;color:var(--ink-3);font-weight:500;margin-left:3px}
.kpi .meta{font-size:11px;color:var(--ink-2);margin-top:9px;display:flex;align-items:center;gap:6px;line-height:1.4;flex-wrap:wrap}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;font-size:11.5px;font-family:var(--mono)}
.delta.up{color:var(--pos)}.delta.down{color:var(--neg)}
.kpi-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);flex:0 0 34px}

/* ---------- segment / collect cards ---------- */
.statcard{position:relative;overflow:hidden;border-radius:var(--radius);padding:18px 20px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.statcard .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.statcard .name{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.statcard .name .sw{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.statcard .crit{font-size:11px;color:var(--ink-3);margin-top:3px;font-weight:500}
.statcard .big{font-family:var(--mono);font-size:24px;font-weight:600;margin-top:14px;letter-spacing:-.02em;line-height:1}
.statcard .row{display:flex;justify-content:space-between;align-items:baseline;margin-top:11px;font-size:12px;color:var(--ink-2)}
.statcard .row b{font-family:var(--mono);color:var(--ink);font-weight:600}

/* ---------- rp unit tag — preserve lowercase in uppercase headers ---------- */
.rp-u{text-transform:none;letter-spacing:0}
/* ---------- rkap tiles ---------- */
.rk-tiles{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.rk-tile{flex:0 0 220px;max-width:260px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px 20px}
.rk-tlab{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.rk-tval{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}
.rk-tsub{font-size:11.5px;color:var(--ink-2);font-family:var(--mono)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:540px}
.tbl thead th{
  text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);font-weight:700;padding:0 14px 11px;border-bottom:1px solid var(--border);white-space:nowrap;
}
.tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--ink)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.num,.tbl .figure{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rank{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border);font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.rank.top{background:var(--navy);color:#fff;border-color:var(--navy)}
.cust-cell{display:flex;align-items:center;gap:11px;min-width:0}
.avatar{width:30px;height:30px;border-radius:8px;flex:0 0 30px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;letter-spacing:-.02em}
.cust-cell .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cust-cell .id{font-size:11px;color:var(--ink-3);font-family:var(--mono)}

/* ---------- badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap}
.badge .d{width:7px;height:7px;border-radius:50%}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--border-strong);color:var(--ink)}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.toggle-row{display:flex;gap:8px;flex-wrap:wrap}
.own-tag{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px}
.own-dom{background:#eaf3ff;color:#2563d9}
.own-intl{background:#fdf1e8;color:#c2702f}

/* ---------- charts ---------- */
.chart-wrap{width:100%}
svg.chart{display:block;width:100%;overflow:visible}
.legend{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:6px}
.legend .li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink)}
.legend .li .sw{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.legend .li b{color:var(--ink);font-family:var(--mono);font-weight:600;margin-left:auto}
.donut-center{text-align:center}
.donut-center .v{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.02em}
.donut-center .l{font-size:11px;color:var(--ink-3);font-weight:500}

/* hbar */
.hbar{display:flex;flex-direction:column;gap:13px}
.hbar .item{display:grid;grid-template-columns:140px 1fr auto;align-items:center;gap:14px}
.hbar .item .lb{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .track{height:9px;border-radius:5px;background:var(--surface-2);overflow:hidden;position:relative}
.hbar .fill{height:100%;border-radius:5px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.hbar .vv{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-2);min-width:74px;text-align:right}

/* ---------- detail airlines ---------- */
.detail-layout{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.list-panel{position:sticky;top:18px}
#dPanel{max-height:calc(100vh - 150px);overflow-y:auto;overflow-x:hidden;padding-right:6px}
.list-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 150px)}
.search{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid var(--border)}
.search input{border:none;outline:none;font-family:var(--sans);font-size:13px;width:100%;color:var(--ink);background:none}
.search input::placeholder{color:var(--ink-3)}
.list-scroll{overflow-y:auto;flex:1}
.list-item{display:flex;align-items:center;gap:11px;padding:11px 15px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.list-item:hover{background:var(--surface-2)}
.list-item.active{background:var(--primary-soft)}
.list-item .nm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-item .mt{font-size:10.5px;color:var(--ink-3);font-family:var(--mono)}
.list-item .amt{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-2);text-align:right}
.filter-bar{display:flex;gap:6px;padding:10px 13px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface-2)}
.minichip{font-size:11px;font-weight:600;padding:4px 9px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer}
.minichip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.minichip[data-k="grp"].active{background:var(--grp-c,var(--navy));color:#fff;border-color:var(--grp-c,var(--navy))}

.profile-hero{display:flex;gap:18px;align-items:flex-start}
.logo-box{width:64px;height:64px;border-radius:14px;flex:0 0 64px;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.03em;box-shadow:var(--shadow-sm)}
.metricrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.metric{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:13px 15px}
.metric .l{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.metric .v{font-family:var(--mono);font-size:18px;font-weight:600;margin-top:7px;letter-spacing:-.02em}
.metric .s{font-size:11px;color:var(--ink-2);margin-top:3px}
.prose{font-size:13px;color:var(--ink-2);line-height:1.7;white-space:pre-line;max-height:260px;overflow-y:auto;padding-right:8px}
.kv{display:flex;flex-direction:column;gap:11px}
.kv .r{display:flex;gap:12px;font-size:12.5px}
.kv .r .k{color:var(--ink-2);min-width:120px;flex:0 0 120px;font-weight:500}
.kv .r .v{color:var(--ink);font-weight:600}
.dir-list{display:flex;flex-direction:column;gap:9px;font-size:12.5px;white-space:pre-line;color:var(--ink-2);line-height:1.6;max-height:230px;overflow-y:auto}

/* top4 */
.t4-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:visible;display:flex;flex-direction:column}
.t4-hover{position:relative;cursor:help}
.t4-name:hover{text-decoration:underline dotted;text-underline-offset:3px}
.t4-tip{position:absolute;left:0;top:calc(100% + 10px);z-index:60;width:248px;padding:13px 15px;border-radius:12px;
  background:var(--navy);color:#e6ecf8;box-shadow:0 12px 34px rgba(20,33,58,.32);
  opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .16s,transform .16s,visibility .16s;pointer-events:none;font-weight:400}
.t4-hover:hover .t4-tip{opacity:1;visibility:visible;transform:none}
.t4-tip::before{content:"";position:absolute;left:22px;top:-6px;width:12px;height:12px;background:var(--navy);transform:rotate(45deg)}
.t4-tip-h{font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em;margin-bottom:9px;display:flex;flex-direction:column;gap:2px;line-height:1.25}
.t4-tip-h span{font-size:10.5px;font-weight:500;color:#8a98b8;font-family:var(--mono)}
.t4-tip-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:11.5px;color:#aeb9d2;padding:3px 0}
.t4-tip-row b{font-family:var(--mono);color:#fff;font-weight:600;font-size:12px}
.t4-tip-sep{height:1px;background:rgba(255,255,255,.12);margin:7px 0}
/* global airline hover-card (works across menus, never clipped) */
.air-hover{cursor:help}
.air-hover .nm{text-decoration:underline dotted transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.air-hover:hover .nm{text-decoration-color:currentColor}
.airline-tip{position:fixed;left:-9999px;top:0;z-index:9998;width:262px;padding:13px 15px;border-radius:12px;
  background:var(--navy);color:#e6ecf8;box-shadow:0 14px 38px rgba(20,33,58,.36);font-weight:400;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.airline-tip.show{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.airline-tip::before{content:"";position:absolute;left:var(--at-ax,22px);width:11px;height:11px;background:var(--navy);transform:translateX(-50%) rotate(45deg)}
.airline-tip[data-arrow="top"]::before{top:-5px}
.airline-tip[data-arrow="bottom"]::before{bottom:-5px}
.airline-tip .at-h{font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em;margin-bottom:9px;display:flex;flex-direction:column;gap:2px;line-height:1.25}
.airline-tip .at-h span{font-size:10.5px;font-weight:500;color:#8a98b8;font-family:var(--mono)}
.airline-tip .at-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:11.5px;color:#aeb9d2;padding:3px 0}
.airline-tip .at-row b{font-family:var(--mono);color:#fff;font-weight:600;font-size:12px;white-space:nowrap}
.airline-tip .at-sep{height:1px;background:rgba(255,255,255,.12);margin:7px 0}
/* receipts-over-invoice analysis bars */
.inv-bars{display:flex;flex-direction:column;gap:16px}
.inv-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
.inv-lab{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.inv-lab i{font-size:11px;font-weight:500;color:var(--ink-3);font-style:normal}
.inv-pct{font-family:var(--mono);font-size:18px;font-weight:700}
.inv-track{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.inv-fill{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.inv-amt{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:5px}
/* invoice-allocation control */
.inv-alloc{margin-bottom:16px}
.inv-alloc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.inv-alloc-lab{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.inv-mode .chip{font-size:12px}
.inv-manual{margin-top:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:13px 15px}
.inv-manual-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.inv-manual-top span{font-size:13px;color:var(--ink)}
.inv-pctv{font-family:var(--mono);font-size:18px;font-weight:700;color:#1f9d76}
.inv-manual-foot{font-size:11.5px;color:var(--ink-3);margin-top:8px}
.inv-manual-foot b{color:#2f5cd6;font-family:var(--mono)}
/* restru scenario panel */
.rstr-head{font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:9px 12px;margin-bottom:12px}
.rstr-list{display:flex;flex-direction:column;gap:10px}
.rstr-row{border:1px solid var(--border);border-radius:12px;padding:13px 15px;transition:.16s;background:var(--surface)}
.rstr-row.on{border-color:color-mix(in srgb,var(--primary) 45%,transparent);background:color-mix(in srgb,var(--primary) 4%,transparent)}
.rstr-main{display:flex;align-items:center;gap:13px}
.rstr-tog{flex:0 0 auto}
.rstr-nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.rstr-nm b{font-size:14px;font-weight:700;color:var(--ink)}
.rstr-nm span{font-size:11.5px;color:var(--ink-3)}
.rstr-nm span b{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);font-weight:600}
.rstr-ctl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:13px}
.rstr-f{display:flex;flex-direction:column;gap:5px}
.rstr-f label{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.rstr-num{font-family:var(--mono);font-size:13px;font-weight:600;padding:9px 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--ink)}
.rstr-num:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.rstr-num:disabled,.rstr-row .proj-month:disabled{opacity:.5;cursor:not-allowed}
.rstr-out{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--primary);padding:9px 0}
.rstr-row:not(.on) .rstr-out{color:var(--ink-3)}
@media(max-width:680px){.rstr-ctl{grid-template-columns:1fr}}
.restru-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#7c3aed;background:color-mix(in srgb,#7c3aed 12%,transparent);padding:5px 11px;border-radius:8px;margin-bottom:12px}
/* Excel export button (assistant + tables) */
.xls-btn{border:none;background:#1f7a44;color:#fff;font:inherit;font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;box-shadow:0 4px 14px color-mix(in srgb,#1f7a44 35%,transparent)}
.xls-btn:hover{filter:brightness(1.08)}
.atbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.copy-btn,.dl-btn{margin-top:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);font:inherit;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:8px;cursor:pointer;transition:.14s}
.dl-btn{margin-left:7px}
.copy-btn:hover,.dl-btn:hover{border-color:var(--primary);color:var(--primary)}
.confetti-pc{position:fixed;top:-12px;width:9px;height:14px;z-index:10050;pointer-events:none;border-radius:1px;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(105vh) rotate(720deg);opacity:.85}}
/* mode presentasi (TV) */
.present-btn{margin:6px 14px 4px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font:inherit;font-size:12.5px;font-weight:700;border-radius:10px;cursor:pointer;transition:.15s;width:calc(100% - 28px)}
.present-btn:hover{background:var(--primary);color:#fff}
.app.sidebar-collapsed .present-btn{font-size:0;padding:9px 0}
.app.sidebar-collapsed .present-btn::before{content:'📺';font-size:16px}
.pv-overlay{position:fixed;inset:0;z-index:10060;background:#071226;color:#e8f1ff;display:flex;flex-direction:column;font-family:var(--sans)}
.pv-top{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;border-bottom:1px solid rgba(255,255,255,.12)}
.pv-brand{font-size:15px;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:9px;color:#e8f1ff}
.pv-brand img{height:26px}
.pv-ctrl{display:flex;gap:8px}
.pv-ctrl button{background:rgba(255,255,255,.10);color:#e8f1ff;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:7px 13px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pv-ctrl button:hover{background:rgba(255,255,255,.22)}
.pv-ctrl button.on{background:var(--primary,#0088dd);color:#fff}
.pv-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:3vh 6vw}
.pv-slide{width:100%;max-width:1100px;animation:pvIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pvIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.pv-h{font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#e8f1ff}
.pv-sub{font-size:clamp(13px,1.6vw,20px);color:#92b4d8;margin:10px 0 5vh}
.pv-kpis{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pv-kpis-5{grid-template-columns:repeat(5,1fr)!important;gap:12px}
.pv-kpis-5 .pv-kpi{padding:16px 14px}
.pv-kpis-5 .pv-kv{font-size:clamp(18px,2.4vw,36px)}
/* split bar (top 10 dom vs intl) */
.pv-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;width:100%}
.pv-split-col{display:flex;flex-direction:column;gap:10px}
.pv-split-h{font-size:clamp(14px,1.5vw,18px);font-weight:700;margin-bottom:4px;letter-spacing:.02em}
/* RKAP performance rows */
.pv-rkap{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,16px)}
.pv-rkrow{display:grid;grid-template-columns:60px 1fr 1fr 3fr 160px;align-items:center;gap:12px}
.pv-rkm{font-size:clamp(13px,1.3vw,17px);font-weight:700;color:var(--ink-2,#9db8ee)}
.pv-rknum{font-size:clamp(12px,1.2vw,15px);font-weight:700;text-align:right}
.pv-rktgt{font-size:clamp(10px,1vw,13px);color:#6b87b8;text-align:right}
.pv-rktrack{height:clamp(14px,2vh,20px);background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden}
.pv-rkfill{height:100%;border-radius:6px;transition:width .4s}
.pv-rkpct{font-size:clamp(13px,1.3vw,17px);font-weight:800;text-align:right;white-space:nowrap}
.pv-kpi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px 22px}
.pv-rkap-wrap{width:100%;color:#e8f1ff;font-size:15px;transform:scale(.92);transform-origin:top left}
.pv-rkap-wrap .card{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important}
.pv-rkap-wrap .card-title{color:#e8f1ff!important}
.pv-rkap-wrap table{width:100%}
.pv-rkap-wrap th,.pv-rkap-wrap td{color:#c8d8f0!important;border-color:rgba(255,255,255,.1)!important}
.pv-rkap-wrap ul.alist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pv-rkap-wrap ul.alist li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 24px;font-size:clamp(15px,1.6vw,20px);color:#dce6f7}
.pv-rkap-wrap ul.alist li b{font-family:var(--mono);font-size:1.15em;color:#e8f1ff}
.pv-rkap-wrap p{color:#9db8d8;font-size:15px;margin-bottom:6px}
.pv-rkap-wrap p b{color:#e8f1ff}
.pv-kl{font-size:clamp(11px,1.2vw,15px);color:#b9c6e0;font-weight:600;white-space:nowrap}
.pv-kv{font-size:clamp(22px,3.2vw,48px);font-weight:800;font-family:var(--mono);letter-spacing:-.02em;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-ks{display:none}
.pv-tbl{width:100%;border-collapse:collapse;font-size:clamp(16px,2vw,26px)}
.pv-tbl td{padding:16px 12px;border-bottom:1px solid rgba(255,255,255,.1)}
.pv-rk{color:#7fa3f0;font-weight:700;width:50px}
.pv-rt{text-align:right;font-family:var(--mono);font-weight:700;white-space:nowrap}
.pv-empty{font-size:24px;color:#9db8ee;padding:40px 0}
.pv-dots{display:flex;gap:10px;justify-content:center;padding:20px}
.pv-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}
.pv-dots span.on{background:#fff;width:28px;border-radius:5px}
/* TV mode — visual additions */
.pv-bars{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,20px)}
.pv-bar{display:flex;align-items:center;gap:18px}
.pv-bl{flex:0 0 34%;font-size:clamp(14px,1.7vw,22px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-btrack{flex:1;height:clamp(16px,2.4vh,26px);background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden}
.pv-bfill{height:100%;border-radius:8px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.pv-bv{flex:0 0 auto;font-family:var(--mono);font-weight:700;font-size:clamp(13px,1.5vw,20px);white-space:nowrap}
.pv-trend{display:flex;align-items:flex-end;gap:clamp(10px,3vw,40px);height:46vh;padding:0 2vw}
.pv-tcol{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.pv-tbars{display:flex;align-items:flex-end;gap:6px;height:100%;width:100%;justify-content:center}
.pv-tb{width:clamp(18px,3vw,46px);border-radius:6px 6px 0 0;transition:height .7s cubic-bezier(.2,.8,.2,1)}
.pv-tlab{margin-top:12px;font-size:clamp(12px,1.4vw,18px);color:#9db8ee;font-weight:600}
.pv-tlegend{display:flex;gap:24px;justify-content:center;margin-top:18px;font-size:15px;color:#b9c6e0}
.pv-tlegend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:7px;vertical-align:middle}
.pv-two{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.pv-col-h{font-size:clamp(14px,1.6vw,20px);font-weight:700;margin-bottom:10px}
/* tariff scenario panel */
.tf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:6px}
.tf-f{display:flex;flex-direction:column;gap:5px}
.tf-f label{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.tf-base{font-size:10.5px;color:var(--ink-3);font-family:var(--mono)}
.tf-dim{opacity:.5;pointer-events:none}
@media(max-width:820px){.tf-grid{grid-template-columns:1fr 1fr}}
.t4-top{padding:20px 22px;display:flex;gap:15px;align-items:center;border-bottom:1px solid var(--border)}
.t4-rank{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-3)}
.t4-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:16px;flex:1}
.t4-metrics{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.split-bar{height:11px;border-radius:6px;overflow:hidden;display:flex;background:var(--surface-2)}
.split-bar .s{height:100%}

/* misc */
.muted{color:var(--ink-3)}
.scrolltip{font-size:11px;color:var(--ink-3);text-align:center;padding:9px;font-style:italic}

/* ---------- assistant / chat ---------- */
.ai-badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}
.ai-badge .d{width:7px;height:7px;border-radius:50%}
.ai-badge.on{color:var(--col-lancar)} .ai-badge.on .d{background:var(--col-lancar);box-shadow:0 0 0 3px rgba(31,157,118,.16)}
.ai-badge.off{color:var(--ink-2)} .ai-badge.off .d{background:var(--ink-3)}
.ai-head{display:flex;align-items:center;gap:9px}
.ai-gear{width:36px;height:36px;flex:0 0 36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:.15s}
.ai-gear:hover{color:var(--primary);border-color:var(--primary)}
.ai-modal-ov{position:fixed;inset:0;z-index:240;background:rgba(22,41,78,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center}
.ai-modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-md);width:min(480px,92vw);padding:24px 26px;animation:aimPop .22s ease both}
@keyframes aimPop{from{opacity:.4;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
.aim-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.aim-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.aim-x{border:none;background:none;font-size:17px;color:var(--ink-3);cursor:pointer;line-height:1}
.aim-desc{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-bottom:16px}
.aim-l{display:block;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 6px}
.aim-opt{text-transform:none;letter-spacing:0;color:var(--ink-3);font-weight:500}
.aim-in{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 13px;font-family:var(--mono);font-size:12.5px;color:var(--ink);outline:none;background:transparent}
.aim-in:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.aim-status{font-size:12px;margin-top:13px;min-height:18px;line-height:1.5}
.aim-status.ok{color:var(--col-lancar)} .aim-status.err{color:var(--neg)} .aim-status.load{color:var(--ink-2);display:flex;align-items:center;gap:8px}
.aim-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.aim-tone{display:flex;gap:8px;margin:4px 0 4px}
.aim-tone-btn{flex:1;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);border-radius:10px;padding:9px 12px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.aim-tone-btn:hover{border-color:var(--border-strong);color:var(--ink)}
.aim-tone-btn.on{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 30%,transparent)}
.aim-btn{border:none;border-radius:10px;padding:10px 18px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;background:var(--primary);color:#fff;transition:.15s}
.aim-btn:hover{filter:brightness(1.08)}
.aim-btn.ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--border)}
.aim-note{font-size:11px;color:var(--ink-3);margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.chat-wrap2{display:flex;flex-direction:column;height:calc(100vh - 170px);min-height:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.chat-scroll{flex:1;overflow-y:auto;padding:24px 26px;display:flex;flex-direction:column;gap:18px}
.amsg{display:flex;gap:13px;max-width:1180px;width:100%}
.amsg.user{align-self:flex-end;flex-direction:row-reverse}
.amsg .aav{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:14px;background:var(--accent-grad);box-shadow:0 3px 9px rgba(47,92,214,.3);transition:box-shadow .2s}
.amsg .aav.spk{animation:spkpulse 1s ease-in-out infinite}
@keyframes spkpulse{0%,100%{box-shadow:0 0 0 0 rgba(47,92,214,.5)}50%{box-shadow:0 0 0 7px rgba(47,92,214,0)}}
.amsg .abody{min-width:0}
.ubub{background:var(--navy);color:#fff;padding:11px 16px;border-radius:14px 14px 4px 14px;font-size:13.5px;font-weight:500;line-height:1.5}
.amsg.bot .abody{background:var(--surface-2);border:1px solid var(--border);border-radius:4px 14px 14px 14px;padding:15px 18px;width:100%}
.atitle{font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.anarr{font-size:13.5px;line-height:1.6;color:var(--ink);background:var(--primary-soft);border:1px solid var(--border);border-radius:11px;padding:12px 14px;margin-bottom:14px}
.anarr.loading{color:var(--ink-2);display:flex;align-items:center;gap:9px}
.anarr .aitag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;background:var(--primary);color:#fff;padding:2px 7px;border-radius:6px;margin-right:9px;vertical-align:middle}
.spin2{width:14px;height:14px;border:2px solid rgba(47,92,214,.3);border-top-color:var(--primary);border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
.amini{font-size:13px;color:var(--ink-2);line-height:1.6}
.ametrics{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:14px}
.amet{flex:1;min-width:120px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 13px}
.amet .l{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.amet .v{font-family:var(--mono);font-size:16px;font-weight:600;margin-top:6px;letter-spacing:-.02em}
.amet .dd{margin-top:5px}
.adelta{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;font-family:var(--mono)}
.adelta.up{color:var(--pos)} .adelta.down{color:var(--neg)}
.achart{margin:6px 0 14px} .acap{font-size:11px;color:var(--ink-3);font-weight:600;margin-bottom:6px}
.alist{margin:4px 0 14px;padding-left:18px;font-size:13px;color:var(--ink-2);line-height:1.7} .alist b{color:var(--ink);font-family:var(--mono)}
.asaran{margin:4px 0 12px;padding-left:20px;font-size:13px;color:var(--ink-2);line-height:1.65}
.asaran li{margin-bottom:9px;padding-left:4px}
.asaran li b{color:var(--ink)}
.asaran li i{color:var(--primary);font-style:normal;font-weight:600}
.atbl-t{font-size:12px;font-weight:700;color:var(--ink-2);margin:6px 0 8px}
.atbl{width:100%;border-collapse:collapse;font-size:12.5px}
.atbl th{text-align:left;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:0 10px 8px;border-bottom:1px solid var(--border)}
.atbl td{padding:8px 10px;border-bottom:1px solid var(--border)}
.atbl tr:last-child td{border-bottom:none}
.atbl .r{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.adot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.arank{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--navy);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600}
.apill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;letter-spacing:.02em}

/* assistant proactive insights + history */
.ins-title{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:14px 0 9px}
.insights{display:flex;flex-direction:column;gap:7px}
.insight{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink);padding:9px 12px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border)}
.insight .ins-ic{flex:0 0 18px;text-align:center;font-size:12px;font-weight:700}
.insight.good .ins-ic{color:var(--pos)}
.insight.warn{background:color-mix(in srgb,var(--neg) 6%,var(--surface-2));border-color:color-mix(in srgb,var(--neg) 22%,var(--border))}
.insight.warn .ins-ic{color:var(--neg)}
.hist-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:7px 13px;font-size:11.5px;color:var(--ink-3);background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:9px}
.hist-clear{border:none;background:none;color:var(--neg);font-family:var(--sans);font-size:11.5px;font-weight:600;cursor:pointer;padding:2px 4px}
.hist-clear:hover{text-decoration:underline}
.band-tbl td.win{color:var(--pos);font-weight:700}
.band-tbl td.win::after{content:" ✓";font-size:10px}
.band-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.band-side{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.band-side.rt{justify-content:flex-end}
.band-av{width:38px;height:38px;border-radius:10px;flex:0 0 38px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.band-nm{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.2;display:flex;flex-direction:column;gap:2px;min-width:0}
.band-nm.rt{text-align:right}
.band-nm span{font-size:10.5px;font-weight:500;color:var(--ink-3);font-family:var(--mono)}
.band-vs{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 9px}

/* ---------- visual fx toggles (Settings) ---------- */
.set-theme-lab{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:11px}
.set-theme-row{display:flex;flex-wrap:wrap;gap:11px}
.set-theme-row .theme-sw{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;background:none;position:relative;transition:transform .12s}
.set-theme-row .theme-sw span{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(20,33,58,.14)}
.set-theme-row .theme-sw.tri span{background:linear-gradient(135deg,var(--a) 0 34%,var(--b) 34% 67%,var(--c) 67%)}
.set-theme-row .theme-sw:hover{transform:translateY(-1px)}
.set-theme-row .theme-sw.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent)}
/* custom theme swatch (+) */
.theme-sw.custom-sw i{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.4);pointer-events:none}
.set-theme-row .theme-sw.custom-sw span{background:conic-gradient(from 210deg,var(--a),var(--b),var(--a))}
/* custom theme builder */
.ctheme{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px}
.ctheme-row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
.ctheme-field{display:flex;flex-direction:column;gap:7px}
.ctheme-field>span{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
.ctheme-pick{display:flex;align-items:center;gap:9px}
.ctheme-pick input[type=color]{width:42px;height:34px;border:1px solid var(--border-strong);border-radius:9px;background:none;cursor:pointer;padding:2px}
.ctheme-pick b{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-transform:uppercase}
.ctheme-plab{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin:16px 0 9px}
.ctheme-presets{display:flex;flex-wrap:wrap;gap:9px}
.ctheme-preset{width:34px;height:34px;border-radius:9px;border:2px solid transparent;cursor:pointer;transition:transform .12s;box-shadow:inset 0 0 0 1px rgba(20,33,58,.12)}
.ctheme-preset:hover{transform:translateY(-2px)}
#langSegSet{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px}
#langSegSet .lang-opt{flex:1;border:none;background:none;color:var(--ink-2);font-family:var(--sans);font-size:12.5px;font-weight:600;padding:8px 8px;border-radius:7px;cursor:pointer;transition:.15s}
#langSegSet .lang-opt:hover{color:var(--ink)}
#langSegSet .lang-opt.active{background:var(--accent-grad);color:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 30%,transparent)}
.fx-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fx-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:14px 16px;cursor:pointer}
.fx-toggle span{display:flex;flex-direction:column;gap:3px}
.fx-op{margin-top:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:13px 15px;transition:opacity .2s}
.fx-op-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px}
.fx-op-top b{font-family:var(--mono);color:var(--primary)}
.fx-toggle b{font-size:13px;font-weight:600;color:var(--ink)}
.fx-toggle i{font-size:11px;color:var(--ink-3);font-style:normal}
.sw-btn{width:42px;height:24px;border-radius:999px;border:none;background:var(--border-strong);position:relative;cursor:pointer;flex:0 0 42px;transition:background .2s}
.sw-btn::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.sw-btn.on{background:var(--primary)}
.sw-btn.on::after{transform:translateX(18px)}
@media(max-width:640px){.fx-row{grid-template-columns:1fr}}

/* background style picker */
.fx-style-lab{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:18px 0 10px}
.fx-styles{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.fx-style{display:flex;flex-direction:column;gap:3px;padding:0 0 11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);cursor:pointer;overflow:hidden;text-align:left;transition:.15s}
.fx-style:hover{border-color:var(--border-strong)}
.fx-style.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent)}
.fx-style-prev{height:58px;width:100%;display:block;position:relative;overflow:hidden;background:var(--navy)}
.fx-style b{font-size:12px;font-weight:600;color:var(--ink);padding:8px 10px 0}
.fx-style i{font-size:10.5px;color:var(--ink-3);font-style:normal;padding:0 10px;line-height:1.35}
.fx-prev-aurora{background:radial-gradient(circle at 30% 30%,var(--primary),transparent 60%),radial-gradient(circle at 75% 70%,color-mix(in srgb,var(--primary) 50%,#fff),transparent 55%),var(--navy)}
.fx-prev-mesh{background:radial-gradient(40% 50% at 25% 30%,var(--primary),transparent 70%),radial-gradient(45% 50% at 80% 75%,color-mix(in srgb,var(--navy) 50%,var(--primary)),transparent 70%),radial-gradient(40% 40% at 70% 20%,color-mix(in srgb,var(--primary) 50%,#fff),transparent 70%);filter:blur(3px)}
.fx-prev-particles{background:var(--navy)}
.fx-prev-particles::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--primary) 1.4px,transparent 1.6px),radial-gradient(circle,color-mix(in srgb,var(--primary) 60%,#fff) 1.2px,transparent 1.4px);background-size:22px 22px,33px 30px;background-position:0 0,11px 9px;opacity:.85}
.fx-prev-waves{background:var(--navy)}
.fx-prev-waves::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-30%;height:90%;border-radius:50%;background:color-mix(in srgb,var(--primary) 55%,transparent)}
.fx-prev-waves::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-45%;height:90%;border-radius:50%;background:color-mix(in srgb,var(--primary) 30%,transparent)}
.fx-prev-grid{background:var(--navy);background-image:linear-gradient(color-mix(in srgb,var(--primary) 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--primary) 45%,transparent) 1px,transparent 1px);background-size:13px 13px}
@media(max-width:860px){.fx-styles{grid-template-columns:repeat(3,1fr)}}
.fx-prev-spotlight{background:var(--navy);background-image:radial-gradient(circle at 3px 3px,color-mix(in srgb,var(--primary) 55%,transparent) 1.1px,transparent 1.4px);background-size:11px 11px}
.fx-prev-spotlight::before{content:"";position:absolute;width:60%;height:120%;left:20%;top:-10%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 55%,transparent),transparent 65%)}
.fx-prev-starfield{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--primary) 28%,var(--navy)),var(--navy));background-image:radial-gradient(circle,#fff 1px,transparent 1.4px),radial-gradient(circle,color-mix(in srgb,var(--primary) 80%,#fff) 1px,transparent 1.4px);background-size:19px 19px,29px 29px;background-position:0 0,9px 13px}
.fx-prev-ripple{background:var(--navy)}
.fx-prev-ripple::before{content:"";position:absolute;width:42px;height:42px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid color-mix(in srgb,var(--primary) 70%,transparent);box-shadow:0 0 0 7px color-mix(in srgb,var(--primary) 28%,transparent),0 0 0 15px color-mix(in srgb,var(--primary) 12%,transparent)}
/* aviation animation previews */
.fx-prev-radar{background:var(--navy);background-image:radial-gradient(circle at 50% 50%,transparent 19%,color-mix(in srgb,var(--primary) 22%,transparent) 20%,transparent 21%),radial-gradient(circle at 50% 50%,transparent 38%,color-mix(in srgb,var(--primary) 17%,transparent) 39%,transparent 40%),radial-gradient(circle at 50% 50%,transparent 57%,color-mix(in srgb,var(--primary) 12%,transparent) 58%,transparent 59%),conic-gradient(from -20deg at 50% 50%,color-mix(in srgb,var(--primary) 28%,transparent) 0deg 55deg,transparent 55deg 360deg)}
.fx-prev-routes{background:var(--navy)}
.fx-prev-routes::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 28%,color-mix(in srgb,var(--primary) 80%,transparent) 2.5px,transparent 4px),radial-gradient(circle at 80% 22%,color-mix(in srgb,var(--primary) 80%,transparent) 2.5px,transparent 4px),radial-gradient(circle at 14% 72%,color-mix(in srgb,var(--primary) 80%,transparent) 2.5px,transparent 4px),radial-gradient(circle at 78% 68%,color-mix(in srgb,var(--primary) 80%,transparent) 2.5px,transparent 4px),radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--primary) 65%,transparent) 2px,transparent 3.5px),linear-gradient(20deg,transparent 36%,color-mix(in srgb,var(--primary) 18%,transparent) 37%,color-mix(in srgb,var(--primary) 18%,transparent) 38%,transparent 39%),linear-gradient(150deg,transparent 42%,color-mix(in srgb,var(--primary) 14%,transparent) 43%,color-mix(in srgb,var(--primary) 14%,transparent) 44%,transparent 45%)}
@media(max-width:560px){.fx-styles{grid-template-columns:repeat(2,1fr)}}

/* live macro conditions card */
.lm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.lm-field{display:flex;flex-direction:column;gap:6px}
.lm-lab{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.lm-num{padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:14px;width:100%}
.lm-num:focus{outline:none;border-color:var(--primary)}
.lm-live{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lm-live .lm-num{flex:1;min-width:120px}
.lm-sel{padding:8px 10px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer}
.lm-sel:hover{border-color:var(--primary)}
.lm-sel:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.lm-hint{font-size:10.5px;color:var(--ink-3);line-height:1.4}
.lm-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;flex-wrap:wrap}
.lm-tag{font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px}
@media(max-width:640px){.lm-grid{grid-template-columns:1fr}}
.rk-pick{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.rk-pick-l{font-size:12px;font-weight:600;color:var(--ink-2)}
.rk-combo{position:relative;min-width:260px}
.rk-combo-in{width:100%;padding:8px 14px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600;cursor:text}
.rk-combo-in:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.rk-combo-list{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:50;max-height:300px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-md);padding:5px}
.rk-opt{padding:8px 11px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.rk-opt:hover{background:var(--surface-2)}
.rk-opt.sel{background:var(--primary-soft);color:var(--primary-ink);font-weight:600}
.rk-opt span{font-size:10.5px;color:var(--ink-3);font-family:var(--mono)}
.rk-opt.muted{color:var(--ink-3);cursor:default}
.risk-meter{position:relative;height:12px;border-radius:8px;background:#eef1f6;overflow:visible;margin-bottom:9px}.risk-meter-fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px;opacity:.92}
.risk-meter-knob{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--navy);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(20,33,58,.25)}
.risk-meter-scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-3);font-weight:600}
.risk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.risk-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:13px 14px;display:flex;flex-direction:column;gap:6px}
.risk-tile-k{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.risk-tile-v{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.risk-tile-d{font-size:11px;color:var(--ink-2);line-height:1.5}
@media(max-width:980px){.risk-grid{grid-template-columns:1fr 1fr}}

/* risk threshold editor */
.risk-thresh{margin-top:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:15px 16px}
.rt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rt-lab{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:9px}
.rt-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-2);margin-bottom:7px}
.rt-in{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink-3)}
.rt-num{width:52px;padding:5px 7px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:12px;text-align:right}
.rt-num:focus{outline:none;border-color:var(--primary)}
.rt-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.rt-note{font-size:10.5px;color:var(--ink-3);line-height:1.4}
@media(max-width:860px){.rt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rt-grid{grid-template-columns:1fr}}

/* ---------- proyeksi granular ---------- */
.proj-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.proj-ctl{display:flex;flex-direction:column;gap:8px}
.proj-ctl-lab{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.proj-horizon{display:flex;align-items:center;gap:12px}
.proj-horizon .macro-range{flex:1}
.proj-period{display:flex;align-items:center;gap:10px}
.proj-sel{font-family:var(--mono);font-size:12.5px;font-weight:600;padding:8px 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer;flex:1;min-width:0}
.proj-sel:hover{border-color:var(--primary)}
.proj-sel:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.proj-arrow{color:var(--ink-3);font-weight:700;font-size:15px;flex:0 0 auto}
.proj-ctl-hint{font-size:10px;font-weight:500;color:var(--ink-3);text-transform:none;letter-spacing:0;font-style:normal}
.proj-month{font-family:var(--mono);font-size:13px;font-weight:600;padding:9px 12px;border:1px solid var(--border-strong);
  border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer;flex:1;min-width:0;color-scheme:light}
.proj-month:hover{border-color:var(--primary)}
.proj-month:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.proj-month::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}
.proj-month::-webkit-calendar-picker-indicator:hover{opacity:1}
.proj-quick{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.qbtn{border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:8px;cursor:pointer;transition:.14s}
.qbtn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
/* projected-month columns in the projection table */
.proj-tbl .proj-col{color:var(--ink-2)}
.proj-tbl th.proj-col{background:color-mix(in srgb,var(--primary) 5%,transparent)}
.proj-tbl td.proj-col{background:color-mix(in srgb,var(--primary) 3.5%,transparent)}
.proj-tag{display:inline-block;font-size:8px;font-weight:700;letter-spacing:.03em;color:var(--primary);
  background:var(--primary-soft);padding:0 4px;border-radius:4px;margin-left:4px;vertical-align:middle;text-transform:uppercase}
[data-theme="slate"] .proj-month,[data-theme="midnight"] .proj-month,[data-theme="galaxy"] .proj-month{color-scheme:dark}
.proj-macro-on{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--primary-soft);border:1px solid var(--primary);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:12.5px;color:var(--primary-ink);font-weight:500}
.proj-macro-link{background:none;border:none;color:var(--primary);font-weight:700;cursor:pointer;font-family:var(--sans);font-size:12.5px;padding:0;text-decoration:underline}
.proj-horizon b{font-family:var(--mono);font-size:13px;color:var(--primary);min-width:54px;text-align:right}
.chip.disabled{opacity:.4;cursor:not-allowed}
.proj-hint{font-size:11.5px;color:var(--ink-3);margin:2px 2px 0;font-style:italic}
.leg-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px;vertical-align:middle}
.proj-tbl th,.proj-tbl td{white-space:nowrap}
.proj-tbl tbody td:first-child,.proj-tbl thead th:first-child{position:sticky;left:0;background:var(--surface);z-index:1}
.proj-tbl tbody tr:hover td:first-child{background:var(--surface-2)}
@media(max-width:760px){.proj-controls{grid-template-columns:1fr}}

/* ---------- stress test card ---------- */
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.st-list-lab{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:8px}
.st-list{display:flex;flex-direction:column;gap:5px;max-height:280px;overflow-y:auto;padding-right:4px}
.st-deb{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;text-align:left;transition:.15s;font-family:var(--sans)}
.st-deb:hover{border-color:var(--border-strong)}
.st-deb.on{border-color:var(--neg);background:color-mix(in srgb, var(--neg) 8%, var(--surface))}
.st-chk{width:18px;height:18px;flex:0 0 18px;border-radius:5px;border:1.5px solid var(--border-strong);display:grid;place-items:center;font-size:11px;color:#fff;font-weight:700}
.st-deb.on .st-chk{background:var(--neg);border-color:var(--neg)}
.st-nm{flex:1;font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-amt{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.st-slider{margin-top:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:13px 15px}
.st-slider-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px}
.st-slider-top b{font-family:var(--mono);color:var(--primary)}
.st-hint{font-size:10.5px;color:var(--ink-3);line-height:1.5;margin-top:8px}
.st-right{display:flex;flex-direction:column;gap:14px}
.st-verdict{border:1.5px solid;border-radius:12px;padding:13px 16px;background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
.st-verdict-lab{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.st-verdict-val{font-size:22px;font-weight:800;letter-spacing:-.02em}
.st-verdict-sub{font-size:11.5px;color:var(--ink-2);font-family:var(--mono)}
.st-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-met{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px}
.st-met .l{font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.st-met .v{font-family:var(--mono);font-size:16px;font-weight:600;margin-top:5px;letter-spacing:-.01em;color:var(--ink)}
.st-met .s{font-size:10.5px;color:var(--ink-2);margin-top:2px}
.st-npl{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:13px 15px}
.st-npl-row{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);font-weight:600;margin-bottom:5px}
.st-npl-row b{font-family:var(--mono);color:var(--ink)}
.st-bar{height:8px;border-radius:5px;background:color-mix(in srgb, var(--ink-3) 18%, transparent);overflow:hidden}
.st-bar-fill{height:100%;border-radius:5px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.st-npl-delta{text-align:right;font-size:11.5px;color:var(--ink-2);margin-top:9px}
.st-npl-delta b{font-family:var(--mono)}
@media(max-width:980px){.st-grid{grid-template-columns:1fr}}
.atbl tfoot td{padding:9px 10px;border-top:1px solid var(--border-strong);font-family:var(--mono)}
.asplit .aleg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:11.5px;color:var(--ink-2)}
.asplit .aleg span{display:flex;align-items:center;gap:6px} .asplit .aleg i{width:9px;height:9px;border-radius:2px}
.achips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.achip{font-size:12px;font-weight:600;padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--primary-ink);cursor:pointer;transition:.15s}
.achip:hover{border-color:var(--primary);background:var(--primary-soft)}
.chat-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--border);background:var(--surface)}
.mic-status{font-size:11.5px;line-height:1.5;color:var(--ink-3);padding:0 16px;min-height:0;transition:min-height .15s}
.dchips{flex-wrap:wrap}
.exlist{display:flex;flex-direction:column}
.exrow{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--border)}
.exrow:last-child{border-bottom:none}
.exrow .rank{flex:0 0 23px}
.exrow-nm{flex:1;min-width:0}
.exrow-nm .nm{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exrow-sub{font-size:11px;color:var(--ink-3);text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exrow-val{text-align:right;flex:0 0 auto;white-space:nowrap}
.exrow-val .vv{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink)}
.exrow-meta{font-size:11px;color:var(--ink-3);font-family:var(--mono)}
/* executive contributor table with proportional value bar */
.extbl{width:100%;border-collapse:collapse;margin-top:6px}
.extbl td{padding:11px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.extbl tr:last-child td{border-bottom:none}
.extbl .ex-rk{width:34px}
.extbl .ex-rk .rank{flex:0 0 24px}
.extbl .ex-cust{min-width:180px}
.extbl .ex-cust .nm{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.extbl .ex-own{font-size:11px;color:var(--ink-3);text-transform:capitalize}
.extbl .ex-bar{width:42%;padding-left:14px;padding-right:14px}
.extbl .ex-track{height:8px;border-radius:5px;background:color-mix(in srgb,var(--ink-3) 14%,transparent);overflow:hidden}
.extbl .ex-fill{height:100%;border-radius:5px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.extbl .ex-val{text-align:right;white-space:nowrap;width:1%}
.extbl .ex-val .vv{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.extbl .ex-meta{font-size:10.5px;color:var(--ink-3);font-family:var(--mono);margin-top:2px}
@media(max-width:760px){.extbl .ex-bar{display:none}}
/* full-width variant for stacked contributor cards */
.exlist-wide .exrow{padding:13px 6px;gap:14px}
.exlist-wide .exrow .avatar{width:34px;height:34px;flex-basis:34px;font-size:12px}
.exlist-wide .exrow-nm .nm{font-size:14px}
.exlist-wide .exrow-sub{font-size:11.5px}
.exlist-wide .exrow-val .vv{font-size:15px}
.exlist-wide .exrow-meta{font-size:11.5px}
.dchip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:7px 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.15s}
.dchip .dd{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.dchip b{font-family:var(--mono);color:var(--ink-3);font-weight:700}
.dchip:hover{border-color:var(--border-strong);color:var(--ink)}
.dchip.active{background:var(--cc);border-color:var(--cc);color:#fff}
.dchip.active b{color:rgba(255,255,255,.85)}
.dchip.active .dd{background:#fff!important}
.mic-status:not(:empty){padding:8px 16px 12px;color:var(--col-lancar)}
.mic-status.err:not(:empty){color:var(--neg)}
.chat-bar input{flex:1;border:1px solid var(--border);border-radius:12px;padding:11px 15px;font-family:var(--sans);font-size:13.5px;color:var(--ink);background:var(--bg,#fff);outline:none;transition:border-color .15s}
.chat-bar input::placeholder{color:var(--ink-3)}
.chat-bar input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.mic-btn,.send-btn,.tts-toggle{width:42px;height:42px;flex:0 0 42px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:.15s}
.mic-btn:hover,.tts-toggle:hover{border-color:var(--border-strong);color:var(--ink)}
.send-btn{background:var(--primary);border-color:var(--primary);color:#fff}
.send-btn:hover{filter:brightness(1.08)}
.tts-toggle.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.tts-toggle:disabled{opacity:.4;cursor:not-allowed}
.mic-btn.off{opacity:.45}
.mic-btn:active{background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(.92)}
.mic-btn.holding{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--primary-soft);transform:scale(.96)}
.mic-btn.listening{background:#fdecea;border-color:var(--neg);color:var(--neg);animation:micpulse 1.1s ease-in-out infinite}
.mic-btn.listening.holding{background:var(--neg);color:#fff;box-shadow:0 0 0 5px rgba(207,74,60,.22)}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(207,74,60,.4)}50%{box-shadow:0 0 0 7px rgba(207,74,60,0)}}
.empty{padding:60px 20px;text-align:center;color:var(--ink-3)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#d4d9e2;border-radius:9px;border:2px solid var(--surface)}
::-webkit-scrollbar-track{background:transparent}
.view{display:none}
.view.active{display:block;animation:fade .35s ease both}
@keyframes fade{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:none}}

/* animation helpers (base state is the final visible state; motion applied via JS/WAAPI) */
.cline{stroke-dasharray:1}
.cpt{cursor:pointer;transition:r .12s ease}
.cpt:hover{r:5}
.chart-tip{position:fixed;z-index:9999;transform:translate(-50%,-100%);background:var(--navy,#16294e);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .12s ease;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.chart-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--navy,#16294e)}
.cbar{transform-box:fill-box;transform-origin:bottom}
.hbar .fill{transform-origin:left center}
.donutfx{transform-origin:center}
@media(max-width:980px){.main{padding:24px 22px}.detail-layout{grid-template-columns:1fr}.list-panel{max-height:50vh;position:static}#dPanel{max-height:none}}

/* ============================================================
   AUTH — login overlay, user chip, user management, role editor
   ============================================================ */
body.locked{overflow:hidden}
.login-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;opacity:1;
  background:var(--navy,#10233f)}
.login-overlay.done{animation:loginOut .26s ease forwards}
@keyframes loginOut{to{opacity:0;visibility:hidden}}
.login-bg{position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(1100px 600px at 78% -10%, color-mix(in srgb,var(--primary) 55%,transparent), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, color-mix(in srgb,var(--primary) 35%,transparent), transparent 55%),
    var(--navy,#10233f)}
#loginNavCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.login-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,#fff 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#fff 6%,transparent) 1px,transparent 1px);
  background-size:46px 46px;mask:radial-gradient(900px 600px at 50% 30%,#000,transparent 75%)}
.login-card{position:relative;z-index:1;width:min(404px,94vw);background:var(--surface);border-radius:20px;
  padding:34px 34px 26px;box-shadow:0 30px 80px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.04) inset;opacity:1;
  animation:loginPop .42s cubic-bezier(.2,.8,.2,1)}
@keyframes loginPop{from{transform:translateY(16px) scale(.98)}to{transform:none}}
.login-card.shake{animation:loginShake .4s}
@keyframes loginShake{0%,100%{transform:none}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.login-mark{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:var(--accent-grad,linear-gradient(140deg,#2f5cd6,#1c3d96));overflow:hidden;flex:0 0 46px}
.login-mark img{width:100%;height:100%;object-fit:cover}
.login-ttl{display:flex;flex-direction:column;line-height:1.25}
.login-ttl b{font-size:12.5px;color:var(--ink);font-weight:800;white-space:nowrap}
.login-ttl span{font-size:11.5px;color:var(--ink-3)}
.login-head{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.login-sub{font-size:12.5px;color:var(--ink-2);margin:5px 0 18px;line-height:1.5}
.puzzle-captcha{margin-bottom:14px}
.puzzle-captcha canvas{width:100%;border-radius:8px;display:block;cursor:default}
.puzzle-track{margin-top:8px;position:relative}
.puzzle-range{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:var(--border-strong);outline:none;cursor:pointer}
.puzzle-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--primary);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:grab}
.puzzle-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--primary);border:2px solid #fff;cursor:grab}
.puzzle-hint{display:block;font-size:11px;color:var(--ink-3);margin-top:5px;transition:color .2s}
/* ---- FAQ ---- */
.faq-wrap{padding:0!important;background:transparent!important}
.faq-item{border-bottom:1px solid var(--border);background:transparent!important}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;display:flex;align-items:center;gap:12px;padding:14px 18px;background:transparent;border:none;cursor:pointer;text-align:left;color:var(--ink);transition:background .15s}
.faq-q:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.faq-n{font-size:11px;font-weight:700;color:var(--primary);min-width:22px;opacity:.9}
.faq-qt{flex:1;font-size:13.5px;font-weight:500;color:var(--ink)!important}
.faq-caret{color:var(--ink-3);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-caret{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item.open .faq-a{max-height:500px}
.faq-a-in{padding:0 18px 16px 54px;font-size:13px;color:var(--ink-2);line-height:1.65}
.faq-search-row{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);color:var(--ink-3)}
.faq-search-row input{flex:1;border:none;background:none;font-size:13px;color:var(--ink);outline:none}
.faq-search-row input::placeholder{color:var(--ink-3)}
/* ---- end FAQ ---- */
.login-lab{display:block;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin:13px 0 7px}
.login-inp{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:11px;padding:0 12px;transition:.16s}
.login-inp:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.login-inp .li-ic{color:var(--ink-3);display:flex}
.login-inp input,.login-inp select{flex:1;border:none;background:none;outline:none;font:inherit;font-size:14px;
  color:var(--ink);padding:12px 0;min-width:0}
.login-inp.sel{padding-right:4px}
.login-inp select{cursor:pointer;padding:12px 4px}
.li-eye{border:none;background:none;color:var(--ink-3);cursor:pointer;display:flex;padding:4px}
.li-eye.on{color:var(--primary)}
.pic-scope-bar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:8px;
  background:var(--navy,#16294e);color:#fff;font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:999px;
  box-shadow:0 6px 20px rgba(20,33,58,.35);max-width:92vw}
.pic-scope-bar b{color:#ffd9b0}
.pic-scope-bar .psb-ic{font-size:14px}
@media print{.pic-scope-bar{display:none!important}}
.li-refresh{border:none;background:none;color:var(--ink-3);cursor:pointer;display:flex;padding:4px}
.li-refresh:hover{color:var(--primary)}
.captcha-row{gap:8px}
.li-cap{border-radius:7px;flex:0 0 auto;cursor:pointer;display:block}
.captcha-row input{flex:1;text-transform:uppercase;letter-spacing:.12em;font-family:"IBM Plex Mono",monospace;font-weight:600}
/* ---- puzzle captcha ---- */
.puzzle-captcha{margin:4px 0 10px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.puzzle-captcha canvas{display:block;width:100%;height:auto;border-radius:10px 10px 0 0}
.puzzle-track{background:var(--surface-2);padding:8px 10px 6px;position:relative;border-radius:0 0 10px 10px}
.puzzle-rail{position:relative;height:32px;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-bottom:4px}
.puzzle-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);left:0%;width:36px;height:26px;background:var(--surface);border:2px solid var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:1px;pointer-events:none;transition:color .2s,border-color .2s;box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:2}
.puzzle-range{position:absolute;inset:0;width:100%;opacity:0;cursor:grab;height:32px;z-index:3}
.puzzle-range:active{cursor:grabbing}
.puzzle-hint{display:block;font-size:10.5px;color:var(--ink-3);text-align:center;line-height:1.4;transition:color .2s}
.login-err{font-size:12.5px;color:#cf4a3c;font-weight:600;margin-top:12px;min-height:0;max-height:0;overflow:hidden;opacity:0;transition:.2s}
.login-err.show{min-height:18px;max-height:50px;opacity:1;margin-top:13px}
.login-btn{width:100%;margin-top:18px;padding:13px;border:none;border-radius:11px;cursor:pointer;
  background:var(--primary);color:#fff;font:inherit;font-size:14.5px;font-weight:700;letter-spacing:.01em;
  transition:.16s;box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 35%,transparent)}
.login-btn:hover{filter:brightness(1.06)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-foot{text-align:center;font-size:11.5px;color:var(--ink-3);margin-top:16px}

/* sidebar user chip */
.user-chip{display:flex;align-items:center;gap:10px;margin:8px 14px 4px;padding:10px;border-radius:12px;
  background:color-mix(in srgb,var(--primary) 9%,transparent);border:1px solid color-mix(in srgb,var(--primary) 16%,transparent)}
.uc-av{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;
  background:var(--accent-grad,linear-gradient(140deg,#2f5cd6,#1c3d96))}
.uc-av.sm{width:30px;height:30px;flex-basis:30px;font-size:11px;border-radius:8px}
.uc-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.uc-meta b{font-size:12.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-meta span{font-size:10.5px;color:var(--ink-2)}
.uc-out{border:none;background:none;color:var(--ink-3);cursor:pointer;display:flex;padding:6px;border-radius:8px;transition:.15s;flex:0 0 auto}
.uc-out:hover{background:color-mix(in srgb,#cf4a3c 14%,transparent);color:#cf4a3c}
.app.sidebar-collapsed .user-chip{padding:8px;justify-content:center}
.app.sidebar-collapsed .uc-meta,.app.sidebar-collapsed .uc-out{display:none}

/* user management */
.btn-primary{border:none;background:var(--primary);color:#fff;font:inherit;font-size:12.5px;font-weight:600;
  padding:8px 14px;border-radius:9px;cursor:pointer;transition:.15s}
.btn-primary:hover{filter:brightness(1.07)}
.users-tbl td{vertical-align:middle}
.you-tag{font-size:9.5px;font-weight:700;color:var(--primary);background:var(--primary-soft);padding:1px 6px;border-radius:5px;margin-left:5px;vertical-align:middle}
.row-acts{display:inline-flex;gap:7px;justify-content:flex-end}
.mini-btn{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);font:inherit;font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:8px;cursor:pointer;transition:.14s}
.mini-btn:hover{border-color:var(--primary);color:var(--primary)}
.mini-btn.danger:hover{border-color:#cf4a3c;color:#cf4a3c}
.mini-btn:disabled{opacity:.4;cursor:default;pointer-events:none}
.role-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:7px;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.role-badge.role-admin{background:color-mix(in srgb,#7c3aed 14%,transparent);color:#7c3aed;border-color:transparent}
.role-badge.role-direktur{background:color-mix(in srgb,#2f5cd6 14%,transparent);color:#2f5cd6;border-color:transparent}
.role-badge.role-manajer{background:color-mix(in srgb,#1f9d6b 16%,transparent);color:#157a52;border-color:transparent}
.role-badge.role-staf{background:color-mix(in srgb,#d8a13c 18%,transparent);color:#a9741e;border-color:transparent}
.role-badge.role-auditor{background:color-mix(in srgb,#5a6478 14%,transparent);color:#5a6478;border-color:transparent}

/* role editor */
.role-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.role-tab{border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;
  padding:7px 12px;border-radius:8px;cursor:pointer;transition:.14s}
.role-tab:hover{border-color:var(--border-strong)}
.role-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.role-note{font-size:12px;color:var(--ink-2);background:var(--primary-soft);border-radius:9px;padding:10px 12px;margin-bottom:12px;line-height:1.5}
.perm-sec-lab{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:9px}
.perm-list{display:flex;flex-direction:column;gap:2px}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 2px;border-bottom:1px solid var(--border)}
.perm-row:last-child{border-bottom:none}
.perm-row span{font-size:13px;color:var(--ink);font-weight:500}
.perm-row .sw-btn{width:38px;height:22px;flex-basis:38px}
.perm-row .sw-btn::after{width:16px;height:16px}
.perm-row .sw-btn.on::after{transform:translateX(16px)}
.perm-row .sw-btn:disabled{opacity:.55;cursor:default}

/* session security */
.sess-row{display:flex;flex-direction:column;gap:16px}
.idle-ctl{display:flex;flex-direction:column;gap:9px}
.idle-ctl span{font-size:13px;color:var(--ink-2)}
.idle-ctl b{color:var(--primary);font-family:var(--mono)}

/* add/edit user dialog */
.auth-dlg{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;padding:24px;opacity:1;
  background:color-mix(in srgb,var(--navy,#10233f) 62%,transparent);backdrop-filter:blur(3px)}
.auth-dlg-card{width:min(390px,94vw);background:var(--surface);border-radius:18px;padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);animation:loginPop .3s cubic-bezier(.2,.8,.2,1)}
.adc-head{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px}
.adc-x{border:none;background:none;color:var(--ink-3);cursor:pointer;font-size:16px;padding:4px;line-height:1}
.adc-x:hover{color:var(--ink)}
.adc-acts{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}

/* locked settings card */
.locked-card{position:relative}
.lock-ribbon{font-size:12px;font-weight:600;color:#a9741e;background:color-mix(in srgb,#d8a13c 16%,transparent);
  border:1px solid color-mix(in srgb,#d8a13c 30%,transparent);border-radius:9px;padding:9px 12px;margin-bottom:14px}
.locked-card .macro-range,.locked-card input,.locked-card select,.locked-card button{opacity:.55}
.auth-deny{border-left:3px solid #d8a13c;padding-left:12px}
@media(max-width:760px){.grid[style*="1.3fr"]{grid-template-columns:1fr!important}}

/* ============================================================
   MOBILE — off-canvas sidebar drawer + fluid layout (phones/tablets)
   ============================================================ */
.mobile-menu-btn{display:none;position:fixed;top:0;left:0;right:0;z-index:26;height:54px;align-items:center;gap:12px;
  padding:0 16px;background:var(--surface);color:var(--ink);border:none;border-bottom:1px solid var(--border);cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.14)}
.mobile-menu-btn .mtb-title{font-size:15px;font-weight:800;letter-spacing:-.01em}
.mobile-menu-btn svg{flex:0 0 auto;width:24px;height:24px;color:var(--primary)}
.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(8,14,28,.5);z-index:25;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

@media(max-width:820px){
  /* off-canvas drawer (overrides the desktop collapse behavior on small screens) */
  .sb-toggle{display:none}
  .mobile-menu-btn{display:flex}
  .app.nav-open .mobile-backdrop{display:block}
  .app, .app.sidebar-collapsed{--sidebar-w:0px}
  .sidebar, .app.sidebar-collapsed .sidebar{
    width:min(280px,82vw);flex-basis:min(280px,82vw);padding:22px 16px;z-index:27;
    position:fixed;top:0;bottom:0;left:0;overflow-y:auto;
    transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 40px rgba(0,0,0,.35)}
  .app.nav-open .sidebar{transform:none}
  /* always show full labels in the drawer, even if "collapsed" was saved */
  .app.sidebar-collapsed .nav-tx,.app.sidebar-collapsed .brand-txt,
  .app.sidebar-collapsed .data-loader,.app.sidebar-collapsed .sidebar-foot,
  .app.sidebar-collapsed .nav-grp-head,.app.sidebar-collapsed .user-chip .uc-meta,
  .app.sidebar-collapsed .user-chip .uc-out{display:revert}
  .app.sidebar-collapsed .nav-item{justify-content:flex-start;padding:11px 12px}
  .app.sidebar-collapsed .nav-item .ic{margin:0}
  .app.sidebar-collapsed .brand{justify-content:flex-start;padding:4px 8px 22px}
  .app.sidebar-collapsed .user-chip{padding:10px;justify-content:flex-start}
  .main, .app.sidebar-collapsed .main{margin-left:0!important;padding:70px 16px 44px}
  /* generic density: stack multi-column rows */
  .metricrow{grid-template-columns:1fr 1fr!important}
  .view-head{flex-direction:column;align-items:flex-start;gap:10px}
  .view-head h1{font-size:22px}
  .period-ctl{flex-wrap:wrap}
  /* stack any multi-column grid into one column on phones */
  .grid{grid-template-columns:1fr!important}
  /* wide tables: horizontal scroll with a subtle edge hint, no squished cells */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
  table.tbl{min-width:560px}
  .tbl tbody td,.tbl thead th{white-space:nowrap}
}
@media(max-width:520px){
  .main, .app.sidebar-collapsed .main{padding:62px 13px 40px}
  .metricrow{grid-template-columns:1fr!important}
  .card{padding:16px}
  .view-head h1{font-size:20px}
  .kpi .val{font-size:19px}
  .proj-period{flex-wrap:wrap}
  .proj-month{flex:1 1 38%}
}