* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg-0: #04060e; --bg-1: #0a0e1a; --bg-2: #101628; --bg-3: #151d33;
  --bd-1: #1a2340; --bd-2: #243052; --bd-3: #2e3d63;
  --tx-1: #e8ecf4; --tx-2: #8892a8; --tx-3: #4e5568; --tx-4: #363d4f;
  --red: #ef4444; --red-lt: #ff6b6b; --red-bg: rgba(239,68,68,.07);
  --green: #22c55e; --green-lt: #4ade80; --green-bg: rgba(34,197,94,.07);
  --yellow: #fbbf24; --yellow-bg: rgba(251,191,36,.07);
  --blue: #58a6ff; --blue-bg: rgba(88,166,255,.07);
  --cyan: #22d3ee; --cyan-bg: rgba(34,211,238,.07);
  --purple: #a78bfa; --gold: #d4a843;
  --grad-blue: linear-gradient(135deg, #58a6ff, #2563eb);
  --grad-gold: linear-gradient(135deg, #d4a843, #b8860b);
  --shadow-1: 0 1px 3px rgba(0,0,0,.3);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
}

body { background: var(--bg-0); color: var(--tx-1); font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 13px; line-height: 1.65; min-height: 100vh; }
#app { max-width: 1520px; margin: 0 auto; }

/* Top Bar */
.topbar { background: var(--bg-1); border-bottom: 1px solid var(--bd-1); position: sticky; top: 0; z-index: 200; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; max-width: 1520px; margin: 0 auto; }
.topbar-left { display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--grad-gold); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 0 16px rgba(212,168,67,.25); }
.brand-text { display: flex; flex-direction: column; }
.brand-title { font-size: 16px; font-weight: 700; }
.brand-sub { font-size: 10px; color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.8px; }
.topbar-center { display: flex; align-items: center; gap: 12px; }
.mkt-badge { padding: 3px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.mkt-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.mkt-badge.open { background: var(--red-bg); color: var(--red-lt); border: 1px solid rgba(239,68,68,.18); }
.mkt-badge.open::before { background: var(--red-lt); animation: mkt-pulse 1.5s infinite; }
.mkt-badge.closed { background: rgba(110,118,129,.06); color: var(--tx-3); border: 1px solid rgba(110,118,129,.12); }
.mkt-badge.closed::before { background: var(--tx-3); }
@keyframes mkt-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.server-date { font-size: 12px; color: var(--tx-3); font-family: "Cascadia Code", monospace; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.clock { font-family: "JetBrains Mono", "Cascadia Code", monospace; font-size: 14px; color: var(--gold); letter-spacing: 1px; font-weight: 500; padding: 4px 12px; background: var(--bg-2); border: 1px solid var(--bd-1); border-radius: var(--radius-sm); }
.next-rpt { font-size: 11px; color: var(--tx-3); padding: 3px 10px; background: var(--bg-2); border: 1px solid var(--bd-1); border-radius: var(--radius-sm); }
.btn-primary { background: var(--grad-gold); color: #fff; border: none; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .2s; }
.btn-primary:hover { box-shadow: 0 0 14px rgba(212,168,67,.35); transform: translateY(-1px); }
.btn-primary.loading { opacity: .55; pointer-events: none; }

/* Tabs */
.tabs-wrap { display: flex; padding: 0 20px; background: var(--bg-1); border-bottom: 1px solid var(--bd-1); max-width: 1520px; margin: 0 auto; }
.inst-tab { padding: 10px 22px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--tx-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 10px; }
.inst-tab:hover { color: var(--tx-1); background: rgba(212,168,67,.03); }
.inst-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.inst-tab .tp { font-family: "Cascadia Code", monospace; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 4px; background: var(--bg-2); }

/* Main */
.main { padding: 16px 20px; max-width: 1520px; margin: 0 auto; }

/* Hero */
.hero-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: var(--bg-1); border: 1px solid var(--bd-1); border-radius: var(--radius-lg); margin-bottom: 14px; flex-wrap: wrap; gap: 16px; }
.hero-info { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-name-wrap { display: flex; flex-direction: column; gap: 2px; }
.hero-name { font-size: 20px; font-weight: 700; }
.hero-code { font-size: 12px; color: var(--tx-3); font-family: "Cascadia Code", monospace; }
.hero-price-wrap { display: flex; flex-direction: column; }
.hero-price { font-size: 38px; font-weight: 800; font-family: "JetBrains Mono", "Cascadia Code", monospace; line-height: 1.1; letter-spacing: -1px; }
.hero-change { font-size: 15px; font-family: "Cascadia Code", monospace; font-weight: 500; }
.hero-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.hs-item { display: flex; flex-direction: column; align-items: center; min-width: 72px; }
.hs-label { font-size: 10px; color: var(--tx-3); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.hs-value { font-size: 15px; font-weight: 600; font-family: "Cascadia Code", monospace; }

/* Futures Metrics */
.futures-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.fm-card { background: var(--bg-1); border: 1px solid var(--bd-1); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 12px; transition: all .2s; }
.fm-card:hover { border-color: var(--bd-2); background: var(--bg-2); }
.fm-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.fm-body { flex: 1; min-width: 0; }
.fm-label { font-size: 11px; color: var(--tx-3); }
.fm-val { font-size: 15px; font-weight: 600; font-family: "Cascadia Code", monospace; margin-top: 1px; }
.fm-sub { font-size: 10px; color: var(--tx-4); margin-top: 1px; }

/* Charts Grid */
.charts-grid { display: grid; grid-template-columns: 1fr 350px; gap: 12px; margin-bottom: 16px; }
@media (max-width: 1200px) { .charts-grid { grid-template-columns: 1fr; } }
.charts-col-main { display: flex; flex-direction: column; gap: 10px; }
.charts-col-side { display: flex; flex-direction: column; gap: 10px; }

/* Card */
.card { background: var(--bg-1); border: 1px solid var(--bd-1); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--bd-1); }
.card-title { font-size: 13px; font-weight: 600; color: var(--tx-2); }
.card-hint { font-size: 11px; color: var(--tx-4); font-family: "Cascadia Code", monospace; }
.card-body { padding: 0; }

/* Gauge */
.gauge-detail { margin-top: 6px; }
.gd-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; }
.gd-label { color: var(--tx-3); }
.gd-value { font-family: "Cascadia Code", monospace; font-weight: 600; }

/* Basis Panel */
.basis-panel { display: flex; flex-direction: column; gap: 8px; }
.basis-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; }
.basis-row.spot { background: var(--blue-bg); }
.basis-row.futures { background: var(--gold); background: rgba(212,168,67,.08); }
.basis-row.diff { background: var(--bg-2); border: 1px solid var(--bd-1); }
.basis-label { color: var(--tx-2); }
.basis-value { font-family: "Cascadia Code", monospace; font-weight: 600; }

/* Levels */
.levels-stack { display: flex; flex-direction: column; gap: 5px; }
.lvl-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-radius: var(--radius-sm); font-size: 12px; transition: all .15s; }
.lvl-row:hover { transform: translateX(2px); }
.lvl-row.res { background: var(--green-bg); }
.lvl-row.sup { background: var(--red-bg); }
.lvl-row.cur { background: var(--blue-bg); border: 1px solid rgba(88,166,255,.15); }
.lvl-label { color: var(--tx-2); font-size: 11px; }
.lvl-price { font-family: "Cascadia Code", monospace; font-weight: 600; font-size: 13px; }
.lvl-price.up { color: var(--red-lt); }
.lvl-price.dn { color: var(--green-lt); }
.lvl-price.cur { color: var(--blue); }

/* Strategy */
.strategy-list { display: flex; flex-direction: column; gap: 8px; }
.strat-card { background: var(--bg-2); border: 1px solid var(--bd-1); border-radius: var(--radius-sm); padding: 10px 12px; }
.strat-card.long { border-left: 3px solid var(--red); }
.strat-card.short { border-left: 3px solid var(--green); }
.strat-card.wait { border-left: 3px solid var(--yellow); }
.strat-name { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.strat-name.long { color: var(--red-lt); }
.strat-name.short { color: var(--green-lt); }
.strat-name.wait { color: var(--yellow); }
.strat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 11px; }
.strat-item { display: flex; justify-content: space-between; }
.strat-label { color: var(--tx-3); }
.strat-val { font-family: "Cascadia Code", monospace; font-weight: 500; }
.strat-reason { font-size: 11px; color: var(--tx-3); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bd-1); line-height: 1.5; }
.strat-confidence { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px; }
.strat-confidence.high { background: var(--red-bg); color: var(--red-lt); }
.strat-confidence.mid { background: var(--yellow-bg); color: var(--yellow); }

/* Signals */
.section { margin-bottom: 16px; }
.sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sec-head h2 { font-size: 15px; font-weight: 700; }
.btn-ghost { background: transparent; border: 1px solid var(--bd-1); color: var(--tx-2); padding: 4px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; transition: all .2s; }
.btn-ghost:hover { background: var(--bg-2); color: var(--tx-1); }
.signals-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.sig-item { background: var(--bg-1); border: 1px solid var(--bd-1); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; align-items: center; gap: 10px; transition: all .2s; }
.sig-item:hover { border-color: var(--bd-2); }
.sig-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.sig-icon.bull { background: var(--red-bg); color: var(--red-lt); }
.sig-icon.bear { background: var(--green-bg); color: var(--green-lt); }
.sig-icon.neu { background: var(--yellow-bg); color: var(--yellow); }
.sig-body { flex: 1; min-width: 0; }
.sig-name { font-size: 12px; font-weight: 600; }
.sig-desc { font-size: 11px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Reports */
.reports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .reports-grid { grid-template-columns: 1fr; } }
.rpt-card { background: var(--bg-1); border: 1px solid var(--bd-1); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-1); }
.rpt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bd-1); }
.rpt-title { font-size: 14px; font-weight: 600; }
.rpt-time { font-size: 11px; color: var(--tx-3); font-family: "Cascadia Code", monospace; }
.rpt-price-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.rpt-price { font-size: 22px; font-weight: 700; font-family: "JetBrains Mono", "Cascadia Code", monospace; }
.rpt-change { font-size: 14px; font-family: "Cascadia Code", monospace; font-weight: 500; }
.rpt-meta { font-size: 12px; color: var(--tx-2); margin-bottom: 10px; display: flex; gap: 16px; flex-wrap: wrap; }
.rpt-signals { margin-bottom: 10px; }
.rpt-sig-line { font-size: 12px; padding: 2px 0; display: flex; align-items: flex-start; gap: 8px; }
.rpt-sig-dot { font-weight: 700; width: 20px; flex-shrink: 0; font-size: 11px; }
.rpt-levels { display: flex; gap: 16px; margin: 8px 0; font-size: 11px; }
.rpt-level-l { color: var(--tx-3); }
.rpt-signal-bar { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; padding: 8px 12px; border-radius: var(--radius-sm); }
.rpt-signal-bar-l { font-size: 12px; color: var(--tx-2); }
.rpt-signal-bar-v { font-size: 16px; font-weight: 700; }
.rpt-prediction { font-size: 12px; color: var(--tx-2); padding: 10px 12px; background: var(--bg-2); border-radius: var(--radius-sm); line-height: 1.7; border-left: 3px solid var(--bd-2); }
.rpt-strategies { margin-top: 10px; }

/* History */
.select-box { background: var(--bg-2); border: 1px solid var(--bd-1); color: var(--tx-2); padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; }
.history-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.history-list::-webkit-scrollbar { width: 4px; }
.history-list::-webkit-scrollbar-track { background: var(--bg-0); }
.history-list::-webkit-scrollbar-thumb { background: var(--bd-2); border-radius: 2px; }
.h-item { background: var(--bg-1); border: 1px solid var(--bd-1); border-radius: var(--radius-sm); padding: 8px 14px; display: flex; align-items: center; gap: 14px; font-size: 12px; transition: all .15s; }
.h-item:hover { border-color: var(--bd-2); background: var(--bg-2); }
.h-time { color: var(--tx-3); font-family: "Cascadia Code", monospace; font-size: 11px; white-space: nowrap; min-width: 118px; }
.h-stock { font-weight: 600; min-width: 68px; }
.h-price { font-family: "Cascadia Code", monospace; min-width: 85px; }
.h-signal { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.h-pred { color: var(--tx-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }

/* Colors */
.up { color: var(--red); } .dn { color: var(--green); } .flat { color: var(--tx-2); }
.no-data { text-align: center; padding: 30px; color: var(--tx-3); font-size: 13px; }
@keyframes flashUp { 0%{color:var(--red-lt);transform:scale(1.02)} 100%{} }
@keyframes flashDown { 0%{color:var(--green-lt);transform:scale(1.02)} 100%{} }
.flash-up { animation: flashUp .4s; }
.flash-down { animation: flashDown .4s; }