/* Manual Boosts HQ — design system.
   One stylesheet, no framework. Dark by default, light available.
   Every colour is a token so the whole product can be re-skinned in one place.

   House rules for anyone editing this file:
     - Nothing here may be renamed. The three view files address these class
       names directly, so a rename is an outage. Restyle freely, add freely,
       never remove.
     - Physical directions (left/right, translateX, inset box-shadows) must
       come with a body.rtl counterpart. Urdu flips the whole shell.
     - Numbers get tabular figures. A column of money that jitters while it
       counts up looks cheap. */

/* ============================================================== tokens */

:root {
  /* surfaces — each step is a real elevation, not just a lighter grey */
  --bg:            #080b11;
  --bg-2:          #0c1017;
  --surface:       #121824;
  --surface-2:     #18202e;
  --surface-3:     #202a3b;
  --line:          #2a3346;
  --line-soft:     #1e2634;

  /* text */
  --text:          #eaeff8;
  --text-2:        #9dabc3;
  --text-3:        #66748e;

  /* brand */
  --gold:          #f5b544;
  --gold-dim:      #a97d2a;
  --blue:          #5b83ff;
  --blue-dim:      #2b4ba8;
  --violet:        #8b6cf0;

  /* state */
  --good:          #35d0a5;
  --good-dim:      #1c7a62;
  --warn:          #f2a33c;
  --bad:           #ff5f6d;
  --bad-dim:       #a1303a;
  --info:          #49b6e8;

  /* tinted washes — used for badges, chips, accent bars, hover states.
     Kept as tokens so the light theme can dial them up without every
     rgba() in the file being rewritten. */
  --wash-blue:     rgba(91,131,255,.13);
  --wash-gold:     rgba(245,181,68,.13);
  --wash-good:     rgba(53,208,165,.12);
  --wash-warn:     rgba(242,163,60,.13);
  --wash-bad:      rgba(255,95,109,.12);
  --wash-violet:   rgba(139,108,240,.13);
  --edge-blue:     rgba(91,131,255,.26);
  --edge-gold:     rgba(245,181,68,.26);
  --edge-good:     rgba(53,208,165,.24);
  --edge-warn:     rgba(242,163,60,.26);
  --edge-bad:      rgba(255,95,109,.24);
  --edge-violet:   rgba(139,108,240,.26);

  /* on-tint text: a wash is too dark to carry the pure brand colour */
  --on-blue:       #a8bfff;
  --on-violet:     #bda9ff;
  --on-bad:        #ff909a;

  --radius:        14px;
  --radius-sm:     10px;
  --radius-lg:     20px;

  /* elevation scale. e0 sits on the page, e3 floats above everything. */
  --e0:            0 0 0 1px rgba(0,0,0,.14);
  --e1:            0 1px 2px rgba(0,0,0,.30), 0 3px 10px rgba(0,0,0,.20);
  --e2:            0 2px 5px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.28);
  --e3:            0 6px 14px rgba(0,0,0,.34), 0 26px 62px rgba(0,0,0,.44);
  --shadow:        var(--e3);
  --shadow-sm:     var(--e1);

  /* the hairline of light along the top edge of a raised surface — the one
     detail that stops a card reading as a painted rectangle */
  --card-hi:       inset 0 1px 0 rgba(255,255,255,.045);
  --card-hi-2:     inset 0 1px 0 rgba(255,255,255,.07);

  --ring:          0 0 0 3px rgba(91,131,255,.28);
  --zebra:         rgba(255,255,255,.016);
  --scrim:         rgba(3,5,9,.66);

  /* page-background glows. Very low alpha on purpose: they should be felt,
     not seen, and they are what makes cards read as floating. */
  --glow-1:        rgba(91,131,255,.10);
  --glow-2:        rgba(245,181,68,.055);
  --glow-3:        rgba(139,108,240,.05);

  --sidebar-w:     252px;
  --topbar-h:      64px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", ui-monospace, monospace;

  /* type scale — a fourth-ish ratio, rounded to whole-ish pixels so text
     lands on the pixel grid at 100% zoom */
  --fs-micro:  11px;
  --fs-xs:     12px;
  --fs-sm:     13px;
  --fs-md:     14px;
  --fs-base:   15px;
  --fs-lg:     17px;
  --fs-xl:     21px;
  --fs-2xl:    27px;
  --fs-3xl:    34px;
  --fs-4xl:    42px;

  /* line-heights: tight for display, generous for reading */
  --lh-tight:  1.12;
  --lh-snug:   1.32;
  --lh-body:   1.55;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-back: cubic-bezier(.34,1.4,.64,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
}

html { color-scheme: dark; }

html[data-theme="light"] {
  color-scheme: light;

  --bg:        #eef1f7;
  --bg-2:      #e7ebf4;
  --surface:   #ffffff;
  --surface-2: #f4f7fc;
  --surface-3: #e9eef7;
  --line:      #d3dae8;
  --line-soft: #e3e8f2;
  --text:      #10141f;
  --text-2:    #545f78;
  --text-3:    #7d879e;

  --blue:      #3862f0;
  --gold:      #c98a12;
  --good:      #0f9e79;
  --bad:       #dc2f42;
  --warn:      #c9791a;
  --violet:    #6c4fdb;

  --wash-blue:   rgba(56,98,240,.09);
  --wash-gold:   rgba(201,138,18,.11);
  --wash-good:   rgba(15,158,121,.10);
  --wash-warn:   rgba(201,121,26,.11);
  --wash-bad:    rgba(220,47,66,.09);
  --wash-violet: rgba(108,79,219,.09);
  --edge-blue:   rgba(56,98,240,.22);
  --edge-gold:   rgba(201,138,18,.26);
  --edge-good:   rgba(15,158,121,.22);
  --edge-warn:   rgba(201,121,26,.26);
  --edge-bad:    rgba(220,47,66,.22);
  --edge-violet: rgba(108,79,219,.22);

  --on-blue:   #2b51d6;
  --on-violet: #5a3fc4;
  --on-bad:    #c62436;

  --e0: 0 0 0 1px rgba(20,30,60,.05);
  --e1: 0 1px 2px rgba(20,30,60,.06), 0 2px 8px rgba(20,30,60,.06);
  --e2: 0 2px 4px rgba(20,30,60,.06), 0 10px 26px rgba(20,30,60,.09);
  --e3: 0 6px 12px rgba(20,30,60,.08), 0 24px 56px rgba(20,30,60,.14);

  --card-hi:   inset 0 1px 0 rgba(255,255,255,.9);
  --card-hi-2: inset 0 1px 0 rgba(255,255,255,1);

  --ring:   0 0 0 3px rgba(56,98,240,.22);
  --zebra:  rgba(16,26,48,.022);
  --scrim:  rgba(24,32,52,.42);

  --glow-1: rgba(56,98,240,.07);
  --glow-2: rgba(201,138,18,.05);
  --glow-3: rgba(108,79,219,.045);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The page itself is never flat. Three very soft glows, fixed to the
   viewport, give the whole app a light source so every card has something
   to sit on top of. */
body {
  background-image:
    radial-gradient(1180px 680px at 84% -14%, var(--glow-1), transparent 62%),
    radial-gradient(920px 560px at -8% 106%, var(--glow-2), transparent 58%),
    radial-gradient(700px 700px at 50% 44%, var(--glow-3), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.rtl { direction: rtl; }
body.rtl .flip { transform: scaleX(-1); }

h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: -.02em; margin: 0 0 .4em; }

a { color: var(--blue); text-decoration: none; transition: color .15s var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ring); }

::selection { background: rgba(245,181,68,.28); color: var(--text); }

/* scrollbars — thin, and they only show up once there is something to scroll */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---------------------------------------------------------- utilities */

.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }
.center { display: grid; place-items: center; }
.hide { display: none !important; }
.nowrap { white-space: nowrap; }
.tr { text-align: right; }
.tc { text-align: center; }
.mono {
  font-family: var(--mono); font-size: .92em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: var(--fs-sm); line-height: 1.5; }
.tiny {
  font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.big {
  font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.025em;
  line-height: var(--lh-tight); font-variant-numeric: tabular-nums;
}
.huge {
  font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.04; font-variant-numeric: tabular-nums;
}
.b { font-weight: 650; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.gold { color: var(--gold); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gap-lg { gap: 18px; }
.mt { margin-top: 14px; }
.mt-lg { margin-top: 24px; }
.mb { margin-bottom: 14px; }

/* vertical rhythm helper — one gap value instead of a stack of .mt */
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack.xs { gap: 5px; }
.stack.sm { gap: 9px; }
.stack.lg { gap: 22px; }
.stack.xl { gap: 32px; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }

/* ------------------------------------------------------------- shell */

.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 200px),
    linear-gradient(180deg, var(--bg-2), var(--bg) 78%);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  z-index: 40;
  /* a faint inner edge so the sidebar reads as a panel, not a gap */
  box-shadow: inset -1px 0 0 rgba(255,255,255,.02);
}
body.rtl .sidebar {
  border-right: none; border-left: 1px solid var(--line-soft);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.02);
}

.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 17px 16px 16px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 2;
  background: inherit;
  backdrop-filter: blur(8px);
}
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  background: linear-gradient(140deg, #ffd26b, var(--gold) 42%, #e2762e);
  display: grid; place-items: center;
  font-weight: 900; color: #241703; font-size: var(--fs-base);
  letter-spacing: -.02em;
  box-shadow:
    0 4px 14px rgba(245,181,68,.26),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.16);
}
.brand-name {
  font-weight: 750; letter-spacing: -.017em; line-height: 1.18;
  font-size: 14.6px;
}
.brand-sub { font-size: var(--fs-micro); color: var(--text-3); letter-spacing: .01em; }

.nav { padding: 10px 10px 16px; display: flex; flex-direction: column; gap: 2px; }

/* Section headers are labels, not shouting. The specificity here beats the
   .tiny the nav builder also puts on them. */
.nav-group,
.nav-group.tiny {
  margin: 16px 0 4px; padding: 0 11px 4px;
  font-size: var(--fs-xs); font-weight: 650;
  text-transform: none; letter-spacing: .01em;
  color: var(--text-3);
  display: flex; align-items: center; gap: 9px;
}
.nav-group::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(to right, var(--line-soft), transparent);
}
body.rtl .nav-group::after { background: linear-gradient(to left, var(--line-soft), transparent); }
.nav > .nav-group:first-child { margin-top: 4px; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 560; font-size: 14.2px;
  cursor: pointer; position: relative;
  border: 1px solid transparent;
  transition:
    background .18s var(--ease), color .18s var(--ease),
    transform .18s var(--ease), border-color .18s var(--ease);
  text-decoration: none;
}
.nav-item:hover {
  background: var(--surface); color: var(--text); text-decoration: none;
  transform: translateX(2px);
}
body.rtl .nav-item:hover { transform: translateX(-2px); }
.nav-item:focus-visible { outline: none; box-shadow: var(--ring); }
.nav-item:active { transform: translateX(1px) scale(.995); }
body.rtl .nav-item:active { transform: translateX(-1px) scale(.995); }

.nav-item.active {
  background:
    linear-gradient(to right, var(--wash-gold), transparent 66%),
    var(--surface-2);
  color: var(--text); font-weight: 640;
  border-color: var(--line-soft);
  box-shadow: var(--card-hi);
  transform: none;
}
body.rtl .nav-item.active {
  background:
    linear-gradient(to left, var(--wash-gold), transparent 66%),
    var(--surface-2);
}
.nav-item.active::before {
  content: ''; position: absolute; inset-inline-start: -11px; top: 50%;
  width: 3px; height: 22px; margin-top: -11px;
  background: linear-gradient(180deg, #ffd98a, var(--gold));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(245,181,68,.55);
  animation: navPop .3s var(--ease-out-back);
}
body.rtl .nav-item.active::before { border-radius: 3px 0 0 3px; }
@keyframes navPop { from { height: 0; margin-top: 0; opacity: 0; } }

.nav-item .ico {
  width: 20px; text-align: center; opacity: .78; flex: none;
  font-size: var(--fs-md);
  transition: opacity .18s var(--ease), transform .22s var(--ease-out-back);
}
.nav-item:hover .ico { opacity: 1; transform: scale(1.1); }
.nav-item.active .ico { opacity: 1; }

.nav-badge {
  margin-inline-start: auto;
  background: linear-gradient(180deg, #ff7079, var(--bad));
  color: #fff;
  font-size: var(--fs-micro); font-weight: 750; min-width: 20px; height: 20px;
  border-radius: 10px; display: grid; place-items: center; padding: 0 6px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(255,95,109,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.nav-badge.soft {
  background: var(--surface-3); color: var(--text-2);
  box-shadow: none; font-weight: 700;
}

.sidebar-foot {
  margin-top: auto; padding: 12px;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.12));
}

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  position: sticky; top: 0; z-index: 30;
}
.page-title {
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.22;
}
.page-sub { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.35; }

.content {
  padding: 24px 22px 60px; max-width: 1520px; width: 100%;
  animation: fadeUp .34s var(--ease) backwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(9px); } }

/* --------------------------------------------------------------- card */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--e1), var(--card-hi);
  position: relative;
  transition:
    border-color .22s var(--ease), box-shadow .22s var(--ease),
    transform .22s var(--ease), background .22s var(--ease);
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; min-height: 26px;
}
.card-title {
  font-weight: 680; font-size: var(--fs-base); letter-spacing: -.017em;
  line-height: var(--lh-snug);
}
.card-head .card-title + .small,
.card-head .card-title + .muted { line-height: 1.3; }

.card.hover { cursor: default; }
.card.hover:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: var(--e2), var(--card-hi-2);
}

/* Accent bars. Leading edge, logical border so Urdu flips it for free.
   The padding compensates for the extra 2px so content never shifts. */
.card.accent-blue,
.card.accent-gold,
.card.accent-good,
.card.accent-bad,
.card.accent-warn,
.card.accent-violet {
  border-inline-start-width: 3px;
  padding-inline-start: 16px;
}
.card.accent-blue   { border-inline-start-color: var(--blue); }
.card.accent-gold   { border-inline-start-color: var(--gold); }
.card.accent-good   { border-inline-start-color: var(--good); }
.card.accent-bad    { border-inline-start-color: var(--bad); }
.card.accent-warn   { border-inline-start-color: var(--warn); }
.card.accent-violet { border-inline-start-color: var(--violet); }

/* A tinted wash behind the accent makes the bar read as deliberate rather
   than as a stray border. */
.card.accent-blue::before,
.card.accent-gold::before,
.card.accent-good::before,
.card.accent-bad::before,
.card.accent-warn::before,
.card.accent-violet::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  opacity: .55;
}
.card.accent-blue::before   { background: linear-gradient(to right, var(--wash-blue), transparent 42%); }
.card.accent-gold::before   { background: linear-gradient(to right, var(--wash-gold), transparent 42%); }
.card.accent-good::before   { background: linear-gradient(to right, var(--wash-good), transparent 42%); }
.card.accent-bad::before    { background: linear-gradient(to right, var(--wash-bad), transparent 42%); }
.card.accent-warn::before   { background: linear-gradient(to right, var(--wash-warn), transparent 42%); }
.card.accent-violet::before { background: linear-gradient(to right, var(--wash-violet), transparent 42%); }
body.rtl .card[class*="accent-"]::before { transform: scaleX(-1); }

/* pad-0 comes last so it wins over the accent padding above */
.card.pad-0 { padding: 0; overflow: hidden; }
.card.pad-0.accent-blue,
.card.pad-0.accent-gold,
.card.pad-0.accent-good,
.card.pad-0.accent-bad,
.card.pad-0.accent-warn,
.card.pad-0.accent-violet { padding-inline-start: 0; }

/* Staggered entrance for tiles in a grid. Only cards — a grid of form
   fields flickering in would be irritating, not premium. `backwards` fill
   is deliberate: `both` would pin the final transform and kill :hover. */
.grid > .card { animation: cardIn .46s var(--ease) backwards; }
.grid > .card:nth-child(1) { animation-delay: .02s; }
.grid > .card:nth-child(2) { animation-delay: .06s; }
.grid > .card:nth-child(3) { animation-delay: .10s; }
.grid > .card:nth-child(4) { animation-delay: .14s; }
.grid > .card:nth-child(5) { animation-delay: .18s; }
.grid > .card:nth-child(6) { animation-delay: .22s; }
.grid > .card:nth-child(7) { animation-delay: .26s; }
.grid > .card:nth-child(8) { animation-delay: .30s; }
.grid > .card:nth-child(n+9) { animation-delay: .32s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(.988); } }

/* ---------------------------------------------------------- stat tile */

/* Markup: .card.stat > .label, .value.count, .row > (.sub, .delta)
   Optionally a .tile-ico as the first child. */
.stat { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.stat .label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .075em;
  color: var(--text-3); font-weight: 700; line-height: 1.3;
}
.stat .value {
  font-size: 30px; font-weight: 760; letter-spacing: -.032em;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  /* the count-up rewrites this node every frame — reserve the height so the
     tile never jumps from "0" to "$1,240.00" */
  min-height: 34px; display: flex; align-items: center;
}
.stat .sub { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.4; }
.value { font-variant-numeric: tabular-nums; }

/* a soft top-corner glow: the tile catches the page light source */
.stat::after {
  content: ''; position: absolute; top: 0; inset-inline-end: 0;
  width: 140px; height: 90px; pointer-events: none;
  background: radial-gradient(90px 60px at 100% 0%, rgba(255,255,255,.035), transparent 70%);
}
html[data-theme="light"] .stat::after { display: none; }

.stat > .tile-ico { margin-bottom: 4px; }

/* 36px tinted icon slot */
.tile-ico {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  font-size: var(--fs-lg); line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--text-2);
  box-shadow: var(--card-hi);
}
.tile-ico.sm { width: 28px; height: 28px; border-radius: 9px; font-size: var(--fs-sm); }
.tile-ico.lg { width: 46px; height: 46px; border-radius: 14px; font-size: var(--fs-xl); }
.tile-ico.blue   { background: var(--wash-blue);   border-color: var(--edge-blue);   color: var(--on-blue); }
.tile-ico.gold   { background: var(--wash-gold);   border-color: var(--edge-gold);   color: var(--gold); }
.tile-ico.good   { background: var(--wash-good);   border-color: var(--edge-good);   color: var(--good); }
.tile-ico.warn   { background: var(--wash-warn);   border-color: var(--edge-warn);   color: var(--warn); }
.tile-ico.bad    { background: var(--wash-bad);    border-color: var(--edge-bad);    color: var(--on-bad); }
.tile-ico.violet { background: var(--wash-violet); border-color: var(--edge-violet); color: var(--on-violet); }
.tile-ico img, .tile-ico svg { width: 60%; height: 60%; object-fit: contain; }

/* delta chip */
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: -.005em;
  padding: 3px 8px; border-radius: 8px;
  border: 1px solid transparent; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.delta.up   { color: var(--good);   background: var(--wash-good); border-color: var(--edge-good); }
.delta.down { color: var(--bad);    background: var(--wash-bad);  border-color: var(--edge-bad); }
.delta.flat { color: var(--text-3); background: var(--surface-2); border-color: var(--line-soft); font-weight: 600; }

/* a horizontal row of small labelled figures.
   Markup: .kpi-row > .kpi > (.k|.label) + (.v|.value) */
.kpi-row {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0 26px; row-gap: 14px;
}
.kpi-row > * { min-width: 0; }
.kpi-row > * + * {
  padding-inline-start: 26px; margin-inline-start: 0;
  border-inline-start: 1px solid var(--line-soft);
}
.kpi-row .k,
.kpi-row .label {
  display: block;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); line-height: 1.4;
  margin-bottom: 2px;
}
.kpi-row .v,
.kpi-row .value {
  display: block;
  font-size: var(--fs-lg); font-weight: 720; letter-spacing: -.022em;
  line-height: 1.2; color: var(--text);
  font-variant-numeric: tabular-nums; min-height: 0;
}
.kpi-row.lg .v, .kpi-row.lg .value { font-size: var(--fs-xl); }
.kpi-row.sm .v, .kpi-row.sm .value { font-size: var(--fs-base); }

/* labelled horizontal progress meter.
   Markup: .meter > .meter-top > (.label, .value) then .track > i
   (a plain .progress may be dropped in instead of .track). */
.meter { display: flex; flex-direction: column; gap: 7px; }
.meter .meter-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--fs-sm);
}
.meter .meter-top .label {
  font-size: var(--fs-xs); font-weight: 650; color: var(--text-2);
  text-transform: none; letter-spacing: 0;
}
.meter .meter-top .value {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; min-height: 0; display: inline;
}
.meter .track {
  height: 8px; border-radius: 6px; overflow: hidden;
  background: var(--surface-3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
}
.meter .track > i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  box-shadow: 0 0 10px rgba(91,131,255,.35);
  transition: width .7s var(--ease);
}
.meter.good .track > i { background: linear-gradient(90deg, var(--good), #6fe0c1); box-shadow: 0 0 10px rgba(53,208,165,.32); }
.meter.warn .track > i { background: linear-gradient(90deg, var(--warn), var(--gold)); box-shadow: 0 0 10px rgba(242,163,60,.3); }
.meter.bad  .track > i { background: linear-gradient(90deg, var(--bad), #ff8f7a); box-shadow: 0 0 10px rgba(255,95,109,.3); }
.meter.gold .track > i { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); box-shadow: 0 0 10px rgba(245,181,68,.3); }
.meter .foot { font-size: var(--fs-xs); color: var(--text-3); }
body.rtl .meter .track > i { margin-inline-start: auto; }

/* -------------------------------------------------------------- badge */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .005em;
  line-height: 1.5;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid transparent; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badge.dot::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.badge.blue   { background: var(--wash-blue);   color: var(--on-blue);   border-color: var(--edge-blue); }
.badge.gold   { background: var(--wash-gold);   color: var(--gold);      border-color: var(--edge-gold); }
.badge.good   { background: var(--wash-good);   color: var(--good);      border-color: var(--edge-good); }
.badge.warn   { background: var(--wash-warn);   color: var(--warn);      border-color: var(--edge-warn); }
.badge.bad    { background: var(--wash-bad);    color: var(--on-bad);    border-color: var(--edge-bad); }
.badge.violet { background: var(--wash-violet); color: var(--on-violet); border-color: var(--edge-violet); }
.badge.ghost  { background: transparent; border-color: var(--line); color: var(--text-2); }
.badge.lg { padding: 5px 12px; font-size: var(--fs-sm); }

/* A chip is lighter than a badge: neutral, quiet, meant to sit in rows of
   filters and metadata without competing with status colour. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 9px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.45;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--line-soft);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.chip.click, a.chip, button.chip { cursor: pointer; font-family: inherit; }
.chip.click:hover, a.chip:hover, button.chip:hover {
  background: var(--surface-3); border-color: var(--line); color: var(--text);
  text-decoration: none;
}
.chip.on {
  background: var(--wash-blue); border-color: var(--edge-blue); color: var(--on-blue);
  font-weight: 650;
}
.chip .x {
  opacity: .55; cursor: pointer; font-size: var(--fs-sm);
  transition: opacity .15s var(--ease);
}
.chip .x:hover { opacity: 1; }
.chip.good { color: var(--good); background: var(--wash-good); border-color: var(--edge-good); }
.chip.warn { color: var(--warn); background: var(--wash-warn); border-color: var(--edge-warn); }
.chip.bad  { color: var(--on-bad); background: var(--wash-bad); border-color: var(--edge-bad); }

/* ------------------------------------------------------------- button */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text);
  font-family: inherit; font-size: var(--fs-md); font-weight: 620;
  letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden;
  box-shadow: var(--e1), var(--card-hi);
  transition:
    transform .1s var(--ease), background .18s var(--ease),
    border-color .18s var(--ease), box-shadow .18s var(--ease),
    filter .18s var(--ease);
  user-select: none; -webkit-user-select: none;
}
.btn:hover {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border-color: var(--line);
  box-shadow: var(--e2), var(--card-hi-2);
}
/* pressed: the button physically sinks — shadow collapses, inner shade appears */
.btn:active {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
  filter: brightness(.97);
}
.btn:focus-visible { outline: none; box-shadow: var(--ring), var(--e1); }
.btn[disabled] {
  opacity: .45; cursor: not-allowed; transform: none;
  box-shadow: none; filter: grayscale(.35);
}

.btn.primary {
  background: linear-gradient(180deg, #7a9bff, var(--blue) 46%, #3a5fe0);
  border-color: transparent; color: #fff;
  box-shadow:
    0 1px 2px rgba(20,34,90,.4), 0 6px 18px rgba(91,131,255,.32),
    inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.16);
  text-shadow: 0 1px 1px rgba(12,24,70,.3);
}
.btn.primary:hover {
  filter: brightness(1.06);
  box-shadow:
    0 2px 4px rgba(20,34,90,.4), 0 10px 26px rgba(91,131,255,.42),
    inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.16);
}
.btn.primary:active { box-shadow: inset 0 2px 6px rgba(10,20,60,.45); filter: brightness(.95); }

.btn.gold {
  background: linear-gradient(180deg, #ffd684, var(--gold) 46%, #d78e1c);
  border-color: transparent; color: #251802;
  box-shadow:
    0 1px 2px rgba(90,58,4,.34), 0 6px 18px rgba(245,181,68,.30),
    inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.14);
}
.btn.gold:hover {
  filter: brightness(1.05);
  box-shadow:
    0 2px 4px rgba(90,58,4,.34), 0 10px 26px rgba(245,181,68,.40),
    inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.14);
}
.btn.gold:active { box-shadow: inset 0 2px 6px rgba(80,50,4,.42); filter: brightness(.96); }

.btn.danger {
  background: var(--wash-bad); border-color: var(--edge-bad); color: var(--on-bad);
  box-shadow: var(--card-hi);
}
.btn.danger:hover { background: rgba(255,95,109,.2); border-color: rgba(255,95,109,.42); box-shadow: var(--e1), var(--card-hi); }
.btn.success {
  background: var(--wash-good); border-color: var(--edge-good); color: var(--good);
  box-shadow: var(--card-hi);
}
.btn.success:hover { background: rgba(53,208,165,.2); border-color: rgba(53,208,165,.42); box-shadow: var(--e1), var(--card-hi); }
.btn.ghost {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--text-2);
}
.btn.ghost:hover { background: var(--surface-2); border-color: var(--line-soft); color: var(--text); box-shadow: none; }
.btn.ghost:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }

.btn.sm { padding: 6px 11px; font-size: var(--fs-sm); border-radius: 9px; gap: 6px; }
.btn.lg { padding: 13px 26px; font-size: 15.5px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn.icon { padding: 8px; width: 36px; height: 36px; }
.btn.icon.sm { width: 30px; height: 30px; padding: 5px; }

/* Loading is unmistakable: the label vanishes, the surface dims and a light
   sweeps across it while the spinner turns. */
.btn.loading {
  pointer-events: none; color: transparent !important;
  text-shadow: none;
}
.btn.loading::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 20%, rgba(255,255,255,.16) 48%, transparent 76%);
  transform: translateX(-100%);
  animation: btnSweep 1.05s var(--ease-in-out) infinite;
}
.btn.loading::after {
  content: ''; position: absolute;
  top: 50%; inset-inline-start: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: #fff;
  border-radius: 50%; animation: spin .62s linear infinite;
}
body.rtl .btn.loading::after { margin: -8px -8px 0 0; }
/* on light-surfaced buttons the white spinner disappears — tint it */
.btn.loading:not(.primary):not(.gold)::after {
  border-color: var(--line); border-top-color: var(--blue);
}
.btn.gold.loading::after { border-color: rgba(40,26,2,.2); border-top-color: #2a1c02; }
.btn.gold.loading::before { background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.4) 48%, transparent 76%); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes btnSweep { to { transform: translateX(100%); } }

/* -------------------------------------------------------------- form */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: var(--fs-sm); font-weight: 640; color: var(--text-2); letter-spacing: -.005em; }
.field .hint { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; }
.field.err input, .field.err select, .field.err textarea {
  border-color: var(--bad); box-shadow: 0 0 0 3px var(--wash-bad);
}
.field .err-msg { font-size: var(--fs-xs); color: var(--bad); font-weight: 600; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit; font-size: 14.4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.14);
  transition:
    border-color .16s var(--ease), box-shadow .16s var(--ease),
    background .16s var(--ease);
}
input[type=number], input[type=date], input[type=time], input[type=datetime-local] {
  font-variant-numeric: tabular-nums;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--line); background: var(--surface-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: var(--ring); background: var(--surface);
}
input[readonly], input[disabled], select[disabled], textarea[disabled] {
  opacity: .6; cursor: not-allowed;
}
textarea { resize: vertical; min-height: 84px; line-height: var(--lh-body); }
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2366748e' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
  cursor: pointer;
}
body.rtl select { background-position: left 12px center; padding-right: 12px; padding-left: 32px; }
input[type=checkbox], input[type=radio] {
  width: auto; accent-color: var(--blue); box-shadow: none;
  width: 16px; height: 16px; cursor: pointer;
}
input[type=file] { padding: 8px; cursor: pointer; }
input[type=range] { padding: 0; background: transparent; border: none; box-shadow: none; accent-color: var(--blue); }

.check {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft); background: var(--surface-2);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.check:hover { border-color: var(--line); background: var(--surface-3); }
.check input { margin-top: 2px; flex: none; }
.check.on {
  border-color: var(--edge-blue); background: var(--wash-blue);
  box-shadow: inset 0 0 0 1px var(--edge-blue);
}
.check .t { font-weight: 620; font-size: var(--fs-md); line-height: 1.4; }
.check .d { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; }

.seg {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 11px;
  padding: 3px; gap: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.16);
}
.seg button {
  border: none; background: transparent; color: var(--text-2);
  padding: 6px 13px; border-radius: 8px;
  font-family: inherit; font-size: 13.4px; font-weight: 620;
  cursor: pointer; position: relative;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button:focus-visible { outline: none; box-shadow: var(--ring); }
.seg button.on {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  color: var(--text);
  box-shadow: var(--e1), var(--card-hi-2);
}

/* -------------------------------------------------------------- table */

.table-wrap {
  overflow-x: auto; border-radius: var(--radius);
  /* a hint that there is more to the right, without a scrollbar shouting */
  scrollbar-gutter: stable;
}
table.tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
table.tbl th {
  text-align: start;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  position: sticky; top: 0; z-index: 1; white-space: nowrap;
  backdrop-filter: blur(6px);
}
table.tbl th:first-child { padding-inline-start: 18px; }
table.tbl th:last-child { padding-inline-end: 18px; }
table.tbl td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  line-height: 1.45;
}
table.tbl td:first-child { padding-inline-start: 18px; }
table.tbl td:last-child { padding-inline-end: 18px; }
table.tbl tbody tr { transition: background .15s var(--ease), box-shadow .15s var(--ease); }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr.click { cursor: pointer; }
/* a leading accent slides in on hover so a clickable row feels answered */
table.tbl tbody tr.click:hover td:first-child { box-shadow: inset 2px 0 0 var(--blue); }
body.rtl table.tbl tbody tr.click:hover td:first-child { box-shadow: inset -2px 0 0 var(--blue); }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr.on { background: var(--wash-blue); }
table.tbl.compact td, table.tbl.compact th { padding: 8px 12px; }
table.tbl.compact td:first-child, table.tbl.compact th:first-child { padding-inline-start: 14px; }

/* optional banding for long, dense tables */
table.tbl.zebra tbody tr:nth-child(even) { background: var(--zebra); }
table.tbl.zebra tbody tr:nth-child(even):hover { background: var(--surface-2); }

table.tbl tfoot td {
  font-weight: 700; color: var(--text);
  border-top: 1px solid var(--line); border-bottom: none;
  background: var(--surface-2);
}

/* ------------------------------------------------------------ avatar */

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-sm); color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 6px rgba(0,0,0,.22);
  letter-spacing: -.01em; user-select: none;
}
.avatar.sm { width: 26px; height: 26px; font-size: var(--fs-micro); }
.avatar.lg { width: 56px; height: 56px; font-size: var(--fs-xl); }
.avatar.on {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 0 2px var(--surface), 0 0 0 4px var(--good),
    0 0 12px rgba(53,208,165,.35);
}

/* --------------------------------------------------------- list rows */

/* A clickable row for lists that are not tables — people, orders in a
   sidebar, search results. */
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent; color: inherit;
  cursor: pointer; text-align: start; width: 100%;
  font-family: inherit; font-size: var(--fs-md);
  position: relative;
  transition:
    background .16s var(--ease), border-color .16s var(--ease),
    transform .16s var(--ease), box-shadow .16s var(--ease);
}
.list-row:hover {
  background: var(--surface-2); border-color: var(--line-soft);
  transform: translateX(2px); text-decoration: none;
}
body.rtl .list-row:hover { transform: translateX(-2px); }
.list-row:active { transform: translateX(1px) scale(.996); }
.list-row:focus-visible { outline: none; box-shadow: var(--ring); }
.list-row.on {
  background: var(--wash-blue); border-color: var(--edge-blue);
  transform: none; box-shadow: var(--card-hi);
}
.list-row .t { font-weight: 640; line-height: 1.35; }
.list-row .d { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; }
.list-row.link::after {
  content: '›'; margin-inline-start: auto; color: var(--text-3);
  font-size: var(--fs-lg); line-height: 1;
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.list-row.link:hover::after { color: var(--text-2); transform: translateX(3px); }
body.rtl .list-row.link::after { content: '‹'; }
body.rtl .list-row.link:hover::after { transform: translateX(-3px); }
.list-row + .list-row { margin-top: 2px; }

/* ------------------------------------------------------------ layout */

/* Two-pane list + detail. Collapses to a single column on a phone. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.split.narrow { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); }
.split.wide { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.split > .split-list { min-width: 0; }
.split > .split-detail { min-width: 0; }
.split.sticky > :first-child { position: sticky; top: calc(var(--topbar-h) + 16px); }

/* Sticky filter bar above content. */
.toolbar {
  position: sticky; top: var(--topbar-h); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 13px; margin-bottom: 16px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--e1), var(--card-hi);
}
.toolbar input, .toolbar select { width: auto; min-width: 150px; }
.toolbar .grow { min-width: 140px; }
.toolbar.flat { background: var(--surface); box-shadow: none; }

/* Full-height side panel for detail views. */
.sheet-back {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: blur(3px); z-index: 180;
  animation: fadeIn .2s var(--ease);
}
.sheet {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 190;
  width: min(560px, 100%);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--e3);
  animation: sheetIn .32s var(--ease);
}
.sheet.wide { width: min(820px, 100%); }
body.rtl .sheet { animation-name: sheetInL; }
@keyframes sheetIn  { from { transform: translateX(100%); } }
@keyframes sheetInL { from { transform: translateX(-100%); } }
.sheet-head {
  padding: 18px 22px; flex: none;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.sheet-body { padding: 22px; overflow-y: auto; flex: 1 1 auto; }
.sheet-foot {
  padding: 15px 22px; flex: none;
  border-top: 1px solid var(--line-soft);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--surface-2);
}

/* ------------------------------------------------------------- misc */

.divider { height: 1px; background: var(--line-soft); margin: 16px 0; border: none; }
.pill-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

.progress {
  height: 8px; background: var(--surface-3); border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.progress > i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  box-shadow: 0 0 10px rgba(91,131,255,.3);
  transition: width .7s var(--ease);
}
.progress.good > i { background: linear-gradient(90deg, var(--good), #6fe0c1); box-shadow: 0 0 10px rgba(53,208,165,.3); }
.progress.warn > i { background: linear-gradient(90deg, var(--warn), var(--gold)); box-shadow: 0 0 10px rgba(242,163,60,.28); }
.progress.bad  > i { background: linear-gradient(90deg, var(--bad), #ff8f7a); box-shadow: 0 0 10px rgba(255,95,109,.28); }
.progress.thin { height: 5px; }
body.rtl .progress > i { margin-inline-start: auto; }

/* An empty state should look like a decision, not an accident. */
.empty {
  text-align: center; padding: 52px 24px; color: var(--text-3);
  display: flex; flex-direction: column; align-items: center;
}
.empty .ico {
  width: 60px; height: 60px; margin: 0 0 16px;
  display: grid; place-items: center;
  font-size: var(--fs-2xl); line-height: 1; opacity: 1;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.05), transparent 68%),
    var(--surface-2);
  border: 1px solid var(--line-soft);
  box-shadow: var(--e1), var(--card-hi);
  color: var(--text-3);
}
.empty .t {
  font-weight: 680; font-size: var(--fs-lg); letter-spacing: -.02em;
  color: var(--text); margin-bottom: 6px; line-height: var(--lh-snug);
}
.empty .small { max-width: 44ch; color: var(--text-3); line-height: 1.55; }
.empty .btn { margin-top: 18px; }

/* Calmer shimmer: slower, lower contrast, no strobing. */
.skel {
  background:
    linear-gradient(90deg,
      var(--surface-2) 0%, var(--surface-3) 45%,
      var(--surface-3) 55%, var(--surface-2) 100%);
  background-size: 220% 100%;
  animation: shimmer 1.9s var(--ease-in-out) infinite;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.banner {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--fs-md); line-height: 1.5; margin-bottom: 16px;
  box-shadow: var(--card-hi);
  position: relative; overflow: hidden;
}
.banner::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 3px; background: var(--line);
}
.banner.warn { border-color: var(--edge-warn); background: var(--wash-warn); }
.banner.warn::before { background: var(--warn); }
.banner.bad  { border-color: var(--edge-bad);  background: var(--wash-bad); }
.banner.bad::before { background: var(--bad); }
.banner.good { border-color: var(--edge-good); background: var(--wash-good); }
.banner.good::before { background: var(--good); }
.banner.info { border-color: rgba(73,182,232,.3); background: rgba(73,182,232,.08); }
.banner.info::before { background: var(--info); }
.banner .ico { font-size: var(--fs-lg); flex: none; line-height: 1.35; }
.banner .b { letter-spacing: -.01em; }

/* ------------------------------------------------------------- modal */

.modal-back {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  z-index: 200;
  display: grid; place-items: center; padding: 20px;
  animation: fadeIn .18s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--e3), var(--card-hi-2);
  width: min(620px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
  animation: modalIn .3s var(--ease-out-back);
  overflow: hidden;
}
.modal.wide { width: min(940px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.965); } }
.modal-head {
  padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; flex: none;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.modal-head .card-title { font-size: var(--fs-lg); letter-spacing: -.022em; }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-foot {
  padding: 15px 22px; border-top: 1px solid var(--line-soft);
  display: flex; gap: 10px; justify-content: flex-end; flex: none;
  background: var(--surface-2);
}

/* ------------------------------------------------------------ toasts */

.toasts {
  position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 270px; max-width: 400px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 16px;
  box-shadow: var(--e3), var(--card-hi);
  display: flex; gap: 11px; align-items: flex-start;
  animation: toastIn .34s var(--ease-out-back);
  position: relative; overflow: hidden;
}
.toast.out { animation: toastOut .22s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px) scale(.95); } }
body.rtl .toast { animation-name: toastInL; }
body.rtl .toast.out { animation-name: toastOutL; }
@keyframes toastInL { from { opacity: 0; transform: translateX(-40px) scale(.95); } }
@keyframes toastOutL { to { opacity: 0; transform: translateX(-40px) scale(.95); } }
.toast .ico { font-size: var(--fs-lg); flex: none; line-height: 1.3; }
.toast .t { font-weight: 660; font-size: var(--fs-md); letter-spacing: -.01em; }
.toast .m { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
.toast.good { border-inline-start: 3px solid var(--good); }
.toast.bad  { border-inline-start: 3px solid var(--bad); }
.toast.warn { border-inline-start: 3px solid var(--warn); }
.toast.info { border-inline-start: 3px solid var(--blue); }

/* ---------------------------------------------------------- dropdown */

.pop { position: relative; }
.pop-menu {
  position: absolute; top: calc(100% + 9px); inset-inline-end: 0;
  min-width: 224px; background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--e3), var(--card-hi);
  padding: 6px; z-index: 60;
  animation: popIn .19s var(--ease-out-back); transform-origin: top right;
}
body.rtl .pop-menu { transform-origin: top left; }
@keyframes popIn { from { opacity: 0; transform: translateY(-7px) scale(.96); } }
.pop-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 9px; cursor: pointer;
  font-size: var(--fs-md); color: var(--text-2);
  transition: background .14s var(--ease), color .14s var(--ease), padding-inline-start .14s var(--ease);
}
.pop-item:hover { background: var(--surface-2); color: var(--text); padding-inline-start: 14px; }
.pop-item:focus-visible { outline: none; box-shadow: var(--ring); }
.pop-item.danger { color: var(--on-bad); }
.pop-item.danger:hover { background: var(--wash-bad); }
.pop-sep { height: 1px; background: var(--line-soft); margin: 5px 2px; }

/* --------------------------------------------------------- notif list */

.notif {
  display: flex; gap: 11px; padding: 11px 12px; border-radius: 10px;
  cursor: pointer; position: relative;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.notif:hover { background: var(--surface-2); transform: translateX(2px); }
body.rtl .notif:hover { transform: translateX(-2px); }
.notif.unread { background: var(--wash-blue); }
.notif .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
  flex: none; margin-top: 6px; box-shadow: 0 0 8px rgba(91,131,255,.6);
}
.notif .t { font-weight: 640; font-size: 13.8px; line-height: 1.35; }
.notif .b { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
.notif .w { font-size: var(--fs-micro); color: var(--text-3); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ charts */

.chart { width: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis-label {
  fill: var(--text-3); font-size: 10.5px; font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
.chart .bar { transition: opacity .18s var(--ease); }
.chart .bar:hover { opacity: .78; }
.chart .line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { opacity: .16; }
.chart .pt { transition: r .18s var(--ease); }
.spark { display: block; }

.legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-2);
}
.legend i {
  width: 9px; height: 9px; border-radius: 3px;
  display: inline-block; margin-inline-end: 6px;
}

/* ------------------------------------------------------ landing page */

.land {
  min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(91,131,255,.16), transparent 62%),
    radial-gradient(900px 520px at 8% 104%, rgba(245,181,68,.12), transparent 60%),
    var(--bg);
}
.land-nav { display: flex; align-items: center; gap: 14px; padding: 20px 34px; }
.land-body { flex: 1; display: grid; place-items: center; padding: 24px; }
.land-inner { width: min(1120px, 100%); }
.hero-title {
  font-size: clamp(31px, 5.2vw, 56px); font-weight: 830; letter-spacing: -.04em;
  line-height: 1.03; margin: 0 0 16px;
}
.hero-title .accent {
  background: linear-gradient(120deg, #ffd684, var(--gold) 40%, #ff9d4d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  font-size: var(--fs-lg); color: var(--text-2);
  max-width: 620px; line-height: 1.6;
}

.role-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-top: 34px;
}
.role-card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 24px; cursor: pointer;
  transition:
    transform .26s var(--ease), border-color .26s var(--ease),
    box-shadow .26s var(--ease);
  position: relative; overflow: hidden;
  box-shadow: var(--e1), var(--card-hi);
  animation: cardIn .5s var(--ease) backwards;
}
.role-grid > .role-card:nth-child(2) { animation-delay: .07s; }
.role-grid > .role-card:nth-child(3) { animation-delay: .14s; }
.role-grid > .role-card:nth-child(4) { animation-delay: .21s; }
.role-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(360px 200px at var(--mx,50%) var(--my,0%), rgba(91,131,255,.15), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.role-card:hover {
  transform: translateY(-4px); border-color: var(--line);
  box-shadow: var(--e3), var(--card-hi-2);
}
.role-card:hover::after { opacity: 1; }
.role-card .ico { font-size: 28px; margin-bottom: 12px; line-height: 1; }
.role-card .t { font-weight: 720; font-size: var(--fs-lg); letter-spacing: -.022em; }
.role-card .d { font-size: 13.4px; color: var(--text-2); margin-top: 7px; line-height: 1.55; }
.role-card .go {
  margin-top: 15px; font-size: var(--fs-sm); font-weight: 660; color: var(--blue);
  transition: transform .2s var(--ease); display: inline-block;
}
.role-card:hover .go { transform: translateX(3px); }
body.rtl .role-card:hover .go { transform: translateX(-3px); }

/* login panel */
.auth-card {
  width: min(430px, 100%);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--e3), var(--card-hi-2);
  animation: authIn .44s var(--ease-out-back);
}
@keyframes authIn { from { opacity: 0; transform: translateY(22px) scale(.96); } }
.auth-title { font-size: var(--fs-2xl); font-weight: 780; letter-spacing: -.032em; margin-bottom: 6px; line-height: var(--lh-tight); }
.auth-sub { color: var(--text-2); font-size: var(--fs-md); margin-bottom: 24px; }

.shake { animation: shake .38s var(--ease); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

/* ----------------------------------------------------------- wizard */

.steps { display: flex; align-items: center; gap: 0; margin-bottom: 28px; }
.step { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.step .n {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 720;
  background: var(--surface-2); color: var(--text-3);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--card-hi);
  transition:
    background .3s var(--ease), color .3s var(--ease),
    border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.step.on .n {
  background: linear-gradient(180deg, #7a9bff, var(--blue)); color: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--wash-blue), 0 4px 12px rgba(91,131,255,.35);
}
.step.done .n {
  background: linear-gradient(180deg, #5be0bd, var(--good)); color: #04231b;
  border-color: transparent;
}
.step .lbl { font-size: 12.8px; color: var(--text-3); font-weight: 620; transition: color .3s var(--ease); }
.step.on .lbl { color: var(--text); }
.step.done .lbl { color: var(--text-2); }
.step .bar {
  flex: 1; height: 2px; background: var(--line);
  margin: 0 10px; border-radius: 2px;
  transition: background .4s var(--ease);
}
.step.done .bar { background: var(--good); }

.wizard-page { animation: fadeUp .32s var(--ease) backwards; }

/* -------------------------------------------------------- skill icon */

.skill-ico { width: 18px; height: 18px; vertical-align: -4px; image-rendering: pixelated; }
.skill-ico.lg { width: 26px; height: 26px; }

/* ------------------------------------------------------------- misc */

.kbd {
  font-family: var(--mono); font-size: var(--fs-micro); padding: 2px 6px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; background: var(--surface-2); color: var(--text-2);
  box-shadow: var(--card-hi); font-variant-numeric: tabular-nums;
}

.copy-line {
  display: flex; align-items: center; gap: 9px; padding: 10px 13px;
  background: var(--surface-2); border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.copy-line:hover { border-color: var(--blue); background: var(--surface-3); color: var(--text); }
.copy-line:active { transform: scale(.995); }

.timeline { position: relative; padding-inline-start: 22px; }
.timeline::before {
  content: ''; position: absolute; inset-inline-start: 6px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--line), var(--line-soft) 70%, transparent);
}
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item::before {
  content: ''; position: absolute; inset-inline-start: -21px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-3); border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-soft);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.tl-item.hi::before {
  background: var(--blue);
  box-shadow: 0 0 0 1px var(--edge-blue), 0 0 10px rgba(91,131,255,.5);
}

.tabs {
  display: flex; gap: 3px; border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px; overflow-x: auto;
}
.tab {
  padding: 10px 15px; font-size: var(--fs-md); font-weight: 620;
  color: var(--text-3); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
  position: relative;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  border-radius: 8px 8px 0 0;
}
.tab:hover { color: var(--text-2); background: var(--surface-2); }
.tab:focus-visible { outline: none; box-shadow: var(--ring); }
.tab.on {
  color: var(--text); border-bottom-color: var(--gold); background: transparent;
}
.tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold); border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px rgba(245,181,68,.55);
}

/* number roll-up — every counting figure keeps a fixed advance width so the
   tile does not twitch while it animates */
.count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Respect people who do not want motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .nav-item:hover, .list-row:hover, .notif:hover, .card.hover:hover,
  .role-card:hover { transform: none !important; }
}

/* ------------------------------------------------------- responsive */

@media (max-width: 1240px) {
  .split { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.c3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .split, .split.narrow, .split.wide { grid-template-columns: 1fr; }
  .split.sticky > :first-child { position: static; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: 272px;
    transform: translateX(-100%); transition: transform .3s var(--ease);
    box-shadow: var(--e3);
  }
  body.rtl .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: none !important; }
  .sidebar-scrim {
    position: fixed; inset: 0; background: var(--scrim);
    backdrop-filter: blur(2px);
    z-index: 39; animation: fadeIn .2s var(--ease);
  }
  .content { padding: 16px 15px 48px; }
  .topbar { padding: 0 14px; gap: 8px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .huge { font-size: var(--fs-3xl); }
  .stat .value { font-size: var(--fs-2xl); }
  .hide-sm { display: none !important; }
  .toolbar { padding: 9px 10px; }
  .kpi-row { gap: 0 18px; }
  .kpi-row > * + * { padding-inline-start: 18px; }
  .sheet, .sheet.wide { width: 100%; }
  .modal-body, .sheet-body { padding: 16px; }
  .modal-head, .modal-foot, .sheet-head, .sheet-foot { padding: 14px 16px; }
  .land-nav { padding: 16px 18px; flex-wrap: wrap; }
  table.tbl td, table.tbl th { padding: 11px 12px; }
}
@media (min-width: 861px) { .only-sm { display: none !important; } }

/* ------------------------------------------------------------- print */

/* Managers print a person's record for a file or a meeting. Everything that
   is navigation, chrome or decoration goes; the paper gets the content. */
@media print {
  :root {
    --bg: #fff; --bg-2: #fff;
    --surface: #fff; --surface-2: #fff; --surface-3: #f3f4f7;
    --line: #b9c0cd; --line-soft: #d8dde6;
    --text: #000; --text-2: #333; --text-3: #555;
    --e0: none; --e1: none; --e2: none; --e3: none;
    --shadow: none; --shadow-sm: none;
    --card-hi: none; --card-hi-2: none;
    --zebra: #f6f7fa;
  }
  html, body {
    background: #fff !important; color: #000;
    font-size: 11.5pt; line-height: 1.4;
  }
  body { background-image: none !important; }

  .sidebar, .sidebar-scrim, .topbar, .toolbar, .toasts, .toast,
  .pop-menu, .modal-back, .sheet-back, .nav-badge, .btn, .tabs,
  .seg, .steps, .sidebar-foot { display: none !important; }

  .shell { display: block; }
  .main { display: block; }
  .content { padding: 0; max-width: none; animation: none; }

  .card, .role-card, .auth-card, .banner, .modal {
    box-shadow: none !important;
    border: 1px solid var(--line) !important;
    break-inside: avoid; page-break-inside: avoid;
    background: #fff !important;
  }
  .card { padding: 12px 14px; margin-bottom: 10px; animation: none !important; }
  .card.accent-blue, .card.accent-gold, .card.accent-good,
  .card.accent-bad, .card.accent-warn, .card.accent-violet {
    border-inline-start-width: 3px;
  }
  .card[class*="accent-"]::before, .stat::after { display: none !important; }

  .grid { display: block; }
  .grid > .card { animation: none !important; margin-bottom: 10px; }
  .split { display: block; }

  .stat .value { font-size: 18pt; }
  .card-title, .page-title { font-size: 12.5pt; }

  table.tbl { font-size: 10pt; }
  table.tbl th {
    position: static; background: var(--surface-3) !important;
    color: #000; border-bottom: 1px solid var(--line);
  }
  table.tbl td { padding: 6px 8px; }
  table.tbl thead { display: table-header-group; }
  table.tbl tr { break-inside: avoid; page-break-inside: avoid; }
  .table-wrap { overflow: visible; }

  .badge, .chip, .delta {
    border: 1px solid var(--line) !important;
    background: #fff !important; color: #000 !important;
    box-shadow: none !important;
  }
  .avatar { background: var(--surface-3) !important; color: #000 !important; box-shadow: none !important; }
  .skel { display: none !important; }
  .empty .ico { box-shadow: none !important; }

  .timeline::before { background: var(--line); }
  .tl-item { break-inside: avoid; page-break-inside: avoid; }

  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }

  @page { margin: 14mm; }
}

/* a row that is costing money — readable in both themes */
.tbl tr.bad-row td { background: color-mix(in srgb, var(--bad) 9%, transparent); }