:root { --border:#e6e6e6; --bg:#0c1524; --card:#15243d; --text:#e9f0ff; --muted:#9fb2d0; }
    body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); }
    header { padding:12px 16px; display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--border); background: #0e1a2d; position:sticky; top:0; z-index:5; }
    header strong { letter-spacing:.2px; }
    main { display:grid; grid-template-columns: 380px 1fr; min-height: calc(100vh - 56px); }
    #sidebar { border-right:1px solid var(--border); padding:12px; overflow:auto; background:#0f1d33; }
    #matches { display:flex; flex-direction:column; gap:10px; }
    .match { border:1px solid #1d355e; border-radius:12px; padding:12px; cursor:pointer; background:var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
    .match:hover { background:#183055; }
    .muted { color:var(--muted); font-size:12px; }
    .row { display:flex; gap:8px; align-items:center; }
    .tag { font-size:12px; background:#1a335c; padding:2px 8px; border-radius:12px; color:#b9cdf0; }
    select, button, input { padding:8px 10px; border-radius:10px; border:1px solid #1e3a6a; background:#10213c; color:#e9f0ff; }
    button:hover { filter:brightness(1.1); }
    #player { width:100%; height:480px; border:0; background:#081324; border-radius:12px; }
    section { padding:16px; }
    .panel { background:var(--card); border:1px solid #1d355e; border-radius:12px; padding:12px; margin-top:12px; }
    #streams { display:flex; flex-direction:column; gap:8px; }
    .stream { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border:1px solid #23416f; border-radius:10px; background:#10213c; }
    .pill { font-size:11px; padding:2px 6px; border-radius:999px; background:#1b335c; color:#c5d6f6; }
    .title { font-weight:600; }