* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:system-ui,'Segoe UI',Tahoma,sans-serif; background:#0a0e17; color:#e6edf3; min-height:100vh; }
main { max-width:1500px; margin:0 auto; padding:16px; display:flex; flex-direction:column; gap:16px; }

.topbar { position:sticky; top:0; z-index:20; background:rgba(10,14,23,.92); backdrop-filter:blur(6px); border-bottom:1px solid #1d2437; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand h1 { font-size:19px; }
.brand p { color:#8b98ad; font-size:12px; margin-top:2px; }
.logo { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center; flex:none; }
.top-actions { display:flex; gap:8px; }

.btn { padding:9px 16px; border:1px solid #2c3b55; border-radius:10px; background:#141a2a; color:#e6edf3; font-size:14px; font-weight:600; cursor:pointer; transition:filter .15s ease, border-color .15s ease; }
.btn:hover { filter:brightness(1.15); border-color:#f59e0b; }
.btn.primary { background:linear-gradient(135deg,#f59e0b,#ef4444); border:0; color:#fff; }
.btn.ghost { background:transparent; }
.btn.small { padding:6px 12px; font-size:13px; }

.card { background:#141a2a; border:1px solid #232c42; border-radius:16px; padding:16px; }
.controls .row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.grow { flex:1; min-width:180px; }
.field label { font-size:12px; color:#8b98ad; }
.field select, .field input { padding:10px 12px; border-radius:10px; border:1px solid #2c3b55; background:#0a0e17; color:#e6edf3; font-size:14px; }
.field select:focus, .field input:focus { outline:1px solid #f59e0b; }
.hint { font-size:12px; color:#8b98ad; }
.spacer { flex:1; }

.stats { display:flex; gap:24px; }
.stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.stat-num { font-size:26px; font-weight:800; color:#fbbf24; }
.stat-label { font-size:12px; color:#8b98ad; }

.progress-bar { height:8px; border-radius:99px; background:#1d2437; overflow:hidden; }
.progress-bar .fill { height:100%; width:0; background:linear-gradient(90deg,#f59e0b,#ef4444); transition:width .25s ease; }
.progress-text { font-size:12px; color:#8b98ad; text-align:center; min-height:16px; }

.table-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.check { display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
.muted { color:#8b98ad; font-size:12px; }
.scroll-x { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
th, td { padding:7px 6px; text-align:right; border-bottom:1px solid #1d2437; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
th:nth-child(2), td:nth-child(2) { white-space:normal; }
th:nth-child(4), td:nth-child(4) { white-space:normal; }
th { color:#8b98ad; font-size:12px; font-weight:600; position:sticky; top:0; background:#141a2a; }
.th-sort { cursor:pointer; user-select:none; }
.th-sort:hover { color:#fbbf24; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:#1a2236; }
.sym { font-weight:700; color:#fbbf24; }
.pill { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:99px; font-size:12px; font-weight:700; }
.ok { background:#16a34a33; color:#4ade80; border:1px solid #16a34a55; }
.no { background:#ef444422; color:#f87171; border:1px solid #ef444433; }
.part { background:#f59e0b22; color:#fbbf24; border:1px solid #f59e0b33; }
.tag { font-size:11px; padding:3px 8px; border-radius:99px; }
.t-us { background:#1e3a8a33; color:#60a5fa; }
.t-sa { background:#16653433; color:#4ade80; }
.t-crypto { background:#7c2d1233; color:#fb923c; }
.empty { color:#8b98ad; text-align:center; padding:30px 0; }

.chart-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.chart-meta { font-size:12px; color:#8b98ad; margin-bottom:10px; line-height:1.7; }
#chartCanvas { width:100%; height:430px; background:#0a0e17; border:1px solid #1d2437; border-radius:10px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12px; color:#8b98ad; }
.lg { display:inline-block; width:14px; height:4px; border-radius:2px; margin-left:5px; vertical-align:middle; }
.lg.bigLine { background:#e6edf3; }
.lg.sma20 { background:#22c55e; }
.lg.smallLine { background:#38bdf8; }
.lg.sma50 { background:#a78bfa; }
.lg.macdLine { background:#fbbf24; }
.lg.rsiLine { background:#fb923c; }

.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; display:none; }
.drawer { position:fixed; top:0; left:0; bottom:0; width:320px; background:#111827; border-left:1px solid #232c42; z-index:50; display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .2s ease; }
.drawer.open { transform:translateX(0); }
.drawer-head { display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid #1d2437; }
.drawer-body { flex:1; padding:16px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; }
.drawer-body .field input { width:100%; }
.drawer-foot { display:flex; gap:8px; padding:16px; border-top:1px solid #1d2437; }

@media (max-width:720px) {
  .topbar { flex-direction:column; align-items:flex-start; }
}