/* AlgoIntraday ETF app (Etf.aspx): mobile-first, app-like. Light + dark follow the phone. Safe areas for notches / home bar. */
:root {
    --bg: #f2f3f7; --card: #ffffff; --card2: #f7f8fb; --text: #11151c; --muted: #6b7280; --line: #e4e7ee; --sep: rgba(60,60,67,.14);
    --brand: #1f5eff; --brand-2: #4f80ff; --brand-ink: #fff; --good: #0072b2; --good-bg: #e1f0fa; --bad: #d55e00; --bad-bg: #fdeee3; --warn: #a33d7a; --warn-bg: #f8e6f1; --line-a: #11151c; --line-v: #009e73;
    --tab-h: 58px; --top-h: 52px; --r: 16px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000; --card: #16181d; --card2: #1e2128; --text: #f2f4f8; --muted: #9aa3b2; --line: #2a2e37; --sep: rgba(255,255,255,.10);
        --brand: #4f80ff; --brand-2: #6d95ff; --good: #56b4e9; --good-bg: rgba(86,180,233,.16); --bad: #ff8c42; --bad-bg: rgba(255,140,66,.16); --warn: #e08fc0; --warn-bg: rgba(224,143,192,.14); --line-a: #f2f4f8; --line-v: #2fd1a0;
        --shadow: none;
    }
}
/* colours: up / profit = blue, down / loss = orange (colour-blind safe, Okabe-Ito). "Classic" (More > App) = green / red. */
html.classic-colors { --good: #0a8f5a; --good-bg: #e3f6ee; --bad: #d23c3c; --bad-bg: #fde8e8; --warn: #b26b00; --warn-bg: #fff3dc; --line-a: #1f5eff; --line-v: #8b5cf6; }
@media (prefers-color-scheme: dark) {
    html.classic-colors { --good: #34c77b; --good-bg: rgba(52,199,123,.14); --bad: #ff6b6b; --bad-bg: rgba(255,107,107,.14); --warn: #f0b04a; --warn-bg: rgba(240,176,74,.14); --line-a: #4f80ff; --line-v: #8b5cf6; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 var(--font); -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .muted { color: var(--muted); } .small { font-size: 13px; }

/* ------------------------------------------------------------------ top bar (large title) */
.m-top { position: sticky; top: 0; z-index: 20; background: var(--bg); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    padding: calc(env(safe-area-inset-top) + 6px) 16px 8px; border-bottom: .5px solid transparent; transition: border-color .2s; }
.m-top.scrolled { border-bottom-color: var(--sep); }
.m-top-row { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.m-top h1 { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot.ok { background: var(--good); } .dot.bad { background: var(--bad); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; color: var(--brand); cursor: pointer; flex: none; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ screens */
main { padding: 6px 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 20px); max-width: 720px; margin: 0 auto; }
.m-screen { animation: fadein .18s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ptr { height: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; color: var(--muted); font-size: 13px; transition: height .2s; }
.ptr.pull { transition: none; }

/* cards and grouped lists (iOS settings style) */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; margin: 0 0 14px; }
.card h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.sec-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 4px 6px; display: flex; justify-content: space-between; align-items: center; }
.group { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
.cell { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 50px; position: relative; width: 100%; background: none; border: 0; text-align: left; }
.cell + .cell::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--sep); }
button.cell { cursor: pointer; } button.cell:active { background: var(--card2); }
.cell .grow { flex: 1; min-width: 0; }
.cell .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .s { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .r { text-align: right; flex: none; }
.cell .chev { color: var(--muted); flex: none; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: .5px solid var(--sep); font-size: 14.5px; }
.kv:first-child { border-top: 0; }
.kv .k { color: var(--muted); } .kv .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* hero numbers */
.hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hero .big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.grid2 > * { min-width: 0; }
input[type=date] { min-width: 0; -webkit-appearance: none; appearance: none; min-height: 44px; }
.tile { background: var(--card2); border-radius: 12px; padding: 10px 12px; }
.tile .k { font-size: 12px; color: var(--muted); }
.tile .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* chips, badges */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--card2); color: var(--muted); white-space: nowrap; }
.chip.good { background: var(--good-bg); color: var(--good); } .chip.bad { background: var(--bad-bg); color: var(--bad); } .chip.warn { background: var(--warn-bg); color: var(--warn); } .chip.brand { background: var(--card2); background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.rank { width: 34px; height: 34px; border-radius: 10px; background: var(--card2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.rank.r1 { background: var(--brand); color: #fff; } .rank.r2, .rank.r3 { background: var(--card2); background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 650; font-size: 15.5px; cursor: pointer; background: var(--card2); color: var(--brand); min-height: 46px; }
.btn.block { width: 100%; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.buy { background: var(--good); color: #fff; }
.btn.sell { background: var(--bad); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:not(:disabled):active { transform: scale(.98); }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* segmented control + search */
.seg { display: flex; background: var(--card2); border-radius: 10px; padding: 2px; margin-bottom: 10px; }
.seg button { flex: 1; border: 0; background: none; padding: 7px 4px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.search { width: 100%; border: 0; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); padding: 11px 14px; margin-bottom: 10px; outline: none; font-size: 16px; }
.sticky-tools { position: sticky; top: calc(env(safe-area-inset-top) + 66px); z-index: 5; background: var(--bg); padding-top: 4px; }

/* progress to target */
.bar { height: 6px; border-radius: 99px; background: var(--card2); overflow: hidden; margin: 8px 0 4px; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.bar.good > i { background: var(--good); } .bar.bad > i { background: var(--bad); }

/* job progress */
.job { margin-top: 10px; }
.job .bar > i { transition: width .3s; }

/* forms (settings rendered by AlgoForm) */
.form .fgroup h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 6px; }
.form .fgrid { display: block; }
.form .frow { padding: 10px 0; border-top: .5px solid var(--sep); }
.form .frow:first-child { border-top: 0; }
.form label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.form .inline { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.form .help { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
    width: 100%; border: 1px solid var(--line); background: var(--card2); border-radius: 10px; padding: 10px 12px; font-size: 16px; outline: none; }
textarea { min-height: 140px; font-family: var(--mono); font-size: 13px; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 99px; background: var(--line); position: relative; flex: none; cursor: pointer; transition: background .2s; }
input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
input[type=checkbox]:checked { background: var(--good); }
input[type=checkbox]:checked::after { transform: translateX(20px); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* bottom tab bar */
.m-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; align-items: flex-start;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--card); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-top: .5px solid var(--sep); }
.m-tabs button { flex: 1; height: var(--tab-h); border: 0; background: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; cursor: pointer; position: relative; }
.m-tabs button svg { width: 25px; height: 25px; }
.m-tabs button.on { color: var(--brand); }
.m-tabs .badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; line-height: 17px; text-align: center; }

/* bottom sheet */
.sheet-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.38); display: flex; align-items: flex-end; justify-content: center; animation: fade .18s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; background: var(--bg); border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); animation: up .24s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translateY(100%); } }
.sheet .grab { width: 38px; height: 5px; border-radius: 99px; background: var(--line); margin: 4px auto 10px; }
.sheet h3 { font-size: 20px; margin: 4px 0 12px; }
.sheet .note { font-size: 13px; color: var(--muted); margin: 10px 2px; }
.warnbox { background: var(--warn-bg); color: var(--warn); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; margin: 10px 0; }
.badbox { background: var(--bad-bg); color: var(--bad); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; margin: 10px 0; }
.goodbox { background: var(--good-bg); color: var(--good); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; margin: 10px 0; }

/* skeleton while loading */
.skel { height: 74px; border-radius: var(--r); margin-bottom: 14px; background: linear-gradient(90deg, var(--card) 0%, var(--card2) 50%, var(--card) 100%); background-size: 200% 100%; animation: sh 1.2s infinite; }
@keyframes sh { to { background-position: -200% 0; } }

/* toast (Algo.toast) */
#toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px); z-index: 60; background: #1f2430; color: #fff; border-radius: 14px; padding: 12px 14px; font-size: 14px;
    opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: none; max-width: 560px; margin: 0 auto; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#toast.show { opacity: 1; transform: none; }
#toast.err { background: var(--bad); }

canvas { width: 100%; display: block; }
.empty { text-align: center; color: var(--muted); padding: 24px 10px; font-size: 14px; }
.list-more { width: 100%; }
@media (min-width: 760px) { .m-top h1 { font-size: 34px; } }

/* update50: unchecked ETFs (not ranked, not bought) */
.cell.dim .t, .cell.dim .s, .cell.dim .num { opacity: .55; }
label.cell { cursor: pointer; }

/* update51: low volume */
.warn, .cell .s.warn, .kv .v .warn { color: var(--warn); }

/* update53: settings tabs */
#mt-seg { margin-bottom: 12px; }
.form .ftabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px -4px 6px; padding: 2px 4px 8px; border-bottom: .5px solid var(--sep); }
.form .ftabs::-webkit-scrollbar { display: none; }
.form .ftabs button { flex: none; border: 0; border-radius: 99px; padding: 7px 13px; font-size: 13.5px; font-weight: 600; background: var(--card2); color: var(--muted); cursor: pointer; white-space: nowrap; }
.form .ftabs button.on { background: var(--brand); color: #fff; }
.form .inline { justify-content: space-between; }
.form .inline .grow { flex: 1; min-width: 0; }
.form .hbtn { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-left: 7px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); font: italic 700 11.5px Georgia, serif; vertical-align: 1px; cursor: pointer; padding: 0; }
.form .help { background: var(--card2); border-radius: 10px; padding: 8px 10px; margin-top: 6px; line-height: 1.45; }
.savebar { position: sticky; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px); z-index: 4; margin: 4px 0 12px; }
.savebar .btn { box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.sumcard .kv .v { text-align: right; max-width: 70%; }

/* update54: one-line notes on the ETFs rank view */
.note-line { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: var(--card); color: var(--muted); border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.note-line .grow { flex: 1; min-width: 0; }
.note-line .link { color: var(--brand); font-weight: 600; white-space: nowrap; }
.note-line.warn { color: var(--warn); background: var(--warn-bg); box-shadow: none; }

/* update56 */
.btn.bad { color: var(--bad); background: var(--bad-bg); }
.btn.rm { color: var(--muted); font-weight: 500; padding-left: 6px; padding-right: 6px; }

/* update58: signed out (sign-in screen only) */
body.signed-out #m-tabs, body.signed-out #m-refresh, body.signed-out .m-sub { display: none !important; }
body.signed-out main { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--card2); padding: 6px 8px; border-radius: 8px; display: block; }

/* update58: holdings window (every holding, target price + progress) */
.hsum .hl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hsum .hl.big { font-size: 22px; font-weight: 700; margin-top: 2px; }
.hgroup { padding: 0; }
.hrow { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: .5px solid var(--sep); padding: 12px 16px; font: inherit; color: inherit; cursor: pointer; }
.hrow:first-child { border-top: 0; }
.hrow .hl { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.hrow .hl.big { font-size: 16.5px; font-weight: 600; margin: 4px 0; }
.hrow .t1 { background: var(--card2); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
.tgt { margin-top: 8px; }
.tbar { height: 6px; border-radius: 99px; background: var(--card2); overflow: hidden; margin-bottom: 4px; }
.tbar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s; }
.tbar.done i { background: var(--good); }
.hrow .hl.small { font-size: 12px; }
.ad-slot { margin: 12px 0; min-height: 60px; }
.card .note { font-size: 13px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }

/* update59: backtest comparison table */
table.cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.cmp th, table.cmp td { padding: 7px 6px; border-bottom: .5px solid var(--sep); text-align: right; white-space: nowrap; }
table.cmp th:first-child, table.cmp td:first-child { text-align: left; white-space: normal; color: var(--muted); }
table.cmp th { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* update60: value sets */
.vsets { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.vset { background: var(--card2); border-radius: 12px; padding: 10px 12px; }
.vset label { display: block; margin-top: 8px; }
.vset input { width: 100%; }

/* update62: ETF chart */
.chart { background: var(--card); border-radius: 14px; padding: 10px; margin-bottom: 12px; box-shadow: var(--shadow); }
.chart.compact { background: transparent; box-shadow: none; padding: 0; margin: 10px 0 0; }
.chart canvas { display: block; width: 100%; touch-action: pan-y; }
.ch-ctl { gap: 8px; margin-bottom: 6px; }
.ch-ctl .seg { margin: 0; }
.ch-range { flex: 1; }
.ch-tip { min-height: 18px; margin-bottom: 4px; }
.ch-legend { margin-top: 4px; line-height: 1.5; }
/* Intraday: backtest value-set table (A / B / C) */
table.vtab td { padding: 4px 4px; vertical-align: middle; }
table.vtab td:first-child { font-size: 12.5px; min-width: 120px; }
table.vtab td input[type=number], table.vtab td input[type=time], table.vtab td select { width: 100%; min-width: 74px; max-width: 140px; padding: 6px 6px; font-size: 14px; min-height: 34px; }
table.vtab tr.diff td:first-child { color: var(--brand); font-weight: 600; }
table.vtab th { text-align: left; }
table.cmp3 td:first-child { min-width: 110px; }
table.cmp3 td:not(:first-child), table.cmp3 th:not(:first-child) { white-space: normal; min-width: 76px; max-width: 120px; overflow-wrap: normal; }
.cell .s.wrap { white-space: normal; }

/* ---- v2: switch, sector performance bars, members table, chart controls ---- */
.switch { position: relative; display: inline-block; width: 50px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 30px; transition: background .2s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 26px; height: 26px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + span { background: var(--good); }
.switch input:checked + span::before { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.secp-head { display: flex; gap: 12px; align-items: center; }
.secp-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--good-bg); color: var(--good); display: flex; align-items: center; justify-content: center; flex: none; }
.secp-ic svg { width: 24px; height: 24px; }
.secp-t { font-weight: 800; font-size: 19px; }
.pchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pchips button { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 18px; padding: 5px 13px; font-size: 13px; font-weight: 700; cursor: pointer; }
.pchips button.on { background: var(--good-bg); color: var(--good); border-color: var(--good); }
.hbars { display: flex; flex-direction: column; gap: 2px; }
.hb { all: unset; display: grid; grid-template-columns: minmax(84px, 34%) 1fr; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 8px; cursor: pointer; }
.hb.sel { background: var(--card2); }
.hb .hn { font-size: 13px; text-align: right; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb .hn i { font-style: normal; color: var(--brand); font-size: 9px; margin-left: 3px; vertical-align: 2px; }
.hb .ht { position: relative; height: 22px; margin: 0 52px; }
.hb .hz { position: absolute; top: -3px; bottom: -3px; border-left: 1px dashed var(--line); }
.hb .hv { position: absolute; top: 3px; height: 16px; border-radius: 3px; }
.hb .hv.up { background: var(--good); } .hb .hv.dn { background: var(--bad); }
.hb .hl { position: absolute; top: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-h, .mt-r { display: grid; grid-template-columns: 1fr 88px 104px; gap: 8px; padding: 10px 16px; align-items: center; }
.mt-h { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; border-top: .5px solid var(--sep); border-bottom: .5px solid var(--sep); background: var(--card2); }
.mt-h span:not(:first-child), .mt-r span:not(:first-child) { text-align: right; }
.mt-r { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 1fr 88px 104px; gap: 8px; padding: 11px 16px; align-items: center; cursor: pointer; font-size: 14.5px; border-bottom: .5px solid var(--sep); }
.mt-r .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.mt-r span, .mt-h span { white-space: nowrap; }
.mt-r:last-child { border-bottom: 0; }
.ind-row { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.ind-row { gap: 6px; }
.ind-row label { display: inline-flex; cursor: pointer; }
.ind-row input { display: none; }
.ind-row span { border: 1px solid var(--line); border-radius: 14px; padding: 4px 10px; font-weight: 600; color: var(--muted); }
.ind-row input:checked + span { background: var(--card2); color: var(--text); border-color: var(--muted); }
.ch-tip { min-height: 18px; margin-bottom: 4px; line-height: 1.35; }
.ch-legend { margin-top: 4px; line-height: 1.5; }
#m-fno .good, #m-fno .bad { font-weight: 700; }
/* ---- v3: strategy quick settings, trade card in the chart ---- */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 10px; }
.quick label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); min-width: 0; }
.quick select, .quick input { min-height: 38px; padding: 6px 8px; font-size: 14.5px; width: 100%; }
.trade-card { padding: 12px 14px; margin-bottom: 10px; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 8px; font-size: 13.5px; }
.tgrid > div { display: flex; flex-direction: column; min-width: 0; }
.tgrid .k { color: var(--muted); font-size: 11.5px; }
.tgrid .v { font-weight: 600; font-variant-numeric: tabular-nums; }
/* ---- v4: full-screen chart (desktop / tablet), larger chart on phones ---- */
.cs-head { display: flex; align-items: center; gap: 10px; }
.cs-head h3 { flex: 1; margin: 4px 0 10px; }
.icon-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--card2); color: var(--text); font-size: 17px; cursor: pointer; flex: none; }
.cs-ctrl .pchips { margin-bottom: 6px; }
.cs-ctrl .pchips span { display: contents; }
.sheet.full .chart { margin-bottom: 8px; }
@media (min-width: 700px) {
  .sheet-back.full { align-items: stretch; }
  .sheet.full { max-width: none; width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: 10px 20px 14px; display: flex; flex-direction: column; overflow: hidden; }
  .sheet.full .grab { display: none; }
  .sheet.full .cs-ctrl { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
  .sheet.full .cs-ctrl .seg { width: 330px; margin: 0; }
  .sheet.full .cs-ctrl .pchips, .sheet.full .cs-ctrl .ind-row { margin: 0; }
  .sheet.full .cs-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin-top: 10px; }
  .sheet.full .cs-main { min-width: 0; overflow: hidden; }
  .sheet.full .cs-side { overflow: auto; min-height: 0; }
}
@media (min-width: 700px) and (max-width: 1000px) { .sheet.full .cs-wrap { grid-template-columns: minmax(0, 1fr) 260px; } }
/* ---- v4: Analysis tab ---- */
.pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; }
.pills::-webkit-scrollbar { display: none; }
.pills button { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 18px; padding: 7px 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.pills button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cell .rank { width: 22px; flex: none; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.search-box { position: relative; }
.sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: -6px; max-height: 60vh; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.score-t td { vertical-align: middle; }
.score-t td:last-child { width: 44px; text-align: right; }
a.cell { text-decoration: none; color: inherit; }
/* ---- v6: F&O advances / declines card ---- */
.ad-big { display: flex; gap: 14px; align-items: baseline; margin-top: 10px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ad-big .muted { font-size: 16px; font-weight: 700; }
.ad-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; margin-top: 8px; background: var(--card2); }
.ad-bar i { display: block; height: 100%; }
.ad-bar .up { background: var(--good); } .ad-bar .dn { background: var(--bad); } .ad-bar .un { background: var(--line); }
#bd-chart { display: block; width: 100%; }
/* ---- v12: chart zoom / scroll ---- */
.zoom-btns { display: flex; gap: 4px; flex: none; }
.zoom-btns button { border: 1px solid var(--line); background: var(--card2); color: var(--text); border-radius: 8px; min-width: 32px; height: 28px; padding: 0 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
.chart canvas { touch-action: none; cursor: crosshair; }
/* ---- v16: chart pop-up previous / next and search ---- */
.cs-head { flex-wrap: wrap; }
.cs-head h3 { min-width: 120px; }
.cs-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-nav .btn[disabled] { opacity: .4; }
.cs-search { position: relative; }
.cs-search input { width: 200px; height: 34px; padding: 4px 10px; margin: 0; }
.cs-sug { position: absolute; right: 0; top: 38px; z-index: 30; width: 280px; max-height: 320px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.cs-sug .cell { width: 100%; text-align: left; }
.noanim, .noanim .sheet { animation: none !important; }
@media (max-width: 700px) {
    .cs-head h3 { flex-basis: calc(100% - 56px); }
    .cs-nav { order: 3; width: 100%; margin-bottom: 8px; }
    .cs-search { flex: 1; } .cs-search input { width: 100%; }
    .cs-sug { left: 0; right: auto; width: 100%; }
}
/* ---- v17: stock menu (hover a name / long-press it) ---- */
.hov-menu { position: fixed; z-index: 200; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 6px; }
.hov-menu .hm-h { font-weight: 800; padding: 4px 10px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.hov-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.hov-menu button:hover { background: var(--card2); }
[data-chart], [data-astock] { -webkit-touch-callout: none; }
/* ---- v24: Analysis tabs wrap (11 tabs) ---- */
.pills.a-tabs { flex-wrap: wrap; overflow: visible; white-space: normal; }
.cell .s.wrap { white-space: normal; overflow: visible; text-overflow: clip; }