:root {
  --bg: #0a0d12; --panel: #10151d; --panel2: #151b25; --line: #222b38; --line2: #2c3646;
  --text: #e6ebf2; --muted: #8a96a8; --dim: #5d697b;
  --up: #22c55e; --down: #ef4444; --warn: #f59e0b; --accent: #60a5fa; --violet: #a78bfa; --cyan: #22d3ee;
  --band90: rgba(96, 165, 250, 0.12); --band50: rgba(96, 165, 250, 0.24);
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
}
:root { color-scheme: dark; }
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3b4658; background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--muted); } .dim { color: var(--dim); } .warn { color: var(--warn); }

header.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: rgba(10, 13, 18, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; letter-spacing: 0.3px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand svg { width: 22px; height: 22px; }
.search { position: relative; flex: 1; max-width: 420px; }
.search input { width: 100%; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); padding: 8px 12px; border-radius: 8px; font-size: 14px; outline: none; }
.search input:focus { border-color: var(--accent); }
.suggest { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; display: none; }
.suggest div { padding: 7px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.suggest div:hover, .suggest div.sel { background: var(--line); }
.live { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dot.on { background: var(--up); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: pulse 2s infinite; }
.dot.load { background: var(--warn); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

main { max-width: 1400px; margin: 0 auto; padding: 18px 20px 60px; display: grid; gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.card h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card h2 .tag { margin-left: auto; text-transform: none; letter-spacing: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .grid2, .grid3 { grid-template-columns: 1fr; } .live { margin-left: 0; } main { padding: 12px 12px 40px; }
  header.top { flex-wrap: wrap; padding: 10px 16px; } .search { order: 3; flex-basis: 100%; max-width: none; }
  .seg { flex-wrap: wrap; } .verdict { grid-template-columns: 1fr 1fr; } .scopes { grid-template-columns: 1fr 1fr; }
  .kv, .kv3 { grid-template-columns: 1fr; } .trade { grid-template-columns: 1fr; }
}

.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.quote .sym { font-size: 13px; color: var(--muted); }
.quote .name { font-size: 22px; font-weight: 650; margin: 2px 0 6px; }
.quote .px { font-size: 40px; font-weight: 700; font-family: var(--mono); letter-spacing: -1px; transition: color 0.4s; }
.quote .chg { font-size: 16px; font-family: var(--mono); margin-left: 10px; }
.flash-up { animation: fu 1s; } .flash-down { animation: fd 1s; }
@keyframes fu { 0% { color: var(--up); text-shadow: 0 0 14px rgba(34,197,94,.6); } }
@keyframes fd { 0% { color: var(--down); text-shadow: 0 0 14px rgba(239,68,68,.6); } }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); color: var(--muted); }
.pill b { color: var(--text); font-weight: 600; }
.verdict { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.verdict .v { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.verdict .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.verdict .big { font-size: 22px; font-weight: 700; font-family: var(--mono); }
.verdict .sub { font-size: 12px; color: var(--muted); }

.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.seg button, .chip { background: none; border: 0; color: var(--muted); padding: 6px 10px; font: 600 12px var(--mono); cursor: pointer; }
.seg button.on { background: var(--accent); color: #06101f; }
.seg button:hover:not(.on) { color: var(--text); background: var(--line); }
.chip { border: 1px solid var(--line2); border-radius: 999px; padding: 4px 10px; font-family: inherit; font-weight: 500; }
.chip.on { color: var(--text); border-color: var(--accent); background: rgba(96,165,250,.12); }
.chip i { display: inline-block; width: 10px; height: 3px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }
canvas { display: block; width: 100%; height: 100%; }
/* chart + paper trading workspace */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1150px) { .workspace { grid-template-columns: minmax(0, 1fr); } }
.chartcard { padding: 12px; }
.chartcard .toolbar { margin-bottom: 8px; }
.overlays .chip { padding: 3px 9px; font-size: 12px; }
.chartwrap { position: relative; height: 520px; border: 1px solid var(--line); border-radius: 8px; background: #0c1017; overflow: hidden; }
#chart { cursor: crosshair; touch-action: pan-y; }
.legend { position: absolute; top: 8px; left: 10px; right: 80px; font: 12px var(--mono); color: var(--muted); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .chartwrap { height: 360px; } .legend { right: 10px; font-size: 11px; } }
.charthint { font-size: 11px; color: var(--dim); margin-top: 8px; }
.papercard h2 .chip { padding: 2px 10px; font-size: 11px; }
.acct { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 12px; }
.acct > div { display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.acct > div:first-child { grid-column: 1 / -1; font-size: 15px; }
.acct span { color: var(--muted); }
.ticket { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.ticket label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.ticket label:first-of-type { grid-column: 1 / -1; }
.ticket input { background: var(--bg); border: 1px solid var(--line2); color: var(--text); border-radius: 6px; padding: 7px 9px; font: 14px var(--mono); outline: none; width: 100%; }
.ticket input:focus { border-color: var(--accent); }
.sidebtns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sidebtns button { border: 1px solid var(--line2); background: var(--bg); color: var(--muted); padding: 8px; border-radius: 7px; font-weight: 700; cursor: pointer; }
.sidebtns button.on:first-child { background: rgba(34,197,94,.15); border-color: var(--up); color: var(--up); }
.sidebtns button.on:last-child { background: rgba(239,68,68,.15); border-color: var(--down); color: var(--down); }
.ticketfoot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.place { grid-column: 1 / -1; border: 0; border-radius: 8px; padding: 10px; font-weight: 700; font-size: 14px; cursor: pointer; color: #06101f; background: var(--up); }
.place.short { background: var(--down); color: #fff; }
.place:hover { filter: brightness(1.1); }
.hint { grid-column: 1 / -1; font-size: 12px; color: var(--muted); min-height: 32px; }
.papercard table td, .papercard table th { padding: 6px 5px; font-size: 12px; }
.papercard td .dim { font-size: 11px; }
.empty { font-size: 12px; padding: 10px 0; }
.tip { position: absolute; pointer-events: none; background: rgba(16,21,29,.96); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; font-size: 12px; display: none; min-width: 170px; z-index: 5; }
.tip .r { display: flex; justify-content: space-between; gap: 14px; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover { background: var(--panel2); }
.tablewrap { overflow-x: auto; }
.dir { font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 5px; }
.dir.UP { background: rgba(34,197,94,.14); color: var(--up); } .dir.DOWN { background: rgba(239,68,68,.14); color: var(--down); } .dir.FLAT { background: var(--line); color: var(--muted); }
.conf { display: inline-flex; align-items: center; gap: 6px; }
.conf .bar { width: 60px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.conf .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--warn), var(--accent)); }
.tick { font-size: 11px; font-family: var(--mono); }
.rowflash { animation: rf 1.4s; }
@keyframes rf { 0% { background: rgba(96,165,250,.18); } }

.layerhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.layerhead .n { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.layerhead .t { font-weight: 650; font-size: 15px; }
.layerhead .badge { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); }
.layerhead .badge.live { border-color: rgba(34,197,94,.4); color: var(--up); }
.meter { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(239,68,68,.5), var(--line) 50%, rgba(34,197,94,.5)); margin: 4px 0 14px; }
.meter i { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: var(--text); transform: translateX(-2px); transition: left .6s; }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; font-size: 13px; }
.kv div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 3px 0; gap: 8px; }
.kv span:first-child { color: var(--muted); }
.kv3 { grid-template-columns: repeat(3, 1fr); }
.sub-h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 14px 0 6px; }
.trade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade > div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel2); }
.trade .h { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding-top: 6px; position: relative; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.bars .b i { width: 100%; border-radius: 3px 3px 0 0; display: block; }
.bars .b i.neg { border-radius: 0 0 3px 3px; }
.bars .b span { font-size: 10px; color: var(--dim); margin-top: 3px; }
.bars .b.cur span { color: var(--text); font-weight: 700; }
.bars .zero { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line2); }
.news { max-height: 420px; overflow-y: auto; margin-top: 8px; padding-right: 4px; }
.news .it { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.news .s { font: 700 11px var(--mono); text-align: center; border-radius: 5px; padding: 2px 0; height: fit-content; }
.news .meta { font-size: 11px; color: var(--dim); margin-top: 2px; }
.news .tg { font-size: 10px; padding: 0 5px; border-radius: 4px; background: var(--line); color: var(--muted); margin-left: 4px; }
.scopes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.scopes > div { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; }
.scopes .k { font-size: 11px; color: var(--muted); } .scopes .v { font: 700 16px var(--mono); }
.cat { display: grid; grid-template-columns: 170px 1fr 60px 120px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
@media (max-width: 760px) { .cat { grid-template-columns: 1fr 70px; } .cat .hide-sm { display: none; } }
.stressbar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.stressbar i { display: block; height: 100%; }
.scen { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.cat .ctrl { grid-column: 1 / -1; font-size: 11px; color: var(--dim); margin-top: -3px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); }
.gauge { display: flex; flex-direction: column; align-items: center; }
.drv { display: grid; grid-template-columns: 1fr 90px 90px; gap: 8px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.drv .hb { position: relative; height: 10px; background: var(--panel2); border-radius: 3px; }
.drv .hb i { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.drv .hb::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1px solid var(--line2); }
.lyr { font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-right: 6px; font-family: var(--mono); text-transform: uppercase; }
.msg { font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
details { color: var(--muted); font-size: 13px; }
details summary { cursor: pointer; color: var(--text); font-weight: 600; }
details code { font-family: var(--mono); color: var(--cyan); font-size: 12px; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,13,18,.82); z-index: 50; flex-direction: column; gap: 14px; }
.overlay.hidden { display: none; }
.spinner { width: 42px; height: 42px; border: 3px solid var(--line2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.8; }
.disclaimer { font-size: 12px; color: var(--dim); border-top: 1px solid var(--line); padding-top: 12px; }