:root { --bg:#0b1020; --panel:#121a2e; --panel2:#17213a; --text:#e9eefc; --muted:#8f9bb7; --accent:#60a5fa; --red:#ef4444; --green:#22c55e; --yellow:#f59e0b; }
    * { box-sizing: border-box; }
    body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
    header { padding:22px 28px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:20px; }
    h1 { margin:0; font-size:24px; letter-spacing:.2px; }
    .sub { color:var(--muted); font-size:13px; margin-top:4px; }
    main { padding:24px 28px 36px; }
    .grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:18px; }
    .card { background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:16px; box-shadow:0 14px 40px rgba(0,0,0,.24); }
    .metric-label { color:var(--muted); font-size:13px; }
    .metric-value { font-size:28px; font-weight:700; margin-top:8px; }
    .charts { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
    .chart-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#dbe7ff; font-weight:650; }
    svg { width:100%; height:330px; background:#0e1629; border-radius:14px; overflow:hidden; }
    .controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    input { background:#0f172a; color:var(--text); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:9px 10px; width:90px; }
    button { background:#1f2a44; color:var(--text); border:1px solid rgba(255,255,255,.13); border-radius:10px; padding:9px 12px; cursor:pointer; }
    button:hover { background:#293756; }
    button.danger { background:#4a1720; border-color:#7f1d1d; }
    .banner { margin-bottom:16px; padding:13px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.1); }
    .ok { background:rgba(34,197,94,.12); color:#bbf7d0; }
    .warn { background:rgba(245,158,11,.14); color:#fde68a; }
    .bad { background:rgba(239,68,68,.15); color:#fecaca; }
    table { width:100%; border-collapse: collapse; font-size:13px; }
    th, td { padding:9px 8px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; color:#dbe7ff; }
    th { color:var(--muted); font-weight:600; }
    .lower { display:grid; grid-template-columns: 2fr 1fr; gap:16px; margin-top:16px; }
    .pill { display:inline-block; padding:4px 8px; border-radius:999px; background:#0f172a; color:var(--muted); font-size:12px; }
    .red { color:var(--red); } .green { color:var(--green); } .yellow { color:var(--yellow); }
    @media (max-width: 1100px) { .grid,.charts,.lower { grid-template-columns:1fr; } header { align-items:flex-start; flex-direction:column; } }