/* Number Go Up Machine — trading terminal */
:root, [data-theme="dark"] {
  --bg: #0a0d12;
  --surface: #10141b;
  --surface-2: #151a23;
  --surface-3: #1b212c;
  --border: #212835;
  --divider: #1a202a;
  --text: #e7eaf0;
  --muted: #8b94a7;
  --faint: #5b6476;
  --accent: #5aa9ff;
  --accent-soft: rgba(90, 169, 255, .14);
  --up: #22c58b;
  --up-soft: rgba(34, 197, 139, .14);
  --down: #f2495f;
  --down-soft: rgba(242, 73, 95, .14);
  --warn: #f0b429;
  --warn-soft: rgba(240, 180, 41, .14);
  --band: #b48cff;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef1f5;
  --border: #dfe3ea;
  --divider: #eaedf2;
  --text: #111722;
  --muted: #5d6779;
  --faint: #9aa3b2;
  --accent: #1463ff;
  --accent-soft: rgba(20, 99, 255, .10);
  --up: #0c9f6a;
  --up-soft: rgba(12, 159, 106, .10);
  --down: #d92d48;
  --down-soft: rgba(217, 45, 72, .10);
  --warn: #b7791f;
  --warn-soft: rgba(183, 121, 31, .12);
  --band: #7c4dff;
  --shadow: 0 8px 30px rgba(16, 24, 40, .12);
  color-scheme: light;
}
:root {
  --font: 'Geist', 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
  --text-xs: .75rem; --text-sm: .8125rem; --text-base: .875rem; --text-lg: 1.125rem; --text-xl: 1.625rem;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --header-h: 56px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text); font: 400 var(--text-base)/1.45 var(--font);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
.num, td, .price, .kpi-v { font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--mono); }
a { color: var(--accent); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--accent-soft); }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--muted); } .faint { color: var(--faint); }

/* ---------- shell ---------- */
.app { display: grid; grid-template-rows: var(--header-h) auto minmax(0, 1fr); height: 100dvh; }
.topbar {
  display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4);
  background: var(--surface); border-bottom: 1px solid var(--border); min-width: 0;
}
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand .ic-down { display: none; }
.brand-dir { font-weight: inherit; }
.brand.mood-up .brand-name, .brand.mood-up svg { color: var(--up); }
.brand.mood-up .brand-name { animation: ngu-flash 1.4s ease-in-out infinite; }
.brand.mood-up svg { animation: ngu-glow 1.4s ease-in-out infinite; }
.brand.mood-down .brand-name, .brand.mood-down svg { color: var(--down); }
.brand.mood-down .ic-up { display: none; } .brand.mood-down .ic-down { display: block; }
@keyframes ngu-flash { 0%, 100% { opacity: 1; text-shadow: 0 0 10px color-mix(in srgb, var(--up) 70%, transparent); } 50% { opacity: .45; text-shadow: none; } }
@keyframes ngu-glow { 0%, 100% { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--up) 80%, transparent)); } 50% { filter: none; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .brand.mood-up .brand-name, .brand.mood-up svg { animation: none; } }
.brand small { color: var(--muted); font-weight: 500; font-size: var(--text-xs); border: 1px solid var(--border); padding: 1px 6px; border-radius: 999px; }
.search { position: relative; flex: 0 1 360px; margin-left: var(--space-4); }
.search input {
  width: 100%; height: 34px; padding: 0 var(--space-3) 0 34px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font: inherit; outline: none;
}
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; color: var(--faint); }
.search kbd { position: absolute; right: 8px; top: 7px; font: 500 11px var(--mono); color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.results {
  position: absolute; top: 40px; left: 0; right: 0; z-index: 50; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; display: none;
}
.results.open { display: block; }
.results button { display: flex; width: 100%; gap: var(--space-3); align-items: baseline; padding: var(--space-2) var(--space-3); background: none; border: 0; text-align: left; }
.results button:hover, .results button.active { background: var(--surface-3); }
.results b { font-family: var(--mono); min-width: 64px; }
.results span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); font-size: var(--text-xs); color: var(--muted); white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.live { background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); animation: pulse 2s infinite; }
.dot.warn { background: var(--warn); } .dot.bad { background: var(--down); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
.acct { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.acct b { font-size: var(--text-sm); } .acct span { font-size: var(--text-xs); }
.icon-btn { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.icon-btn:hover { color: var(--text); border-color: var(--faint); }
.icon-btn svg { width: 16px; height: 16px; }
.btn { height: 32px; padding: 0 var(--space-3); border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { background: var(--down); border-color: var(--down); color: #fff; }

.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; min-height: 0; }
.panel { background: var(--surface); min-height: 0; display: flex; flex-direction: column; }
.panel + .panel { border-left: 1px solid var(--border); }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--divider); }
.panel-h h2 { margin: 0; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; }
.scroll::-webkit-scrollbar { width: 8px; } .scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* ---------- watchlist ---------- */
.wl-tools { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--divider); }
.wl-tools input, .wl-tools select, .field {
  height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--text-sm); padding: 0 var(--space-2); outline: none; min-width: 0;
}
.wl-tools input { flex: 1; }
.wl-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-2); padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--divider); cursor: pointer; width: 100%; text-align: left; background: none; border-left: 2px solid transparent;
  border-top: 0; border-right: 0;
}
.wl-row:hover { background: var(--surface-2); }
.wl-row.sel { background: var(--surface-3); border-left-color: var(--accent); }
.wl-sym { font: 600 var(--text-sm) var(--mono); display: flex; gap: 6px; align-items: center; }
.wl-px { font: 500 var(--text-sm) var(--mono); text-align: right; transition: background .6s; border-radius: 4px; padding: 0 3px; }
.wl-px.flash-up { background: var(--up-soft); } .wl-px.flash-down { background: var(--down-soft); }
.wl-chg { font-size: var(--text-xs); text-align: right; font-variant-numeric: tabular-nums; }
.tag { font: 600 10px var(--font); letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; }
.tag.put { background: var(--down-soft); color: var(--down); } .tag.call { background: var(--up-soft); color: var(--up); }
.tag.near { background: var(--warn-soft); color: var(--warn); }
.gauge { grid-column: 1 / -1; position: relative; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--surface-3); }
.gauge .zone { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border-left: 1px solid var(--band); border-right: 1px solid var(--band); }
.gauge .trig { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--faint); border-radius: 1px; }
.gauge .mark { position: absolute; top: -2px; width: 4px; height: 10px; margin-left: -2px; border-radius: 2px; background: var(--text); transition: left .5s; }
.gauge .mark.hot { background: var(--warn); } .gauge .mark.fire { background: var(--down); }

/* ---------- center ---------- */
.center { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) 240px; min-width: 0; }
.center.panel-min { grid-template-rows: auto minmax(0, 1fr) 39px; }
.center.panel-min .panel-tg svg { transform: rotate(180deg); }
.panel-tg { width: 28px; height: 28px; margin-left: var(--space-2); flex: none; }
.quote-h { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-6); padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--divider); }
.qh-id h1 { margin: 0; font: 600 var(--text-xl)/1.1 var(--font); letter-spacing: -.02em; display: flex; align-items: center; gap: var(--space-2); }
.qh-id p { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.qh-px .price { font: 600 var(--text-xl)/1.1 var(--mono); letter-spacing: -.02em; transition: color .3s; }
.qh-px .chg { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.stats { display: flex; gap: var(--space-5); margin-left: auto; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; } .stat span { font-size: var(--text-xs); color: var(--faint); } .stat b { font: 500 var(--text-sm) var(--mono); }
.chart-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--divider); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; }
.seg button { border: 0; background: none; height: 26px; padding: 0 10px; border-radius: 4px; font-size: var(--text-sm); color: var(--muted); }
.seg button.on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.legend { display: flex; gap: var(--space-4); margin-left: auto; font-size: var(--text-xs); color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; border-radius: 1px; }
.chart-wrap { position: relative; min-height: 0; }
#chart { position: absolute; inset: 0; }
#tabbody { overflow-x: auto; }
.chart-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: var(--text-sm); pointer-events: none; }
.ohlc { position: absolute; top: 8px; left: 12px; z-index: 3; font: 500 var(--text-xs) var(--mono); color: var(--muted); display: flex; gap: 10px; pointer-events: none; }
.ohlc b { color: var(--text); font-weight: 500; }

.bottom { border-top: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.tabs { display: flex; gap: var(--space-1); padding: 0 var(--space-4); border-bottom: 1px solid var(--divider); align-items: center; }
.tabs button { border: 0; background: none; height: 38px; padding: 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs .count { font-size: 11px; background: var(--surface-3); border-radius: 999px; padding: 0 6px; margin-left: 4px; color: var(--muted); }
.tabs select { margin-left: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th { position: sticky; top: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 500; font-size: var(--text-xs); color: var(--faint); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--divider); white-space: nowrap; }
td { padding: 7px var(--space-3); border-bottom: 1px solid var(--divider); white-space: nowrap; }
td.r, th.r { text-align: right; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--surface-2); }
.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--muted); font-size: var(--text-sm); }
.empty b { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.ev { font: 600 10px var(--font); letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); }
.ev.ENTRY { background: var(--accent-soft); color: var(--accent); } .ev.EXIT { background: var(--up-soft); color: var(--up); }
.ev.SKIP, .ev.UNFILLED { background: var(--warn-soft); color: var(--warn); } .ev.KILL { background: var(--down-soft); color: var(--down); }

/* ---------- right column ---------- */
.side-sec { padding: var(--space-4); border-bottom: 1px solid var(--divider); }
.side-sec h3 { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.kpi { background: var(--surface-2); border: 1px solid var(--divider); border-radius: var(--r); padding: var(--space-3); min-width: 0; }
.kpi-k { font-size: var(--text-xs); color: var(--faint); }
.kpi-v { font: 600 var(--text-lg)/1.25 var(--mono); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-s { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.meter { height: 4px; border-radius: 2px; background: var(--surface-3); margin-top: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s; }
.botview { display: grid; gap: var(--space-2); }
.bv-row { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.bv-row span { color: var(--muted); } .bv-row b { font: 500 var(--text-sm) var(--mono); }
.bv-gauge { position: relative; height: 34px; margin: var(--space-2) 0 var(--space-1); }
.bv-track { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--up-soft), var(--surface-3) 30%, var(--surface-3) 70%, var(--down-soft)); }
.bv-zone { position: absolute; top: 12px; height: 10px; border-left: 1px solid var(--band); border-right: 1px solid var(--band); background: var(--accent-soft); }
.bv-trig { position: absolute; top: 9px; width: 2px; height: 16px; background: var(--faint); }
.bv-lbl { position: absolute; top: 26px; transform: translateX(-50%); font-size: 10px; color: var(--faint); white-space: nowrap; }
.bv-mark { position: absolute; top: 4px; width: 0; height: 0; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--text); transition: left .5s; }
.verdict { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--text-sm); border: 1px solid var(--divider); }
.verdict.put { background: var(--down-soft); border-color: transparent; } .verdict.call { background: var(--up-soft); border-color: transparent; }
.trade { border: 1px solid var(--divider); background: var(--surface-2); border-radius: var(--r); padding: var(--space-3); display: grid; gap: 4px; margin-bottom: var(--space-2); }
.trade-top { display: flex; justify-content: space-between; align-items: center; }
.trade-top b { font-family: var(--mono); }
.trade small { color: var(--muted); font-size: var(--text-xs); font-family: var(--mono); }
.status { font-size: 11px; color: var(--muted); }
.banner { display: none; padding: var(--space-2) var(--space-4); background: var(--down-soft); color: var(--down); font-size: var(--text-sm); border-bottom: 1px solid var(--border); }
.banner.on { display: block; }
.demo { background: var(--warn-soft); color: var(--warn); }

/* skeleton */
.sk { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: sh 1.2s infinite; border-radius: 4px; color: transparent !important; }
@keyframes sh { to { background-position: -200% 0; } }

/* ---------- admin / login ---------- */
.page { height: calc(100dvh - var(--header-h)); overflow-y: auto; padding: var(--space-8) var(--space-6); }
.wrap { max-width: 980px; margin: 0 auto; display: grid; gap: var(--space-4); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-6); }
.card h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.card p.sub { margin: 0 0 var(--space-5); color: var(--muted); font-size: var(--text-sm); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.form-grid label, .lbl { display: block; font-size: var(--text-xs); color: var(--muted); margin-bottom: 6px; }
.form-grid .field, textarea.field { width: 100%; height: 36px; }
textarea.field { height: auto; padding: var(--space-2); font-family: var(--mono); line-height: 1.6; resize: vertical; }
.msg { padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--up-soft); color: var(--up); font-size: var(--text-sm); }
.msg.err { background: var(--down-soft); color: var(--down); }
.kill { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.login { max-width: 380px; margin: 10vh auto 0; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) { .layout { grid-template-columns: 260px minmax(0, 1fr) 300px; } .stats .hide-md { display: none; } }
@media (max-width: 1020px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100dvh; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .panel + .panel { border-left: 0; border-top: 1px solid var(--border); }
  .watch { order: 2; max-height: 420px; } .center { order: 1; grid-template-rows: auto 520px 300px; } .center.panel-min { grid-template-rows: auto 520px 39px; } .side { order: 3; }
  .acct, .top-right .pill.hide-sm { display: none; }
}
@media (max-width: 640px) {
  .topbar { gap: var(--space-2); padding: 0 var(--space-3); }
  .brand span, .brand small, .search kbd, #botpill { display: none; }
  .quote-h { padding: var(--space-3) var(--space-4); }
  .stats { gap: var(--space-3); }
  .search { margin-left: 0; flex: 1; }
  .stats { margin-left: 0; }
  .legend { display: none; }
}
.tabs { overflow-x: auto; } .tabs button { white-space: nowrap; flex: none; }

/* ---------- chart workspace ---------- */
.chart-area { container-type: inline-size; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); }
.chart-area:fullscreen { width: 100vw; height: 100vh; }
.chart-area svg, .ct-tools svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ct-bar { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border-bottom: 1px solid var(--divider); flex-wrap: wrap; position: relative; z-index: 6; }
.ct-tf button { padding: 0 7px; font-family: var(--mono); font-size: var(--text-xs); }
.ct-sep { width: 1px; height: 20px; background: var(--divider); }
.ct-btn { height: 30px; padding: 0 10px; font-size: var(--text-sm); color: var(--muted); }
.ct-btn:hover, .ct-btn.on { color: var(--text); }
.ct-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.ct-toggle:disabled { opacity: .4; cursor: not-allowed; }
.ct-btn .chev { width: 12px; height: 12px; opacity: .7; }
.ct-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font: 600 11px/18px var(--mono); text-align: center; }
.ct-count:empty { display: none; }
.ct-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.ct-scale button { padding: 0 8px; font-size: var(--text-xs); }
.ct-right .icon-btn { width: 30px; height: 30px; }
.dd { position: relative; }
.pop { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 180px; padding: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md, 8px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.pop.open { display: block; }
.pop-wide { min-width: 320px; max-height: min(70vh, 520px); overflow-y: auto; padding: 8px 10px 10px; }
.pop-right { left: auto; right: 0; }
.pop-item { display: block; width: 100%; text-align: left; border: 0; background: none; height: 32px; padding: 0 10px; border-radius: 4px; font-size: var(--text-sm); color: var(--text); }
.pop-item:hover { background: var(--surface-3); }
.pop-item.on { background: var(--accent-soft); color: var(--text); }
.pop-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 10px 2px 6px; }
.pop-h:first-child { margin-top: 2px; }
.ind-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 4px 2px; border-radius: 4px; }
.ind-row:hover { background: var(--surface-3); }
.ind-f { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ind-f label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--faint); }
.ind-f input[type=number] { width: 50px; height: 26px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font: 500 12px var(--mono); }
.ind-f input[type=color], .pop input[type=color] { width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: none; cursor: pointer; }
.chk { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); cursor: pointer; padding: 4px 2px; }
.chk input { accent-color: var(--accent); width: 15px; height: 15px; }
.seg-sm button { height: 24px; font-size: var(--text-xs); }
.btn-sm { height: 28px; font-size: var(--text-xs); margin: 2px 0; }
.ct-body { flex: 1; display: flex; min-height: 0; }
.ct-tools { width: 42px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-right: 1px solid var(--divider); overflow-y: auto; overflow-x: visible; }
.ct-tools button { width: 32px; height: 32px; border: 0; background: none; border-radius: 6px; color: var(--muted); display: grid; place-items: center; }
.ct-tools button:hover { background: var(--surface-2); color: var(--text); }
.ct-tools button.on { background: var(--accent-soft); color: var(--accent); }
.ct-tools-sep { width: 22px; height: 1px; background: var(--divider); margin: 4px 0; }
.ct-tools .dd .pop { top: 0; left: calc(100% + 6px); }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.pop-colors { min-width: 0; width: 136px; display: none; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pop-colors.open { display: grid; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface-2); box-shadow: 0 0 0 1px var(--border); }
.ct-main { position: relative; flex: 1; min-width: 0; min-height: 0; touch-action: none; }
.ct-chart { position: absolute; inset: 0; }
.ct-legend { position: absolute; top: 6px; left: 10px; right: 80px; z-index: 4; pointer-events: none; font: 500 var(--text-xs)/1.5 var(--mono); color: var(--muted); text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 2px var(--surface); }
.lg-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.lg-top b { color: var(--text); font-weight: 500; }
.lg-sym { font-family: var(--font); font-size: var(--text-sm); font-weight: 600 !important; }
.lg-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-legend .up { color: var(--up); } .ct-legend .down { color: var(--down); }
@media (max-width: 640px) {
  .ct-bar { gap: 6px; padding: 6px 8px; }
  .ct-sep { display: none; }
  .ct-right { margin-left: 0; }
  .ct-tf { max-width: 100%; overflow-x: auto; }
  .ct-tools { width: 36px; } .ct-tools button { width: 30px; height: 30px; }
  .pop-wide { min-width: 0; width: min(320px, calc(100vw - 24px)); }
  .ct-legend { right: 64px; } .lg-row { display: none; }
}

@container (max-width: 860px) { .ct-bar .lbl-long, .ct-sep { display: none; } .ct-btn { padding: 0 8px; } }
@container (max-width: 560px) { .ct-right { margin-left: 0; } }
.tabs #day { flex: none; width: auto; min-width: 120px; margin-left: auto; }

/* ---------- trading ---------- */
[hidden] { display: none !important; }
.side-tabs { margin: var(--space-3) var(--space-4) 0; display: flex; }
.side-tabs button { flex: 1; height: 30px; font-weight: 600; }
.tk-login { width: 100%; justify-content: center; }
.ticket { display: flex; flex-direction: column; gap: var(--space-3); }
.tk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--space-2); }
.tk-sym { font: 600 var(--text-lg, 18px) var(--font); margin-right: 8px; }
.tk-px { font: 600 var(--text-base, 15px) var(--mono); }
.tk-ba { display: flex; gap: 10px; font-size: var(--text-xs); color: var(--faint); } .tk-ba b { font: 500 var(--text-xs) var(--mono); }
.tk-asset { display: flex; } .tk-asset button { flex: 1; }
#tk-body { display: flex; flex-direction: column; gap: var(--space-3); }
.tk-side { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tk-side button { height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); font-weight: 600; color: var(--muted); }
.tk-side button.buy.on { background: var(--up); border-color: var(--up); color: #fff; }
.tk-side button.sell.on { background: var(--down); border-color: var(--down); color: #fff; }
.tk-pos { font-size: var(--text-xs); color: var(--muted); margin-top: -4px; }
.tk-pos b { color: var(--text); font-family: var(--mono); font-weight: 500; }
.link { border: 0; background: none; color: var(--accent); padding: 0 0 0 4px; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tk-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tk-f > span { font-size: var(--text-xs); color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.tk-f > span em { font-style: normal; color: var(--faint); }
.tk-in { width: 100%; height: 34px; font-family: var(--mono); font-size: var(--text-sm); }
select.tk-in { font-family: var(--font); }
.tk-row { display: flex; gap: var(--space-2); align-items: flex-end; }
.tk-row > .btn { flex: 1; justify-content: center; }
.tk-amt { display: flex; } .tk-amt button { flex: 1; height: 28px; }
.tk-quick { display: flex; gap: 4px; margin-top: 2px; }
.tk-quick button { flex: 1; height: 24px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 4px; font: 500 11px var(--mono); color: var(--muted); }
.tk-quick button:hover { color: var(--text); border-color: var(--accent); }
.chk.dis { opacity: .45; }
.tk-est { display: grid; gap: 4px; padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--divider); }
.tk-est div { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted); }
.tk-est b { font: 500 var(--text-sm) var(--mono); color: var(--text); }
.tk-est b.up { color: var(--up); } .tk-est b.down { color: var(--down); }
.tk-go { height: 40px; justify-content: center; font-weight: 600; width: 100%; color: #fff; }
.tk-go.buy { background: var(--up); border-color: var(--up); } .tk-go.sell { background: var(--down); border-color: var(--down); }
.tk-go:disabled { opacity: .6; }
.tk-confirm { border: 1px solid var(--border); border-radius: var(--r-md, 8px); padding: var(--space-4); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--space-3); }
.tk-confirm h4 { margin: 0; font-size: var(--text-base, 15px); }
.tk-confirm ul { margin: 0; padding-left: 18px; font-size: var(--text-sm); color: var(--muted); display: grid; gap: 4px; }
.tk-confirm p { margin: 0; font-size: var(--text-xs); }
.tk-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--faint); line-height: 1.5; }
.tk-hint { font-size: var(--text-xs); color: var(--faint); margin-top: -4px; }
.chain { max-height: 300px; overflow: auto; border: 1px solid var(--divider); border-radius: var(--r-sm); }
.chain .empty { padding: var(--space-5) var(--space-3); }
table.ct { font: 500 11px var(--mono); }
.ct th { position: sticky; top: 0; background: var(--surface-2); font: 600 10px var(--font); color: var(--faint); text-transform: uppercase; padding: 4px 3px; text-align: center; z-index: 1; }
.ct thead tr:nth-child(2) th { top: 21px; }
.ct th.c-h { color: var(--muted); }
.ct td { padding: 4px 3px; text-align: center; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.ct td.k { font-weight: 600; color: var(--text); background: var(--surface-2); }
.ct td.d { color: var(--faint); font-size: 10px; }
.ct td.itm { background: var(--accent-soft); }
.ct tr.atm td.k { box-shadow: inset 0 2px 0 var(--accent); }
.ct td.cq { cursor: pointer; border-radius: 3px; }
.ct td.cq.bid { color: var(--up); } .ct td.cq.ask { color: var(--down); }
.ct td.cq:hover { background: var(--surface-3); }
.ct td.cq.sel { background: var(--accent); color: #fff; }
.tk-legs { display: grid; gap: 6px; }
.tk-legs.empty-s { font-size: var(--text-xs); color: var(--faint); }
.leg { display: grid; grid-template-columns: 50px 42px 1fr auto 22px; gap: 6px; align-items: center; font-size: var(--text-xs); }
.leg-side { height: 26px; border-radius: 4px; border: 0; font: 700 11px var(--font); color: #fff; }
.leg-side.buy { background: var(--up); } .leg-side.sell { background: var(--down); }
.leg-r { height: 26px; padding: 0 4px; font: 500 12px var(--mono); text-align: center; }
.leg-n { font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leg-n em { font-style: normal; color: var(--warn); font-family: var(--font); }
.leg-p { font-family: var(--mono); color: var(--muted); }
.icon-x { width: 22px; height: 22px; border: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; border-radius: 4px; }
.icon-x:hover { background: var(--surface-3); color: var(--down); }
.payoff { display: grid; gap: 6px; }
.payoff svg { width: 100%; height: 84px; background: var(--surface-2); border-radius: var(--r-sm); border: 1px solid var(--divider); }
.payoff .pz { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.payoff .pn { stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.payoff .pp, .payoff .pl { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.payoff .pp { stroke: var(--up); } .payoff .pl { stroke: var(--down); }
.tab-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--divider); font-size: var(--text-xs); flex-wrap: wrap; }
.btn.danger-o { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, var(--border)); }
.btn.danger-o:hover { background: var(--down-soft); }
td.nowrap { white-space: nowrap; } td.nowrap .btn-sm { margin: 0 0 0 4px; }
tr.child td { color: var(--muted); font-size: var(--text-xs); }
.ost { font: 600 10px var(--font); text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); }
.ost.filled { background: var(--up-soft); color: var(--up); } .ost.canceled, .ost.expired, .ost.rejected { color: var(--faint); }
.ost.new, .ost.accepted, .ost.partially_filled, .ost.held, .ost.pending_new { background: var(--accent-soft); color: var(--accent); }
.tag { background: var(--surface-3); color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 100; max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: var(--r-md, 8px); background: var(--surface-3); border: 1px solid var(--border); color: var(--text); font-size: var(--text-sm); box-shadow: 0 12px 32px rgba(0,0,0,.35); transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: var(--down); }
@media (max-width: 1020px) { .side .scroll { max-height: none; } .chain { max-height: 360px; } }

/* ---------- v1.8.1 phone fixes ---------- */
.wrap { grid-template-columns: minmax(0, 1fr); }
.card { min-width: 0; }
@media (max-width: 1020px) {
  .layout.is-admin .side { order: 2; }
  .layout.is-admin .watch { order: 3; }
}
@media (max-width: 640px) {
  .page { padding: var(--space-4) var(--space-3); }
  .card { padding: var(--space-4); }
  .top-right { gap: 6px; }
  .top-right .btn { height: 32px; padding: 0 10px; font-size: 13px; }
  .hide-sm { display: none !important; }
  td.nowrap { white-space: normal; }
  td.nowrap .btn-sm { margin: 2px 0 2px 4px; }
  .tab-tools .faint { display: none; }
}
/* Phones zoom in on any text box smaller than 16px and stay zoomed. Keep them at 16px on touch screens. */
@media (pointer: coarse), (max-width: 640px) {
  input, select, textarea, .field, .tk-in { font-size: 16px !important; }
  .leg-r { font-size: 15px !important; }
}
@media (max-width: 640px) {
  #tabbody th, #tabbody td { padding-left: 8px; padding-right: 8px; }
  #tabbody td { white-space: normal; }
  #tabbody td.mono b { word-break: break-all; }
  td.nowrap { width: 92px; }
  td.nowrap .btn-sm { display: flex; width: 100%; justify-content: center; margin: 3px 0; }
}