/* ============================================================
   METRO NEON — dark-first admin theme
   Variation 1B: Bento Dense dashboard
   Drop into wwwroot/css/ and link from _Layout.cshtml
   ============================================================ */

:root {
  /* Backgrounds — near-black with cool blue undertone */
  --bg-primary:   #0a0a0f;
  --bg-secondary: #12121a;
  --bg-panel:     #1a1a2e;
  --bg-card:      #191c23;
  --border:       #2a2a4a;

  /* Text */
  --text-primary:   #e0e0e0;
  --text-secondary: #8a8aa0;

  /* Neon accent palette — the signature colors. Do NOT mute in light mode. */
  --neon-green:  #00ff87;   /* primary: active states, positive values, brand */
  --neon-blue:   #00d4ff;   /* secondary: links, hover, line/bar charts */
  --neon-pink:   #ff00e5;   /* tertiary: area/series highlights */
  --neon-yellow: #ffe600;   /* warning / degraded */
  --neon-orange: #ff6b00;   /* secondary warning */
  --neon-red:    #ff1744;    /* negative: losses, errors, delete, offline */

  /* Layout dims */
  --topbar-height: 50px;
}

[data-theme="light"] {
  --bg-primary:   #f0f2f5;
  --bg-secondary: #ffffff;
  --bg-panel:     #e8eaf0;
  --bg-card:      #ffffff;
  --border:       #d0d5dd;
  --text-primary:   #1a1a2e;
  --text-secondary: #667085;
  /* neon vars unchanged EXCEPT green & yellow darkened for readable contrast on light bg */
  --neon-green:  #50C878;
  --neon-yellow: #8f7500;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  overflow:hidden;          /* body itself never scrolls */
  height:100vh;
}

a { color:var(--neon-blue); text-decoration:none; }
a:hover { color:var(--neon-green); }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- Topbar ---------- */
.topbar {
  position:fixed; top:0; left:0; right:0;
  height:var(--topbar-height);
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:100;
}
.topbar-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark {
  width:14px; height:14px; background:var(--neon-green);
  transform:rotate(45deg); border-radius:2px;
  box-shadow:0 0 8px var(--neon-green);
}
.brand-name {
  font-size:18px; font-weight:700; letter-spacing:2px; color:var(--neon-green);
}
.topbar-actions { display:flex; align-items:center; gap:10px; }
.search {
  background:var(--bg-primary); border:1px solid var(--border); border-radius:4px;
  color:var(--text-primary); padding:6px 10px; font-size:12px; width:210px; outline:none;
}
.icon-btn {
  background:transparent; border:1px solid var(--border); color:var(--text-primary);
  padding:5px 11px; border-radius:4px; cursor:pointer; font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
.icon-btn:hover { border-color:var(--neon-blue); box-shadow:0 0 8px rgba(0,212,255,.3); }
/* ---------- Top Navigation ---------- */
.topnav { display:flex; align-items:center; gap:2px; }
.topnav-menu { position:relative; }
.topnav-menu > button {
  background:none; border:none; color:var(--text-secondary);
  font:600 15px/1 'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  padding:6px 12px; cursor:pointer; letter-spacing:.5px; border-radius:4px;
}
.topnav-menu > button:hover,
.topnav-menu:hover > button { color:var(--text-primary); background:var(--bg-primary); }
.topnav-dropdown {
  display:none; position:absolute; top:100%; left:0; min-width:180px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.4);
  padding:4px 0; z-index:110;
}
.topnav-menu::after {
  content:''; position:absolute; top:100%; left:0; right:0; height:8px;
}
.topnav-menu:hover .topnav-dropdown { display:block; }
.topnav-item {
  display:block; padding:8px 16px; color:var(--text-secondary);
  font-size:14px; text-decoration:none; cursor:pointer;
}
.topnav-item:hover { color:var(--text-primary); background:var(--bg-primary); }
.topnav-item.active { color:var(--neon-green); }
.topnav-divider { height:1px; background:var(--border); margin:4px 0; }
.topnav-logout {
  width:100%; text-align:left; background:none; border:none;
  font:inherit; color:var(--text-secondary); cursor:pointer;
}
.topnav-logout:hover { color:var(--neon-red); }
.theme-toggle {
  background:none; border:1px solid var(--border); border-radius:4px;
  color:var(--text-secondary); padding:4px 8px; cursor:pointer; font-size:14px;
}
.theme-toggle:hover { color:var(--text-primary); border-color:var(--neon-blue); }

/* ---------- Main ---------- */
.main {
  position:fixed; top:var(--topbar-height); left:0;
  right:0; bottom:0; overflow-y:auto; padding:16px;
}

.page-title { font-size:24px; font-weight:700; margin-bottom:14px; }
.page-title small { font-size:12px; color:var(--text-secondary); font-weight:400; }

/* ---------- Bento grid (1B) ---------- */
.bento { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tile {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:8px; padding:14px;
}
.tile.span-2 { grid-column:span 2; }
.tile.span-4 { grid-column:span 4; }
.tile-title { font-size:14px; font-weight:600; margin-bottom:8px; }

/* KPI stat tile */
.stat { padding:12px; }
.stat .label { font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.stat .value { font-size:22px; font-weight:700; margin-top:4px; }
.stat .delta { font-size:11px; }
.up   { color:var(--neon-green); }
.down { color:var(--neon-red); }

.chart-box { position:relative; height:150px; }
.chart-box.center-num { display:flex; align-items:center; justify-content:center; }
.donut-num {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; font-size:22px; font-weight:700; color:var(--neon-green);
}

/* ---------- Data table ---------- */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th {
  text-align:right; padding:6px; font-size:11px; text-transform:uppercase;
  color:var(--text-secondary); border-bottom:1px solid var(--border);
  cursor:pointer; user-select:none; white-space:nowrap;
}
.data-table th.text, .data-table td.text { text-align:left; }
.data-table td { padding:6px; text-align:right; border-bottom:1px solid var(--border); }
.data-table tbody tr:hover { background:rgba(0,212,255,.05); }
.mono { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; }
.status { display:inline-flex; align-items:center; gap:5px; }
.status .sdot { width:6px; height:6px; border-radius:50%; }
.status.online   { color:var(--neon-green);  } .status.online   .sdot { background:var(--neon-green);  box-shadow:0 0 5px var(--neon-green);  animation:pulse 2.4s infinite; }
.status.degraded { color:var(--neon-yellow); } .status.degraded .sdot { background:var(--neon-yellow); box-shadow:0 0 5px var(--neon-yellow); }
.status.down     { color:var(--neon-red);    } .status.down     .sdot { background:var(--neon-red);    box-shadow:0 0 5px var(--neon-red);    }
.cpu-ok { color:var(--neon-green); } .cpu-warn { color:var(--neon-yellow); } .cpu-crit { color:var(--neon-red); }

/* ============================================================
   SESSION SELECT — add-on for metro-neon.css
   Append to the end of wwwroot/css/metro-neon.css.
   Uses only existing Metro Neon tokens. No new colors.
   ============================================================ */

/* Ticker tape strip (sits above the bento grid) */
.tape {
  height:30px; display:flex; align-items:center; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
}
.tape-track { display:flex; white-space:nowrap; animation:tape 46s linear infinite; }
.tape-item {
  display:flex; align-items:baseline; gap:8px; padding:0 14px;
  border-right:1px solid var(--border);
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:12px;
}
.tape-item .sym { color:var(--text-secondary); letter-spacing:.5px; }
@keyframes tape { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce) { .tape-track { animation:none } }

/* Selectable session tile — a .tile the user can pick */
.choice { display:block; width:100%; text-align:left; padding:0; border:0; background:none;
          font:inherit; color:inherit; cursor:pointer; }
.choice:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.choice .tile { position:relative; transition:border-color .15s, box-shadow .15s; }
.choice .glow { position:absolute; inset:0; border-radius:8px; pointer-events:none;
                opacity:0; transition:opacity .15s; border:1px solid currentColor; }

.choice-live { color:var(--neon-green); }
.choice-live:hover .tile { border-color:var(--neon-green); }
.choice-live.is-selected .glow { opacity:1; box-shadow:0 0 12px rgba(0,255,135,.35), inset 0 0 24px rgba(0,255,135,.07); }

.choice-sim { color:var(--neon-blue); }
.choice-sim:hover .tile { border-color:var(--neon-blue); }
.choice-sim.is-selected .glow { opacity:1; box-shadow:0 0 12px rgba(0,212,255,.30), inset 0 0 24px rgba(0,212,255,.06); }

/* Session tile internals */
.mode-kicker { font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.mode-name   { margin-top:4px; font-size:22px; font-weight:700; color:currentColor; }
.choice-live .mode-name { text-shadow:0 0 12px rgba(0,255,135,.35); }
.choice-sim  .mode-name { text-shadow:0 0 12px rgba(0,212,255,.30); }
.mode-note   { margin-top:12px; padding-top:10px; border-top:1px solid var(--border);
               font-size:12px; color:var(--text-secondary); }

/* Three-up spec strip inside a tile */
.specs { margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.specs > div { border-left:2px solid var(--border); padding-left:9px; }
.specs > div.key { border-left-color:currentColor; }
.specs .k { font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.specs .v { margin-top:3px; font-size:14px; font-weight:700;
            font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; }

/* Pill badge (ACTIVO / DEMO) */
.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
        border:1px solid var(--border); border-radius:4px;
        font-size:11px; letter-spacing:.5px; color:var(--text-secondary); }
.pill-live { border-color:var(--neon-green); color:var(--neon-green); }
.pill-live .sdot { width:6px; height:6px; border-radius:50%; background:var(--neon-green);
                   box-shadow:0 0 5px var(--neon-green); animation:pulse 2.4s infinite; }

/* Action bar under the grid */
.actionbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
             background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px 14px; }
.actionbar .note { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
                   font-size:10px; letter-spacing:.5px; color:var(--text-secondary); }
.actionbar .note.warn { color:var(--neon-yellow); }
.actionbar .note.info { color:var(--neon-blue); }

.btn { background:transparent; border:1px solid var(--border); color:var(--text-secondary);
       padding:7px 16px; border-radius:4px; font-size:13px; font-weight:600; letter-spacing:.5px;
       cursor:pointer; transition:box-shadow .15s, border-color .15s, filter .15s; }
.btn:hover { filter:brightness(1.15); }
.btn:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.btn-live { border-color:var(--neon-green); background:rgba(0,255,135,.10);
            color:var(--neon-green); box-shadow:0 0 10px rgba(0,255,135,.35); }
.btn-sim  { border-color:var(--neon-blue);  background:rgba(0,212,255,.10);
            color:var(--neon-blue);  box-shadow:0 0 10px rgba(0,212,255,.30); }
.btn-ghost:hover { border-color:var(--neon-blue); color:var(--text-primary); }

/* Footer build line */
.buildline { display:flex; align-items:center; justify-content:space-between;
             font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
             font-size:10px; letter-spacing:.5px; color:var(--text-secondary); padding:2px 2px 6px; }

/* Topbar session/feed status (right side of the topbar) */
.feed { display:flex; align-items:center; gap:6px; padding:5px 9px;
        border:1px solid var(--border); border-radius:4px; font-size:10px;
        letter-spacing:.5px; color:var(--neon-green); }
.feed .sdot { width:6px; height:6px; border-radius:50%; background:var(--neon-green);
              box-shadow:0 0 5px var(--neon-green); animation:pulse 2.4s infinite; }
.feed-clock { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
              font-size:11px; color:var(--text-secondary); }
.feed-clock b { color:var(--text-primary); font-weight:400; }

@media (max-width: 1100px) {
  .bento { grid-template-columns:repeat(2,1fr); }
  .tile.span-4 { grid-column:span 2; }
}
/* ============================================================
   STOCKS MULTI VIEW — add-on for metro-neon.css
   Append to the end of wwwroot/css/metro-neon.css.
   Uses only existing Metro Neon tokens. No new colors.
   ============================================================ */

/* Page head */
.mv-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.mv-title { font-size:20px; font-weight:700; letter-spacing:1.5px; color:var(--neon-green);
            text-shadow:0 0 12px rgba(0,255,135,.30); margin:0; }
.mv-sub { margin-top:3px; font-size:12px; color:var(--text-secondary); }

/* Two-pane layout: watchlist + chart */
.mv-grid { display:grid; grid-template-columns:348px minmax(0,1fr); gap:12px; align-items:stretch;
           height:calc(100vh - var(--topbar-height) - 90px); }
@media (max-width:1000px) { .mv-grid { grid-template-columns:1fr; } }

/* ---------- Watchlist ---------- */
.mv-aside { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
            padding:12px; display:flex; flex-direction:column; gap:10px; min-height:0; overflow-y:auto; }
.mv-profile { display:flex; gap:6px; }
.mv-profile select { flex:1; min-width:0; background:var(--bg-primary); border:1px solid var(--border);
                     border-radius:4px; color:var(--text-primary); padding:6px 8px; font-size:13px; outline:none; }
.mv-profile select:focus { border-color:var(--neon-blue); }
.mv-iconbtn { width:28px; background:transparent; border:1px solid var(--border); border-radius:4px;
              color:var(--text-secondary); cursor:pointer; font-size:12px; }
.mv-iconbtn:hover { border-color:var(--neon-blue); color:var(--text-primary); }
.mv-iconbtn.danger:hover { border-color:var(--neon-red); color:var(--neon-red); }

.mv-add { display:flex; gap:6px; }
.mv-add input { flex:1; min-width:0; background:var(--bg-primary); border:1px solid var(--border);
                border-radius:4px; color:var(--text-primary); padding:7px 9px; font-size:13px; outline:none;
                font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; }
.mv-add input:focus { border-color:var(--neon-blue); box-shadow:0 0 8px rgba(0,212,255,.25); }
.mv-add button { border:1px solid var(--neon-green); background:rgba(0,255,135,.10); color:var(--neon-green);
                 box-shadow:0 0 10px rgba(0,255,135,.28); border-radius:4px; padding:7px 14px;
                 font-size:12px; font-weight:700; letter-spacing:.5px; cursor:pointer; }
.mv-add button:hover { filter:brightness(1.15); }

.mv-listmeta { display:flex; align-items:center; justify-content:space-between; padding:0 2px;
               font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.mv-listmeta .keys { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; }

.mv-list { border:1px solid var(--border); border-radius:6px; overflow:hidden; outline:none; }
.mv-list:focus { border-color:var(--neon-blue); }
.mv-row, .mv-listhead {
  display:grid; grid-template-columns:minmax(0,1fr) 78px 64px 16px; column-gap:8px; align-items:center;
}
.mv-listhead { padding:7px 16px 7px 8px; background:var(--bg-secondary); border-bottom:1px solid var(--border);
               font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.mv-listhead span:not(:first-child) { text-align:right; }
.mv-scroll { max-height:560px; overflow-y:auto; scrollbar-gutter:stable; }
.mv-row { position:relative; padding:6px 8px; border-bottom:1px solid rgba(42,42,74,.55); cursor:pointer;
          font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:12px; }
.mv-row:hover { background:rgba(0,212,255,.05); }
.mv-row .flag { position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; }
.mv-row.outlier-up .flag { background:rgba(0,255,135,.55); }
.mv-row.outlier-down .flag { background:rgba(255,23,68,.55); }
.mv-row .sym { font-weight:700; letter-spacing:.5px; color:var(--text-primary); }
.mv-row .px, .mv-row .chg { text-align:right; }
.mv-row .px { color:var(--text-primary); }
.mv-row .kill { text-align:right; color:var(--text-secondary); }
.mv-row .kill:hover { color:var(--neon-red); }
.mv-row.is-active { background:rgba(0,255,135,.07); }
.mv-row.is-active .flag { background:var(--neon-green); }
.mv-row.is-active .sym { color:var(--neon-green); }

/* ---------- Chart panel ---------- */
.mv-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px;
            display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; }

/* Instrument bar */
.mv-instrument { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mv-instrument > .left { display:flex; align-items:flex-start; flex-wrap:wrap; gap:18px; row-gap:10px; min-width:0; }
.mv-idblock { flex:0 0 auto; }
.mv-idline { display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.mv-sym { font-size:22px; font-weight:700; letter-spacing:1px; color:var(--neon-green); }
.mv-name { font-size:12px; color:var(--text-secondary); }
.mv-session { padding:2px 6px; border:1px solid var(--border); border-radius:4px; font-size:10px;
              letter-spacing:.5px; color:var(--neon-green); }
.mv-session.closed { color:var(--text-secondary); }
.mv-pxline { margin-top:5px; display:flex; align-items:baseline; gap:8px; white-space:nowrap;
             font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; }
.mv-px { font-size:24px; font-weight:700; }
.mv-delta { font-size:13px; }

.mv-meta { display:flex; gap:16px; flex:0 0 auto; min-width:236px;
           padding-left:18px; border-left:1px solid var(--border); }
.mv-meta .k { font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.mv-range { margin-top:6px; display:flex; align-items:center; gap:7px;
            font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:11px; color:var(--text-secondary); }
.mv-rangebar { position:relative; width:118px; height:3px; background:var(--border); border-radius:2px; }
.mv-rangebar i { position:absolute; top:-3px; width:2px; height:9px; background:var(--neon-green);
                 box-shadow:0 0 6px var(--neon-green); }
.mv-vol { margin-top:5px; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
          font-size:13px; font-weight:700; }
.mv-vol small { font-size:11px; font-weight:400; }

/* Chart toolbar */
.mv-tools { display:flex; align-items:center; gap:6px; }
.mv-tool { min-width:30px; height:26px; padding:0 8px; background:transparent; border:1px solid var(--border);
           border-radius:4px; color:var(--text-secondary); font-size:11px; font-weight:700; letter-spacing:.5px;
           font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; cursor:pointer; }
.mv-tool:hover { border-color:var(--neon-blue); }
.mv-tool.is-on { background:rgba(0,212,255,.10); border-color:var(--neon-blue); color:var(--neon-blue); }

/* OHLC / RSI readout — grid so cells can never overflow */
.mv-readout { display:grid; grid-template-columns:1.5fr repeat(6,minmax(0,1fr)) auto; column-gap:8px;
              align-items:center; height:25px; box-sizing:border-box; padding:5px 8px;
              background:var(--bg-secondary); border:1px solid var(--border); border-radius:4px;
              font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:11.5px; letter-spacing:.3px; }
.mv-readout span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); }
.mv-readout b { font-weight:400; color:var(--text-primary); }

/* Canvas stack + crosshair */
.mv-chart { position:relative; cursor:crosshair; flex:1; display:flex; flex-direction:column; min-height:0; }
.mv-chart canvas { display:block; width:100%; }
.mv-price { flex:1; min-height:200px; }
.mv-rsiwrap { position:relative; margin-top:6px; border-top:1px solid var(--border); padding-top:5px; }
.mv-rsi { height:112px; }
.mv-rsilabel { position:absolute; top:9px; left:6px; z-index:2; display:flex; align-items:center; gap:8px;
               pointer-events:none; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:10px; }
.mv-rsilabel .tag { padding:1px 5px; border:1px solid var(--border); border-radius:3px;
                    background:rgba(10,10,15,.75); color:var(--neon-blue); letter-spacing:.5px; }
.mv-cross-x, .mv-cross-y, .mv-cross-tag { position:absolute; pointer-events:none; opacity:0; }
.mv-cross-x { top:0; bottom:0; width:1px; background:rgba(224,224,224,.35); }
.mv-cross-y { left:0; right:58px; height:1px; background:rgba(224,224,224,.35); }
.mv-cross-tag { right:0; width:56px; padding:1px 0; text-align:center; transform:translateY(-50%);
                background:var(--border); color:var(--text-primary); border-radius:2px;
                font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:10px; }
.mv-chart.is-hover .mv-cross-x, .mv-chart.is-hover .mv-cross-y, .mv-chart.is-hover .mv-cross-tag { opacity:1; }

/* Footer controls */
.mv-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mv-ranges { display:flex; gap:6px; }
.mv-rangebtn { padding:5px 11px; background:transparent; border:1px solid var(--border); border-radius:4px;
               color:var(--text-secondary); font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
               font-size:12px; cursor:pointer; }
.mv-rangebtn:hover { border-color:var(--neon-blue); }
.mv-rangebtn.is-on { background:rgba(0,255,135,.10); border-color:var(--neon-green); color:var(--neon-green); }
.mv-interval { display:flex; align-items:center; gap:8px;
               font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:12px; color:var(--text-secondary); }
.mv-interval select { background:var(--bg-primary); border:1px solid var(--neon-blue); border-radius:4px;
                      color:var(--neon-blue); padding:4px 6px; font-size:12px; font-family:inherit; outline:none; }

.mv-feed { display:flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid var(--border);
           border-radius:4px; font-size:11px; letter-spacing:.5px; color:var(--neon-green); }
.mv-feed .sdot { width:6px; height:6px; border-radius:50%; background:var(--neon-green);
                 box-shadow:0 0 5px var(--neon-green); animation:pulse 2.4s infinite; }
/* ============================================================
   OPTION CHAIN — add-on for metro-neon.css
   Append to the end of wwwroot/css/metro-neon.css.
   Uses only existing Metro Neon tokens. No new colors.
   ============================================================ */

/* Three-panel shell: watchlist 25% / chain 50% / order ticket 25%.
   The minimums are what keep the fixed-width tables from being crushed —
   below ~1180px the page scrolls horizontally instead of clipping cells. */
.oc-grid {
  display:grid;
  grid-template-columns:minmax(336px,1fr) minmax(560px,2fr) minmax(280px,1fr);
  gap:12px; align-items:stretch; min-height:calc(100vh - 106px);
}
.oc-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
            padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0; }

/* ---------- Watchlist (same vocabulary as the multi-view page) ---------- */
.oc-list { flex:1; min-height:0; display:flex; flex-direction:column;
           border:1px solid var(--border); border-radius:6px; overflow:hidden; outline:none; }
.oc-list:focus { border-color:var(--neon-blue); }
.oc-list .scroll { flex:1; min-height:0; overflow-y:auto; scrollbar-gutter:stable; }
.oc-row, .oc-listhead { display:grid; grid-template-columns:52px 56px 52px 56px 42px 16px; column-gap:4px; align-items:center; }
.oc-listhead { padding:7px 16px 7px 8px; background:var(--bg-secondary); border-bottom:1px solid var(--border);
               font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.oc-listhead span:not(:first-child) { text-align:right; }
.oc-row { position:relative; padding:6px 8px; border-bottom:1px solid rgba(42,42,74,.55); cursor:pointer;
          font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:12px; }
.oc-row:hover { background:rgba(0,212,255,.05); }
.oc-row .flag { position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; }
.oc-row.outlier-up .flag { background:rgba(0,255,135,.55); }
.oc-row.outlier-down .flag { background:rgba(255,23,68,.55); }
.oc-row .sym { font-weight:700; letter-spacing:.5px; color:var(--text-primary); }
.oc-row .px, .oc-row .chg, .oc-row .vol, .oc-row .kill { text-align:right; }
.oc-row .vol { color:var(--text-secondary); font-size:11px; }
.oc-row .kill { color:var(--text-secondary); }
.oc-row .kill:hover { color:var(--neon-red); }
.oc-row.is-active { background:rgba(0,255,135,.07); }
.oc-row.is-active .flag { background:var(--neon-green); }
.oc-row.is-active .sym { color:var(--neon-green); }

/* ---------- Chain ---------- */
.oc-chainhead { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.oc-spot { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:17px; font-weight:700; }
.oc-colchip { padding:3px 8px; border:1px solid var(--border); border-radius:3px;
              font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:11px;
              color:var(--text-secondary); cursor:pointer; }
.oc-colchip:hover { border-color:var(--neon-blue); color:var(--text-primary); }
.oc-colchip.is-on { border-color:var(--neon-blue); color:var(--neon-blue); background:rgba(0,212,255,.10); }

.oc-chain { overflow-x:auto; border:1px solid var(--border); border-radius:6px; }
.oc-chain > .inner { min-width:870px; }        /* = track sum + gaps + padding; keeps rows unclipped */

/* One grid definition shared by the column header and every strike row —
   fixed tracks in BOTH, or the two grids resolve differently and misalign.
   Last Vol OI IV Δ Bid Ask | Strike | Bid Ask Δ IV OI Vol Last  (15 cols) */
.oc-strikerow, .oc-colhead {
  display:grid;
  grid-template-columns:46px 40px 40px 42px 44px 58px 58px 58px 58px 58px 44px 42px 40px 40px 46px;
  column-gap:4px; align-items:center;
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
}
.oc-sidehead { display:grid;
  grid-template-columns:46px 40px 40px 42px 44px 58px 58px 58px 58px 58px 44px 42px 40px 40px 46px;
  column-gap:4px; padding:0 8px; background:var(--bg-secondary); border-bottom:1px solid var(--border); }
.oc-sidehead .calls, .oc-sidehead .puts { padding:5px 0; text-align:center; font-size:11px;
               letter-spacing:1.5px; text-transform:uppercase; }
.oc-sidehead .calls { grid-column:1/8; color:var(--neon-green); border-right:1px solid var(--border); }
.oc-sidehead .mid { grid-column:8; }
.oc-sidehead .puts { grid-column:9/16; color:var(--neon-blue); border-left:1px solid var(--border); }
.oc-colhead { padding:6px 8px; background:var(--bg-secondary); border-bottom:1px solid var(--border);
              font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.oc-colhead span { text-align:right; }
.oc-colhead .mid, .oc-colhead .quote { text-align:center; }
.oc-colhead .mid { color:var(--text-primary); }

/* Expiration accordion row */
.oc-exp { display:flex; align-items:center; gap:12px; padding:7px 8px; background:var(--bg-secondary);
          border-bottom:1px solid var(--border); cursor:pointer; font-size:12px; }
.oc-exp:hover { background:rgba(0,212,255,.05); }
.oc-exp.is-open { background:rgba(0,255,135,.06); }
.oc-exp .caret { width:10px; font-size:10px; color:var(--text-secondary); }
.oc-exp .dte { min-width:38px; text-align:center; padding:2px 6px; border:1px solid var(--border); border-radius:3px;
               font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:11px; color:var(--text-secondary); }
.oc-exp.is-open .dte { border-color:var(--neon-green); color:var(--neon-green); }
.oc-exp .dow { min-width:30px; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:11px; color:var(--text-secondary); }
.oc-exp .expdate { min-width:100px; }
.oc-exp .iv { margin-left:auto; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
              font-size:11px; color:var(--text-secondary); }

/* Scrollable strike container per expiration */
.oc-strikes-scroll { max-height:60vh; overflow-y:auto; }

/* Strike rows */
.oc-strikerow { padding:4px 8px; border-bottom:1px solid rgba(42,42,74,.4); font-size:11.5px; }
.oc-strikerow .cell { align-self:stretch; display:flex; align-items:center; justify-content:flex-end;
                      padding:0 3px; color:var(--text-secondary); }
.oc-strikerow .cell.value { color:var(--text-primary); }
/* moneyness is tinted PER SIDE — call cells below spot, put cells above it */
.oc-strikerow .cell.itm { background:rgba(42,42,74,.35); }
.oc-strikerow .strike { text-align:center; font-weight:700; color:var(--text-primary); }
.oc-strikerow .strike.atm { color:var(--neon-green); }

/* Bid = sell to open (red), Ask = buy to open (green) — both are buttons */
.oc-quote { height:20px; border-radius:3px; font-family:inherit; font-size:11.5px; cursor:pointer; }
.oc-bid { border:1px solid rgba(255,23,68,.35); background:rgba(255,23,68,.10); color:var(--neon-red); }
.oc-bid:hover { border-color:var(--neon-red); background:rgba(255,23,68,.18); }
.oc-ask { border:1px solid rgba(0,255,135,.35); background:rgba(0,255,135,.10); color:var(--neon-green); }
.oc-ask:hover { border-color:var(--neon-green); background:rgba(0,255,135,.18); }
.oc-bid.is-selected { border-color:var(--neon-red); background:rgba(255,23,68,.30); font-weight:700; }
.oc-ask.is-selected { border-color:var(--neon-green); background:rgba(0,255,135,.30); font-weight:700; }
.oc-quote:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

/* Spot divider between ITM and OTM halves */
.oc-spotdiv { position:relative; display:grid;
  grid-template-columns:46px 40px 40px 42px 44px 58px 58px 58px 58px 58px 44px 42px 40px 40px 46px;
  column-gap:4px; padding:0 8px; height:22px; align-items:center;
  border-bottom:1px solid rgba(42,42,74,.4); }
.oc-spotdiv .rule { position:absolute; left:8px; right:8px; height:1px;
  background:linear-gradient(90deg,transparent,var(--border) 20%,var(--border) 80%,transparent); }
.oc-spotdiv .chip { grid-column:8; position:relative; text-align:center; padding:2px 8px; background:var(--bg-primary);
  border:1px solid var(--neon-green); border-radius:10px; justify-self:center;
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:11px; font-weight:700; color:var(--neon-green); }

/* ---------- Order ticket ---------- */
.oc-ticket-empty { border:1px dashed var(--border); border-radius:6px; padding:18px 12px; text-align:center;
                   font-size:12px; color:var(--text-secondary); line-height:1.6; }
.oc-leg { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.oc-leg .title { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:12px; color:var(--text-primary); }
.oc-leg .side { margin-top:2px; font-size:11px; letter-spacing:.5px; }
.oc-leg .side.sell { color:var(--neon-red); }
.oc-leg .side.buy { color:var(--neon-green); }
.oc-leg .px { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:12px; }

.oc-field { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--text-secondary); }
.oc-stepper { display:flex; align-items:center; gap:4px; }
.oc-stepper button { width:22px; height:22px; background:transparent; border:1px solid var(--border);
                     border-radius:3px; color:var(--text-secondary); cursor:pointer; line-height:1; flex-shrink:0; }
.oc-stepper button:hover { border-color:var(--neon-blue); color:var(--text-primary); }
.oc-stepper .val { width:56px; text-align:right; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
                   font-size:14px; font-weight:700; color:var(--text-primary); }
.oc-stepper input.val { width:56px; background:var(--bg-primary); border:1px solid var(--border); border-radius:3px;
                        padding:2px 4px; text-align:right; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
                        font-size:13px; font-weight:700; color:var(--text-primary); outline:none; }
.oc-stepper input.val:focus { border-color:var(--neon-blue); }
.oc-stepper input.val.up { color:var(--neon-green); }
.oc-stepper input.val.down { color:var(--neon-red); }
.oc-stepper input[type=number]::-webkit-inner-spin-button,
.oc-stepper input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.oc-stepper input[type=number] { -moz-appearance:textfield; }
.oc-hint { margin-top:4px; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
           font-size:11px; color:var(--text-secondary); }
.oc-select { background:var(--bg-primary); border:1px solid var(--border); border-radius:3px;
             color:var(--text-primary); padding:3px 4px; font-size:13px; font-weight:700;
             font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
             width:108px; outline:none; }
.oc-select:focus { border-color:var(--neon-blue); }

/* Risk summary — auto-fit so cells wrap instead of clipping when narrow */
.oc-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:8px;
              padding:10px 8px; background:var(--bg-secondary); border:1px solid var(--border);
              border-radius:6px; text-align:center; }
.oc-summary .k { font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.oc-summary .v { margin-top:4px; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
                 font-size:13px; font-weight:700; color:var(--text-primary); }

.oc-totals { display:flex; flex-direction:column; gap:6px; font-size:12px; }
.oc-totals .line { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.oc-totals .amt { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-weight:700; }
.oc-actions { display:flex; gap:8px; }
.oc-actions .cancel { flex:1; padding:9px 14px; background:transparent; border:1px solid var(--border);
                      border-radius:4px; color:var(--text-secondary); font-size:13px; cursor:pointer; }
.oc-actions .cancel:hover { border-color:var(--neon-red); color:var(--neon-red); }
.oc-actions .submit { flex:1; padding:9px 14px; border:1px solid var(--neon-green);
  background:rgba(0,255,135,.10); box-shadow:0 0 10px rgba(0,255,135,.30); border-radius:4px;
  color:var(--neon-green); font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:13px; font-weight:700; letter-spacing:.5px; cursor:pointer; }
.oc-actions .submit:hover { filter:brightness(1.18); }
.oc-actions .submit[disabled] { border-color:var(--border); background:transparent; box-shadow:none;
                                color:var(--text-secondary); opacity:.6; cursor:not-allowed; }

/* ========== Order feedback ========== */
.order-feedback { padding:8px 12px; border-radius:4px; font-size:12px; margin-bottom:8px; word-break:break-all; }
.order-feedback.success { background:rgba(0,255,135,.10); border:1px solid var(--neon-green); color:var(--neon-green); }
.order-feedback.error { background:rgba(255,55,95,.10); border:1px solid var(--neon-red); color:var(--neon-red); }

/* ========== Confirm modal ========== */
.confirm-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:200;
    display:flex; align-items:center; justify-content:center;
}
.confirm-modal {
    background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
    box-shadow:0 8px 32px rgba(0,0,0,.5); width:400px; max-width:90vw; padding:24px;
}
.confirm-modal-title {
    font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:16px;
}
.confirm-modal-strategy {
    font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:12px;
}
.confirm-modal-legs { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.confirm-modal-leg {
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    font-size:12px; color:var(--text-secondary);
}
.confirm-modal-detail { display:flex; flex-direction:column; gap:6px; padding-top:12px; border-top:1px solid var(--border); }
.confirm-modal-detail > div { display:flex; justify-content:space-between; font-size:12px; color:var(--text-secondary); }
.confirm-modal-actions { display:flex; gap:8px; margin-top:20px; }
.confirm-modal-actions .cancel { padding:9px 14px; background:transparent; border:1px solid var(--border);
    border-radius:4px; color:var(--text-secondary); font-size:13px; cursor:pointer; }
.confirm-modal-actions .cancel:hover { border-color:var(--neon-red); color:var(--neon-red); }
.confirm-modal-actions .submit { flex:1; padding:9px 14px; border:1px solid var(--neon-green);
    background:rgba(0,255,135,.10); box-shadow:0 0 10px rgba(0,255,135,.30); border-radius:4px;
    color:var(--neon-green); font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
    font-size:13px; font-weight:700; letter-spacing:.5px; cursor:pointer; }
.confirm-modal-actions .submit:hover { filter:brightness(1.18); }

/* ========== Options Direct ========== */
.od-layout { display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start; }
@media (max-width:800px) { .od-layout { grid-template-columns:1fr; } }

.od-builder { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:16px; }
.od-ticket { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:16px; }

.od-section-title { font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
                    color:var(--text-secondary); margin-bottom:12px; }

.od-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.od-row label { font-size:11px; color:var(--text-secondary); min-width:80px; flex-shrink:0; }
.od-input { flex:1; min-width:0; background:var(--bg-primary); border:1px solid var(--border); border-radius:4px;
            color:var(--text-primary); padding:7px 10px; font-size:12px;
            font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; outline:none; }
.od-input:focus { border-color:var(--neon-blue); }

.od-toggle { display:flex; gap:0; flex:1; }
.od-toggle button { flex:1; padding:6px 0; background:transparent; border:1px solid var(--border);
                    color:var(--text-secondary); font-size:11px; cursor:pointer; transition:all .15s; }
.od-toggle button:first-child { border-radius:4px 0 0 4px; }
.od-toggle button:last-child { border-radius:0 4px 4px 0; border-left:0; }
.od-toggle button.active { border-color:var(--neon-blue); color:var(--neon-blue); background:rgba(0,212,255,.10); }
.od-toggle button.buy.active { border-color:var(--neon-green); color:var(--neon-green); background:rgba(0,255,135,.10); }
.od-toggle button.sell.active { border-color:var(--neon-red); color:var(--neon-red); background:rgba(255,23,68,.10); }

.od-btn { padding:8px 14px; border-radius:4px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid; }
.od-btn.primary { border-color:var(--neon-green); color:var(--neon-green); background:rgba(0,255,135,.10); }
.od-btn.primary:hover { background:rgba(0,255,135,.18); }
.od-btn.secondary { border-color:var(--neon-blue); color:var(--neon-blue); background:rgba(0,212,255,.08); }
.od-btn.secondary:hover { background:rgba(0,212,255,.16); }

.od-quote { padding:10px; margin-bottom:10px; background:var(--bg-primary); border:1px solid var(--border); border-radius:6px; }
.od-quote-row { display:flex; justify-content:space-between; font-size:11px; padding:2px 0; }
.od-quote-row .mono { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-weight:600; }

.od-legs-table { border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-bottom:4px; }
.od-legs-head, .od-legs-row { display:grid; grid-template-columns:50px 40px 1fr 60px 28px; gap:4px;
  padding:6px 8px; align-items:center; font-size:10.5px;
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; }
.od-legs-head { background:var(--bg-primary); font-size:9px; letter-spacing:.5px; text-transform:uppercase;
                color:var(--text-secondary); font-family:inherit; }
.od-legs-row { border-top:1px solid var(--border); }
.od-legs-row .mono { color:var(--text-primary); }

/* ========== Options Wizard ========== */
.ow-layout { max-width:900px; margin:0 auto; }
.ow-steps { display:flex; gap:0; margin-bottom:20px; }
.ow-step { flex:1; text-align:center; padding:10px; font-size:12px; letter-spacing:.5px;
           border-bottom:2px solid var(--border); color:var(--text-secondary); transition:all .15s; }
.ow-step.active { border-color:var(--neon-green); color:var(--neon-green); font-weight:600; }
.ow-step.done { border-color:var(--neon-blue); color:var(--neon-blue); }

.ow-section-title { font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
                    color:var(--text-secondary); margin-bottom:12px; }

.ow-strategies { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
@media (max-width:700px) { .ow-strategies { grid-template-columns:repeat(2,1fr); } }

.ow-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:6px;
           padding:14px; cursor:pointer; transition:border-color .15s; }
.ow-card:hover { border-color:var(--neon-blue); }
.ow-card.active { border-color:var(--neon-green); background:rgba(0,255,135,.06); }
.ow-card .name { font-size:13px; font-weight:600; color:var(--text-primary); }
.ow-card .desc { font-size:11px; color:var(--text-secondary); margin-top:4px; line-height:1.4; }
.ow-card .legs-count { font-size:10px; color:var(--text-secondary); margin-top:6px;
                       font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; }

.ow-form { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:20px; }
.ow-nav { display:flex; gap:12px; margin-top:16px; }
.ow-nav > button, .ow-nav > .od-btn { flex:1; }
.ow-chart-card { margin-top:12px; background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:8px; padding:16px 16px 12px; animation:owFadeIn .3s ease; }
.ow-chart-cols { display:flex; gap:20px; align-items:flex-start; }
.ow-chart-left { flex:1; min-width:0; }
.ow-chart-right { flex:1; min-width:0; padding-top:4px; }
@media (max-width:600px) { .ow-chart-cols { flex-direction:column; } }
.ow-chart-title { font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-secondary); margin-bottom:10px; }
@keyframes owFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.ow-info-badge { display:inline-block; padding:3px 10px; border-radius:4px; font-size:11px;
  font-weight:700; letter-spacing:.5px; margin-bottom:10px; }
.ow-info-badge.credit { background:rgba(0,255,135,.10); color:var(--neon-green);
  border:1px solid rgba(0,255,135,.25); }
.ow-info-badge.debit { background:rgba(62,166,255,.10); color:var(--neon-blue);
  border:1px solid rgba(62,166,255,.25); }
.ow-info-explain { font-size:13px; line-height:1.6; color:var(--text-secondary); margin-bottom:12px; }
.ow-info-outlook { border-left:2px solid var(--neon-green); padding:6px 0 6px 12px;
  font-size:13px; font-style:italic; color:var(--neon-green); line-height:1.5; opacity:.85; }

.ow-error { padding:10px 14px; margin-bottom:12px; border:1px solid var(--neon-red); border-radius:6px;
            background:rgba(255,23,68,.08); color:var(--neon-red); font-size:13px; }

/* ---- Strike Zone Visualization ---- */
.ow-strike-viz { margin:16px 0 8px; }
.ow-strike-viz-title { font-size:12px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; color:var(--text-secondary); margin-bottom:8px; }

/* ---- Simulated Returns ---- */
.ow-sim-card { margin-top:12px; background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:8px; padding:16px; }
.ow-sim-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.ow-sim-title { font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.ow-sim-pnl { display:flex; gap:10px; align-items:baseline; }
.ow-sim-pnl span { font-size:18px; font-weight:700; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; }
.ow-sim-pnl .up { color:var(--neon-green); }
.ow-sim-pnl .down { color:var(--neon-red); }
.ow-sim-greeks { display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; text-align:right; }
.ow-sim-greeks .k { font-size:11px; color:var(--text-secondary); margin-right:6px; }
.ow-sim-greeks .v { font-size:12px; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  color:var(--text-primary); }
.ow-sim-legend { display:flex; gap:16px; align-items:center; font-size:11px; color:var(--text-secondary);
  margin-bottom:6px; }
.ow-sim-leg-now, .ow-sim-leg-exp { display:inline-block; width:18px; height:3px; border-radius:2px;
  vertical-align:middle; margin-right:4px; }
.ow-sim-leg-now { background:#ff6b35; }
.ow-sim-leg-exp { background:#00ff87; }
.ow-sim-canvas-wrap { position:relative; width:100%; }
.ow-sim-canvas-wrap canvas { width:100%; display:block; border-radius:4px; }
.ow-sim-sliders { display:flex; gap:20px; margin-top:12px; }
@media (max-width:600px) { .ow-sim-sliders { flex-direction:column; } }
.ow-sim-slider-group { flex:1; }
.ow-sim-slider-label { font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:6px;
  letter-spacing:.3px; }
.ow-sim-slider-label span { color:var(--text-primary); font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; }
.ow-sim-slider-ticks { display:flex; justify-content:space-between; font-size:10px;
  color:var(--text-secondary); margin-top:4px; opacity:.6; }
.ow-sim-slider-group input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:4px;
  border-radius:2px; background:var(--border); outline:none; cursor:pointer; }
.ow-sim-slider-group input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%; background:var(--neon-blue); border:2px solid var(--bg-primary);
  box-shadow:0 0 6px rgba(62,166,255,.5); cursor:pointer; }
.ow-sim-slider-group input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%;
  background:var(--neon-blue); border:2px solid var(--bg-primary); box-shadow:0 0 6px rgba(62,166,255,.5);
  cursor:pointer; }