/* ═══════════════════════════════════════════════════════
   FINEURONS — Enterprise Design System v1.0
   Font: Inter · Palette: Deep Navy / Slate / Royal Blue
   Benchmark: Bloomberg · Stripe · Linear · Brex · Ramp
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── RESET & BASE ── */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter','SF Pro Display','Segoe UI','Helvetica Neue',sans-serif;
  background:#F8FAFC;color:#0F172A;font-size:13px;
  line-height:1.5;letter-spacing:-0.01em;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;letter-spacing:-0.01em}
.hidden{display:none!important}

/* ── LOGIN ── */
#loginScreen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:#0F172A;
}
.lcard{
  background:#111827;border:1px solid #1E293B;border-radius:16px;
  padding:2.4rem;width:400px;
}
.llogo{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  color:#3B82F6;text-transform:uppercase;margin-bottom:.4rem;
}
.ltitle{font-size:22px;font-weight:700;margin-bottom:.3rem;color:#F8FAFC;letter-spacing:-0.03em}
.lsub{font-size:12px;color:#64748B;margin-bottom:1.8rem}
.fg{margin-bottom:.9rem}
.fl{
  font-size:10px;font-weight:600;color:#64748B;display:block;
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.07em;
}
.fi{
  width:100%;padding:9px 12px;border:1px solid #1E293B;
  border-radius:8px;background:#0F172A;color:#F8FAFC;
  font-size:13px;transition:.15s;
}
.fi:focus{outline:none;border-color:#3B82F6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.fi::placeholder{color:#475569}
.bprimary{
  width:100%;padding:10px;background:#2563EB;color:#fff;border:none;
  border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;
  letter-spacing:-0.01em;
}
.bprimary:hover{background:#1D4ED8}
.lerr{font-size:11px;color:#EF4444;margin-top:.6rem;display:none}
.demo-hint{font-size:10px;color:#475569;margin-top:.8rem;text-align:center}

/* ── APP SHELL ── */
#app{display:none;min-height:100vh;flex-direction:column}

/* ── TOPBAR ── */
.topbar{
  background:#0F172A;color:#F8FAFC;
  padding:0 20px;height:48px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;border-bottom:1px solid #1E293B;
  position:sticky;top:0;z-index:100;
}
.tb-brand{
  font-size:15px;font-weight:700;color:#0D95A1;
  letter-spacing:-0.03em;margin-right:28px;
}
.tb-brand span{color:#475569;font-weight:400}
.period-row{display:flex;gap:1px;background:#1E293B;border-radius:6px;padding:2px}
.ptab{
  padding:4px 10px;font-size:11px;border:none;
  background:transparent;color:#64748B;cursor:pointer;
  border-radius:4px;font-weight:500;transition:.1s;
}
.ptab:hover{color:#94A3B8}
.ptab.active{background:#334155;color:#F8FAFC;font-weight:600}
.tb-right{display:flex;align-items:center;gap:8px;position:relative}
.notif-btn{
  background:transparent;border:none;color:#64748B;
  font-size:16px;cursor:pointer;position:relative;
  padding:4px;border-radius:6px;transition:.1s;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;
}
.notif-btn:hover{background:#1E293B;color:#94A3B8}
.nbadge{
  position:absolute;top:2px;right:2px;background:#EF4444;color:#fff;
  font-size:8px;border-radius:6px;padding:1px 3px;
  font-weight:700;min-width:13px;text-align:center;line-height:1.4;
}
.upill{
  display:flex;align-items:center;gap:7px;
  background:#1E293B;border-radius:20px;
  padding:3px 10px 3px 3px;cursor:default;
  border:1px solid #334155;
}
.uav{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;flex-shrink:0;
}
.uname{font-size:11px;font-weight:600;color:#F8FAFC}
.urole{font-size:10px;color:#64748B}
.lbtn{
  background:transparent;border:1px solid #334155;color:#94A3B8;
  border-radius:6px;padding:5px 10px;font-size:11px;cursor:pointer;
  transition:.1s;display:flex;align-items:center;gap:5px;
}
.lbtn:hover{background:#1E293B;color:#F8FAFC}
.theme-btn{
  background:transparent;border:none;color:#64748B;cursor:pointer;
  border-radius:6px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:.1s;
}
.theme-btn:hover{background:#1E293B;color:#94A3B8}
#clockDisplay{
  font-size:10px;color:#475569;text-align:right;
  line-height:1.4;white-space:nowrap;
}

/* ── SHEET TABS ── */
.sheet-tabs{
  background:#0F172A;border-bottom:1px solid #1E293B;
  display:flex;align-items:flex-end;padding:0 20px;
  gap:0;flex-shrink:0;overflow-x:auto;
  position:sticky;top:48px;z-index:99;
}
.stab{
  padding:9px 14px;font-size:11px;font-weight:500;
  border:none;border-bottom:2px solid transparent;
  cursor:pointer;background:transparent;color:#64748B;
  white-space:nowrap;transition:.1s;
  display:flex;align-items:center;gap:5px;
  letter-spacing:-0.01em;
}
.stab:hover{color:#94A3B8}
.stab.active{
  border-bottom-color:#3B82F6;color:#F8FAFC;font-weight:600;
  animation:tab-heartbeat 3.2s ease-in-out infinite;
}
@keyframes tab-heartbeat{
  0%,100%{border-bottom-color:#3B82F6}
  50%{border-bottom-color:rgba(59,130,246,.18)}
}
.stab i{font-size:13px}

/* ── TOOLBAR ── */
.toolbar{
  background:#FFFFFF;border-bottom:1px solid #E2E8F0;
  padding:7px 20px;display:flex;align-items:center;
  gap:6px;flex-shrink:0;flex-wrap:wrap;
  position:sticky;top:calc(48px + 39px);z-index:98;
}
.tbtn{
  background:transparent;border:1px solid #CBD5E1;border-radius:6px;
  padding:5px 10px;font-size:11px;color:#475569;cursor:pointer;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  transition:.1s;font-weight:500;
}
.tbtn:hover{background:#F1F5F9;border-color:#94A3B8;color:#0F172A}
.tbtn.add{background:#2563EB;color:#fff;border-color:#2563EB}
.tbtn.add:hover{background:#1D4ED8;border-color:#1D4ED8}
.tbtn.xlsx{background:#059669;color:#fff;border-color:#059669}
.tbtn.xlsx:hover{background:#047857}
.tbtn.pdf{background:#DC2626;color:#fff;border-color:#DC2626}
.tbtn.pdf:hover{background:#B91C1C}
.tsep{width:1px;height:18px;background:#E2E8F0;margin:0 2px;flex-shrink:0}
.tlabel{font-size:11px;color:#94A3B8;font-weight:600;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
.sbar{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.si{font-size:11px;color:#94A3B8;white-space:nowrap}
.si span{font-weight:700;color:#0F172A;font-variant-numeric:tabular-nums}

/* ── MAIN CONTENT ── */
.main{flex:1;overflow-y:auto;background:#F8FAFC;position:relative}
.sa{padding:20px 24px}

/* ── PANELS (ss = section/panel) ── */
.ss{
  background:#FFFFFF;border:1px solid #E2E8F0;
  border-radius:12px;overflow:hidden;margin-bottom:12px;
}
.sst{
  background:#FFFFFF;color:#0F172A;
  padding:12px 16px;font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid #F1F5F9;color:#64748B;
}
.sst i{color:#94A3B8;font-size:14px}

/* ── DATA TABLES ── */
.xt{width:100%;border-collapse:collapse;table-layout:fixed}
.xt th{
  background:#F8FAFC;border-bottom:1px solid #E2E8F0;
  padding:8px 12px;font-size:10px;font-weight:600;
  text-align:left;text-transform:uppercase;
  letter-spacing:.07em;color:#94A3B8;white-space:nowrap;
  position:sticky;top:0;z-index:2;
}
.xt td{
  border-bottom:1px solid #F1F5F9;padding:8px 12px;
  font-size:12px;vertical-align:middle;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#334155;
}
.xt tr:last-child td{border-bottom:none}
.xt tr:hover td{background:#EEF2FF}
.rn{
  background:#F8FAFC!important;color:#CBD5E1;font-size:10px;
  text-align:center;width:36px;
  border-right:1px solid #E2E8F0!important;user-select:none;
}
.cl{cursor:pointer}
.cr{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.cc{text-align:center}

/* ── BADGES / CHIPS ── */
.chip{
  display:inline-flex;padding:2px 8px;border-radius:4px;
  font-size:10px;font-weight:600;white-space:nowrap;letter-spacing:.02em;
}
.cr_{background:#FEE2E2;color:#991B1B}
.ca{background:#FEF3C7;color:#92400E}
.cg{background:#D1FAE5;color:#065F46}
.cb{background:#DBEAFE;color:#1E40AF}
.cgr{background:#F1F5F9;color:#475569}

.or td{background:#FFF5F5!important}
.sr td{
  background:#F8FAFC!important;font-weight:700;
  border-top:1px solid #E2E8F0!important;font-size:11px;
}

/* ── METRIC STRIP ── */
.ms{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px;background:#E2E8F0;border:1px solid #E2E8F0;
  border-radius:10px;overflow:hidden;margin-bottom:12px;
}
.mc{background:#FFFFFF;padding:12px 16px}
.ml{
  font-size:9px;text-transform:uppercase;
  letter-spacing:.09em;color:#94A3B8;font-weight:600;margin-bottom:6px;
}
.mv{font-size:20px;font-weight:700;line-height:1;letter-spacing:-0.02em;color:#0F172A}
.md{font-size:10px;margin-top:4px;color:#94A3B8}
.mg{color:#059669}.mw{color:#D97706}.mb_{color:#DC2626}.mbl{color:#2563EB}

/* ── RUNWAY BANNER ── */
.rws{
  background:#0F172A;color:#F8FAFC;
  border-radius:12px;border:1px solid #1E293B;
  padding:16px 20px;margin-bottom:12px;
  display:flex;align-items:center;gap:20px;
}
.rwn{font-size:42px;font-weight:700;line-height:1;letter-spacing:-0.04em}
.rwb{
  flex:1;background:#1E293B;
  border-radius:2px;height:4px;overflow:hidden;
}
.rwf{height:4px;border-radius:2px;transition:width .5s}

/* ── ALERTS ── */
.db{
  background:#FEF2F2;border:1px solid #FECACA;
  border-radius:8px;padding:8px 14px;margin-bottom:8px;
  font-size:11px;color:#991B1B;display:flex;align-items:center;gap:8px;
}
.wb{
  background:#FFFBEB;border:1px solid #FDE68A;
  border-radius:8px;padding:8px 14px;margin-bottom:8px;
  font-size:11px;color:#92400E;display:flex;align-items:center;gap:8px;
}

/* ── CHART PANELS ── */
.cg2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.cb2{
  background:#FFFFFF;border:1px solid #E2E8F0;
  border-radius:12px;padding:16px;
}
.ct{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:#94A3B8;margin-bottom:12px;
}
.cw{position:relative;height:160px}

/* ── MODAL ── */
.mo{
  position:fixed;inset:0;background:rgba(15,23,42,.6);
  z-index:500;display:flex;align-items:center;
  justify-content:center;padding:1rem;backdrop-filter:blur(2px);
}
.mbox{
  background:#FFFFFF;border:1px solid #E2E8F0;
  border-radius:12px;width:100%;max-width:520px;
  max-height:88vh;overflow-y:auto;
}
.mh{
  background:#F8FAFC;padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #E2E8F0;position:sticky;top:0;
  border-radius:12px 12px 0 0;
}
.mt{font-size:13px;font-weight:700;color:#0F172A;letter-spacing:-0.01em}
.mc2{
  background:none;border:none;font-size:16px;cursor:pointer;
  color:#94A3B8;padding:3px 7px;border-radius:6px;line-height:1;
  transition:.1s;
}
.mc2:hover{background:#F1F5F9;color:#475569}
.mbd{padding:18px}
.mft{
  padding:14px 18px;border-top:1px solid #E2E8F0;
  display:flex;gap:8px;justify-content:flex-end;
}
.mfg{margin-bottom:.8rem}
.mfl{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:#94A3B8;display:block;margin-bottom:5px;
}
.mfi{
  width:100%;padding:8px 11px;border:1px solid #CBD5E1;
  border-radius:7px;background:#FFFFFF;color:#0F172A;font-size:12px;
  transition:.1s;
}
.mfi:focus{outline:none;border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.bs{
  background:#2563EB;color:#fff;border:none;border-radius:7px;
  padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;
  transition:.1s;letter-spacing:-0.01em;
}
.bs:hover{background:#1D4ED8}
.bc{
  background:transparent;border:1px solid #CBD5E1;border-radius:7px;
  padding:7px 14px;font-size:12px;cursor:pointer;color:#475569;
  transition:.1s;
}
.bc:hover{background:#F1F5F9}
.bd{
  background:#FEF2F2;color:#DC2626;border:1px solid #FECACA;
  border-radius:7px;padding:7px 14px;font-size:12px;cursor:pointer;
  transition:.1s;
}
.bd:hover{background:#FEE2E2}
.dt{width:100%;border-collapse:collapse}
.dt td{border-bottom:1px solid #F1F5F9;padding:8px 12px;font-size:12px}
.dt tr:last-child td{border-bottom:none}
.dt td:first-child{
  color:#94A3B8;font-weight:600;width:42%;font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ── NOTIFICATIONS ── */
.np{
  position:absolute;right:0;top:44px;width:300px;
  background:#FFFFFF;border:1px solid #E2E8F0;
  border-radius:10px;z-index:400;
}
.nph{
  padding:10px 14px;font-size:10px;font-weight:700;
  border-bottom:1px solid #F1F5F9;background:#F8FAFC;
  text-transform:uppercase;letter-spacing:.07em;color:#94A3B8;
  border-radius:10px 10px 0 0;
}
.ni{padding:10px 14px;border-bottom:1px solid #F8FAFC;font-size:11px;color:#334155}
.ni:last-child{border-bottom:none}
.nt{font-size:10px;color:#94A3B8;margin-top:3px}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  border-radius:8px;padding:10px 16px;font-size:12px;font-weight:600;
  z-index:9999;display:flex;align-items:center;gap:8px;
  color:#fff;animation:toastIn .2s ease;white-space:nowrap;
  max-width:calc(100vw - 32px);letter-spacing:-0.01em;
  border:1px solid rgba(255,255,255,.1);
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ── CF PLANNER NOW COLUMN ── */
@keyframes nowBorder{
  0%,100%{box-shadow:0 0 0 1px rgba(37,99,235,.15)}
  50%{box-shadow:0 0 0 1px rgba(37,99,235,.7)}
}
.now-col{
  animation:nowBorder 3s ease-in-out infinite;
  border:none!important;outline:none!important;
}

/* ── HELPERS ── */
.sx{overflow-x:auto}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ══════════════════════════════════════
   DARK MODE — Bloomberg / Institutional
   ══════════════════════════════════════ */
[data-theme="dark"] body{background:#020617;color:#F8FAFC}

/* Login */
[data-theme="dark"] #loginScreen{background:#020617}
[data-theme="dark"] .lcard{background:#0F172A;border-color:#1E293B}
[data-theme="dark"] .fi{background:#0F172A;border-color:#1E293B;color:#F8FAFC}
[data-theme="dark"] .fi:focus{border-color:#3B82F6}
[data-theme="dark"] .fi::placeholder{color:#334155}

/* Shell */
[data-theme="dark"] #app{background:#020617}
[data-theme="dark"] .topbar{background:#020617;border-color:#1E293B}

/* Sheet tabs */
[data-theme="dark"] .sheet-tabs{background:#020617;border-color:#1E293B}
[data-theme="dark"] .stab{color:#475569}
[data-theme="dark"] .stab:hover{color:#94A3B8}
[data-theme="dark"] .stab.active{color:#F8FAFC;border-bottom-color:#3B82F6}

/* Toolbar */
[data-theme="dark"] .toolbar{background:#0F172A;border-color:#1E293B}
[data-theme="dark"] .tbtn{border-color:#334155;color:#64748B}
[data-theme="dark"] .tbtn:hover{background:#1E293B;border-color:#475569;color:#94A3B8}
[data-theme="dark"] .tlabel{color:#475569}
[data-theme="dark"] .si{color:#475569}
[data-theme="dark"] .si span{color:#F8FAFC}

/* Main */
[data-theme="dark"] .main{background:#020617}
[data-theme="dark"] .sa{}

/* Panels */
[data-theme="dark"] .ss{background:#0F172A;border-color:#1E293B}
[data-theme="dark"] .sst{background:#0F172A;border-color:#1E293B;color:#475569}

/* Metric strip */
[data-theme="dark"] .ms{background:#1E293B;border-color:#1E293B}
[data-theme="dark"] .mc{background:#0F172A}
[data-theme="dark"] .ml{color:#475569}
[data-theme="dark"] .mv{color:#F8FAFC}
[data-theme="dark"] .md{color:#475569}

/* Tables */
[data-theme="dark"] .xt th{background:#0F172A;border-color:#1E293B;color:#475569}
[data-theme="dark"] .xt td{border-color:#1E293B;color:#CBD5E1}
[data-theme="dark"] .xt tr:hover td{background:#1E293B}
[data-theme="dark"] .rn{background:#0F172A!important;color:#334155!important;border-color:#1E293B!important}
[data-theme="dark"] .sr td{background:#111827!important;border-color:#1E293B!important}
[data-theme="dark"] .or td{background:rgba(220,38,38,.06)!important}

/* Badges */
[data-theme="dark"] .cr_{background:rgba(220,38,38,.15);color:#FCA5A5}
[data-theme="dark"] .ca{background:rgba(217,119,6,.15);color:#FCD34D}
[data-theme="dark"] .cg{background:rgba(5,150,105,.15);color:#6EE7B7}
[data-theme="dark"] .cb{background:rgba(37,99,235,.15);color:#93C5FD}
[data-theme="dark"] .cgr{background:#1E293B;color:#64748B}

/* Alerts */
[data-theme="dark"] .db{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.2);color:#FCA5A5}
[data-theme="dark"] .wb{background:rgba(217,119,6,.1);border-color:rgba(217,119,6,.2);color:#FCD34D}

/* Charts */
[data-theme="dark"] .cb2{background:#0F172A;border-color:#1E293B}
[data-theme="dark"] .ct{color:#475569}

/* Runway */
[data-theme="dark"] .rws{background:#0F172A;border-color:#1E293B}

/* Modal */
[data-theme="dark"] .mbox{background:#0F172A;border-color:#1E293B}
[data-theme="dark"] .mh{background:#111827;border-color:#1E293B}
[data-theme="dark"] .mt{color:#F8FAFC}
[data-theme="dark"] .mfi{background:#111827;border-color:#334155;color:#F8FAFC}
[data-theme="dark"] .mfi:focus{border-color:#3B82F6}
[data-theme="dark"] .mft{border-color:#1E293B}
[data-theme="dark"] .bc{border-color:#334155;color:#64748B}
[data-theme="dark"] .bc:hover{background:#1E293B}
[data-theme="dark"] .bd{background:rgba(220,38,38,.1);color:#EF4444;border-color:rgba(220,38,38,.2)}
[data-theme="dark"] .dt td{border-color:#1E293B;color:#CBD5E1}
[data-theme="dark"] .dt td:first-child{color:#475569}
[data-theme="dark"] .mc2:hover{background:#1E293B;color:#94A3B8}

/* Notifications */
[data-theme="dark"] .np{background:#0F172A;border-color:#1E293B}
[data-theme="dark"] .nph{background:#111827;border-color:#1E293B;color:#475569}
[data-theme="dark"] .ni{color:#CBD5E1;border-color:#111827}
[data-theme="dark"] .nt{color:#475569}

/* Admin */
[data-theme="dark"] .admin-user-card{background:#111827;border-color:#1E293B}
[data-theme="dark"] .admin-user-name{color:#F8FAFC}
[data-theme="dark"] .admin-user-role{color:#64748B}

/* Admin badges */
.admin-user-card{
  background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  margin-bottom:8px;flex-wrap:wrap;
}
.admin-user-av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}
.admin-user-name{font-size:13px;font-weight:600;color:#0F172A}
.admin-user-role{font-size:11px;color:#64748B}
.admin-badge{
  font-size:9px;background:#DBEAFE;color:#1E40AF;
  padding:2px 7px;border-radius:4px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
}

/* Dark input fix */
[data-theme="dark"] .xt input:not([style*="color"]),
[data-theme="dark"] .xt select:not([style*="color"]),
[data-theme="dark"] table input:not([style*="color"]),
[data-theme="dark"] table select:not([style*="color"]){color:#F8FAFC!important}
[data-theme="dark"] table input:focus,
[data-theme="dark"] table select:focus{background:#1E293B!important;color:#F8FAFC!important}

/* ── MOBILE NAV ── */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.7);z-index:200}
.mob-overlay.open{display:block}
.mob-nav{
  position:fixed;left:0;top:0;bottom:0;width:272px;
  background:#FFFFFF;z-index:201;transform:translateX(-100%);
  transition:transform .25s ease;overflow-y:auto;
  border-right:1px solid #E2E8F0;
}
[data-theme="dark"] .mob-nav{background:#0F172A;border-color:#1E293B}
.mob-nav.open{transform:translateX(0)}
.mob-nav-hd{
  background:#0F172A;color:#F8FAFC;height:52px;
  padding:0 16px;display:flex;align-items:center;justify-content:space-between;
}
.mob-nav-brand{font-size:15px;font-weight:700;letter-spacing:-0.02em;color:#0D95A1}
.mob-nav-brand span{color:#475569;font-weight:400}
.mob-nav-close{
  background:rgba(255,255,255,.1);border:none;color:#fff;
  border-radius:6px;width:28px;height:28px;cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;
}
.mob-period{padding:12px 16px;border-bottom:1px solid #F1F5F9}
[data-theme="dark"] .mob-period{border-color:#1E293B}
.mob-period-lbl{
  font-size:9px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:#94A3B8;margin-bottom:7px;
}
.mob-period-row{display:flex;gap:4px}
.mob-period-row .ptab{
  background:#F1F5F9;color:#475569;
  font-size:11px;padding:5px 10px;border-radius:5px;
}
[data-theme="dark"] .mob-period-row .ptab{background:#1E293B;color:#64748B}
.mob-period-row .ptab.active{background:#2563EB;color:#fff}
.mob-nav-item{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  cursor:pointer;color:#475569;font-size:12px;font-weight:500;
  border-bottom:1px solid #F8FAFC;transition:.1s;
}
[data-theme="dark"] .mob-nav-item{color:#64748B;border-color:#111827}
.mob-nav-item:hover,.mob-nav-item.active{background:#EEF2FF;color:#2563EB}
[data-theme="dark"] .mob-nav-item:hover,[data-theme="dark"] .mob-nav-item.active{background:#1E293B;color:#3B82F6}
.mob-nav-item i{font-size:15px;width:20px;text-align:center}
.hbtn{
  display:none;background:rgba(255,255,255,.1);border:none;color:#fff;
  cursor:pointer;border-radius:6px;width:32px;height:32px;
  align-items:center;justify-content:center;font-size:16px;margin-right:4px;
}

/* ── MOBILE RESPONSIVE ── */
@media(max-width:768px){
  .hbtn{display:flex!important}
  .sheet-tabs{display:none!important}
  .period-row{display:none!important}
  .sbar{display:none!important}
  .cg2{grid-template-columns:1fr!important}
  .ms{grid-template-columns:repeat(2,1fr)!important}
  .rws{flex-wrap:wrap;gap:12px}
  .mbox{
    max-width:100%;border-radius:14px 14px 0 0;
    position:fixed;bottom:0;left:0;right:0;max-height:90vh;
  }
  .mo{align-items:flex-end;padding:0}
  .upill .uname,.upill .urole{display:none}
  .lbtn-text{display:none}
  .rwn{font-size:32px!important}
  .sa{padding:12px}
  .cfg-notif-grid{grid-template-columns:1fr!important}
  .cfg-flow-row{flex-direction:column!important;align-items:flex-start!important}
}

/* ── SPIN ANIMATION ── */
@keyframes spin{to{transform:rotate(360deg)}}