:root{
  /* ---------------------------------------------------------------
     Bitwex — visual system.
     The app is a bank statement you can act on, so it is built like a
     printed ledger: hairline rules instead of floating cards, mono
     uppercase eyebrows for every label, and tabular figures throughout.
     Both themes are designed independently and every text colour below
     clears 4.5:1 on the surface it sits on.
     --------------------------------------------------------------- */
  --bg: #FFFFFF; --panel: #FFFFFF; --panel-2: #F2F2F2; --panel-hover: rgba(65,214,84,0.13);
  --line: #E4E4E4; --line-soft: #EFEFEF;
  --text: #111111; --text-dim: #5A5A5A; --text-faint: #666666;
  --shadow: none;
  --white-bg: rgba(17,17,17,0.06);

  /* one accent — signal green — and blue reserved strictly for links */
  --brand: #1D4ED8; --brand-bg: rgba(29,78,216,0.09); --brand-dim: #1740B0;
  /* Two greens, doing different jobs. --accent is a light green used as a
     FILL (buttons, active nav, brand mark) and always carries --accent-ink on
     top. --accent-text is the deep green used when green has to be text on a
     pale surface. Splitting them is what lets the app go bright green without
     losing contrast. */
  --accent: #41D654; --accent-ink: #05310C; --accent-bg: rgba(65,214,84,0.18); --accent-dim: #35C247;
  --accent-text: #157A24;

  /* the sidebar follows the theme rather than staying permanently navy */
  --sidebar-bg: #FFFFFF; --sidebar-bg-2: #F2F2F2; --sidebar-hover: rgba(65,214,84,0.15);
  --sidebar-line: #E4E4E4; --sidebar-text: #5A5A5A; --sidebar-text-dim: #666666;
  --sidebar-brand: #12171D;

  --green: #157A24; --green-bg: rgba(65,214,84,0.20);
  --amber: #8A5A00; --amber-bg: rgba(138,90,0,0.10);
  --orange: #A64B00; --orange-bg: rgba(166,75,0,0.10);
  --red: #B3261E; --red-bg: rgba(179,38,30,0.09); --red-dim: #8F1D17;
  --blue: #1D4ED8; --blue-bg: rgba(29,78,216,0.09);

  /* The sign-in hero carries white text, so its panel must stay dark in BOTH
     themes. It used to inherit --sidebar-bg; once the sidebar went white for
     the light theme, the hero became white text on a white panel and the
     headline vanished. These tokens are deliberately theme-independent. */
  --hero-1: #0F1729; --hero-2: #1A2942;
  --hero-text: #FFFFFF; --hero-text-dim: #A3AFBC;
  --gloss-top: rgba(255,255,255,0.85);
  --gloss-mid: rgba(255,255,255,0.28);
  --gloss-bounce: rgba(17,17,17,0.028);
  --gloss-spec: rgba(255,255,255,0.95);
  --kpi-edge: #FFFFFF;
  --kpi-shadow: 0 1px 2px rgba(17,17,17,0.07), 0 4px 12px rgba(17,17,17,0.06);
  --kpi-shadow-hover: 0 2px 4px rgba(17,17,17,0.09), 0 10px 24px rgba(17,17,17,0.10);
  --mono: 'IBM Plex Mono', Consolas, monospace; --sans: 'Inter', -apple-system, sans-serif;
}
html[data-theme="dark"]{
  --bg: #080C11; --panel: #141B24; --panel-2: #19212B; --panel-hover: rgba(65,214,84,0.13);
  --line: #232E3A; --line-soft: #1A232D;
  --text: #E9EEF3; --text-dim: #A3AFBC; --text-faint: #8A96A3;
  --shadow: none;
  --white-bg: rgba(233,238,243,0.07);

  --brand: #7FA8FF; --brand-bg: rgba(127,168,255,0.14); --brand-dim: #A2C0FF;
  --accent: #41D654; --accent-ink: #05310C; --accent-bg: rgba(65,214,84,0.18); --accent-dim: #62E072;
  --accent-text: #5CDF6D;

  --sidebar-bg: #080B0F; --sidebar-bg-2: #0E141B; --sidebar-hover: rgba(65,214,84,0.15);
  --sidebar-line: #1C242E; --sidebar-text: #A3AFBC; --sidebar-text-dim: #8A96A3;
  --sidebar-brand: #E9EEF3;

  /* Shadows don't read on a dark ground, so depth comes from a raised
     surface plus a highlight along the top edge, with a soft shadow only
     to separate the card from what's behind it. */
  /* On a dark card the sheen has to be subtle: white at even 10% over a
     near-black surface reads as haze rather than shine. */
  --gloss-top: rgba(255,255,255,0.055);
  --gloss-mid: rgba(255,255,255,0.018);
  --gloss-bounce: rgba(255,255,255,0.012);
  --gloss-spec: rgba(255,255,255,0.22);
  --kpi-edge: #2C3A4A;
  --kpi-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.35);
  --kpi-shadow-hover: 0 2px 5px rgba(0,0,0,0.5), 0 12px 28px rgba(0,0,0,0.45);
  --green: #5CDF6D; --green-bg: rgba(65,214,84,0.18);
  --amber: #E8B44F; --amber-bg: rgba(232,180,79,0.14);
  --orange: #F0A46A; --orange-bg: rgba(240,164,106,0.14);
  --red: #FF7A73; --red-bg: rgba(255,122,115,0.14); --red-dim: #FF9A94;
  --blue: #7FA8FF; --blue-bg: rgba(127,168,255,0.14);
}
/* ---- icons ----
   Material Symbols, mapped onto Tabler class names. The design was drawn
   against these shapes, so switching the font back to Tabler would change
   every icon in the app even though the markup is identical. Keeping the
   ti-* class names means no markup has to change either way.
   Any ti-* class with no mapping renders as nothing rather than as stray
   text, which is why the fallback rule below is here. ---- */
.ti{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;display:inline-block;line-height:1;-webkit-font-smoothing:antialiased;overflow:hidden;white-space:nowrap;vertical-align:middle;}
/* Default for any ti-* class with no mapping: render nothing rather
   than falling through and printing the ligature name as text. Must come
   BEFORE the mappings below, which have equal specificity and would
   otherwise be overridden by source order. */
.ti::before{content:"";}
.ti-alert-circle::before{content:"error";}
.ti-alert-triangle::before{content:"warning";}
.ti-bell::before{content:"notifications";}
.ti-palette::before{content:"palette";}
.ti-plug::before{content:"cable";}
.ti-arrow-left::before{content:"arrow_back";}
.ti-calendar::before{content:"event";}
.ti-cash::before{content:"payments";}
.ti-cash-banknote::before{content:"payments";}
.ti-chart-line::before{content:"show_chart";}
.ti-check::before{content:"check";}
.ti-chevron-right::before{content:"chevron_right";}
.ti-chevron-left::before{content:"chevron_left";}
.ti-map-pin::before{content:"location_on";}
.ti-clock::before{content:"schedule";}
.ti-cloud-upload::before{content:"cloud_upload";}
.ti-edit::before{content:"edit";}
.ti-flame::before{content:"local_fire_department";}
.ti-info-circle::before{content:"info";}
.ti-layout-dashboard::before{content:"dashboard";}
.ti-moon::before{content:"dark_mode";}
.ti-percentage::before{content:"percent";}
.ti-receipt::before{content:"receipt_long";}
.ti-search::before{content:"search";}
.ti-settings::before{content:"settings";}
.ti-shield-check::before{content:"verified_user";}
.ti-sun::before{content:"light_mode";}
.ti-tool::before{content:"build";}
.ti-upload::before{content:"upload";}
.ti-user-circle::before{content:"account_circle";}
.ti-users::before{content:"group";}

.ti-plug-off::before{content:"power_off";}
.ti-router::before{content:"router";}
.ti-plus::before{content:"add";}
.ti-box::before{content:"inventory_2";}
.ti-wifi::before{content:"wifi";}
.ti-trash::before{content:"delete";}
.ti-download::before{content:"download";}
.ti-x::before{content:"close";}
.ti-refresh::before{content:"refresh";}
.ti-file-text::before{content:"description";}
.ti-filter::before{content:"filter_alt";}
.ti-calendar-event::before{content:"event";}
.ti-phone::before{content:"call";}
.ti-mail::before{content:"mail";}
.ti-lock::before{content:"lock";}
.ti-logout::before{content:"logout";}
.ti-eye::before{content:"visibility";}
.ti-arrow-right::before{content:"arrow_forward";}
.ti-chevron-down::before{content:"expand_more";}
.ti-database::before{content:"database";}


*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html,body{background:var(--bg);}
body{color:var(--text);font-family:var(--sans);min-height:100vh;font-size:14px;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--sans);cursor:pointer;}
input,select,textarea{font-family:var(--sans);}

/* ---- icon font shim: Material Symbols standing in for the real app's
   Tabler Icons (blocked here since this preview only lives on cdnjs for
   scripts, not stylesheets) - same class names, so zero markup changes
   versus the real app. ---- */
.preview-banner{background:var(--panel-2);border-bottom:1px solid var(--line);color:var(--text-dim);font-size:12px;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;position:relative;z-index:20;}
.preview-banner b{color:var(--text);}
.preview-banner button{background:transparent;border:1px solid var(--line);color:var(--text-dim);border-radius:6px;padding:3px 9px;font-size:11px;}
.preview-banner button:hover{color:var(--text);border-color:var(--text-faint);}

/* ---- login (full-bleed split screen: hero panel + form panel, each fills the viewport) ---- */
.login-screen{min-height:100vh;display:flex;}
.login-box{width:100%;display:flex;}
.login-hero{flex:0 0 60%;max-width:60%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px 52px;color:var(--hero-text);
  background:radial-gradient(circle at 82% 18%, rgba(255,255,255,0.08), transparent 55%), linear-gradient(160deg,var(--hero-1),var(--hero-2));background-size:cover;background-position:center;}
.login-hero.has-image .login-hero-shapes{display:none;}
.login-hero-shapes{position:absolute;inset:0;pointer-events:none;}
.login-hero-shapes .shape{position:absolute;opacity:0.9;}
.login-hero-shapes .shape-blob{border-radius:38% 62% 63% 37%/41% 44% 56% 59%;}
.login-hero-shapes .shape-dot{border-radius:50%;}
.login-hero-shapes .shape-square{border-radius:7px;transform:rotate(14deg);}
.login-network{position:absolute;right:-30px;bottom:-16px;width:72%;max-width:430px;opacity:0.85;}
.login-network .pulse{animation:loginPulse 2.6s ease-out infinite;}
@keyframes loginPulse{0%{r:3;opacity:0.9;}75%{r:11;opacity:0;}100%{r:11;opacity:0;}}
@media (prefers-reduced-motion: reduce){ .login-network .pulse{animation:none;} }
.login-hero-top{display:flex;align-items:center;gap:10px;position:relative;z-index:2;}
.login-hero-top .brand-name{color:var(--hero-text);font-size:14.5px;}
.login-hero-top .brand-sub{color:var(--hero-text-dim);}
.login-hero-headline{position:relative;z-index:2;}
.login-hero-headline h1{font-size:30px;line-height:1.2;font-weight:600;color:var(--hero-text);text-wrap:balance;margin-bottom:12px;}
.login-hero-headline p{font-size:13.5px;color:var(--hero-text-dim);max-width:380px;line-height:1.55;}
.login-form-side{flex:0 0 40%;max-width:40%;display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg);min-width:0;}
.login-card{width:100%;max-width:360px;}
.login-card-title{font-size:21px;font-weight:600;margin-bottom:4px;}
.login-card-sub{font-size:13px;color:var(--text-dim);margin-bottom:22px;}
.login-error{background:var(--red-bg);color:var(--red);border-radius:8px;padding:8px 10px;font-size:12.5px;margin-bottom:8px;}
.login-hint{font-size:12px;color:var(--text-faint);margin-top:20px;line-height:1.5;}
.login-hint b{color:var(--text-dim);}
@media (max-width:860px){ .login-hero{display:none;} .login-form-side{flex:1;max-width:none;padding:24px;} }

/* ---- shell ---- */
.app-shell{display:flex;}
.sidebar{width:236px;flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-line);display:flex;flex-direction:column;padding:20px 12px;height:100vh;position:sticky;top:0;overflow-y:auto;}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;}
.brand-icon{width:30px;height:30px;border-radius:4px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0;overflow:hidden;}
.brand-icon img{width:100%;height:100%;object-fit:cover;border-radius:4px;}
.brand-name{font-weight:600;font-size:14px;line-height:1.2;color:var(--sidebar-brand);letter-spacing:-0.01em;}
.brand-sub{font-family:var(--mono);font-size:9.5px;color:var(--sidebar-text-dim);margin-top:3px;text-transform:uppercase;letter-spacing:0.14em;}
.nav-section{margin-bottom:4px;}
/* active nav is a ledger mark in the margin, not a filled block */
.nav-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-radius:4px;color:var(--sidebar-text);font-size:13px;cursor:pointer;margin-bottom:1px;transition:color .12s,background .12s;}
.nav-item i{font-size:17px;width:18px;text-align:center;flex-shrink:0;}
.nav-item:hover{background:var(--sidebar-hover);color:var(--accent-text);}
.nav-item.active{background:var(--accent);color:var(--accent-ink);font-weight:600;}
.nav-item.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--accent-text);}
.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.sidebar-divider{height:1px;background:var(--sidebar-line);margin:14px 4px;}
.integration-box{background:var(--sidebar-bg-2);border:1px solid var(--sidebar-line);border-radius:4px;padding:12px;margin-top:auto;}
.integration-box .ib-title{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:8px;display:flex;align-items:center;gap:6px;color:var(--text-dim);}
.integration-box .btn-secondary{background:transparent;border:1px solid var(--sidebar-line);color:var(--text);}
.upload-status{font-size:10.5px;color:var(--sidebar-text-dim);padding:0 2px;line-height:1.6;}

.main{flex:1;min-width:0;}
/* top:0, not 37px. The 37px was room for the preview's local-build banner,
   which the real app doesn't have -- it left the sticky bar floating below
   the viewport top so page content scrolled up into the gap and sat behind
   it. Same offset that broke the login screen's height. */
.topbar{display:flex;align-items:center;gap:14px;padding:14px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5;}
.page-title{font-size:19px;font-weight:600;letter-spacing:-0.02em;}
.page-sub{font-family:var(--mono);font-size:10px;color:var(--text-faint);margin-top:3px;text-transform:uppercase;letter-spacing:0.12em;}
.topbar-search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:7px 12px;width:230px;flex-shrink:0;}
.topbar-search i{font-size:16px;color:var(--text-faint);}
.topbar-search input{background:transparent;border:none;outline:none;color:var(--text);flex:1;font-size:12.5px;min-width:0;}
.topbar-right{flex:1;display:flex;justify-content:flex-end;gap:10px;align-items:center;}
.icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;color:var(--text-dim);cursor:pointer;border:1px solid transparent;flex-shrink:0;}
.icon-btn i{font-size:18px;}
.icon-btn:hover{background:var(--panel-hover);color:var(--accent-text);}
.avatar{width:28px;height:28px;border-radius:4px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;}
.theme-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);cursor:pointer;border:1px solid var(--line);border-radius:4px;padding:6px 11px;flex-shrink:0;}
.theme-toggle:hover{border-color:var(--accent-text);color:var(--accent-text);}
.page-content{padding:26px 28px 60px;}

.greeting-band{position:relative;border-radius:14px;padding:26px 24px;margin-bottom:18px;overflow:hidden;background:linear-gradient(120deg,var(--panel-2),var(--panel));border:1px solid var(--line);}
.greeting-band::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);background-size:20px 20px;-webkit-mask-image:linear-gradient(to right, black, transparent 75%);mask-image:linear-gradient(to right, black, transparent 75%);}
.greeting-band-inner{position:relative;display:flex;align-items:center;gap:14px;}
.greeting-avatar{width:44px;height:44px;border-radius:10px;background:var(--brand-bg);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;flex-shrink:0;}
.greeting-title{font-size:19px;font-weight:600;}
.greeting-sub{font-size:12.5px;color:var(--text-dim);margin-top:2px;}
.greeting-band.has-photo{border-color:transparent;}
.greeting-band.has-photo::before{display:none;}
.greeting-band.has-photo .greeting-title{color:#fff;}
.greeting-band.has-photo .greeting-sub{color:rgba(255,255,255,0.85);}
.greeting-band.has-photo .greeting-avatar{background:rgba(255,255,255,0.18);color:#fff;}

/* ---- settings: label/control rows + toggle switch (used by General Settings) ---- */
.settings-row{display:flex;align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid var(--line-soft);}
.settings-row:hover .sr-label{color:var(--accent-text);}
.settings-row:last-child{border-bottom:none;}
.settings-row .sr-label{width:190px;flex-shrink:0;font-size:13px;color:var(--text-dim);}
.settings-row .sr-label small{display:block;color:var(--text-faint);font-size:11px;margin-top:2px;font-weight:400;}
.settings-row .sr-control{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.summary-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px;}
.summary-row:last-child{border-bottom:none;}
.summary-row span:last-child{color:var(--text-dim);font-family:var(--mono,monospace);}
.switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch .slider{position:absolute;inset:0;background:var(--line);border-radius:20px;cursor:pointer;transition:background .15s;}
.switch .slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px rgba(20,29,51,0.3);}
.switch input:checked + .slider{background:var(--accent);}
.switch input:checked + .slider::before{transform:translateX(16px);}
.logo-thumb{width:44px;height:44px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:16px;font-weight:700;color:var(--text-dim);flex-shrink:0;}
.logo-thumb img{width:100%;height:100%;object-fit:cover;}
.banner-thumb{width:120px;height:44px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:10.5px;}
.banner-thumb img{width:100%;height:100%;object-fit:cover;}

/* ---- generic components ----
   Panels are sheets of a ledger: hairline border, minimal radius, no
   shadow. Every section label and column head is a mono eyebrow, which is
   the one consistent signature across the whole app. ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:18px;margin-bottom:16px;}
.panel-title{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;color:var(--text-faint);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);}

/* ---- KPI cards ----
   Separate raised blocks rather than one banded strip. The depth comes from
   two stacked shadows -- a tight contact shadow and a wider soft one -- plus
   a light top border, which is how a real object catches light. A single
   large blur just looks blurry.

   Dark themes need a different trick: shadows are invisible on a dark ground,
   so lift comes from a lighter surface and a highlight on the top edge. */
/* 190px left six cards wrapping to a second row with one orphan. 158px fits
   all six across a typical desktop and still wraps sensibly when narrower. */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:22px;}
.kpi-card{
  position:relative;overflow:hidden;
  /* Gloss: a vertical sheen over the card surface. Light falls off fast down
     the face and there is a faint bounce at the very bottom, which is what a
     glass or lacquered panel actually does -- a flat 50% overlay reads as fog. */
  background:
    linear-gradient(180deg, var(--gloss-top) 0%, var(--gloss-mid) 42%, transparent 78%, var(--gloss-bounce) 100%),
    var(--panel);
  border:1px solid var(--line);border-top-color:var(--kpi-edge);
  border-radius:10px;padding:16px 18px;
  box-shadow:var(--kpi-shadow);
  transition:transform .14s ease, box-shadow .14s ease;
}
/* A specular highlight sitting just inside the top edge, brightest in the
   middle and fading at the corners, so the shine has a source rather than
   being a uniform band. */
.kpi-card::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--gloss-spec), transparent);
}
.kpi-card:hover{ transform:translateY(-2px); box-shadow:var(--kpi-shadow-hover); }
.kpi-card .kpi-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:12px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.06);}
/* clamp, not a fixed size: a value like R165,650.00 is eleven monospace
   characters and overflowed the card at 24px once six cards shared the row.
   It scales with the viewport and stops shrinking before it gets unreadable. */
.kpi-card .kpi-value{font-family:var(--mono);font-size:clamp(17px,1.45vw,23px);font-weight:500;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.kpi-card .kpi-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-faint);margin-top:6px;}
.kpi-card .kpi-sub{font-size:11.5px;color:var(--text-dim);margin-top:5px;}
@media (prefers-reduced-motion: reduce){ .kpi-card:hover{transform:none;} }

.progress-bar{height:5px;border-radius:0;background:var(--panel-2);overflow:hidden;display:flex;margin:12px 0 8px;}
.progress-bar span{height:100%;display:block;}

table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-family:var(--mono);color:var(--text-faint);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:0.12em;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
td{padding:11px 12px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;color:var(--text);vertical-align:top;}
tbody tr:hover td{background:var(--panel-hover);}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}

.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;padding:3px 8px;border-radius:3px;white-space:nowrap;}
.pill.green{background:var(--green-bg);color:var(--green);}
.pill.amber{background:var(--amber-bg);color:var(--amber);}
.pill.orange{background:var(--orange-bg);color:var(--orange);}
.pill.red{background:var(--red-bg);color:var(--red);}
.pill.blue{background:var(--blue-bg);color:var(--blue);}
.pill.gray{background:var(--white-bg);color:var(--text-dim);}

.btn-primary{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:4px;padding:9px 16px;font-size:13px;font-weight:600;}
.btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim);}
.btn-secondary{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:4px;padding:9px 16px;font-size:13px;}
.btn-secondary:hover{border-color:var(--accent-text);color:var(--accent-text);background:var(--panel-hover);}
.btn-sm{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:3px;padding:5px 10px;font-size:12px;white-space:nowrap;}
.btn-sm:hover{border-color:var(--accent-text);color:var(--accent-text);background:var(--panel-hover);}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.nav-item:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.form-row{margin-bottom:14px;}
.form-row label{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-faint);margin-bottom:6px;}
.form-row input,.form-row select,.form-row textarea{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:9px 11px;color:var(--text);font-size:13px;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--accent);}
.form-row textarea{min-height:70px;resize:vertical;}
.form-actions{display:flex;gap:10px;margin-top:8px;}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:4px;color:var(--text);}
input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],select{padding:8px 10px;font-size:13px;}
input::placeholder,textarea::placeholder{color:var(--text-faint);}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.searchbar{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:8px 12px;flex:1;min-width:200px;}
.searchbar input{background:transparent;border:none;outline:none;color:var(--text);flex:1;font-size:13px;}
.filter-select{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:8px 10px;color:var(--text);font-size:13px;}

.tabs{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.tab{padding:9px 14px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-faint);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab:hover{color:var(--accent-text);}
.tab.active{color:var(--accent-text);border-bottom-color:var(--accent);}

.empty-state{text-align:center;padding:44px 20px;color:var(--text-dim);font-size:13px;}
.empty-state i{font-size:26px;display:block;margin-bottom:12px;color:var(--text-faint);}

.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--line);border-radius:4px;padding:30px;cursor:pointer;color:var(--text-dim);font-size:12.5px;text-align:center;background:var(--panel-2);}
.upload-zone:hover{border-color:var(--accent);}
.upload-zone i{font-size:22px;}
.upload-zone .uz-title{color:var(--text);font-weight:500;font-size:13px;}
.upload-zone input{display:none;}

/* an explanatory note carries a green ledger edge, matching the nav mark */
.caveat-note{display:flex;gap:9px;background:var(--panel-2);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0 4px 4px 0;padding:11px 13px;font-size:12.5px;color:var(--text-dim);line-height:1.55;}
.caveat-note i{color:var(--accent-text);flex-shrink:0;}

.modal-backdrop{position:fixed;inset:0;background:rgba(10,14,19,0.55);display:flex;align-items:center;justify-content:center;z-index:50;}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:22px;width:420px;max-width:92vw;max-height:88vh;overflow-y:auto;box-shadow:0 24px 70px rgba(10,14,19,0.35);}
.modal-title{font-size:15px;font-weight:600;letter-spacing:-0.01em;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);}

.toast{position:fixed;bottom:20px;right:20px;background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--text-dim);border-radius:0 4px 4px 0;padding:12px 16px;font-size:13px;box-shadow:0 8px 28px rgba(10,14,19,0.22);z-index:100;max-width:340px;}
.toast.error{border-left-color:var(--red);color:var(--red);}
.toast.ok{border-left-color:var(--accent);color:var(--accent-text);}

.link-btn{color:var(--brand);cursor:pointer;font-size:12.5px;}
.link-btn:hover{text-decoration:underline;}
.money{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em;white-space:nowrap;}
.nowrap{white-space:nowrap;}
.confirm-facts{border:1px solid var(--line);border-radius:4px;margin-bottom:16px;}
.confirm-facts > div{display:flex;gap:14px;padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px;}
.confirm-facts > div:last-child{border-bottom:none;}
.confirm-facts span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-faint);width:88px;flex-shrink:0;padding-top:2px;}
.confirm-facts b{font-weight:500;min-width:0;overflow-wrap:anywhere;}
.warn-note{display:flex;gap:9px;background:var(--amber-bg);border-left:2px solid var(--amber);border-radius:0 4px 4px 0;padding:11px 13px;font-size:12.5px;color:var(--text);line-height:1.55;margin-bottom:16px;}
.warn-note i{color:var(--amber);flex-shrink:0;}
.cell-actions{display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end;}
td:last-child{white-space:nowrap;}
.muted{color:var(--text-dim);}
.faint{color:var(--text-faint);font-size:11.5px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:800px){ .grid-2{grid-template-columns:1fr;} .topbar-search{display:none;} }
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important;} }