/* ==========================================================================
   National DRG System — prototype demo stylesheet
   (design language carried over from the submitted cost dashboard)
   ========================================================================== */
:root{
  --tiber:#188098; --cyan:#2AB6C9; --navy:#15365A; --aqua:#2DE1D0; --red:#E32521;
  --navy-soft:#1d4775; --cyan-soft:#5acdda; --amber:#E8A33D; --green:#2E9E6B; --purple:#7c5cbf;
  --bg:#eef4f8; --bg-cool:#e8f6f9; --line:rgba(21,54,90,.12);
  --grad:linear-gradient(135deg,#2DE1D0 0%,#15365A 100%);
  --ink:#15365A; --muted:#5d7088;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.dp{font-family:'Plus Jakarta Sans',sans-serif}
button{font-family:inherit;cursor:pointer}

/* ===== Header / hero ===================================================== */
.topbar{position:relative;background:var(--grad);color:#fff;overflow:hidden}
.topbar::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 160% at 88% -30%,rgba(45,225,208,.30),transparent 55%);}
.topbar-inner{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:18px 30px 19px;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}

/* brand lockup */
.brand{display:flex;align-items:center;gap:15px;min-width:0}
.brand-mark{flex-shrink:0;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px rgba(7,28,48,.28)}
.brand-mark svg{width:30px;height:30px}
.brand-text{min-width:0}
.kicker{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.92);
  display:flex;align-items:center;gap:7px}
.kicker::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--aqua);flex-shrink:0}
.topbar h1{font-size:23px;font-weight:800;margin-top:4px;letter-spacing:-.015em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag-proto{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 9px;border-radius:30px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff}
.lede{opacity:.9;font-size:12.5px;margin-top:5px;max-width:58ch;line-height:1.5}

/* meta cluster */
.meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.company-badge{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.34);border-radius:14px;padding:8px 16px 8px 9px;
  box-shadow:0 4px 16px rgba(7,28,48,.22)}
.company-badge .cb-num{width:42px;height:42px;border-radius:11px;background:linear-gradient(150deg,#f3b85a,#E8A33D);color:#15365A;
  font-family:'Plus Jakarta Sans';font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 9px rgba(232,163,61,.45),inset 0 1px 0 rgba(255,255,255,.45)}
.company-badge .cb-txt{display:flex;flex-direction:column;line-height:1.28}
.company-badge .cb-l1{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.78;font-weight:700}
.company-badge .cb-l2{font-size:13.5px;font-weight:800;font-family:'Plus Jakarta Sans';white-space:nowrap}

/* unified status chips */
.status-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:flex-end;max-width:340px}
.stat{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  padding:5px 11px;border-radius:9px;font-size:11px;font-weight:600;white-space:nowrap}
.stat svg{width:13px;height:13px;opacity:.92}
.stat.ok{background:rgba(45,225,208,.16);border-color:rgba(45,225,208,.42)}
.stat.ok svg{color:var(--aqua);opacity:1}
@media(max-width:980px){
  .topbar-inner{align-items:flex-start;gap:16px}
  .meta{justify-content:flex-start;width:100%}
  .status-row{justify-content:flex-start;max-width:none}
}

/* tabs */
.tabs{background:#fff;border-bottom:1px solid var(--line);padding:0 18px;display:flex;gap:2px;position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 var(--line);overflow-x:auto}
.tab{padding:13px 16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;
  white-space:nowrap;display:flex;align-items:center;gap:8px;transition:color .15s}
.tab .n{width:21px;height:21px;border-radius:7px;background:var(--bg-cool);color:var(--tiber);font-size:11px;
  display:flex;align-items:center;justify-content:center;font-weight:800}
.tab:hover{color:var(--navy)}
.tab.on{color:var(--navy);border-bottom-color:var(--cyan)}
.tab.on .n{background:var(--cyan);color:#fff}
.tab.done .n::after{content:"";}
.tab-bi .n-bi{background:var(--purple);color:#fff;font-size:12px}
.tab-bi.on{border-bottom-color:var(--purple)}
.tab-bi.on .n-bi{background:var(--purple);color:#fff}
.bi-pill{font-size:8.5px;font-weight:800;letter-spacing:.05em;background:var(--purple);color:#fff;padding:2px 6px;border-radius:20px;margin-left:6px}
.rag-good{color:var(--green);font-weight:700}.rag-warn{color:var(--amber);font-weight:700}.rag-bad{color:var(--red);font-weight:700}
td.pos{color:var(--green);font-weight:700}td.neg{color:var(--red);font-weight:700}

.wrap{max-width:1320px;margin:0 auto;padding:22px 30px 70px}
.view{display:none;animation:fade .3s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.vhead{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.vicon{width:46px;height:46px;border-radius:13px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.vhead h2{font-size:19px;color:var(--navy)}
.vhead .vs{font-size:12.5px;color:var(--muted);margin-top:2px}
.vstep{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tiber);
  background:var(--bg-cool);padding:6px 13px;border-radius:30px;border:1px solid var(--line)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi{background:#fff;border-radius:15px;padding:16px 18px;border:1px solid var(--line);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cyan)}
.kpi.k-navy::before{background:var(--navy)}.kpi.k-tiber::before{background:var(--tiber)}
.kpi.k-amber::before{background:var(--amber)}.kpi.k-green::before{background:var(--green)}
.kpi.k-red::before{background:var(--red)}.kpi.k-purple::before{background:var(--purple)}
.kpi .lab{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .val{font-family:'Plus Jakarta Sans';font-size:24px;font-weight:800;margin-top:5px;letter-spacing:-.01em}
.kpi .meta{font-size:11px;color:var(--muted);margin-top:3px}

.grid{display:grid;gap:16px}
.g-2{grid-template-columns:1.4fr 1fr}
.g-2e{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.panel{background:#fff;border-radius:15px;border:1px solid var(--line);padding:18px 20px}
.panel h3{font-size:13.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel h3 .hint{font-size:11px;font-weight:500;color:var(--muted)}
.panel .chart-h{position:relative;height:290px;margin-top:13px}
.panel.tall .chart-h{height:350px}
.panel.calc{border-left:4px solid var(--cyan)}

table{width:100%;border-collapse:collapse;margin-top:11px;font-size:12.5px}
th{text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;
  padding:9px 11px;border-bottom:1px solid var(--line)}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td{padding:9px 11px;border-bottom:1px solid var(--bg)}
tbody tr.drill{cursor:pointer;transition:background .15s}
tbody tr.drill:hover{background:var(--bg-cool)}
tbody tr.drill td:first-child{font-weight:600;color:var(--navy)}
.tot-row td{font-weight:800;color:var(--navy);border-top:2px solid var(--line);border-bottom:none}
.scroll-tbl{max-height:430px;overflow:auto;border:1px solid var(--line);border-radius:11px;margin-top:11px}
.scroll-tbl table{margin-top:0}
.scroll-tbl th{position:sticky;top:0;background:#fff;z-index:2}

.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700}
.b-ok{background:#e3f5ef;color:var(--green)}.b-err{background:#fde7e6;color:var(--red)}
.b-warn{background:#fdf1e0;color:var(--amber)}.b-info{background:var(--bg-cool);color:var(--tiber)}
.sev-I{background:#e3f5ef;color:var(--green)}.sev-II{background:#fdf1e0;color:var(--amber)}.sev-III{background:#fde7e6;color:var(--red)}
.pillc{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:600;background:var(--bg-cool);color:var(--tiber)}
.mono{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--muted)}
.drgcode{font-family:ui-monospace,monospace;font-weight:700;color:var(--navy);font-size:12px}

.pick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.pick .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-right:4px}
.chip{padding:7px 15px;border-radius:30px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;
  color:var(--navy);cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--cyan)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.spec.on{background:var(--tiber);border-color:var(--tiber)}

.note{background:var(--bg-cool);border:1px solid var(--line);border-radius:11px;padding:13px 15px;
  font-size:12px;color:var(--muted);margin-top:17px;line-height:1.55}
.note b{color:var(--navy)}
.legend-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--muted)}
.legend-row span{display:inline-flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:3px;display:inline-block}

.btn{padding:9px 16px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:700;color:var(--navy);transition:all .15s}
.btn:hover{border-color:var(--cyan)}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.primary:hover{background:var(--navy-soft)}
.btn.cyan{background:var(--tiber);color:#fff;border-color:var(--tiber)}
.btn.green{background:var(--green);color:#fff;border-color:var(--green)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}

.ctrls{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;align-items:flex-end}
.ctrls label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;display:flex;flex-direction:column;gap:5px}
.ctrls select,.ctrls input{font-family:'Manrope';font-size:14px;font-weight:600;color:var(--navy);padding:9px 13px;
  border:1px solid var(--line);border-radius:9px;background:#fff;min-width:160px}
.ctrls select:focus,.ctrls input:focus{border-color:var(--cyan);outline:none}
.formula{font-family:ui-monospace,monospace;font-size:12px;color:var(--tiber);background:var(--bg-cool);
  padding:7px 12px;border-radius:8px;display:inline-block;margin-top:10px}

/* metric switcher (quality) */
.metric-switch{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.mchip{padding:12px 18px;border-radius:13px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;
  color:var(--muted);transition:all .15s;flex:1;min-width:170px}
.mchip b{display:block;color:var(--navy);font-family:'Plus Jakarta Sans';font-size:13.5px;margin-bottom:1px}
.mchip:hover{border-color:var(--cyan)}
.mchip.on{border-color:var(--cyan);background:var(--bg-cool);box-shadow:0 0 0 1px var(--cyan)}
.mchip.on b{color:var(--tiber)}
.metric-body{display:none}.metric-body.on{display:block;animation:fade .3s ease}

/* upload / dropzone */
.dropzone{border:2px dashed var(--cyan);border-radius:14px;padding:34px;text-align:center;background:var(--bg-cool);cursor:pointer;transition:all .15s}
.dropzone:hover,.dropzone.drag{background:#dff0f4;border-color:var(--tiber)}
.dzicon{font-size:34px}
.dztext{font-size:14px;margin-top:8px}.dztext b{color:var(--navy)}
.dzhint{font-size:11.5px;color:var(--muted);margin-top:4px}
.uplist{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.upitem{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:12.5px}
.upitem .nm{font-weight:600;color:var(--navy)}
.upitem .st{font-size:11.5px;color:var(--muted)}.upitem .st.ok{color:var(--green);font-weight:700}.upitem .st.err{color:var(--red);font-weight:700}
.progress{height:9px;border-radius:6px;background:var(--bg-cool);overflow:hidden;margin-top:6px}
.progress > i{display:block;height:100%;background:var(--grad);width:0;transition:width .2s}
.maprow{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--bg);font-size:12.5px}
.maprow .src{font-family:ui-monospace,monospace;color:var(--muted)}
.maprow .arr{color:var(--cyan);font-weight:800}
.maprow .dst{font-weight:700;color:var(--navy)}
.bi-banner{display:flex;align-items:center;gap:11px;margin-top:14px;padding:12px 15px;border-radius:11px;font-size:12.5px;
  line-height:1.5;color:var(--ink);background:#e3f5ef;border:1px solid rgba(46,158,107,.4)}
.bi-banner .bi-ic{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.bi-banner b{color:var(--navy)}
.bi-banner .bi-link{margin-left:auto;flex-shrink:0;background:var(--green);color:#fff;border:none;border-radius:8px;
  padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s}
.bi-banner .bi-link:hover{background:#268a5c}

/* arch diagram (technology) */
.arch{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.arch .layer{background:var(--bg-cool);border:1px solid var(--line);border-radius:12px;padding:14px}
.arch .layer h4{font-size:12px;color:var(--tiber);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.arch .layer .svc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;margin-bottom:6px;font-weight:600;color:var(--navy)}
.seclist{list-style:none;margin-top:10px}
.seclist li{padding:9px 0;border-bottom:1px solid var(--bg);font-size:12.5px;display:flex;gap:10px;align-items:flex-start}
.seclist li::before{content:"\2713";color:var(--green);font-weight:800}

.toast{position:fixed;bottom:24px;left:24px;background:var(--navy);color:#fff;padding:13px 18px;border-radius:11px;font-size:13px;
  box-shadow:0 10px 30px rgba(21,54,90,.3);opacity:0;transform:translateY(10px);transition:all .25s;z-index:200;max-width:340px}
.toast.on{opacity:1;transform:none}
.loading{display:flex;align-items:center;justify-content:center;height:60vh;flex-direction:column;gap:14px;color:var(--muted)}
.spin{width:38px;height:38px;border:4px solid var(--bg-cool);border-top-color:var(--cyan);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===== Login / logout ==================================================== */
.login-scrim{position:fixed;inset:0;z-index:500;background:var(--grad);display:flex;align-items:center;justify-content:center;padding:20px}
.login-scrim::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 140% at 85% -20%,rgba(45,225,208,.3),transparent 55%)}
.login-scrim.hide{display:none}
.login-card{position:relative;z-index:1;background:#fff;border-radius:18px;padding:30px 30px 22px;width:min(382px,94vw);
  box-shadow:0 30px 80px rgba(7,28,48,.42);text-align:center;animation:fade .3s}
.login-mark{width:56px;height:56px;border-radius:15px;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 8px 22px rgba(7,28,48,.25)}
.login-mark svg{width:32px;height:32px}
.login-kicker{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tiber);font-weight:700}
.login-card h2{font-size:21px;color:var(--navy);margin-top:4px;font-weight:800}
.login-sub{font-size:12px;color:var(--muted);margin-top:3px;margin-bottom:18px}
.login-card label{display:block;text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
.login-card input{width:100%;margin-top:5px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit;color:var(--ink)}
.login-card input:focus{border-color:var(--cyan);outline:none}
.login-card .btn{width:100%;margin-top:6px;padding:12px}
.login-foot{font-size:10.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.signout{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:9px;height:34px;padding:0 12px;
  font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
.signout:hover{background:rgba(255,255,255,.28)}
@media print{.login-scrim,.signout{display:none !important}}

/* ===== Info tooltips ===================================================== */
.info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  border:1.3px solid var(--muted);color:var(--muted);font-size:10px;font-weight:700;font-style:normal;
  font-family:Georgia,'Times New Roman',serif;margin-left:6px;cursor:help;vertical-align:middle;line-height:1;
  transition:all .12s;flex-shrink:0;opacity:.65;user-select:none}
.info:hover,.info:focus-visible{border-color:var(--cyan);color:var(--tiber);background:var(--bg-cool);opacity:1;outline:none}
.kpi .lab{display:inline-flex;align-items:center}
.kpi .lab .info{width:13px;height:13px;font-size:8.5px;margin-left:5px}
.tipbox{position:fixed;z-index:300;max-width:280px;background:var(--navy);color:#fff;font-size:12px;line-height:1.5;
  padding:9px 12px;border-radius:9px;box-shadow:0 12px 32px rgba(7,28,48,.38);pointer-events:none;opacity:0;
  transform:translateY(3px);transition:opacity .14s,transform .14s;font-weight:500;left:0;top:0}
.tipbox.on{opacity:1;transform:none}
.tipbox::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--navy)}
.tipbox.below::after{bottom:auto;top:-5px;border-top-color:transparent;border-bottom-color:var(--navy)}
@media print{.info,.tipbox{display:none !important}}

/* ===== Help & manual ===================================================== */
.vhead-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.vhelp{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--tiber);
  font-weight:800;font-size:14px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center}
.vhelp:hover{border-color:var(--cyan);background:var(--bg-cool)}

.help-fab{position:fixed;right:22px;bottom:22px;z-index:120;display:inline-flex;align-items:center;gap:9px;
  background:var(--navy);color:#fff;border:none;border-radius:30px;padding:12px 18px;font-weight:700;font-size:13px;
  box-shadow:0 8px 24px rgba(21,54,90,.34);transition:transform .15s,background .15s}
.help-fab:hover{background:var(--navy-soft);transform:translateY(-2px)}
.help-fab svg{width:18px;height:18px}
.help-fab .pulse{position:absolute;inset:0;border-radius:30px;box-shadow:0 0 0 0 rgba(42,182,201,.5);animation:hpulse 2.4s ease-out infinite}
@keyframes hpulse{0%{box-shadow:0 0 0 0 rgba(42,182,201,.5)}70%{box-shadow:0 0 0 14px rgba(42,182,201,0)}100%{box-shadow:0 0 0 0 rgba(42,182,201,0)}}
@media(max-width:560px){.help-fab .lbl{display:none}.help-fab{padding:14px;border-radius:50%}}

.help-scrim{position:fixed;inset:0;background:rgba(7,28,48,.45);z-index:150;opacity:0;pointer-events:none;transition:opacity .2s}
.help-scrim.on{opacity:1;pointer-events:auto}
.help-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(500px,94vw);background:var(--bg);z-index:160;
  transform:translateX(101%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  box-shadow:-14px 0 44px rgba(7,28,48,.28)}
.help-drawer.on{transform:none}
.help-head{background:var(--grad);color:#fff;padding:17px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.help-head h2{font-size:16px;font-weight:800}
.help-head .sub{font-size:11.5px;opacity:.9;margin-top:2px;line-height:1.45}
.help-close{background:rgba(255,255,255,.18);border:none;color:#fff;width:30px;height:30px;border-radius:8px;font-size:17px;cursor:pointer;flex-shrink:0}
.help-close:hover{background:rgba(255,255,255,.3)}
.help-search{padding:11px 18px 0}
.help-search input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink)}
.help-search input:focus{border-color:var(--cyan);outline:none}
.help-nav{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
.help-nav .hn{font-size:11px;font-weight:700;padding:6px 10px;border-radius:30px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:all .12s}
.help-nav .hn:hover{border-color:var(--cyan)}
.help-nav .hn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.help-nav .hn.hide{display:none}
.help-body{flex:1;overflow-y:auto;padding:18px 20px 24px}
.help-sec{display:none}
.help-sec.on{display:block;animation:fade .22s}
.help-sec h3{font-size:15px;color:var(--navy);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.help-sec .hbadge{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--bg-cool);color:var(--tiber);padding:3px 9px;border-radius:20px}
.help-intro{font-size:13px;color:var(--muted);line-height:1.6;margin:9px 0 4px}
.help-h4{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tiber);font-weight:800;margin:16px 0 9px}
.help-steps{margin:0;padding:0;list-style:none;counter-reset:s}
.help-steps li{position:relative;padding:8px 0 8px 34px;font-size:13px;line-height:1.5;border-bottom:1px solid var(--bg);color:var(--ink)}
.help-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:6px;width:23px;height:23px;border-radius:7px;
  background:var(--cyan);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.help-steps b{color:var(--navy)}
.help-expect{list-style:none;margin:0;padding:0}
.help-expect li{font-size:12.5px;color:var(--ink);padding:5px 0 5px 23px;position:relative;line-height:1.5}
.help-expect li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}
.help-tip{background:var(--bg-cool);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:12px;color:var(--muted);line-height:1.55;margin-top:14px}
.help-tip b{color:var(--navy)}
.help-foot{padding:11px 18px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;background:#fff}
.help-jump{font-size:12px;font-weight:700;color:var(--tiber);background:var(--bg-cool);border:1px solid var(--line);border-radius:8px;padding:8px 13px;cursor:pointer}
.help-jump:hover{border-color:var(--cyan)}

/* guided tour */
.tour-scrim{position:fixed;inset:0;background:rgba(7,28,48,.38);z-index:170;opacity:0;pointer-events:none;transition:opacity .2s}
.tour-scrim.on{opacity:1;pointer-events:auto}
.tour-card{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(14px);z-index:171;width:min(560px,94vw);
  background:#fff;border-radius:16px;box-shadow:0 22px 54px rgba(7,28,48,.45);padding:20px 22px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.tour-card.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
.tour-card .tnum{font-size:10.5px;font-weight:800;color:var(--tiber);letter-spacing:.1em;text-transform:uppercase}
.tour-card h3{font-size:18px;color:var(--navy);margin-top:4px}
.tour-card p{font-size:13px;color:var(--muted);line-height:1.6;margin-top:8px}
.tour-dots{display:flex;gap:5px;margin-top:15px;flex-wrap:wrap}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:all .2s}
.tour-dots i.on{background:var(--cyan);width:18px;border-radius:5px}
.tour-actions{display:flex;justify-content:space-between;align-items:center;margin-top:17px;gap:10px}
@media(prefers-reduced-motion:reduce){.help-drawer,.tour-card,.help-fab{transition:none}.help-fab .pulse{animation:none}}

@media(max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}.g-2,.g-2e,.g-3,.arch{grid-template-columns:1fr}.topbar h1{font-size:19px}}
@media(prefers-reduced-motion:reduce){.view{animation:none}}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* one-page PDF export of the active dashboard view */
@media print{
  .tabs,.toast,.btnrow,.pick .btn,button{display:none !important}
  .topbar{background:var(--navy) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cloud-badges{display:none}
  .wrap{max-width:100%;padding:10px 14px}
  .view{display:none !important}
  .view.on{display:block !important}
  .panel,.kpi{break-inside:avoid;box-shadow:none}
  .chart-h{height:220px !important}
  .scroll-tbl{max-height:none;overflow:visible}
  @page{size:A4 landscape;margin:10mm}
}