/* ============================================================
   AccessPro — app styles
   Themes: light = Navy+Teal ([data-theme="blue"]), dark = Modern Dark ([data-theme="slate"])
   ============================================================ */

/* Light (Navy+Teal) is the default — lives on :root so it is the fallback.
   Dark (slate) is defined AFTER and only matches [data-theme="slate"], so it
   wins when the attribute is set. Do NOT group :root with [data-theme="blue"]
   or :root will always override slate. */
:root, [data-theme="blue"] {  /* Navy + Teal — default light */
  --bg:#eef1f6; --surface:#fff; --surface-2:#f3f6fb; --rail:#14233f; --rail-fg:#c4d2e6;
  --border:#dde3ec; --text:#18243a; --text-dim:#66738a; --accent:#0f7a6c; --accent-fg:#fff;
  --accent-soft:#dcf2ee; --good:#0f7a6c; --good-soft:#dcf2ee; --warn:#b9791a; --warn-soft:#f7eddb;
  --bad:#c63f3f; --bad-soft:#f8e3e3; --shadow:0 1px 2px rgba(20,40,80,.08),0 8px 22px rgba(20,40,80,.10);
  --mono:"SFMono-Regular","Consolas","Roboto Mono",monospace; --radius:10px;
}
[data-theme="slate"] {  /* Modern Dark */
  --bg:#0e1117; --surface:#161b24; --surface-2:#1c232f; --rail:#11151d; --rail-fg:#aab4c2;
  --border:#252d3a; --text:#e8edf4; --text-dim:#8a95a5; --accent:#4f8cff; --accent-fg:#fff;
  --accent-soft:#1b2738; --good:#34d399; --good-soft:#11271f; --warn:#fbbf4d; --warn-soft:#2a2110;
  --bad:#f87171; --bad-soft:#2a1414; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
html { background:var(--bg); }   /* fill any area the body doesn't cover, theme-matched */
/* App-like behavior: no pinch/double-tap zoom, no pull-to-refresh / overscroll
   bounce, no tap-highlight flash, no long-press callout. Text selection stays on. */
html,body { overscroll-behavior:none; touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; }
body { -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
body { font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.45; }
.mono { font-family:var(--mono); }
.hidden { display:none !important; }

/* ===== SPLASH intro — dealing-cards concept ===== */
.splash { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; overflow:hidden; background:radial-gradient(circle at 50% 40%, #16294a 0%, #0c1626 60%, #060b15 100%);
  transition:opacity .6s ease, visibility .6s; }
.splash.done { opacity:0; visibility:hidden; pointer-events:none; }
/* rotating aurora glow behind the deck */
.splash::before { content:""; position:absolute; top:40%; left:50%; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; filter:blur(90px); opacity:.45; pointer-events:none;
  background:conic-gradient(from 0deg,#0f7a6c,#4f6ef7,#e8743b,#1fb39c,#0f7a6c); animation:splashAurora 12s linear infinite; }
@keyframes splashAurora { to{ transform:rotate(360deg); } }

.splash-deck { position:relative; width:220px; height:180px; }
/* cards centered via 50% + negative margins so animation transforms are free */
.scard { position:absolute; top:50%; left:50%; width:98px; height:130px; margin:-65px 0 0 -49px;
  border-radius:16px; box-shadow:0 14px 34px rgba(0,0,0,.5); opacity:0; overflow:hidden;
  animation-duration:1.5s; animation-timing-function:cubic-bezier(.2,.85,.2,1); animation-fill-mode:forwards; will-change:transform,opacity; }
.scard::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 55%); }
/* Per-card keyframes with literal values — Safari/WebKit doesn't reliably
   resolve var() inside keyframe transforms, which left the cards static on iOS. */
.scard.s1 { background:linear-gradient(150deg,#0f7a6c,#1fb39c); animation-name:deal1; animation-delay:.04s; }
.scard.s2 { background:linear-gradient(150deg,#14233f,#2f5490); animation-name:deal2; animation-delay:.14s; }
.scard.s3 { background:linear-gradient(150deg,#e8743b,#f4a765); animation-name:deal3; animation-delay:.24s; }
.scard.s4 { background:linear-gradient(150deg,#4f6ef7,#93a2ff); animation-name:deal4; animation-delay:.34s; }
@keyframes deal1 { 0%{opacity:0;transform:rotate(0) translate(0,44px) scale(.82);} 18%{opacity:1;} 50%{opacity:1;transform:rotate(-22deg) translate(-48px,0) scale(1);} 100%{opacity:1;transform:rotate(-4.4deg) translate(-7.68px,0) scale(1);} }
@keyframes deal2 { 0%{opacity:0;transform:rotate(0) translate(0,44px) scale(.82);} 18%{opacity:1;} 50%{opacity:1;transform:rotate(-11deg) translate(-24px,0) scale(1);} 100%{opacity:1;transform:rotate(-2.2deg) translate(-3.84px,0) scale(1);} }
@keyframes deal3 { 0%{opacity:0;transform:rotate(0) translate(0,44px) scale(.82);} 18%{opacity:1;} 50%{opacity:1;transform:rotate(11deg) translate(24px,0) scale(1);} 100%{opacity:1;transform:rotate(2.2deg) translate(3.84px,0) scale(1);} }
@keyframes deal4 { 0%{opacity:0;transform:rotate(0) translate(0,44px) scale(.82);} 18%{opacity:1;} 50%{opacity:1;transform:rotate(22deg) translate(48px,0) scale(1);} 100%{opacity:1;transform:rotate(4.4deg) translate(7.68px,0) scale(1);} }
/* logo card lands on top, centered, then breathes */
.scard.slogo { background:#fff; display:grid; place-items:center; z-index:5; opacity:0;
  animation:dealLogo 1.1s cubic-bezier(.2,.9,.25,1) forwards .52s, cardGlow 2.2s ease-in-out infinite 1.7s; }
.scard.slogo::after { display:none; }
.scard.slogo img { width:74px; height:74px; object-fit:contain; }
@keyframes dealLogo {
  0%   { opacity:0; transform:rotate(-8deg) translate(0,44px) scale(.6); }
  60%  { opacity:1; }
  100% { opacity:1; transform:rotate(0) translate(0,0) scale(1); }
}
@keyframes cardGlow { 0%,100%{ box-shadow:0 16px 40px rgba(31,179,156,.35); } 50%{ box-shadow:0 18px 56px rgba(31,179,156,.85); } }

.splash-word { font-size:30px; font-weight:800; letter-spacing:1px; color:#fff;
  background:linear-gradient(90deg,#fff 0%,#8fe0d2 50%,#fff 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:splashUp .7s ease both 1s, splashShine 2.4s linear infinite 1s; }
@keyframes splashShine { to{ background-position:200% center; } }
@keyframes splashUp { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.splash-dots { display:flex; gap:9px; animation:splashUp .6s ease both 1.2s; }
.splash-dots i { width:8px; height:8px; border-radius:50%; background:#1fb39c; animation:splashDot 1s ease-in-out infinite; }
.splash-dots i:nth-child(2){ animation-delay:.16s; } .splash-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes splashDot { 0%,100%{ opacity:.35; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-6px); } }
/* One-shot entrance anims (cards + wordmark) stay paused until the first
   painted frame — JS adds .run via double-rAF. Otherwise iOS runs the timeline
   during the launch blank and the deal finishes before anything is visible.
   Dots keep looping regardless so there's always motion. */
.splash .scard, .splash .splash-word { animation-play-state:paused !important; }
.splash.run .scard, .splash.run .splash-word { animation-play-state:running !important; }

/* shell */
.app { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }
.rail { background:var(--rail); color:var(--rail-fg); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:16px 12px; position:sticky; top:0; height:100vh; overflow:auto;
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--rail-fg) 35%,transparent) transparent; }
.rail::-webkit-scrollbar { width:8px; }
.rail::-webkit-scrollbar-track { background:transparent; }
.rail::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--rail-fg) 30%,transparent); border-radius:8px; }
.rail::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb,var(--rail-fg) 55%,transparent); }
.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 14px; }
.brand .logo { width:30px; height:30px; border-radius:8px; background:var(--accent); color:var(--accent-fg);
  display:grid; place-items:center; font-weight:800; font-size:15px; }
.brand b { color:#fff; font-size:15px; } .brand b span { opacity:.55; font-weight:500; }
.brand-logo { width:34px; height:34px; border-radius:9px; background:#fff; padding:3px; object-fit:contain; flex:0 0 auto;
  touch-action:manipulation; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.auth-logo { width:76px; height:76px; object-fit:contain; display:block; margin:0 auto 14px; }

.nav-group { margin-top:10px; }
.nav-group .gl { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; opacity:.5; padding:6px 12px 4px; }
.nav a { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px; cursor:pointer;
  color:var(--rail-fg); text-decoration:none; font-weight:500; opacity:.85; font-size:13.5px; }
.nav a .ico { width:18px; text-align:center; font-size:14px; }
.nav a:hover { background:color-mix(in srgb,var(--accent) 22%,transparent); opacity:1; }
.nav a.active { background:var(--accent); color:#fff; opacity:1; box-shadow:inset 3px 0 0 rgba(255,255,255,.45); }
.nav .badge { margin-left:auto; font-size:11px; background:var(--bad); color:#fff; border-radius:999px; padding:1px 7px; font-weight:600; }
.nav .badge:empty { display:none; }
.nav a.active .badge { background:rgba(255,255,255,.25); }
.rail .spacer { flex:1; min-height:10px; }
.rail .acct { border-top:1px solid color-mix(in srgb,var(--rail-fg) 18%,transparent); padding-top:12px; margin-top:10px;
  display:flex; align-items:center; gap:10px; font-size:12.5px; }
.rail .acct .av { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; font-weight:700; }
.rail .acct .who small { opacity:.6; }

.main { display:flex; flex-direction:column; min-width:0; }
.topbar { height:60px; border-bottom:1px solid var(--border); background:var(--surface); display:flex;
  align-items:center; gap:14px; padding:0 26px; position:sticky; top:0; z-index:20; }
.topbar h1 { font-size:17px; margin:0; font-weight:700; }
.topbar .sub { color:var(--text-dim); font-size:12.5px; }
.topbar .right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.icon-btn { border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:999px;
  height:38px; min-width:38px; cursor:pointer; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }
.icon-btn.wide { padding:0 14px; font-size:13px; font-weight:600; }
.icon-btn .ic { font-size:15px; line-height:1; }
.qbadge { display:inline-flex; align-items:center; gap:6px; background:var(--warn-soft); color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent); padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600; }
.btn { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:9px;
  padding:9px 14px; font-size:13px; cursor:pointer; font-weight:600; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.btn.primary:hover { filter:brightness(1.06); }
.btn.ghost { background:transparent; }
.btn.sm { padding:6px 10px; font-size:12px; }

.content { padding:24px 26px 60px; overflow:auto; }
.page { display:none; } .page.show { display:block; animation:fade .16s ease; }
@keyframes fade { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kpi { padding:16px 18px; }
.kpi .label { color:var(--text-dim); font-size:12.5px; font-weight:600; }
.kpi .val { font-size:26px; font-weight:800; margin-top:6px; letter-spacing:-.5px; }
.kpi .val small { font-size:14px; font-weight:600; color:var(--text-dim); }
.kpi .sub2 { font-size:12px; color:var(--text-dim); margin-top:4px; }
.up { color:var(--good); }

.chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chip { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px;
  padding:6px 13px; font-size:12.5px; cursor:pointer; font-weight:600; }
.chip.on { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.chip.s-good { background:var(--good-soft); color:var(--good); border-color:transparent; cursor:default; }
.chip.s-warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; cursor:default; }
.chip.s-bad  { background:var(--bad-soft);  color:var(--bad);  border-color:transparent; cursor:default; }

.grid-2 { display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start; }
.grid-form { display:grid; grid-template-columns:420px 1fr; gap:16px; align-items:start; }
.panel { padding:0; overflow:hidden; }
.panel .head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
.panel .head h3 { margin:0; font-size:14px; }
.panel .head .right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.pbody { padding:18px; }

table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:11px 18px; font-size:13px; border-bottom:1px solid var(--border); }
th { color:var(--text-dim); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background .14s ease; }
tbody tr:hover { background:var(--surface-2); }
.amt { font-family:var(--mono); font-weight:600; }
mark { background:var(--warn-soft); color:var(--text); border-radius:3px; padding:0 2px; }
.ret-bar { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:160; }
.ret-bar .btn { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); font-weight:700;
  padding:11px 20px; border-radius:999px; box-shadow:0 6px 20px rgba(20,40,80,.25); }
.ret-bar .btn:hover { filter:brightness(1.06); }
.muted { color:var(--text-dim); }

.bars { padding:8px 18px 16px; }
.bar-row { display:grid; grid-template-columns:64px 1fr 84px; align-items:center; gap:10px; margin-top:12px; }
.bar-track { height:9px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.bar-fill { height:100%; background:var(--accent); border-radius:999px; }

/* forms */
.field { margin-bottom:14px; }
.field label, .field .label { display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text-dim); }
.field input,.field select,.field textarea { width:100%; padding:10px 12px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); border-radius:9px; font-size:14px; font-family:inherit; }
.field textarea { min-height:70px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.amount-big { display:flex; gap:10px; align-items:stretch; }
.amount-big input { font-size:22px; font-weight:800; font-family:var(--mono); flex:1; min-width:0; }
.cur-toggle { display:flex; flex:0 0 auto; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.cur-toggle button { border:none; background:var(--surface-2); padding:0 18px; cursor:pointer; font-weight:700; color:var(--text-dim); white-space:nowrap; }
.cur-toggle button.on { background:var(--accent); color:var(--accent-fg); }

/* custom themed dropdown (replaces native select popup) */
.cs { position:relative; display:inline-block; min-width:140px; vertical-align:middle; }
.field .cs { display:block; width:100%; min-width:0; }
.cs-btn { width:100%; text-align:left; padding:10px 30px 10px 12px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); border-radius:9px; font-size:14px; cursor:pointer; position:relative; font-family:inherit;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-btn::after { content:"▾"; position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--text-dim); font-size:11px; pointer-events:none; }
.cs-btn:hover { border-color:var(--accent); }
.cs.open .cs-btn { border-color:var(--accent); outline:2px solid var(--accent-soft); }
.cs-panel { position:fixed; z-index:340; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow); max-height:300px; overflow:auto; padding:6px; display:none; }
.cs-panel.open { display:block; animation:fade .12s ease; }
.cs-group { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); font-weight:700; padding:8px 10px 4px; }
.cs-opt { padding:9px 11px; border-radius:7px; cursor:pointer; font-size:13.5px; color:var(--text); white-space:nowrap; }
.cs-opt:hover { background:var(--surface-2); }
.cs-opt.sel { background:var(--accent); color:var(--accent-fg); }

/* Quick Replies cards */
.q-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.q-card { border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow);
  padding:12px 14px; cursor:pointer; transition:transform .12s ease, box-shadow .16s ease, border-color .15s; }
.q-card:hover { border-color:var(--accent); box-shadow:0 8px 22px rgba(20,40,80,.12); }
.q-card:active { transform:scale(.995); }
.q-card.q-dragging { opacity:.5; }
.q-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.q-drag { cursor:grab; color:var(--text-dim); font-size:14px; }
.q-title { font-weight:700; font-size:14px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.q-actions { display:flex; gap:2px; flex:0 0 auto; }
.q-content { display:none; font-size:13px; color:var(--text); white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto; margin-top:6px; }
.q-card.open .q-content { display:block; }
.q-exp { transition:transform .15s ease; }
.q-card.open .q-exp { transform:rotate(180deg); }
.q-copy { margin-top:10px; font-size:11px; color:var(--accent); font-weight:600; }

/* ChatGPT account cards — compact, packed two-up */
.gpt-cards { padding:14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:12px; }
.gpt-card { border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:12px 14px; }
.gpt-card:hover { box-shadow:var(--shadow); }
.gpt-head { display:flex; align-items:flex-end; gap:8px; margin-bottom:9px; }
.gpt-head .gpt-f { flex:1; }
.gpt-cd { flex:0 0 auto; white-space:nowrap; }
.gpt-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 12px; margin-bottom:9px; }
.gpt-f .gpt-l { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim); font-weight:700; }
.gpt-f.grey { opacity:.5; }
.gpt-fin { display:flex; gap:5px; align-items:center; margin-top:3px; }
.gpt-fin input, .gpt-fin textarea { flex:1; min-width:0; padding:6px 8px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface-2); color:var(--text); font-size:12px; font-family:var(--mono); }
.gpt-fin textarea { resize:vertical; line-height:1.4; }
.gpt-fin input[readonly], .gpt-fin textarea[readonly] { background:var(--surface); color:var(--text-dim); cursor:default; }
.gpt-fin input:focus, .gpt-fin textarea:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
.gpt-fin .btn { flex:0 0 auto; padding:5px 7px; font-size:12px; }
.gpt-sel { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; padding-top:9px; border-top:1px solid var(--border); }
.gpt-sel label { display:inline-flex; align-items:center; gap:5px; font-size:10px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-dim); font-weight:700; }
.gpt-sel .cs { min-width:104px; }
.gpt-sel .cs-btn { padding:6px 26px 6px 9px; font-size:12px; }

/* Formatter parsed/saved account cards */
.fmt-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.fmt-card { border:1px solid var(--border); border-radius:11px; background:var(--surface); overflow:hidden; transition:opacity .15s; }
.fmt-card.used { opacity:.55; }
.fmt-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.fmt-type { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:800; color:var(--accent); }
.fmt-used-btn { margin-left:auto; border:1px solid var(--border); background:var(--surface); color:var(--text-dim);
  border-radius:999px; padding:5px 13px; font-size:12px; font-weight:700; cursor:pointer; }
.fmt-used-btn:hover { border-color:var(--bad); color:var(--bad); }
.fmt-used-btn.on { background:var(--bad); color:#fff; border-color:var(--bad); }
.fmt-rows { padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.fmt-row { display:flex; flex-direction:column; gap:2px; }
.fmt-l { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim); font-weight:700; }
.fmt-v { font-size:13px; word-break:break-all; }
.fmt-foot { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--border); }
.fmt-2fa { font-size:11.5px; color:var(--accent); text-decoration:none; font-weight:600; }
.fmt-2fa:hover { text-decoration:underline; }

/* custom date picker */
.dp { position:relative; display:inline-block; min-width:150px; vertical-align:middle; }
.field .dp { display:block; width:100%; min-width:0; }
.dp-btn { width:100%; text-align:left; padding:10px 12px 10px 34px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); border-radius:9px; font-size:14px; cursor:pointer; position:relative; font-family:inherit; }
.dp-btn::before { content:"📅"; position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:13px; opacity:.7; }
.dp-btn:hover { border-color:var(--accent); }
.dp.open .dp-btn { border-color:var(--accent); outline:2px solid var(--accent-soft); }
.dp-ph { color:var(--text-dim); }
.dp-panel { position:fixed; z-index:340; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:12px; display:none; width:260px; }
.dp-panel.open { display:block; animation:fade .12s ease; }
.dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-weight:700; font-size:13.5px; }
.dp-nav { border:1px solid var(--border); background:var(--surface-2); color:var(--text); width:28px; height:28px;
  border-radius:7px; cursor:pointer; font-size:15px; line-height:1; }
.dp-nav:hover { border-color:var(--accent); color:var(--accent); }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-w { text-align:center; font-size:10.5px; color:var(--text-dim); font-weight:700; padding:4px 0; }
.dp-day { border:none; background:transparent; color:var(--text); border-radius:7px; padding:7px 0; cursor:pointer; font-size:12.5px; }
.dp-day:hover { background:var(--surface-2); }
.dp-day.today { box-shadow:inset 0 0 0 1px var(--accent); }
.dp-day.sel { background:var(--accent); color:var(--accent-fg); font-weight:700; }
.dp-foot { display:flex; justify-content:space-between; margin-top:10px; }

/* on/off switch (create-order etc.) */
.switch-line { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--surface-2); border-radius:9px; margin-bottom:12px; }
.switch-line .lbl { font-weight:600; font-size:13px; }
.switch { position:relative; width:46px; height:26px; border-radius:999px; background:var(--border); border:none; cursor:pointer; flex:0 0 auto; transition:background .18s ease; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s ease; }
.switch.on { background:var(--accent); }
.switch.on::after { transform:translateX(20px); }

/* row action button spacing */
.row-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; row-gap:8px; }
.panel .head .right { gap:8px; flex-wrap:wrap; }

/* card-view lists (sales/expenses/orders/issues) */
.list-cards { padding:14px; display:grid; grid-template-columns:1fr; gap:10px; }
.item-card { border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:12px 14px; transition:box-shadow .16s ease, transform .16s ease; }
.item-card:hover { box-shadow:var(--shadow); }
.item-card { overflow:hidden; }
.item-card .ic-top { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.item-card .ic-title, .item-card .ic-meta { overflow-wrap:anywhere; }
.item-card .ic-top > div { flex:1; min-width:0; }         /* title block shrinks so status chip never clips */
.item-card .ic-top > .chip, .item-card .ic-top > .ic-amt { flex:0 0 auto; }
.item-card .ic-amt { align-self:flex-start; }
.item-card .ic-title { font-weight:700; font-size:14px; }
.item-card .ic-meta { color:var(--text-dim); font-size:12.5px; margin-top:4px; display:flex; gap:3px 12px; flex-wrap:wrap; row-gap:3px; }
.item-card .ic-meta span:not(:last-child)::after { content:"·"; margin-left:12px; opacity:.45; }
.item-card .ic-amt { margin-left:auto; font-family:var(--mono); font-weight:700; font-size:15px; white-space:nowrap; }
.item-card .ic-actions { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; align-items:center; }
.ic-actions .cs { min-width:112px; }
.ic-actions .cs-btn { padding:6px 26px 6px 10px; font-size:13px; }
.item-card.used-row { opacity:.55; }
.toggle-line { display:flex; align-items:center; gap:10px; padding:12px; background:var(--surface-2); border-radius:9px; margin-bottom:12px; }
.toggle-line input { width:auto; }
.partner-infer { font-size:11.5px; color:var(--good); margin-top:6px; display:none; } .partner-infer.show { display:block; }
.dupwarn { display:none; background:var(--warn-soft); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
  padding:10px 12px; border-radius:9px; font-size:12.5px; margin-bottom:12px; } .dupwarn.show { display:block; }
.status-msg { font-size:12.5px; margin-top:10px; min-height:16px; }
.status-msg.success { color:var(--good); } .status-msg.error { color:var(--bad); }
.placeholder { padding:50px; text-align:center; color:var(--text-dim); }
.placeholder .big { font-size:38px; margin-bottom:8px; }
.subtabs { display:flex; gap:8px; margin-bottom:16px; }

/* channel buttons (list-driven, same look as chips) */
.channel-btn { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px;
  padding:6px 13px; font-size:12.5px; cursor:pointer; font-weight:600; }
.channel-btn.active { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }

/* auth gate */
.auth-gate { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:90; }
/* brand-led auth card: logo + wordmark command the card, sign-in is the calm next step */
.auth-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:40px 36px; width:380px; max-width:92vw; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px; }
.auth-card .auth-logo { width:67px; height:67px; margin:0 0 2px; }
.auth-card .logo { width:54px; height:54px; border-radius:14px; background:var(--accent); color:#fff; font-weight:800;
  font-size:26px; display:grid; place-items:center; margin:0 auto 16px; }
.auth-card h2 { margin:0; font-weight:800; letter-spacing:-.5px; line-height:1; font-size:30px; }
.auth-card p { color:var(--text-dim); margin:2px 0 6px; font-size:13px; max-width:26ch; }
.auth-card p:last-of-type { margin:14px 0 0; max-width:none; }
.google-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:11px 14px; font-size:13.5px; }

/* dup-warning modal */
.scrim { position:fixed; inset:0; background:rgba(8,12,20,.45); display:none; align-items:flex-start;
  justify-content:center; z-index:300; padding-top:14vh; backdrop-filter:blur(2px); }
.scrim.show { display:flex; }
.modal { width:420px; max-width:94vw; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden; animation:pop .18s ease; }
@keyframes pop { from{transform:translateY(10px) scale(.98);opacity:0;} to{transform:none;opacity:1;} }
.modal .mhead { padding:16px 20px; border-bottom:1px solid var(--border); font-weight:700; }
.modal .mbody { padding:18px 20px; font-size:13.5px; color:var(--text-dim); max-height:62vh; overflow:auto; }
.modal .mbody .field label { color:var(--text-dim); }
.modal .mbody .field input,.modal .mbody .field select,.modal .mbody .field textarea { color:var(--text); }
.modal .mfoot { display:flex; gap:10px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--border); background:var(--surface-2); }

/* toast */
.toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--text);
  color:var(--bg); padding:12px 18px; border-radius:10px; font-weight:600; font-size:13px; opacity:0;
  pointer-events:none; transition:.25s; z-index:400; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); animation:toastIn .4s cubic-bezier(.18,1.3,.4,1); }
.toast.success { background:var(--good); color:#fff; }
.toast.error { background:var(--bad); color:#fff; }
@keyframes toastIn { from{opacity:0; transform:translateX(-50%) translateY(24px) scale(.9);} to{opacity:1; transform:translateX(-50%) translateY(0) scale(1);} }

/* ===== animation & interaction ===== */
.btn,.chip,.card,.nav a,.cur-toggle button,.channel-btn { transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease, filter .18s ease; }
.btn:active,.chip:active,.channel-btn:active { transform:scale(.95); }
.nav a:active { transform:scale(.98); }
.card { transition:transform .18s ease, box-shadow .18s ease; }
.kpi:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(20,40,80,.16); }
@keyframes chipPop { 0%{transform:scale(1);} 45%{transform:scale(1.12);} 100%{transform:scale(1);} }
.chip.pop,.channel-btn.pop { animation:chipPop .26s ease; }
.page.show .card { animation:rise .42s cubic-bezier(.22,.8,.3,1) both; }
.page.show .kpis .card:nth-child(1){animation-delay:.02s;} .page.show .kpis .card:nth-child(2){animation-delay:.07s;}
.page.show .kpis .card:nth-child(3){animation-delay:.12s;} .page.show .kpis .card:nth-child(4){animation-delay:.17s;}
.page.show .grid-2 > *, .page.show .grid-form > * { animation:rise .42s cubic-bezier(.22,.8,.3,1) both; }
.page.show .grid-2 > *:nth-child(2), .page.show .grid-form > *:nth-child(2){ animation-delay:.08s; }
@keyframes rise { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.btn,.chip,.channel-btn,.nav a { position:relative; overflow:hidden; }
.ripple { position:absolute; border-radius:50%; transform:scale(0); background:currentColor; opacity:.28; pointer-events:none; animation:rip .55s ease-out; }
@keyframes rip { to{ transform:scale(2.4); opacity:0; } }
@keyframes pulseGood { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent);} 100%{box-shadow:0 0 0 14px transparent;} }
.btn.flash-good { animation:pulseGood .6s ease-out; }
@keyframes spin { to{ transform:rotate(360deg); } }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
.loading,.empty,.error-state { padding:34px; text-align:center; color:var(--text-dim); font-size:13px; }
/* skeleton loader */
.sk-wrap { display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.sk-row { display:flex; flex-direction:column; gap:9px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.sk-line { height:12px; border-radius:6px; background:var(--surface-2);
  background-image:linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--text-dim) 16%,transparent) 50%, transparent 100%);
  background-size:200% 100%; background-repeat:no-repeat; animation:shimmer 1.25s ease infinite; }
.sk-line.lg { width:58%; height:14px; } .sk-line.sm { width:34%; }
@keyframes shimmer { 0%{ background-position:-120% 0; } 100%{ background-position:220% 0; } }
.error-state { color:var(--bad); }

/* ===== alternating colors (zebra) for scannability + a11y ===== */
.list-cards .item-card:nth-child(odd) { background:var(--surface); }
.list-cards .item-card:nth-child(even) { background:var(--surface-2); }
/* gpt cards are a 2-col grid — checkerboard so columns aren't mono-colored */
.gpt-cards .gpt-card:nth-child(4n+1), .gpt-cards .gpt-card:nth-child(4n) { background:var(--surface); }
.gpt-cards .gpt-card:nth-child(4n+2), .gpt-cards .gpt-card:nth-child(4n+3) { background:var(--surface-2); }
/* fields inside ChatGPT cards alternate so adjacent inputs are distinguishable */
.gpt-grid .gpt-f:nth-child(even) .gpt-fin input { background:var(--surface); }
.gpt-grid .gpt-f:nth-child(odd) .gpt-fin input { background:var(--surface-2); }
/* table rows zebra (records, etc.) — hover reasserted after so it still wins */
tbody tr:nth-child(even) { background:color-mix(in srgb, var(--text) 4%, transparent); }
tbody tr:hover { background:var(--surface-2); }

/* keyboard focus (a11y) — visible ring only for keyboard users */
.btn:focus-visible,.chip:focus-visible,.channel-btn:focus-visible,.nav a:focus-visible,.icon-btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
.nav a:focus-visible { outline-offset:-2px; }

/* hamburger + bottom bar hidden on desktop */
.hamburger, .mobile-bar, .nav-scrim { display:none; }

/* ===== MOBILE (≤780px) ===== */
@media (max-width:780px) {
  /* body scrolls (not an inner box) so fixed bottom bar + sticky topbar anchor to viewport */
  html, body { height:auto; overflow-x:hidden; }
  .app { display:block; min-height:100vh; }
  .main { min-height:0; }
  .content { overflow:visible; }
  .topbar { position:sticky; top:0; }
  .hamburger { display:inline-flex; }

  /* rail becomes an off-canvas drawer */
  .rail { position:fixed; top:0; left:0; height:100vh; width:240px; z-index:200;
    transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.4); }
  body.drawer-open .rail { transform:translateX(0); }
  .nav-scrim { position:fixed; inset:0; background:rgba(8,12,20,.5); z-index:190; opacity:0; pointer-events:none; transition:opacity .25s ease; }
  body.drawer-open .nav-scrim { display:block; opacity:1; pointer-events:auto; }

  /* topbar tightening + clear the iPhone status bar (safe-area insets) */
  .topbar { box-sizing:border-box; height:calc(60px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left)); gap:8px; }
  .rail { padding-top:calc(16px + env(safe-area-inset-top)); }
  .topbar h1 { font-size:15px; }
  .topbar .sub { display:none; }
  .topbar .right { gap:6px; }
  #mode-toggle .ic, #mode-text { display:none; }
  #mode-toggle.wide { padding:0; width:38px; }
  .topbar .btn.primary { padding:9px 12px; font-size:0; }   /* show just the + */
  .topbar .btn.primary::before { content:"＋"; font-size:16px; }

  .content { padding:16px 14px calc(72px + env(safe-area-inset-bottom)); }   /* room for bottom bar */

  /* stack all multi-column layouts */
  .kpis { grid-template-columns:repeat(2,1fr) !important; }
  .grid-2, .grid-form { grid-template-columns:1fr; }
  .gpt-cards { grid-template-columns:1fr; }
  .rec-kpis, #rec-kpis, #acc-kpis { }
  .gpt-grid { grid-template-columns:1fr; }
  table { font-size:12px; }
  th, td { padding:9px 10px; }
  .modal { width:94vw; }
  .cs-panel, .dp-panel { max-width:92vw; }

  /* bottom tab bar — horizontally scrollable when items overflow */
  .mobile-bar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:150;
    background:var(--surface); border-top:1px solid var(--border); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .mobile-bar::-webkit-scrollbar { display:none; }
  .mobile-bar a, .mobile-bar button { flex:0 0 auto; min-width:19vw; border:none; background:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0;
    color:var(--text-dim); font-size:10.5px; font-weight:600; position:relative; }
  .mobile-bar .mb-i { font-size:17px; line-height:1; }
  .mobile-bar a.active { color:var(--accent); }
  .mobile-bar .mb-dot { position:absolute; top:-1px; right:20%; min-width:16px; height:16px; padding:0 4px;
    border-radius:999px; background:var(--bad); color:#fff; font-size:9.5px; font-weight:700; line-height:16px; text-align:center; box-sizing:border-box; }
  .mobile-bar .mb-dot:empty { display:none; }

  /* ---- forms: compact on mobile (less scrolling) ---- */
  /* 16px inputs stop iOS auto-zoom on focus */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size:16px !important; }
  .grid-form { gap:12px; }
  .pbody { padding:14px; }
  .field { margin-bottom:9px; }
  .field label, .field .label { margin-bottom:4px; font-size:12px; }
  .field input, .field select, .field textarea { padding:9px 11px; }
  .cs-btn { padding:9px 30px 9px 12px; } .dp-btn { padding:9px 12px 9px 34px; }
  .field textarea { min-height:54px; }
  .amount-big input { font-size:19px !important; padding:8px 11px; }
  .switch-line { padding:8px 11px; margin-bottom:9px; }
  .chips { gap:6px; }
  .chip, .channel-btn { padding:6px 11px; }
  .row2 { grid-template-columns:1fr; }            /* stack name/phone etc. */
  .cur-toggle button { padding:0 14px; }
  .panel .head { padding:11px 14px; }

  /* ---- wide tables: horizontal scroll instead of squish ---- */
  #rec-list, #acc-list, #cdk-list { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #rec-list table, #acc-list table, #cdk-list table { min-width:560px; }
  /* ChatGPT cards fit the viewport (no horizontal scroll) */
  #gpt-list { overflow-x:hidden; }
  .gpt-head { flex-wrap:wrap; }
  .gpt-cd { margin-left:0; }

  /* ---- modals as bottom sheets, full-height ---- */
  .scrim { align-items:flex-end; padding:0; backdrop-filter:blur(2px); }
  .modal { width:100%; max-width:100%; border-radius:16px 16px 0 0; max-height:90vh; display:flex; flex-direction:column; animation:sheetUp .25s ease; }
  .modal .mbody { max-height:none; flex:1; }
  @keyframes sheetUp { from{ transform:translateY(100%); } to{ transform:translateY(0); } }

  /* float return button + toasts above the bottom bar */
  .ret-bar { bottom:calc(70px + env(safe-area-inset-bottom)); }
  .toast { bottom:calc(74px + env(safe-area-inset-bottom)); }

  /* dropdown + date panels anchor under the field (JS clamps to viewport) */
  .cs-panel, .dp-panel { max-height:50vh; }

  /* drop redundant top-bar New Sale (bottom bar already has Sales) */
  .topbar .btn.primary { display:none; }

  /* swipe affordance on scrollable tables (edge shadows) */
  #rec-list, #acc-list, #cdk-list {
    background:
      linear-gradient(to right, var(--surface), rgba(0,0,0,0)) 0 0,
      linear-gradient(to left, var(--surface), rgba(0,0,0,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) 0 0,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) 100% 0;
    background-repeat:no-repeat; background-size:36px 100%,36px 100%,14px 100%,14px 100%; background-attachment:local,local,scroll,scroll; }

  /* bigger tap targets */
  .btn.sm { min-height:36px; }
  .chip, .channel-btn { min-height:34px; }
  .mobile-bar a, .mobile-bar button { min-height:52px; }

  /* ---- splash sizing ---- */
  .splash-deck { transform:scale(.86); }
  .splash-word { font-size:24px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ===== Records filters ===== */
.rec-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.rec-filters .rf { padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text); font-size:13px; }
.rec-filters .rf-find { flex:1 1 180px; min-width:140px; }
.rec-filters .rf-dates { display:flex; align-items:center; gap:6px; }
.rec-filters .rf-dates .rf { flex:1; min-width:0; }
.rec-filters .rf-sep { color:var(--text-dim); flex:0 0 auto; }
.rec-more { text-align:center; margin-top:14px; }
.rmd-check { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-dim); cursor:pointer; user-select:none; padding:0 6px; }
.rmd-check input { width:16px; height:16px; accent-color:var(--good); cursor:pointer; }
.item-card.is-reminded .rmd-check { color:var(--good); }

/* undo snackbar */
.undobar { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); z-index:450;
  display:flex; align-items:center; gap:14px; background:var(--text); color:var(--surface);
  padding:10px 12px 10px 16px; border-radius:12px; box-shadow:var(--shadow); font-size:13px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-width:calc(100vw - 32px); }
.undobar.show { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.undobar .btn { background:transparent; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); }
.undobar .btn:hover { background:color-mix(in srgb,var(--accent) 14%,transparent); }
@media (max-width:780px){ .undobar { bottom:calc(72px + env(safe-area-inset-bottom)); } }
@media (max-width:780px) {
  .rec-filters .rf-find { flex-basis:100%; }
  .rec-filters .rf-dates { flex-basis:100%; }
  .rec-filters > .rf { flex:1 1 calc(50% - 4px); min-width:0; }   /* selects: two per row */
}

.fmt-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:12px; }

/* ===== Subscription length input ===== */
.len-input { display:inline-flex; align-items:center; gap:10px; }
.len-input input { width:88px; text-align:center; height:44px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text); font-size:16px; font-weight:600; padding:0 10px; }
.len-input input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.len-suffix { color:var(--text-dim); font-size:14px; }

/* ===== Deliver modal ===== */
.deliver-pre { margin:0; padding:12px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  font-family:var(--mono); font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word;
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }

/* ===== Customer drill-down ===== */
.cs-sum { color:var(--text-dim); font-size:12.5px; margin-bottom:10px; }
.cust-sales { display:flex; flex-direction:column; }
.cs-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:9px 2px; border-bottom:1px solid var(--border); font-size:13px; }
.cs-row:last-child { border-bottom:none; }
.cs-date { color:var(--text-dim); font-size:12px; white-space:nowrap; }
.cs-prod { min-width:0; }
.cs-amt { font-family:var(--mono); font-weight:600; white-space:nowrap; }
.cs-row.jod .cs-amt { color:var(--warn); }
.cs-row.unpaid .cs-amt { color:var(--bad); }

/* ===== P&L / settlement statement ===== */
.pnl-statement { display:flex; flex-direction:column; gap:2px; }
.pnl-line { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 2px; font-size:14px; border-bottom:1px solid var(--border); }
.pnl-line:last-child { border-bottom:none; }
.pnl-line span:last-child { font-family:var(--mono); font-weight:600; }
.pnl-line.total { margin-top:6px; padding-top:12px; border-top:2px solid var(--border); border-bottom:none; font-weight:700; font-size:15px; }
.pnl-line .up { color:var(--good); }

/* ===== Global search overlay ===== */
.search-ov { position:fixed; inset:0; z-index:500; background:rgba(8,12,20,.5); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; }
.search-ov.open { display:flex; }
.search-box { width:100%; max-width:560px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.search-box input { width:100%; border:none; outline:none; background:transparent; color:var(--text); font-size:16px; padding:16px 18px; border-bottom:1px solid var(--border); }
.search-res { max-height:50vh; overflow-y:auto; }
.search-item { width:100%; display:flex; align-items:center; gap:12px; padding:11px 16px; border:none; background:none; cursor:pointer; text-align:left; border-bottom:1px solid var(--border); }
.search-item:hover { background:var(--surface-2); }
.search-tag { flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:3px 8px; border-radius:6px; }
.search-main { display:flex; flex-direction:column; min-width:0; }
.search-main b { color:var(--text); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-main small { color:var(--text-dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-hint { padding:8px 16px; font-size:11px; color:var(--text-dim); background:var(--surface-2); }
@media (max-width:780px){ .search-ov { padding:8vh 10px 10px; } }

/* ===== Authenticator (2FA) ===== */
.auth-grid { display:grid; grid-template-columns:280px 1fr; gap:16px; align-items:start; }
.auth-clockcard { display:flex; flex-direction:column; align-items:center; gap:12px; }
.auth-clock { position:relative; width:200px; height:200px; max-width:100%; aspect-ratio:1; margin:0 auto; cursor:pointer; flex-shrink:0; }
.auth-svg { display:block; width:100%; height:100%; overflow:visible; }
.auth-bg { fill:var(--surface-2); }
.auth-track { stroke:var(--border); }
.auth-arc { stroke:var(--accent); stroke-dasharray:640.885; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear, stroke .5s ease; filter:drop-shadow(0 0 8px var(--accent-soft)); }
.auth-arc.expiring { stroke:var(--warn); }
.auth-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; user-select:none; }
.auth-lbl { font-size:10px; font-weight:600; color:var(--text-dim); letter-spacing:.2em; margin-bottom:6px; }
.auth-digits { font-family:var(--mono); font-size:32px; font-weight:500; color:var(--accent); letter-spacing:.06em; line-height:1; white-space:nowrap; transition:color .4s ease; }
.auth-digits.expiring { color:var(--warn); }
.auth-digits.refreshed { animation:authDigitIn .22s cubic-bezier(.16,1,.3,1) both; }
.auth-digits.copy-flash { color:var(--accent-fg)!important; background:var(--accent); border-radius:6px; padding:2px 8px; }
@keyframes authDigitIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.auth-secs { font-family:var(--mono); font-size:13px; color:var(--text-dim); margin-top:6px; letter-spacing:.05em; }
.auth-hint { font-size:11.5px; margin:0; text-align:center; }
.auth-status { font-size:12px; color:var(--bad); min-height:16px; margin-bottom:6px; }
.auth-saverow { display:flex; gap:8px; }
.auth-saverow input { flex:1; min-width:0; }
.auth-saved { margin-top:18px; border-top:1px solid var(--border); padding-top:12px; }
.auth-saved-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:10px; font-weight:600; color:var(--text-dim); letter-spacing:.2em; margin-bottom:8px; }
.auth-row { display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; cursor:pointer; transition:background .15s; }
.auth-row:hover { background:var(--surface-2); }
.auth-row.is-active { background:var(--accent-soft); }
.auth-dot { width:8px; height:8px; border-radius:50%; border:1px solid var(--text-dim); flex-shrink:0; }
.auth-row.is-active .auth-dot { background:var(--accent); border-color:var(--accent); }
.auth-nm { font-weight:600; font-size:14px; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.auth-go { font-size:12px; color:var(--text-dim); flex-shrink:0; }
.auth-row:hover .auth-go { color:var(--accent); }
.auth-del { background:none; border:none; color:var(--text-dim); padding:4px 6px; font-size:14px; line-height:1; flex-shrink:0; cursor:pointer; }
.auth-del:hover { color:var(--bad); }
.auth-empty { color:var(--text-dim); font-size:13px; padding:14px 0; text-align:center; }
@media (max-width:780px) {
  .auth-grid { grid-template-columns:1fr; }
  .auth-clock { width:180px; height:180px; }
}