:root{
  --bg:#0b0f14;
  --panel:#141b26;
  --panel2:#101722;
  --border:#283244;
  --text:#f4f7fb;
  --muted:#93a1b5;
  --accent:#54d2a0;
  --danger:#ff6b6b;
  --warning:#f7c65f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
a{color:#9dc6ff;text-decoration:none}
a:hover{text-decoration:underline}
code{background:#0d141d;padding:2px 5px;border-radius:6px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 18px;border-bottom:1px solid var(--border);background:#0e141d;position:sticky;top:0;z-index:10
}
.brand{font-weight:800;letter-spacing:.08em}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav-link{padding:8px 12px;border-radius:10px;color:var(--muted);background:transparent;border:1px solid transparent}
.nav-link.active,.nav-link:hover{background:#162031;color:var(--text);border-color:var(--border);text-decoration:none}
.price-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:18px
}
.price-card,.summary-card,.intel-card,.panel,.chart-toolbar{background:var(--panel);border:1px solid var(--border);border-radius:16px}
.price-card{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.price-card span,.muted{color:var(--muted)}
.price-card strong{font-size:24px}
.terminal-grid{display:grid;grid-template-columns:320px 1fr 320px;gap:18px;padding:0 18px 18px}
.panel{padding:16px}
.panel-center{min-height:420px}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.panel-header h2{margin:0;font-size:18px}
.stack{display:flex;flex-direction:column;gap:12px}
.signal-chip,.alert-card,.note-card{
  background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:12px
}
.signal-chip strong,.alert-card strong,.note-card strong{display:block;margin-bottom:6px}
.hero-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.hero-box > div{background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:14px}
.hero-value{font-size:26px;font-weight:800;margin-top:6px}
.dashboard-placeholder{height:290px;border:1px dashed #3b4b63;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#0f161f,#101722);text-align:center;padding:20px}
.placeholder-title{font-size:22px;font-weight:800;margin-bottom:8px}
.section-block{margin:0 18px 18px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:700px}
th,td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
th{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.small{font-size:12px}
.status-open{color:var(--warning)}
.status-win,.up{color:var(--accent)}
.status-loss,.down{color:var(--danger)}
.chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;margin:18px}
.toolbar-group{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:#101722;border:1px solid var(--border);color:var(--text);padding:9px 13px;border-radius:12px;cursor:pointer}
.btn.active{background:#1c2a3f;border-color:#41506d}
.chart-page{display:grid;grid-template-columns:1fr 300px;gap:18px;padding:0 18px 18px}
.chart-panel{padding:0;overflow:hidden;height:calc(100vh - 170px);min-height:520px}
#chart{width:100%;height:100%}
.side-stats h2{margin-top:0}
.metric{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.signals-layout,.intel-layout{padding:18px}
.summary-grid,.intel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.summary-card,.intel-card{padding:18px}
.summary-card strong,.intel-card strong{font-size:28px;display:block;margin-top:8px}
@media (max-width: 1100px){
  .price-strip,.summary-grid,.intel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .terminal-grid,.chart-page{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .topbar{align-items:flex-start;flex-direction:column}
  .price-strip,.summary-grid,.intel-grid,.hero-box{grid-template-columns:1fr}
  .price-card strong{font-size:20px}
  .chart-toolbar{flex-direction:column;align-items:flex-start}
}