:root{
  --bg:#0b1420;--panel:#0f1a28;--ink:#e8f2ff;--mut:#cfe1f5;--accent:#79a8ff;--border:#263445;
  --good:#2db77b;--warn:#ffb15e;--bad:#ff6b7a;
}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:14px/1.4 'Inter',system-ui,Segoe UI,Arial}
.container{width:min(1060px,calc(100vw - 32px));margin:0 auto}
.topnav{border-bottom:1px solid var(--border);background:#0c1622}
.topnav .brand{font-weight:800;color:var(--ink);text-decoration:none;margin-right:16px}
.topnav .links a{color:var(--mut);text-decoration:none;margin-left:12px}
.topnav nav{display:flex;justify-content:space-between;align-items:center;padding:10px 0}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin:12px 0}
.panel.compact{padding:8px 12px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.title{font-weight:700}
.stamp,.updated{opacity:.75;font-size:12px}

.tiles.tiles-4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:1100px){.tiles.tiles-4{grid-template-columns:1fr}}

.tile{background:#0d1826;border:1px solid var(--border);border-radius:12px;padding:10px;min-height:260px;display:flex;flex-direction:column;justify-content:flex-start}
.tile.tight .big{font-size:20px}
.label{color:var(--mut);display:flex;align-items:center;gap:6px}
.row{display:flex;align-items:center;gap:10px;margin:4px 0 6px}
.big{font-size:22px;font-weight:800;letter-spacing:.2px}
.badge{background:#2b1c20;border:1px solid #3d2126;color:#ffb4c2;font-size:12px;padding:3px 8px;border-radius:999px}
.badge.good{background:#142a21;border-color:#1d3d31;color:#abf0cc}
.badge.neutral{background:#1c2432;border-color:#263447;color:#b9d1ef}

.gauge{margin:4px 0 6px}
.gbar{position:relative;height:8px;border-radius:999px;background:#0e1624}
.gbar>span{position:absolute;top:-4px;left:calc(var(--p,50%));transform:translateX(-50%);width:4px;height:16px;background:#fff;border-radius:2px}
.gscale{display:flex;justify-content:space-between;color:var(--mut);opacity:.75;font-size:11px}
.gscale em{margin-left:6px;opacity:.8}

#bpSpark,#cpSpark,#crSpark,#ycSpark{width:100%;height:56px}
#priceChart{width:100%;height:280px} #rsiChart{width:100%;height:120px}
.soft{opacity:.75;color:var(--mut)}

.signals{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pill{background:#0d1826;border:1px solid var(--border);border-radius:999px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#5a6a7a}
.dot.on{background:var(--good)}.dot.warn{background:var(--bad)}

.hero{margin:0 0 6px 0;font-size:22px;font-weight:800}
.sub{margin:0 0 6px 0;color:var(--mut);opacity:.9}
.deck-error{border:1px dashed var(--border);background:#0b1420;color:#ffb4c2;border-radius:10px;padding:8px 10px;margin-top:8px}
.tile .desc{margin-top:4px;color:var(--mut);opacity:.85;font-size:12.5px}
.legend{display:flex;gap:12px;align-items:center;margin:2px 0 6px 0;color:var(--mut);opacity:.95}
.sw{display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:6px}
.sw.blue{background:#7fb0ff}.sw.pink{background:#ff7f9f}.sw.gold{background:#caa256}
.dashed{border-bottom:2px dashed #caa256;background:transparent;height:0;width:18px}

.controls{display:flex;align-items:center;gap:10px}
.btn{background:#13253a;border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:6px 10px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}

.foot{color:var(--mut);opacity:.7;padding:14px 0}

.gbar.g-left{
  background:linear-gradient(90deg,#2db77b 0%,#859a6a 35%,#caa256 60%,#ff6b7a 100%);
}
.gbar.g-right{
  background:linear-gradient(90deg,#ff6b7a 0%,#caa256 40%,#859a6a 70%,#2db77b 100%);
}