:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #111419;
  --panel-2: #151920;
  --line: #272c34;
  --text: #f3f5f7;
  --muted: #8d96a3;
  --green: #2fd08b;
  --red: #f05d67;
  --amber: #e4b34b;
  --blue: #5ca9f6;
  --radius: 6px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, "Microsoft YaHei", sans-serif; font-size: 14px; letter-spacing: 0; }
button, select { font: inherit; }
.topbar { height: 64px; padding: 0 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: #0e1115; position: sticky; top: 0; z-index: 20; }
.brand, .status-line, .signal-row, .legend, .filters { display: flex; align-items: center; }
.brand { gap: 11px; }
.mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--text); color: var(--bg); border-radius: var(--radius); font-weight: 800; }
.brand div { display: grid; gap: 2px; }
.brand strong { font-size: 15px; }
.brand div span { color: var(--muted); font: 10px monospace; }
.status-line { gap: 9px; color: var(--muted); font: 12px monospace; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(228,179,75,.12); }
.dot.ok { background: var(--green); box-shadow: 0 0 0 3px rgba(47,208,139,.12); }
.dot.bad { background: var(--red); box-shadow: 0 0 0 3px rgba(240,93,103,.12); }
.divider { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.icon-button { width: 30px; height: 30px; border: 1px solid var(--line); color: var(--text); background: var(--panel); border-radius: var(--radius); cursor: pointer; font-size: 18px; }
.icon-button:active { transform: translateY(1px); }
main { width: min(1540px, calc(100% - 32px)); margin: 16px auto 40px; }
.error-banner { border: 1px solid rgba(240,93,103,.5); color: #ffadb3; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius); background: rgba(240,93,103,.08); }
.signal-strip { border: 1px solid var(--line); background: var(--panel); display: grid; grid-template-columns: minmax(300px, 2fr) 1fr repeat(4, minmax(100px, .7fr)); min-height: 132px; border-radius: var(--radius); overflow: hidden; }
.signal-strip > div { padding: 18px; border-right: 1px solid var(--line); }
.signal-strip > div:last-child { border-right: 0; }
.label, .metric span, .level span { margin: 0 0 9px; color: var(--muted); font: 11px monospace; text-transform: uppercase; }
.signal-row { gap: 12px; }
.direction { font-size: 31px; line-height: 1; }
.direction.short { color: var(--red); }
.direction.long { color: var(--green); }
.direction.flat { color: var(--amber); }
.setup { padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; color: #bcc4ce; font: 11px monospace; }
.reason { color: var(--muted); margin: 12px 0 0; max-width: 66ch; line-height: 1.5; }
.quote strong { display: block; font: 34px monospace; }
.quote span { display: block; margin-top: 8px; color: var(--muted); font: 11px monospace; }
.metric { display: flex; flex-direction: column; justify-content: center; }
.metric strong { font: 22px monospace; }
.level-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.level { position: relative; padding: 15px 17px; border-right: 1px solid var(--line); min-height: 80px; }
.level:last-child { border: 0; }
.level.wide { grid-column: span 2; }
.level strong { font: 21px monospace; }
.level em { display: block; color: var(--muted); font: normal 11px monospace; margin-top: 6px; }
.level i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.call { background: var(--red); } .put { background: var(--green); } .flip { background: var(--amber); } .vwap { background: var(--blue); }
.chart-section, .history-section { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.section-head { min-height: 68px; padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-head h1, .section-head h2 { margin: 0; font-size: 16px; }
.section-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.legend { gap: 16px; color: var(--muted); font-size: 11px; flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 16px; height: 2px; }
.price-key { background: var(--text); } .call-key { background: var(--red); } .put-key { background: var(--green); } .flip-key { background: var(--amber); } .vwap-key { background: var(--blue); }
.long-key, .short-key, .exit-key { width: 8px !important; height: 8px !important; border-radius: 50%; }
.long-key { background: var(--green); } .short-key { background: var(--red); } .exit-key { background: var(--text); }
.chart-wrap { height: 360px; position: relative; padding: 10px; }
canvas { width: 100%; height: 100%; display: block; }
.tooltip { position: absolute; pointer-events: none; background: #090b0e; border: 1px solid #3a414d; padding: 9px 10px; border-radius: 4px; font: 11px/1.55 monospace; box-shadow: 0 8px 25px rgba(0,0,0,.35); }
.history-head { align-items: flex-end; }
.filters { gap: 10px; }
.filters label { display: grid; gap: 5px; color: var(--muted); font: 10px monospace; text-transform: uppercase; }
select { color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 7px 28px 7px 9px; min-width: 120px; }
.table-wrap { overflow: auto; max-height: 500px; }
table { border-collapse: collapse; width: 100%; min-width: 920px; }
th { position: sticky; top: 0; background: var(--panel-2); z-index: 2; color: var(--muted); text-align: left; font: 10px monospace; text-transform: uppercase; padding: 10px 13px; border-bottom: 1px solid var(--line); }
td { padding: 11px 13px; border-bottom: 1px solid #20242b; font-size: 12px; white-space: nowrap; }
td small { color: var(--muted); font: 10px monospace; }
td b { margin-left: 4px; font: 9px monospace; }
tr:hover td { background: #14181e; }
td.reason-cell { white-space: normal; min-width: 300px; color: var(--muted); }
.tag { font: 10px monospace; border: 1px solid var(--line); border-radius: 3px; padding: 3px 5px; }
.tag.short { color: var(--red); border-color: rgba(240,93,103,.35); }
.tag.long { color: var(--green); border-color: rgba(47,208,139,.35); }
.tag.flat { color: var(--amber); border-color: rgba(228,179,75,.35); }
.positive { color: var(--green); } .negative { color: var(--red); }
.empty { text-align: center; color: var(--muted); height: 120px; }
@media (max-width: 1050px) {
  .signal-strip { grid-template-columns: 2fr 1fr repeat(2, 1fr); }
  .signal-strip > div { border-bottom: 1px solid var(--line); }
  .level-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .topbar { padding: 0 14px; }
  .status-line .divider, #marketTime { display: none; }
  main { width: calc(100% - 20px); margin-top: 10px; }
  .signal-strip { grid-template-columns: 1fr 1fr; }
  .signal-main { grid-column: span 2; }
  .signal-strip > div { padding: 14px; }
  .level-grid { grid-template-columns: repeat(2, 1fr); }
  .level.wide { grid-column: span 2; }
  .section-head, .history-head { align-items: flex-start; flex-direction: column; }
  .legend { gap: 9px; }
  .chart-wrap { height: 300px; }
  .filters { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .filters label:first-child { grid-column: span 2; }
  select { width: 100%; min-width: 0; }
}
.auth-page { min-height: 100dvh; display: grid; place-items: center; background: #0b0d10; }
.auth-shell { width: min(420px, calc(100% - 28px)); margin: 0; }
.auth-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--panel); }
.auth-copy { margin: 44px 0 28px; }
.auth-copy h1 { margin: 0; font-size: 27px; }
.auth-copy p:last-child { color: var(--muted); line-height: 1.5; margin-bottom: 0; }
.auth-panel form { display: grid; gap: 16px; }
.auth-panel form label { display: grid; gap: 7px; color: var(--muted); font: 11px monospace; text-transform: uppercase; }
.auth-panel input { width: 100%; border: 1px solid #353c47; border-radius: 4px; padding: 11px 12px; color: var(--text); background: #0d1014; outline: none; }
.auth-panel input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(92,169,246,.12); }
.auth-panel input[readonly] { color: #aab2bd; background: #14181e; }
.auth-panel button { margin-top: 4px; padding: 12px; border: 0; border-radius: 4px; color: #08110d; background: var(--green); font-weight: 700; cursor: pointer; }
.auth-panel button:active { transform: translateY(1px); }
.auth-error { margin: 0; padding: 9px 10px; border: 1px solid rgba(240,93,103,.4); border-radius: 4px; color: #ffadb3; background: rgba(240,93,103,.08); }
.auth-note { margin: 20px 0 0; color: #727b87; font-size: 11px; line-height: 1.5; }