/* ============================================================================
   راینو تریدر — Design System
   Single source of truth. Navy + Teal fintech palette, light & dark themes.
   Structure: 1) fonts  2) tokens  3) base  4) shell  5) components  6) pages
              7) utilities  8) responsive
   ========================================================================== */

/* ── 1. Fonts (self-hosted, served from /fonts) ─────────────────────────── */
@font-face{font-family:IRANSansX;src:url('/fonts/IRANSansX-Thin.ttf') format('truetype');font-weight:100;font-display:swap}
@font-face{font-family:IRANSansX;src:url('/fonts/IRANSansX-UltraLight.ttf') format('truetype');font-weight:200;font-display:swap}
@font-face{font-family:IRANSansX;src:url('/fonts/IRANSansX-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:IRANSansX;src:url('/fonts/IRANSansX-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:IRANSansX;src:url('/fonts/IRANSansX-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:IRANSansX;src:url('/fonts/IRANSansX-DemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:IRANSansX;src:url('/fonts/IRANSansX-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:IRANSansX;src:url('/fonts/IRANSansX-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:IRANSansX;src:url('/fonts/IRANSansX-Black.ttf') format('truetype');font-weight:900;font-display:swap}

/* ── 2. Tokens ──────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  /* brand ramps — shared by both themes */
  --navy-950:#050b16; --navy-900:#0a1526; --navy-850:#0e1c31; --navy-800:#12233c;
  --navy-700:#1a3050; --navy-600:#234064; --navy-500:#2f5480; --navy-400:#4a719f;
  --teal-700:#0b7c74; --teal-600:#0d9488; --teal-500:#12b3a4; --teal-400:#2dd4bf;
  --teal-300:#5eead4; --teal-100:#ccfbf1;

  /* semantic hues */
  --green-600:#15803d; --green-500:#16a34a; --green-400:#22c55e;
  --red-600:#dc2626;   --red-500:#ef4444;   --red-400:#f87171;
  --amber-600:#b45309; --amber-500:#d97706; --amber-400:#f59e0b;
  --blue-600:#1d4ed8;  --blue-500:#3b82f6;
  --violet-500:#7c3aed;

  /* surfaces (light) */
  --bg:#eef1f7;
  --bg-grad:radial-gradient(1200px 600px at 100% -10%,#dfe7f5 0%,transparent 60%),
            radial-gradient(900px 500px at -10% 110%,#e2f5f2 0%,transparent 55%);
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#eef2f8;
  --surface-inset:#f2f5fa;
  --overlay:rgba(6,17,33,.5);

  /* lines */
  --line:#e3e9f2;
  --line-soft:#edf1f7;
  --line-strong:#cfd9e8;

  /* text */
  --ink:#0d1a2d;
  --ink-soft:#33455f;
  --muted:#6b7f9b;
  --faint:#93a3b8;
  --on-accent:#ffffff;

  /* accents */
  --primary:var(--teal-600);
  --primary-hover:var(--teal-700);
  --primary-ink:#075e57;
  --primary-soft:#e6faf6;
  --primary-ring:rgba(13,148,136,.22);

  --accent:var(--navy-700);
  --accent-soft:#eaf0f9;

  --success:var(--green-500); --success-ink:#116635; --success-soft:#e8f8ee;
  --danger:var(--red-500);    --danger-ink:#a01c1c;  --danger-soft:#fdeceb;
  --warning:var(--amber-500); --warning-ink:#8a5206; --warning-soft:#fdf3e3;
  --info:var(--blue-500);     --info-ink:#1a3fa8;    --info-soft:#eaf1fe;
  --neutral-soft:#eef1f6;     --neutral-ink:#4b5b70;

  /* trading semantics */
  --buy:var(--green-500); --buy-soft:#e8f8ee; --buy-ink:#116635;
  --sell:var(--red-500);  --sell-soft:#fdeceb; --sell-ink:#a01c1c;

  /* sidebar (dark in both themes — signature surface) */
  --side-bg:linear-gradient(180deg,#0b1930 0%,#08131f 100%);
  --side-ink:#dbe7f5;
  --side-muted:#7f95b1;
  --side-line:rgba(255,255,255,.07);
  --side-active:rgba(45,212,191,.13);
  --side-hover:rgba(255,255,255,.055);

  /* type */
  --font-sans:IRANSansX,"IRANSansXFaNum",Vazirmatn,"IRANSans","Segoe UI",Tahoma,system-ui,-apple-system,sans-serif;
  --font-num:"IRANSansX","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:19px;
  --fs-2xl:23px; --fs-3xl:29px; --fs-4xl:36px;

  /* space scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  /* radii */
  --r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --radius:var(--r-lg);

  /* elevation */
  --sh-xs:0 1px 2px rgba(13,26,45,.06);
  --sh-sm:0 2px 6px rgba(13,26,45,.06),0 1px 2px rgba(13,26,45,.04);
  --sh-md:0 8px 24px rgba(13,26,45,.07),0 2px 6px rgba(13,26,45,.04);
  --sh-lg:0 18px 48px rgba(13,26,45,.11),0 4px 12px rgba(13,26,45,.05);
  --sh-pop:0 24px 64px rgba(8,18,32,.18);
  --shadow:var(--sh-md);
  --ring:0 0 0 3px var(--primary-ring);

  /* motion */
  --t-fast:.13s cubic-bezier(.4,0,.2,1);
  --t-med:.22s cubic-bezier(.4,0,.2,1);
  --t-slow:.36s cubic-bezier(.16,1,.3,1);

  /* layout */
  --side-w:262px;
  --topbar-h:66px;
  --page-max:1360px;
  --z-side:60; --z-top:50; --z-fab:65; --z-overlay:70; --z-drawer:75; --z-pop:90; --z-toast:110;

  /* safe area — this document is RTL, so inline-start is the physical right edge */
  --safe-is:0px; --safe-be:0px;

  /* floating chat button: bottom-right of the content column — clear of the
     right-hand sidebar on desktop, true screen corner once the drawer is hidden */
  --fab-size:54px;
  --fab-inline:calc(var(--side-w) + var(--s5));
  --fab-block:var(--s5);
  --fab-lift:0px;
}
@supports (top:env(safe-area-inset-top)){
  :root{--safe-is:env(safe-area-inset-right); --safe-be:env(safe-area-inset-bottom)}
}
/* ── Dark theme ─────────────────────────────────────────────────────────── */
[data-theme="dark"]{
  color-scheme:dark;

  --bg:#050b14;
  --bg-grad:radial-gradient(1100px 560px at 100% -10%,rgba(35,64,100,.42) 0%,transparent 62%),
            radial-gradient(820px 460px at -8% 108%,rgba(13,148,136,.16) 0%,transparent 58%);
  --surface:#0c1725;
  --surface-2:#111f31;
  --surface-3:#17283e;
  --surface-inset:#0a1420;
  --overlay:rgba(2,6,12,.66);

  --line:#1d3049;
  --line-soft:#16263b;
  --line-strong:#2b4160;

  --ink:#e9f0f8;
  --ink-soft:#c2d1e2;
  --muted:#94a8c0;
  --faint:#6d829c;

  --primary:var(--teal-400);
  --primary-hover:var(--teal-300);
  --primary-ink:#8ff0e2;
  --primary-soft:rgba(45,212,191,.13);
  --primary-ring:rgba(45,212,191,.26);
  --on-accent:#04211f;

  --accent:#c8dcf5;
  --accent-soft:rgba(120,166,224,.13);

  --success:var(--green-400); --success-ink:#86efac; --success-soft:rgba(34,197,94,.13);
  --danger:var(--red-400);    --danger-ink:#fca5a5;  --danger-soft:rgba(248,113,113,.13);
  --warning:var(--amber-400); --warning-ink:#fcd34d; --warning-soft:rgba(245,158,11,.13);
  --info:var(--blue-500);     --info-ink:#93c5fd;    --info-soft:rgba(59,130,246,.14);
  --neutral-soft:rgba(148,168,192,.12); --neutral-ink:#b6c6d9;

  --buy:var(--green-400); --buy-soft:rgba(34,197,94,.13); --buy-ink:#86efac;
  --sell:var(--red-400);  --sell-soft:rgba(248,113,113,.13); --sell-ink:#fca5a5;

  --side-bg:linear-gradient(180deg,#0a1523 0%,#060d17 100%);
  --side-line:rgba(255,255,255,.06);

  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 2px 8px rgba(0,0,0,.34);
  --sh-md:0 10px 28px rgba(0,0,0,.4);
  --sh-lg:0 22px 56px rgba(0,0,0,.5);
  --sh-pop:0 28px 70px rgba(0,0,0,.62);
}
/* ── 3. Base ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--fs-md);line-height:1.65;
  color:var(--ink);background-color:var(--bg);background-image:var(--bg-grad);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;font-feature-settings:"ss02" on;
}
h1,h2,h3,h4,h5{margin:0;font-weight:800;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-lg)} h3{font-size:var(--fs-md)}
p{margin:0 0 var(--s3)} p:last-child{margin-bottom:0}
a{color:var(--primary);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--primary-hover)}
small{font-size:var(--fs-sm)}
b,strong{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}
ul,ol{margin:0 0 var(--s3);padding-inline-start:1.25em}
li{margin-bottom:var(--s1)}
img,svg{max-width:100%;vertical-align:middle}
code,kbd,pre,.mono{font-family:var(--font-mono);font-size:.92em}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
::selection{background:var(--primary);color:var(--on-accent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}

.muted{color:var(--muted)}
.faint{color:var(--faint)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.strong{font-weight:700;color:var(--ink)}
.ltr,[dir="ltr"]{direction:ltr;unicode-bidi:isolate}
.tnum,.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.01em}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
/* ── 4. App shell ───────────────────────────────────────────────────────── */
.app-frame{display:flex;min-height:100vh;align-items:stretch}
.content-shell{flex:1;min-width:0;display:flex;flex-direction:column}
.main-content{flex:1;min-width:0;padding:var(--s6) var(--s7) var(--s9)}
/* pages that carry the chat FAB reserve its corner, so the last row of content
   can never end up underneath it at full scroll. Order-entry pages are excluded:
   there the sticky submit bar owns the bottom and the FAB is lifted above it.
   (specificity beats the breakpoint overrides below, so this holds at every width) */
body:has(.chat-fab):not(:has(.submit-bar)) .main-content{padding-block-end:calc(var(--fab-size) + var(--fab-block) + var(--s4))}
.page-content{width:100%;max-width:var(--page-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--s5)}
.app-frame.is-auth{min-height:100vh;min-height:100dvh}
.app-frame.is-auth .sidebar,.app-frame.is-auth .topbar{display:none}
.app-frame.is-auth .main-content{padding:0}
.app-frame.is-auth .page-content{max-width:none;gap:0}

/* Sidebar */
.sidebar{
  width:var(--side-w);flex:0 0 var(--side-w);position:sticky;top:0;align-self:flex-start;
  height:100vh;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s4) var(--s4);
  background:var(--side-bg);color:var(--side-ink);border-inline-end:1px solid var(--side-line);
  z-index:var(--z-side);overflow-y:auto;overscroll-behavior:contain;
}
.sidebar::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(45,212,191,.35),transparent)}
.sidebar-brand{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s2) var(--s5)}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;
  font-weight:900;font-size:19px;color:#04211f;
  background:linear-gradient(140deg,var(--teal-300),var(--teal-600));
  box-shadow:0 6px 18px rgba(13,148,136,.36),inset 0 1px 0 rgba(255,255,255,.4);
}
.sidebar-brand>span:last-child{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sidebar-brand strong{font-size:var(--fs-lg);font-weight:800;color:#fff;letter-spacing:-.01em}
.sidebar-brand small{font-size:10.5px;color:var(--side-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-label{
  padding:var(--s3) var(--s3) var(--s2);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--side-muted);opacity:.85;
}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{
  position:relative;display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);
  border-radius:var(--r-sm);font-size:var(--fs-md);font-weight:500;color:var(--side-ink);
  transition:background var(--t-fast),color var(--t-fast);
}
.side-nav a>span:first-child,.side-nav a>svg{flex:0 0 20px;display:grid;place-items:center;opacity:.72}
.side-nav a>svg{width:18px;height:18px}
.side-nav a:hover{background:var(--side-hover);color:#fff}
.side-nav a:hover>svg,.side-nav a:hover>span:first-child{opacity:1}
.side-nav a.active{background:var(--side-active);color:#fff;font-weight:700}
.side-nav a.active>svg,.side-nav a.active>span:first-child{opacity:1;color:var(--teal-300)}
.side-nav a.active::before{
  content:"";position:absolute;inset-block:22%;inset-inline-start:calc(var(--s4) * -1);
  width:3px;border-radius:var(--r-pill);background:var(--teal-300);box-shadow:0 0 12px var(--teal-400);
}
.side-nav .side-count{margin-inline-start:auto;font-size:10.5px;font-weight:700;padding:1px 7px;
  border-radius:var(--r-pill);background:rgba(45,212,191,.18);color:var(--teal-300);font-variant-numeric:tabular-nums}
.sidebar-bottom{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--side-line);display:flex;flex-direction:column;gap:var(--s2)}
.logout-form{margin:0}
.logout-link{
  width:100%;display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:10px var(--s3);
  border:1px solid var(--side-line);border-radius:var(--r-sm);background:rgba(255,255,255,.03);
  color:var(--side-muted);font-family:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  transition:all var(--t-fast);
}
.logout-link:hover{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.34);color:#fca5a5}
.side-foot-note{font-size:10px;color:var(--side-muted);text-align:center;opacity:.7}
/* Topbar */
.topbar{
  position:sticky;top:0;z-index:var(--z-top);height:var(--topbar-h);flex:0 0 var(--topbar-h);
  display:flex;align-items:center;gap:var(--s4);padding:0 var(--s7);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
@supports not (background:color-mix(in srgb,red 50%,blue)){.topbar{background:var(--surface)}}
.menu-toggle{
  display:none;width:38px;height:38px;flex:0 0 38px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);
  font-size:17px;cursor:pointer;transition:all var(--t-fast);
}
.menu-toggle:hover{background:var(--surface-3);border-color:var(--line-strong)}
.crumb{display:flex;flex-direction:column;min-width:0;flex:1}
.crumb .eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--primary)}
.crumb-title{font-size:var(--fs-lg);font-weight:800;color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:var(--s2);margin-inline-start:auto}
.icon-action{
  position:relative;width:38px;height:38px;display:grid;place-items:center;font-size:15px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-soft);
  cursor:pointer;transition:all var(--t-fast);
}
.icon-action:hover{background:var(--surface-3);color:var(--ink);border-color:var(--line-strong);transform:translateY(-1px)}
.icon-action svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
.chat-badge{
  position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:var(--r-pill);background:var(--red-500);color:#fff;
  font-size:10px;font-weight:800;border:2px solid var(--surface);font-variant-numeric:tabular-nums;
}
.avatar{
  display:inline-flex;align-items:center;gap:var(--s2);height:38px;padding-inline:var(--s3) var(--s2);
  border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft);white-space:nowrap;
}
.avatar::before{
  content:"";width:26px;height:26px;border-radius:50%;flex:0 0 26px;
  background:linear-gradient(140deg,var(--teal-400),var(--navy-600));
}

/* Panel context — the admin shell carries a blue mark so the operator can
   never mistake it for the user panel. Teal above stays the user default. */
.is-admin .brand-mark{
  color:#f3f8ff;
  background:linear-gradient(140deg,var(--blue-500),var(--blue-600));
  box-shadow:0 6px 18px rgba(29,78,216,.38),inset 0 1px 0 rgba(255,255,255,.26);
}
.is-admin .avatar::before{background:linear-gradient(140deg,var(--blue-500),var(--navy-700))}

/* Page header */
.page-head{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;justify-content:space-between}
.page-head h1{font-size:var(--fs-2xl);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.page-head .muted{font-size:var(--fs-sm);margin:2px 0 0}
.page-head-actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.page-eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--primary);display:block;margin-bottom:2px}
/* ── 5. Components ──────────────────────────────────────────────────────── */
/* Card */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);position:relative;
}
.section-card{padding:var(--s5)}
.section-card>h2,.card>h2{
  display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-md);font-weight:800;
  margin:0 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line-soft);
}
.section-card>h2 svg,.card>h2 svg{width:17px;height:17px;color:var(--primary);flex:0 0 17px}
.section-card>h2 .h2-aside{margin-inline-start:auto;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.card-flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.card-head h2{margin:0;padding:0;border:0}
.card-head .card-head-actions{margin-inline-start:auto;display:flex;gap:var(--s2);align-items:center}
.card-foot{padding:var(--s3) var(--s5);border-top:1px solid var(--line-soft);background:var(--surface-2);
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted)}
.card-accent{border-top:3px solid var(--primary)}

/* Grids */
.grid{display:grid;gap:var(--s4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.layout-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s5);align-items:start}
.layout-split>div,.layout-split>aside{min-width:0;display:flex;flex-direction:column;gap:var(--s5)}
.sticky-col{position:sticky;top:calc(var(--topbar-h) + var(--s5))}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack-sm{display:flex;flex-direction:column;gap:var(--s2)}
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.spacer{flex:1}

/* Stat / metric card */
.stat-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.stat{
  position:relative;overflow:hidden;padding:var(--s4) var(--s5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;gap:var(--s2);transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.stat::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:var(--stat-hue,var(--primary));opacity:.9}
.stat-header,.stat-top{display:flex;align-items:center;gap:var(--s2);justify-content:space-between}
.stat-label{font-size:var(--fs-sm);font-weight:600;color:var(--muted);display:flex;align-items:center;gap:var(--s2)}
.stat-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;
  background:var(--stat-soft,var(--primary-soft));color:var(--stat-hue,var(--primary))}
.stat-icon svg{width:17px;height:17px}
.stat-value{font-size:var(--fs-3xl);font-weight:800;line-height:1.15;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat-value small{font-size:var(--fs-sm);font-weight:600;color:var(--muted);margin-inline-start:4px}
.stat-foot{font-size:var(--fs-xs);color:var(--faint);display:flex;align-items:center;gap:var(--s1)}
.stat-teal{--stat-hue:var(--primary);--stat-soft:var(--primary-soft)}
.stat-amber{--stat-hue:var(--warning);--stat-soft:var(--warning-soft)}
.stat-green{--stat-hue:var(--success);--stat-soft:var(--success-soft)}
.stat-red{--stat-hue:var(--danger);--stat-soft:var(--danger-soft)}
.stat-blue{--stat-hue:var(--info);--stat-soft:var(--info-soft)}
.stat-navy{--stat-hue:var(--navy-600);--stat-soft:var(--accent-soft)}
.stat.is-link{cursor:pointer;color:inherit}
.stat.is-link:hover{border-color:var(--primary)}
/* Buttons */
.btn{
  --btn-bg:var(--surface);--btn-ink:var(--ink);--btn-line:var(--line-strong);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:40px;padding:0 var(--s4);border:1px solid var(--btn-line);border-radius:var(--r-sm);
  background:var(--btn-bg);color:var(--btn-ink);font-family:inherit;font-size:var(--fs-md);
  font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
  box-shadow:var(--sh-xs);user-select:none;
}
.btn svg{width:16px;height:16px;flex:0 0 16px}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{--btn-bg:linear-gradient(180deg,var(--teal-500),var(--teal-600));--btn-ink:#fff;--btn-line:transparent;
  box-shadow:0 4px 14px rgba(13,148,136,.28)}
.btn-primary:hover{--btn-bg:linear-gradient(180deg,var(--teal-400),var(--teal-500));box-shadow:0 8px 22px rgba(13,148,136,.36)}
[data-theme="dark"] .btn-primary{--btn-bg:linear-gradient(180deg,var(--teal-400),var(--teal-500));--btn-ink:#04211f}
.btn-accent{--btn-bg:linear-gradient(180deg,var(--navy-600),var(--navy-800));--btn-ink:#fff;--btn-line:transparent}
.btn-accent:hover{--btn-bg:linear-gradient(180deg,var(--navy-500),var(--navy-700))}
.btn-success{--btn-bg:linear-gradient(180deg,var(--green-500),var(--green-600));--btn-ink:#fff;--btn-line:transparent;
  box-shadow:0 4px 14px rgba(22,163,74,.26)}
.btn-success:hover{--btn-bg:linear-gradient(180deg,var(--green-400),var(--green-500))}
.btn-danger{--btn-bg:linear-gradient(180deg,var(--red-500),var(--red-600));--btn-ink:#fff;--btn-line:transparent;
  box-shadow:0 4px 14px rgba(220,38,38,.24)}
.btn-danger:hover{--btn-bg:linear-gradient(180deg,var(--red-400),var(--red-500))}
.btn-outline{--btn-bg:var(--surface);--btn-ink:var(--ink-soft);--btn-line:var(--line-strong)}
.btn-outline:hover{--btn-bg:var(--surface-2);--btn-ink:var(--ink);--btn-line:var(--primary)}
.btn-outline-danger{--btn-bg:transparent;--btn-ink:var(--danger);--btn-line:color-mix(in srgb,var(--danger) 45%,transparent)}
.btn-outline-danger:hover{--btn-bg:var(--danger-soft);--btn-line:var(--danger)}
.btn-ghost{--btn-bg:transparent;--btn-ink:var(--muted);--btn-line:transparent;box-shadow:none}
.btn-ghost:hover{--btn-bg:var(--surface-3);--btn-ink:var(--ink);box-shadow:none}
.btn-soft{--btn-bg:var(--primary-soft);--btn-ink:var(--primary-ink);--btn-line:transparent;box-shadow:none}
.btn-soft:hover{--btn-bg:color-mix(in srgb,var(--primary) 18%,transparent)}
.btn-sm{height:32px;padding:0 var(--s3);font-size:var(--fs-sm);border-radius:var(--r-xs)}
.btn-sm svg{width:14px;height:14px;flex:0 0 14px}
.btn-lg{height:48px;padding:0 var(--s6);font-size:var(--fs-lg)}
.btn-block{width:100%}
.btn-icon{width:38px;padding:0;flex:0 0 38px}
.btn-primary .tab-count,.btn-accent .tab-count,.btn-success .tab-count,.btn-danger .tab-count{
  background:rgba(255,255,255,.22);color:#fff}
.btn-icon.btn-sm{width:32px;flex:0 0 32px}
.btn.is-loading{color:transparent !important;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .6s linear infinite;
}
.btn-outline.is-loading::after,.btn-ghost.is-loading::after,.btn-soft.is-loading::after{
  border-color:var(--line-strong);border-top-color:var(--primary)}
@keyframes spin{to{transform:rotate(360deg)}}
.actions-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.actions-row.is-end{justify-content:flex-end}
.inline-form{display:inline-flex;align-items:center;gap:var(--s2);margin:0;flex-wrap:wrap}
.link{color:var(--primary);font-weight:700;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:4px}
.link svg{width:14px;height:14px}
.link:hover{text-decoration:underline;text-underline-offset:3px}
/* Badges & chips */
.badge{
  --bd-ink:var(--neutral-ink);--bd-bg:var(--neutral-soft);--bd-dot:var(--muted);
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--bd-bg);color:var(--bd-ink);
  font-size:var(--fs-xs);font-weight:700;line-height:1;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--bd-dot) 22%,transparent);
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bd-dot);flex:0 0 6px}
.badge.no-dot::before{display:none}
.badge svg{width:13px;height:13px}
.badge-lg{height:34px;padding:0 14px;font-size:var(--fs-sm);gap:8px}
.badge-lg::before{width:8px;height:8px;flex:0 0 8px}
.badge-sm{height:22px;padding:0 8px;font-size:10.5px}

/* order statuses — class names match `order.status|lower` used by app.js */
.badge-pending_admin{--bd-ink:var(--warning-ink);--bd-bg:var(--warning-soft);--bd-dot:var(--warning)}
.badge-pending_admin::before{animation:pulse-dot 1.8s ease-in-out infinite}
.badge-approved{--bd-ink:var(--success-ink);--bd-bg:var(--success-soft);--bd-dot:var(--success)}
.badge-rejected{--bd-ink:var(--danger-ink);--bd-bg:var(--danger-soft);--bd-dot:var(--danger)}
.badge-cancelled{--bd-ink:var(--neutral-ink);--bd-bg:var(--neutral-soft);--bd-dot:var(--faint)}
.badge-draft{--bd-ink:var(--info-ink);--bd-bg:var(--info-soft);--bd-dot:var(--info)}
.badge-success{--bd-ink:var(--success-ink);--bd-bg:var(--success-soft);--bd-dot:var(--success)}
.badge-danger{--bd-ink:var(--danger-ink);--bd-bg:var(--danger-soft);--bd-dot:var(--danger)}
.badge-warning{--bd-ink:var(--warning-ink);--bd-bg:var(--warning-soft);--bd-dot:var(--warning)}
.badge-info{--bd-ink:var(--info-ink);--bd-bg:var(--info-soft);--bd-dot:var(--info)}
.badge-neutral{--bd-ink:var(--neutral-ink);--bd-bg:var(--neutral-soft);--bd-dot:var(--faint)}
.badge-teal{--bd-ink:var(--primary-ink);--bd-bg:var(--primary-soft);--bd-dot:var(--primary)}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* buy / sell chips */
.side-chip{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--r-xs);
  font-size:var(--fs-xs);font-weight:800;line-height:1;white-space:nowrap;
}
.side-chip svg{width:13px;height:13px}
.side-buy{background:var(--buy-soft);color:var(--buy-ink);border:1px solid color-mix(in srgb,var(--buy) 30%,transparent)}
.side-sell{background:var(--sell-soft);color:var(--sell-ink);border:1px solid color-mix(in srgb,var(--sell) 30%,transparent)}

/* generic chip / pill / tag */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-pill);
  background:var(--surface-3);border:1px solid var(--line);color:var(--ink-soft);font-size:var(--fs-xs);font-weight:600}
.chip svg{width:13px;height:13px;color:var(--muted)}
.chip-strong{background:var(--accent-soft);color:var(--accent);border-color:transparent;font-weight:700}
.chip-strong svg{color:currentColor}
.tag-list{display:flex;flex-wrap:wrap;gap:var(--s2)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted);flex:0 0 8px}
.dot-live{background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 22%,transparent);animation:pulse-dot 1.8s ease-in-out infinite}
.dot-off{background:var(--faint)}
.dot-warn{background:var(--warning)}
.dot-err{background:var(--danger)}

/* symbol cell */
.symbol-cell{display:flex;flex-direction:column;gap:1px;min-width:0}
.symbol-name{font-weight:700;color:var(--ink);font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.symbol-isin{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);direction:ltr;unicode-bidi:isolate}
.avatar-sm{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal-400),var(--navy-600));color:#fff;font-weight:800;font-size:var(--fs-sm)}
.id-pill{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r-xs);
  background:var(--surface-3);border:1px solid var(--line);font-family:var(--font-mono);font-size:var(--fs-xs);
  color:var(--ink-soft);direction:ltr;unicode-bidi:isolate;font-weight:600}
/* Tables */
.table-wrap{width:100%;overflow-x:auto;border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
.card-flush .table-wrap{border-radius:0}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-md)}
.table thead th{
  position:sticky;top:0;z-index:2;text-align:start;white-space:nowrap;
  padding:var(--s3) var(--s4);background:var(--surface-2);color:var(--muted);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.table tbody td{
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);color:var(--ink-soft);
  vertical-align:middle;
}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:var(--surface-2)}
.table tbody tr:last-child td{border-bottom:0}
.table td b,.table td strong{color:var(--ink)}
.table td small{display:block;color:var(--faint);font-size:10.5px}
.table .num,.table .tnum,.table td[dir="ltr"]{font-variant-numeric:tabular-nums}
.table-hover-actions .row-actions{opacity:0;transition:opacity var(--t-fast)}
.table-hover-actions tr:hover .row-actions,
.table-hover-actions tr:focus-within .row-actions{opacity:1}
@media (hover:none){.table-hover-actions .row-actions{opacity:1}}
.table col.col-tight{width:1%}
.table .cell-end{text-align:end}
.table .cell-center{text-align:center}
.table-compact tbody td,.table-compact thead th{padding:var(--s2) var(--s3)}
.row-index{color:var(--faint);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.order-ref{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.order-ref span{color:var(--faint);font-weight:600}
.cell-stack{display:flex;flex-direction:column;gap:2px;min-width:0}
.cell-inline{display:flex;align-items:center;gap:var(--s2);min-width:0}
.money{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);white-space:nowrap}
.money small{display:inline;color:var(--muted);font-weight:500;font-size:var(--fs-xs);margin-inline-start:3px}

/* Key-value list */
.kv-list{display:flex;flex-direction:column;gap:0}
.kv{display:flex;align-items:center;gap:var(--s4);padding:11px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv-key{flex:0 0 40%;max-width:190px;color:var(--muted);font-size:var(--fs-sm);font-weight:600;
  display:flex;align-items:center;gap:var(--s2)}
.kv-key svg{width:15px;height:15px;color:var(--faint);flex:0 0 15px}
.kv-val{flex:1;min-width:0;color:var(--ink);font-weight:600;text-align:end;word-break:break-word}
.kv-val small{color:var(--faint);font-weight:500}
.info-list{display:flex;flex-direction:column;gap:0}
.info-list>div,.info-list>li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:10px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-sm)}
.info-list>div:last-child,.info-list>li:last-child{border-bottom:0}
.info-list span:first-child{color:var(--muted)}
.info-list span:last-child,.info-list b{color:var(--ink);font-weight:700}
/* Forms */
.form{display:flex;flex-direction:column;gap:var(--s4)}
.form-row{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.form-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 190px}
/* A field's `flex: 1 1 190px` is about *width*: it keeps fields a usable size
   when they sit side by side in a `.form-row` or `.form-grid`. A `.form` is a
   column, though, and there the same basis is read as a *height* — so every
   field claimed 190px and its label, input and hint drifted apart inside it,
   with the fields themselves far from each other. The basis is only wrong in
   that direction, so it is neutralised for direct children of a column form
   and left alone everywhere else. */
.form>.field{flex:0 0 auto}
.field>span,.field>label,label.label{font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft);
  display:flex;align-items:center;gap:6px}
.field .hint,.hint{font-size:var(--fs-xs);color:var(--faint);line-height:1.6}
.field-req>span::after{content:"*";color:var(--danger);font-weight:800}
input[type=text],input[type=password],input[type=number],input[type=tel],input[type=email],
input[type=search],input[type=date],input[type=datetime-local],select,textarea{
  width:100%;min-height:42px;padding:0 var(--s3);font-family:inherit;font-size:var(--fs-md);
  color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
  appearance:none;-webkit-appearance:none;
}
textarea{padding:var(--s3);min-height:96px;line-height:1.7;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring);background:var(--surface)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-3);color:var(--muted);cursor:not-allowed}
input[readonly]{background:var(--surface-2);color:var(--ink-soft)}
select{
  padding-inline-end:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(var(--s3) + 5px) 50%,var(--s3) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.input-icon{position:relative;display:flex;align-items:center;width:100%}
.input-icon>svg{position:absolute;inset-inline-start:11px;width:16px;height:16px;color:var(--faint);pointer-events:none;z-index:1}
.input-icon>input{padding-inline-start:36px}
.input-icon .input-clear{position:absolute;inset-inline-end:8px;width:24px;height:24px;border:0;border-radius:50%;
  background:var(--surface-3);color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:14px;line-height:1}
.input-icon .input-clear:hover{background:var(--danger-soft);color:var(--danger)}
.field-error input,.field-error select,input.invalid{border-color:var(--danger)}
.error-text{font-size:var(--fs-xs);color:var(--danger);font-weight:600}
fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);margin:0}
legend{padding:0 var(--s2);font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft)}
/* Checkbox / radio / switch */
input[type=checkbox],input[type=radio]{
  width:19px;height:19px;flex:0 0 19px;margin:0;cursor:pointer;appearance:none;-webkit-appearance:none;
  border:1.5px solid var(--line-strong);background:var(--surface);transition:all var(--t-fast);
  border-radius:var(--r-xs);display:inline-grid;place-content:center;
}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--primary)}
input[type=checkbox]::before{content:"";width:10px;height:6px;border:0 solid #fff;border-inline-start-width:2px;
  border-bottom-width:2px;transform:rotate(-45deg) scale(0);transition:transform var(--t-fast);margin-bottom:2px}
input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform var(--t-fast)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--primary);border-color:var(--primary)}
input[type=checkbox]:checked::before{transform:rotate(-45deg) scale(1)}
input[type=radio]:checked::before{transform:scale(1)}
[data-theme="dark"] input[type=checkbox]::before{border-color:#04211f}
[data-theme="dark"] input[type=radio]::before{background:#04211f}

/* selectable option card (radio / checkbox driven) */
.option-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.option-card{
  position:relative;display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);
  transition:all var(--t-fast);
}
.option-card:hover{border-color:var(--primary);background:var(--surface-2)}
.option-card input{margin-top:2px}
.option-card-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.option-card-body b{font-size:var(--fs-md);color:var(--ink);font-weight:700}
.option-card-body span{font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
.option-card:has(input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:var(--ring)}
.option-card:has(input:checked) .option-card-body b{color:var(--primary-ink)}

/* account picker row */
.account-check{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);transition:all var(--t-fast);
}
.account-check:hover{border-color:var(--primary);background:var(--surface-2)}
.account-check:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.account-check-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.account-check-main b{font-size:var(--fs-md);color:var(--ink)}
.account-check-main small{font-size:var(--fs-xs);color:var(--muted);direction:ltr;unicode-bidi:isolate}
.account-check-side{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.bp-value{font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-sm);color:var(--success-ink)}
.bp-inline{font-variant-numeric:tabular-nums}

/* Symbol autocomplete — the dropdown itself scrolls, the page never does.
   Built from the same tokens as .card and the form controls above, so it
   reads as one more field rather than a widget bolted on. */
.symbol-search{position:relative;width:100%}
.symbol-results{
  position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:var(--z-pop);
  margin:0;padding:var(--s1);list-style:none;
  max-height:270px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);
}
.symbol-results[hidden]{display:none}
.symbol-option{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:9px var(--s3);border-radius:var(--r-sm);cursor:pointer;
  font-size:var(--fs-md);color:var(--ink);transition:background var(--t-fast),color var(--t-fast);
}
.symbol-option b{font-weight:700}
.symbol-option small{
  color:var(--muted);font-size:var(--fs-xs);font-family:var(--font-mono);
  direction:ltr;unicode-bidi:isolate;white-space:nowrap;
}
.symbol-option:hover,.symbol-option.is-active{background:var(--primary-soft)}
.symbol-option.is-active{box-shadow:inset 0 0 0 1px var(--primary)}
.symbol-option:hover small,.symbol-option.is-active small{color:var(--primary-ink)}
.symbol-empty{padding:11px var(--s3);color:var(--muted);font-size:var(--fs-sm);text-align:center}

/* The brokerage picker reuses the symbol combobox classes and adds only the
   pin: a small quiet button on each row, filled when the row is pinned. */
.pin-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-sm);
  color:var(--faint);background:none;border:none;cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast)}
.pin-btn:hover{color:var(--ink);background:var(--surface-2)}
.pin-btn.is-on{color:var(--primary)}
.pin-btn.is-on svg{fill:currentColor}
.pin-legend{display:inline-flex;vertical-align:-2px;color:var(--muted)}

/* Volume box with its ceiling/floor chips beside it */
.input-with-bounds{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.input-with-bounds>input{flex:1 1 190px;width:auto}
.bounds{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.bounds[hidden]{display:none}
.chip-action{
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-soft);
  cursor:pointer;font-family:inherit;font-size:var(--fs-xs);font-weight:600;
}
.chip-action[hidden]{display:none}
.chip-action b{font-variant-numeric:tabular-nums;color:var(--ink)}
.chip-action:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-ink)}
.chip-action:hover b{color:var(--primary-ink)}

/* Live "ارزش معامله" under the three size modes */
.trade-value{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s4);padding:11px var(--s4);
  background:var(--surface-inset);border:1px dashed var(--line-strong);border-radius:var(--r-md);
}
.trade-value[hidden]{display:none}
.trade-value-label{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);
  font-weight:700;color:var(--ink-soft)}
.trade-value-label svg{width:15px;height:15px;color:var(--muted)}
.trade-value-amount{font-variant-numeric:tabular-nums;font-size:var(--fs-lg);
  font-weight:800;color:var(--ink)}
.trade-value.is-short .trade-value-amount{color:var(--danger)}
.trade-value-note{flex:1 1 200px;font-size:var(--fs-xs);color:var(--muted);line-height:1.6}

/* switch */
.switch{display:inline-flex;align-items:center;gap:var(--s3);cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{width:44px;height:24px;flex:0 0 44px;border-radius:var(--r-pill);background:var(--line-strong);
  position:relative;transition:background var(--t-med)}
.switch-track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:var(--sh-xs);transition:transform var(--t-med)}
.switch input:checked+.switch-track{background:var(--primary)}
.switch input:checked+.switch-track::after{transform:translateX(-20px)}
.switch input:focus-visible+.switch-track{box-shadow:var(--ring)}
/* Tabs (segmented, scrollable) */
.tabs{
  display:flex;align-items:center;gap:var(--s1);padding:5px;background:var(--surface-3);
  border:1px solid var(--line);border-radius:var(--r-md);overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 var(--s4);border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:700;color:var(--muted);white-space:nowrap;
  transition:all var(--t-fast);border:1px solid transparent;
}
.tab svg{width:15px;height:15px;opacity:.8}
.tab:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.tab.active{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-xs)}
.tab.active svg{color:var(--primary);opacity:1}
.tab-count{
  min-width:20px;height:19px;padding:0 6px;display:inline-grid;place-items:center;border-radius:var(--r-pill);
  background:var(--neutral-soft);color:var(--neutral-ink);font-size:10px;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.tab.active .tab-count{background:var(--primary-soft);color:var(--primary-ink)}
.tab-warn.active .tab-count{background:var(--warning-soft);color:var(--warning-ink)}
.tab-good.active .tab-count{background:var(--success-soft);color:var(--success-ink)}
.tab-bad.active .tab-count{background:var(--danger-soft);color:var(--danger-ink)}
.tabs-underline{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:var(--s5)}
.tabs-underline .tab{height:44px;padding:0;border-radius:0;border:0;border-bottom:2px solid transparent;background:transparent}
.tabs-underline .tab.active{background:transparent;border-bottom-color:var(--primary);color:var(--primary);box-shadow:none}

/* Toolbar: search + filters */
.toolbar{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) var(--s5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
}
.toolbar-search{flex:1 1 260px;min-width:0;max-width:420px}
.toolbar-filters{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.toolbar-filters .field{flex:0 1 auto;min-width:140px}
.toolbar-end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.toolbar-meta{font-size:var(--fs-sm);color:var(--muted);display:flex;align-items:center;gap:var(--s2)}
.toolbar-meta b{color:var(--ink);font-variant-numeric:tabular-nums}
.filter-summary{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted)}
.filter-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding-inline:10px 6px;border-radius:var(--r-pill);
  background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-xs);font-weight:700}
.filter-pill a{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--primary) 20%,transparent);color:inherit;font-size:12px;line-height:1}
.filter-pill a:hover{background:var(--danger);color:#fff}
.result-count{font-size:var(--fs-sm);color:var(--muted)}
.result-count b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--s2);flex-wrap:wrap;padding:var(--s4) 0 0}
.pagination a,.pagination span{
  min-width:38px;height:38px;padding:0 var(--s3);display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-soft);
  font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums;transition:all var(--t-fast);
}
.pagination a:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.pagination .current,.pagination .active{background:var(--primary);border-color:var(--primary);color:var(--on-accent);box-shadow:var(--sh-sm)}
.pagination .disabled,.pagination .ellipsis{opacity:.45;pointer-events:none;background:transparent;border-color:transparent}
.pagination-info{width:100%;text-align:center;font-size:var(--fs-sm);color:var(--muted);border:0;background:none;height:auto}

/* Empty state */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  padding:var(--s9) var(--s5);text-align:center;
}
.empty-icon{
  width:64px;height:64px;display:grid;place-items:center;border-radius:20px;font-size:26px;
  background:var(--surface-3);color:var(--muted);border:1px solid var(--line);
}
.empty-icon svg{width:28px;height:28px}
.empty-state h3{font-size:var(--fs-lg);color:var(--ink)}
.empty-state p{max-width:420px;color:var(--muted);font-size:var(--fs-sm);margin:0}
.empty-state .actions-row{margin-top:var(--s2)}

/* Alerts */
.alert{
  --al-ink:var(--info-ink);--al-bg:var(--info-soft);--al-line:var(--info);
  display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);
  border-radius:var(--r-md);background:var(--al-bg);color:var(--al-ink);
  border:1px solid color-mix(in srgb,var(--al-line) 30%,transparent);
  border-inline-start:3px solid var(--al-line);font-size:var(--fs-sm);font-weight:600;line-height:1.7;
  animation:alert-in var(--t-slow) both;
}
.alert svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px}
.alert b{font-weight:800}
.alert>div{min-width:0}
.alert small{display:block;opacity:.8;font-weight:600}
/* one-time token reveal (enrollment tokens) */
.token-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-block:var(--s2)}
.token-row code{
  flex:1 1 220px;min-width:0;overflow-x:auto;padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  background:var(--surface);border:1px dashed var(--line-strong);color:var(--ink);
  font-family:var(--font-mono);font-size:var(--fs-xs);direction:ltr;unicode-bidi:isolate;white-space:nowrap;
}
.token-row .btn svg{margin-top:0}

/* ── Dense forms ─────────────────────────────────────────────────────────
   For a form with many short fields (the worker provisioning form), where
   stacking one field per row turns a two-minute task into a scroll. Same
   .field / .form building blocks as everywhere else — only the spacing and
   the track sizing change, and the auto-fit grid still collapses to one
   column on a narrow screen. */
.card-tight{padding:var(--s4) var(--s5)}
.card-tight>h2{margin-bottom:var(--s3);padding-bottom:var(--s2)}
.form-compact{gap:var(--s3)}
.form-compact .field{gap:5px}
.form-compact .muted{margin:0}
/* Narrower tracks than .form-grid: these inputs hold an IP or a port, not a
   sentence, so more of them fit across the page. */
.form-grid-tight{
  display:grid;gap:var(--s3) var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
}
/* Two tiny inputs sharing one grid cell (a port pair). */
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);min-width:0}
/* Submit row: notes on the start, the primary action pinned to the end so it
   stays where the eye lands. */
.form-footer{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding-top:var(--s3);border-top:1px solid var(--line-soft);
}
.form-footer .hint{margin:0;flex:1 1 320px}
.form-footer .form-footer-end{margin-inline-start:auto;display:flex;gap:var(--s2);align-items:center}
/* One-line form that sits beside another (manual node creation). */
.form-inline{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin:0}
.form-inline .field{flex:1 1 220px}
/* Key/value pairs laid across the page instead of down it. */
.kv-grid{
  display:grid;gap:0 var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
}
.kv-grid .kv{padding:9px 0}
/* In a narrow column the fixed 40% key basis wraps two-word labels; here the
   key takes only what it needs. */
.kv-grid .kv-key{flex:0 1 auto;max-width:60%}
/* A token beside its copy button inside one grid column: the code takes the
   room that is left, and the button stays on one line rather than wrapping
   its label under its icon. */
.form-grid-tight .token-row{margin-block:0}
.form-grid-tight .token-row code{flex:1 1 120px}
.form-grid-tight .token-row .btn{flex:0 0 auto;white-space:nowrap}
/* ── Pickable cards ──────────────────────────────────────────────────────
   Orders to prepare, and prepared jobs to send. The whole card is the label,
   so anywhere on it toggles the checkbox. */
.pick-grid{
  display:grid;gap:var(--s3);padding:var(--s4) var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}
.pick-card{
  position:relative;display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer;
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);transition:border-color var(--t-med),box-shadow var(--t-med);
}
.pick-card:hover{border-color:var(--line-strong);box-shadow:var(--sh-sm)}
.pick-card>input[type=checkbox]{margin-top:3px;flex:0 0 auto}
.pick-card:has(>input:checked){border-color:var(--primary);box-shadow:var(--sh-sm)}
.pick-card:has(>input:checked)::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  border-start-start-radius:var(--r-lg);border-end-start-radius:var(--r-lg);background:var(--primary);
}
.pick-body{display:flex;flex-direction:column;gap:var(--s2);min-width:0;flex:1}
.pick-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.pick-symbol{font-weight:800;font-size:var(--fs-md);color:var(--ink)}
.pick-rows{
  display:grid;gap:2px var(--s3);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  font-size:var(--fs-sm);color:var(--ink-soft);
}
.pick-rows>span{display:flex;gap:6px;align-items:baseline;min-width:0}
.pick-rows i{font-style:normal;color:var(--faint);font-size:var(--fs-xs);flex:0 0 auto}
.pick-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding-top:var(--s2);border-top:1px dashed var(--line);
}
/* the action bar under a list of pickable cards */
.prepare-bar{align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.prepare-bar .field-inline{flex:0 1 auto;min-width:150px;gap:4px}
.prepare-bar .field-narrow{min-width:96px;max-width:120px}
.prepare-bar .hint{flex:1 1 260px;margin:0}
.toolbar-inline{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin:0}
/* the five steps of the flow, stated once at the top of the page */
.flow-strip{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4);
  padding:var(--s3) var(--s4);border:1px dashed var(--line-strong);border-radius:var(--r-lg);
  background:var(--surface-2);font-size:var(--fs-sm);color:var(--ink-soft);
}
.flow-step{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.flow-num{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--primary);color:#fff;font-size:var(--fs-xs);font-weight:800;
}
.flow-arrow{color:var(--faint);display:inline-flex}
/* live output of a worker being provisioned over SSH */
.provision-log-row>td{padding-block:0 var(--s3)}
.provision-log{
  margin:0;max-height:16rem;overflow:auto;padding:var(--s3);border-radius:var(--r-sm);
  background:var(--surface);border:1px dashed var(--line-strong);color:var(--muted);
  font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.7;
  direction:ltr;unicode-bidi:isolate;white-space:pre-wrap;word-break:break-word;
}
/* long response bodies inside the execution results table */
.response-cell{max-width:28rem}
.response-cell details>summary{cursor:pointer;color:var(--accent-ink,var(--ink));font-weight:600}
.response-cell pre{
  margin:var(--s2) 0 0;max-height:14rem;overflow:auto;padding:var(--s2);border-radius:var(--r-sm);
  background:var(--surface);border:1px dashed var(--line-strong);color:var(--muted);
  font-family:var(--font-mono);font-size:var(--fs-xs);
  direction:ltr;unicode-bidi:isolate;white-space:pre-wrap;word-break:break-word;
}
.alert-success{--al-ink:var(--success-ink);--al-bg:var(--success-soft);--al-line:var(--success)}
.alert-error,.alert-danger{--al-ink:var(--danger-ink);--al-bg:var(--danger-soft);--al-line:var(--danger)}
.alert-warn,.alert-warning{--al-ink:var(--warning-ink);--al-bg:var(--warning-soft);--al-line:var(--warning)}
.alert-info{--al-ink:var(--info-ink);--al-bg:var(--info-soft);--al-line:var(--info)}
.alert-neutral{--al-ink:var(--neutral-ink);--al-bg:var(--neutral-soft);--al-line:var(--faint)}
.alert.is-hiding{animation:alert-out var(--t-med) both}
@keyframes alert-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes alert-out{to{opacity:0;transform:translateY(-6px);max-height:0;padding-block:0;margin-block:0}}

/* Toasts */
/* Toasts — below the topbar and clear of the sidebar, never over the brand */
.toast-region{position:fixed;inset-block-start:calc(var(--topbar-h) + var(--s3));
  inset-inline-start:calc(var(--side-w) + var(--s5));z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--s2);pointer-events:none;max-width:min(360px,calc(100vw - 32px))}
.app-frame.is-auth ~ .toast-region{inset-block-start:var(--s5);inset-inline-start:var(--s5)}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-radius:var(--r-md);background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-inline-start:3px solid var(--primary);box-shadow:var(--sh-lg);font-size:var(--fs-sm);font-weight:600;
  animation:toast-in var(--t-slow) both;
}
.toast.success{border-inline-start-color:var(--success)}
.toast.error{border-inline-start-color:var(--danger)}
.toast.warn{border-inline-start-color:var(--warning)}
.toast.hide{animation:toast-out var(--t-med) both}
@keyframes toast-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(24px)}}
/* Timeline (status history) */
.timeline{display:flex;flex-direction:column;gap:0;position:relative}
.timeline-item{
  position:relative;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) 0 var(--s3) 0;padding-inline-start:var(--s6);
  border-bottom:1px dashed var(--line);
}
.timeline-item:last-child{border-bottom:0}
.timeline-item::before{
  content:"";position:absolute;inset-inline-start:6px;top:calc(var(--s3) + 9px);width:9px;height:9px;
  border-radius:50%;background:var(--surface);border:2px solid var(--primary);z-index:1;
}
.timeline-item::after{
  content:"";position:absolute;inset-inline-start:10px;top:calc(var(--s3) + 20px);bottom:-2px;width:1px;
  background:var(--line-strong);
}
.timeline-item:last-child::after{display:none}
.timeline-item>.small,.timeline-item .muted{font-size:var(--fs-xs)}
.timeline-item>div{flex-basis:100%;color:var(--ink-soft);font-size:var(--fs-sm)}
.timeline-time{font-variant-numeric:tabular-nums;color:var(--faint);font-size:var(--fs-xs)}
.timeline-actor{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--muted)}
.timeline-reason{
  margin-top:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-xs);background:var(--surface-3);
  color:var(--ink-soft);font-size:var(--fs-sm);line-height:1.7;
}

/* Steps / wizard */
.steps{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.step{
  display:inline-flex;align-items:center;gap:var(--s2);height:34px;padding:0 var(--s3);
  border-radius:var(--r-pill);background:var(--surface-3);color:var(--muted);
  font-size:var(--fs-sm);font-weight:700;border:1px solid var(--line);
}
.step-num{width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:grid;place-items:center;
  background:var(--line-strong);color:var(--surface);font-size:10.5px;font-weight:800}
.step.is-active{background:var(--primary-soft);color:var(--primary-ink);border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.step.is-active .step-num{background:var(--primary);color:var(--on-accent)}
.step.is-done{background:var(--success-soft);color:var(--success-ink);border-color:transparent}
.step.is-done .step-num{background:var(--success);color:#fff}
.step-sep{flex:1 1 12px;min-width:12px;height:1px;background:var(--line-strong);max-width:32px}
/* vertical numbered steps (instructions) */
.steps-vertical{display:flex;flex-direction:column;gap:var(--s3)}
.step-row{display:flex;align-items:flex-start;gap:var(--s3)}
.step-row .step-num{width:24px;height:24px;flex:0 0 24px;margin-block-start:1px;
  background:var(--primary-soft);color:var(--primary-ink);font-size:11px}
.step-row-body{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--fs-sm)}
.step-row-body b{color:var(--ink);font-weight:700}
.step-row-body span{color:var(--muted);word-break:break-word}
.wizard-step{display:flex;flex-direction:column;gap:var(--s4)}
.wizard-step-head{display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s3);border-bottom:1px solid var(--line-soft)}
.wizard-step-head .step-num{width:28px;height:28px;flex:0 0 28px;font-size:var(--fs-sm);background:var(--primary);color:var(--on-accent)}
.wizard-step-head h2{margin:0;padding:0;border:0}
.wizard-step-head .wizard-step-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.wizard-step-head p{margin:0;font-size:var(--fs-sm);color:var(--muted)}

/* A step the member has not reached yet. Dimmed and inert rather than hidden:
   seeing what comes next is what makes the order feel like four short steps
   instead of one long form, and a step that vanishes and reappears makes the
   page jump under the cursor. */
.wizard-step.is-locked{opacity:.5}
.wizard-step.is-locked>*:not(.wizard-step-head){pointer-events:none;user-select:none}
/* The notice on a step the member has not reached. It reads as a warning
   rather than a caption, because it is the answer to "why can I not type
   here" — the amber pair from the palette, the same one the app already uses
   for "needs your attention". It is display:none unless the step is locked,
   so once the step opens the notice is gone, not merely faded. */
.step-lock{
  margin-inline-start:auto;display:none;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:700;line-height:1.5;
  color:var(--warning-ink);background:var(--warning-soft);
  border:1px solid color-mix(in srgb,var(--warning) 38%,transparent);
  border-radius:var(--r-pill);padding:5px 12px;
}
.step-lock svg{width:13px;height:13px;color:var(--warning);flex:0 0 13px}
.wizard-step.is-locked .step-lock{display:inline-flex}
.wizard-step:not(.is-locked) .step-lock{display:none!important}
/* The lock icon in the step number, so the state reads at a glance even
   before the notice is looked at. */
.wizard-step.is-locked .wizard-step-head .step-num{
  background:var(--warning-soft);color:var(--warning-ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warning) 30%,transparent);
}
@media (max-width:560px){
  .step-lock{margin-inline-start:0;width:100%;justify-content:center;white-space:normal;text-align:center}
}
.steps .step.is-done .step-num{background:var(--success);color:var(--on-accent)}

/* Drafts table: a tick column and a footer that acts on the selection */
.cell-check{width:40px;padding-inline-end:0}
.cell-check input[type=checkbox]{margin:0}
.chip-sm{height:22px;padding:0 8px;font-size:10.5px;gap:4px}
/* The step-3 minimum chip. `is-relaxed` marks a symbol whose own per-order
   ceiling has lowered the floor below the admin's number, so the figure the
   member reads is the one their order is judged against. */
.min-order-chip{height:auto;min-height:28px;padding:4px 11px;flex-wrap:wrap}
.min-order-chip small{font-size:10.5px;color:inherit;opacity:.8}
.min-order-chip.is-relaxed{background:var(--info-soft);color:var(--info-ink)}
.chip-sm svg{width:12px;height:12px}
/* Broker bar — one broker at a time on the jobs page */
.broker-bar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s2);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md)}
.broker-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;
  border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:700;
  color:var(--ink-soft);text-decoration:none;border:1px solid transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.broker-tab svg{width:15px;height:15px;color:var(--muted)}
.broker-tab:hover{background:var(--surface-3);color:var(--ink)}
.broker-tab.is-active{background:var(--primary-soft);color:var(--primary-ink);
  border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.broker-tab.is-active svg{color:var(--primary)}
.broker-tab.is-disabled{color:var(--faint);cursor:not-allowed}
.broker-tab.is-disabled:hover{background:transparent;color:var(--faint)}
.broker-tab small{font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--faint)}

/* A tight body strip inside a flush card, for the filter toolbar */
.card-body-tight{padding:var(--s3) var(--s4) 0}

/* Capacity, editable in place on the workers table */
.capacity-form{display:flex;align-items:center;gap:6px}
.capacity-input{width:64px;min-height:32px;padding-inline:6px;text-align:center;
  font-variant-numeric:tabular-nums}
.capacity-form .btn{padding-inline:8px}

/* A native <dialog> for the redeploy credentials */
.modal{border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:0;
  max-width:min(460px,92vw);background:var(--surface);color:var(--ink);box-shadow:var(--sh-lg)}
.modal::backdrop{background:rgba(15,23,42,.45)}
.modal>form{padding:var(--s5)}
.modal h2{display:flex;align-items:center;gap:7px;margin:0 0 var(--s2);
  font-size:var(--fs-md);font-weight:800}
.modal h2 svg{width:17px;height:17px;color:var(--primary)}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--s2);
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}

/* ── The execution list: one compact row per job-to-be ───────────────────
   Square cards showed one order per tile and hid the fact that an aggregated
   order is several jobs. Rows put the order, the account and that row's own
   Job settings on one line, side by side. */
.exec-table{--exec-field:34px}
.exec-table th{white-space:nowrap}
.exec-table td{vertical-align:middle}
.exec-symbol{font-size:var(--fs-md);font-weight:800;color:var(--ink)}
.exec-table .cell-time{width:158px}
.exec-table .cell-num{width:92px}
.exec-table th.cell-time small,.exec-table th.cell-num small{
  display:block;font-size:10px;font-weight:600;color:var(--faint)}
.exec-table input[type=text],.exec-table input[type=number]{
  width:100%;min-height:var(--exec-field);font-size:var(--fs-sm);padding-inline:8px}
.exec-table .row-time{font-variant-numeric:tabular-nums}
.exec-table .row-queue{white-space:nowrap}
.exec-table .cell-stack small{line-height:1.5}
/* Exir rows: the WEB/MOBILE route select sits under the brokerage name. */
.exec-table .row-dispatch{min-height:var(--exec-field);font-size:var(--fs-xs);padding-inline:6px}

/* ── Admin settings: the Exir order-cap family ───────────────────────────
   Sixty-plus per-panel fields would bury the page; they collapse into a
   <details> under the one family default. */
.exir-overrides{margin-top:var(--s2)}
.exir-overrides summary{
  cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);
  padding:var(--s2) 0;user-select:none}
.exir-overrides summary:hover{color:var(--ink)}
.exir-overrides-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--s2) var(--s3);max-height:420px;overflow:auto;
  padding:var(--s2);border:1px solid var(--line);border-radius:10px}
/* The row every other selected row is measured from. */
.exec-row.is-base{background:var(--primary-soft)}
.exec-row.is-base .order-ref{color:var(--primary-ink)}
.exec-row:has(.row-pick:checked){background:var(--surface-2)}
.exec-row.is-base:has(.row-pick:checked){background:var(--primary-soft)}

/* The batch bar under the list: the shared Worker, the gap, one button. */
.exec-bar{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.exec-bar .field{margin:0}
.exec-bar .btn{align-self:flex-end}
.exec-bar-note{flex:1 1 220px;align-self:center}
.exec-hint{margin:0 var(--s5) var(--s4)}
@media (max-width:640px){
  .exec-hint{margin-inline:var(--s3)}
  .exec-bar .btn,.exec-bar .field{width:100%}
  .exec-table .cell-time,.exec-table .cell-num{width:auto}
}

.dispatch-note{display:block;margin-top:3px;font-size:10.5px;color:var(--muted);line-height:1.5}
.drafts-foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:space-between}
.drafts-foot .actions-row{margin:0}
/* buy / sell option cards */
.option-card-icon{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--muted)}
.option-card-icon svg{width:16px;height:16px}
.option-card.is-buy:has(input:checked){border-color:var(--buy);background:var(--buy-soft);box-shadow:none}
.option-card.is-buy:has(input:checked) .option-card-body b,
.option-card.is-buy:has(input:checked) .option-card-icon{color:var(--buy-ink)}
.option-card.is-buy:has(input:checked) .option-card-icon{background:color-mix(in srgb,var(--buy) 18%,transparent)}
.option-card.is-sell:has(input:checked){border-color:var(--sell);background:var(--sell-soft);box-shadow:none}
.option-card.is-sell:has(input:checked) .option-card-body b,
.option-card.is-sell:has(input:checked) .option-card-icon{color:var(--sell-ink)}
.option-card.is-sell:has(input:checked) .option-card-icon{background:color-mix(in srgb,var(--sell) 18%,transparent)}
/* sticky submit bar for long forms */
.submit-bar{
  position:sticky;inset-block-end:0;z-index:3;display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-lg);
}
.submit-bar-meta{flex:1 1 220px;min-width:0;font-size:var(--fs-sm);color:var(--muted);
  display:flex;flex-direction:column;gap:2px}
.submit-bar-meta b{color:var(--ink)}

/* Progress */
.progress{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.progress>span{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--teal-500),var(--teal-400));transition:width var(--t-slow)}
.meter-row{display:flex;flex-direction:column;gap:6px}
.meter-row .row-between{font-size:var(--fs-sm);color:var(--muted)}

/* Callout / hero band */
.hero{
  position:relative;overflow:hidden;padding:var(--s6);border-radius:var(--r-xl);color:#eaf4ff;
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 55%,#0d5c58 130%);
  box-shadow:var(--sh-md);
}
.hero::after{
  content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-8%;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.28),transparent 68%);
}
.hero h1,.hero h2{color:#fff}
.hero p{color:rgba(234,244,255,.78);max-width:60ch}
.hero .page-eyebrow{color:var(--teal-300)}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--s3)}
.hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.hero .btn-outline{--btn-bg:rgba(255,255,255,.1);--btn-ink:#fff;--btn-line:rgba(255,255,255,.28)}
.hero .btn-outline:hover{--btn-bg:rgba(255,255,255,.18);--btn-line:rgba(255,255,255,.5)}
.hero-stats{display:flex;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s3)}
.hero-stat{display:flex;flex-direction:column}
.hero-stat b{font-size:var(--fs-2xl);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2}
.hero-stat span{font-size:var(--fs-xs);color:rgba(234,244,255,.7)}
/* ── 6. Pages ───────────────────────────────────────────────────────────── */
/* Centered auth layout — min-height lets long forms scroll without clipping. */
.auth-shell{
  --auth-grad:radial-gradient(ellipse at 12% 18%,rgba(74,113,159,.18),transparent 58%),
              radial-gradient(ellipse at 88% 82%,rgba(45,212,191,.16),transparent 58%),
              linear-gradient(145deg,var(--surface-2),var(--bg) 52%,var(--accent-soft));
  display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh;
  background-color:var(--bg);background-image:var(--auth-grad);
}
[data-theme="dark"] .auth-shell{
  --auth-grad:radial-gradient(ellipse at 12% 18%,rgba(74,113,159,.22),transparent 58%),
              radial-gradient(ellipse at 88% 82%,rgba(13,148,136,.18),transparent 58%),
              linear-gradient(145deg,#0b1930,var(--navy-950) 65%,var(--navy-900));
}
.auth-main{min-width:0;display:flex;align-items:center;justify-content:center;padding:var(--s7) var(--s5)}
.auth-card{position:relative;min-width:0;width:100%;max-width:428px;display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s6);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-xl);box-shadow:var(--sh-lg)}
/* Keep the solid surface above as a readable fallback without glass support. */
@supports (background:color-mix(in srgb,white 90%,transparent)) and ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .auth-card{background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}
.auth-card-head{display:flex;flex-direction:column;gap:2px;text-align:center}
.auth-card-head h1{font-size:var(--fs-2xl)}
.auth-card-head p{color:var(--muted);font-size:var(--fs-sm);margin:0}
.auth-mark{width:46px;height:46px;margin:0 auto var(--s1);border-radius:14px;display:grid;place-items:center;
  font-size:20px;font-weight:900;color:#04211f;background:linear-gradient(140deg,var(--teal-300),var(--teal-600));
  box-shadow:0 8px 22px rgba(13,148,136,.3)}
.auth-mark svg{width:22px;height:22px}
/* auth-only rhythm: tighter than the app forms so the card reads as one block */
.auth-card .form{gap:var(--s3)}
.auth-card .field{gap:4px}
.auth-card .hint{line-height:1.5}
.auth-card .form-grid{gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
.auth-card-register{max-width:560px}
.password-input>input{padding-inline-end:42px}
.password-toggle{position:absolute;inset-inline-end:7px;width:30px;height:30px;border:0;border-radius:var(--r-xs);
  display:grid;place-items:center;background:transparent;color:var(--muted);cursor:pointer;transition:all var(--t-fast)}
.password-toggle:hover,.password-toggle:focus-visible{background:var(--surface-3);color:var(--primary)}
.password-toggle svg{width:17px;height:17px}
.auth-card .alert{padding:var(--s3);border-radius:var(--r-sm);line-height:1.6}
.auth-card .btn-lg{height:46px;font-size:var(--fs-md);margin-top:var(--s1)}
.auth-alt{text-align:center;font-size:var(--fs-sm);color:var(--muted);padding-top:var(--s3);border-top:1px solid var(--line-soft)}
.auth-alt a{font-weight:700}
.auth-theme{position:absolute;inset-block-start:var(--s5);inset-inline-end:var(--s5);z-index:5}

/* ── Captcha (official Cap widget) ───────────────────────────────────────
   Cap exposes these properties specifically for host-page theming. Mapping
   them to the design tokens keeps the previous control's light/dark appearance
   without forking the widget's internal CSS. */
.cap-slot{display:block;direction:rtl}
.cap-slot[hidden]{display:none}
.cap-slot cap-widget{
  display:block;width:100%;
  --cap-background:var(--surface-2);
  --cap-border-color:var(--line);
  --cap-border-radius:var(--r-md);
  --cap-widget-height:46px;
  --cap-widget-width:100%;
  --cap-widget-padding:var(--s3) var(--s4);
  --cap-gap:var(--s3);
  --cap-color:var(--ink);
  --cap-checkbox-size:22px;
  --cap-checkbox-border:1.5px solid var(--line-strong);
  --cap-checkbox-border-radius:var(--r-xs);
  --cap-checkbox-background:var(--surface);
  --cap-checkbox-margin:0;
  --cap-font:var(--font-sans);
  --cap-spinner-color:var(--primary);
  --cap-spinner-background-color:var(--primary-ring);
  --cap-spinner-thickness:3px;
}

/* Quick links (dashboards) */
.quick-links-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.quick-link{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:all var(--t-fast);
}
.quick-link:hover{border-color:var(--primary);background:var(--surface-2);transform:translateY(-2px);
  box-shadow:var(--sh-sm);color:var(--ink)}
.quick-link-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary)}
.quick-link-icon svg{width:18px;height:18px}
.quick-link-body{display:flex;flex-direction:column;min-width:0}
.quick-link-body b{font-size:var(--fs-md);font-weight:700}
.quick-link-body span{font-size:var(--fs-xs);color:var(--muted)}
.quick-link-arrow{margin-inline-start:auto;color:var(--faint);transition:transform var(--t-fast)}
.quick-link:hover .quick-link-arrow{transform:translateX(4px);color:var(--primary)}

/* CTA band */
.cta-band{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;padding:var(--s5) var(--s6);
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  border-inline-start:3px solid var(--primary);box-shadow:var(--sh-sm)}
.cta-content{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
.cta-content b{font-size:var(--fs-lg);font-weight:800}
.cta-content span{font-size:var(--fs-sm);color:var(--muted)}
.link-code{
  font-family:var(--font-mono);font-size:30px;font-weight:800;letter-spacing:.3em;text-align:center;
  background:var(--primary-soft);color:var(--primary-ink);border:1px dashed color-mix(in srgb,var(--primary) 40%,transparent);
  border-radius:var(--r-md);padding:var(--s4) var(--s3);margin:var(--s3) 0;user-select:all;direction:ltr;
}
/* Floating chat button (FAB) — the only fixed trigger, identical on every page */
.chat-fab{
  position:fixed;z-index:var(--z-fab);
  inset-inline-start:var(--fab-inline);
  inset-block-end:calc(var(--fab-block) + var(--fab-lift));
  width:var(--fab-size);height:var(--fab-size);flex:0 0 auto;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;
  font-family:inherit;color:#fff;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-600));
  box-shadow:0 10px 26px rgba(8,18,32,.3),0 2px 6px rgba(8,18,32,.18),
             inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),opacity var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
.chat-fab svg{width:23px;height:23px}
.chat-fab:hover{background:linear-gradient(135deg,var(--navy-700),var(--navy-500));transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(8,18,32,.36),0 3px 8px rgba(8,18,32,.2)}
.chat-fab:active{transform:translateY(0) scale(.96);box-shadow:0 6px 16px rgba(8,18,32,.26)}
.chat-fab .chat-badge{top:-2px;inset-inline-end:-2px;border-color:var(--navy-800)}
/* a sticky submit bar owns the bottom of the content column — step the FAB over it */
body:has(.submit-bar){--fab-lift:88px}
/* while a conversation panel is open the FAB would sit under it: fade it out */
body:has(.chat-popup:not(.hidden)) .chat-fab{opacity:0;transform:scale(.9);pointer-events:none}

/* Chat popup (user + admin) */
.chat-popup{
  position:fixed;inset-block-end:var(--fab-block);inset-inline-start:var(--fab-inline);z-index:var(--z-pop);
  width:min(378px,calc(100vw - 32px));
  max-height:min(608px,calc(100vh - 110px));max-height:min(608px,calc(100dvh - 110px));
  display:flex;flex-direction:column;overflow:hidden;transform-origin:100% 100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop);
  animation:pop-in var(--t-slow) both;
}
.chat-popup.hidden{display:none !important}
@keyframes pop-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.admin-chat-popup{width:min(720px,calc(100vw - 32px));
  max-height:min(640px,calc(100vh - 110px));max-height:min(640px,calc(100dvh - 110px))}
.chat-popup-head{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);flex:0 0 auto;
  color:#fff;background:linear-gradient(135deg,var(--navy-800),var(--navy-600));
}
.chat-popup-head b{font-size:var(--fs-md);font-weight:700;display:flex;align-items:center;gap:var(--s2)}
.chat-popup-head svg{width:17px;height:17px}
.chat-close{
  margin-inline-start:auto;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:var(--r-xs);
  background:rgba(255,255,255,.12);color:#fff;font-size:17px;line-height:1;cursor:pointer;transition:background var(--t-fast);
}
.chat-close:hover{background:rgba(255,255,255,.26)}
.chat-popup-body{
  flex:1;min-height:180px;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);
  background:var(--surface-2);
}
.chat-empty{margin:auto;text-align:center;color:var(--muted);font-size:var(--fs-sm);padding:var(--s5)}
.chat-msg{max-width:82%;display:flex;flex-direction:column;gap:3px;padding:var(--s3);border-radius:var(--r-md);
  font-size:var(--fs-sm);line-height:1.75;box-shadow:var(--sh-xs);position:relative}
.chat-msg.user{align-self:flex-start;background:var(--primary);color:#fff;border-end-start-radius:var(--r-xs)}
[data-theme="dark"] .chat-msg.user{color:#04211f}
.chat-msg.reply{align-self:flex-end;background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-end-end-radius:var(--r-xs)}
.chat-msg-text{white-space:pre-wrap;word-break:break-word}
.chat-time{font-size:9.5px;opacity:.7;font-variant-numeric:tabular-nums;align-self:flex-end}
.chat-quote{
  padding:5px var(--s2);margin-bottom:3px;border-radius:var(--r-xs);font-size:var(--fs-xs);opacity:.85;
  border-inline-start:2px solid currentColor;background:rgba(0,0,0,.08);
}
.chat-msg.reply .chat-quote{background:var(--surface-3)}
.chat-reply-btn{
  align-self:flex-start;margin-top:2px;padding:0;border:0;background:none;color:inherit;opacity:.65;
  font-family:inherit;font-size:var(--fs-xs);font-weight:700;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;
}
.chat-reply-btn:hover{opacity:1}
.chat-quote-bar{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);flex:0 0 auto;
  background:var(--warning-soft);color:var(--warning-ink);font-size:var(--fs-xs);
  border-top:1px solid color-mix(in srgb,var(--warning) 26%,transparent);
}
.chat-quote-bar.hidden{display:none !important}
.chat-quote-bar-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-quote-cancel{width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.08);color:inherit;
  cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center}
.chat-quote-cancel:hover{background:var(--danger);color:#fff}
.chat-popup-foot{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s3);flex:0 0 auto;
  background:var(--surface);border-top:1px solid var(--line);
}
.chat-popup-foot.hidden{display:none !important}
.chat-popup-foot input[type=text]{min-height:38px;border-radius:var(--r-pill);padding:0 var(--s4)}
.chat-popup-foot .btn{border-radius:var(--r-pill);height:38px}
/* Admin chat: two-pane */
.admin-chat-panels{display:grid;grid-template-columns:238px minmax(0,1fr);flex:1;min-height:0}
.admin-chat-list{
  border-inline-end:1px solid var(--line);overflow-y:auto;padding:var(--s2);
  display:flex;flex-direction:column;gap:2px;background:var(--surface-2);min-height:0;
}
.admin-chat-list .chat-empty{padding:var(--s5) var(--s3)}
.admin-chat-thread{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-thread-head{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);flex:0 0 auto;
  border-bottom:1px solid var(--line);background:var(--surface);font-size:var(--fs-sm);font-weight:700;
}
.chat-thread-head b{font-size:var(--fs-sm)}
.chat-thread-head .muted{font-weight:500}
.chat-card{
  width:100%;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border:0;
  background:transparent;border-radius:var(--r-sm);cursor:pointer;text-align:start;font-family:inherit;
  transition:background var(--t-fast);
}
.chat-card:hover{background:var(--surface-3)}
.chat-card.active{background:var(--primary-soft)}
.chat-card-avatar{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-weight:800;font-size:var(--fs-sm);background:linear-gradient(140deg,var(--teal-400),var(--navy-600));
}
.chat-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chat-card-info b{font-size:var(--fs-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-card-info small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.chat-card-meta small{font-size:9.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.chat-badge-inline{
  min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--danger);color:#fff;font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums;
}

/* Order detail: highlight panel */
.detail-hero{
  display:flex;align-items:flex-start;gap:var(--s5);flex-wrap:wrap;padding:var(--s5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  border-top:3px solid var(--detail-hue,var(--primary));
}
.detail-hero.is-pending{--detail-hue:var(--warning)}
.detail-hero.is-approved{--detail-hue:var(--success)}
.detail-hero.is-rejected{--detail-hue:var(--danger)}
.detail-hero.is-cancelled{--detail-hue:var(--faint)}
.detail-hero-main{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.detail-hero-figures{display:flex;gap:var(--s6);flex-wrap:wrap}
.symbol-title{font-size:var(--fs-xl);font-weight:800;color:var(--ink);line-height:1.3}
.figure{display:flex;flex-direction:column;gap:2px}
.figure-label{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.figure-value{font-size:var(--fs-xl);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.25}
.figure-value.is-text{font-size:var(--fs-lg)}
.figure-value small{font-size:var(--fs-sm);font-weight:600;color:var(--muted);margin-inline-start:3px}
.decision-panel{display:flex;flex-direction:column;gap:var(--s3)}
.decision-panel .btn{justify-content:center}
.danger-zone{border-inline-start:3px solid var(--danger)}
.danger-zone h2 svg{color:var(--danger)}

/* Copy button */
.copy-btn{border:0;background:none;padding:2px;color:var(--faint);cursor:pointer;border-radius:var(--r-xs);
  display:inline-grid;place-items:center;transition:all var(--t-fast)}
.copy-btn svg{width:14px;height:14px}
.copy-btn:hover{color:var(--primary);background:var(--primary-soft)}
.copy-btn.is-copied{color:var(--success)}

/* Divider with label */
.divider{display:flex;align-items:center;gap:var(--s3);color:var(--faint);font-size:var(--fs-xs);font-weight:600}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* Skeleton */
.skeleton{border-radius:var(--r-xs);background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;min-height:12px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* ── 7. Utilities ───────────────────────────────────────────────────────── */
.mobile-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--overlay);
  opacity:0;pointer-events:none;transition:opacity var(--t-med);-webkit-tap-highlight-color:transparent}
.mobile-overlay.open{opacity:1;pointer-events:auto;touch-action:none}
.mt-0{margin-top:0}.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--s2)}.mb-3{margin-bottom:var(--s3)}.mb-4{margin-bottom:var(--s4)}
.text-center{text-align:center}.text-start{text-align:start}.text-end{text-align:end}
.w-full{width:100%}
.flex-1{flex:1;min-width:0}
.gap-2{gap:var(--s2)}.gap-3{gap:var(--s3)}.gap-4{gap:var(--s4)}
.c-success{color:var(--success)}.c-danger{color:var(--danger)}.c-warn{color:var(--warning)}.c-primary{color:var(--primary)}
.scroll-y{overflow-y:auto}
.max-h-320{max-height:320px}
ol.muted,ul.muted{color:var(--muted);font-size:var(--fs-sm);line-height:1.9}
ol.muted li,ul.muted li{margin-bottom:var(--s2)}

/* ── 8. Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .layout-split{grid-template-columns:minmax(0,1fr)}
  .sticky-col{position:static}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  :root{--side-w:250px}
  .main-content{padding:var(--s5) var(--s5) var(--s8)}
  .topbar{padding:0 var(--s5)}
}
@media (max-width:900px){
  :root{
    /* the sidebar is a drawer from here down, so the FAB owns the real corner */
    --fab-inline:calc(var(--s4) + var(--safe-is));
    --fab-block:calc(var(--s4) + var(--safe-be));
    --fab-size:52px;
  }
  .menu-toggle{display:inline-flex}
  .sidebar{
    position:fixed;inset-block:0;inset-inline-start:0;height:100vh;height:100dvh;
    width:min(86vw,300px);flex-basis:auto;z-index:var(--z-drawer);
    padding-block-end:calc(var(--s4) + var(--safe-be));
    transform:translateX(100%);visibility:hidden;will-change:transform;box-shadow:none;
    transition:transform var(--t-slow),visibility 0s linear var(--t-slow);
  }
  .sidebar.open{transform:none;visibility:visible;box-shadow:var(--sh-pop);
    transition:transform var(--t-slow),visibility 0s}
  /* drawer open: freeze the page behind it, keep the drawer itself scrollable */
  body.nav-open{overflow:hidden}
  html:has(body.nav-open){overflow:hidden}
  .content-shell{width:100%}
  .page-content{overflow-x:clip}
  .main-content{padding-block-end:calc(var(--s9) + var(--safe-be))}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .admin-chat-panels{grid-template-columns:minmax(0,1fr)}
  .admin-chat-list{max-height:180px;border-inline-end:0;border-bottom:1px solid var(--line)}
  .admin-chat-popup{width:calc(100vw - 24px)}
  body:has(.submit-bar){--fab-lift:96px}
  .toast-region{inset-inline-start:calc(var(--s4) + var(--safe-is))}
}
@media (min-width:901px){
  /* if the viewport grows while the drawer is open, the scrim goes with it */
  .mobile-overlay{display:none}
}
@media (max-width:640px){
  :root{--topbar-h:60px}
  .main-content{padding:var(--s4) var(--s4) calc(var(--s9) + var(--safe-be))}
  .topbar{padding:0 var(--s4);gap:var(--s3)}
  .crumb-title{font-size:var(--fs-md)}
  .page-content{gap:var(--s4)}
  .page-head h1{font-size:var(--fs-xl)}
  .section-card,.card-body,.card-head{padding:var(--s4)}
  .card-foot{padding:var(--s3) var(--s4)}
  .stat{padding:var(--s4)}
  .stat-value{font-size:var(--fs-2xl)}
  .avatar span,.avatar{font-size:var(--fs-xs)}
  .hero{padding:var(--s5)}
  .toolbar{padding:var(--s3);gap:var(--s2)}
  .toolbar-search{flex-basis:100%;max-width:none}
  .toolbar-end{margin-inline-start:0;width:100%}
  .btn{height:38px}
  /* primary CTAs keep a comfortable touch target even in the compact scale */
  .btn-lg{height:44px}
  .kv{flex-direction:column;align-items:flex-start;gap:2px}
  .kv-key{flex-basis:auto;max-width:none}
  .kv-val{text-align:start;width:100%}
  .tab{padding:0 var(--s3)}
  .tabs-underline{gap:var(--s4)}
  .empty-state{padding:var(--s7) var(--s4)}
  .empty-icon{width:56px;height:56px;border-radius:18px}
  .submit-bar{padding:var(--s3) var(--s4);gap:var(--s3)}
  /* the sticky bar becomes one caption row + evenly split actions */
  .submit-bar-meta{flex-basis:100%}
  .submit-bar .btn{flex:1 1 auto;justify-content:center}
  .link-code{font-size:23px;letter-spacing:.2em;padding:var(--s3) var(--s2)}
  /* The in-card theme toggle stays out of the centering calculation. */
  .auth-main{padding:var(--s5) var(--s4)}
  .auth-card{padding:var(--s5);border-radius:var(--r-lg)}
  .auth-card-head h1{font-size:var(--fs-xl)}
  .auth-mark{width:42px;height:42px;border-radius:12px}
  .auth-mark svg{width:20px;height:20px}
  .chat-popup,.admin-chat-popup{
    inset-inline:calc(var(--s3) + var(--safe-is)) var(--s3);width:auto;
    inset-block-end:calc(var(--s3) + var(--safe-be));
    max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px)}
  .toast-region{inset-inline:calc(var(--s3) + var(--safe-is)) var(--s3);
    inset-block-start:calc(var(--topbar-h) + var(--s2));max-width:none}
  .pagination a,.pagination span{min-width:34px;height:34px}
  .figure-value{font-size:var(--fs-lg)}
  .detail-hero-figures{gap:var(--s4)}
}
@media (max-width:430px){
  .auth-card .form-grid{grid-template-columns:minmax(0,1fr)}
  .topbar .avatar{display:none}
  .link-code{font-size:20px;letter-spacing:.14em}
}
/* Card-mode tables on small screens */
@media (max-width:760px){
  .table-cards thead{display:none}
  .table-cards,.table-cards tbody,.table-cards tr,.table-cards td{display:block;width:100%}
  /* the rows become a padded stack inside the flush card, so they never touch
     the card border and never double up on chrome */
  .table-cards tbody{display:flex;flex-direction:column;gap:var(--s3)}
  .card-flush .table-cards tbody{padding:var(--s4)}
  .table-cards tbody tr{
    margin:0;padding:var(--s3) var(--s4);border:1px solid var(--line);
    border-radius:var(--r-md);background:var(--surface-2);box-shadow:none;
  }
  .table-cards tbody tr:hover{background:var(--surface-2)}
  .table-cards tbody td{
    border:0;border-bottom:1px dashed var(--line);padding:7px 0;min-width:0;
    display:flex;align-items:center;justify-content:space-between;gap:var(--s3);text-align:end;
    overflow-wrap:anywhere;
  }
  .table-cards tbody td:last-child{border-bottom:0}
  .table-cards tbody td::before{
    content:attr(data-label);flex:0 0 auto;color:var(--muted);font-size:var(--fs-xs);
    font-weight:700;white-space:nowrap;text-align:start;
  }
  .table-cards tbody td[data-label=""]::before{content:none}
  /* the row action is the card's call to action: never hover-hidden, full width */
  .table-hover-actions .row-actions{opacity:1}
  .table-cards tbody td[data-label=""]{padding-top:var(--s3);border-bottom:0;gap:var(--s2)}
  .table-cards tbody td[data-label=""]>*{flex:1 1 0;min-width:0}
  .table-cards tbody td[data-label=""] .btn{width:100%;justify-content:center}
  .table-cards tbody td[data-label=""] .cell-inline,
  .table-cards tbody td[data-label=""] .inline-form{display:flex;width:100%;gap:var(--s2)}
  .table-cards tbody td[data-label=""] .cell-inline>*{flex:1 1 0;min-width:0}
  /* long values wrap instead of pushing the card sideways */
  .table-cards tbody td .symbol-cell,
  .table-cards tbody td .cell-stack{align-items:flex-end;text-align:end}
  .table-cards tbody td .cell-inline{flex-wrap:wrap;justify-content:flex-end}
  .table-cards tbody td .id-pill{height:auto;min-height:24px;padding:2px 8px;word-break:break-all}
  .table-wrap:has(.table-cards){overflow:visible}
  .tabs{-webkit-overflow-scrolling:touch;scroll-padding-inline:var(--s2)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media print{
  .sidebar,.topbar,.chat-fab,.chat-popup,.toast-region,.actions-row,.pagination,.mobile-overlay{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ccc}
}

/* ── Second factor ─────────────────────────────────────────────────────────
   The setup page shows a secret to be typed into an authenticator and, once,
   a list of recovery codes. Both are read character by character off the
   screen, so they are monospaced, left-to-right regardless of page direction,
   and allowed to wrap rather than being cut off on a phone. */
.mfa-secret code,
.mfa-uri code {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--surface-2, rgba(127, 127, 127, .09));
  border: 1px solid var(--border, rgba(127, 127, 127, .22));
  border-radius: 10px;
  padding: 12px 14px;
  word-break: break-all;
  user-select: all;
}
.mfa-secret code { font-size: 1.15rem; letter-spacing: .12em; }
.mfa-uri code { font-size: .78rem; opacity: .85; }

.mfa-codes {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.mfa-codes code {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: .08em;
  text-align: center;
  padding: 10px 6px;
  border-radius: 8px;
  background: var(--surface-2, rgba(127, 127, 127, .09));
  border: 1px solid var(--border, rgba(127, 127, 127, .22));
  user-select: all;
}

.mfa-recovery { margin-top: 18px; }
.mfa-recovery > summary {
  cursor: pointer;
  font-size: .86rem;
  opacity: .8;
  padding: 6px 0;
}
.mfa-recovery > summary:hover { opacity: 1; }

/* Delete, on a member's own message. Sits beside the reply arrow and appears
   on hover like it does, so a bin is never sitting under the pointer waiting
   to be hit by accident. */
.chat-del-btn {
  background: none;
  border: 0;
  padding: 0 2px;
  margin-inline-start: 4px;
  cursor: pointer;
  font-size: .82em;
  line-height: 1;
  opacity: 0;
  transition: opacity .12s ease;
  color: inherit;
}
.chat-msg:hover .chat-del-btn,
.chat-del-btn:focus-visible { opacity: .75; }
.chat-del-btn:hover { opacity: 1; }

/* ── Symbol card (order form, left column) ───────────────────────────────────
   Geometry is the Figma frame "AsSplitArea" to the pixel — 400px wide, the
   38.4/153.6/153.6/38.4 queue grid, 36px header rows over 22.79px data rows,
   the 2px band rail. Colour is the project's own tokens rather than the
   frame's fixed hexes, so the card follows the light/dark theme and sits next
   to the order form as one surface instead of a pasted-in screenshot.

   Two directions on purpose. The card reads right-to-left like the rest of the
   panel, but the queue table and the price band are laid out left-to-right,
   because in both of them position means price: the band ascends from the
   floor on the left to the ceiling on the right, and the queue's two halves
   mirror each other around the spread. Flipping those would move the numbers
   without moving what they mean. */

.order-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--symc-w,400px);
  gap:var(--s5);
  align-items:start;
}
.order-layout>form{min-width:0}
.order-aside{position:sticky;top:calc(var(--topbar-h) + var(--s4));min-width:0}

.symbol-card{
  /* Figma → project. Each line is one of the frame's fixed colours mapped to
     the token that carries the same meaning here. */
  --symc-ink:var(--ink);            /* #212529 */
  --symc-muted:var(--muted);        /* #707380 */
  --symc-faint:var(--faint);        /* #949ba2 */
  --symc-up:var(--buy);             /* #1bbf89 */
  --symc-down:var(--sell);          /* #db524b */
  --symc-track:var(--surface-3);    /* #eff0f4 */
  --symc-row:22.792px;

  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  font-size:13px;
  color:var(--symc-ink);
}
.symbol-card .symc-panel{padding:var(--s2);border-radius:var(--r-xs);background:var(--surface)}

/* ── header ─────────────────────────────────────────────────────────────── */
.symc-head{padding:var(--s2);border-bottom:1px solid var(--line-soft)}
.symc-id-row{display:flex;align-items:center;gap:var(--s2);justify-content:space-between}
/* Dot then name, left to right, as the frame has them. */
.symc-id{display:flex;align-items:center;gap:var(--s1);min-width:0;direction:ltr}
.symc-title{font-size:20px;font-weight:500;line-height:24px;white-space:nowrap}
.symc-state{
  width:10px;height:10px;border-radius:3px;flex:0 0 10px;
  background:var(--faint);
}
.symc-state.is-open{background:var(--symc-up)}
.symc-state.is-halted{background:var(--warning)}
/* Price then delta, left to right, as the frame has them. Left in the page's
   own direction the pair mirrors and the delta lands in front of the number it
   qualifies. */
.symc-last{display:flex;align-items:baseline;gap:var(--s1);white-space:nowrap;direction:ltr}
.symc-last>b{font-size:20px;font-weight:500;line-height:24px;direction:ltr}
.symc-last>small{font-size:15.313px;line-height:18.375px;direction:ltr}
.symc-group{
  font-size:11.375px;line-height:17.063px;color:var(--symc-muted);
  margin-block-start:2px;min-height:17px;
}
.symc-up{color:var(--symc-up)}
.symc-down{color:var(--symc-down)}

.symc-search{position:relative;flex:0 1 179px;min-width:120px}
.symc-search>input{
  width:100%;height:32px;border:1px solid var(--line-strong);border-radius:var(--r-xs);
  background:var(--surface);color:var(--symc-ink);
  font:inherit;font-size:13px;padding-inline:12px 34px;
}
.symc-search>input::placeholder{color:var(--faint)}
.symc-search>input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.symc-search>svg{
  position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;
}
.symc-results{
  position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:var(--z-pop);
  margin:0;padding:4px;list-style:none;max-height:240px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xs);
  box-shadow:var(--sh-md);
}
.symc-results li{padding:6px 8px;border-radius:var(--r-xs);cursor:pointer;font-size:13px}
.symc-results li:hover,.symc-results li[aria-selected="true"]{background:var(--surface-3)}

.symc-subline{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) 0 0;font-size:13px;line-height:19.5px;
}
.symc-kv{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.symc-kv>i{font-style:normal;color:var(--symc-muted)}
.symc-kv>b{font-weight:400;direction:ltr}
.symc-kv>em{font-style:normal;direction:ltr}

.symc-actions{display:flex;gap:var(--s2);padding-block-start:var(--s2);direction:ltr}
.symc-btn{
  flex:1 1 0;height:36px;border-radius:var(--r-sm);
  border:1.333px solid currentColor;background:transparent;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
}
.symc-btn.is-buy{color:var(--symc-up)}
.symc-btn.is-sell{color:var(--symc-down)}
.symc-btn.is-buy:hover,.symc-btn.is-buy.is-active{background:var(--buy-soft)}
.symc-btn.is-sell:hover,.symc-btn.is-sell.is-active{background:var(--sell-soft)}
.symc-btn.is-active{box-shadow:inset 0 0 0 1px currentColor}

/* ── today's band ───────────────────────────────────────────────────────── */
.symc-range{direction:ltr;padding:var(--s6) var(--s3) var(--s4)}
.symc-range-scale{
  display:flex;align-items:flex-end;justify-content:space-between;
  font-size:11.2px;line-height:16.8px;color:var(--symc-faint);
}
.symc-range-mark{position:relative;padding-block-end:4px}
.symc-range-mark::after{
  content:"";position:absolute;inset-inline-start:50%;top:100%;
  width:0;height:11px;border-inline-start:1.333px dashed var(--symc-faint);opacity:.45;
}
.symc-range-track{
  position:relative;height:2px;margin-block-start:6px;border-radius:var(--r-xs);
  background:var(--symc-track);
}
.symc-range-fill{
  position:absolute;inset-block-start:-3.5px;inset-inline-start:0;
  height:9px;border-radius:2px;background:var(--symc-up);width:0;
  transition:width var(--t-med);
}
.symc-range-cursor{
  position:absolute;top:-9px;width:0;height:0;transform:translateX(-4px);
  border-inline:4px solid transparent;border-block-start:6px solid var(--symc-ink);
  transition:inset-inline-start var(--t-med);
}
/* The rail is not a verdict. It says where in today's permitted band the price
   currently sits, which is as worth knowing on a red day as on a green one, so
   it keeps one colour rather than restating the delta three lines above it. */

/* ── the queue ──────────────────────────────────────────────────────────── */
.symc-book{direction:ltr;padding-block-end:var(--s3)}
.symc-book-grid{
  display:grid;
  grid-template-columns:38.396px minmax(0,1fr) minmax(0,1fr) 38.396px;
  align-items:stretch;
}
.symc-th{
  display:flex;align-items:center;height:36px;padding:1px;
  font-size:12px;line-height:18px;font-weight:700;color:var(--symc-muted);
}
.symc-th.is-count{justify-content:center}
.symc-th.is-pair{justify-content:space-between;padding-inline:8px}
.symc-td{
  display:flex;align-items:center;height:var(--symc-row);padding:1px;
  font-size:12px;line-height:18px;
}
.symc-td.is-count{justify-content:center}
.symc-td.is-pair{position:relative;overflow:hidden;border-radius:1.6px}
.symc-bar{
  position:absolute;inset-block:1px;inset-inline-start:0;width:0;
  border-radius:1.6px;transition:width var(--t-med);
}
.symc-td.is-buy .symc-bar{background:color-mix(in srgb,var(--symc-up) 50%,transparent)}
.symc-td.is-sell .symc-bar{background:color-mix(in srgb,var(--symc-down) 50%,transparent)}
.symc-pair{
  position:relative;display:flex;flex:1 1 auto;align-items:center;
  justify-content:space-between;padding-inline:5px;direction:ltr;
}
.symc-pair>i{font-style:normal}

.symc-book-total{display:flex;align-items:center;gap:var(--s2);padding-block-start:var(--s1)}
.symc-total-label{font-size:11.375px;line-height:17.063px;color:var(--symc-muted)}
.symc-total-rule{flex:1 1 auto;height:1px;background:var(--line-soft)}
.symc-book-sums{padding-block-start:var(--s1);font-size:13px;line-height:19.5px}
.symc-book-sums .symc-td{height:20px;font-size:13px}
.symc-sum{display:flex;align-items:center;padding-inline:4px;font-size:13px;line-height:19.5px}
.symc-sum.is-buy{color:var(--symc-up);justify-content:flex-start}
.symc-sum.is-sell{color:var(--symc-down);justify-content:flex-start}

/* ── collapsible sections ───────────────────────────────────────────────── */
.symc-section{padding:0}
.symc-section-head{
  display:flex;align-items:center;gap:var(--s2);width:100%;height:40px;
  padding-inline:var(--s2);border:0;background:var(--surface);
  border-block-start:1px solid var(--line-soft);
  font:inherit;font-size:13px;font-weight:700;color:var(--symc-ink);
  cursor:pointer;text-align:start;
}
.symc-section-head>b{font-weight:700}
.symc-section-head>svg{
  margin-inline-start:auto;color:var(--muted);
  transition:transform var(--t-fast);transform:rotate(-90deg);
}
.symc-section-head[aria-expanded="false"]>svg{transform:rotate(90deg)}
.symc-section-head[aria-expanded="false"]+.symc-section-body{display:none}
.symc-section-body{padding:var(--s3)}

.symc-returns{display:flex;flex-direction:column;gap:var(--s1)}
/* Left to right, like the frame: the bar that carries the number on the left,
   the period in the middle, the empty counterweight on the right. */
.symc-return-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:var(--s3);direction:ltr}
.symc-return-track{
  position:relative;height:14px;border-radius:var(--r-xs);background:var(--symc-track);
  overflow:hidden;
}
.symc-return-track>b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:18px;font-weight:400;color:var(--symc-ink);direction:ltr;
}
.symc-return-fill{
  position:absolute;inset-block:0;width:0;border-radius:16px;background:var(--symc-up);
  transition:width var(--t-med);
}
.symc-return-track.is-gain .symc-return-fill{inset-inline-start:0}
.symc-return-track.is-loss .symc-return-fill{inset-inline-end:0;background:var(--symc-down)}
.symc-return-name{
  min-width:35px;padding-inline:var(--s2);text-align:center;
  font-size:11.375px;line-height:17.063px;color:var(--symc-muted);white-space:nowrap;
}

.symc-info{padding:var(--s2)}
.symc-info-row{
  display:flex;align-items:center;gap:var(--s3);
  padding:4px var(--s2);border-radius:var(--r-xs);min-height:28px;
}
.symc-info-row:nth-child(even){background:var(--symc-track)}
.symc-info-cell{display:flex;flex:1 1 0;min-width:0;align-items:baseline;
  justify-content:space-between;gap:var(--s2)}
.symc-info-cell>i{font-style:normal;font-size:11.375px;line-height:17.063px;
  color:var(--symc-muted);white-space:nowrap}
.symc-info-cell>b{font-weight:400;font-size:13px;line-height:19.5px;direction:ltr;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.symc-info-cell>b:not([dir]){direction:rtl}

/* ── the states that are not a price ────────────────────────────────────── */
.symc-overlay{display:none;padding:var(--s8) var(--s5);text-align:center}
.symc-overlay-inner{display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  color:var(--muted);font-size:var(--fs-sm)}
.symc-overlay-inner>svg{color:var(--faint)}
.symbol-card.is-blank>.symc-panel,
.symbol-card.is-blank>.symc-section{display:none}
.symbol-card.is-blank .symc-overlay{display:block}
.symbol-card.is-error .symc-overlay-inner{color:var(--danger-ink)}

.symc-loading{
  position:absolute;inset-inline:0;top:0;height:2px;overflow:hidden;background:transparent;
}
.symc-loading::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-40%;width:40%;
  background:var(--primary);animation:symc-sweep 1.1s linear infinite;
}
@keyframes symc-sweep{to{inset-inline-start:100%}}

/* Stale data still says what it is. Dimming the whole card on every poll would
   flicker four times a minute; this only fires when a poll has actually failed
   and the numbers on screen are older than they look. */
.symbol-card.is-stale .symc-book,
.symbol-card.is-stale .symc-head{opacity:.55;transition:opacity var(--t-med)}

@media (max-width:1180px){
  .order-layout{grid-template-columns:minmax(0,1fr)}
  .order-aside{position:static;order:-1}
  .symbol-card{--symc-w:100%}
}