:root{
  --bg:#19181d;
  --accent:#d81696;
  --muted:#a7a4ad;
  --card:#1f1e24;
  --line:#2a2931;
  --ok:#10b981;
  --bad:#ef4444;
  --chip:#2a2931;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--accent);
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; backdrop-filter:saturate(120%) blur(8px);
  background:linear-gradient(180deg, rgba(25,24,29,.9), rgba(25,24,29,.7));
  z-index:20;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px; }
.logo-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent);}
.brand-title{ font-size:22px; }

.controls{ display:flex; gap:14px; align-items:end; flex-wrap:wrap; }
.ctrl{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.ctrl input[type="date"], .ctrl select{
  background:var(--card); color:var(--accent); border:1px solid var(--line);
  padding:8px 14px; border-radius:12px; outline:none;
  appearance:none; -webkit-appearance:none;
  font-weight:600; transition:border-color .2s ease, box-shadow .2s ease;
}
.ctrl input[type="date"]{
  padding-right:38px;
}
.ctrl input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(69%) sepia(33%) saturate(513%) hue-rotate(288deg) brightness(98%) contrast(90%);
  cursor:pointer; opacity:.8;
}
.ctrl select{
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d81696' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:calc(100% - 14px) center;
  background-size:12px;
}
.ctrl input[type="date"]:focus,
.ctrl select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(216,22,150,.25);
}
.toggle{ display:flex; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.toggle button{
  padding:8px 10px; color:var(--muted); background:transparent; border:0; cursor:pointer; font-weight:600;
}
.toggle button.active{ color:var(--accent); background:#221f28; }
.btn{ border:1px solid var(--line); background:var(--card); color:var(--accent); padding:8px 12px; border-radius:12px; cursor:pointer; }
.btn.ghost{ background:transparent; }
.btn.icon{ width:36px; height:36px; display:grid; place-items:center; }

/* ---------- Layout ---------- */
.layout{
  display:grid; grid-template-columns: 1fr 320px; gap:18px; padding:18px 20px;
}
@media (max-width:1100px){ .layout{ grid-template-columns:1fr; } }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ---------- Chart ---------- */
.chart-card{ position:relative; }
.range-chips{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.chip{
  background:var(--chip); border:1px solid var(--line); color:var(--accent);
  padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:600; font-size:12px;
}
.chip.active{ box-shadow:0 0 0 1px var(--accent) inset; }
.chart-wrap{ height:460px; }
.chart-info{
  color:rgba(255,255,255,.32);
  font-size:9px;
  margin-top:4px;
  line-height:1.25;
  border-top:1px solid rgba(255,255,255,.03);
  padding-top:4px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.chart-info div:first-child{
  font-weight:600;
  color:rgba(255,255,255,.55);
}

/* ---------- Aggregates ---------- */
.agg-grid{ display:grid; gap:14px; }
.agg-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px;
}
.agg-title{ font-size:14px; color:var(--muted); margin-bottom:8px; }
.agg-value{ font-size:28px; font-weight:800; }

/* ---------- Drawer (positions) ---------- */
.drawer{
  position:fixed; top:0; right:-420px; width:420px; height:100vh; background:var(--card);
  border-left:1px solid var(--line); transition:transform .28s ease, right .28s ease;
  z-index:50; display:flex; flex-direction:column;
}
.drawer.open{ right:0; }
.drawer-header{
  display:flex; align-items:center; justify-content:space-between; padding:12px 12px;
  border-bottom:1px solid var(--line);
}
.drawer-title{ font-weight:800; }
.muted{ color:var(--muted); font-weight:600; font-size:12px; margin-left:8px; }
.tabs{ display:flex; border-bottom:1px solid var(--line); }
.tabs button{
  flex:1; padding:10px 12px; background:transparent; border:0; color:var(--muted); cursor:pointer; font-weight:700;
}
.tabs button.active{ color:var(--accent); background:#221f28; }
.positions{ overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.pos{
  background:#201f25; border:1px solid var(--line); border-radius:12px; padding:12px;
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
}
.pos .symbol{ font-weight:800; display:flex; align-items:center; gap:6px; }
.model-tag{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  padding:2px 10px; border-radius:999px; border:1px solid rgba(216,22,150,.5);
  color:var(--accent); background:rgba(216,22,150,.12);
}
.pos .pnl-pos{ color:var(--ok); font-weight:800; }
.pos .pnl-neg{ color:var(--bad); font-weight:800; }
.pos .meta{ color:var(--muted); font-size:12px; }
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:40;
}
.drawer-overlay.show{ opacity:1; pointer-events:auto; }