/* ==========================================================================
   MAVIS MULTIBOT2 — DASHBOARD DESIGN SYSTEM (2026 redesign)
   Two interface styles (Modern / Neo Brutalism) x two themes (light / dark)
   x accent tokens. Presentation only: no runtime behavior lives here.
   ========================================================================== */

/* ---------- 1. Tokens ----------------------------------------------------- */
:root{
  /* accent: emerald is the default; [data-accent] variants override below.
     --accent-fill is the surface color for filled accent controls and
     --on-accent the guaranteed-contrast text on them. */
  --accent:#10b981;
  --accent-strong:#047857;
  --accent-fill:#047857; --on-accent:#ffffff;
  --accent-soft:rgba(16,185,129,.12);
  --accent-softer:rgba(16,185,129,.07);

  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f1f3f6;
  --surface-3:#e4e8ef;
  --text:#0f172a;
  --text-soft:#334155;
  --muted:#5b6b80;
  --line:rgba(15,23,42,.12);
  --line-strong:rgba(15,23,42,.26);
  --positive:#037353;
  --positive-soft:rgba(5,150,105,.12);
  --negative:#b91c1c;
  --negative-soft:rgba(220,38,38,.11);
  --warning:#92400e;
  --warning-soft:rgba(180,83,9,.12);
  --shadow:0 18px 44px rgba(15,23,42,.09);
  --shadow-soft:0 4px 16px rgba(15,23,42,.06);
  --radius:14px;
  --radius-sm:11px;
  --radius-xs:9px;
  --border-w:1px;
  --control-height:36px;

  --nav-w:188px;
  --space-1:5px; --space-2:8px; --space-3:11px; --space-4:14px; --space-5:18px;
  --section-gap:10px;
  --grid-gap:7px;
  --card-pad:14px;
  --font:"Inter","SF Pro Text","Segoe UI Variable",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-tnum:"SF Mono",ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  color-scheme:light;
}
html[data-accent="indigo"]{--accent:#6366f1;--accent-strong:#4f46e5;--accent-fill:#4f46e5;--accent-soft:rgba(99,102,241,.12);--accent-softer:rgba(99,102,241,.07)}
html[data-accent="amber"]{--accent:#f59e0b;--accent-strong:#b45309;--accent-fill:#b45309;--accent-soft:rgba(245,158,11,.15);--accent-softer:rgba(245,158,11,.08)}
html[data-accent="rose"]{--accent:#f43f5e;--accent-strong:#d61b44;--accent-fill:#e11d48;--accent-soft:rgba(244,63,94,.12);--accent-softer:rgba(244,63,94,.06)}
html[data-accent="cyan"]{--accent:#06b6d4;--accent-strong:#0e7490;--accent-fill:#0e7490;--accent-soft:rgba(6,182,212,.13);--accent-softer:rgba(6,182,212,.07)}

/* ---------- Dark theme (works with every style + accent) ------------------ */
html[data-theme="dark"]{
  --bg:#0b0d10;
  --surface:#12151b;
  --surface-2:#1a1f27;
  --surface-3:#252c36;
  --text:#f1f5f9;
  --text-soft:#cbd5e1;
  --muted:#8b96a5;
  --line:rgba(241,245,249,.11);
  --line-strong:rgba(241,245,249,.24);
  --accent:#34d399;
  --accent-strong:#6ee7b7;
  --accent-fill:#34d399;
  --on-accent:#08110d;
  --accent-soft:rgba(52,211,153,.15);
  --accent-softer:rgba(52,211,153,.08);
  --positive:#34d399;
  --positive-soft:rgba(52,211,153,.13);
  --negative:#f87171;
  --negative-soft:rgba(248,113,113,.13);
  --warning:#fbbf24;
  --warning-soft:rgba(251,191,36,.13);
  --shadow:0 20px 50px rgba(0,0,0,.4);
  --shadow-soft:0 6px 20px rgba(0,0,0,.26);
  color-scheme:dark;
}
html[data-theme="dark"][data-accent="indigo"]{--accent:#818cf8;--accent-strong:#a5b4fc;--accent-fill:#818cf8;--accent-soft:rgba(129,140,248,.16);--accent-softer:rgba(129,140,248,.08)}
html[data-theme="dark"][data-accent="amber"]{--accent:#fbbf24;--accent-strong:#fcd34d;--accent-fill:#fbbf24;--accent-soft:rgba(251,191,36,.14);--accent-softer:rgba(251,191,36,.07)}
html[data-theme="dark"][data-accent="rose"]{--accent:#fb7185;--accent-strong:#fda4af;--accent-fill:#fb7185;--accent-soft:rgba(251,113,133,.14);--accent-softer:rgba(251,113,133,.07)}
html[data-theme="dark"][data-accent="cyan"]{--accent:#22d3ee;--accent-strong:#67e8f9;--accent-fill:#22d3ee;--accent-soft:rgba(34,211,238,.14);--accent-softer:rgba(34,211,238,.07)}

/* ---------- Neo Brutalism: ink borders, real accent color ----------------- */
html[data-style="neo"]{
  --bg:#f3eee1;
  --surface:#fffcf4;
  --surface-2:#efe8d6;
  --surface-3:#e2d8bf;
  --text:#141414;
  --text-soft:#2c2c28;
  --muted:#5d574b;
  --line:rgba(20,20,20,.85);
  --line-strong:#141414;
  --accent:#ff5d1f;
  --accent-strong:#e04a0e;
  --accent-fill:#ff5d1f;
  --on-accent:#141414;
  --accent-soft:rgba(255,93,31,.14);
  --accent-softer:rgba(255,93,31,.08);
  --positive:#096c42;
  --negative:#b51b37;
  --warning:#7f5400;
  --radius:10px;
  --radius-sm:8px;
  --radius-xs:6px;
  --border-w:2px;
  --shadow:3px 3px 0 var(--line-strong);
  --shadow-soft:2px 2px 0 var(--line-strong);
  --section-gap:14px;
}
html[data-theme="dark"][data-style="neo"]{
  --bg:#0d0f0e;
  --surface:#161918;
  --surface-2:#1f2322;
  --surface-3:#292e2c;
  --text:#f2f2ea;
  --text-soft:#d4d6cc;
  --muted:#a6aca4;
  --line:rgba(242,242,234,.9);
  --line-strong:#f2f2ea;
  --accent:#ff6a2b;
  --accent-strong:#ff8b57;
  --accent-fill:#ff6a2b;
  --on-accent:#0d0f0e;
  --accent-soft:rgba(255,106,43,.18);
  --accent-softer:rgba(255,106,43,.09);
  --positive:#3ddc9c;
  --negative:#ff7078;
  --warning:#f5b95e;
  --shadow:3px 3px 0 #000;
  --shadow-soft:2px 2px 0 #000;
}
html[data-style="neo"][data-accent="emerald"]{--accent:#10b981;--accent-strong:#047656;--accent-fill:#10b981;--accent-soft:rgba(16,185,129,.16);--accent-softer:rgba(16,185,129,.09)}
html[data-style="neo"][data-accent="indigo"]{--accent:#6366f1;--accent-strong:#4f46e5;--accent-fill:#6366f1;--accent-soft:rgba(99,102,241,.16)}
html[data-style="neo"][data-accent="amber"]{--accent:#f59e0b;--accent-strong:#9c5604;--accent-fill:#f59e0b;--accent-soft:rgba(245,158,11,.18)}
html[data-style="neo"][data-accent="rose"]{--accent:#e11d48;--accent-strong:#be123c;--accent-fill:#e11d48;--accent-soft:rgba(225,29,72,.15)}
html[data-style="neo"][data-accent="cyan"]{--accent:#0891b2;--accent-strong:#0e718c;--accent-fill:#0891b2;--accent-soft:rgba(8,145,178,.16)}
/* Light-only: these two fills are too mid-luminance for the dark Neo on-accent.
   Scoped to [data-theme="light"] so the dark fills keep their dark on-accent. */
html[data-theme="light"][data-style="neo"][data-accent="indigo"]{--accent-fill:#6163ec;--on-accent:#ffffff}
html[data-theme="light"][data-style="neo"][data-accent="rose"]{--on-accent:#ffffff}
html[data-theme="dark"][data-style="neo"][data-accent="emerald"]{--accent:#34d399;--accent-strong:#6ee7b7;--accent-fill:#34d399;--accent-soft:rgba(52,211,153,.18);--accent-softer:rgba(52,211,153,.09)}
html[data-theme="dark"][data-style="neo"][data-accent="indigo"]{--accent:#818cf8;--accent-strong:#a5b4fc;--accent-fill:#818cf8}
html[data-theme="dark"][data-style="neo"][data-accent="amber"]{--accent:#fbbf24;--accent-strong:#fcd34d;--accent-fill:#fbbf24}
html[data-theme="dark"][data-style="neo"][data-accent="rose"]{--accent:#fb7185;--accent-strong:#fda4af;--accent-fill:#fb7185}
html[data-theme="dark"][data-style="neo"][data-accent="cyan"]{--accent:#22d3ee;--accent-strong:#67e8f9;--accent-fill:#22d3ee}

/* ---------- 1.5 Accessibility utilities ---------------------------------- */
/* Visually hidden but still announced. Used for the single polite live region
   that summarises every 30s dashboard poll, so assistive tech hears one calm
   sentence instead of eleven silently-changing numbers. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* Keyboard-only escape hatch to the main region. Hidden until focused, then
   pinned to the viewport so it is reachable on the first Tab press. */
.skip-link{position:absolute!important;left:12px!important;top:-100px!important;z-index:200!important;padding:10px 16px!important;border:1px solid var(--line-strong)!important;border-radius:var(--radius-sm)!important;background:var(--surface)!important;color:var(--text)!important;font-size:12px!important;font-weight:800!important;text-decoration:none!important;transition:top .15s ease}
.skip-link:focus{top:12px!important;outline:2px solid var(--accent)!important;outline-offset:2px!important}

/* ---------- 2. Base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:12.5px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .25s ease,color .25s ease;
}
button,input,select{font:inherit;color:var(--text)}
button,a,select{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)}
::selection{background:var(--accent-soft)}
svg{vertical-align:middle}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:99px;border:2px solid var(--surface)}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}

/* ---------- 3. App shell / topbar ---------------------------------------- */
.app{width:min(1280px,100%);margin:auto;padding:12px 14px 28px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;padding:9px 14px;
  background:var(--surface);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;z-index:5;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;color:inherit;text-decoration:none}
.brand-mark{
  display:grid;place-items:center;flex:none;width:38px;height:38px;
  border-radius:11px;background:var(--accent-fill);color:var(--on-accent);
  font-size:17px;font-weight:950;letter-spacing:-.02em;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
}
.brand-copy{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.brand-copy strong{font-size:15px;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-copy small{margin-top:3px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.version-badge,.status-badge{
  display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 11px;
  border-radius:999px;background:var(--surface-2);border:1px solid var(--line);
  font-size:10px;font-weight:900;letter-spacing:.06em;white-space:nowrap;
}
.status-badge{color:var(--positive);background:var(--positive-soft);border-color:transparent}
.status-badge i{width:8px;height:8px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 4px color-mix(in srgb,var(--positive) 18%,transparent)}
.status-badge.offline{color:var(--negative);background:var(--negative-soft)}
.status-badge.offline i{background:var(--negative);box-shadow:0 0 0 4px color-mix(in srgb,var(--negative) 18%,transparent)}

.icon-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:40px;height:40px;min-width:40px;
  border:var(--border-w) solid var(--line);border-radius:11px;background:var(--surface-2);
  font-size:14px;line-height:1;padding:0;color:var(--text);
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.icon-button:hover{transform:translateY(-1px);background:var(--accent-soft);border-color:var(--accent)}
.icon-button:active{transform:translateY(0)}
.icon-button .icon-sun{display:none}
html[data-theme="dark"] .icon-button .icon-sun{display:inline}
html[data-theme="dark"] .icon-button .icon-moon{display:none}
.theme-toggle{width:40px}

.connection-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:10px 0;padding:12px 15px;
  border:var(--border-w) solid var(--negative);border-radius:var(--radius-sm);
  background:var(--negative-soft);color:var(--negative);font-size:12px;font-weight:600;
}
.connection-banner button{flex:none}
.connection-banner[hidden]{display:none}

/* ---------- 4. Navigation: fixed sidebar (desktop), bottom bar (mobile) --- */
.desktop-nav{
  position:fixed;left:18px;top:96px;width:var(--nav-w);z-index:6;
  display:grid;grid-template-rows:repeat(5,auto);gap:4px;
  padding:8px;
  background:var(--surface);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.nav-button{
  display:flex;align-items:center;gap:11px;min-width:0;min-height:40px;
  border:var(--border-w) solid transparent;border-radius:var(--radius-sm);
  background:transparent;padding:0 12px;color:var(--muted);
  font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap;text-align:left;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.nav-button:hover{color:var(--text);background:var(--surface-2)}
.nav-button.active{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);font-weight:900}
.nav-button .nav-icon{width:16px;text-align:center;font-size:14px;flex:none}
.mobile-nav{display:none}

/* ---------- 5. Pages ------------------------------------------------------ */
main{padding:var(--space-5) 0 var(--space-5) calc(var(--nav-w) + 26px);max-width:1500px}
.page{display:none}
.page.active{display:block;animation:pageIn .25s ease}
.page>*+*{margin-top:var(--section-gap)}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0}
.eyebrow{display:block;color:var(--accent-strong);font-size:10px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;margin-bottom:7px}
.page-heading h1{margin:0;font-size:clamp(18px,2.2vw,21px);line-height:1;letter-spacing:-.03em;font-weight:850}
.page-heading p{display:none}
.clock{display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
.clock strong{color:var(--text);font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ---------- 6. Hero ------------------------------------------------------- */
.hero{
  position:relative;display:flex;justify-content:space-between;align-items:center;gap:22px;
  padding:10px 14px;margin:0;
  border:var(--border-w) solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden;
}
.hero-copy{position:relative;z-index:1;min-width:0}
.hero-kicker{color:var(--accent-strong);font-size:10px;font-weight:950;letter-spacing:.18em}
.hero h2{margin:4px 0 0;font-size:16px;letter-spacing:-.02em;line-height:1.15;font-weight:850}
.hero p{display:none}
.hero-pills{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;flex-wrap:wrap;gap:8px;max-width:340px}
.hero-pills span,.tool-tag,.legend-chip{
  display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;
  border:var(--border-w) solid var(--line);border-radius:999px;background:var(--surface-2);
  font-size:10px;font-weight:900;letter-spacing:.07em;white-space:nowrap;
}
.hero-pills span{background:var(--surface);box-shadow:var(--shadow-soft)}

/* ---------- 7. Metrics ---------------------------------------------------- */
.metric-grid{display:grid;gap:var(--grid-gap)}
.metric-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-width:0;padding:7px 10px;
  border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);box-shadow:var(--shadow-soft);overflow:hidden;
}
.metric-card span{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.metric-card strong{margin:0;font-size:14px;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.metric-card,.detail-grid b,.live-trade-row b,.trade-row-price b,.calendar-time strong,.clock strong,.drawer-price-grid b{font-variant-numeric:tabular-nums}
/* The metric card is a two-column grid (label | value). This `max-width:55%`
   was a flex-era cap and no longer constrains anything: Home overrides it with
   `max-width:100%` (and `none` below 560px) and Calendar pins its own value,
   so it only ever risked squeezing a label for no reason. */
.metric-card span{flex:none;line-height:1.25}
.metric-card small{display:none}

/* ---------- 8. Sections / charts ------------------------------------------ */
.section-block{
  margin:0;padding:var(--card-pad);min-width:0;
  border:var(--border-w) solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-soft);overflow:hidden;
}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.section-heading h2{margin:0;font-size:13.5px;letter-spacing:-.02em;font-weight:850}
.section-note{margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.chart-card,.box,.news-item,.signal-card,.trade-card,.backtest-chart,.backtest-chart-panel,.backtest-results,.tool-card{
  border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);box-shadow:var(--shadow-soft);overflow:hidden;min-width:0;
}
.chart-card{padding:14px}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.chart-head strong,.chart-head small{display:block}
.chart-head strong{font-size:14px;font-weight:800}
.chart-head small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.4}
.chart-head>span{color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap}
.chart-area{width:100%;min-width:0;min-height:180px;overflow:hidden}
.chart-area svg,.backtest-chart-panel svg{display:block;width:100%;height:auto}
.chart-axis{stroke:var(--line-strong);stroke-width:1}
.chart-grid{stroke:var(--line);stroke-dasharray:4 5}
.chart-y,.chart-label{fill:var(--muted);font-size:10px}
.chart-bar,.backtest-bar{fill:var(--accent)}
.chart-bar:hover{fill:var(--accent-strong)}
.equity-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.equity-area{fill:var(--accent-soft);opacity:.75}
.equity-point{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.inline-status{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:900;white-space:nowrap;max-width:100%;overflow-wrap:anywhere}

/* ---------- 9. Buttons ----------------------------------------------------- */
.text-button{border:0;background:transparent;color:var(--accent-strong);font-size:11px;font-weight:900;letter-spacing:.02em;white-space:nowrap;min-height:44px;padding:10px 12px;border-radius:var(--radius-xs);transition:background .15s ease}
.text-button:hover{background:var(--accent-soft)}
.secondary-button,.primary-button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);
  padding:8px 14px;background:var(--surface);box-shadow:var(--shadow-soft);
  font-size:11px;font-weight:900;white-space:nowrap;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.secondary-button:hover{background:var(--surface-2);border-color:var(--line-strong);transform:translateY(-1px)}
.primary-button{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.primary-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.primary-button:active,.secondary-button:active{transform:translateY(0)}
.primary-button:disabled,.secondary-button:disabled{opacity:.55;cursor:wait;transform:none}
.filter-button,.impact-filter,.trade-tab,.signal-tab,.history-tab,.history-filter,.signal-filter{
  min-height:34px;border:var(--border-w) solid var(--line);border-radius:999px;padding:6px 12px;
  background:var(--surface);font-size:10.5px;font-weight:900;color:var(--muted);
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.filter-button:hover,.impact-filter:hover,.trade-tab:hover,.history-tab:hover,.signal-tab:hover{color:var(--text);border-color:var(--line-strong);transform:translateY(-1px)}
.filter-button:active,.impact-filter:active,.trade-tab:active,.history-tab:active,.signal-tab:active{transform:translateY(0) scale(.97)}
.filter-button.active,.impact-filter.active,.trade-tab.active,.signal-tab.active,.history-tab.active{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}

/* ---------- 9b. Unified chevron: one glyph for every collapsible ----------- */
/* Chevron glyph geometry is owned by foundation.css .collapse-control. */

/* ---------- 10. Cards: signals & trades ------------------------------------ */
.signal-card,.trade-card{border-left:4px solid var(--line-strong)}
.signal-card.buy,.trade-card.buy{border-left-color:var(--positive)}
.signal-card.sell,.trade-card.sell{border-left-color:var(--negative)}
.signal-card.incomplete{border-left-color:var(--warning)}
.signal-card.incomplete .signal-side{color:var(--warning)}
.card-main{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;min-height:44px;cursor:pointer;border-radius:inherit;transition:background .15s ease,transform .15s ease}
.card-main:hover{background:var(--surface-2)}.card-main:hover .expand-button{border-color:var(--accent);color:var(--accent-strong)}
.card-main:active{transform:scale(.995)}
.signal-leading{display:flex;align-items:center;gap:12px;min-width:0}
.direction-icon{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:var(--radius-xs);background:var(--surface-2);font-size:10px}
.signal-leading div{min-width:0}
.signal-leading strong{display:block;font-size:12px;font-weight:800;overflow-wrap:anywhere}
.signal-leading small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;color:var(--muted);font-size:10px;line-height:1.3;overflow-wrap:anywhere}
.card-state{display:flex;align-items:center;gap:7px;flex:none;min-width:0}
.freshness,.trade-status,.impact-pill,.signal-side{
  display:inline-flex;align-items:center;justify-content:center;min-height:20px;padding:2px 7px;
  border-radius:999px;font-size:9.5px;font-weight:900;letter-spacing:.04em;white-space:nowrap;
}
.fresh{color:var(--positive);background:var(--positive-soft)}
.stale{color:var(--warning);background:var(--warning-soft)}
.trade-status.open,.signal-side.buy{color:var(--positive);background:var(--positive-soft)}
.signal-side.sell{color:var(--negative);background:var(--negative-soft)}
.trade-status.closed{color:var(--muted);background:var(--surface-2)}
.expand-content{padding:2px 10px 10px;border-top:1px solid var(--line);animation:expandIn .2s ease}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:9px}
.detail-grid>div{min-width:0;padding:8px 9px;background:var(--surface-2);border-radius:var(--radius-xs)}
.detail-grid span,.reason>span,.drawer-price-grid span,.drawer-details span,.calendar-details span,.backtest-summary span,.backtest-metrics span,.trade-row-price span{
  display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;
}
.detail-grid b{display:block;margin-top:4px;font-size:12px;overflow-wrap:anywhere}
.positive{color:var(--positive)}
.negative{color:var(--negative)}
.reason{margin-top:9px;padding:11px 12px;background:var(--surface-2);border-radius:var(--radius-xs)}
.reason p{margin:5px 0 0;font-size:12px;line-height:1.55;color:var(--text-soft)}

/* ---------- 11. Workspaces (signals / history / calendar) ------------------ */
.signals-workspace,.history-workspace,.calendar-workspace,.trades-workspace{
  margin:0;min-width:0;overflow:hidden;
  border:var(--border-w) solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-soft);
}
.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:8px var(--card-pad);border-bottom:1px solid var(--line);background:var(--surface)}
.workspace-heading .eyebrow{margin:0}
.workspace-count{font-size:11px;font-weight:900;color:var(--muted);white-space:nowrap}
.signals-date-list,.history-date-list,.calendar-date-list{padding:6px 12px 12px;min-width:0;overflow:hidden}
.signal-date-group,.history-date-group,.calendar-date-group{min-width:0;border-bottom:1px solid var(--line);position:relative;isolation:isolate}
.signal-date-group:last-child,.history-date-group:last-child,.calendar-date-group:last-child{border-bottom:0}
.signal-date-toggle,.history-date-toggle,.calendar-date-toggle,.trade-date-toggle{
  position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-align:left;border:0;background:transparent;border-bottom:1px solid var(--line);
  padding:8px 8px;min-height:40px;margin-bottom:-1px;border-radius:0;cursor:pointer;
  transition:background .15s ease;
}
.signal-date-toggle:hover,.history-date-toggle:hover,.calendar-date-toggle:hover,.trade-date-toggle:hover{background:var(--surface-2)}
.signal-date-toggle span,.history-date-toggle span,.calendar-date-toggle span,.trade-date-toggle span{display:flex;flex-direction:column;gap:3px;min-width:0}
.signal-date-toggle b,.history-date-toggle b,.calendar-date-toggle b,.trade-date-toggle b{font-size:12px;font-weight:850;line-height:1.2}
.signal-date-toggle small,.history-date-toggle small,.calendar-date-toggle small,.trade-date-toggle small{font-size:10px;color:var(--muted);font-weight:700}
.signal-date-toggle i,.history-date-toggle i,.calendar-date-toggle i,.trade-date-toggle i{display:grid;place-items:center;width:30px;height:30px;font-style:normal;font-size:12px;line-height:1;color:var(--muted);background:var(--surface-2);border:var(--border-w) solid var(--line);border-radius:8px;flex:none;transition:transform .2s ease,background .15s ease,color .15s ease}
.signal-date-group.is-open .signal-date-toggle .collapse-control,.history-date-group.is-open .history-date-toggle .collapse-control,.calendar-date-group.is-open .calendar-date-toggle .collapse-control,.trade-date-group.is-open .trade-date-toggle .collapse-control{color:var(--accent-strong);border-color:var(--accent);background:var(--accent-soft)}
.signal-date-toggle,.history-date-toggle,.calendar-date-toggle,.trade-date-toggle{padding:8px 8px}
.signal-date-group.is-open>.signal-date-toggle,.history-date-group.is-open>.history-date-toggle,.calendar-date-group.is-open>.calendar-date-toggle,.trade-date-group.is-open>.trade-date-toggle{background:var(--accent-softer)}
.signal-date-rows,.history-date-rows,.calendar-date-events,.trade-date-rows{position:relative;z-index:1;display:grid;gap:6px;padding:6px 5px 8px}
.signal-date-rows .signal-card{border:var(--border-w) solid var(--line);border-left-width:4px;border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-soft)}
.signal-date-rows .card-main{min-height:44px;padding:6px 10px;border-radius:inherit}
.signal-date-rows .card-main:hover{background:var(--surface-2)}
.history-date-rows .trade-row{border:var(--border-w) solid var(--line);border-left-width:4px;border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-soft)}
.history-date-rows .trade-row-main{padding:7px 10px}

/* trade rows + scan rows */
.trade-row{border:var(--border-w) solid var(--line);border-left:4px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden;min-width:0}
.trade-row.buy{border-left-color:var(--positive)}
.trade-row.sell{border-left-color:var(--negative)}
.trade-row-main{display:grid;grid-template-columns:minmax(140px,1fr) minmax(84px,.5fr) minmax(84px,.5fr) auto auto;align-items:center;gap:10px;padding:7px 11px}
.trade-row-identity{display:flex;align-items:center;gap:11px;min-width:0}
.trade-row-identity strong,.trade-row-identity small{display:block}
.trade-row-identity strong{font-size:12.5px;font-weight:800}
.trade-row-identity small{margin-top:2px;font-size:10.5px;color:var(--muted);overflow-wrap:anywhere}
.trade-row-price{display:flex;flex-direction:column;gap:3px;min-width:0}
.trade-row-price b{font-size:12px;font-variant-numeric:tabular-nums}
.trade-detail-button{border:var(--border-w) solid var(--line);background:var(--surface-2);border-radius:8px;padding:5px 12px;min-height:32px;font-size:11px;font-weight:900;transition:background .15s ease,color .15s ease,transform .15s ease}
.trade-detail-button:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.trade-detail-button:active{transform:translateY(0) scale(.97)}
.history-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.history-live-list{display:grid;gap:0;min-width:0}
.live-trade-row,.scan-history-row{display:grid;grid-template-columns:minmax(0,1.6fr) auto auto auto auto;align-items:center;gap:10px;padding:7px 10px;border:var(--border-w) solid var(--line);border-left:3px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);min-width:0}
.live-trade-row{border-left-color:var(--positive)}
.live-trade-row div,.scan-history-row div{min-width:0}
.live-trade-row strong,.live-trade-row small,.scan-history-row strong,.scan-history-row small{display:block;overflow-wrap:anywhere}
.live-trade-row strong,.scan-history-row strong{font-size:12px;font-weight:800}
.live-trade-row small,.scan-history-row small{margin-top:2px;color:var(--muted);font-size:10.5px;line-height:1.35}
.live-trade-row span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:900;letter-spacing:.07em}
.live-trade-row b{display:block;margin-top:4px;font-size:12px;font-variant-numeric:tabular-nums}
.live-trade-row b.positive{color:var(--positive)}
.live-trade-row b.negative{color:var(--negative)}
.live-open-badge{padding:6px 10px;border:1px solid var(--positive);color:var(--positive);border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap}
.scan-history-row>span{padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:900;color:var(--muted);background:var(--surface-2);white-space:nowrap}

/* calendar */
.calendar-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap)}
.calendar-summary-grid .metric-card{box-shadow:none;background:var(--surface-2);border:var(--border-w) solid var(--line)}
.impact-summary.high strong{color:var(--negative)}
.impact-summary.medium strong{color:var(--warning)}
.calendar-agenda-status,.calendar-agenda-bar{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.calendar-agenda-status .calendar-status{flex:1;min-width:0}
.calendar-agenda-bar{justify-content:space-between;padding:11px 16px}
.calendar-status .inline-status{display:flex;align-items:center;gap:7px;min-width:0;white-space:normal}
.calendar-status b{font-size:11px}
.calendar-status small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.news-dot{width:8px;height:8px;border-radius:50%;flex:none}
.news-dot.online{background:var(--positive)}
.news-dot.offline{background:var(--negative)}
.news-dot.impact-high{background:var(--negative);box-shadow:0 0 0 3px var(--negative-soft)}
.news-dot.impact-medium{background:var(--warning);box-shadow:0 0 0 3px var(--warning-soft)}
.news-dot.impact-low{background:var(--positive);opacity:.9}
.news-dot.impact-holiday{background:var(--accent)}
.source-link,.news-link{display:inline-flex;align-items:center;min-height:36px;color:var(--accent-strong);font-size:11px;font-weight:900;text-decoration:none;white-space:nowrap;padding:6px 8px;border-radius:var(--radius-xs)}
.source-link:hover,.news-link:hover{background:var(--accent-soft)}
.calendar-source{margin-left:auto}
.calendar-item{display:block;padding:8px 9px;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:none;position:relative;min-width:0}
.calendar-item:hover{border-color:var(--line-strong)}
.calendar-item.impact-high{border-left:3px solid var(--negative)}
.calendar-item.impact-medium{border-left:3px solid var(--warning)}
.calendar-item.impact-low{border-left:3px solid var(--positive)}
.calendar-item.impact-holiday{border-left:3px solid var(--accent)}
.calendar-event{min-width:0}
.calendar-meta{display:flex;align-items:center;gap:7px;min-height:32px;margin:0;flex-wrap:nowrap}
.calendar-time-value{flex:0 0 48px;font-size:11.5px!important;font-variant-numeric:tabular-nums;line-height:1}
.currency-code{color:var(--text);background:var(--surface-2);padding:4px 7px;border-radius:6px;font-size:10px;font-weight:900}
.impact-pill.high{color:var(--negative);background:var(--negative-soft)}
.impact-pill.medium{color:var(--warning);background:var(--warning-soft)}
.impact-pill.low{color:var(--muted);background:var(--surface-2)}
.impact-pill.holiday{color:var(--accent-strong);background:var(--accent-soft)}.calendar-meta .expand-button{margin-left:auto;}
.calendar-title{display:block!important;margin:2px 40px 0 55px;font-size:11.5px;line-height:1.3;font-weight:800;overflow-wrap:anywhere}
.calendar-details{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 0 55px;padding-top:6px;border-top:1px solid var(--line)}
.calendar-details>span{font-size:10px;color:var(--muted);white-space:nowrap}
.calendar-details b{font-size:11px;color:var(--text);font-weight:800}


/* ---------- 12. Tools ------------------------------------------------------ */
.tools-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--section-gap);align-items:start}
.tools-layout .tool-card{margin:0;padding:var(--card-pad)}
.tools-appearance,.tool-backtest{grid-column:1/-1}
/* Superseded: the summary cards used `min-height:100%` to fill their grid row,
   which read as tidy while each was one line. The Assets and Accounts cards now
   carry their own editor, so stretching a card to whatever the card beside it
   measured left ~229px of empty surface inside the border -- the same dead
   space this page was already reported for. `align-items:start` on
   `.tools-layout` keeps the tops aligned, which is what actually reads as
   alignment. A card must never be taller than the content inside it. */
.tool-tag{flex:none}
.settings-group{display:grid;gap:8px;margin-top:14px}
.settings-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.settings-row .settings-label{flex:none;min-width:96px}
.settings-inline{display:flex;gap:6px;flex-wrap:wrap}
.chip-option{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 11px;border:var(--border-w) solid var(--line);border-radius:999px;background:var(--surface-2);font-size:10.5px;font-weight:800;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.chip-option:hover{border-color:var(--accent);color:var(--accent-strong);transform:translateY(-1px)}
.chip-option.active{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.chip-option .appearance-swatch{margin-right:0}
.settings-inline .chip-option.active .appearance-swatch{border-color:var(--on-accent)}
.settings-label{font-size:10px;font-weight:900;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
/* Numeric and text fields in the Tools settings editor. Scoped to #page-tools so
   they cannot restyle the backtest controls or the search box. */
#page-tools .settings-input{min-width:0;min-height:var(--control-height);padding:6px 9px;border:var(--border-w) solid var(--line);border-radius:var(--radius-xs);background:var(--surface-2);color:var(--text);font-size:11.5px;font-variant-numeric:tabular-nums}
/* Superseded: a fixed 104px made three number boxes refuse to share a 336px
   phone row, so the last field wrapped under the first two. The fields now
   take their width from the grid that holds them. */
#page-tools .settings-input:disabled{opacity:.62;cursor:not-allowed}
#page-tools .settings-hint{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;text-align:right}
.appearance-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.appearance-option{
  min-width:0;min-height:64px;padding:13px 15px;text-align:left;
  border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.appearance-option:hover{transform:translateY(-1px);border-color:var(--accent)}
.appearance-option b{display:block;font-size:14px;font-weight:850}
.appearance-option small{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.4}
.appearance-option.active{border:2px solid var(--accent);padding:12px 14px;background:var(--accent-soft)}
.appearance-swatch{display:inline-block;width:14px;height:14px;border-radius:5px;border:2px solid var(--line-strong);margin-right:8px;vertical-align:-2px}
/* `.settings-toggle` is a variant hook for `.chip-option` (the Compact /
   Reduce-motion chips and the settings editor's Remove / move buttons). It used
   to carry a second, contradictory definition here — a 56px settings *switch
   row* with a `span`/`b`/`small`/`i` knob — that no markup has ever used.
   Eleven properties fought between the two definitions and the chip only won
   because the later sheet happened to load last. The switch row is gone. */

.backtest-controls{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1fr) auto;gap:8px;align-items:end}
.backtest-controls label{display:grid;gap:6px;min-width:0;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.backtest-controls select{width:100%;min-width:0;min-height:var(--control-height);padding:7px 9px;border:var(--border-w) solid var(--line);border-radius:var(--radius-xs);background:var(--surface-2);font-size:11.5px;text-overflow:ellipsis;transition:border-color .15s ease}
.backtest-controls select:hover{border-color:var(--accent)}
.backtest-status{margin-top:12px;padding:11px 13px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--muted);font-size:11.5px;line-height:1.5;overflow-wrap:anywhere}
.backtest-status.loading{color:var(--warning)}
.backtest-status.success{color:var(--positive)}
.backtest-status.error{color:var(--negative);background:var(--negative-soft)}
.backtest-results{margin-top:12px;padding:14px;display:grid;gap:var(--section-gap);min-width:0;background:var(--surface)}
.backtest-section{min-width:0;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:15px;overflow:hidden}
.backtest-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.backtest-section-heading h3{margin:3px 0 0;font-size:16px;letter-spacing:-.02em;font-weight:850}
.backtest-section-heading>span{font-size:10px;font-weight:900;color:var(--muted);white-space:nowrap}
.backtest-rating{flex:none;padding:6px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font-size:10.5px;font-weight:900;max-width:100%;overflow-wrap:anywhere}
.backtest-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap)}
.backtest-summary>div{padding:12px;border:var(--border-w) solid var(--line);border-radius:var(--radius-xs);background:var(--surface-2);min-width:0}
.backtest-summary b{display:block;margin-top:5px;font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.backtest-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.backtest-metrics>div{min-width:0;padding:12px;border:var(--border-w) solid var(--line);border-radius:var(--radius-xs);background:var(--surface-2)}
.backtest-metrics b{display:block;min-width:0;margin-top:6px;font-size:clamp(17px,2.4vw,23px);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backtest-trades{display:grid;gap:0;border:var(--border-w) solid var(--line);border-radius:var(--radius-xs);overflow:hidden}
.backtest-trade-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px 13px;border-bottom:1px solid var(--line);border-left:3px solid var(--line-strong);min-width:0}
.backtest-trade-row:last-child{border-bottom:0}
.backtest-trade-row.buy{border-left-color:var(--positive)}
.backtest-trade-row.sell{border-left-color:var(--negative)}
.backtest-trade-side{font-size:10px;font-weight:950;letter-spacing:.06em}
.backtest-trade-side.buy{color:var(--positive)}
.backtest-trade-side.sell{color:var(--negative)}
.backtest-trade-row div{min-width:0}
.backtest-trade-row b,.backtest-trade-row small{display:block;overflow-wrap:anywhere}
.backtest-trade-row b{font-size:12px;font-weight:800}
.backtest-trade-row small{margin-top:4px;font-size:11px;color:var(--muted)}
.backtest-trade-row>strong{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Superseded: this declared three columns and `#page-tools .universe-grid`
   later sets `display:block!important`, so the declaration never took effect at
   any width and the categories always rendered as full-width rows. The Tools
   container is a stack of rows; it carries no `grid-template-columns`. */
.universe-grid{display:grid;gap:8px}
.universe-grid span{display:grid;place-items:center;padding:8px 6px;border:var(--border-w) solid var(--line);border-radius:var(--radius-xs);background:var(--surface-2);font-size:10.5px;font-weight:800;text-align:center;min-width:0;overflow-wrap:anywhere}
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.account-grid article{padding:13px;border:var(--border-w) solid var(--line);border-radius:var(--radius-xs);background:var(--surface-2);min-width:0}
.account-grid b,.account-grid span,.account-grid small{display:block}
.account-grid b{font-size:12px;font-weight:900}
.account-grid span{margin-top:5px;font-size:11.5px}
.account-grid small{margin-top:5px;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.rule-list{display:grid;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.rule-list>div{display:grid;gap:4px;padding:13px 15px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.rule-list>div:nth-child(odd){background:var(--surface)}
.rule-list>div:last-child{border-bottom:0}
.rule-list b{font-size:12px;font-weight:850}
.rule-list span{color:var(--muted);font-size:11.5px;line-height:1.5;overflow-wrap:anywhere}
/* Removed with the Runtime card and the release-modal schedule strip:
   `.diagnostic-grid` and `.schedule-inline` styled markup nothing renders. */
.whats-new{display:grid;gap:8px;margin:0;padding:0 0 0 18px}
.whats-new li{padding-left:4px;color:var(--text-soft);font-size:11.5px;line-height:1.5}


/* ---------- 12a. Backtest result density contract ------------------------ */
.backtest-results[hidden]{display:none!important}
.backtest-results{gap:9px;padding:10px}
.backtest-section{padding:12px}
.backtest-section-heading{margin-bottom:9px;padding-bottom:9px}
.backtest-section-heading h3{font-size:15px}
.backtest-summary{gap:7px}
.backtest-summary>div{padding:9px 10px}
.backtest-summary b{margin-top:3px;font-size:12px}
.backtest-metrics{gap:7px}
.backtest-metrics>div{padding:9px 10px}
.backtest-metrics b{margin-top:4px;font-size:clamp(15px,2.2vw,20px)}
.backtest-rating{padding:5px 9px;font-size:10px}
.backtest-trade-row{gap:9px;padding:10px 11px}
.backtest-trade-row b{font-size:11.5px}
.backtest-trade-row small{margin-top:3px;font-size:10.5px}
.backtest-trade-row>strong{font-size:11.5px}
.backtest-overview-section,.backtest-curve-section,.backtest-performance-section,.backtest-trades-section,.backtest-signals-section{box-shadow:none}
@media(max-width:760px){
  .backtest-controls{gap:7px}
  .backtest-controls label{gap:4px}
  .backtest-controls select{min-height:40px;padding:6px 9px}
  .tool-backtest .primary-button{min-height:42px}
  .backtest-status{margin-top:9px;padding:8px 10px;font-size:11px;line-height:1.35}
  .backtest-results{margin-top:9px;padding:8px;gap:8px}
  .backtest-section{padding:10px}
  .backtest-summary{gap:6px}
  .backtest-summary>div{padding:8px 9px}
  .backtest-metrics{gap:6px}
  .backtest-metrics>div{padding:8px 9px}
  .backtest-metrics b{font-size:17px}
  .backtest-section-heading{margin-bottom:8px;padding-bottom:8px}
}
@media(max-width:560px){
  .backtest-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .backtest-summary>div{padding:8px}
  .backtest-section{padding:9px}
  .backtest-section-heading h3{font-size:14.5px}
  .backtest-trade-row{grid-template-columns:38px minmax(0,1fr) auto;gap:7px;padding:9px 10px}
  .backtest-trade-side{font-size:9.5px}
  .backtest-trade-row>strong{font-size:11px}
}
/* ---------- 12a. Tools compact settings contract ------------------------- */
@media(max-width:760px){
  .tools-appearance .section-heading{margin-bottom:7px}
  .settings-row{gap:7px}
  .settings-row .settings-label{min-width:78px;font-size:9.5px}
  .settings-inline{gap:5px}
  .chip-option{min-height:29px;padding:4px 9px;font-size:10px}
  .account-grid article{padding:10px}
  .account-grid span{margin-top:3px}
  .account-grid small{margin-top:3px}
  .rule-list>div{padding:10px 12px;gap:3px}
  .rule-list span{line-height:1.4}
  .universe-grid{gap:6px}
  .universe-grid span{padding:7px 5px}
}
/* ---------- 12a. Tool section state contract ------------------------------ */
.tool-collapse>.section-heading{background:transparent}
.tool-collapse>.section-heading:hover{background:var(--surface-2)}
.tool-collapse.is-open>.section-heading{background:transparent}
.tool-collapse.is-open>.section-heading h2{color:var(--text)}
.tool-collapse.is-open>.section-heading .collapse-control{background:var(--accent-soft)}

/* ---------- 12b. Collapsible tool sections + release modal --------------- */
.tool-collapse>.section-heading{cursor:pointer;user-select:none;margin:0;min-height:40px}
.tool-collapse>.section-heading:hover h2{color:var(--accent-strong)}
.tool-collapse>.section-heading .collapse-control{display:grid;place-items:center;flex:none;font-style:normal;font-size:0;color:var(--muted);background:var(--surface-2);border:var(--border-w) solid var(--line);transition:background .15s ease,color .15s ease,border-color .15s ease}
.tool-collapse>.section-heading:hover .collapse-control{color:var(--accent-strong);border-color:var(--accent);background:var(--accent-soft)}
.tool-collapse.is-open>.section-heading .collapse-control{color:var(--accent-strong);border-color:var(--accent);background:var(--accent-soft)}
.tool-collapse>.tool-body{padding-top:8px}
.tool-collapse:not(.is-open)>.tool-body{display:none}
.release-modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:rgba(8,12,10,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.release-modal.open{opacity:1;pointer-events:auto}
.release-modal-card{width:min(560px,100%);max-height:min(76vh,640px);overflow:auto;padding:18px;background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.release-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.release-modal-head h2{margin:0;font-size:15px;letter-spacing:-.02em;font-weight:850}
body.release-open{overflow:hidden}
html[data-style="neo"] .release-modal-card{border:2px solid var(--line-strong)!important;border-radius:8px!important;box-shadow:6px 6px 0 var(--line-strong)!important}

/* ---------- 12c. Modern tactile parity (hover/press everywhere) ----------- */
.nav-button:active,.appearance-option:active,.settings-toggle:active,.chip-option:active{transform:scale(.98)}
.metric-card,.section-block,.tool-card,.chart-card,.signal-card,.trade-card,.calendar-item,.live-trade-row,.scan-history-row{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.tool-collapse>.section-heading:hover{background:var(--surface-2)}

/* ---------- 13. Drawer ------------------------------------------------------ */
.trade-drawer-shell{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end;background:rgba(8,12,10,.42);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.trade-drawer-shell.open{opacity:1;pointer-events:auto}
.trade-drawer{position:relative;width:min(440px,100%);height:100%;overflow:auto;padding:24px 22px;background:var(--surface);box-shadow:-20px 0 60px rgba(0,0,0,.25);transform:translateX(100%);transition:transform .25s ease}
.trade-drawer-shell.open .trade-drawer{transform:translateX(0)}
.drawer-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border:var(--border-w) solid var(--line);border-radius:10px;background:var(--surface-2);font-size:17px;line-height:1}
.drawer-close:hover{background:var(--negative-soft);color:var(--negative)}
.trade-drawer h2{margin:6px 0 12px;font-size:22px;letter-spacing:-.03em;font-weight:900;overflow-wrap:anywhere}
.drawer-status{display:flex;gap:8px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.drawer-price-grid,.drawer-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.drawer-price-grid>div,.drawer-details>div{padding:12px;border:var(--border-w) solid var(--line);border-radius:var(--radius-xs);background:var(--surface-2);min-width:0}
.drawer-price-grid b,.drawer-details b{display:block;margin-top:5px;font-size:12.5px;overflow-wrap:anywhere}
.trade-drawer section{margin-top:22px}
.trade-drawer h3{font-size:14px;margin:0 0 10px;font-weight:900;letter-spacing:.02em}
body.drawer-open{overflow:hidden}

/* ---------- 14. Empty states ------------------------------------------------ */
/* An empty state is a content tile like any other: a solid --border-w hairline
   on --surface. It used to be the only dashed border in the app (the usual
   "placeholder" convention), which hardcoded 2px instead of --border-w and left
   History showing a solid-bordered metric tile directly above a dashed one. */
.empty-state{display:grid;place-items:center;gap:5px;min-height:90px;padding:16px 14px;text-align:center;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.empty-state span{font-size:17px;color:var(--accent-strong)}
.empty-state strong{font-size:14px;font-weight:850}
.empty-state small{max-width:440px;color:var(--muted);font-size:11.5px;line-height:1.5}

/* ---------- 14b. Loading skeletons ----------------------------------------- */
/* Loading used to borrow the empty-state tile and fill it with bare text
   ("Loading signals…"), so a list had no shape before the first poll and a
   loading list was indistinguishable from an empty result. A skeleton mirrors
   the row geometry it stands in for. It carries no visible text: the shape is
   the message, and the one #dashboardAnnouncer live region already reports the
   arrival of real data, so a second narration would say it twice. */
.loading-state{display:grid;gap:var(--grid-gap);width:100%}
.skeleton{display:block;background:var(--surface-2);border-radius:var(--radius-sm);animation:skeletonPulse 1.4s ease-in-out infinite}
.skeleton-row{height:64px}
.skeleton-chart{height:180px}
.skeleton-title{height:13px;width:min(220px,60%)}
.skeleton-line{height:11px}
@keyframes skeletonPulse{50%{opacity:.5}}
@media (prefers-reduced-motion: reduce){.skeleton{animation:none}}/* ---------- 15. Neo Brutalism interactive surface ---------------------------- */
html[data-style="neo"] .primary-button,
html[data-style="neo"] .secondary-button,
html[data-style="neo"] .icon-button,
html[data-style="neo"] .text-button,
html[data-style="neo"] .nav-button,
html[data-style="neo"] .filter-button,
html[data-style="neo"] .impact-filter,
html[data-style="neo"] .settings-toggle,
html[data-style="neo"] .trade-detail-button,
html[data-style="neo"] .appearance-option,
html[data-style="neo"] select,
html[data-style="neo"] input{
  border:2px solid var(--line-strong)!important;
}
html[data-style="neo"] .primary-button{background:var(--accent-fill);color:var(--on-accent);border-color:var(--line-strong)!important}
html[data-style="neo"] .nav-button.active,
html[data-style="neo"] .filter-button.active,
html[data-style="neo"] .impact-filter.active,
html[data-style="neo"] .trade-tab.active,
html[data-style="neo"] .signal-tab.active,
html[data-style="neo"] .history-tab.active{background:var(--accent-fill);color:var(--on-accent);border:2px solid var(--line-strong)!important}
html[data-style="neo"] .appearance-option.active,
html[data-style="neo"] .settings-toggle.active{background:var(--accent-soft)!important;outline:2px solid var(--accent);outline-offset:-5px}
html[data-style="neo"] .text-button{padding:8px 12px;background:var(--surface);min-height:44px}
html[data-style="neo"] .brand-mark{border:2px solid var(--line-strong);box-shadow:2px 2px 0 var(--line-strong);color:var(--on-accent)}
html[data-style="neo"] .hero,
html[data-style="neo"] .topbar,
html[data-style="neo"] .desktop-nav,
html[data-style="neo"] .metric-card,
html[data-style="neo"] .chart-card,
html[data-style="neo"] .section-block,
html[data-style="neo"] .tool-card,
html[data-style="neo"] .signals-workspace,
html[data-style="neo"] .history-workspace,
html[data-style="neo"] .calendar-workspace,
html[data-style="neo"] .appearance-option,
html[data-style="neo"] .backtest-results,
html[data-style="neo"] .backtest-section,
html[data-style="neo"] .box,
html[data-style="neo"] .signal-card,
html[data-style="neo"] .trade-card,
html[data-style="neo"] .news-item,
html[data-style="neo"] .news-health,
html[data-style="neo"] .live-trade-row,
html[data-style="neo"] .scan-history-row,
html[data-style="neo"] .calendar-item{
  border:2px solid var(--line-strong)!important;border-radius:8px!important;box-shadow:3px 3px 0 var(--line-strong);
}
html[data-style="neo"] .metric-card strong,
html[data-style="neo"] .tool-card h2,
html[data-style="neo"] .section-block h2,
html[data-style="neo"] .page-heading h1,
html[data-style="neo"] .hero h2{font-weight:950;letter-spacing:-.02em}
html[data-style="neo"] button{cursor:pointer}

/* ---------- 16. Motion / compact attributes --------------------------------- */
html[data-reduce-motion="true"] *,html[data-reduce-motion="true"] *::before,html[data-reduce-motion="true"] *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  scroll-behavior:auto!important;transition-duration:.01ms!important;
}
/* `.tool-card` is deliberately absent here: on the Tools page its padding is 0
   (the card is a shell and `.tool-body` carries the padding), so a compact
   padding on the card itself could only ever make the page taller. */
html[data-compact="true"] .section-block{padding:10px!important}
html[data-compact="true"] .metric-card{padding:6px 9px!important}
html[data-compact="true"] .chart-card{padding:10px!important}
html[data-compact="true"] .hero{padding:10px 12px!important}
html[data-compact="true"] .section-heading{margin-bottom:6px!important}
html[data-compact="true"] .workspace-heading{min-height:34px!important;padding:5px 10px!important}
html[data-compact="true"] .card-main{min-height:34px!important;padding:5px 9px!important}
html[data-compact="true"] .signal-date-toggle,html[data-compact="true"] .history-date-toggle,html[data-compact="true"] .calendar-date-toggle,html[data-compact="true"] .trade-date-toggle{padding:6px 7px!important;min-height:34px!important}
html[data-compact="true"] .signal-date-rows,html[data-compact="true"] .history-date-rows,html[data-compact="true"] .calendar-date-events,html[data-compact="true"] .trade-date-rows{gap:6px!important;padding:6px 4px 8px!important}
html[data-compact="true"] .backtest-section{padding:10px!important}
/* An empty state's natural height is 76px; the old compact floor of 90px made
   every empty state 14px *taller* than normal, which grew the History page on
   every toggle press. Compact now shrinks it. */
html[data-compact="true"] .empty-state{min-height:56px!important;padding:12px!important}
html[data-compact="true"] .tool-body{padding-top:6px!important}
/* Every `html[data-compact="true"] X` selector above loses to the `#page-tools …`
   rules in the later layers, because an id (and the extra class counts those
   selectors carry) outrank an attribute plus a class. That left the whole Tools
   page immune to Compact. These restate the Tools targets at the specificity
   that actually owns them, so the toggle really compacts. */
html[data-compact="true"] #page-tools .tool-collapse.is-open > .tool-body{padding:5px 10px!important}
html[data-compact="true"] #page-tools .section-heading{padding:6px 12px!important}
html[data-compact="true"] #page-tools .backtest-section{padding:6px 12px!important}
html[data-compact="true"]{--section-gap:8px;--grid-gap:6px;--card-pad:10px}
html[data-style="neo"][data-compact="true"]{--section-gap:10px;--grid-gap:7px}
/* The same id re-assertion for the other four pages. Measured before this
   block existed: `.section-block`, `.section-heading` and `.chart-card`
   (Overview), the date toggles and `.workspace-heading`
   (Signals/History/Calendar) and `.calendar-date-events` reported
   byte-identical geometry with Compact on and off, because their id-scoped
   rules also carry !important in the later layers. Every value here is <=
   its normal-mode value on every axis, so Compact can only shrink. */
html[data-compact="true"] #page-overview .section-block{padding:10px!important}
html[data-compact="true"] #page-overview .section-heading{margin-bottom:6px!important}
html[data-compact="true"] #page-overview .chart-card,
html[data-compact="true"] #page-overview .section-block .chart-card{padding:10px!important}
html[data-compact="true"] #page-signals .workspace-heading,
html[data-compact="true"] #page-history .workspace-heading{min-height:34px!important;padding:5px 10px!important}
html[data-compact="true"] #page-signals .signal-date-toggle,
html[data-compact="true"] #page-history .history-date-toggle,
html[data-compact="true"] #page-calendar .calendar-date-toggle{padding:6px 7px!important;min-height:34px!important;height:auto!important}
html[data-compact="true"] #page-signals .signal-date-rows,
html[data-compact="true"] #page-history .history-date-rows{gap:6px!important;padding:6px 4px 8px!important}
html[data-compact="true"] #page-calendar .calendar-date-events{gap:6px!important;padding:6px 0 0!important}
html[data-compact="true"] #page-history .metric-card,
html[data-compact="true"] #page-calendar .metric-card{padding:6px 9px!important}
/* Two deeper id nests: the Overview activity empty state and the Signals row
   cards. Both id rules carry !important (and the Signals one pins a fixed
   56px height inside a narrow-viewport media query), so the compact values
   have to repeat enough of the nest to outrank them at every viewport. */
html[data-compact="true"] #page-overview .overview-activity .empty-state{padding:12px!important}
html[data-compact="true"] #page-signals .signal-date-rows .card-main{min-height:34px!important;height:auto!important;padding:5px 9px!important}
@keyframes pulse{50%{opacity:.55;transform:scale(.88)}}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes expandIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 17. Scroll contract for long lists ------------------------------ */
.backtest-trades{
  max-height:560px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

/* ---------- 18. Responsive --------------------------------------------------- */
@media(max-width:1080px){
  .metric-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools-layout{grid-template-columns:1fr}
  .tools-layout .tool-card{grid-column:auto}
  main{padding-left:calc(var(--nav-w) - 12px)}
}
@media(max-width:900px){
  .app{padding:12px 12px 20px}
  .desktop-nav{display:none}
  main{padding:14px 2px 12px}
  .hero{flex-direction:column;align-items:flex-start;padding:16px}
  .hero-pills{flex-direction:row;align-items:flex-start;justify-content:flex-start;max-width:none;margin-top:12px;flex-wrap:wrap}
  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .history-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calendar-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .backtest-controls{grid-template-columns:1fr 1fr}
  .backtest-controls .primary-button{grid-column:1/-1;width:100%}
  .page-heading h1{font-size:22px}
  .clock{display:none}
  .mobile-nav{
    position:fixed;z-index:50;left:10px;right:10px;bottom:7px;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:5px;
    background:var(--surface);
    border:var(--border-w) solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .mobile-nav .nav-button{flex-direction:column;justify-content:center;gap:3px;min-height:48px;height:48px;padding:5px 2px;font-size:9px;border-radius:var(--radius-sm)}
  .mobile-nav .nav-button .nav-icon{font-size:15px;line-height:1}
  .app{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .mobile-nav{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:calc(7px + env(safe-area-inset-bottom))}
}
@media(max-width:760px){
  :root{--section-gap:9px;--grid-gap:6px;--card-pad:11px;--control-height:42px}
  .app{width:100%;padding:10px 10px calc(92px + env(safe-area-inset-bottom))}
  .page-heading{gap:12px}
  .page-heading p,.section-note,.chart-head small{max-width:100%}
  .workspace-heading{min-height:52px;padding:10px 14px}
  .metric-card strong{font-size:14.5px}
  .backtest-trades{max-height:480px!important}
  .backtest-trade-row{grid-template-columns:52px minmax(0,1fr)}
  .backtest-trade-row>strong{grid-column:2;justify-self:start}
  .live-trade-row{grid-template-columns:1fr 1fr;gap:9px;padding:12px 13px}
  .live-trade-row>div:first-child{grid-column:1/-1}
  .live-trade-row .live-open-badge{grid-column:2;justify-self:end}
  .scan-history-row{grid-template-columns:1fr auto;gap:8px}
  .scan-history-row>div:last-child,.scan-history-row>small{grid-column:1/-1}
  .trade-row-main{grid-template-columns:minmax(0,1fr) auto auto}
  .trade-row-price{display:none}
  .calendar-item{grid-template-columns:62px 1fr;gap:10px}
  .calendar-details{grid-template-columns:1fr}
  .calendar-time{padding-right:9px}
  .trade-drawer{width:100%;height:min(88vh,760px);margin-top:auto;border-radius:var(--radius) var(--radius) 0 0;transform:translateY(100%)}
  .trade-drawer-shell{align-items:flex-end}
  .trade-drawer-shell.open .trade-drawer{transform:translateY(0)}
}
@media(max-width:680px){
  .topbar{gap:9px;padding:9px 12px;min-height:56px}
  .brand-mark{width:36px;height:36px;font-size:15px}
  .brand-copy strong{font-size:15px}
  .version-badge{display:none}
  .header-meta{gap:6px}
  .hero{padding:10px 12px}
  .hero h2{font-size:15px}
  .section-heading h2{font-size:13.5px}
  .backtest-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .backtest-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .signal-date-toggle small,.history-date-toggle small,.calendar-date-toggle small{font-size:10px}
}
@media(max-width:560px){
  .history-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .history-summary-grid .metric-card{padding:11px}
  .history-summary-grid .metric-card strong{font-size:14px}
  .history-summary-grid .metric-card small{display:none}
  .hero-pills{display:grid;grid-template-columns:1fr 1fr}
  .hero-pills span:last-child{grid-column:1/-1}
  .page-heading{align-items:flex-start;flex-direction:column}
  .page-heading .secondary-button{width:100%}
  .account-grid{grid-template-columns:1fr}
  .appearance-style-grid{grid-template-columns:1fr}
  .backtest-controls{grid-template-columns:1fr}
  /* Superseded: this hid the Backtest tag on every phone while the Markets
     card kept "Fixed", so one heading showed a pill and the next did not. The
     heading is now short enough that the tag fits at every width. */
}
@media(max-width:430px){
  .brand-copy small{font-size:9px}
  .status-badge{font-size:9px;min-height:30px;padding:5px 9px}
  .hero-pills span{font-size:9px;padding:6px 9px}
  .metric-card strong{font-size:14px}
  .card-main{gap:8px;padding:6px 9px}
  .detail-grid{grid-template-columns:1fr}
  .calendar-item{grid-template-columns:56px 1fr;gap:9px;padding:11px 9px}
  .calendar-time strong{font-size:11px}
  .calendar-time small{display:none}
  .backtest-trade-row{grid-template-columns:44px minmax(0,1fr)}
  .backtest-trade-side{width:44px}
  .mobile-nav .nav-button{font-size:8px;min-height:46px;height:46px}
}


/* ---------- Neo collapsible parity: date groups --------------------------- */
/* Date headers are controls, so Neo gives them the same tactile frame as every
   other collapsible control. This is presentation-only. */
html[data-style="neo"] .signal-date-toggle,
html[data-style="neo"] .history-date-toggle,
html[data-style="neo"] .calendar-date-toggle,
html[data-style="neo"] .trade-date-toggle{
  border:2px solid var(--line-strong)!important;
  border-radius:8px!important;
  box-shadow:3px 3px 0 var(--line-strong)!important;
  background:var(--surface)!important;
  margin:3px 3px 6px;
  width:calc(100% - 6px);
  min-height:44px;
  padding:8px 10px;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease;
}

html[data-style="neo"] .signal-date-toggle:hover,
html[data-style="neo"] .history-date-toggle:hover,
html[data-style="neo"] .calendar-date-toggle:hover,
html[data-style="neo"] .trade-date-toggle:hover{
  transform:translate(-1px,-1px);
  background:var(--surface)!important;
  box-shadow:3px 3px 0 var(--line-strong)!important;
}

html[data-style="neo"] .signal-date-toggle:active,
html[data-style="neo"] .history-date-toggle:active,
html[data-style="neo"] .calendar-date-toggle:active,
html[data-style="neo"] .trade-date-toggle:active{
  transform:translate(3px,3px);
  box-shadow:0 0 0 var(--line-strong)!important;
}

html[data-style="neo"] .signal-date-group.is-open>.signal-date-toggle,
html[data-style="neo"] .history-date-group.is-open>.history-date-toggle,
html[data-style="neo"] .calendar-date-group.is-open>.calendar-date-toggle,
html[data-style="neo"] .trade-date-group.is-open>.trade-date-toggle{
  background:var(--accent-soft)!important;
  border-color:var(--line-strong)!important;
  box-shadow:3px 3px 0 var(--line-strong)!important;
}

html[data-style="neo"] .signal-date-group,
html[data-style="neo"] .history-date-group,
html[data-style="neo"] .calendar-date-group,
html[data-style="neo"] .trade-date-group{
  border-bottom:0;
}

@media(max-width:560px){
  html[data-style="neo"] .signal-date-toggle,
  html[data-style="neo"] .history-date-toggle,
  html[data-style="neo"] .calendar-date-toggle,
  html[data-style="neo"] .trade-date-toggle{
    margin:3px 2px 6px;
    width:calc(100% - 4px);
    min-height:42px;
  }
}


/* ---------- Neo date control: explicit visible depth ---------------------- */
/* Keep the date control's depth independent from parent/card overflow and
   make the pressed/open states visibly different from ordinary cards. */
html[data-style="neo"] .signals-workspace .signal-date-group,
html[data-style="neo"] .history-workspace .history-date-group,
html[data-style="neo"] .calendar-workspace .calendar-date-group{
  overflow:visible!important;
}

html[data-style="neo"] .signals-workspace .signal-date-toggle,
html[data-style="neo"] .history-workspace .history-date-toggle,
html[data-style="neo"] .calendar-workspace .calendar-date-toggle{
  position:relative;
  z-index:4!important;
  flex:none;
  border:2px solid var(--line-strong)!important;
  background:var(--surface)!important;
  box-shadow:4px 4px 0 var(--line-strong)!important;
  transform:translate(0,0);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease!important;
}

html[data-style="neo"] .signals-workspace .signal-date-toggle:hover,
html[data-style="neo"] .history-workspace .history-date-toggle:hover,
html[data-style="neo"] .calendar-workspace .calendar-date-toggle:hover{
  transform:translate(-1px,-1px)!important;
  box-shadow:4px 4px 0 var(--line-strong)!important;
}

html[data-style="neo"] .signals-workspace .signal-date-toggle:active,
html[data-style="neo"] .history-workspace .history-date-toggle:active,
html[data-style="neo"] .calendar-workspace .calendar-date-toggle:active{
  transform:translate(4px,4px)!important;
  box-shadow:0 0 0 var(--line-strong)!important;
}

html[data-style="neo"] .signals-workspace .signal-date-group.is-open>.signal-date-toggle,
html[data-style="neo"] .history-workspace .history-date-group.is-open>.history-date-toggle,
html[data-style="neo"] .calendar-workspace .calendar-date-group.is-open>.calendar-date-toggle{
  background:var(--accent-soft)!important;
  box-shadow:2px 2px 0 var(--line-strong)!important;
}

html[data-style="neo"] .signals-workspace .signal-date-toggle i,
html[data-style="neo"] .history-workspace .history-date-toggle i,
html[data-style="neo"] .calendar-workspace .calendar-date-toggle i{
  border:2px solid var(--line-strong)!important;
  box-shadow:2px 2px 0 var(--line-strong)!important;
  background:var(--surface)!important;
}

html[data-style="neo"] .signals-workspace .signal-date-group.is-open .signal-date-toggle i,
html[data-style="neo"] .history-workspace .history-date-group.is-open .history-date-toggle i,
html[data-style="neo"] .calendar-workspace .calendar-date-group.is-open .calendar-date-toggle i{
  box-shadow:1px 1px 0 var(--line-strong)!important;
  background:var(--accent-soft)!important;
}


/* ---------- Tools backtest: final mobile result contract ------------------ */
#page-tools .backtest-results[hidden]{display:none!important}
#page-tools .backtest-results{
  margin-top:8px!important;
  padding:6px!important;
  gap:6px!important;
}
#page-tools .backtest-section{
  padding:10px!important;
  border-radius:var(--radius-sm);
}
#page-tools .backtest-section-heading{
  margin-bottom:7px!important;
  padding-bottom:7px!important;
}
#page-tools .backtest-section-heading h3{font-size:14.5px}
#page-tools .backtest-summary{
  gap:5px!important;
}
#page-tools .backtest-summary>div{
  padding:7px 8px!important;
}
#page-tools .backtest-summary>div span{font-size:9.5px}
#page-tools .backtest-summary b{
  margin-top:3px!important;
  font-size:12px!important;
}
#page-tools .backtest-curve-section .chart-head{
  gap:8px;
  margin-bottom:5px;
}
#page-tools .backtest-curve-section .chart-head strong{font-size:14px}
#page-tools .backtest-curve-section .chart-head small{font-size:10.5px;line-height:1.3}
#page-tools .backtest-rating{
  padding:4px 8px!important;
  font-size:9.5px!important;
}
#page-tools .backtest-metrics{
  gap:5px!important;
}
#page-tools .backtest-metrics>div{
  padding:7px 8px!important;
}
#page-tools .backtest-metrics>div span{font-size:9.5px}
#page-tools .backtest-metrics b{
  margin-top:3px!important;
  font-size:16px!important;
}
#page-tools .backtest-metrics>div:last-child{
  grid-column:1/-1;
}
#page-tools .backtest-trades{
  max-height:480px!important;
}
#page-tools .backtest-trade-row{
  grid-template-columns:38px minmax(0,1fr) auto!important;
  gap:7px!important;
  padding:8px 9px!important;
}
#page-tools .backtest-trade-side{
  width:auto!important;
  font-size:9.5px!important;
}
#page-tools .backtest-trade-row b{font-size:11.5px!important}
#page-tools .backtest-trade-row small{
  margin-top:2px!important;
  font-size:10px!important;
  line-height:1.3;
}
#page-tools .backtest-trade-row>strong{
  grid-column:auto!important;
  justify-self:auto!important;
  font-size:11px!important;
}
@media(max-width:560px){
  #page-tools .backtest-controls select{min-height:38px!important}
  #page-tools .tool-backtest .primary-button{min-height:40px!important}
  #page-tools .backtest-status{
    margin-top:7px!important;
    padding:7px 9px!important;
    font-size:10.5px!important;
  }
  #page-tools .backtest-results{padding:5px!important;gap:5px!important}
  #page-tools .backtest-section{padding:9px!important}
  #page-tools .backtest-summary>div{padding:7px!important}
  #page-tools .backtest-summary b{font-size:11.5px!important}
  #page-tools .backtest-metrics>div{padding:7px!important}
  #page-tools .backtest-metrics b{font-size:15.5px!important}
  #page-tools .backtest-trade-row{
    grid-template-columns:36px minmax(0,1fr) auto!important;
    padding:8px!important;
  }
}


/* ---------- Tools page: full mobile density contract ---------------------- */
#page-tools .tools-layout{gap:10px}
#page-tools .tool-card{padding:12px}
#page-tools .section-heading{margin-bottom:7px}
#page-tools .section-heading h2{font-size:14px}
#page-tools .tool-collapse>.section-heading{min-height:42px;padding:1px 0}
#page-tools .tool-collapse>.tool-body{padding-top:6px}

/* Appearance */
#page-tools .tools-appearance .section-note{margin-top:5px}
#page-tools .tools-appearance .settings-row{gap:8px;margin-top:9px}
#page-tools .tools-appearance .settings-row .settings-label{min-width:76px;font-size:9.5px}
#page-tools .tools-appearance .settings-inline{gap:5px}
#page-tools .tools-appearance .chip-option{min-height:30px;padding:4px 10px;font-size:10px}
#page-tools .tools-appearance .settings-toggle{min-height:30px!important;height:30px!important;padding:4px 10px!important;border:var(--border-w) solid var(--line)!important;border-radius:999px!important;background:var(--surface-2)!important}
#page-tools .tools-appearance .settings-toggle.active{background:var(--accent-fill)!important;border-color:var(--accent-fill)!important;color:var(--on-accent)!important}
#page-tools .tools-appearance .appearance-swatch{width:12px;height:12px;border-radius:4px}

/* Markets */
#page-tools .universe-grid{gap:6px}
#page-tools .universe-grid span{min-height:34px;padding:6px 5px;font-size:10.5px}

/* Accounts */
#page-tools .account-grid{gap:6px}
#page-tools .account-grid article{padding:9px 10px}
#page-tools .account-grid b{font-size:11.5px}
#page-tools .account-grid span{margin-top:3px;font-size:10.5px}
#page-tools .account-grid small{margin-top:3px;font-size:10px}

/* Locked rules */
#page-tools .rule-list>div{padding:9px 11px;gap:2px}
#page-tools .rule-list b{font-size:11.5px}
#page-tools .rule-list span{font-size:10.5px;line-height:1.35}

/* Common open/closed section geometry: no colored header wash */
#page-tools .tool-collapse>.section-heading,
#page-tools .tool-collapse.is-open>.section-heading,
#page-tools .tool-collapse>.section-heading:hover{background:transparent}
#page-tools .tool-collapse>.section-heading h2{color:var(--text)}
#page-tools .tool-collapse.is-open>.section-heading .collapse-control{background:var(--accent-soft);color:var(--accent-strong)}

@media(max-width:760px){
  #page-tools .tools-layout{gap:8px}
  #page-tools .tool-card{padding:11px}
  #page-tools .tools-appearance{padding:11px}
  #page-tools .tools-appearance .settings-row{margin-top:7px;gap:6px}
  #page-tools .tools-appearance .settings-row .settings-label{min-width:72px}
  #page-tools .tools-appearance .chip-option{min-height:29px;padding:4px 9px}
  #page-tools .universe-grid{gap:5px}
  #page-tools .universe-grid span{min-height:32px;padding:6px 4px}
  #page-tools .account-grid{gap:5px}
  #page-tools .account-grid article{padding:9px}
  #page-tools .rule-list>div{padding:9px 10px}
}
@media(max-width:560px){
  #page-tools .tool-card{padding:10px}
  #page-tools .tools-appearance{padding:10px}
  #page-tools .tools-appearance .settings-row{display:flex;align-items:center}
  #page-tools .tools-appearance .settings-row .settings-label{min-width:70px}
  #page-tools .tools-appearance .settings-inline{flex:1;min-width:0}
  #page-tools .tools-appearance .chip-option{font-size:9.5px}
  #page-tools .account-grid{grid-template-columns:1fr}
  #page-tools .tool-collapse>.section-heading{min-height:40px}
}


/* ---------- Tools: final mobile polish ------------------------------------ */
#page-tools .tool-backtest .backtest-status:empty{display:none}
#page-tools .tool-backtest .backtest-status{
  min-height:0!important;
  margin-bottom:0!important;
}
#page-tools .tools-appearance .settings-row{align-items:center}
#page-tools .tools-appearance .section-note{max-width:52ch}
#page-tools .account-grid article{min-height:0}
#page-tools .rule-list>div{min-height:0}
@media(max-width:560px){
  #page-tools .tools-layout{gap:7px}
  #page-tools .tool-card{padding:9px}
  #page-tools .tools-appearance{padding:9px}
  #page-tools .tools-appearance .settings-row{margin-top:6px}
  #page-tools .tools-appearance .settings-label{line-height:1.2}
  #page-tools .account-grid article{padding:8px 9px}
  #page-tools .account-grid span{margin-top:2px}
  #page-tools .account-grid small{margin-top:2px}
  #page-tools .rule-list>div{padding:8px 10px}
  #page-tools .rule-list span{line-height:1.3}
}

/* ---------- Tools: shared compact tool-section contract ------------------ */
#page-tools .tool-collapse>.section-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
  min-width:0;
}
#page-tools .tool-collapse>.section-heading>div{
  min-width:0;
  flex:0 0 auto;
}
#page-tools .tool-collapse>.section-heading>.tool-tag{
  margin-left:auto!important;
  margin-right:0!important;
  flex:0 0 auto!important;
}
#page-tools .tool-collapse>.section-heading>.collapse-control{
  margin-left:0!important;
  flex:0 0 auto!important;
}
#page-tools .tool-collapse>.tool-body{
  padding-top:6px!important;
}
#page-tools .account-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
#page-tools .account-grid article{
  padding:9px 10px!important;
  border-radius:var(--radius-xs)!important;
}
#page-tools .account-grid b{
  font-size:11.5px!important;
  line-height:1.2!important;
}
#page-tools .account-grid span{
  margin-top:3px!important;
  font-size:10.5px!important;
  line-height:1.25!important;
}
#page-tools .account-grid small{
  margin-top:2px!important;
  font-size:9.5px!important;
  line-height:1.25!important;
}
#page-tools .rule-list{
  border-radius:var(--radius-xs)!important;
}
#page-tools .rule-list>div{
  gap:2px!important;
  padding:9px 11px!important;
}
#page-tools .rule-list b{
  font-size:11.5px!important;
  line-height:1.2!important;
}
#page-tools .rule-list span{
  font-size:10.5px!important;
  line-height:1.3!important;
}
@media(max-width:560px){
  #page-tools .account-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #page-tools .account-grid article{padding:8px 9px!important}
  #page-tools .rule-list>div{padding:8px 10px!important}
}
 
/* ---------- Tools: compact categorized asset universe --------------------- */
#page-tools .tool-universe>.section-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
}
#page-tools .tool-universe>.section-heading>div{
  min-width:0;
  flex:0 0 auto;
}
#page-tools .tool-universe>.section-heading>.tool-tag{
  margin-left:auto!important;
  margin-right:0!important;
  flex:0 0 auto!important;
}
#page-tools .tool-universe>.section-heading>.collapse-control{
  flex:0 0 auto!important;
}
/* `.universe-grid` is a block of full-width asset rows. It was declared five
   times in this sheet with eleven mutually-overriding `!important` properties:
   `display:grid` with one column and `gap:0` against `display:block`, a `border:0`
   / `border-radius:0` / `overflow:visible` against a 1px border and a radius,
   and `width:100%` against `calc(100% - 28px)`. The winner was decided by
   document order rather than intent. This is now the only layout declaration;
   the bordered surface further down owns border, radius, overflow and fill. */
#page-tools .universe-grid{
  display:block!important;
  gap:0!important;
  padding:0!important;
}
#page-tools .universe-grid>.asset-category{
  display:block!important;
  padding:8px 0 9px!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
}
#page-tools .universe-grid>.asset-category:first-child{border-top:0!important}
#page-tools .asset-category-label{
  all:unset!important;
  display:block!important;
  margin:0 0 5px!important;
  color:var(--accent-strong)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  line-height:1.2!important;
  text-transform:uppercase!important;
}
#page-tools .asset-category-items{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1px 18px!important;
  min-width:0!important;
  padding:0!important;
}
#page-tools .asset-category-items>span{
  all:unset!important;
  display:block!important;
  min-width:0!important;
  padding:2px 0!important;
  color:var(--text)!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.35!important;
  text-align:left!important;
  white-space:nowrap!important;
}
@media(min-width:761px){
  #page-tools .asset-category-items{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:560px){
  #page-tools .tool-universe>.section-heading{gap:4px!important}
  #page-tools .universe-grid>.asset-category{padding:7px 0 8px!important}
  #page-tools .asset-category-label{margin-bottom:4px!important}
  #page-tools .asset-category-items{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:1px 12px!important;
  }
  #page-tools .asset-category-items>span{
    font-size:10.5px!important;
    line-height:1.3!important;
  }
}

/* ---------- Tools: align collapsible actions with shared dashboard contract ----- */
#page-tools .tool-collapse>.section-heading{
  justify-content:space-between!important;
  gap:10px!important;
}
#page-tools .tool-collapse>.section-heading>div:first-child{
  flex:1 1 auto!important;
  min-width:0!important;
}
#page-tools .tool-collapse>.section-heading>.tool-tag{
  margin-left:auto!important;
  margin-right:0!important;
}
#page-tools .tool-collapse>.section-heading>.collapse-control{
  margin-left:0!important;
  flex:0 0 auto!important;
}
#page-tools .tool-universe>.section-heading>div:first-child{
  flex:1 1 auto!important;
}


/* ---------- Tools: unified inner-surface contract ------------------------- */
/* One visual language for every expanded tool section: shared container,
   compact data cells, and internal dividers instead of unrelated mini-cards. */

#page-tools .account-grid,
#page-tools .rule-list{
  box-sizing:border-box!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-xs)!important;
  background:var(--surface-2)!important;
  overflow:hidden!important;
}

#page-tools .account-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
}
#page-tools .account-grid article{
  min-width:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
#page-tools .account-grid article:nth-child(n+3){
  border-top:1px solid var(--line)!important;
}
#page-tools .account-grid article:nth-child(even){
  border-left:1px solid var(--line)!important;
}

#page-tools .rule-list{
  display:block!important;
}
#page-tools .rule-list>div{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
#page-tools .rule-list>div+div{
  border-top:1px solid var(--line)!important;
}

/* Backtest controls use the same compact field geometry as the rest of Tools. */
#page-tools .backtest-controls select,
#page-tools .backtest-controls .primary-button{
  min-height:40px;
}
#page-tools .backtest-status{
  border-radius:var(--radius-xs)!important;
  border:1px solid var(--line)!important;
}

/* All expanded tool bodies share one spacing rhythm. */
#page-tools .tool-collapse>.tool-body{
  padding-top:7px!important;
}
#page-tools .tool-collapse.is-open>.section-heading{
  margin-bottom:0!important;
}

@media(max-width:560px){
  
  #page-tools .account-grid article{
    padding:8px 9px!important;
  }
}


/* ---------- Backtest: single-surface, execution-first result contract ----- */
#page-tools .backtest-results{
  margin-top:8px!important;
  padding:0!important;
  gap:8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#page-tools .backtest-section{
  padding:10px!important;
  border-radius:var(--radius-sm)!important;
}
#page-tools .backtest-summary>div,
#page-tools .backtest-metrics>div{
  border-radius:var(--radius-xs)!important;
}
#page-tools .backtest-trades{
  border-radius:var(--radius-xs)!important;
}
@media(max-width:560px){
  #page-tools .backtest-results{gap:7px!important}
  #page-tools .backtest-section{padding:9px!important}
}


/* ---------- Backtest: align result geometry with Signals/History ---------- */
#page-tools .backtest-results{
  margin-top:7px!important;
  gap:7px!important;
}
#page-tools .backtest-section{
  padding:9px!important;
}
#page-tools .backtest-section-heading{
  margin-bottom:7px!important;
  padding-bottom:7px!important;
}
#page-tools .backtest-summary{
  gap:6px!important;
}
#page-tools .backtest-summary>div{
  padding:7px 9px!important;
}
#page-tools .backtest-summary b{
  font-size:12px!important;
}
#page-tools .backtest-curve-section .chart-area{
  min-height:132px!important;
}
#page-tools .backtest-curve-section .chart-area svg{
  height:132px!important;
}
#page-tools .backtest-curve-section .chart-head{
  margin-bottom:4px!important;
}
#page-tools .backtest-curve-section .chart-head small{
  font-size:10px!important;
}
#page-tools .backtest-metrics{
  gap:6px!important;
}
#page-tools .backtest-metrics>div{
  padding:7px 9px!important;
}
#page-tools .backtest-metrics b{
  margin-top:3px!important;
  font-size:15px!important;
}
#page-tools .backtest-trades{
  max-height:440px!important;
}
#page-tools .backtest-trade-row{
  gap:7px!important;
  padding:7px 9px!important;
}
#page-tools .backtest-trade-row b{
  font-size:11.5px!important;
}
#page-tools .backtest-trade-row small{
  margin-top:2px!important;
  font-size:10px!important;
}
@media(max-width:560px){
  #page-tools .backtest-section{padding:8px!important}
  #page-tools .backtest-summary>div,
  #page-tools .backtest-metrics>div{padding:7px 8px!important}
  #page-tools .backtest-curve-section .chart-area,
  #page-tools .backtest-curve-section .chart-area svg{
    height:124px!important;
    min-height:124px!important;
  }
  #page-tools .backtest-trade-row{padding:7px 8px!important}
}


/* ---------- Tools parity: flat account grid matches asset presentation ----- */
#page-tools .account-grid{
  gap:0;
  border-top:1px solid var(--line);
}
#page-tools .account-grid article{
  padding:9px 10px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
#page-tools .account-grid article:nth-child(odd){
  border-right:1px solid var(--line);
}
#page-tools .account-grid b{
  font-size:11.5px;
  font-weight:850;
}
#page-tools .account-grid span{
  margin-top:3px;
  font-size:10.5px;
  line-height:1.35;
}
#page-tools .account-grid small{
  margin-top:2px;
  font-size:10px;
  line-height:1.35;
}
@media(max-width:560px){
  #page-tools .account-grid article{padding:8px 9px}
  #page-tools .account-grid b{font-size:11.5px}
}

/* ==========================================================================
   CALENDAR FLOW CONTRACT V3
   Reference: Signals + History.
   Goal: stable hierarchy, shared alignment, no shifting source row, no clipped
   event text, and identical responsive behavior at the actual mobile/tablet
   breakpoint (<=760px).
   ========================================================================== */

/* 1) Source/status block is a fixed two-row composition.
   The previous flex row allowed Forex Factory to participate in the same
   sizing context as the cached status, which created the large blank area
   and made the link appear to shift. */
#page-calendar .calendar-agenda-status{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:center!important;
  gap:2px!important;
  min-height:0!important;
  height:auto!important;
  padding:8px 12px 6px!important;
  background:var(--surface-2)!important;
}
#page-calendar .calendar-agenda-status .calendar-status{
  width:100%!important;
  min-width:0!important;
  min-height:32px!important;
  height:32px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
}
#page-calendar #calendarStatus .inline-status{
  width:100%!important;
  min-width:0!important;
  min-height:30px!important;
  height:30px!important;
  padding:5px 9px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  overflow:hidden!important;
}
#page-calendar #calendarStatus .inline-status b{
  flex:none!important;
  font-size:10.5px!important;
  line-height:1!important;
}
#page-calendar #calendarStatus .inline-status small{
  min-width:0!important;
  flex:1 1 auto!important;
  font-size:10px!important;
  line-height:1.2!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#page-calendar .calendar-agenda-status .calendar-source{
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
  min-height:27px!important;
  height:27px!important;
  padding:4px 6px!important;
  border:0!important;
  border-radius:var(--radius-xs)!important;
  background:transparent!important;
  font-size:10.5px!important;
  line-height:1!important;
}

/* 2) Summary uses the exact compact metric geometry; descriptions remain
   intentionally suppressed just like History's summary metrics. */
#page-calendar .calendar-summary-grid{
  gap:8px!important;
  padding:8px 12px!important;
}
#page-calendar .calendar-summary-grid .metric-card{
  min-width:0!important;
  min-height:46px!important;
  height:46px!important;
  padding:7px 10px!important;
  border-radius:var(--radius-sm)!important;
  box-shadow:none!important;
}
#page-calendar .calendar-summary-grid .metric-card span{
  min-width:0!important;
  max-width:72%!important;
  font-size:10px!important;
  line-height:1.15!important;
  letter-spacing:.07em!important;
}
#page-calendar .calendar-summary-grid .metric-card strong{
  flex:none!important;
  font-size:13.5px!important;
  line-height:1!important;
}

/* 3) Section hierarchy: heading -> date -> event -> details.
   No oversized whitespace between levels. */
#page-calendar .calendar-agenda-bar{
  min-height:48px!important;
  height:48px!important;
  padding:9px 14px!important;
}
#page-calendar .calendar-agenda-bar .eyebrow{
  font-size:10.5px!important;
  line-height:1!important;
}
#page-calendar .calendar-agenda-bar .workspace-count{
  font-size:10.5px!important;
}

/* 4) Date row shares History geometry. */
#page-calendar .calendar-date-list{
  padding:7px 8px 10px!important;
}
#page-calendar .calendar-date-group{
  margin:0 0 6px!important;
  border-bottom:0!important;
}
#page-calendar .calendar-date-toggle{
  box-sizing:border-box!important;
  min-height:48px!important;
  height:48px!important;
  margin:0!important;
  padding:7px 9px!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-inner-r)!important;
  background:var(--surface-2)!important;
}
#page-calendar .calendar-date-toggle span{
  gap:2px!important;
}
#page-calendar .calendar-date-toggle b{
  font-size:12px!important;
  line-height:1.15!important;
}
#page-calendar .calendar-date-toggle small{
  font-size:10px!important;
  line-height:1.15!important;
}
#page-calendar .calendar-date-toggle i{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:var(--ui-control-r)!important;
}

/* 5) Event cards use a stable two-level layout.
   Metadata stays on row 1. Title becomes row 2 and is NOT artificially
   indented by 70px. This fixes the visual break visible in the screenshot. */
#page-calendar .calendar-date-events{
  display:grid!important;
  gap:6px!important;
  padding:6px 0 0!important;
}
#page-calendar .calendar-item{
  box-sizing:border-box!important;
  min-width:0!important;
  height:auto!important;
  padding:6px 8px 7px!important;
  border-radius:var(--ui-inner-r)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#page-calendar .calendar-event{
  min-width:0!important;
  width:100%!important;
}
#page-calendar .calendar-meta{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  height:36px!important;
  padding:2px 0!important;
  gap:6px!important;
  align-items:center!important;
}
#page-calendar .calendar-time-value{
  flex:0 0 49px!important;
  width:49px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:800!important;
  font-variant-numeric:tabular-nums!important;
}
#page-calendar .calendar-meta .news-dot{
  width:7px!important;
  height:7px!important;
  min-width:7px!important;
  box-shadow:none!important;
}
#page-calendar .currency-code,
#page-calendar .impact-pill{
  box-sizing:border-box!important;
  min-height:24px!important;
  height:24px!important;
  padding:5px 8px!important;
  border-radius:var(--radius-xs)!important;
  font-size:10px!important;
  line-height:1!important;
}#page-calendar .calendar-meta .expand-button{
  flex:0 0 34px!important;
  margin-left:auto!important;
}
#page-calendar .calendar-meta 
/* Event title is now a first-class hierarchy level.
   Allow two lines so long titles are readable instead of clipped. */
#page-calendar .calendar-title,
#page-calendar .calendar-event>.calendar-title{
  display:-webkit-box!important;
  width:auto!important;
  min-width:0!important;
  margin:2px 0 0!important;
  padding:0!important;
  font-size:12px!important;
  line-height:1.28!important;
  font-weight:750!important;
  letter-spacing:-.01em!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
  white-space:normal!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}

/* Expanded information is a real 3-column data row, aligned to the card
   edges instead of being offset under the currency badge. */
#page-calendar .calendar-details{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  min-width:0!important;
  gap:6px!important;
  margin:6px 0 0!important;
  padding:6px 0 0!important;
  border-top:1px solid var(--line)!important;
}
#page-calendar .calendar-details>span{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:31px!important;
  height:31px!important;
  padding:5px 7px!important;
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  border-radius:var(--ui-control-r)!important;
  background:var(--surface-2)!important;
  font-size:8.5px!important;
  line-height:1!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
#page-calendar .calendar-details>span b{
  min-width:0!important;
  font-size:10px!important;
  line-height:1!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* 6) The mobile breakpoint in the actual dashboard is 760px, not 560px.
   Keep Calendar compact at the same breakpoint as the rest of the app. */
@media(max-width:760px){
  #page-calendar .calendar-agenda-status{
    gap:2px!important;
    padding:7px 10px 5px!important;
  }
  #page-calendar .calendar-agenda-status .calendar-status{
    min-height:31px!important;
    height:31px!important;
  }
  #page-calendar .calendar-agenda-status .calendar-source{
    min-height:26px!important;
    height:26px!important;
    font-size:10px!important;
  }
  #page-calendar .calendar-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:7px 9px!important;
  }
  #page-calendar .calendar-summary-grid .metric-card{
    height:45px!important;
    min-height:45px!important;
    padding:7px 9px!important;
  }
  #page-calendar .calendar-agenda-bar{
    min-height:46px!important;
    height:46px!important;
    padding:8px 12px!important;
  }
  #page-calendar .calendar-date-list{
    padding:6px 7px 9px!important;
  }
  #page-calendar .calendar-date-toggle{
    min-height:48px!important;
    height:48px!important;
    padding:7px 8px!important;
  }
  #page-calendar .calendar-date-toggle i{
    width:34px!important;
    height:34px!important;
  }
  #page-calendar .calendar-item{
    padding:6px 8px 7px!important;
  }
}

/* 7) Very narrow screens: preserve text rather than hiding hierarchy. */
@media(max-width:430px){
  #page-calendar .calendar-meta{
    gap:5px!important;
  }
  #page-calendar .calendar-time-value{
    flex-basis:47px!important;
    width:47px!important;
    font-size:11.5px!important;
  }
  #page-calendar .calendar-meta .impact-pill{
    display:inline-flex!important;
  }
  #page-calendar .calendar-details{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
  }
  #page-calendar .calendar-details>span{
    padding:5px 5px!important;
    font-size:8px!important;
  }
  #page-calendar .calendar-details>span b{
    font-size:9px!important;
  }
}


/* ---------- Tools: Markets final compact alignment pass ------------------- */
/* Keep the market universe dense, symmetric and aligned with the tool-card
   edges.  Presentation only: no data or rendering logic is changed. */
#page-tools .tool-universe>.section-heading{
  min-height:42px!important;
  margin-bottom:0!important;
  padding:0!important;
  align-items:center!important;
}

#page-tools .tool-universe>.tool-body{padding:0!important;
}

#page-tools .universe-grid>.asset-category{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:7px 0 6px!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
}

#page-tools .universe-grid>.asset-category:first-child{
  border-top:0!important;
}

#page-tools .asset-category-label{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0 0 4px!important;
  padding:0!important;
  line-height:16px!important;
  font-size:10px!important;
}

#page-tools .asset-category-items{
  box-sizing:border-box!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(0,auto)!important;
  align-items:start!important;
  column-gap:0!important;
  row-gap:0!important;
  margin:0!important;
  padding:0!important;
}

#page-tools .asset-category-items>span{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:5px 8px!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
  border-radius:0!important;
  background:transparent!important;
  font-size:11px!important;
  font-weight:650!important;
  line-height:18px!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#page-tools .asset-category-items>span:nth-child(odd){
  border-right:1px solid var(--line)!important;
}

#page-tools .asset-category-items>span:nth-child(-n+2){
  border-top:0!important;
}

@media(min-width:761px){
  #page-tools .asset-category-items{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #page-tools .asset-category-items>span:nth-child(odd){
    border-right:0!important;
  }
  #page-tools .asset-category-items>span:not(:nth-child(4n)){
    border-right:1px solid var(--line)!important;
  }
  #page-tools .asset-category-items>span:nth-child(-n+4){
    border-top:0!important;
  }
}

@media(max-width:560px){
  #page-tools .universe-grid>.asset-category{
    padding:6px 0 5px!important;
  }
  #page-tools .asset-category-label{
    margin-bottom:3px!important;
    line-height:15px!important;
  }
  #page-tools .asset-category-items>span{
    padding:4px 7px!important;
    font-size:10.5px!important;
    line-height:17px!important;
  }
}


/* ---------- Tools: Markets edge alignment correction ---------------------- */
/* Category content must sit inside the same horizontal inset as the card
   content. Single-item categories must not show a phantom center divider. */
#page-tools .universe-grid>.asset-category{
  box-sizing:border-box!important;
  width:calc(100% - 28px)!important;
  margin-left:14px!important;
  margin-right:14px!important;
  padding-left:0!important;
  padding-right:0!important;
}

#page-tools .asset-category-label{
  padding-left:0!important;
  padding-right:0!important;
}

#page-tools .asset-category-items{
  width:100%!important;
}

#page-tools .asset-category-items>span{
  padding-left:0!important;
  padding-right:8px!important;
}

#page-tools .asset-category-items>span:nth-child(odd){
  border-right:1px solid var(--line)!important;
  padding-left:0!important;
}

#page-tools .asset-category-items>span:nth-child(even){
  padding-left:14px!important;
  padding-right:0!important;
}

#page-tools .asset-category-items:not(:has(>span:nth-child(2)))>span{
  border-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

@media(min-width:761px){
  #page-tools .asset-category-items>span:nth-child(even){
    padding-left:14px!important;
  }
  #page-tools .asset-category-items>span:not(:nth-child(4n)){
    border-right:1px solid var(--line)!important;
  }
  #page-tools .asset-category-items>span:nth-child(4n){
    padding-right:0!important;
  }
  #page-tools .asset-category-items:not(:has(>span:nth-child(2)))>span{
    border-right:0!important;
    padding-left:0!important;
  }
}

@media(max-width:560px){
  #page-tools .universe-grid>.asset-category{
    width:calc(100% - 28px)!important;
    margin-left:14px!important;
    margin-right:14px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #page-tools .asset-category-items>span:nth-child(even){
    padding-left:12px!important;
  }
  #page-tools .asset-category-items:not(:has(>span:nth-child(2)))>span{
    padding-left:0!important;
    padding-right:0!important;
  }
}

@media(max-width:560px){
}


/* ---------- Tools: Markets asset presentation ----------------------------- */
/* Mobile reference style: category badge on the left, flowing assets on the
   right, with compact alternating rows. Data/rendering remains unchanged. */
#page-tools .universe-grid{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  overflow:hidden!important;
  background:var(--surface)!important;
}

#page-tools .universe-grid>.asset-category{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(128px,26%) minmax(0,1fr)!important;
  column-gap:12px!important;
  align-items:center!important;
  margin:0!important;
  padding:10px 14px!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
  background:var(--surface)!important;
}

#page-tools .universe-grid>.asset-category:first-child{
  border-top:0!important;
}

#page-tools .universe-grid>.asset-category:nth-child(odd){
  background:var(--surface-2)!important;
}

#page-tools .asset-category-label{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  margin:0!important;
  padding:7px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-inner-r)!important;
  background:var(--surface-2)!important;
  color:var(--accent-strong)!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1.25!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  overflow-wrap:anywhere!important;
}

#page-tools .asset-category-items{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  align-content:center!important;
  gap:7px 14px!important;
  margin:0!important;
  padding:0!important;
}

#page-tools .asset-category-items>span,
#page-tools .asset-category-items>span:nth-child(odd),
#page-tools .asset-category-items>span:nth-child(even){
  box-sizing:border-box!important;
  display:block!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--text)!important;
  font-size:11.5px!important;
  font-weight:700!important;
  line-height:1.35!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

@media(max-width:560px){
  #page-tools .universe-grid{
    border-radius:var(--radius)!important;
  }

  #page-tools .universe-grid>.asset-category{
    grid-template-columns:minmax(112px,26%) minmax(0,1fr)!important;
    column-gap:12px!important;
    padding:9px 14px!important;
  }

  #page-tools .asset-category-label{
    min-height:48px!important;
    padding:7px 6px!important;
    border-radius:11px!important;
    font-size:9.5px!important;
  }

  #page-tools .asset-category-items{
    gap:6px 12px!important;
  }

  #page-tools .asset-category-items>span,
  #page-tools .asset-category-items>span:nth-child(odd),
  #page-tools .asset-category-items>span:nth-child(even){
    font-size:11px!important;
    line-height:1.35!important;
  }
}

@media(max-width:400px){
  #page-tools .universe-grid>.asset-category{
    grid-template-columns:108px minmax(0,1fr)!important;
    column-gap:10px!important;
    padding-left:11px!important;
    padding-right:11px!important;
  }

  #page-tools .asset-category-items{
    gap:5px 10px!important;
  }
}


/* ---------- Tools: Markets final alignment correction --------------------- */
/* Keep the reference badge layout, but give the whole market matrix the same
   inset as the surrounding card and use stable asset columns so rows do not
   become unnecessarily tall on mobile. */
#page-tools .universe-grid{
  width:calc(100% - 28px)!important;
  margin-left:14px!important;
  margin-right:14px!important;
}

#page-tools .universe-grid>.asset-category{
  grid-template-columns:160px minmax(0,1fr)!important;
  column-gap:14px!important;
  padding:10px 10px!important;
}

#page-tools .asset-category-label{
  width:160px!important;
  max-width:160px!important;
  min-height:48px!important;
}

#page-tools .asset-category-items{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px 14px!important;
  align-items:center!important;
  align-content:center!important;
}

#page-tools .asset-category-items>span,
#page-tools .asset-category-items>span:nth-child(odd),
#page-tools .asset-category-items>span:nth-child(even){
  width:auto!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  font-size:11.5px!important;
  line-height:1.3!important;
  white-space:nowrap!important;
}

@media(max-width:560px){
  #page-tools .universe-grid{
    width:calc(100% - 28px)!important;
    margin-left:14px!important;
    margin-right:14px!important;
  }

  #page-tools .universe-grid>.asset-category{
    grid-template-columns:160px minmax(0,1fr)!important;
    column-gap:12px!important;
    padding:9px 8px!important;
  }

  #page-tools .asset-category-label{
    width:160px!important;
    max-width:160px!important;
    min-height:48px!important;
  }

  #page-tools .asset-category-items{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px 10px!important;
  }

  #page-tools .asset-category-items>span,
  #page-tools .asset-category-items>span:nth-child(odd),
  #page-tools .asset-category-items>span:nth-child(even){
    font-size:11px!important;
    line-height:1.3!important;
  }
}

@media(max-width:430px){
  #page-tools .universe-grid>.asset-category{
    grid-template-columns:132px minmax(0,1fr)!important;
    column-gap:10px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }

  #page-tools .asset-category-label{
    width:132px!important;
    max-width:132px!important;
  }

  #page-tools .asset-category-items{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px 9px!important;
  }
}


/* ---------- Tools: unified inner-surface + alignment contract ------------- */
/* All expanded Tool sections use the same white outer card + soft-grey inner
   surface. This is presentation-only and scoped to Tools. */
#page-tools .tool-collapse.is-open>.tool-body{
  box-sizing:border-box!important;
  margin:0!important;
  padding:8px!important;
  background:var(--surface-2)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-inner-r)!important;
}



#page-tools .tool-accounts .tool-body,
#page-tools .tool-rules .tool-body{
  overflow:hidden!important;
}

#page-tools .account-grid{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-inner-r)!important;
  overflow:hidden!important;
  background:var(--surface)!important;
}

#page-tools .account-grid article{
  background:var(--surface)!important;
  border-bottom:1px solid var(--line)!important;
}

#page-tools .account-grid article:nth-child(odd){
  border-right:0!important;
}

#page-tools .account-grid article:last-child,
#page-tools .account-grid article:nth-last-child(2):nth-child(odd){
  border-bottom:0!important;
}

#page-tools .rule-list{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-inner-r)!important;
  overflow:hidden!important;
  background:var(--surface)!important;
}

#page-tools .rule-list>div{
  background:var(--surface)!important;
  padding:8px 10px!important;
}

#page-tools .rule-list>div+div{
  border-top:1px solid var(--line)!important;
}

/* Appearance uses the same grey inner treatment without changing its markup. */
#page-tools .tools-appearance{
  box-sizing:border-box!important;
  padding:10px!important;
}

#page-tools .tools-appearance .settings-row{
  box-sizing:border-box!important;
  margin-top:6px!important;
  padding:7px 8px!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  background:var(--surface-2)!important;
  min-height:40px!important;
}

/* `:first-of-type` again matched `.section-heading`, so this never reached a row. */
#page-tools .tools-appearance>.section-heading+.settings-row{
  margin-top:8px!important;
}

#page-tools .tools-appearance .settings-label{
  flex:0 0 70px!important;
  min-width:70px!important;
  font-size:9.5px!important;
}

#page-tools .tools-appearance .settings-inline{
  flex:1 1 auto!important;
  min-width:0!important;
  gap:5px!important;
}

#page-tools .tools-appearance .chip-option{
  min-height:28px!important;
  padding:4px 8px!important;
  font-size:9.5px!important;
  white-space:nowrap!important;
}

/* Markets: same inner surface, slimmer badge and predictable asset matrix. */
#page-tools .tool-universe .tool-body{
  padding:8px!important;
}

#page-tools .tool-universe .universe-grid{
  width:100%!important;
  margin:0!important;
  border-radius:10px!important;
}

#page-tools .tool-universe .universe-grid>.asset-category{
  grid-template-columns:132px minmax(0,1fr)!important;
  column-gap:12px!important;
  padding:8px 8px!important;
  min-height:0!important;
}

#page-tools .tool-universe .asset-category-label{
  width:132px!important;
  max-width:132px!important;
  min-height:42px!important;
  padding:6px 6px!important;
  border-radius:10px!important;
  font-size:9.5px!important;
  line-height:1.15!important;
}

#page-tools .tool-universe .asset-category-items{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px 12px!important;
  align-content:center!important;
}

#page-tools .tool-universe .asset-category-items>span,
#page-tools .tool-universe .asset-category-items>span:nth-child(odd),
#page-tools .tool-universe .asset-category-items>span:nth-child(even){
  font-size:11px!important;
  line-height:1.25!important;
}

@media(max-width:560px){
  /* Superseded: this 7px body variant only matched open collapsibles, so an
     expanded Tool card sat one pixel tighter than its collapsed siblings. The
     single 8px declaration lives in the unified rule above. */
  #page-tools .tools-appearance{
    padding:9px!important;
  }

  #page-tools .tools-appearance .settings-row{
    margin-top:5px!important;
    padding:6px 7px!important;
    min-height:38px!important;
  }

  #page-tools .tools-appearance .settings-label{
    flex-basis:62px!important;
    min-width:62px!important;
    font-size:9px!important;
  }

  #page-tools .tools-appearance .settings-inline{
    gap:4px!important;
  }

  #page-tools .tools-appearance .chip-option{
    min-height:27px!important;
    padding:4px 7px!important;
    font-size:9px!important;
  }

  #page-tools .tool-universe .universe-grid>.asset-category{
    grid-template-columns:118px minmax(0,1fr)!important;
    column-gap:10px!important;
    padding:7px 7px!important;
  }

  #page-tools .tool-universe .asset-category-label{
    width:118px!important;
    max-width:118px!important;
    min-height:40px!important;
    font-size:9px!important;
  }

  #page-tools .tool-universe .asset-category-items{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px 9px!important;
  }

  #page-tools .tool-universe .asset-category-items>span,
  #page-tools .tool-universe .asset-category-items>span:nth-child(odd),
  #page-tools .tool-universe .asset-category-items>span:nth-child(even){
    font-size:10.5px!important;
  }
}

@media(max-width:400px){
  #page-tools .tool-universe .universe-grid>.asset-category{
    grid-template-columns:108px minmax(0,1fr)!important;
    column-gap:9px!important;
  }

  #page-tools .tool-universe .asset-category-label{
    width:108px!important;
    max-width:108px!important;
  }

  #page-tools .tool-universe .asset-category-items{
    gap:4px 8px!important;
  }
}


/* ==========================================================================
   TOOLS VISUAL FOUNDATION V2
   Design rule:
   outer card = white / heading
   inner body = one soft-grey canvas
   content surface = one white panel
   controls = white controls with accent only for active/focus
   No decorative nested borders unless they separate real content.
   ========================================================================== */

/* 1. One card rhythm ------------------------------------------------------ */
#page-tools .tool-card,
#page-tools .tools-appearance{
  box-sizing:border-box!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-soft)!important;
  overflow:hidden!important;
}

#page-tools .tools-layout{
  gap:10px!important;
}

#page-tools .tool-card>.section-heading,
#page-tools .tools-appearance>.section-heading{
  box-sizing:border-box!important;
  min-height:58px!important;
  height:auto!important;
  margin:0!important;
  padding:10px 14px!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  background:var(--surface)!important;
  display:flex!important;
  align-items:center!important;
}

#page-tools .section-heading h2{
  font-size:14px!important;
  line-height:1.15!important;
}

#page-tools .section-heading .eyebrow{
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.13em!important;
}

/* 2. One continuous grey body --------------------------------------------- */
#page-tools .tool-card>.tool-body{
  box-sizing:border-box!important;
  margin:0!important;
  padding:10px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--surface-2)!important;
}

#page-tools .tool-collapse.is-open>.tool-body{
  border:0!important;
  border-radius:0!important;
}

/* 3. Real content panels: one border, not border-on-border ---------------- */

#page-tools .account-grid,
#page-tools .rule-list,
#page-tools .universe-grid{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-inner-r)!important;
  overflow:hidden!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}

/* Accounts */
#page-tools .account-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
}

#page-tools .account-grid article{
  box-sizing:border-box!important;
  min-height:0!important;
  padding:10px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  background:var(--surface)!important;
}

#page-tools .account-grid article:last-child{
  border-bottom:0!important;
}

#page-tools .account-grid article:nth-child(odd){
  border-right:0!important;
}

/* Locked rules */
#page-tools .rule-list{
  display:grid!important;
  gap:0!important;
}

#page-tools .rule-list>div{
  box-sizing:border-box!important;
  min-height:0!important;
  padding:9px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  background:var(--surface)!important;
}

#page-tools .rule-list>div:last-child{
  border-bottom:0!important;
}

#page-tools .rule-list b{
  font-size:11.5px!important;
  line-height:1.2!important;
}

#page-tools .rule-list span{
  font-size:10.5px!important;
  line-height:1.3!important;
}

/* 4. Markets: compact matrix, no giant category pills -------------------- */
#page-tools .tool-universe>.tool-body{
  padding:10px!important;
}

#page-tools .universe-grid{
  background:var(--surface)!important;
}

#page-tools .universe-grid>.asset-category{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:118px minmax(0,1fr)!important;
  column-gap:14px!important;
  align-items:center!important;
  min-height:0!important;
  margin:0!important;
  padding:8px 10px!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  background:var(--surface)!important;
}

#page-tools .universe-grid>.asset-category:last-child{
  border-bottom:0!important;
}

#page-tools .universe-grid>.asset-category:nth-child(odd){
  background:var(--surface-2)!important;
}

#page-tools .asset-category-label{
  box-sizing:border-box!important;
  width:118px!important;
  max-width:118px!important;
  min-height:38px!important;
  margin:0!important;
  padding:5px 7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border:1px solid var(--line)!important;
  border-radius:9px!important;
  background:var(--surface)!important;
  color:var(--accent-strong)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.075em!important;
  line-height:1.15!important;
}

#page-tools .asset-category-items{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:3px 12px!important;
  align-items:center!important;
  align-content:center!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

#page-tools .asset-category-items>span,
#page-tools .asset-category-items>span:nth-child(odd),
#page-tools .asset-category-items>span:nth-child(even){
  box-sizing:border-box!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  font-size:10.5px!important;
  font-weight:700!important;
  line-height:1.3!important;
  white-space:nowrap!important;
  text-align:left!important;
}

/* 5. Appearance: one grey canvas, clean control rows ---------------------- */
#page-tools .tools-appearance{
  grid-column:1/-1!important;
}

#page-tools .tools-appearance>.section-heading{
  padding-bottom:9px!important;
}

#page-tools .tools-appearance>.settings-row{
  box-sizing:border-box!important;
  min-height:42px!important;
  margin:0 10px!important;
  padding:6px 8px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  background:var(--surface-2)!important;
}

#page-tools .tools-appearance>.settings-row:last-child{
  border-bottom:0!important;
  margin-bottom:10px!important;
}

#page-tools .tools-appearance .settings-label{
  flex:0 0 62px!important;
  min-width:62px!important;
  font-size:9px!important;
  letter-spacing:.12em!important;
}

#page-tools .tools-appearance .settings-inline{
  flex:1 1 auto!important;
  min-width:0!important;
  gap:5px!important;
}

#page-tools .tools-appearance .chip-option{
  min-height:29px!important;
  padding:4px 8px!important;
  border:1px solid var(--line)!important;
  border-radius:9px!important;
  background:var(--surface)!important;
  font-size:9.5px!important;
  font-weight:800!important;
}

#page-tools .tools-appearance .chip-option.active{
  border-color:var(--accent-fill)!important;
  background:var(--accent-fill)!important;
  color:var(--on-accent)!important;
}

/* 6. Backtest: grey body + white controls, same rhythm -------------------- */
#page-tools .tool-backtest .tool-body{
  padding:10px!important;
}

#page-tools .backtest-controls{
  gap:7px!important;
}

#page-tools .backtest-controls label{
  min-width:0!important;
}

#page-tools .backtest-controls select{
  box-sizing:border-box!important;
  min-height:40px!important;
  margin-top:4px!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  background:var(--surface)!important;
}

#page-tools .backtest-controls .primary-button{
  min-height:40px!important;
  border-radius:var(--ui-control-r)!important;
}

#page-tools .backtest-status{
  margin-top:7px!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  background:var(--surface)!important;
}

/* 9. Mobile: preserve the same geometry rather than introducing new rules */
@media(max-width:560px){
  #page-tools .tool-card>.section-heading,
  #page-tools .tools-appearance>.section-heading{
    min-height:54px!important;
    padding:9px 12px!important;
  }

  #page-tools .tool-card>.tool-body{
    padding:8px!important;
  }

  

  #page-tools .tool-universe>.tool-body,
  #page-tools .tool-backtest .tool-body{
    padding:8px!important;
  }

  #page-tools .universe-grid>.asset-category{
    grid-template-columns:112px minmax(0,1fr)!important;
    column-gap:10px!important;
    padding:7px 8px!important;
  }

  #page-tools .asset-category-label{
    width:112px!important;
    max-width:112px!important;
    min-height:36px!important;
    font-size:8.7px!important;
  }

  #page-tools .asset-category-items{
    gap:3px 9px!important;
  }

  #page-tools .asset-category-items>span,
  #page-tools .asset-category-items>span:nth-child(odd),
  #page-tools .asset-category-items>span:nth-child(even){
    font-size:10.5px!important;
  }

  #page-tools .tools-appearance>.settings-row{
    margin-left:8px!important;
    margin-right:8px!important;
    min-height:40px!important;
  }

  #page-tools .tools-appearance .settings-label{
    flex-basis:58px!important;
    min-width:58px!important;
  }

  #page-tools .tools-appearance .chip-option{
    min-height:28px!important;
    padding:4px 7px!important;
    font-size:9px!important;
  }

  #page-tools .account-grid article{
    padding:9px 10px!important;
  }

  #page-tools .rule-list>div{
    padding:8px 10px!important;
  }
}

@media(max-width:400px){
  #page-tools .universe-grid>.asset-category{
    grid-template-columns:104px minmax(0,1fr)!important;
    column-gap:8px!important;
  }

  #page-tools .asset-category-label{
    width:104px!important;
    max-width:104px!important;
  }

  #page-tools .asset-category-items{
    gap:3px 7px!important;
  }
}


/* ==========================================================================
   TOOLS VISUAL FOUNDATION V3 — final geometry pass
   One visual rule across every Tools section:
   white outer card/header -> grey body gutter -> white content/control.
   ========================================================================== */

/* Shared outer geometry */
#page-tools .tool-card,
#page-tools .tools-appearance{
  border-radius:var(--radius)!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow-soft)!important;
  background:var(--surface)!important;
  overflow:hidden!important;
}

#page-tools .tool-card>.section-heading,
#page-tools .tools-appearance>.section-heading{
  min-height:58px!important;
  padding:10px 14px!important;
  margin:0!important;
  background:var(--surface)!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
}

/* Shared grey body — no border around the body itself */
#page-tools .tool-card>.tool-body{
  background:var(--surface-2)!important;
  padding:10px!important;
  border:0!important;
}

/* Every actual content surface gets the same geometry */

#page-tools .account-grid,
#page-tools .rule-list,
#page-tools .universe-grid{
  border:1px solid var(--line)!important;
  border-radius:var(--ui-inner-r)!important;
  box-shadow:none!important;
}

/* Appearance: make the rows one continuous white content surface */
#page-tools .tools-appearance{
  overflow:hidden!important;
}

#page-tools .tools-appearance>.settings-row{
  margin:0 10px!important;
  padding:7px 10px!important;
  min-height:42px!important;
  background:var(--surface)!important;
  border-left:1px solid var(--line)!important;
  border-right:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
}

/* `:first-of-type` matched `.section-heading` (the first div child), so this
   rule never reached a settings row and the panel lost its top edge and top
   corners. The row after the heading is what starts the panel. */
#page-tools .tools-appearance>.section-heading+.settings-row{
  border-top:1px solid var(--line)!important;
  border-top-left-radius:var(--radius-sm)!important;
  border-top-right-radius:var(--radius-sm)!important;
}

#page-tools .tools-appearance>.settings-row:last-child{
  margin-bottom:10px!important;
  border-bottom-left-radius:var(--radius-sm)!important;
  border-bottom-right-radius:var(--radius-sm)!important;
}

/* Backtest controls read as one panel rather than unrelated boxes */
#page-tools .tool-backtest .tool-body{
  padding:10px!important;
}

#page-tools .tool-backtest .backtest-controls{
  padding:10px!important;
  border:1px solid var(--line)!important;
  border-radius:var(--ui-inner-r)!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}

#page-tools .tool-backtest .backtest-status{
  margin-top:8px!important;
  padding:8px 10px!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  background:var(--surface)!important;
}

/* Markets: eliminate the extra-looking inner frame and use the same panel
   geometry as Accounts/Rules/Runtime. */
#page-tools .tool-universe>.tool-body{
  padding:10px!important;
}

#page-tools .universe-grid{
  border-radius:var(--ui-inner-r)!important;
  background:var(--surface)!important;
}

#page-tools .universe-grid>.asset-category{
  padding:8px 10px!important;
}

#page-tools .asset-category-label{
  min-height:36px!important;
  border-radius:9px!important;
}

/* Accounts / rules content density */
#page-tools .account-grid article{
  padding:9px 12px!important;
}

#page-tools .rule-list>div{
  padding:9px 12px!important;
}

@media(max-width:560px){
  #page-tools .tool-card>.section-heading,
  #page-tools .tools-appearance>.section-heading{
    min-height:54px!important;
    padding:9px 12px!important;
  }

  #page-tools .tool-card>.tool-body{
    padding:8px!important;
  }

  #page-tools .tools-appearance>.settings-row{
    margin-left:8px!important;
    margin-right:8px!important;
    min-height:40px!important;
    padding:6px 9px!important;
  }

  #page-tools .tool-backtest .backtest-controls{
    padding:8px!important;
  }

  

  #page-tools .tool-universe>.tool-body{
    padding:8px!important;
  }
}




/* ==========================================================================
   MATERIAL 3 PRESENTATION LAYER — Ponytail-safe, presentation only
   Contract:
   - one existing DOM
   - no component/layout rewrites
   - semantic M3 roles mapped onto existing dashboard tokens
   - no effect on Modern or Neo selectors
   - existing breakpoints and reduced-motion contract remain authoritative
   ========================================================================== */

/* ---------- M3.01 Semantic theme tokens ---------------------------------- */
html[data-style="material3"]{
  --m3-primary:#006c4c;
  --m3-on-primary:#ffffff;
  --m3-primary-container:#8af8c9;
  --m3-on-primary-container:#002117;

  --m3-secondary:#4d6359;
  --m3-on-secondary:#ffffff;
  --m3-secondary-container:#cee9dc;
  --m3-on-secondary-container:#092018;

  --m3-tertiary:#3d6374;
  --m3-on-tertiary:#ffffff;
  --m3-tertiary-container:#c1e8fa;
  --m3-on-tertiary-container:#001f2a;

  --m3-error:#ba1a1a;
  --m3-on-error:#ffffff;
  --m3-error-container:#ffdad6;
  --m3-on-error-container:#410002;

  --m3-background:#fafdf9;
  --m3-on-background:#191c1a;
  --m3-surface:#fafdf9;
  --m3-on-surface:#191c1a;
  --m3-surface-variant:#dce5df;
  --m3-on-surface-variant:#404944;
  --m3-outline:#707974;
  --m3-outline-variant:#c0c9c3;

  --m3-surface-container-lowest:#ffffff;
  --m3-surface-container-low:#f3f6f3;
  --m3-surface-container:#edefed;
  --m3-surface-container-high:#e7eae8;
  --m3-surface-container-highest:#e1e4e2;

  --m3-inverse-surface:#2e312f;
  --m3-inverse-on-surface:#eff1ee;
  --m3-inverse-primary:#6cdbad;

  --m3-radius-xs:4px;
  --m3-radius-sm:8px;
  --m3-radius-md:12px;
  --m3-radius-lg:16px;
  --m3-radius-xl:28px;
  --m3-radius-full:999px;

  --m3-elevation-0:none;
  --m3-elevation-1:0 1px 2px rgba(25,28,26,.10),0 1px 3px rgba(25,28,26,.08);
  --m3-elevation-2:0 2px 6px rgba(25,28,26,.12),0 1px 2px rgba(25,28,26,.08);
  --m3-elevation-3:0 4px 10px rgba(25,28,26,.14),0 2px 3px rgba(25,28,26,.10);

  --m3-state-hover:rgba(0,108,76,.08);
  --m3-state-focus:rgba(0,108,76,.12);
  --m3-state-pressed:rgba(0,108,76,.12);

  --surface:var(--m3-surface);
  --surface-2:var(--m3-surface-container);
  --surface-3:var(--m3-surface-container-high);
  --bg:var(--m3-background);
  --text:var(--m3-on-surface);
  --text-soft:var(--m3-on-surface-variant);
  --muted:var(--m3-on-surface-variant);
  --line:var(--m3-outline-variant);
  --line-strong:var(--m3-outline);
  --accent:var(--m3-primary);
  --accent-strong:var(--m3-primary);
  --accent-fill:var(--m3-primary);
  --on-accent:var(--m3-on-primary);
  --accent-soft:var(--m3-primary-container);
  --accent-softer:rgba(0,108,76,.06);
  --positive:#146c43;
  --positive-soft:#d8f3e5;
  --negative:#ba1a1a;
  --negative-soft:#ffdad6;
  --warning:#7b5800;
  --warning-soft:#ffdf9e;
  --border-w:1px;
  --radius:var(--m3-radius-lg);
  --radius-sm:var(--m3-radius-sm);
  --radius-xs:var(--m3-radius-xs);
  --shadow:var(--m3-elevation-2);
  --shadow-soft:var(--m3-elevation-1);

  --m3-body-large:16px;
  --m3-body-medium:14px;
  --m3-body-small:12px;
  --m3-label-large:14px;
  --m3-label-medium:12px;
  --m3-title-large:22px;
  --m3-title-medium:16px;
  --m3-headline-small:24px;
  --m3-headline-large:32px;
}

html[data-theme="dark"][data-style="material3"]{
  --m3-primary:#6cdbad;
  --m3-on-primary:#00382a;
  --m3-primary-container:#00513b;
  --m3-on-primary-container:#8af8c9;

  --m3-secondary:#b2ccbf;
  --m3-on-secondary:#1d352b;
  --m3-secondary-container:#344c42;
  --m3-on-secondary-container:#cee9dc;

  --m3-tertiary:#a5ccdd;
  --m3-on-tertiary:#063544;
  --m3-tertiary-container:#244c5a;
  --m3-on-tertiary-container:#c1e8fa;

  --m3-error:#ffb4ab;
  --m3-on-error:#690005;
  --m3-error-container:#93000a;
  --m3-on-error-container:#ffdad6;

  --m3-background:#111412;
  --m3-on-background:#e1e4e1;
  --m3-surface:#111412;
  --m3-on-surface:#e1e4e1;
  --m3-surface-variant:#404944;
  --m3-on-surface-variant:#c0c9c3;
  --m3-outline:#8a938d;
  --m3-outline-variant:#404944;

  --m3-surface-container-lowest:#0c0f0d;
  --m3-surface-container-low:#191c1a;
  --m3-surface-container:#1d201e;
  --m3-surface-container-high:#272b28;
  --m3-surface-container-highest:#323633;

  --m3-inverse-surface:#e1e4e1;
  --m3-inverse-on-surface:#2e312f;
  --m3-inverse-primary:#006c4c;

  --m3-elevation-1:0 1px 2px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.20);
  --m3-elevation-2:0 2px 6px rgba(0,0,0,.30),0 1px 2px rgba(0,0,0,.22);
  --m3-elevation-3:0 4px 10px rgba(0,0,0,.34),0 2px 3px rgba(0,0,0,.24);

  --m3-state-hover:rgba(108,219,173,.08);
  --m3-state-focus:rgba(108,219,173,.12);
  --m3-state-pressed:rgba(108,219,173,.12);

  --positive:#72dda7;
  --positive-soft:#173b2b;
  --negative:#ffb4ab;
  --negative-soft:#5c0b0b;
  --warning:#e8bd5c;
  --warning-soft:#4b3a05;
  --accent-softer:rgba(108,219,173,.07);
}

/* ---------- M3.02 Accent schemes ----------------------------------------- */
html[data-style="material3"][data-accent="indigo"]{
  --m3-primary:#4f46e5;
  --m3-on-primary:#ffffff;
  --m3-primary-container:#e0e0ff;
  --m3-on-primary-container:#17145c;
  --m3-secondary:#5d5d72;
  --m3-secondary-container:#e4e1f9;
  --m3-on-secondary-container:#1a1a2e;
  --m3-state-hover:rgba(79,70,229,.08);
  --m3-state-focus:rgba(79,70,229,.12);
  --m3-state-pressed:rgba(79,70,229,.12);
}
html[data-style="material3"][data-accent="amber"]{
  --m3-primary:#8a5000;
  --m3-on-primary:#ffffff;
  --m3-primary-container:#ffddb0;
  --m3-on-primary-container:#2c1700;
  --m3-secondary:#735943;
  --m3-secondary-container:#ffddc2;
  --m3-on-secondary-container:#29180d;
  --m3-state-hover:rgba(138,80,0,.08);
  --m3-state-focus:rgba(138,80,0,.12);
  --m3-state-pressed:rgba(138,80,0,.12);
}
html[data-style="material3"][data-accent="rose"]{
  --m3-primary:#a61b46;
  --m3-on-primary:#ffffff;
  --m3-primary-container:#ffd9e2;
  --m3-on-primary-container:#3f0017;
  --m3-secondary:#765662;
  --m3-secondary-container:#ffd9e3;
  --m3-on-secondary-container:#2c151d;
  --m3-state-hover:rgba(166,27,70,.08);
  --m3-state-focus:rgba(166,27,70,.12);
  --m3-state-pressed:rgba(166,27,70,.12);
}
html[data-style="material3"][data-accent="cyan"]{
  --m3-primary:#006874;
  --m3-on-primary:#ffffff;
  --m3-primary-container:#9eeffd;
  --m3-on-primary-container:#001f24;
  --m3-secondary:#4a6267;
  --m3-secondary-container:#cde7ec;
  --m3-on-secondary-container:#051f23;
  --m3-state-hover:rgba(0,104,116,.08);
  --m3-state-focus:rgba(0,104,116,.12);
  --m3-state-pressed:rgba(0,104,116,.12);
}

html[data-theme="dark"][data-style="material3"][data-accent="indigo"]{
  --m3-primary:#bec2ff;
  --m3-on-primary:#29277a;
  --m3-primary-container:#3f3f90;
  --m3-on-primary-container:#e0e0ff;
}
html[data-theme="dark"][data-style="material3"][data-accent="amber"]{
  --m3-primary:#ffb95c;
  --m3-on-primary:#472a00;
  --m3-primary-container:#673e00;
  --m3-on-primary-container:#ffddb0;
}
html[data-theme="dark"][data-style="material3"][data-accent="rose"]{
  --m3-primary:#ffb0c5;
  --m3-on-primary:#65002a;
  --m3-primary-container:#840037;
  --m3-on-primary-container:#ffd9e2;
}
html[data-theme="dark"][data-style="material3"][data-accent="cyan"]{
  --m3-primary:#83e6f4;
  --m3-on-primary:#00363d;
  --m3-primary-container:#004f58;
  --m3-on-primary-container:#9eeffd;
}
html[data-theme="dark"][data-style="material3"]{
  --accent:var(--m3-primary);
  --accent-strong:var(--m3-primary);
  --accent-fill:var(--m3-primary);
  --on-accent:var(--m3-on-primary);
  --accent-soft:var(--m3-primary-container);
}

/* ---------- M3.03 Shell / navigation ------------------------------------- */
html[data-style="material3"] body{
  background:var(--m3-background);
  color:var(--m3-on-background);
  font-family:var(--font);
  transition:background .2s ease,color .2s ease;
}
html[data-style="material3"] .topbar{
  background:var(--m3-surface-container);
  border:1px solid var(--m3-outline-variant);
  border-radius:var(--m3-radius-lg);
  box-shadow:var(--m3-elevation-1);
}
html[data-style="material3"] .desktop-nav{
  background:var(--m3-surface-container);
  border:1px solid var(--m3-outline-variant);
  border-radius:var(--m3-radius-lg);
  box-shadow:var(--m3-elevation-1);
}
html[data-style="material3"] .nav-button{
  border:0;
  border-radius:var(--m3-radius-full);
  color:var(--m3-on-surface-variant);
  background:transparent;
  box-shadow:none;
  min-height:40px;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
html[data-style="material3"] .nav-button:hover{
  background:var(--m3-state-hover);
  color:var(--m3-on-surface);
}
html[data-style="material3"] .nav-button.active{
  background:var(--m3-primary-container);
  color:var(--m3-on-primary-container);
  box-shadow:none;
}
html[data-style="material3"] .mobile-nav{
  background:color-mix(in srgb,var(--m3-surface-container) 94%,transparent);
  border-top:1px solid var(--m3-outline-variant);
  box-shadow:0 -2px 8px rgba(0,0,0,.08);
}

/* ---------- M3.04 Typography --------------------------------------------- */
html[data-style="material3"] .page-heading h1{
  font-size:var(--m3-headline-large);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:600;
}
html[data-style="material3"] .section-heading h2,
html[data-style="material3"] .workspace-heading h2{
  font-size:var(--m3-title-large);
  line-height:1.25;
  font-weight:600;
}
html[data-style="material3"] .eyebrow{
  color:var(--m3-on-surface-variant);
  letter-spacing:.08em;
  font-weight:600;
}
html[data-style="material3"] .section-note,
html[data-style="material3"] .page-heading p{
  color:var(--m3-on-surface-variant);
}

/* ---------- M3.05 Surface / card language -------------------------------- */
html[data-style="material3"] .metric-card,
html[data-style="material3"] .chart-card,
html[data-style="material3"] .signal-card,
html[data-style="material3"] .trade-card,
html[data-style="material3"] .history-workspace,
html[data-style="material3"] .signals-workspace,
html[data-style="material3"] .calendar-workspace,
html[data-style="material3"] .hero,
html[data-style="material3"] .release-modal-card{
  background:var(--m3-surface-container-low);
  color:var(--m3-on-surface);
  border:1px solid var(--m3-outline-variant);
  border-radius:var(--m3-radius-lg);
  box-shadow:var(--m3-elevation-1);
}
html[data-style="material3"] .metric-card:hover,
html[data-style="material3"] .chart-card:hover,
html[data-style="material3"] .signal-card:hover,
html[data-style="material3"] .trade-card:hover{
  box-shadow:var(--m3-elevation-2);
  transform:none;
}
html[data-style="material3"] .hero{
  background:var(--m3-surface-container);
}
html[data-style="material3"] .section-block{
  background:transparent;
}

/* ---------- M3.06 Buttons / controls / chips ------------------------------ */
html[data-style="material3"] .primary-button,
html[data-style="material3"] .secondary-button,
html[data-style="material3"] .text-button,
html[data-style="material3"] .icon-button,
html[data-style="material3"] .chip-option{
  box-shadow:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
html[data-style="material3"] .primary-button{
  min-height:40px;
  padding:0 20px;
  border:0;
  border-radius:var(--m3-radius-full);
  background:var(--m3-primary);
  color:var(--m3-on-primary);
  font-weight:600;
}
html[data-style="material3"] .primary-button:hover{
  background:color-mix(in srgb,var(--m3-primary) 92%,var(--m3-on-surface));
  box-shadow:var(--m3-elevation-1);
}
html[data-style="material3"] .primary-button:active{box-shadow:none;transform:none}
html[data-style="material3"] .secondary-button{
  min-height:40px;
  padding:0 18px;
  border:1px solid var(--m3-outline);
  border-radius:var(--m3-radius-full);
  background:transparent;
  color:var(--m3-primary);
  font-weight:600;
}
html[data-style="material3"] .secondary-button:hover{
  background:var(--m3-state-hover);
  border-color:var(--m3-primary);
}
html[data-style="material3"] .text-button{
  min-height:40px;
  padding:0 12px;
  border:0;
  border-radius:var(--m3-radius-full);
  background:transparent;
  color:var(--m3-primary);
  font-weight:600;
}
html[data-style="material3"] .text-button:hover{background:var(--m3-state-hover)}
html[data-style="material3"] .icon-button{
  width:40px;
  height:40px;
  border:0;
  border-radius:var(--m3-radius-full);
  background:transparent;
  color:var(--m3-on-surface-variant);
}
html[data-style="material3"] .icon-button:hover{background:var(--m3-state-hover);color:var(--m3-on-surface)}
html[data-style="material3"] .chip-option{
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--m3-outline);
  border-radius:var(--m3-radius-full);
  background:transparent;
  color:var(--m3-on-surface-variant);
  font-weight:500;
}
html[data-style="material3"] .chip-option:hover{background:var(--m3-state-hover)}
html[data-style="material3"] .chip-option.active{
  border-color:var(--m3-primary);
  background:var(--m3-primary-container);
  color:var(--m3-on-primary-container);
}
html[data-style="material3"] .chip-option:active{background:var(--m3-state-pressed)}
html[data-style="material3"] button:focus-visible,
html[data-style="material3"] a:focus-visible,
html[data-style="material3"] input:focus-visible,
html[data-style="material3"] select:focus-visible{
  outline:2px solid var(--m3-primary);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--m3-state-focus);
}

/* ---------- M3.07 Inputs / data surfaces --------------------------------- */
html[data-style="material3"] input,
html[data-style="material3"] select{
  min-height:40px;
  border:1px solid var(--m3-outline);
  border-radius:var(--m3-radius-sm);
  background:var(--m3-surface-container-lowest);
  color:var(--m3-on-surface);
  padding:0 12px;
}
html[data-style="material3"] input:hover,
html[data-style="material3"] select:hover{
  border-color:var(--m3-on-surface);
}
html[data-style="material3"] .workspace-heading,
html[data-style="material3"] .chart-head,
html[data-style="material3"] .calendar-agenda-bar{
  color:var(--m3-on-surface);
}
html[data-style="material3"] .empty-state{
  color:var(--m3-on-surface-variant);
}

/* ---------- M3.08 Tools — same M3 component language, geometry frozen ---- */
html[data-style="material3"] #page-tools .tool-card,
html[data-style="material3"] #page-tools .tools-appearance{
  background:var(--m3-surface-container-low);
  border:1px solid var(--m3-outline-variant);
  border-radius:var(--m3-radius-lg);
  box-shadow:var(--m3-elevation-1);
}
html[data-style="material3"] #page-tools .tool-card>.section-heading,
html[data-style="material3"] #page-tools .tools-appearance>.section-heading{
  background:var(--m3-surface-container);
  border-bottom:1px solid var(--m3-outline-variant);
}
html[data-style="material3"] #page-tools .tool-card>.tool-body{
  background:var(--m3-surface-container-low);
}

html[data-style="material3"] #page-tools .account-grid,
html[data-style="material3"] #page-tools .rule-list,
html[data-style="material3"] #page-tools .universe-grid,
html[data-style="material3"] #page-tools .tool-backtest .backtest-controls,
html[data-style="material3"] #page-tools .tool-backtest .backtest-status{
  background:var(--m3-surface-container-lowest);
  border-color:var(--m3-outline-variant);
  box-shadow:none;
}
html[data-style="material3"] #page-tools .tools-appearance>.settings-row{
  background:var(--m3-surface-container-lowest)!important;
  border-color:var(--m3-outline-variant)!important;
}
html[data-style="material3"] #page-tools .asset-category-label{
  background:var(--m3-surface-container);
  color:var(--m3-on-surface);
}
html[data-style="material3"] #page-tools .asset-category-items>span{
  border-color:var(--m3-outline-variant)!important;
}

/* ---------- M3.09 Semantic states ---------------------------------------- */
html[data-style="material3"] .positive,
html[data-style="material3"] .buy,
html[data-style="material3"] .fresh{
  color:var(--positive);
}
html[data-style="material3"] .negative,
html[data-style="material3"] .sell{
  color:var(--negative);
}
html[data-style="material3"] .warning,
html[data-style="material3"] .stale{
  color:var(--warning);
}
html[data-style="material3"] .status-badge{
  border-color:var(--m3-outline-variant);
  background:var(--m3-surface-container);
  color:var(--m3-on-surface-variant);
}

/* ---------- M3.10 Modal -------------------------------------------------- */
html[data-style="material3"] .release-modal{
  background:rgba(0,0,0,.42);
}
html[data-style="material3"] .release-modal-card{
  max-width:560px;
  box-shadow:var(--m3-elevation-3);
}

/* ---------- M3.11 Reduced motion ---------------------------------------- */
html[data-style="material3"][data-reduce-motion="true"] *,
html[data-style="material3"][data-reduce-motion="true"] *::before,
html[data-style="material3"][data-reduce-motion="true"] *::after{
  transition:none!important;
  animation:none!important;
  scroll-behavior:auto!important;
}

/* Keep the existing responsive geometry; M3 changes presentation only. */