/* RDK Desk -- colours and type after americanexpress.bank.in: Amex blue
   #006FCF (deep #00175A), ink #333333 on a #ECEDEE canvas with white cards,
   Amex green and red for profit and loss. Ubuntu for text and headings,
   DM Mono for prices and times.
   Layout from the Daylight design: https://claude.ai/artifact/RNmBeR3zBgnvjVFNSw3R6k
   Self-contained: fonts served from /static (open licences), inline SVGs only (strict CSP). */

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 100 450;
  font-display: swap;
  src: url("../static/ubuntu-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 100 450;
  font-display: swap;
  src: url("../static/ubuntu-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 451 640;
  font-display: swap;
  src: url("../static/ubuntu-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 451 640;
  font-display: swap;
  src: url("../static/ubuntu-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 641 900;
  font-display: swap;
  src: url("../static/ubuntu-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 641 900;
  font-display: swap;
  src: url("../static/ubuntu-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Mono comes in fixed weights: 400 serves the lighter band, 500 the heavier. */
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 100 450;
  font-display: swap;
  src: url("../static/dm-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 100 450;
  font-display: swap;
  src: url("../static/dm-mono-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 451 900;
  font-display: swap;
  src: url("../static/dm-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 451 900;
  font-display: swap;
  src: url("../static/dm-mono-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Light (the default look). */
:root {
  color-scheme: light dark;
  --bg: #ecedee;
  --bg-accent: none;
  --panel: #ffffff;
  --panel-2: #f7f8f9;
  --panel-3: #eef0f2;
  --text: #333333;
  --muted: #53565a;
  --dim: #75787b;
  --line: #dcdddf;
  --line-2: #c8c9c7;

  --brand: #006fcf;          /* cobalt: primary buttons, the logo, the P&L hero */
  --brand-ink: #ffffff;      /* text on the brand colour */
  --accent: #006fcf;
  --accent-2: #00175a;
  --accent-bg: #e6f1fb;
  --grad: #006fcf;
  --brand-glow: rgba(0,111,207,.32);

  --pos: #008767;
  --pos-bg: #e5f3ef;
  --neg: #b42c01;
  --neg-bg: #fbe9e5;
  --on-neg: #ffffff;
  --warn: #8a4b00;
  --warn-bg: #fff1db;
  --info: #006fcf;
  --info-bg: #e6f1fb;
  --live: #008767;
  --live-bg: #e5f3ef;
  --paper: #8a4b00;
  --paper-bg: #fff1db;

  /* Dashboard icon tiles: solid colours, white icons. */
  --badge-ink: #ffffff;
  --badge-blue: #006fcf;
  --badge-orange: #c76a00;
  --badge-green: #12a866;
  --badge-purple: #6b4fe0;

  /* Each bot's colour. */
  --c-orb: #e8590c;
  --c-halftrend: #006fcf;
  --c-htdc: #7048e8;
  --c-smc: #b8860b;
  --c-trend: #0f9d58;
  --c-ict: #6b4fe0;
  --c-volume: #0e7490;
  --c-pattern: #c2185b;
  --c-mcx_crudeoilm: #b45309;
  --c-mcx_natgasmini: #0369a1;

  /* Navigation Section Accents */
  --h-overview: #006fcf;
  --h-marketwatch: #0e7490;
  --h-pipeline: #006fcf;
  --h-bots: #6b4fe0;
  --h-deployments: #0f9d58;
  --h-orders: #006fcf;
  --h-gateway: #c2343b;
  --h-trades: #e8590c;
  --h-backtests: #6b4fe0;
  --h-archive: #6b7380;
  --h-services: #0369a1;
  --h-activity: #c2185b;
  --h-logs: #0f9d58;

  /* Chart Series */
  --s1: #006fcf;
  --s2: #12a866;
  --s3: #e8590c;
  --s4: #6b4fe0;
  --s5: #0e7490;
  --s6: #c2185b;

  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px -18px rgba(16,24,40,.20);
  --shadow-lg: 0 24px 56px -16px rgba(16,24,40,.28), 0 4px 14px -6px rgba(16,24,40,.10);
  --scrim: rgba(14,17,22,.45);
  --r: 20px;
  --r-sm: 12px;
  --r-btn: 999px;    /* pill buttons */
  --r-input: 999px;  /* and pill inputs */
  --font: "Ubuntu", "Segoe UI", system-ui, sans-serif;
  --display: "Ubuntu", "Segoe UI", system-ui, sans-serif;
  --serif: var(--display);
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  /* Unified & Proportionate Typographic Scale Across All Pages */
  --fs-scale: 1.1;  /* Every console font size below is multiplied by this (2026-10-19: +10%) */
  --fs-2xs: calc(10px * var(--fs-scale));   /* Uppercase micro-labels, badges, status pills, table headers, kbd */
  --fs-xs:  calc(11px * var(--fs-scale));   /* Subtitles, secondary meta, timestamps, footers, small buttons, mono code */
  --fs-sm:  calc(12px * var(--fs-scale));   /* Standard body copy, nav items, table cells, form inputs, buttons */
  --fs-base: calc(13px * var(--fs-scale));  /* Emphasized body values, snapshot metrics, figure values */
  --fs-md:  calc(14px * var(--fs-scale));   /* All panel headers (h2), card titles (h3, .dep-title-row b, .pos-sym, .svc-head b), topbar title */
  --fs-lg:  calc(15.5px * var(--fs-scale)); /* Drawer/modal titles, Market Watch active symbol & LTP, position P&L */
  --fs-kpi: calc(19px * var(--fs-scale));   /* KPI values across Order Book, Gateway, Services, Analytics, Backtests, Bot Records */
  --fs-hero: calc(23px * var(--fs-scale));  /* Top Dashboard 4-card KPI values (.dash-val) */
}

/* Dark: the same desk at night — deep navy, a lighter cobalt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07122b;
    --bg-accent: none;
    --panel: #0d1b3a;
    --panel-2: #112244;
    --panel-3: #182b52;
    --text: #f2f5fa;
    --muted: #b3bfd4;
    --dim: #8a93a8;
    --line: #1f3360;
    --line-2: #2b4272;

    --brand: #4d9fff;
    --brand-ink: #07122b;
    --accent: #7ab8ff;
    --accent-2: #4d9fff;
    --accent-bg: rgba(77,159,255,.16);
    --grad: #4d9fff;
    --brand-glow: rgba(77,159,255,.35);

    --pos: #4ade9b;
    --pos-bg: rgba(74,222,155,.13);
    --neg: #ff7a7f;
    --neg-bg: rgba(255,122,127,.13);
    --on-neg: #1a0b0c;
    --warn: #ffc56b;
    --warn-bg: rgba(255,197,107,.14);
    --info: #7ab8ff;
    --info-bg: rgba(122,184,255,.14);
    --live: #4ade9b;
    --live-bg: rgba(74,222,155,.14);
    --paper: #ffc56b;
    --paper-bg: rgba(255,197,107,.14);

    --c-orb: #ff8a4c;
    --c-halftrend: #4d9fff;
    --c-htdc: #9775fa;
    --c-smc: #e8c547;
    --c-trend: #34c77b;
    --c-ict: #9a82ff;
    --c-volume: #22a6c7;
    --c-pattern: #ef5d9a;
    --c-mcx_crudeoilm: #e38a2f;
    --c-mcx_natgasmini: #3aa0e0;

    --s1: #7ab8ff;
    --s2: #4ade9b;
    --s3: #ff8a4c;
    --s4: #b39dff;
    --s5: #3cc4e0;
    --s6: #ff7ab2;

    --shadow: 0 1px 2px rgba(0,0,0,.3);
    --shadow-lg: 0 24px 56px -12px rgba(0,0,0,.7);
    --scrim: rgba(4,6,12,.72);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07122b;
  --bg-accent: none;
  --panel: #0d1b3a;
  --panel-2: #112244;
  --panel-3: #182b52;
  --text: #f2f5fa;
  --muted: #b3bfd4;
  --dim: #8a93a8;
  --line: #1f3360;
  --line-2: #2b4272;

  --brand: #4d9fff;
  --brand-ink: #07122b;
  --accent: #7ab8ff;
  --accent-2: #4d9fff;
  --accent-bg: rgba(77,159,255,.16);
  --grad: #4d9fff;
  --brand-glow: rgba(77,159,255,.35);

  --pos: #4ade9b;
  --pos-bg: rgba(74,222,155,.13);
  --neg: #ff7a7f;
  --neg-bg: rgba(255,122,127,.13);
  --on-neg: #1a0b0c;
  --warn: #ffc56b;
  --warn-bg: rgba(255,197,107,.14);
  --info: #7ab8ff;
  --info-bg: rgba(122,184,255,.14);
  --live: #4ade9b;
  --live-bg: rgba(74,222,155,.14);
  --paper: #ffc56b;
  --paper-bg: rgba(255,197,107,.14);

  --c-orb: #ff8a4c;
  --c-halftrend: #4d9fff;
  --c-htdc: #9775fa;
  --c-smc: #e8c547;
  --c-trend: #34c77b;
  --c-ict: #9a82ff;
  --c-volume: #22a6c7;
  --c-pattern: #ef5d9a;
  --c-mcx_crudeoilm: #e38a2f;
  --c-mcx_natgasmini: #3aa0e0;

  --s1: #7ab8ff;
  --s2: #4ade9b;
  --s3: #ff8a4c;
  --s4: #b39dff;
  --s5: #3cc4e0;
  --s6: #ff7ab2;

  --shadow: 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 56px -12px rgba(0,0,0,.7);
  --scrim: rgba(4,6,12,.72);
}

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

/* =====================================================================
   Base & Reset
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  background-image: var(--bg-accent);
  background-attachment: fixed;
  color: var(--text);
  font: var(--fs-sm)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inside tables sit beside P&L figures: plain underlined text, as on the site, never loss-red. */
td a:not(.btn) { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
td a:not(.btn):hover { color: var(--accent); text-decoration-color: currentColor; }
h1, h2, h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.25;
}
button, input, select, textarea { font: inherit; color: inherit; }
code, .mono { font-family: var(--mono); font-size: var(--fs-xs); }
small { font-size: var(--fs-xs); line-height: 1.35; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.tnum, td, .kpi .value, .dash-val, .ord-kpi b, .keymetric-grid b, .cal .day b, .dep-kpi > b, .svc-facts b, .record-box > b {
  font-variant-numeric: tabular-nums;
}
.ico { width: 16px; height: 16px; flex: none; display: block; }
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--muted);
  font: 600 var(--fs-2xs)/1 var(--mono);
  box-shadow: 0 1px 0 var(--line);
}
.linkish {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* Bot Accent Classes */
.c-orb, .botcard-orb { --c: var(--c-orb); }
.c-halftrend, .botcard-halftrend { --c: var(--c-halftrend); }
.c-htdc, .botcard-htdc { --c: var(--c-htdc); }
.c-smc, .botcard-smc, .c-sweep, .botcard-sweep { --c: var(--c-smc); }
.c-trend, .botcard-trend { --c: var(--c-trend); }
.c-ict, .botcard-ict { --c: var(--c-ict); }
.c-volume, .botcard-volume { --c: var(--c-volume); }
.c-pattern, .botcard-pattern { --c: var(--c-pattern); }
.c-mcx_crudeoilm, .botcard-mcx_crudeoilm { --c: var(--c-mcx_crudeoilm); }
.c-mcx_natgasmini, .botcard-mcx_natgasmini { --c: var(--c-mcx_natgasmini); }

/* =====================================================================
   Shell & Qloxia Sidebar Navigation
   ===================================================================== */
.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .18s ease;
}
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 12px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.brand b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.brand .muted {
  display: block;
  font-size: var(--fs-2xs);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-copy { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.brand-copy:hover { text-decoration: none; }
.brand-copy:hover b { color: var(--accent); }
.logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--grad);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 6px 14px -4px var(--brand-glow);
  text-decoration: none;
}
.logo:hover { text-decoration: none; filter: brightness(1.06); }
.logo svg { width: 19px; height: 19px; }
.side-toggle {
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dim);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.side-toggle:hover { background: var(--panel-3); color: var(--text); }
.side-toggle svg { width: 15px; height: 15px; }

#nav { display: flex; flex-direction: column; gap: 14px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-h {
  display: flex;
  align-items: center;
  padding: 0 10px 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--dim);
}
#nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 11px;
  border-radius: 10px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
#nav a .ico { color: var(--muted); opacity: .85; transition: color .12s, opacity .12s; }
#nav a:hover { background: var(--panel-2); color: var(--text); }
#nav a:hover .ico { color: var(--text); opacity: 1; }
#nav a.on {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 650;
}
#nav a.on .ico { color: var(--accent); opacity: 1; }


/* =====================================================================
   Qloxia Top Header Bar (Page Title + Pill Search + Circular Actions)
   ===================================================================== */
.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.top {
  --tb-h: 36px;
  --tb-r: 10px;
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 22px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.btn.menu-btn { display: none; }
.title-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 140px;
}
.title-stack { min-width: 0; display: grid; gap: 1px; }
.title-stack h1 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subtitle {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--dim);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Qloxia Search Pill */
.cmdk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--tb-h);
  padding: 0 10px 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  min-width: 200px;
  transition: border-color .14s, background .14s, color .14s;
}
.cmdk-btn:hover { border-color: var(--line-2); background: var(--panel); color: var(--text); }
.cmdk-btn svg { width: 14px; height: 14px; flex: none; color: var(--dim); }
.cmdk-btn span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Unified Status Readout Bar */
.status-chips {
  display: inline-flex;
  align-items: stretch;
  height: var(--tb-h);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  overflow: hidden;
  flex: none;
}
.status-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}
.status-chips .chip:empty { display: none; }
.status-chips .chip + .chip { border-left: 1px solid var(--line); }
.status-chips .chip b { color: var(--text); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: .03em; }
.status-chips .chip .ico { width: 13.5px; height: 13.5px; color: var(--dim); }
.status-chips #updated { font-variant-numeric: tabular-nums; }
.status-chips #updated.stale { background: var(--warn-bg); color: var(--warn); }
.status-chips #updated.stale .ico { color: var(--warn); }
.status-chips #updated.offline { background: var(--neg-bg); color: var(--neg); }
.status-chips #updated.offline .ico { color: var(--neg); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
  display: inline-block;
  flex: none;
}
.dot.ok {
  background: var(--pos);
  box-shadow: 0 0 0 3px var(--pos-bg);
}
.dot.warn {
  background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-bg);
}

/* Emergency Risk Controls */
.risk-zone {
  display: inline-flex;
  align-items: stretch;
  height: var(--tb-h);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--neg) 28%, var(--line));
  background: var(--panel);
  overflow: hidden;
  flex: none;
}
.risk-zone .btn {
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 0 12px;
  font-size: var(--fs-xs);
  font-weight: 650;
  background: transparent;
  color: var(--neg);
  box-shadow: none;
}
.risk-zone .btn + .btn { border-left: 1px solid color-mix(in srgb, var(--neg) 22%, var(--line)); }
.risk-zone .btn:hover { background: var(--neg-bg); color: var(--neg); }
.risk-zone .btn.on { background: var(--neg); color: var(--on-neg); }

/* Qloxia Signature Pill CTA Button with Circular Arrow Badge */
.btn.pill-cta {
  height: var(--tb-h);
  border-radius: 999px;
  padding: 0 5px 0 15px;
  gap: 9px;
  font-size: var(--fs-sm);
  font-weight: 650;
  box-shadow: 0 6px 16px -4px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.pill-cta .cta-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #0b0f17;
  display: inline-grid;
  place-items: center;
  font-style: normal;
  font-weight: 700;
  flex: none;
  box-shadow: 0 2px 5px rgba(0,0,0,.14);
}
.btn.pill-cta .cta-arrow svg { width: 12px; height: 12px; }

.top .token-btn {
  height: var(--tb-h);
  border-radius: 999px;
  padding: 0 13px;
}
.top .icon-btn.circle-btn {
  width: var(--tb-h);
  height: var(--tb-h);
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: none;
}
.top .icon-btn.circle-btn:hover { background: var(--panel-3); }
.top .icon-btn svg { width: 16px; height: 16px; }
.who { position: relative; display: inline-flex; align-items: center; flex: none; }
.avatar {
  width: var(--tb-h);
  height: var(--tb-h);
  border-radius: 50%;
  border: 2px solid var(--panel);
  background: var(--grad);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 1px var(--line-2), 0 4px 10px -2px var(--brand-glow);
}
.avatar:hover { filter: brightness(1.06); }
.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 35;
  min-width: 248px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
}
.user-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.user-menu-head b { display: block; font-size: var(--fs-sm); line-height: 1.2; }
.user-menu-head small { display: block; font-size: var(--fs-2xs); }
.user-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.user-menu .um-left { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.user-menu .um-left .ico { width: 15px; height: 15px; color: var(--muted); }
.user-menu button:hover { background: var(--panel-3); }
.user-menu button.danger, .user-menu button.danger .ico { color: var(--neg); }
.user-menu button.danger:hover { background: var(--neg-bg); }
.user-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* Alert Banner */
.banner {
  margin: 14px 22px 0;
  padding: 11px 16px;
  border-radius: var(--r);
  background: var(--neg-bg);
  border: 1px solid color-mix(in srgb, var(--neg) 38%, transparent);
  color: var(--text);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.banner.warn {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 42%, transparent);
}

/* =====================================================================
   Buttons & Interactive Controls
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .12s, background .12s, color .12s, transform .06s;
}
.btn:hover:not(:disabled) { background: var(--panel-3); border-color: var(--muted); color: var(--text); text-decoration: none; }
.btn .ico { color: inherit; }
select.btn { text-transform: none; }   /* a dropdown shows bot names as they are */
.btn.warn:hover:not(:disabled) { color: var(--warn); border-color: var(--warn); }
.btn.primary:hover:not(:disabled) .ico { color: var(--brand-ink); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .48; cursor: not-allowed; pointer-events: none; }
.btn.sm { height: 30px; padding: 0 12px; font-size: var(--fs-xs); border-radius: var(--r-btn); gap: 5px; }
.btn.lg { height: 40px; padding: 0 22px; font-size: var(--fs-base); border-radius: var(--r-btn); gap: 8px; }
.btn.icon { width: 32px; height: 32px; padding: 0; }
.btn.sm.icon { width: 30px; height: 30px; padding: 0; }
.btn.full { width: 100%; height: 42px; font-size: var(--fs-base); }
.btn.primary {
  background: var(--grad);
  border-color: transparent;
  color: var(--brand-ink);
  box-shadow: none;
}
.btn.primary:hover:not(:disabled) { background: var(--accent-2); border-color: transparent; color: var(--brand-ink); }
.btn.danger {
  color: var(--neg);
  border-color: color-mix(in srgb, var(--neg) 32%, var(--line));
  background: color-mix(in srgb, var(--neg) 5%, var(--panel));
}
.btn.danger:hover:not(:disabled) { background: var(--neg-bg); border-color: var(--neg); color: var(--neg); }
.btn.solid-danger, .btn.danger.on { background: var(--neg); border-color: var(--neg); color: var(--on-neg); }
.btn.warn {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
  background: var(--warn-bg);
}
.btn.warn.busy svg { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   Main Content & Panels
   ===================================================================== */
.content {
  padding: 20px 22px 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel > header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.panel > header h2 {
  font-size: var(--fs-md);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.panel > header .tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
}
.panel > header .tools .muted { font-size: var(--fs-xs); }
.panel .pad { padding: 16px 20px; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
}

/* =====================================================================
   Qloxia 4-Column KPI Metric Cards (.dashboard-metrics & .dash-metric)
   ===================================================================== */
.dashboard { display: flex; flex-direction: column; gap: 18px; }
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.dash-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 132px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dash-metric:hover {
  border-color: var(--line-2);
  box-shadow: 0 8px 24px -8px rgba(11,15,23,.07);
}
.dash-metric-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--badge-ink, #fff);
  background: var(--badge-blue);
  box-shadow: none;
}
.dash-metric.blue .dash-icon { background: var(--badge-blue); --badge-shadow: var(--brand-glow); }
.dash-metric.orange .dash-icon { background: var(--badge-orange); --badge-shadow: rgba(0,0,0,.28); }
.dash-metric.green .dash-icon { background: var(--badge-green); --badge-shadow: rgba(0,0,0,.28); }
.dash-metric.purple .dash-icon { background: var(--badge-purple); --badge-shadow: rgba(0,0,0,.28); }

.dash-metric-top > span {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-metric-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.dash-val {
  font-size: var(--fs-hero);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--text);
}
.dash-metric-body > .spark {
  width: 96px;
  height: 34px;
  flex: none;
}
/* The note is a .spark too: undo the chart's fixed 96px so the pill fits its text. */
.dash-metric-body > .spark-wait {
  width: auto;
  height: 24px;
  padding: 0 10px;
  line-height: 1;
  font-size: var(--fs-2xs);
  border-radius: 999px;
}
.metric-meter {
  height: 5px;
  border-radius: 999px;
  background: var(--panel-3);
  overflow: hidden;
}
.metric-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}
.dash-metric-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.stat-bars {
  width: 12px;
  height: 12px;
  color: var(--pos);
  flex: none;
}
.dash-metric-foot small {
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spark { width: 100%; height: 42px; display: block; }
.spark-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px dashed var(--line-2);
  color: var(--dim);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

/* Running Deployments Filter Bar */
.running-panel > header {
  padding: 18px 20px 12px;
  border-bottom: 0;
}
.running-panel > header > div:first-child { display: grid; gap: 2px; }
.running-panel > header .muted { font-size: var(--fs-xs); }
.running-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.filter-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.filter-chip:hover { color: var(--text); }
.filter-chip.selected {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.dep-search {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  min-width: 240px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--dim);
  transition: border-color .12s, background .12s;
}
.dep-search:focus-within {
  border-color: var(--accent);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.dep-search .ico { width: 14px; height: 14px; }
.dep-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
}

/* =====================================================================
   Deployment Cards (.dep-card)
   ===================================================================== */
.dashboard-deployments {
  padding: 18px 20px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.dep-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dep-card[data-detail] { cursor: pointer; }
.dep-card[data-detail]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dep-card:hover {
  border-color: color-mix(in srgb, var(--c, var(--accent)) 45%, var(--line-2));
  box-shadow: 0 10px 28px -10px rgba(11,15,23,.09);
  transform: translateY(-1px);
}
.dep-card-head { display: flex; align-items: center; gap: 12px; }
.dep-bot-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--c, var(--accent));
  color: #fff;
  box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--c, var(--accent)) 45%, transparent);
}
.dep-bot-ico .ico { width: 18px; height: 18px; }
.dep-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.dep-title-row b { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.dep-card-id { flex: 1; min-width: 0; }
.dep-card-id small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.dep-card-state { flex: none; }
.dep-title-row .hz { font-weight: 650; }

.dep-card { padding: 18px 20px; gap: 14px; border-radius: var(--r); }
.dep-card-head { gap: 14px; align-items: flex-start; }
.dep-bot-ico { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(145deg, var(--c, var(--accent)), color-mix(in srgb, var(--c, var(--accent)) 72%, #000)); }
.dep-bot-ico .ico { width: 19px; height: 19px; }
.dep-title-row { gap: 8px; }
.dep-title-row b { font-size: var(--fs-md); font-weight: 700; }
.dep-card-id small { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.dep-card-id small .sep { font-style: normal; color: var(--line-2); }
.dep-card-state { display: inline-flex; align-items: center; gap: 2px; padding-top: 2px; }
.dep-chev .ico { width: 14px; height: 14px; color: var(--dim); transition: color .12s, transform .12s; }
.dep-card:hover .dep-chev .ico { color: var(--accent); transform: translateX(2px); }

.dep-card-body { display: flex; flex-direction: column; gap: 10px; }
.dep-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dep-kpi {
  --t: var(--accent);
  min-width: 0; display: grid; align-content: start; gap: 5px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
}
.dep-kpi.blue { --t: var(--accent); } .dep-kpi.green { --t: var(--pos); } .dep-kpi.purple { --t: var(--s6, #8b5cf6); } .dep-kpi.grey { --t: var(--muted); }
.dep-kpi-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dep-kpi-ico { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--t); }
.dep-kpi-ico .ico { width: 12px; height: 12px; }
.dep-kpi-head > span { min-width: 0; font-size: var(--fs-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-kpi > b { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dep-kpi > small { font-size: var(--fs-2xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-perf {
  min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px 12px; min-height: 54px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
}
.dep-perf-side { flex: none; display: grid; gap: 3px; }
.dep-perf-label { font-size: var(--fs-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.dep-perf .dep-trend .trend-tag { background: transparent; padding: 0; border-radius: 0; font-size: var(--fs-sm); font-weight: 700; }
.dep-perf .spark { flex: 1; min-width: 0; height: 38px; }
.dep-perf-wait { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border: 1px dashed var(--line-2); border-radius: 9px; font-size: var(--fs-xs); color: var(--dim); }
.dep-perf-wait .ico { width: 13px; height: 13px; }

.trend-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.trend-tag.bull { background: var(--pos-bg); color: var(--pos); }
.trend-tag.bear { background: var(--neg-bg); color: var(--neg); }
.trend-tag.flat { background: var(--panel-3); color: var(--dim); }

.dep-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.dep-card-meta {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.dep-card-meta b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.dep-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.dep-card-actions .btn .ico { width: 13px; height: 13px; }
.dep-card-foot { padding-top: 12px; border-top: 1px solid var(--line); }
.dep-card-foot { flex-wrap: nowrap; }
.dep-card-actions { flex-wrap: nowrap; gap: 6px; }
.dep-card-actions .btn { height: 30px; padding: 0 11px; border-radius: 8px; font-size: var(--fs-xs); gap: 5px; }
.dep-card-meta { gap: 6px 16px; font-size: var(--fs-xs); min-width: 0; }
.dep-open { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.dep-open.none { color: var(--text); font-weight: 600; }

/* =====================================================================
   Bot Marks, Horizon Badges & Status Pills
   ===================================================================== */
.botmark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
}
.botmark i {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  flex: none;
  background: var(--c, var(--accent));
  color: #fff;
  box-shadow: none;
}
.botmark i .ico { width: 13.5px; height: 13.5px; }
.botmark > .hz { margin-left: 1px; }

.hz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
  vertical-align: middle;
}
.hz.short {
  margin-left: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--fs-2xs);
  line-height: 1;
}
.hz.intraday { background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.hz.positional { background: var(--warn-bg); color: var(--warn); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill.live { background: var(--live-bg); color: var(--live); border-color: color-mix(in srgb, var(--live) 24%, transparent); }
.pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.pill.paper { background: var(--paper-bg); color: var(--paper); border-color: color-mix(in srgb, var(--paper) 20%, transparent); }
.pill.running, .pill.allowed, .pill.done { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 24%, transparent); }
.pill.running::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
.pill.done::before { content: "✓"; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; color: var(--panel); }
.pill.idle, .pill.exit { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.pill.idle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--info); }
.pill.paused, .pill.starting, .pill.draining { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 24%, transparent); }
.pill.stopped, .pill.archived, .pill.not-deployed { background: var(--panel-3); color: var(--muted); border-color: var(--line-2); }
.pill.down, .pill.refused { background: var(--neg-bg); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 24%, transparent); }
.pill.down::before { content: "✗"; width: 6px; height: 6px; border-radius: 50%; background: var(--neg); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; color: var(--panel); }

/* =====================================================================
   Bot Strategy Catalog (.catalog & .botcard)
   ===================================================================== */
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 18px;
  align-items: start;
}
.botcard-scene {
  perspective: 1400px;
  min-height: 410px;
  cursor: pointer;
  outline: none;
}
.botcard-scene:focus-visible .botcard {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg);
}
.botcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22, .8, .24, 1);
}
.botcard-scene.flipped .botcard-inner { transform: rotateY(180deg); }
.botcard {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}
.botcard-scene:hover .botcard {
  border-color: color-mix(in srgb, var(--c, var(--accent)) 45%, var(--line-2));
  box-shadow: 0 12px 32px -12px rgba(11,15,23,.12);
}
.botcard-back { transform: rotateY(180deg); }

.botcard-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.botcard-head .botmark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--c, var(--accent));
  display: grid;
  place-items: center;
  box-shadow: none;
}
.botcard-head .botmark i {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}
.botcard-head .botmark i .ico { width: 20px; height: 20px; }
.botcard-title { min-width: 0; display: grid; gap: 4px; }
.botcard-title h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.botcard-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.botcard-dep {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  color: var(--text);
  font: 600 var(--fs-2xs)/1.3 var(--mono);
}

.botcard-strategy {
  position: relative;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.botcard-strategy p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.botcard-strategy.expanded p { display: block; -webkit-line-clamp: unset; }
.botcard-more {
  border: 0;
  background: var(--panel-2);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 650;
  padding: 0 4px;
  cursor: pointer;
}

.bot-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bot-facts > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.bot-facts > div.bot-trade-fact { grid-column: 1 / -1; }
.bot-facts i {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent);
  display: inline-grid;
  place-items: center;
  color: var(--c, var(--accent));
}
.bot-facts i .ico { width: 14px; height: 14px; }
.bot-facts span {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
}
.bot-facts b {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.botcard-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.botcard-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.botcard-hint .ico { width: 14px; height: 14px; }
.botcard-action { height: 34px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 650; }
.botcard-action .ico { width: 14px; height: 14px; }

.record {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
}
.record-box {
  padding: 14px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.record-box > span {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
}
.record-box > b { font-size: var(--fs-kpi); font-weight: 750; letter-spacing: -.02em; }
.record-box > small { font-size: var(--fs-xs); }

/* =====================================================================
   KPI Strip & Summary Cards (Services, Gateway, Drawers, Backtests)
   ===================================================================== */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.kpi {
  position: relative;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpi.live { border-color: color-mix(in srgb, var(--live) 35%, var(--line)); }
.kpi .label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.kpi .value {
  font-size: var(--fs-kpi);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.kpi .sub { font-size: var(--fs-xs); color: var(--dim); line-height: 1.4; }

/* =====================================================================
   Data Tables, Responsive Drop Columns & Pagination
   ===================================================================== */
.tablewrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
th {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  background: var(--panel-2);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--panel-2)); }
tr.click { cursor: pointer; }
td .sub2 { font-size: var(--fs-2xs); color: var(--dim); margin-top: 1px; }
td.wrap { max-width: 340px; white-space: normal; }
table:has(> tbody > tr:only-child > td.empty) > thead { display: none; }
td.empty, .empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--dim);
  font-size: var(--fs-sm);
}

/* Responsive column hiding (fitTables) */
table.stackable.drop1 [data-drop="1"],
table.stackable.drop2 [data-drop="1"],
table.stackable.drop2 [data-drop="2"],
table.stackable.drop3 [data-drop="1"],
table.stackable.drop3 [data-drop="2"],
table.stackable.drop3 [data-drop="3"] {
  display: none;
}
table.stacked thead { display: none; }
table.stacked tbody tr {
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
table.stacked tbody td {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  border: 0;
  text-align: right;
}
table.stacked tbody td::before {
  content: attr(data-label);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  text-align: left;
}

/* ---- User management --------------------------------------------------- */
.user-page { display: grid; gap: 16px; }
.user-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.user-stat { display: flex; align-items: center; gap: 13px; padding: 16px; }
.user-stat-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-bg); color: var(--accent); font-weight: 750; font-size: var(--fs-lg); }
.user-stat-icon.admin, .access-dot.admin { background: var(--pos-bg); color: var(--pos); }
.user-stat-icon.limited, .access-dot.limited { background: var(--paper-bg); color: var(--paper); }
.user-stat > div { display: grid; gap: 2px; min-width: 0; }
.user-stat small { color: var(--muted); font-size: var(--fs-xs); }
.user-stat b { font-size: 20px; line-height: 1.15; }
.user-stat > div > span { color: var(--dim); font-size: var(--fs-2xs); }
.user-directory > header { align-items: flex-start; }
.user-directory > header > div p { margin: 4px 0 0; font-size: var(--fs-xs); }
.user-access-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 16px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs); }
.user-access-note > b { color: var(--text); margin-right: 3px; }
.user-access-note > span { display: inline-flex; align-items: center; gap: 6px; }
.user-access-note strong { color: var(--text); }
.access-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.user-list-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 10px; }
.user-search { display: flex; align-items: center; gap: 8px; width: min(320px, 100%); height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--dim); }
.user-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.user-search > span { font-size: 19px; line-height: 1; }
.user-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-sm); }
.user-table td { height: 58px; }
.user-name { display: flex; align-items: center; gap: 10px; }
.user-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-weight: 750; }
.user-role-select { text-transform: none; }
.user-actions { white-space: nowrap; }
.user-actions .btn + .btn { margin-left: 5px; }
.user-actions .btn.danger { color: var(--neg); }
.user-footnote { margin: 0; padding: 11px 16px 14px; color: var(--dim); font-size: var(--fs-2xs); }
.user-created-callout { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); line-height: 1.5; }
.copy-field { display: flex; align-items: stretch; gap: 8px; }
.copy-field input { min-width: 0; flex: 1; }
.copy-field button { flex: 0 0 auto; }
.trade-detail-row { cursor: pointer; }
.trade-detail-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.trade-book { min-width: 104px; }
.trade-book .pill { display: inline-flex; }
.trade-book small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-2xs); white-space: nowrap; }
.trade-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trade-detail-item { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.trade-detail-item span { color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; }
.trade-detail-item b { overflow-wrap: anywhere; font-size: var(--fs-sm); }
.trade-detail-pnl { grid-column: span 2; }
.trade-extra { border-top: 1px solid var(--line); padding-top: 12px; }
.trade-extra summary { cursor: pointer; color: var(--muted); font-size: var(--fs-xs); }
.trade-extra pre { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .user-summary { grid-template-columns: 1fr; gap: 8px; }
  .user-stat { padding: 12px; }
  .user-stat-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .user-access-note { align-items: flex-start; flex-direction: column; gap: 7px; }
  .user-directory > header { align-items: center; }
  .trade-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.held {
  display: inline-block;
  padding: 1px 7px;
  margin: 1px 2px 1px 0;
  border-radius: 5px;
  font: 600 var(--fs-2xs)/1.4 var(--mono);
}
.held.open { background: var(--info-bg); color: var(--info); }
.held.closed { background: var(--panel-3); color: var(--muted); }

/* Table Pager */
.pager {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.pager-info b { color: var(--text); }
.pager-size { display: inline-flex; align-items: center; gap: 6px; }
.pager-size select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-xs);
}
.pager-pages { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.pager-pages button {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}
.pager-pages button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager-pages button.on { background: var(--grad); border-color: transparent; color: var(--brand-ink); }
.pager-pages button:disabled { opacity: .4; cursor: not-allowed; }

/* =====================================================================
   Open Position Cards (.poscards & .poscard)
   ===================================================================== */
.poscards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.poscard {
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.poscard.up { border-left: 3px solid var(--pos); }
.poscard.down { border-left: 3px solid var(--neg); }
.poscard > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pos-id { display: grid; gap: 3px; min-width: 0; }
.pos-sym { font-size: var(--fs-md); font-weight: 700; }
.pos-inst { font-size: var(--fs-xs); }
.pos-pnl { text-align: right; display: grid; gap: 2px; }
.pos-pnl b { font-size: var(--fs-lg); font-weight: 750; }
.mark { font-size: var(--fs-2xs); color: var(--dim); }
.mark.stale { color: var(--warn); font-weight: 600; }
.mark.fresh { color: var(--pos); font-weight: 600; }

.pos-range { display: grid; gap: 5px; }
.pos-range .track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--panel-3);
}
.pos-range .fill { height: 100%; border-radius: inherit; background: var(--accent); }
.pos-range .fill.up { background: var(--pos); }
.pos-range .fill.down { background: var(--neg); }
.pos-range i {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--panel);
  transform: translate(-50%, -50%);
}
.pos-range .ends { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--muted); }
.pos-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.fig { display: grid; gap: 1px; }
.fig span { font-size: var(--fs-2xs); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.fig b { font-size: var(--fs-sm); font-weight: 650; }
.pos-legs { border-top: 1px solid var(--line); padding-top: 8px; }
.pos-legs table { font-size: var(--fs-xs); }
.pos-legs th, .pos-legs td { padding: 6px 10px; }

/* =====================================================================
   Services & Order Gateway
   ===================================================================== */
.svcs { display: flex; flex-direction: column; }
.svc {
  display: grid;
  grid-template-columns: 10px minmax(220px, 1.4fr) minmax(200px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.svc:last-child { border-bottom: 0; }
.svc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim);
}
.svc.ok .svc-dot { background: var(--pos); box-shadow: 0 0 0 3px var(--pos-bg); }
.svc.warn .svc-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.svc.down .svc-dot { background: var(--neg); box-shadow: 0 0 0 3px var(--neg-bg); }
.svc-main { display: grid; gap: 3px; min-width: 0; }
.svc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.svc-head b { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.svc-health { font-size: var(--fs-xs); color: var(--muted); }
.svc-health.warn { color: var(--warn); }
.svc-health.down { color: var(--neg); }
.svc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.svc-facts > div { display: grid; gap: 2px; }
.svc-facts span {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
}
.svc-facts b { font-size: var(--fs-sm); font-weight: 650; }
.svc-state.ok { color: var(--pos); }
.svc-state.warn { color: var(--warn); }
.svc-state.down { color: var(--neg); }
.svc-act { display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-size: var(--fs-xs); }
.svc-order { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--fs-sm); }

.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 18px;
}
.rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.rule span { color: var(--muted); }
.rule b { text-align: right; font-weight: 650; }

/* =====================================================================
   Analytics (Reports) & Backtests
   ===================================================================== */
.report-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
}
.report-chart {
  padding: 16px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-chart > header, .report-metrics > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.report-chart > header h2, .report-metrics > header h2 {
  font-size: var(--fs-md);
  font-weight: 600;
}
.chart-ranges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.chart-ranges button {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 650;
  cursor: pointer;
}
.chart-ranges button:hover { color: var(--text); }
.chart-ranges button.selected {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.portfolio-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.portfolio-legend span { display: inline-flex; align-items: center; gap: 6px; }
.portfolio-legend i {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--pos);
  display: inline-block;
}
.portfolio-legend i.margin-key { background: var(--dim); }
.report-metrics {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Plot inset: room for the y labels either side and the x labels below. */
.portfolio-chart {
  --pl: 52px; --pr: 48px; --pt: 8px; --pb: 22px;
  position: relative;
  flex: 1;
  min-height: 220px;
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.portfolio-chart svg {
  position: absolute;
  left: var(--pl); right: var(--pr); top: var(--pt); bottom: var(--pb);
  width: calc(100% - var(--pl) - var(--pr));
  height: calc(100% - var(--pt) - var(--pb));
  overflow: visible;
}
.pc-y {
  position: absolute;
  top: calc(var(--pt) + var(--f) * (100% - var(--pt) - var(--pb)));
  transform: translateY(-50%);
  line-height: 1;
  white-space: nowrap;
}
.pc-y.l { left: 0; width: calc(var(--pl) - 8px); text-align: right; }
.pc-y.r { right: 0; width: calc(var(--pr) - 8px); text-align: left; }
.pc-x { position: absolute; bottom: 0; line-height: 1; white-space: nowrap; }
.pc-x.first { left: var(--pl); }
.pc-x.last { right: var(--pr); }
.chart-grid { stroke: var(--line); stroke-dasharray: 3 3; }
.chart-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--info);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.keymetric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
}
.keymetric-grid > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
}
.keymetric-grid span {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.keymetric-grid b { font-size: var(--fs-kpi); font-weight: 750; line-height: 1.2; }
.keymetric-grid small { font-size: var(--fs-xs); color: var(--muted); }

.cal {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.cal .dow {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  text-align: center;
  padding-bottom: 4px;
}
.cal .day {
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cal .day.gap { background: transparent; border-style: dashed; opacity: .45; }
.cal .day span { font-size: var(--fs-2xs); color: var(--muted); }
.cal .day b { font-size: var(--fs-sm); font-weight: 700; }

/* Interactive Line Chart & Breakdown Bars (Backtests / Compare) */
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .tip {
  position: absolute;
  z-index: 10;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs);
  display: grid;
  gap: 3px;
  pointer-events: none;
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; font-size: var(--fs-xs); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i, .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--s1); }
.s1 i, .swatch.s1 { background: var(--s1); }
.s2 i, .swatch.s2 { background: var(--s2); }
.s3 i, .swatch.s3 { background: var(--s3); }
.s4 i, .swatch.s4 { background: var(--s4); }
.s5 i, .swatch.s5 { background: var(--s5); }
.s6 i, .swatch.s6 { background: var(--s6); }

.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.bar {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(80px, 1.2fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--fs-xs);
}
.bar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .track { position: relative; height: 6px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.bar .zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.bar .fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.bar .fill.pos { background: var(--pos); }
.bar .fill.neg { background: var(--neg); }

.vtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.vtabs button {
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}
.vtabs button.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* Backtests Form & Table */
.bt-panel > header { align-items: flex-start; padding: 16px 20px 14px; }
.bt-head { display: grid; gap: 3px; }
.bt-head h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.bt-head .muted { font-size: var(--fs-xs); }
.bt-head .count, .ord-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.btform { display: flex; flex-direction: column; gap: 16px; }
.bt-groups { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.bt-group {
  flex: 1 1 280px;
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}
.bt-group > legend {
  padding: 0 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.bt-group .fields { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; }
.bt-group .field { flex: 0 0 auto; }
.btform .bt-group .field input, .btform .bt-group .field select {
  height: 34px;
  padding: 0 10px;
  background: var(--panel);
  width: auto;
  min-width: 11ch;
  font-size: var(--fs-sm);
}
.btform .bt-group .field input[type="date"] { width: 148px; }
.bt-flags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: var(--fs-sm); }
.bt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.bt-cmd { flex: 1 1 340px; min-width: 0; display: flex; align-items: center; gap: 10px; }
.bt-cmd .lbl { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.cmdchip {
  display: inline-block;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  font: var(--fs-xs)/1.4 var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bt-actions { display: flex; align-items: center; gap: 10px 16px; margin-left: auto; }
.bt-table td.cmdcell { width: 100%; max-width: 0; }
.bt-table td.cmdcell .cmdchip { display: block; }
.joblog { margin: 0 14px 14px; }
.joblog-box > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 10px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* =====================================================================
   Orders & Logs Workspaces
   ===================================================================== */
.ord-page { display: flex; flex-direction: column; gap: 14px; }
.ord-bar { padding: 12px 16px; }
.ord-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ord-dates { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ord-dates input[type="date"] {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--panel-2);
  font-size: var(--fs-xs);
}
.ord-q {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  min-width: 210px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel-2);
}
.ord-q input { border: 0; outline: 0; background: none; width: 100%; font-size: var(--fs-xs); }
.ord-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.ord-kpi {
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: 3px;
}
.ord-kpi span { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); font-weight: 700; }
.ord-kpi b { font-size: var(--fs-kpi); font-weight: 750; line-height: 1.2; }
.ord-kpi small { font-size: var(--fs-xs); color: var(--muted); }
.ord-side {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.ord-side.buy { background: var(--pos-bg); color: var(--pos); }
.ord-side.sell { background: var(--neg-bg); color: var(--neg); }
.ord-book {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
}
.ord-book.live { background: var(--live-bg); color: var(--live); }
.ord-book.paper { background: var(--paper-bg); color: var(--paper); }
.ord-st {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.ord-st.ok { background: var(--pos-bg); color: var(--pos); }
.ord-st.open { background: var(--info-bg); color: var(--info); }
.ord-st.bad { background: var(--neg-bg); color: var(--neg); }
.ord-st.cxl { background: var(--panel-3); color: var(--muted); }
.ord-msg, .ord-sub, .ord-src { font-size: var(--fs-2xs); color: var(--dim); }
.ord-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.ord-f { display: grid; gap: 2px; }
.ord-f span { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); font-weight: 650; }
.ord-f b { font-size: var(--fs-sm); }
.ord-timeline { margin: 0; padding: 14px 18px 14px 30px; display: grid; gap: 10px; font-size: var(--fs-sm); }

/* Logs Viewer */
.lg-page { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; height: calc(100vh - 110px); min-height: 520px; }
.lg-side { display: flex; flex-direction: column; overflow: hidden; }
.lg-side-h { padding: 14px 14px 8px; font-size: var(--fs-md); font-weight: 700; }
.lg-search { display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 12px 6px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--dim); }
.lg-search:focus-within { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px var(--accent-bg); }
.lg-search .ico { width: 14px; height: 14px; }
.lg-search input { border: 0; outline: 0; background: none; width: 100%; font-size: var(--fs-sm); color: var(--text); }
.lg-files { flex: 1; overflow-y: auto; padding: 4px 8px 12px; display: grid; gap: 2px; align-content: start; }
.lg-group { display: grid; gap: 1px; padding-bottom: 6px; }
.lg-group + .lg-group { border-top: 1px solid var(--line); padding-top: 6px; }
.lg-group-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px;
  border: 0; border-radius: 7px; background: none; cursor: pointer; text-align: left;
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.lg-group-h:hover { background: var(--panel-2); color: var(--text); }
.lg-group-h i { font-style: normal; font-weight: 600; color: var(--dim); margin-left: 4px; }
.lg-chev { width: 13px; height: 13px; color: var(--dim); transition: transform .15s; }
.lg-group.shut .lg-chev { transform: rotate(-90deg); }
.lg-file { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; color: var(--text); }
.lg-file:hover { background: var(--panel-2); }
.lg-file.on { background: var(--accent-bg); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.lg-fico { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--dim); }
.lg-file.on .lg-fico { color: var(--accent); }
.lg-file-txt { display: grid; gap: 1px; min-width: 0; }
.lg-file-name { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-file-meta { font-size: var(--fs-2xs); color: var(--dim); }
.lg-main { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.lg-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lg-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lg-title > .ico { width: 22px; height: 22px; color: var(--accent); flex: none; }
.lg-title > div { display: grid; min-width: 0; }
.lg-title b { font-size: var(--fs-md); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-title #lg-meta { font-size: var(--fs-xs); color: var(--muted); }
.lg-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-tools > .btn.sm, .lg-tools > select.btn.sm { height: 32px; }
.lg-tools > .btn.icon { width: 32px; }
.lg-tools .seg-btns { height: 32px; }
.lg-q { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--dim); }
.lg-q:focus-within { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px var(--accent-bg); }
.lg-q .ico { width: 14px; height: 14px; }
.lg-q input { border: 0; outline: 0; background: none; width: 200px; font-size: var(--fs-xs); color: var(--text); }
.lg-switch { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.lg-switch i { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--line-2); transition: background .15s; }
.lg-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.lg-switch.on { color: var(--text); }
.lg-switch.on i { background: var(--accent); }
.lg-switch.on i::after { transform: translateX(12px); }
.lg-switch:disabled { opacity: .5; cursor: not-allowed; }
.lg-body { flex: 1; overflow: auto; padding: 0 0 8px; background: var(--panel); font: var(--fs-xs)/1.5 var(--mono); }
.lg-row {
  display: grid; grid-template-columns: 178px 64px minmax(80px, 120px) 84px minmax(110px, 200px) minmax(0, 1fr);
  align-items: center; column-gap: 12px; padding: 4px 16px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.lg-row:hover { background: var(--panel-2); }
.lg-row.err { background: color-mix(in srgb, var(--neg) 6%, var(--panel)); }
.lg-row.warn { background: color-mix(in srgb, var(--warn) 6%, var(--panel)); }
.lg-row.raw .lg-msg { grid-column: 1 / -1; padding-left: 0; }
.lg-cols {
  position: sticky; top: 0; z-index: 1; padding-top: 9px; padding-bottom: 9px; background: var(--panel-2);
  border-bottom: 1px solid var(--line); font: 650 var(--fs-2xs)/1.2 var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.lg-cols:hover { background: var(--panel-2); }
.lg-c { min-width: 0; }
.lg-body:not(.wrap) .lg-c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-body.wrap .lg-c { white-space: pre-wrap; overflow-wrap: anywhere; }
.lg-msg { grid-column: 5 / -1; }
.lg-ts { color: var(--dim); }
.lg-src { color: var(--muted); }
.lg-key { color: var(--text); font-weight: 600; }
.lg-val, .lg-msg { color: var(--text); }
.lg-lv, .lg-type { display: inline-block; padding: 1px 7px; border-radius: 5px; font: 650 9px/1.5 var(--font); letter-spacing: .03em; font-style: normal; }
.lg-lv.info { background: var(--info-bg); color: var(--info); }
.lg-lv.dbg { background: var(--panel-3); color: var(--dim); }
.lg-lv.warn { background: var(--warn-bg); color: var(--warn); }
.lg-lv.err { background: var(--neg-bg); color: var(--neg); }
.lg-type { background: var(--panel-3); color: var(--muted); }
.lg-body mark { background: color-mix(in srgb, var(--warn) 35%, transparent); color: inherit; border-radius: 2px; }
.lg-empty { padding: 40px 16px; text-align: center; color: var(--dim); font-family: var(--font); font-size: var(--fs-sm); }
.lg-jump {
  position: absolute; right: 18px; bottom: 50px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--brand); color: var(--brand-ink); font-size: var(--fs-xs); font-weight: 650; cursor: pointer; box-shadow: var(--shadow);
}
.lg-foot { padding: 9px 16px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lg-foot-info { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.lg-foot-info .ico { width: 14px; height: 14px; color: var(--dim); }
.lg-live { display: inline-flex; align-items: center; gap: 6px; }
.lg-live.on i { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); }
@media (max-width: 1200px) {
  .lg-row { grid-template-columns: 150px 58px minmax(70px, 100px) 76px minmax(90px, 150px) minmax(0, 1fr); }
  .lg-q input { width: 140px; }
}

/* =====================================================================
   Market Watch & Pine Script Charting
   ===================================================================== */
.mw {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  height: calc(100vh - 104px);
  min-height: 540px;
}
.content:has(> .mw) { padding-bottom: 16px; }
.mw-side { display: flex; flex-direction: column; overflow: hidden; }
.mw-search { position: relative; padding: 10px; border-bottom: 1px solid var(--line); }
.mw-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
}
.mw-search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: var(--fs-sm); }
.mw-search-box select {
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.mw-results {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(100% - 4px);
  z-index: 25;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}
.mw-results:empty { display: none; }
.mw-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.mw-result:hover, .mw-result.on { background: var(--accent-bg); }
.mw-result span:first-child { display: grid; min-width: 0; }
.mw-result small { font-size: var(--fs-2xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-result-tail { display: inline-flex; align-items: center; gap: 6px; }
.mw-kind { font-style: normal; font-size: var(--fs-2xs); font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--panel-3); color: var(--muted); margin-right: 4px; }
.mw-plus, .mw-added { font-style: normal; width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--panel-3); font-weight: 700; }
.mw-added { background: var(--pos-bg); color: var(--pos); }
.mw-search-note { padding: 12px; font-size: var(--fs-xs); color: var(--muted); }

.mw-list-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
}
.mw-list { flex: 1; overflow-y: auto; }
.mw-list-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-xs);
  display: grid;
  gap: 6px;
}
.mw-list-empty b { color: var(--text); font-size: var(--fs-sm); }
.mw-group-head {
  padding: 6px 12px 4px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.mw-row {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-right: 6px;
}
.mw-row:hover { background: var(--panel-2); }
.mw-row.on, .mw-row.on:hover { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.mw-grip { padding: 0 4px 0 8px; color: var(--dim); cursor: grab; opacity: .5; display: inline-flex; }
.mw-grip svg { width: 8px; height: 14px; }
.mw-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 6px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.mw-row-id { display: grid; min-width: 0; gap: 1px; }
.mw-row-id b { font-size: var(--fs-sm); font-weight: 650; }
.mw-row-id small { font-size: var(--fs-2xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-row-q { flex: none; text-align: right; display: grid; gap: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: padding-right .14s ease; }
.mw-row-q b { font-size: var(--fs-sm); font-weight: 650; }
.mw-row-q small { font-size: var(--fs-2xs); }
/* Remove: floats over the row's right edge, shown only on hover / keyboard focus. */
.mw-row-x {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: var(--panel-3);
  color: var(--muted);
  font-size: calc(14px * var(--fs-scale));
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
.mw-row:hover .mw-row-x, .mw-row-x:focus-visible { opacity: 1; pointer-events: auto; }
.mw-row:hover .mw-row-q, .mw-row:focus-within .mw-row-q { padding-right: 28px; }
.mw-row-x:hover { background: var(--neg-bg); color: var(--neg); }
.mw-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.mw-live-note, .mw-stale-note { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.mw-live-note > span, .mw-stale-note > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-live-note .dot, .mw-stale-note .dot { flex: none; }

.mw-main { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.mw-head { padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mw-ident { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mw-ident h2 { font-size: var(--fs-lg); font-weight: 750; }
.mw-ident span { font-size: var(--fs-xs); color: var(--muted); }
.mw-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.mw-ltp { font-size: var(--fs-lg); font-weight: 750; }
.mw-chg { font-size: var(--fs-sm); font-weight: 650; }
.mw-tag {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: var(--fs-2xs);
  color: var(--muted);
}

.mw-toolbar {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.seg-btns {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--panel-3);
  border: 1px solid var(--line);
}
.seg-btns button {
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 650;
  cursor: pointer;
}
.seg-btns button:hover:not(:disabled) { color: var(--text); }
.seg-btns button.on { background: var(--panel); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg-btns button:disabled { opacity: .38; cursor: not-allowed; }

.mw-style-wrap { position: relative; display: inline-flex; align-items: center; }
.mw-style-wrap .ico { position: absolute; left: 8px; width: 14px; height: 14px; color: var(--muted); pointer-events: none; z-index: 1; }
.mw-style-wrap .btn.sm.mw-style { padding-left: 28px; padding-right: 8px; }
.mw-style-wrap .btn.sm.mw-range { width: 128px; }
.mw-datewrap { position: relative; }
.mw-datepop {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 25;
  width: 290px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 10px;
  font-size: var(--fs-sm);
}
.mw-fx { font: italic 700 var(--fs-sm) Georgia, serif; color: var(--accent); }
.mw-badge { padding: 1px 6px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; }
.mw-levels-btn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.mw-subbar {
  padding: 5px 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.mw-live {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--pos-bg);
  color: var(--pos);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.mw-fallback {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: var(--fs-2xs);
  font-weight: 600;
}
.mw-chart { position: relative; flex: 1; min-height: 280px; overflow: hidden; outline: none; user-select: none; }
.mw-svg { position: absolute; inset: 0; display: block; }
.mw-xh { pointer-events: none; }
.mw-grid, .mw-vgrid { stroke: var(--line); stroke-width: 1; opacity: .55; }
.mw-pane-sep { stroke: var(--line-2); stroke-width: 1; }
.mw-axis { fill: var(--dim); font: var(--fs-2xs) var(--mono); }
.mw-axis.strong { fill: var(--text); font-weight: 700; }
.mw-up { fill: var(--pos); }
.mw-down { fill: var(--neg); }
.mw-up-line { stroke: var(--pos); stroke-width: 1.2; fill: none; }
.mw-down-line { stroke: var(--neg); stroke-width: 1.2; fill: none; }
.mw-line { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mw-last { stroke-dasharray: 3 3; stroke-width: 1; }
.mw-last.up { stroke: var(--pos); }
.mw-last.down { stroke: var(--neg); }
.mw-tagbox.up { fill: var(--pos); }
.mw-tagbox.down { fill: var(--neg); }
.mw-tagbox.cross { fill: var(--text); }
.mw-tagtext { fill: #fff; font: 700 var(--fs-2xs) var(--mono); }
.mw-tagclock { font-weight: 500; opacity: .9; }
.mw-cross-line { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1; }
.mw-lvl line { stroke-dasharray: 2 3; stroke-width: 1; }
.mw-lvl.ph line, .mw-lvl.oh line { stroke: var(--pos); opacity: .65; }
.mw-lvl.pl line, .mw-lvl.ol line { stroke: var(--neg); opacity: .65; }
.mw-lvl-name, .mw-lvl-box { fill: var(--panel); stroke: var(--line-2); }
.mw-lvl-nametext, .mw-lvl-text { fill: var(--text); font: 600 9px var(--mono); }
.mw-lvl.ph .mw-lvl-name, .mw-lvl.oh .mw-lvl-name, .mw-lvl.ph .mw-lvl-box, .mw-lvl.oh .mw-lvl-box { stroke: var(--pos); }
.mw-lvl.pl .mw-lvl-name, .mw-lvl.ol .mw-lvl-name, .mw-lvl.pl .mw-lvl-box, .mw-lvl.ol .mw-lvl-box { stroke: var(--neg); }
.mw-lvl.ph .mw-lvl-nametext, .mw-lvl.oh .mw-lvl-nametext { fill: var(--pos); }
.mw-lvl.pl .mw-lvl-nametext, .mw-lvl.ol .mw-lvl-nametext { fill: var(--neg); }
.mw-legend { position: absolute; left: 10px; z-index: 4; display: grid; gap: 3px; pointer-events: none; }
.mw-leg-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  backdrop-filter: blur(4px);
  font-size: var(--fs-xs);
  pointer-events: auto;
}
.mw-leg-name { border: 0; background: none; padding: 0; font-weight: 650; cursor: pointer; font-size: var(--fs-xs); }
.mw-leg-name span { color: var(--dim); font-weight: 500; }
.mw-leg-tools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.mw-leg-row:hover .mw-leg-tools { opacity: 1; }
.mw-leg-tools button { border: 0; background: none; padding: 2px 4px; border-radius: 4px; color: var(--muted); cursor: pointer; }
.mw-leg-tools button:hover { background: var(--panel-3); color: var(--text); }
.mw-float {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.mw-float button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}
.mw-float button:hover { background: var(--panel-3); color: var(--text); }
.mw-float i { width: 1px; height: 16px; background: var(--line); margin: 0 2px; }
.mw-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Indicator Modal */
.ind-dlg { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 420px; max-height: 68vh; border-top: 1px solid var(--line); }
.ind-nav { padding: 10px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.ind-nav-h { padding: 8px 8px 3px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.ind-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.ind-nav button.on { background: var(--accent-bg); color: var(--accent); font-weight: 650; }
.ind-main { display: flex; flex-direction: column; overflow: hidden; }
.ind-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ind-search input { width: 100%; border: 0; outline: 0; background: none; font-size: var(--fs-sm); }
.ind-pane { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ind-h { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin: 8px 0 4px; }
.ind-item, .ind-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  font-size: var(--fs-sm);
}
.ind-item { cursor: pointer; text-align: left; width: 100%; }
.ind-item:hover { border-color: var(--accent); }
.ind-item span, .ind-row-name { display: grid; flex: 1; min-width: 0; }
.ind-item small { color: var(--muted); font-size: var(--fs-xs); }
.ind-row-tools { display: inline-flex; align-items: center; gap: 4px; }
.ind-eye { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; }
.ind-code { font: var(--fs-xs)/1.55 var(--mono); min-height: 240px; }
.ind-ed-actions { display: flex; align-items: center; gap: 8px; }
.ind-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); }
.ind-set-row input:not([type="checkbox"]):not([type="color"]), .ind-set-row select { width: 140px; }

/* =====================================================================
   Drawers, Modals, Callouts & Toasts
   ===================================================================== */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--scrim);
  backdrop-filter: blur(3px);
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  width: min(740px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer > header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.drawer > header h2 { font-size: var(--fs-lg); font-weight: 700; }
.drawer > .tabs { padding: 0 20px; background: var(--panel-2); }
.drawer > .body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; font-size: var(--fs-sm); }
/* Panels clip (overflow: hidden), which lets flex shrink them to nothing; the body scrolls instead. */
.drawer > .body > * { flex-shrink: 0; }

/* Backtest result: the whole window, header on one row, content laid out in a grid */
.drawer[data-kind="run"] { width: 100vw; border-left: 0; }
.drawer[data-kind="run"] > header { flex-wrap: nowrap; gap: 16px 24px; padding: 14px 28px; }
.drawer[data-kind="run"] .run-title { display: flex; align-items: center; gap: 12px; flex: none; }
.drawer[data-kind="run"] .run-meta { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; min-width: 0; font-size: var(--fs-sm); }
.drawer[data-kind="run"] .run-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.drawer[data-kind="run"] .run-actions .x { position: static; }
.drawer[data-kind="run"] > .body { padding: 22px 28px 32px; gap: 20px; }
.drawer[data-kind="run"] .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.drawer[data-kind="run"] .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.drawer[data-kind="run"] .bar { grid-template-columns: minmax(90px, 1fr) minmax(90px, 1.4fr) minmax(88px, auto); }
.drawer[data-kind="run"] .bar b { white-space: nowrap; text-align: right; }
.drawer[data-kind="run"] .tablewrap { max-height: none !important; }
/* Deployment detail: wide drawer, actions in the header, KPI strip, tabs beside a details column */
.drawer[data-kind="dep"] { width: min(1320px, 100vw); }
.drawer[data-kind="dep"] > header { flex-wrap: nowrap; gap: 14px; padding: 14px 22px; }
.drawer[data-kind="dep"] > header .dep-bot-ico { width: 40px; height: 40px; border-radius: 11px; }
.drawer[data-kind="dep"] > header .dep-bot-ico .ico { width: 19px; height: 19px; }
.det-id { flex: 1; min-width: 0; }
.det-id small { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.det-id small .sep { font-style: normal; color: var(--line-2); }
.det-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.det-actions .btn .ico, .dep-card-actions .btn .ico { width: 12px; height: 12px; }
.btn.danger.solid { background: var(--neg); border-color: var(--neg); color: var(--on-neg); }
.btn.danger.solid:hover:not(:disabled) { background: var(--neg); color: var(--on-neg); filter: brightness(1.07); }
.drawer[data-kind="dep"] .x { position: static; flex: none; }
.drawer[data-kind="dep"] > .body { padding: 18px 22px 28px; gap: 16px; }
.det-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.det-kpi { min-width: 0; display: grid; gap: 3px; padding: 12px 16px; }
.det-kpi + .det-kpi { border-left: 1px solid var(--line); }
.det-kpi > span { font-size: var(--fs-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.det-kpi > b { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.det-kpi > small { font-size: var(--fs-2xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.det-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.det-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.det-main .tabs { margin: 0; }
#tabbody > p.muted:only-child { margin: 0; padding: 36px 16px; text-align: center; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--dim); }
.det-card .cmd { word-break: normal; overflow-wrap: anywhere; }
.det-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.det-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; background: var(--panel); }
.det-card h3 { font-size: var(--fs-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.det-card .spark { width: 100%; height: 80px; }
.det-card .cmd { margin: 0; }
.det-facts { display: grid; gap: 8px; margin: 0; }
.det-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); }
.det-facts dt { color: var(--muted); }
.det-facts dd { margin: 0; font-weight: 600; color: var(--text); text-align: right; }
@media (max-width: 1100px) {
  .det-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .det-kpi:nth-child(4) { border-left: 0; }
  .det-kpi:nth-child(n+4) { border-top: 1px solid var(--line); }
  .det-grid { grid-template-columns: minmax(0, 1fr); }
  .det-side { position: static; }
}
@media (max-width: 760px) {
  .drawer[data-kind="dep"] > header { flex-wrap: wrap; }
  .det-actions { order: 3; width: 100%; flex-wrap: wrap; }
  .det-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .det-kpi:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .det-kpi:nth-child(even) { border-left: 1px solid var(--line); }
  .det-kpi:nth-child(-n+2) { border-top: 0; }
}
.run-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.run-notes .callout { margin: 0; }
@media (max-width: 1100px) {
  .drawer[data-kind="run"] .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer[data-kind="run"] .grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .drawer[data-kind="run"] > header { flex-wrap: wrap; padding: 12px 16px; }
  .drawer[data-kind="run"] > .body { padding: 16px; }
}

.cfg-section td {
  background: var(--panel-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
}
.cfg-raw { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.cfg-raw summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.lg-open-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: var(--fs-xs); }

.x {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.x:hover { background: var(--panel-3); color: var(--text); }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button {
  border: 0;
  background: none;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-bottom: 2px solid transparent;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }

.log {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  font: var(--fs-xs)/1.6 var(--mono);
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
  max-height: 460px;
  margin: 0;
}
.cmd {
  font: var(--fs-xs) var(--mono);
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.modal {
  position: fixed;
  z-index: 32;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  background: var(--panel);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.modal.modal-wide { width: min(760px, calc(100% - 32px)); }
.modal > header { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.modal > header h2 { font-size: var(--fs-lg); font-weight: 700; }
.modal .body { padding: 16px 20px; display: grid; gap: 14px; font-size: var(--fs-sm); }
.modal > footer { padding: 14px 20px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.field { display: grid; gap: 6px; }
.field > label, .field > span, .field > .lbl { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  border-radius: var(--r-input, 10px);
  padding: 8px 11px;
  width: 100%;
  min-height: 36px;
  font-size: var(--fs-sm);
}
.field textarea { border-radius: 10px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  background: var(--panel);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg label { border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 11px 13px; cursor: pointer; display: grid; gap: 2px; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.seg label.livepick:has(input:checked) { border-color: var(--live); background: var(--live-bg); }
.seg label b { font-size: var(--fs-base); }
.seg label span { font-size: var(--fs-xs); color: var(--muted); }

.callout { border-radius: 12px; padding: 11px 14px; font-size: var(--fs-sm); line-height: 1.5; }
.callout.live { background: var(--live-bg); border: 1px solid color-mix(in srgb, var(--live) 38%, transparent); }
.callout.info { background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.callout.warn { background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent); }

.radios { display: grid; gap: 8px; }
.radios label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; cursor: pointer; font-size: var(--fs-sm); }
.radios label:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.radios input { grid-row: span 2; margin-top: 3px; accent-color: var(--accent); }
.radios small { color: var(--muted); grid-column: 2; font-size: var(--fs-xs); }
.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-size: var(--fs-sm); }
.check input { accent-color: var(--accent); }
.err { color: var(--neg); font-size: var(--fs-sm); font-weight: 600; margin: 0; }

.toast {
  position: fixed;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  z-index: 45;
  font-size: var(--fs-sm);
  font-weight: 650;
  box-shadow: var(--shadow-lg);
  max-width: calc(100% - 32px);
}
.toast.bad { background: var(--neg); color: var(--on-neg); }

/* =====================================================================
   Qloxia Sign-in Screen, Command Palette & Shortcuts
   ===================================================================== */
.login {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
  min-height: 100vh;
}
.login-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding: 60px;
  color: #ffffff;
  background: radial-gradient(720px 520px at 0% 0%, rgba(255,255,255,.16), transparent 62%), #006fcf;
  border-right: 0;
}
.login-hero-copy { max-width: 480px; display: grid; gap: 16px; }
.login-hero .logo { background: #ffffff; color: #006fcf; box-shadow: none; }
.login-eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #ffffff;
}
.login-hero h2 { font-size: calc(39px * var(--fs-scale)); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; color: #ffffff; }
.login-hero h2 em { font-style: normal; color: #c9d4ff; }
.login-hero p { margin: 0; color: #e3e8ff; font-size: var(--fs-base); line-height: 1.6; }
.logo-lg { width: 52px; height: 52px; border-radius: 14px; }
.logo-lg svg { width: 28px; height: 28px; }
.login-points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 11px; color: #ffffff; font-size: var(--fs-sm); }
.login-points li { display: flex; align-items: center; gap: 11px; }
.login-points i { width: 9px; height: 9px; border-radius: 50%; background: var(--h); box-shadow: 0 0 10px var(--h); flex: none; }
.login-card {
  align-self: center;
  justify-self: center;
  width: min(390px, calc(100% - 32px));
  padding: 32px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 16px;
}

/* Command Palette */
.cmdk {
  position: fixed;
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  z-index: 41;
  width: min(620px, calc(100% - 24px));
  max-height: 72vh;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--dim); }
.cmdk-input svg { width: 18px; height: 18px; }
.cmdk-input input { flex: 1; border: 0; outline: 0; background: none; font-size: var(--fs-md); color: var(--text); }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-h { padding: 10px 10px 4px; color: var(--dim); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-sm);
}
.cmdk-item .cmdk-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c, var(--h, var(--accent))) 14%, transparent);
  color: var(--c, var(--h, var(--accent)));
  font-weight: 700;
}
.cmdk-item .cmdk-ico svg { width: 15px; height: 15px; }
.cmdk-item span { flex: 1; min-width: 0; display: grid; }
.cmdk-item small { color: var(--dim); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item.on { background: var(--accent-bg); }
.cmdk-go { opacity: 0; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.cmdk-item.on .cmdk-go { opacity: 1; }
.cmdk-foot { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--fs-xs); background: var(--panel-2); }
.cmdk-empty { padding: 26px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }

.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.keys div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.keys div span { display: inline-flex; gap: 4px; }
.keys h3 { grid-column: 1 / -1; margin: 10px 0 2px; font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

#dep-skipped, #dep-exits { scroll-margin-top: 80px; }
.print-only { display: none; }

/* =====================================================================
   Responsive Breakpoints
   ===================================================================== */
@media (max-width: 1540px) {
  .cmdk-btn { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .cmdk-btn span, .cmdk-btn kbd { display: none; }
}
@media (max-width: 1380px) {
  .status-chips #updated:not(.stale):not(.offline) { display: none; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-deployments { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1120px) {
  #mcx-chip { display: none; }
  .report-summary, .mw, .lg-page { grid-template-columns: minmax(0, 1fr); height: auto; }
  .report-chart { border-right: 0; border-bottom: 1px solid var(--line); }
  .svc { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .svc-facts { grid-column: 2 / -1; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed;
    left: -270px;
    top: 0;
    bottom: 0;
    width: 260px;
    transition: left .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .side.open { left: 0; }
  .side-toggle { display: none; }
  .btn.menu-btn { display: inline-grid; }
  .status-chips.hide-sm, .cmdk-btn.hide-sm { display: none; }
  .top { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .content { padding: 14px 14px 36px; }
  .dashboard-metrics, .catalog, .row2, .seg, .keys, .record { grid-template-columns: minmax(0, 1fr); }
  .dep-card-body { grid-template-columns: minmax(0, 1fr); }
  .dep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dep-search { margin-left: 0; flex: 1 1 100%; }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-hero { display: none; }
}

/* =====================================================================
   Redesign layer — top bar, Services, Gateway, Backtests
   Later rules override the older ones above on purpose.
   ===================================================================== */

/* ---- Top bar: calm soft pills, one family of shapes ---- */
.top { gap: 12px; min-height: 66px; background: color-mix(in srgb, var(--panel) 80%, transparent); }
.status-chips { height: auto; gap: 8px; border: 0; background: transparent; overflow: visible; }
.status-chips .chip {
  height: var(--tb-h); padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: var(--shadow);
}
.status-chips .chip + .chip { border-left: 1px solid var(--line); }
.status-chips #updated.stale { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.status-chips #updated.offline { border-color: color-mix(in srgb, var(--neg) 40%, var(--line)); }
.risk-zone { height: auto; gap: 8px; border: 0; background: transparent; overflow: visible; }
.risk-zone .btn {
  height: var(--tb-h); border-radius: 999px; padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--neg) 26%, var(--line));
  background: color-mix(in srgb, var(--neg) 7%, var(--panel));
}
.risk-zone .btn + .btn { border-left: 1px solid color-mix(in srgb, var(--neg) 26%, var(--line)); }
.risk-zone .btn:hover { border-color: var(--neg); }
.risk-zone .btn.on { background: var(--neg); border-color: var(--neg); }

/* ---- Shared: KPI cards get a coloured accent rail and a quiet hover ---- */
.kpis { gap: 16px; }
.kpi { padding: 18px 20px 16px; overflow: hidden; transition: transform .14s, box-shadow .14s; }
.kpi::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent); opacity: .85;
}
.kpi:nth-child(2)::before { background: var(--s2); }
.kpi:nth-child(3)::before { background: var(--s6); }
.kpi:nth-child(4)::before { background: var(--s5); }
.kpi.live::before { background: var(--neg); }
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.kpi .value { font-size: calc(25px * var(--fs-scale)); font-weight: 760; margin: 2px 0; }

/* ---- Services: a grid of cards instead of table-like rows ---- */
.svcs {
  display: grid; gap: 14px; padding: 18px 20px 20px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.svc {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel-2); position: relative;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc:hover { border-color: var(--line-2); box-shadow: var(--shadow-lg); transform: translateY(-1px); background: var(--panel); }
.svc.down { border-color: color-mix(in srgb, var(--neg) 30%, var(--line)); }
.svc.warn { border-color: color-mix(in srgb, var(--warn) 34%, var(--line)); }
.svc-top { display: flex; align-items: center; gap: 10px; }
.svc-top .svc-head { flex: 1; min-width: 0; }
.svc-head b { font-size: var(--fs-md); }
.svc-badge {
  padding: 3px 10px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700;
  text-transform: capitalize; white-space: nowrap; background: var(--panel-3); color: var(--muted);
}
.svc-badge.ok { background: var(--pos-bg); color: var(--pos); }
.svc-badge.warn { background: var(--warn-bg); color: var(--warn); }
.svc-badge.down { background: var(--neg-bg); color: var(--neg); }
.svc-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-xs); color: var(--dim); }
.svc-sub .mono { color: var(--muted); padding: 1px 7px; border-radius: 6px; background: var(--panel-3); }
.svc-health {
  font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  padding-top: 10px; border-top: 1px dashed var(--line-2);
}
.svc-act { justify-content: flex-start; flex-wrap: wrap; }
.svc-act .btn { flex: 0 0 auto; }

/* ---- Gateway: rules as stacked tiles, key above value ---- */
.rules { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.rule {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); background: var(--panel-2);
}
.rule span {
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim);
}
.rule b { text-align: left; font-size: var(--fs-base); font-weight: 650; line-height: 1.4; }
.rule:nth-child(3n+2) { border-left-color: var(--s2); }
.rule:nth-child(3n) { border-left-color: var(--s6); }
.panel .pad { padding: 18px 20px 20px; }

/* ---- Backtests: numbered two-step form on a clean grid ---- */
.bt-groups { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 18px; }
.bt-group { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); padding: 6px 18px 18px; min-width: 0; }
.bt-group > legend {
  display: inline-flex; align-items: center; gap: 9px; padding: 0 8px; font-size: var(--fs-xs);
  letter-spacing: .05em; color: var(--text);
}
.bt-group > legend i {
  width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--grad); color: var(--brand-ink); font-style: normal; font-size: var(--fs-2xs); letter-spacing: 0;
}
.bt-group .fields { display: grid; gap: 14px 14px; align-items: start; }
.bt-setup .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bt-params .fields { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.bt-group .field.wide { grid-column: 1 / -1; }
.btform .bt-group .field input, .btform .bt-group .field select,
.btform .bt-group .field input[type="date"] { width: 100%; min-width: 0; height: 38px; border-radius: 10px; }
.bt-group .field small { color: var(--dim); line-height: 1.35; }
.bt-group .seg-btns { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); }
.bt-foot {
  position: sticky; bottom: 0; margin: 0 -20px -20px; padding: 14px 20px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(10px);
  border-radius: 0 0 var(--r) var(--r);
}
.bt-cmd .cmdchip { padding: 7px 12px; border-radius: 9px; display: block; }
.bt-cmd #bt-cmd { flex: 1 1 auto; min-width: 0; }
.bt-cmd .lbl { flex: none; }
.bt-actions { flex: none; }
/* Jobs table: bot name + horizon tag stay on one line; the error text never wraps */
.bt-table td:nth-child(2) { white-space: nowrap; }
.bt-table td:nth-child(2) > * { vertical-align: middle; }
.bt-table td .bt-err { white-space: nowrap; display: inline-block; }
@media (max-width: 980px) { .bt-groups { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .svcs { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .status-chips { flex-wrap: wrap; }
}

/* ---- Order Book filter bar: one control height, wrapped rows stay aligned ---- */
.ord-bar { padding: 14px 18px; }
.ord-filters { gap: 10px 12px; }
.ord-filters .seg-btns { height: 36px; padding: 3px; border-radius: 10px; }
.ord-filters .seg-btns button { height: 28px; padding: 0 12px; border-radius: 7px; }
.ord-dates { flex-wrap: nowrap; gap: 8px; }
.ord-dates .seg-btns { margin-right: 2px; }
.ord-dates input[type="date"] { height: 36px; padding: 0 10px; border-radius: 10px; }
.ord-filters > select#ord-bot {
  height: 36px; min-width: 150px; padding: 0 12px; border-radius: 10px;
  background: var(--panel-2); font-weight: 600;
}
.ord-q { margin-left: 0; flex: 1 1 260px; min-width: 220px; max-width: none; height: 36px; padding: 0 14px; gap: 9px; }
.ord-q .ico { color: var(--dim); }
.ord-q input { font-size: var(--fs-sm); }
.ord-q:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); background: var(--panel); }

/* Tables: IDs, date ranges and the bot name with its horizon tag stay on one line */
td.mono { white-space: nowrap; }
td:has(> .botmark) { white-space: nowrap; }

/* =====================================================================
   Daylight shell — a white top bar with the six places, a page heading
   (title, status chips, search) and section tabs for places that hold
   several pages. Later rules override the older sidebar layout above.
   ===================================================================== */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.side { display: none; }
.main { flex: 1 1 auto; min-height: 0; }

.top {
  --tb-h: 40px;
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  min-height: 68px;
  padding: 12px 32px;
  background: var(--panel);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.top .brand { padding: 0; border-bottom: 0; gap: 10px; flex: none; }
.top .brand .logo { width: 36px; height: 36px; border-radius: 12px; box-shadow: none; }
.top .brand .logo svg { width: 20px; height: 20px; }
.top .brand-copy { flex: none; }
.top .brand-copy b { font-family: var(--display); font-size: calc(17px * var(--fs-scale)); font-weight: 700; letter-spacing: -.02em; }
.top #nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; margin-right: auto; }
.top #nav a {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.top #nav a:hover { background: var(--panel-3); color: var(--text); }
.top #nav a.on { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.top .risk-zone .btn { height: var(--tb-h); font-size: var(--fs-sm); font-weight: 700; }
.top .token-btn { height: var(--tb-h); }
.top .icon-btn.circle-btn { width: var(--tb-h); height: var(--tb-h); background: var(--panel); }
.top .avatar { width: var(--tb-h); height: var(--tb-h); border: 0; background: var(--text); color: var(--panel); box-shadow: none; }

.page-head {
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 26px 22px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
}
.page-head .title-lockup { flex: 1 1 320px; min-width: 0; }
.page-head .title-stack { gap: 4px; }
.page-head .title-stack h1 { font-family: var(--display); font-size: calc(29px * var(--fs-scale)); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; white-space: normal; }
.page-head .subtitle { font-size: var(--fs-base); color: var(--muted); white-space: normal; }
.page-head .status-chips .chip { height: 36px; }
.page-head .cmdk-btn { height: 36px; background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }

.subnav {
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 16px 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.subnav[hidden] { display: none; }
.subnav a {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.subnav a:hover { color: var(--text); border-color: var(--line-2); text-decoration: none; }
.subnav a.on { background: var(--text); border-color: var(--text); color: var(--panel); }

/* Big numbers in the display face. */
.dash-val, .kpi .value, .ord-kpi b, .keymetric-grid b { font-family: var(--display); }
.dash-val { font-weight: 700; letter-spacing: -.03em; }

@media (max-width: 860px) {
  .top { padding: 10px 14px; gap: 8px 12px; }
  .top #nav { order: 3; width: 100%; margin-right: 0; flex-wrap: nowrap; overflow-x: auto; }
  .page-head, .subnav { padding-left: 14px; padding-right: 14px; }
  .page-head .title-stack h1 { font-size: calc(23px * var(--fs-scale)); }
}

/* =====================================================================
   Strategies board — four tinted stage columns holding white cards:
   Backtest (violet), Paper (amber), Live (green), Retired (grey).
   ===================================================================== */
:root {
  --stage-bt: #3f2a9e;
  --stage-bt-bg: #efebff;
  --stage-bt-dot: #6b4fe0;
  --stage-paper-dot: #e08a00;
  --stage-live-dot: #12a866;
  --stage-ret-dot: #8a93a1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stage-bt: #c4b5ff;
    --stage-bt-bg: rgba(154,130,255,.13);
    --stage-bt-dot: #9a82ff;
    --stage-paper-dot: #ffc56b;
    --stage-live-dot: #4ade9b;
    --stage-ret-dot: #8a93a8;
  }
}
:root[data-theme="dark"] {
  --stage-bt: #c4b5ff;
  --stage-bt-bg: rgba(154,130,255,.13);
  --stage-bt-dot: #9a82ff;
  --stage-paper-dot: #ffc56b;
  --stage-live-dot: #4ade9b;
  --stage-ret-dot: #8a93a8;
}

.board-page { display: flex; flex-direction: column; gap: 16px; }
.bd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bd-bar > .muted { font-weight: 600; }
.bd-bar-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-bar .btn { height: 40px; padding: 0 18px; font-size: var(--fs-base); font-weight: 700; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bd-col {
  --st: var(--muted);
  --st-bg: var(--panel-3);
  --st-dot: var(--stage-ret-dot);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border-radius: 26px;
  background: var(--st-bg);
}
.bd-backtest { --st: var(--stage-bt); --st-bg: var(--stage-bt-bg); --st-dot: var(--stage-bt-dot); }
.bd-paper { --st: var(--paper); --st-bg: var(--paper-bg); --st-dot: var(--stage-paper-dot); }
.bd-live { --st: var(--live); --st-bg: var(--live-bg); --st-dot: var(--stage-live-dot); }
.bd-col > header { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 2px; }
.bd-col-title { display: flex; align-items: center; gap: 10px; }
.bd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st-dot); flex: none; }
.bd-col h2 { margin: 0; font-family: var(--display); font-size: calc(17px * var(--fs-scale)); font-weight: 700; letter-spacing: -.01em; color: var(--st); }
.bd-count {
  margin-left: auto;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--panel);
  color: var(--st);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.bd-col > header p { margin: 0; font-size: var(--fs-sm); color: color-mix(in srgb, var(--st) 62%, var(--muted)); }

.bd-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.bd-card[data-detail] { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.bd-card[data-detail]:hover { transform: translateY(-1px); box-shadow: var(--shadow), 0 16px 30px -20px rgba(16,24,40,.4); }
.bd-card[data-detail]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bd-card > header { display: flex; align-items: flex-start; gap: 12px; }
.bd-card .dep-bot-ico { width: 38px; height: 38px; }
.bd-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-id b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.bd-id small { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.bd-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bd-fig { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bd-fig span { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.bd-fig b { font-family: var(--display); font-size: calc(16px * var(--fs-scale)); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-fig small { font-size: var(--fs-2xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-progress { display: flex; flex-direction: column; gap: 7px; }
.bd-progress > div:first-child { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--muted); }
.bd-progress b { color: var(--text); }
.bd-steps { display: flex; gap: 4px; }
.bd-steps i { flex: 1; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--stage-paper-dot) 22%, var(--panel-3)); }
.bd-steps i.on { background: var(--stage-paper-dot); }
.bd-progress small { font-size: var(--fs-xs); color: var(--muted); }
.bd-evs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.bd-ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bd-ev:last-child { border-bottom: 0; padding-bottom: 0; }
.bd-ev span { font-size: var(--fs-sm); color: var(--muted); }
.bd-ev b { font-family: var(--display); font-size: var(--fs-base); font-weight: 700; }
.bd-ev small { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--dim); }
.bd-line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.bd-line .ico { flex: none; color: var(--dim); }
button.bd-link {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
button.bd-link:hover { border-color: var(--line-2); color: var(--text); }
.bd-card > footer { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-card > footer .btn { flex: 1 1 auto; height: 40px; font-size: var(--fs-sm); font-weight: 700; }
.bd-empty {
  padding: 18px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--st) 30%, transparent);
  border-radius: 18px;
  color: color-mix(in srgb, var(--st) 70%, var(--muted));
  font-size: var(--fs-sm);
  text-align: center;
}
.bd-list { display: flex; flex-direction: column; padding: 4px 16px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.bd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bd-row:last-child { border-bottom: 0; }
.bd-row .dep-bot-ico { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.bd-row .dep-bot-ico .ico { width: 15px; height: 15px; }
.bd-row-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bd-row-id b { font-weight: 700; }
.bd-row-id small, .bd-row-num small { font-size: var(--fs-xs); color: var(--muted); }
.bd-row-num { display: flex; flex-direction: column; align-items: flex-end; }
.bd-row-num b { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.bd-row:hover .bd-row-id b { color: var(--accent); }
.bd-more { align-self: center; font-size: var(--fs-sm); font-weight: 600; }
.bd-foot { margin: 0; font-size: var(--fs-sm); text-align: center; }
@media (max-width: 1280px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .bd-bar .btn { flex: 1 1 auto; }
}
.bd-row-id b { display: inline-flex; align-items: center; gap: 6px; }

/* =====================================================================
   Today — a wide cobalt P&L hero with the session's curve, beside the
   overall-performance and risk cards.
   ===================================================================== */
.today-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 18px; align-items: stretch; }
.hero-pnl {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 28px 30px 20px;
  border-radius: 28px;
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 24px 44px -26px var(--brand-glow);
}
.hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hero-fig { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hero-label { font-size: var(--fs-md); font-weight: 600; }
.hero-val, .hero-val.pos, .hero-val.neg {
  color: var(--brand-ink);
  font-family: var(--display);
  font-size: clamp(calc(43px * var(--fs-scale)), calc(4.6vw * var(--fs-scale)), calc(71px * var(--fs-scale)));
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.hero-note { font-size: var(--fs-base); opacity: .88; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-ink) 16%, transparent);
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
a.hero-pill:hover { background: color-mix(in srgb, var(--brand-ink) 24%, transparent); color: var(--brand-ink); text-decoration: none; }
.hero-pill .dot { background: var(--brand-ink); box-shadow: none; }
.hero-chart { position: relative; margin-top: auto; }
.hero-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.hero-chart .zero { stroke: color-mix(in srgb, var(--brand-ink) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.hero-chart .area { fill: var(--brand-ink); opacity: .16; }
.hero-chart .ln { fill: none; stroke: var(--brand-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.hero-x { position: relative; height: 18px; margin-top: 8px; font-family: var(--mono); font-size: var(--fs-xs); opacity: .85; }
.hero-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.hero-x span:first-child { transform: none; }
.hero-x span:last-child:not(:first-child) { transform: translateX(-100%); }
.hero-wait {
  flex: 1;
  min-height: 150px;
  margin-top: auto;
  display: grid;
  place-items: center;
  border: 1.5px dashed color-mix(in srgb, var(--brand-ink) 35%, transparent);
  border-radius: 18px;
}
.hero-wait span { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--brand-ink) 14%, transparent); font-size: var(--fs-sm); font-weight: 600; }
.hero-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.side-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.side-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.side-card h2 { margin: 0; font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; }
.side-tag { font-size: var(--fs-xs); color: var(--muted); }
.side-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.side-big b { font-family: var(--display); font-size: calc(27px * var(--fs-scale)); font-weight: 700; letter-spacing: -.03em; }
.side-big span { font-size: var(--fs-sm); color: var(--muted); }
.side-card .spark { height: 56px; }
.side-card .spark-wait { height: 40px; }
.side-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); }
.side-row span { color: var(--muted); }
.side-row b { font-weight: 600; text-align: right; }
.side-meter { display: flex; flex-direction: column; gap: 6px; }
.side-meter .metric-meter { height: 8px; background: var(--accent-bg); }
.side-meter small { font-size: var(--fs-xs); color: var(--dim); }
.risk-pill { padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.risk-pill.ok { background: var(--pos-bg); color: var(--pos); }
.risk-pill.warn { background: var(--warn-bg); color: var(--warn); }
.risk-pill.bad { background: var(--neg-bg); color: var(--neg); }
@media (max-width: 1100px) {
  .today-top { grid-template-columns: minmax(0, 1fr); }
  .hero-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero-side { grid-template-columns: minmax(0, 1fr); }
  .hero-pnl { padding: 22px 20px 16px; border-radius: 24px; }
  .hero-chart svg, .hero-wait { height: 120px; min-height: 120px; }
}

/* Compact Today dashboard: keep the operating picture above the fold and
   let the layout scale from a wide desk display to a narrow phone. */
.today-top { grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr); gap: 14px; }
.hero-pnl { gap: 14px; min-height: 318px; padding: 22px 24px 16px; border-radius: 22px; }
.hero-top { gap: 12px; }
.hero-fig { gap: 5px; }
.hero-label { font-size: var(--fs-sm); }
.hero-val, .hero-val.pos, .hero-val.neg {
  font-size: clamp(calc(38px * var(--fs-scale)), calc(3.6vw * var(--fs-scale)), calc(58px * var(--fs-scale)));
}
.hero-note { font-size: var(--fs-sm); }
.hero-pill { height: 30px; padding: 0 11px; font-size: var(--fs-xs); }
.hero-chart svg { height: 92px; }
.hero-wait { min-height: 92px; border-radius: 14px; }
.hero-x { margin-top: 5px; }
.hero-side { gap: 14px; }
.side-card { gap: 9px; padding: 15px 18px; border-radius: 18px; }
.side-card h2 { font-size: var(--fs-md); }
.side-big b { font-size: calc(24px * var(--fs-scale)); }
.side-card .spark { height: 38px; }
.side-card .spark-wait { height: 30px; }
.risk-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-content: start; }
.risk-card > header, .risk-card > .side-meter { grid-column: 1 / -1; }
.risk-card .side-row { min-width: 0; font-size: var(--fs-xs); }
.risk-card .side-row b { overflow-wrap: anywhere; }
.risk-card .side-meter { margin-top: 2px; }
.risk-card .metric-meter { margin-top: 1px; }

@media (max-width: 1100px) {
  .today-top { grid-template-columns: minmax(0, 1fr); }
  .hero-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-pnl { min-height: 286px; }
}
@media (max-width: 640px) {
  .dashboard { gap: 12px; }
  .today-top { gap: 12px; }
  .hero-side { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero-pnl { min-height: 0; padding: 18px 16px 14px; border-radius: 18px; }
  .hero-top { align-items: flex-start; flex-direction: column; }
  .hero-val, .hero-val.pos, .hero-val.neg { font-size: calc(42px * var(--fs-scale)); }
  .hero-pills { width: 100%; }
  .hero-chart svg, .hero-wait { height: 78px; min-height: 78px; }
  .hero-x { font-size: 10px; }
  .side-card { padding: 14px 15px; border-radius: 16px; }
  .risk-card { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .risk-card > header, .risk-card > .side-meter { grid-column: auto; }
  .risk-card .side-row { font-size: var(--fs-sm); }
}

/* Go live: the safety checks in the deploy dialog's live box. */
.golive { margin-bottom: 12px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); }
.golive-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.golive-head b { font-family: var(--display); font-size: var(--fs-md); font-weight: 600; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checks li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.checks li:first-child { border-top: 0; }
.chk-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.chk-ico .ico { stroke-width: 2.4; }
.checks .ok .chk-ico { background: var(--pos-bg); color: var(--pos); }
.checks .warn .chk-ico { background: var(--warn-bg); color: var(--warn); }
.checks .bad .chk-ico { background: var(--neg-bg); color: var(--neg); }
.checks .info .chk-ico { background: var(--info-bg); color: var(--info); }
.chk-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chk-text b { font-size: var(--fs-sm); font-weight: 650; }
.chk-text span { font-size: var(--fs-xs); color: var(--muted); }
.golive-ack { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-weight: 600; }

/* A deployment's lifecycle in its drawer: Backtest → Paper → Live → Retired. */
.life {
  list-style: none;
  margin: 0 0 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}
.life li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.life i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--panel-3);
  color: var(--dim);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.life i .ico { stroke-width: 2.4; }
.life .done i { background: var(--pos-bg); color: var(--pos); }
.life .now i { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 4px var(--accent-bg); }
.life span { min-width: 0; }
.life b { display: block; font-size: var(--fs-sm); font-weight: 700; }
.life small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.life .next b, .life .skip b { color: var(--muted); }
.life .now b { color: var(--accent); }
@media (max-width: 760px) { .life { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   Daylight polish — labels in sentence case, plain white KPI tiles, and
   cards that read left to right. Overrides the older layers above.
   ===================================================================== */
th, .kpi .label, .dep-kpi-head > span, .dep-perf-label, .bot-facts span, .record-box > span, .fig span, .svc-facts span,
.keymetric-grid span, .cal .dow, .bt-group > legend, .ord-kpi span, .ord-f span, .lg-group-h, .mw-list-head, .mw-group-head,
.cfg-section td, .det-kpi > span, .det-card h3, .rule span, .bt-cmd .lbl, .cmdk-h, .keys h3, .ind-nav-h, .ind-h,
table.stacked tbody td::before {
  text-transform: none;
  letter-spacing: 0;
}
th { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.kpi .label, .dep-kpi-head > span, .det-kpi > span, .ord-kpi span, .keymetric-grid span, .rule span,
.bot-facts span, .record-box > span, .fig span, .svc-facts span, .ord-f span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}
.dep-perf-label, .mw-list-head, .mw-group-head, .lg-group-h, .cmdk-h, .keys h3, .ind-nav-h, .ind-h, .bt-cmd .lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.det-card h3 { font-family: var(--display); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.cal .dow { font-size: var(--fs-xs); font-weight: 600; }
.bt-group > legend { font-size: var(--fs-sm); font-weight: 700; }

/* KPI tiles: no decorative rail; the number in the display face; the kill switch tile red while on. */
.kpi::before { display: none; }
.kpi { border-radius: 20px; }
.kpi .value { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; }
.kpi.live { border-color: color-mix(in srgb, var(--neg) 40%, var(--line)); background: color-mix(in srgb, var(--neg) 5%, var(--panel)); }

/* Gateway rules: plain tiles, the rule's name over its setting. */
.rule, .rule:nth-child(3n+2), .rule:nth-child(3n) { border-left: 1px solid var(--line); border-radius: 16px; }

/* Services: identity and state across the top, everything left-aligned. */
.svc { align-items: stretch; border-radius: 18px; }
.svc-facts { display: grid; }
.lg-cols { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); font-weight: 600; }
.lg-group-h { text-transform: capitalize; }

/* The top bar when one row cannot hold it (fitTopBar): the places drop to a row of
   their own, the brand on the left and the controls on the right above them. */
.top.two-rows { row-gap: 8px; padding-bottom: 8px; }
.top.two-rows .brand { margin-right: auto; }
.top.two-rows #nav { order: 3; width: 100%; margin-right: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.top.two-rows #nav::-webkit-scrollbar { display: none; }
.bd-line b, .bd-row-num b, .bd-ev b { white-space: nowrap; }

/* Market Watch: the "A" button shown while a price scale is set by hand -- at the price axis's foot. */
.mw-autoscale {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: var(--brand-ink);
  font: 700 9.5px var(--font);
  cursor: pointer;
}
.mw-autoscale:hover { filter: brightness(1.1); }

/* =====================================================================
   Restored: rules the 16 Oct restyle dropped although the page still
   draws these elements (spinner, Market Watch, indicators, orders,
   config table, backtest PDF export). Colours follow the current tokens.
   ===================================================================== */
small.est { font-size: inherit; }
.dashboard-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.botcard-state { align-self: start; padding-top: 1px; }
.botcard-state .pill { white-space: nowrap; }
fieldset.multi { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.multi legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
fieldset.multi .row { gap: 14px; }
fieldset.multi small { color: var(--dim); font-size: var(--fs-2xs); }
.cfg td { vertical-align: top; }
.cfg td:first-child { white-space: nowrap; }
.cfg .cfg-value { white-space: normal; overflow-wrap: anywhere; }
.cfg tr.cfg-section td { background: var(--panel-2); font-size: var(--fs-2xs); color: var(--muted); font-weight: 650; padding-top: 12px; }
.gateway-rules-panel { overflow: hidden; }
.pill.opt.ce { background: color-mix(in srgb, var(--s1) 14%, transparent); color: var(--s1); }
.pill.opt.pe { background: color-mix(in srgb, var(--s2) 14%, transparent); color: var(--s2); }
.pager-gap { padding: 0 4px; color: var(--dim); }
.bt-table .idcol { width: 44px; color: var(--dim); font-variant-numeric: tabular-nums; font-weight: 600; }
.modal > footer .spacer, .mw-toolbar .spacer, .ind-ed-actions .spacer { flex: 1; }
.chip.mcx-open .dot { background: var(--c-mcx_crudeoilm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-mcx_crudeoilm) 18%, transparent); }
.status-chips .chip:not(.mcx-open) .dot:not(.ok) { background: var(--dim); box-shadow: none; }

/* Market Watch */
.mw-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--panel-3); color: var(--muted); font-size: var(--fs-2xs); text-align: center; font-variant-numeric: tabular-nums; }
.mw-pop-sep { padding-top: 10px; border-top: 1px solid var(--line); }
.mw-jump { flex: 1; min-height: 28px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); padding: 3px 6px; font-size: var(--fs-xs); }
.mw-span { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mw-ohlc { flex: 1 1 330px; min-width: 0; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; white-space: nowrap; color: var(--muted); }
.mw-ohlc b { color: var(--text); font-weight: 600; margin-right: 6px; }
.mw-ohlc .dim { margin-right: 8px; }
.mw-chart.dragging { cursor: grabbing; }
.mw-shape-text { font: 600 9px var(--font); }
.mw-draw-text { font-family: var(--font); font-weight: 600; font-variant-numeric: tabular-nums; }
.mw-leg-err { color: var(--neg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mw-error b { color: var(--neg); }
.mw-error .btn { margin-top: 6px; }
.mw-error .row { justify-content: center; margin-top: 4px; }
.mw-fallback.mw-stale { background: var(--warn-bg); color: var(--warn); }
.mw-spin { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.mw-row:hover .mw-grip, .mw-list.reordering .mw-grip { opacity: 1; }
.mw-list.reordering, .mw-list.reordering * { cursor: grabbing !important; user-select: none; }
.mw-row.dragging { z-index: 2; background: var(--panel); box-shadow: 0 6px 18px rgba(0, 0, 0, .16), 0 0 0 1px var(--line-2); }
.mw-row.dragging .mw-row-x { opacity: 0; }
@media (max-width: 900px) { .mw-ohlc { justify-content: flex-start; } }
@media (max-width: 520px) {
  .mw-toolbar .spacer { display: none; }
  .mw-ohlc { flex-basis: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .mw-spin { animation: none; } }

/* Indicator dialogs */
.ind-row-err { flex: 1 1 100%; font-size: var(--fs-2xs); overflow-wrap: anywhere; }
.ind-none { margin: 0; font-size: var(--fs-xs); }
.ind-help { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.ind-help summary { cursor: pointer; font-weight: 600; }
.ind-help p { margin: 6px 0 0; line-height: 1.55; }
.ind-help code { font: 10px var(--mono); color: var(--text); background: var(--panel-3); padding: 0 3px; border-radius: 3px; }
.ind-n { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--panel-3); color: var(--text); font-size: var(--fs-2xs); text-align: center; }
.ind-n:empty { display: none; }
.ind-on { color: var(--pos); font-style: normal; font-weight: 700; }
.modal.ind-set-modal { width: min(460px, calc(100% - 32px)); }
.ind-tabs { padding: 0 16px; }
.ind-set { display: grid; gap: 8px; max-height: min(520px, calc(100vh - 220px)); overflow-y: auto; }
.ind-set .ind-h { margin: 6px 0 0; }
.ind-style-row { grid-template-columns: 1fr 44px 78px; }
.ind-set-check { font-size: var(--fs-sm); }

/* Order Book */
.ord-body { display: grid; gap: 14px; }
.ord-table td { vertical-align: middle; }
.ord-table .nowrap { white-space: nowrap; }
.ord-date { color: var(--muted); margin-right: 6px; }
.ord-inst b { font-weight: 600; }
.ord-inst .dim { font-size: var(--fs-2xs); }

/* A backtest result exported to PDF: the run drawer printed on its own, on white. */
.drawer > header .run-pdf { margin-left: auto; }
.drawer > header .run-pdf .ico { width: 13px; height: 13px; }
@media print {
  :root { --fs-scale: 1; }
  body.print-run, body.print-run * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-run { --bg: #ffffff; --panel: #ffffff; --panel-2: #f6f7fb; --panel-3: #eef0f6; --line: #dfe3ec; --line-2: #c9cfdc; --text: #0e1426; --muted: #4f5b76; --dim: #7a8499; --pos: #04875c; --pos-bg: rgba(4,135,92,.10); --neg: #d0213f; --neg-bg: rgba(208,33,63,.09); --shadow: none; --shadow-lg: none; background: #fff !important; color: var(--text); }
  body.print-run #app, body.print-run .toast, body.print-run #layer .scrim { display: none !important; }
  body.print-run #layer .drawer { position: static !important; width: auto !important; height: auto !important; max-height: none !important; box-shadow: none !important; border: 0 !important; background: #fff !important; display: block !important; }
  body.print-run #layer .drawer > header { display: none !important; }
  body.print-run #layer .drawer .body { overflow: visible !important; padding: 0 !important; display: block !important; }
  body.print-run #layer .drawer .body > * { margin-bottom: 10px; }
  body.print-run .print-only { display: block; }
  body.print-run .print-head { padding: 0 0 8px; margin-bottom: 12px !important; border-bottom: 2px solid var(--accent); }
  body.print-run .print-head b { display: block; font-size: 16px; }
  body.print-run .print-head span { font-size: 11px; color: var(--muted); }
  body.print-run .cmd { white-space: pre-wrap; word-break: break-all; font-size: 10.5px; }
  body.print-run .panel, body.print-run .kpi { box-shadow: none !important; break-inside: avoid; }
  body.print-run .panel:has(table) { break-inside: auto; }
  body.print-run .panel > header { break-after: avoid; }
  body.print-run .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  body.print-run .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  body.print-run .vtabs, body.print-run [data-rundelete], body.print-run .pager, body.print-run .chart .tip, body.print-run .chart .xh { display: none !important; }
  body.print-run .tablewrap { max-height: none !important; overflow: visible !important; }
  body.print-run #layer tr[hidden] { display: table-row !important; }
  body.print-run table { font-size: 9.5px; }
  body.print-run th { position: static !important; }
  body.print-run thead { display: table-header-group; }
  body.print-run tr { break-inside: avoid; }
  body.print-run table.stacked thead { display: table-header-group !important; }
  body.print-run table.stacked, body.print-run table.stacked tbody { display: table !important; width: 100%; }
  body.print-run table.stacked tr { display: table-row !important; }
  body.print-run table.stacked td { display: table-cell !important; padding-left: 6px !important; }
  body.print-run table.stacked td::before { display: none !important; }
}

/* Market Watch and Live Logs fill the window under the header, whatever its height
   (two-row top bar, a banner), so the page itself never scrolls. Stacked below 1120px. */
@media (min-width: 1121px) {
  .shell:has(#view > .mw, #view > .lg-page) { height: 100vh; min-height: 0; }
  .shell:has(#view > .mw, #view > .lg-page) .main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #view.content:has(> .mw), #view.content:has(> .lg-page) { flex: 1 1 auto; min-height: 0; padding-bottom: 16px; }
  #view > .mw, #view > .lg-page { flex: 1 1 auto; height: auto; min-height: 480px; }
}

/* One slim row under the top bar: the section tabs left, market status and search right.
   The page title is for screen readers only -- the top bar already says where you are. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-head { padding: 12px 22px 0; align-items: center; gap: 8px 12px; }
.page-head .subnav { padding: 0; margin: 0 auto 0 0; width: auto; max-width: none; flex: 1 1 auto; }
.page-head .subnav[hidden] { display: flex !important; visibility: hidden; }
.page-head .subnav a { height: 32px; padding: 0 14px; }
.page-head .status-chips .chip, .page-head .cmdk-btn { height: 32px; }
@media (max-width: 860px) { .page-head { padding-left: 14px; padding-right: 14px; } }

/* =====================================================================
   American Express look: Ubuntu type, headings in a medium weight with normal tracking, Amex blue.
   ===================================================================== */
h1, h2, .page-head .title-stack h1, .top .brand-copy b, .hero-val, .bd-col h2, .bd-id b, .bd-fig b, .bd-ev b, .side-card h2,
.side-big b, .kpi .value, .dash-val, .golive-head b, .det-card h3, .bd-row-num b, .life b {
  letter-spacing: 0;
}
.top .brand-copy b, .bd-col h2, .side-card h2, .golive-head b, h1, h2 { font-weight: 500; }
.hero-val, .side-big b, .kpi .value, .bd-fig b { font-weight: 500; }
.hero-val { letter-spacing: -.01em; }
.top #nav a { font-weight: 500; }
.top #nav a.on { font-weight: 500; }

/* Market status, clock and search sit in the top bar beside the risk controls, compact:
   NSE / MCX show their dot and name (the detail is the tooltip), search is an icon. */
.top .status-chips { display: flex; gap: 6px; margin-left: auto; }
.top .status-chips .chip { height: 32px; padding: 0 11px; gap: 6px; box-shadow: none; font-size: var(--fs-xs); }
.top .status-chips #market-chip > span, .top .status-chips #mcx-chip > span { display: none; }
.top .cmdk-btn { width: var(--tb-h); height: var(--tb-h); padding: 0; justify-content: center; border-radius: 999px; box-shadow: none; background: var(--panel); }
.top .cmdk-btn > span, .top .cmdk-btn > kbd { display: none; }
.top .cmdk-btn svg { width: 16px; height: 16px; }
.top #nav { margin-right: 0; }
.top.two-rows .status-chips { margin-left: auto; }
.page-head:not(:has(.subnav:not([hidden]))) { display: none; }

/* Top bar: every control one height, one text size and weight -- the place tabs,
   market chips, clock, risk buttons, theme and account all line up. */
.top { --tb-h: 36px; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
.top #nav a { height: var(--tb-h); padding: 0 14px; font-size: var(--fs-sm); font-weight: 500; }
.top .status-chips .chip,
.top .risk-zone .btn,
.top .token-btn {
  height: var(--tb-h);
  padding: 0 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
}
.top .status-chips .chip b { font-weight: 600; }
.top .risk-zone .btn .ico, .top .token-btn .ico, .top .status-chips .chip .ico { width: 14px; height: 14px; }
.top .icon-btn.circle-btn, .top .avatar { width: var(--tb-h); height: var(--tb-h); }
.top .avatar { font-size: var(--fs-sm); }
.top .brand .logo { width: 32px; height: 32px; border-radius: 10px; }
.top .brand .logo svg { width: 18px; height: 18px; }
.top .brand-copy b { font-size: calc(16px * var(--fs-scale)); }
.top .status-chips .chip b, .top .status-chips .chip span { font-size: inherit; }

/* Top-bar controls two pixels smaller, with tighter padding and spacing. */
.top { --tb-h: 34px; min-height: 56px; column-gap: 18px; }
.top #nav a { padding: 0 12px; }
.top .status-chips { gap: 5px; }
.top .status-chips .chip, .top .risk-zone .btn, .top .token-btn { padding: 0 10px; gap: 5px; }
.top .risk-zone { gap: 6px; }
.top .icon-btn.circle-btn svg, .top .icon-btn.circle-btn .ico { width: 15px; height: 15px; }

/* The top bar when space is short (fitTopBar): compact, then tight, before two rows. */
.top.compact { column-gap: 10px; padding-left: 20px; padding-right: 20px; }
.top.compact #nav { gap: 2px; }
.top.compact #nav a { padding: 0 9px; }
.top.compact .status-chips #updated { display: none; }
.top.compact .status-chips .chip, .top.compact .risk-zone .btn, .top.compact .token-btn { padding: 0 8px; }
.top.tight .brand-copy { display: none; }
.top.tight .token-btn > span { display: none; }
.top.tight .token-btn { width: var(--tb-h); padding: 0; justify-content: center; }

/* =====================================================================
   Desk refresh: quiet surfaces, one compact command bar, and the P&L as
   a readable figure rather than a full-screen banner.
   ===================================================================== */
@media (min-width: 1000px) {
  .top, .top.two-rows {
    flex-wrap: nowrap;
    min-height: 58px;
    padding: 10px 28px;
    gap: 12px;
  }
  .top.two-rows #nav {
    order: initial;
    width: auto;
    flex: 0 1 auto;
    overflow: visible;
  }
  .top #nav { gap: 0; }
  .top #nav a { padding: 0 11px; }
  .top .status-chips { margin-left: auto; flex-wrap: nowrap; }
  .top .status-chips #market-chip > span,
  .top .status-chips #mcx-chip > span { display: none !important; }
  .top .status-chips .chip { padding: 0 9px; }
  .top .risk-zone { gap: 0; flex-wrap: nowrap; }
  .top .risk-zone .btn { padding: 0 10px; white-space: nowrap; }
.top .risk-zone .btn.icon { width: var(--tb-h); height: var(--tb-h); padding: 0; border-radius: var(--r-btn); display: inline-grid; place-items: center; }
.top .risk-zone .btn.icon .ico { width: 14px; height: 14px; }
}

.page-head { padding-top: 18px; }
.page-head .title-stack h1 { font-size: calc(25px * var(--fs-scale)); font-weight: 600; }
.page-head .subtitle { font-size: var(--fs-sm); }
.dashboard { gap: 14px; }
.today-top {
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, .95fr);
  gap: 14px;
}
.hero-pnl {
  min-height: 278px;
  padding: 20px 22px 14px;
  gap: 12px;
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel) 52%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.hero-top { align-items: flex-start; gap: 12px; }
.hero-fig { gap: 4px; }
.hero-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hero-val, .hero-val.pos, .hero-val.neg {
  color: var(--pos);
  font-size: clamp(calc(38px * var(--fs-scale)), calc(3.4vw * var(--fs-scale)), calc(54px * var(--fs-scale)));
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1;
}
.hero-note { color: var(--muted); font-size: var(--fs-sm); opacity: 1; }
.hero-pills { justify-content: flex-end; }
.hero-pill {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.hero-pill .dot { background: var(--pos); }
a.hero-pill:hover { background: var(--accent-bg); color: var(--accent); }
.hero-chart svg { height: 84px; }
.hero-chart .zero { stroke: var(--line-2); }
.hero-chart .area { fill: var(--accent); opacity: .08; }
.hero-chart .ln { stroke: var(--accent); stroke-width: 2.5; }
.hero-x { color: var(--dim); font-size: 10px; opacity: 1; }
.hero-wait { min-height: 84px; color: var(--muted); border-color: var(--line-2); background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.hero-wait span { background: transparent; padding: 0; }

.hero-side { gap: 14px; }
.side-card {
  gap: 8px;
  padding: 15px 18px;
  border-radius: 18px;
  box-shadow: none;
}
.side-card h2 { font-size: var(--fs-md); font-weight: 600; }
.side-tag { font-size: var(--fs-xs); }
.side-big b { font-size: calc(24px * var(--fs-scale)); font-weight: 650; }
.side-card .spark { height: 35px; }
.side-card .spark-wait { height: 28px; }
.risk-card { gap: 7px 18px; }
.risk-card .side-row { padding-top: 2px; }
.risk-card .side-row span { color: var(--dim); }
.risk-card .side-row b { font-weight: 650; }
.risk-pill { padding: 3px 8px; }

@media (max-width: 1180px) and (min-width: 1000px) {
  .top .status-chips #updated { display: none; }
  .top #nav a { padding: 0 8px; }
  .top .brand-copy { display: none; }
}
@media (max-width: 999px) {
  .today-top { grid-template-columns: minmax(0, 1fr); }
  .hero-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .page-head { padding-top: 14px; }
  .page-head .title-stack h1 { font-size: calc(23px * var(--fs-scale)); }
  .today-top, .hero-side { gap: 10px; }
  .hero-side { grid-template-columns: minmax(0, 1fr); }
  .hero-pnl { min-height: 0; padding: 16px; border-radius: 16px; }
  .hero-top { flex-direction: column; }
  .hero-pills { justify-content: flex-start; }
  .hero-chart svg, .hero-wait { height: 72px; min-height: 72px; }
  .side-card { padding: 14px 15px; border-radius: 16px; }
}

/* Live Logs: the file list can be hidden for a full-width log. */
.lg-page.side-hidden { grid-template-columns: minmax(0, 1fr); }
.lg-page.side-hidden .lg-side { display: none; }
.lg-side-btn { flex: none; margin-right: 4px; }
.lg-side-btn[aria-pressed="false"] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* Top-bar controls never wrap among themselves: the chips, token button and risk buttons
   stay on one line, and fitTopBar drops detail (clock, chip text, labels) before any wrap. */
.top .status-chips, .top .risk-zone { flex-wrap: nowrap; flex: none; }
.top .status-chips .chip, .top .risk-zone .btn, .top .token-btn { flex: none; white-space: nowrap; }
.top.dots .status-chips #market-chip > span, .top.dots .status-chips #mcx-chip > span { display: none !important; }
.top.dots .status-chips #updated { display: none; }
.top.two-rows .status-chips { margin-left: 0; }

/* =====================================================================
   Today hero, in the manner of a trading app's portfolio screen: one big
   figure with its change chip, one chart with a range switch, three stats.
   ===================================================================== */
.pf-hero {
  --tone: var(--muted);
  position: relative; overflow: hidden;
  display: grid; gap: 18px;
  padding: 20px 22px 18px;
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
}
.pf-hero.up { --tone: var(--pos); }
.pf-hero.down { --tone: var(--neg); }
.pf-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tone) 10%, transparent), transparent 60%);
}
.pf-hero > * { position: relative; }
.pf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pf-ident { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-book {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.pf-book i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.pf-book.live { color: var(--text); }
.pf-book.live i { background: var(--live); animation: pf-pulse 2.4s ease-out infinite; }
@keyframes pf-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) { .pf-book.live i { animation: none; } }
.pf-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; white-space: nowrap;
}
a.pf-chip:hover { color: var(--accent); border-color: var(--accent); }
.pf-risk {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; cursor: help;
}
.pf-risk i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pf-risk.ok { background: var(--pos-bg); color: var(--pos); }
.pf-risk.warn { background: var(--warn-bg); color: var(--warn); }
.pf-risk.bad { background: var(--neg-bg); color: var(--neg); }

.pf-main { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.6fr); gap: 24px; align-items: stretch; }
.pf-fig { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.pf-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.pf-valrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.pf-val {
  font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -.025em;
  font-size: clamp(calc(34px * var(--fs-scale)), calc(4vw * var(--fs-scale)), calc(52px * var(--fs-scale)));
  font-variant-numeric: tabular-nums; color: var(--text);
}
.pf-val.pos { color: var(--pos); }
.pf-val.neg { color: var(--neg); }
.pf-delta {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 8px;
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--panel-3); color: var(--muted);
}
.pf-delta.pos { background: var(--pos-bg); color: var(--pos); }
.pf-delta.neg { background: var(--neg-bg); color: var(--neg); }
.pf-sub { font-size: var(--fs-xs); color: var(--dim); }

.pf-chart { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-tabs { align-self: flex-end; display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--panel-3); }
.pf-tabs button {
  height: 26px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
}
.pf-tabs button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.pf-plot { position: relative; }
.pf-chart[data-range="today"] .pf-plot-all, .pf-chart[data-range="all"] .pf-plot-today { display: none; }
.pf-svg { display: block; width: 100%; height: 132px; overflow: visible; color: var(--pos); }
.pf-svg.neg { color: var(--neg); }
.pf-svg .zero { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; }
.pf-svg .ln { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.pf-dot {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--pos); border: 2px solid var(--panel);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pos) 22%, transparent);
}
.pf-dot.neg { background: var(--neg); box-shadow: 0 0 0 5px color-mix(in srgb, var(--neg) 22%, transparent); }
.pf-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--dim); }
.pf-wait {
  height: 132px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line-2); border-radius: 14px; color: var(--dim); font-size: var(--fs-sm);
}

.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 14px; }
.pf-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 16px; }
.pf-stat:first-child { padding-left: 0; }
.pf-stat + .pf-stat { border-left: 1px solid var(--line); }
.pf-stat span { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.pf-stat b {
  font-family: var(--display); font-size: calc(20px * var(--fs-scale)); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-stat small { font-size: var(--fs-xs); color: var(--dim); }
.pf-meter { height: 5px; margin: 4px 0 2px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.pf-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

@media (max-width: 900px) {
  .pf-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
  .pf-hero { padding: 16px 14px 14px; gap: 14px; border-radius: 18px; }
  .pf-svg, .pf-wait { height: 104px; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .pf-stat { padding: 0 12px; }
  .pf-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pf-funds { grid-column: 1 / -1; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .pf-stat.pf-funds { border-left: 0; }
  .pf-stat b { font-size: calc(18px * var(--fs-scale)); }
}