/* ===== Agni — OrienTrader theme (tokens mirror orientrader.com) ===== */
:root {
  --bg: #05070F;        /* deep navy: chart and app canvas */
  --bg2: #0B1020;       /* surface: panels, menus */
  --bg3: #10172C;       /* surface-2: hover, selected rows */
  --bg4: #1A2238;       /* raised: pressed, chips */
  --border: #1A2238;    /* line */
  --border2: #28324F;   /* line-2 */
  --text: #E9ECF5;
  --text2: #B9C0D4;
  --muted: #8A93AD;
  --muted2: #4A5370;
  --accent: #FF6A2B;    /* orange: actions, selection, focus */
  --accent-hi: #FF8C5A;
  --accent-bg: rgba(255, 106, 43, .12);
  --brass: #D9B26A;     /* alerts, favourites */
  --star: #BFD3FF;      /* crosshair, secondary emphasis */
  --up: #2BD99F;
  --down: #FF4D5E;
  --up-bg: rgba(43, 217, 159, .14);
  --down-bg: rgba(255, 77, 94, .14);
  --header-h: 40px;
  --left-w: 52px;
  --rail-w: 44px;
  --right-w: 320px;
  --footer-h: 26px;
  --radius: 2px;
  --font: "Instrument Sans", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Big Shoulders Display", "Oswald", "Arial Narrow", Impact, sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --on-accent: #05070F;           /* text on orange / red buttons */
  --overlay: rgba(5, 7, 15, .5);  /* chart loading veil */
  --surface-a85: rgba(11, 16, 32, .85);
  /* Chart canvas (read by chart.js; "Chart background" in settings overrides --chart-bg) */
  --chart-bg: #0F1629;            /* lifted navy: readable candles, still darker than the site's hero */
  --chart-grid: #1B2340;
  --chart-line: #28324F;
  --chart-axis-text: #8A93AD;
  --chart-label-bg: #1A2238;
  --chart-crosshair: rgba(191, 211, 255, .55);
  --chart-pane-sep: #3A4668;      /* line between the price pane and indicator panes */
  --chart-pane-shade: rgba(5, 7, 15, .32);   /* darkens indicator panes relative to the price pane */
  /* Drawing layer defaults (read by drawings.js) */
  --draw-text: #E9ECF5;
  --draw-label-bg: rgba(11, 16, 32, .92);
  --draw-label-fg: #E9ECF5;
  color-scheme: dark;
}
/* Light theme: warm paper under the same navy / orange / brass vocabulary as orientrader.com. */
:root[data-theme="light"] {
  --bg: #F6F4EE;
  --bg2: #FFFFFF;
  --bg3: #EEEAE1;
  --bg4: #E3DED2;
  --border: #E4DFD4;
  --border2: #CFC8BA;
  --text: #0B1020;
  --text2: #2E3650;
  --muted: #5F6782;
  --muted2: #9AA1B8;
  --accent: #E8541A;
  --accent-hi: #FF6A2B;
  --accent-bg: rgba(232, 84, 26, .12);
  --brass: #9C7A2E;
  --star: #3B5BA9;
  --up: #15996C;
  --down: #D8303F;
  --up-bg: rgba(21, 153, 108, .14);
  --down-bg: rgba(216, 48, 63, .14);
  --on-accent: #FFFFFF;
  --overlay: rgba(246, 244, 238, .55);
  --surface-a85: rgba(255, 255, 255, .88);
  --chart-bg: #F6F4EE;
  --chart-grid: #E9E5DB;
  --chart-line: #D5CFC2;
  --chart-axis-text: #5F6782;
  --chart-label-bg: #2E3650;
  --chart-crosshair: rgba(59, 91, 169, .6);
  --chart-pane-sep: #B8B0A0;
  --chart-pane-shade: rgba(11, 16, 32, .05);
  --draw-text: #0B1020;
  --draw-label-bg: rgba(255, 255, 255, .94);
  --draw-label-fg: #0B1020;
  color-scheme: light;
}
/* 90s style: creamy pastel paper. Same structure as the other themes; only colour, material and motion change.
   Borrowed from the "Smoked Glass" brief: hairline edges instead of solid borders, an edge gleam, film grain,
   a breathing status LED, a gradient wordmark, a glowing hairline on menus, and soft rise-in motion. */
:root[data-theme="retro"] {
  --bg: #F4EDE0;        /* cream */
  --bg2: #FBF7EF;       /* paper: panels, menus */
  --bg3: #F0E6D5;       /* hover, selected rows */
  --bg4: #E6D8C2;       /* pressed, chips */
  --border: rgba(92, 64, 51, .10);   /* hairlines */
  --border2: rgba(92, 64, 51, .18);
  --text: #3B2F2F;      /* cocoa */
  --text2: #5E4B47;
  --muted: #86736B;
  --muted2: #B5A397;
  --accent: #E2674B;    /* coral: the OrienTrader orange, softened */
  --accent-hi: #F0826A;
  --accent-bg: rgba(226, 103, 75, .13);
  --brass: #C28A2E;     /* mustard */
  --star: #7F86DB;      /* periwinkle */
  --up: #2E9E80;        /* mint teal */
  --down: #D9556F;      /* rose */
  --up-bg: rgba(46, 158, 128, .14);
  --down-bg: rgba(217, 85, 111, .14);
  --on-accent: #FFFDF8;
  --overlay: rgba(244, 237, 224, .6);
  --surface-a85: rgba(251, 247, 239, .92);
  --chart-bg: #FBF5E9;
  --chart-grid: #F0E5D1;
  --chart-line: #E2D3BA;
  --chart-axis-text: #86736B;
  --chart-label-bg: #5E4B47;
  --chart-crosshair: rgba(127, 134, 219, .65);
  --chart-pane-sep: #D6C2A4;
  --chart-pane-shade: rgba(167, 150, 226, .08);   /* lavender wash on indicator panes */
  --draw-text: #3B2F2F;
  --draw-label-bg: rgba(251, 247, 239, .95);
  --draw-label-fg: #3B2F2F;
  /* pastel accents used only by the 90s treatments below */
  --p-mint: #A8E6CF; --p-butter: #FFE9A8; --p-peach: #FFC8A8; --p-pink: #F7B8D2; --p-lilac: #CDBDF3;
  --p-sunset: linear-gradient(90deg, #F0826A, #EE8FB4 55%, #9E8BEA);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled { opacity: .35; cursor: default; }
input, textarea, select { font-family: inherit; font-size: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius); outline: none; caret-color: var(--accent); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
::selection { background: rgba(255, 106, 43, .35); color: var(--text); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted2); }
::-webkit-scrollbar-track { background: transparent; }
/* Data runs in mono with tabular figures; UI copy stays in the sans. */
.wl-row, .rp-details, .trades, .legend .ohlc, .legend .vals, .legend .vol, .legend .countdown, .clock, .intervals, .sym-row .p { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.grow { flex: 1; }
[hidden] { display: none !important; }
.ico { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; flex: none; }
.ico svg { width: 28px; height: 28px; display: block; }
.ico.small { width: 16px; height: 16px; }
.ico.small svg { width: 16px; height: 16px; }
.up { color: var(--up) !important; }
.down { color: var(--down) !important; }

/* ===== Layout ===== */
.app { display: grid; grid-template-rows: var(--header-h) 1fr; height: 100vh; width: 100vw; overflow: hidden; }
.tv-body {
  display: grid;
  grid-template-columns: var(--left-w) minmax(0, 1fr) 4px var(--right-w) var(--rail-w);
  min-height: 0;
  border-top: 1px solid var(--border);
}
/* Collapsed: the panel and resizer are display:none, so they leave the grid and only three tracks remain.
   (With the old five-track template the rail auto-placed into the 0px resizer track and shrank to 1px.) */
.tv-body.right-collapsed { grid-template-columns: var(--left-w) minmax(0, 1fr) var(--rail-w); }
.tv-body.right-collapsed .right-panel, .tv-body.right-collapsed .resizer-v { display: none; }
.tv-body.right-collapsed #rail-collapse .ico { transform: rotate(180deg); } /* arrow points left = expand */
.center { display: grid; grid-template-rows: minmax(0, 1fr) var(--footer-h); min-width: 0; min-height: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }

/* ===== Header ===== */
.tv-header { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 8px 0 10px; background: var(--bg2); overflow: hidden; min-width: 0; }
.wordmark { display: inline-flex; align-items: center; gap: 0; height: 28px; padding-right: 8px; color: var(--text); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.wordmark .wm-star { width: 14px; height: 14px; margin-right: 6px; fill: var(--accent); }
.wordmark .wm-b { color: var(--brass); }
.hdr-left { min-width: 0; overflow: hidden; }
.hdr-group { display: flex; align-items: center; gap: 2px; height: 100%; }
.hsep { width: 1px; height: 22px; background: var(--border2); margin: 0 4px; }
.hbtn { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 6px; border-radius: var(--radius); color: var(--text); white-space: nowrap; font-weight: 500; }
.hbtn:hover { background: var(--bg3); }
.hbtn.icon-only { padding: 0; }
.hbtn .lbl { padding-right: 4px; }
.hbtn.active { color: var(--accent); }
.symbol-btn { padding: 0 8px 0 4px; font-weight: 600; font-size: 14px; font-family: var(--mono); letter-spacing: .02em; }
.sym-logo { width: 22px; height: 22px; border-radius: var(--radius); background: var(--bg4); color: var(--brass); font-weight: 600; font-size: 11px; font-family: var(--mono); display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; }
.intervals { display: flex; align-items: center; gap: 1px; }
.intervals .ibtn { height: 28px; min-width: 28px; padding: 0 6px; border-radius: var(--radius); color: var(--text2); font-weight: 500; font-size: 12px; }
.intervals .ibtn:hover { background: var(--bg3); }
.intervals .ibtn.active { color: var(--accent); }

/* ===== Left drawing toolbar ===== */
.left-toolbar { display: flex; flex-direction: column; align-items: center; padding: 4px 0; gap: 1px; background: var(--bg2); overflow-y: auto; overflow-x: visible; }
.left-toolbar::-webkit-scrollbar { width: 0; }
.tool-group { position: relative; width: 100%; display: flex; justify-content: center; }
.tbtn { position: relative; width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--text); }
.tbtn:hover { background: var(--bg3); }
.tbtn.active { color: var(--accent); }
.tbtn.active::after { content: none; }
.tbtn .caret { position: absolute; right: 2px; bottom: 3px; width: 0; height: 0; border-left: 4px solid transparent; border-bottom: 4px solid var(--muted); }
.tbtn.magnet-on { color: var(--accent); }
.left-toolbar .tbtn svg { width: 24px; height: 24px; }
.tool-flyout .ico svg { width: 24px; height: 24px; }
.tsep { width: 22px; height: 1px; background: var(--border2); margin: 4px 0; }
.tool-flyout { position: fixed; z-index: 60; background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.55); min-width: 230px; padding: 4px 0; }
.tool-flyout .fo-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; cursor: pointer; color: var(--text); }
.tool-flyout .fo-item:hover { background: var(--bg3); }
.tool-flyout .fo-item.active { color: var(--accent); }
.tool-flyout .fo-item .hk { margin-left: auto; color: var(--muted); font-size: 11px; }
.tool-flyout .fo-head { padding: 6px 12px 2px; color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }

/* ===== Chart ===== */
.chart-wrap { position: relative; min-height: 0; min-width: 0; overflow: hidden; background: var(--chart-bg); }
#chart { position: absolute; inset: 0; z-index: 2; }
#draw-canvas { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; }
.chart-wrap.tool-active { cursor: crosshair; }
.chart-wrap.drag-hover { cursor: pointer; }
.chart-wrap.dragging { cursor: grabbing; }
.chart-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--overlay); z-index: 7; }
.spinner { width: 28px; height: 28px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.legend { position: absolute; left: 8px; top: 6px; z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.legend .lg-row { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 4px; border-radius: 4px; pointer-events: auto; white-space: nowrap; }
.legend .lg-row:hover { background: var(--surface-a85); }
.legend .lg-main .sym { font-weight: 600; font-size: 14px; color: var(--text); font-family: var(--mono); letter-spacing: .02em; }
.legend .lg-main .meta { color: var(--muted); font-size: 12px; }
.legend .ohlc { display: flex; gap: 6px; font-variant-numeric: tabular-nums; }
.legend .ohlc span b { font-weight: 400; color: var(--muted); margin-right: 2px; }
.legend .lg-ind .name { color: var(--text2); }
.legend .lg-ind .vals { display: flex; gap: 6px; font-variant-numeric: tabular-nums; }
.legend .lg-btns { display: none; gap: 0; }
.legend .lg-row:hover .lg-btns { display: inline-flex; }
.legend .lg-btn { width: 18px; height: 18px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.legend .lg-btn:hover { background: var(--bg4); color: var(--text); }
.legend .lg-btn .ico, .legend .lg-btn svg { width: 16px; height: 16px; }
.legend .lg-ind.hidden-ind .name, .legend .lg-ind.hidden-ind .vals { opacity: .4; }
.legend .countdown { color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-nav { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 6; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.chart-wrap:hover .chart-nav { opacity: 1; }
.nav-btn { width: 26px; height: 26px; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; color: var(--text2); }
.nav-btn:hover { color: var(--text); background: var(--bg3); }
.nav-btn .ico, .nav-btn svg { width: 18px; height: 18px; }
.goto-realtime { position: absolute; right: 70px; bottom: 34px; z-index: 6; width: 26px; height: 26px; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; color: var(--text2); }
.goto-realtime:hover { color: var(--text); }
.goto-realtime .ico, .goto-realtime svg { width: 18px; height: 18px; }

.float-toolbar { position: absolute; z-index: 8; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.float-toolbar .ftb { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--text); position: relative; }
.float-toolbar .ftb:hover { background: var(--bg3); }
.float-toolbar .ftb.active { color: var(--accent); }
.float-toolbar .color-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(255,255,255,.2); }
.float-toolbar .sep { width: 1px; height: 20px; background: var(--border2); margin: 0 2px; }
.float-toolbar .drag-handle { cursor: grab; color: var(--muted); }
/* Checkpoints: header buttons and the slots panel */
.cp-nav { display: flex; align-items: center; gap: 0; }
.cp-count { min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px; border-radius: 8px; background: var(--brass); color: var(--on-accent); font-family: var(--mono); font-size: 10px; line-height: 16px; text-align: center; }
.cp-count[hidden] { display: none; }
/* Narrow screens: icon-only checkpoint button so the previous/next arrows stay visible. */
@media (max-width: 1400px) {
  #btn-checkpoints .lbl { display: none; }
  #btn-checkpoints .cp-count { margin-left: 2px; }
}
.cp-panel { padding: 4px 0; }
.cp-head { padding: 6px 12px 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cp-head span { display: block; margin-top: 2px; letter-spacing: 0; text-transform: none; color: var(--muted2, var(--muted)); }
.cp-row { display: grid; grid-template-columns: 24px 1fr auto 28px; align-items: center; gap: 6px; padding: 3px 10px; }
.cp-num { width: 20px; height: 20px; border-radius: 3px; background: var(--brass); color: var(--on-accent); font-weight: 600; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.cp-row.empty .cp-num { background: var(--bg3); color: var(--muted); }
.cp-time { text-align: left; padding: 4px 6px; border-radius: 3px; font-family: var(--mono); font-size: 12px; color: var(--text); }
.cp-time small { display: block; font-size: 10px; color: var(--muted); }
.cp-time:not(:disabled):hover { background: var(--bg3); color: var(--accent); }
.cp-row.empty .cp-time { color: var(--muted); }
.cp-act { height: 26px; padding: 0 8px; border: 1px solid var(--border2); border-radius: 3px; font-size: 12px; color: var(--text2); }
.cp-act:not(:disabled):hover { background: var(--bg3); color: var(--text); }
.cp-act.icon { width: 26px; padding: 0; display: flex; align-items: center; justify-content: center; }
.cp-act.icon svg { width: 14px; height: 14px; }
.cp-foot { display: flex; justify-content: flex-end; padding: 8px 10px 4px; border-top: 1px solid var(--border); margin-top: 4px; }
/* Favorites toolbar: pinned drawing tools on a floating bar the user can drag over the chart */
.fav-toolbar { position: absolute; z-index: 7; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.4); user-select: none; }
.fav-toolbar[hidden] { display: none; }
.fav-toolbar.vertical { flex-direction: column; }
.fav-toolbar.dragging { opacity: .85; box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.fav-toolbar .fav-handle { width: 16px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: grab; color: var(--muted); }
.fav-toolbar.vertical .fav-handle { width: 30px; height: 16px; }
.fav-toolbar.dragging .fav-handle { cursor: grabbing; }
.fav-toolbar .fav-handle svg { width: 16px; height: 16px; }
.fav-toolbar .fav-btn { width: 32px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.fav-toolbar .fav-btn svg { width: 24px; height: 24px; }
.fav-toolbar .fav-btn:hover { background: var(--bg3); }
.fav-toolbar .fav-btn.active { color: var(--accent); background: var(--bg3); }
.tool-flyout .fo-pin { width: 22px; height: 22px; margin-left: 6px; display: flex; align-items: center; justify-content: center; color: var(--muted); opacity: 0; flex: none; }
.tool-flyout .fo-item .hk + .fo-pin { margin-left: 6px; }
.tool-flyout .fo-item:not(:has(.hk)) .fo-pin { margin-left: auto; }
.tool-flyout .fo-item:hover .fo-pin, .tool-flyout .fo-pin.on { opacity: 1; }
.tool-flyout .fo-pin svg { width: 16px; height: 16px; }
.tool-flyout .fo-pin.on { color: var(--brass, #D9B26A); }
.tool-flyout .fo-pin.on svg path { fill: currentColor; }
.tool-flyout .fo-pin:hover { color: var(--accent); }
.palette { display: grid; grid-template-columns: repeat(10, 22px); gap: 4px; padding: 8px; }
.palette .sw { width: 22px; height: 22px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255,255,255,.1); }
.palette .sw:hover { transform: scale(1.15); }
.opacity-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; font-size: 12px; color: var(--muted); }
.opacity-row input[type=range] { flex: 1; }

/* ===== Chart footer ===== */
.chart-footer { display: flex; align-items: center; justify-content: space-between; height: var(--footer-h); padding: 0 6px 0 4px; border-top: 1px solid var(--border); font-size: 12px; background: var(--bg2); font-family: var(--mono); }
.ranges { display: flex; gap: 2px; }
.fbtn { height: 20px; padding: 0 6px; border-radius: var(--radius); color: var(--text2); font-size: 11px; letter-spacing: .04em; display: inline-flex; align-items: center; }
.fbtn:hover { background: var(--bg3); color: var(--text); }
.fbtn.active { color: var(--accent); }
.fbtn .ico, .fbtn svg { width: 16px; height: 16px; }
.footer-right { display: flex; align-items: center; gap: 2px; }
.fsep { width: 1px; height: 16px; background: var(--border2); margin: 0 4px; }
.clock { color: var(--text2); font-variant-numeric: tabular-nums; padding: 0 4px; }

/* ===== Resizers ===== */
.resizer-v { width: 4px; cursor: col-resize; background: var(--bg); }
.resizer-v:hover { background: var(--accent); }

/* ===== Right panel ===== */
.right-panel { display: flex; flex-direction: column; min-height: 0; background: var(--bg2); overflow: hidden; }
.rp-section { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.rp-head { display: flex; align-items: center; height: 38px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--border); flex: none; }
.rp-title { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.rp-sub { color: var(--brass); font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.sbtn { width: 28px; height: 28px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--text2); }
.sbtn:hover { background: var(--bg3); color: var(--text); }
.wl-cols, .ob-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 5px 12px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--border); flex: none; }
.ob-cols { grid-template-columns: 1fr 1fr 1fr; }
.wl-cols span:not(:first-child), .ob-cols span:not(:first-child) { text-align: right; }
.wl-list { overflow-y: auto; flex: 1; min-height: 120px; }
.wl-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 0 12px; height: 30px; align-items: center; cursor: pointer; font-variant-numeric: tabular-nums; position: relative; }
.wl-row { font-size: 12px; transition: background .15s var(--ease-out); }
.wl-row:hover { background: var(--bg3); }
.wl-row.active { background: var(--bg3); box-shadow: inset 2px 0 0 var(--accent); }
.wl-row .s { font-weight: 500; display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--text); }
.wl-row .s .q { color: var(--muted); font-weight: 400; font-size: 11px; }
.wl-row span:not(.s) { text-align: right; }
.wl-row .rm { position: absolute; right: 2px; top: 5px; width: 20px; height: 20px; display: none; align-items: center; justify-content: center; border-radius: 3px; color: var(--muted); }
.wl-row:hover .rm { display: inline-flex; }
.wl-row .rm:hover { background: var(--bg4); color: var(--text); }
.wl-row .rm svg { width: 14px; height: 14px; }
.wl-row .last { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.wl-row .last b { font-weight: inherit; }
.wl-row .last .tick { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; flex: none; opacity: 0; }
.wl-row .last .tick.up { border-bottom: 6px solid var(--up); opacity: 1; }
.wl-row .last .tick.down { border-top: 6px solid var(--down); opacity: 1; }
.rp-details { border-top: 1px solid var(--border); padding: 10px 12px 12px; font-size: 12px; flex: none; background: var(--bg); }
.rp-details .d-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.rp-details .d-price { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rp-details .d-chg { font-weight: 500; }
.rp-details .d-grid { display: grid; grid-template-columns: 1fr; gap: 3px 0; }
.rp-details .d-grid div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.rp-details .d-grid div span:first-child { color: var(--muted); flex: none; margin-right: 8px; }
.rp-details .d-grid div span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.trades { flex: 1; overflow-y: auto; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--bg); }
.tr-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 12px; height: 20px; align-items: center; }
.tr-row:hover { background: var(--bg3); }
.tr-row span:not(:first-child) { text-align: right; color: var(--text2); }
.tr-row.buy span:first-child { color: var(--up); } .tr-row.sell span:first-child { color: var(--down); }

/* ===== Right rail ===== */
.right-rail { display: flex; flex-direction: column; align-items: center; padding: 4px 0; gap: 2px; border-left: 1px solid var(--border); background: var(--bg2); }
.rail-btn { width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--text2); }
.rail-btn:hover { background: var(--bg3); color: var(--text); }
.rail-btn.active { color: var(--accent); }

/* ===== Modals ===== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px; width: 720px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,.65); }
.modal.small { width: 420px; }
.modal-head { display: flex; align-items: center; height: 48px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--border); flex: none; }
.modal-title { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; flex: 1; }
.modal-head .close { margin-left: auto; }
.modal-body { padding: 16px 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); flex: none; }
.modal-tabs { display: flex; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.mtab { height: 36px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mtab.active { color: var(--text); border-bottom-color: var(--accent); }
.btn { height: 34px; padding: 0 16px; border-radius: var(--radius); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: background .15s var(--ease-out), color .15s var(--ease-out); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hi); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border2); }
.btn.ghost:hover { background: var(--bg3); border-color: var(--muted2); }
.btn.danger { background: var(--down); color: var(--on-accent); }
.search-row { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.search-row .ico { color: var(--muted); }
.search-row input { flex: 1; background: transparent; border: 0; font-size: 16px; height: 32px; }
.quote-filters { display: flex; gap: 4px; padding: 8px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.qf { height: 24px; padding: 0 10px; border-radius: var(--radius); background: var(--bg3); color: var(--text2); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; border: 1px solid transparent; }
.qf:hover { color: var(--text); border-color: var(--border2); }
.qf.active { background: var(--accent-bg); color: var(--accent); border-color: rgba(255,106,43,.5); }
.sym-list { overflow-y: auto; flex: 1; min-height: 200px; }
.sym-row { display: grid; grid-template-columns: 150px 1fr 100px 130px; align-items: center; height: 40px; padding: 0 20px; cursor: pointer; }
.sym-row:hover, .sym-row.hl { background: var(--bg3); }
.sym-row .s { font-weight: 500; font-family: var(--mono); display: flex; align-items: center; gap: 8px; }
.sym-row .s .lg { width: 20px; height: 20px; border-radius: var(--radius); background: var(--bg4); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--brass); font-weight: 600; }
.sym-row .d { color: var(--muted); font-size: 12px; }
.sym-row .p, .sym-row .c { text-align: right; font-variant-numeric: tabular-nums; }
.sym-row .ex { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.ind-body { display: flex; min-height: 300px; flex: 1; overflow: hidden; }
.ind-side { width: 180px; border-right: 1px solid var(--border); padding: 8px 0; flex: none; }
.ind-cat { padding: 8px 20px; cursor: pointer; color: var(--text2); }
.ind-cat:hover { background: var(--bg3); }
.ind-cat.active { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.ind-cat { display: flex; justify-content: space-between; gap: 8px; }
.ind-count { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.ind-code { color: var(--muted); font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.ind-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.ind-row { display: flex; align-items: center; height: 36px; padding: 0 20px; cursor: pointer; gap: 12px; }
.ind-row:hover { background: var(--bg3); }
.ind-row .n { flex: 1; }
.ind-row .t { color: var(--muted); font-size: 11px; }
.ind-row .add { color: var(--muted); }
.ind-row:hover .add { color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 160px; align-items: center; gap: 10px; margin-bottom: 10px; }
.form-row label { color: var(--text2); }
.form-row input[type=number], .form-row input[type=text], .form-row select { height: 32px; padding: 0 8px; width: 100%; }
.form-row input[type=color] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--border2); background: transparent; }
.form-row .inline { display: flex; align-items: center; gap: 8px; }
.form-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

/* Settings dialog shared by every indicator and drawing tool (PropsDialog in util.js) */
.props-modal { width: 500px; max-height: 88vh; }
.props-modal .modal-body { padding: 14px 18px; }
.props-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; min-height: 34px; margin-bottom: 6px; }
.props-row > label { color: var(--text2); }
.props-chk { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); }
.props-modal input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: none; }
.props-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.props-ctl select { height: 30px; padding: 0 8px; min-width: 96px; }
.props-ctl input[type=number], .props-ctl input[type=text] { height: 30px; padding: 0 8px; min-width: 0; flex: 1; }
.props-ctl input[type=number] { font-family: var(--mono); font-size: 12px; }
.props-ctl textarea { width: 100%; padding: 6px 8px; resize: vertical; min-height: 60px; }
.props-ctl .props-time { font-family: var(--mono); font-size: 12px; }
.props-modal input.bad { border-color: var(--down); }
.props-ctl input[type=range] { flex: 1; min-width: 80px; accent-color: var(--accent); }
.props-val { width: 40px; text-align: right; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.props-modal input[type=color] { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--border2); border-radius: var(--radius); background: var(--bg); cursor: pointer; flex: none; }
.props-modal input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.props-modal input[type=color]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.props-hint { color: var(--muted); font-size: 12px; margin: 8px 0 4px; }
.props-section { margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.props-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.props-foot { justify-content: flex-start; }
.props-foot .btn .ico.small { width: 12px; height: 12px; vertical-align: -2px; }
.props-sbtn { height: 30px; padding: 0 10px; border: 1px solid var(--border2); border-radius: var(--radius); color: var(--text2); }
.props-sbtn:hover { background: var(--bg3); color: var(--text); }
.props-sbtn.icon { width: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.props-plot { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; margin: 4px 0; }
.props-plot .props-ctl { justify-content: flex-end; }
.props-plot select { min-width: 84px; }
.props-level { display: grid; grid-template-columns: 22px 1fr 30px 96px 30px; align-items: center; gap: 8px; margin: 4px 0; }
.props-level input[type=number] { height: 30px; padding: 0 8px; width: 100%; font-family: var(--mono); font-size: 12px; }
/* Fib retracement: 24 level slots in two columns */
.fib-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 10px 0 14px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fib-lv { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.fib-lv input[type=number] { height: 30px; padding: 0 8px; width: 100%; min-width: 0; font-family: var(--mono); font-size: 12px; }
.fib-lv.off input[type=number] { color: var(--muted); }
.fib-lv.off input[type=color] { opacity: .45; }
.settings-body .form-row { grid-template-columns: 1fr 140px; }
.settings-body .swatch-row { display: flex; align-items: center; gap: 6px; }
.settings-body .swatch-row .btn { height: 28px; padding: 0 10px; font-size: 11px; }
.settings-body label .hint { color: var(--muted); font-size: 11px; margin-left: 4px; }
.settings-body .sect { grid-column: 1 / -1; margin: 6px 0 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
textarea { width: 100%; padding: 8px; resize: vertical; }

/* ===== Dropdown / context menu ===== */
.dropdown, .ctx-menu { position: fixed; z-index: 120; background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.55); min-width: 180px; padding: 4px 0; max-height: 70vh; overflow-y: auto; }
.dd-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; cursor: pointer; color: var(--text); white-space: nowrap; }
.dd-item:hover { background: var(--bg3); }
.dd-item.active { color: var(--accent); }
.dd-item .hk { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; padding-left: 16px; }
.dd-item .chk { width: 16px; color: var(--accent); }
.dd-item.danger { color: var(--down); }
.dd-head { padding: 6px 12px 2px; color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.dd-sep { height: 1px; background: var(--border); margin: 4px 0; }
.dd-star { margin-left: auto; color: var(--muted2); width: 20px; }
.dd-star.on { color: var(--brass); }
.dd-star:hover { color: var(--brass); }

/* ===== Toasts ===== */
.toasts { position: fixed; right: 60px; bottom: 60px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px; padding: 10px 14px; min-width: 260px; max-width: 420px; box-shadow: 0 8px 24px rgba(0,0,0,.55); font-size: 13px; animation: toastIn .2s var(--ease-out); }
.toast .t-title { font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
.toast .t-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.toast.ok .t-title::before { background: var(--up); }
.toast.err .t-title::before { background: var(--down); }
.toast.err { border-color: rgba(255,77,94,.4); }
.toast .t-msg { color: var(--text2); }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } }

/* ===== 90s style treatments (colour, material and motion only; no sizes change) ===== */
/* Film grain over the whole app removes the flat vector look. */
:root[data-theme="retro"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 400; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* Header: paper gradient, hairline, a pastel ribbon along the bottom edge and a light that runs along the top. */
:root[data-theme="retro"] .tv-header { position: relative;
  background: linear-gradient(90deg, var(--p-mint), var(--p-butter), var(--p-peach), var(--p-pink), var(--p-lilac)) bottom / 100% 2px no-repeat, linear-gradient(180deg, #FDFAF4, #F6EEDF); }
:root[data-theme="retro"] .tv-header::after { content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent); animation: retroEdgeRun 9s var(--ease-out) 1.2s infinite; }
@keyframes retroEdgeRun { 0% { left: -30%; } 35%, 100% { left: 130%; } }
/* Wordmark: cocoa ORBI, sunset-gradient TER with a soft glow. */
:root[data-theme="retro"] .wordmark .wm-b { background: var(--p-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 6px rgba(238, 143, 180, .35)); }
/* Side and bottom bars sit on paper; the details block gets a lilac wash from the top like a lit glass panel. */
:root[data-theme="retro"] .chart-footer { background: linear-gradient(180deg, #F8F1E4, #F3EADA); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
:root[data-theme="retro"] .rp-details { background: radial-gradient(60% 90% at 50% 0%, rgba(205, 189, 243, .28), transparent 70%), var(--bg); }
/* Status LED breathes. */
:root[data-theme="retro"] .dot.ok { box-shadow: 0 0 6px var(--up); animation: retroBreathe 2.8s ease-in-out infinite; }
:root[data-theme="retro"] .dot.err { box-shadow: 0 0 6px var(--down); animation: retroBreathe 2.6s ease-in-out infinite; }
@keyframes retroBreathe { 50% { opacity: .55; } }
/* Menus, modals, toasts: soft long shadows, a white top highlight and a glowing coral hairline at the bottom. */
:root[data-theme="retro"] .dropdown, :root[data-theme="retro"] .ctx-menu, :root[data-theme="retro"] .tool-flyout {
  background: linear-gradient(180deg, rgba(253, 250, 244, .97), rgba(248, 241, 229, .98)); border-color: var(--border);
  box-shadow: 0 22px 44px -14px rgba(92, 64, 51, .30), 0 0 0 1px rgba(92, 64, 51, .06), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(226, 103, 75, .45);
  animation: retroPop .26s var(--ease-out); }
:root[data-theme="retro"] .modal { border-color: var(--border); box-shadow: 0 30px 70px -20px rgba(92, 64, 51, .38), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(226, 103, 75, .4); animation: retroRise .36s var(--ease-out); }
:root[data-theme="retro"] .modal-backdrop { background: rgba(94, 75, 71, .28); backdrop-filter: blur(3px); }
:root[data-theme="retro"] .toast { box-shadow: 0 16px 34px -12px rgba(92, 64, 51, .3), inset 0 1px 0 rgba(255, 255, 255, .9); }
@keyframes retroPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes retroRise { from { opacity: 0; transform: translateY(18px) scale(.975); } }
/* Controls: soft raised buttons with a top highlight; inputs sit slightly inset. */
:root[data-theme="retro"] .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(226, 103, 75, .3); }
:root[data-theme="retro"] .btn.ghost, :root[data-theme="retro"] .acct-chip, :root[data-theme="retro"] .nav-btn, :root[data-theme="retro"] .goto-realtime { background-color: var(--bg2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(92, 64, 51, .12); }
:root[data-theme="retro"] input, :root[data-theme="retro"] select, :root[data-theme="retro"] textarea { background: #FFFDF8; box-shadow: inset 0 1px 2px rgba(92, 64, 51, .1); }
:root[data-theme="retro"] .qf.active { border-color: rgba(226, 103, 75, .5); }
:root[data-theme="retro"] .toast.err { border-color: rgba(217, 85, 111, .4); }
:root[data-theme="retro"] ::selection { background: rgba(247, 184, 210, .6); }
:root[data-theme="retro"] .wl-row.active { background: linear-gradient(90deg, rgba(205, 189, 243, .28), var(--bg3)); }
:root[data-theme="retro"] ::-webkit-scrollbar-thumb { background: var(--p-lilac); }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="retro"] *, :root[data-theme="retro"] *::before, :root[data-theme="retro"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ===== Quick-action UX ===== */
.toast .t-act { margin-left: auto; padding: 0 2px; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.toast .t-act:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.axis-plus { position: absolute; left: 0; top: 0; z-index: 7; width: 20px; height: 20px; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--border2); color: var(--text2); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.axis-plus:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.axis-plus .ico, .axis-plus svg { width: 16px; height: 16px; }
.wl-row.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.wl-row.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }
.wl-row.dragging { opacity: .45; }
.rp-details .d-price, .legend .ohlc i { cursor: copy; }
.help-modal .modal-body { max-height: 70vh; }
.help-sect { margin: 12px 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.help-sect:first-child { margin-top: 0; }
.help-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); color: var(--text2); font-size: 12px; }
.help-row .kbds { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.help-row .kbds i { color: var(--muted); font-style: normal; }
.kbd { font-family: var(--mono); font-size: 11px; color: var(--text); background: var(--bg3); border: 1px solid var(--border2); border-bottom-width: 2px; border-radius: 3px; padding: 1px 6px; white-space: nowrap; }