:root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --text: #1c1e24;
    --muted: #5f6672;
    --accent: #d32f2f;
    --border: #dde0e6;
}
[data-theme="dark"] {
    --bg: #0f1115;
    --card: #1a1d24;
    --text: #e8eaed;
    --muted: #9aa0a6;
    --accent: #e53935;
    --border: #2a2e37;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; }
.container { max-width: 960px; margin: 0 auto; padding: 1rem; }
.topbar { background:var(--card); border-bottom:1px solid var(--border); }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; }
.topbar-actions { display:flex; gap:.5rem; align-items:center; }
.brand { color:var(--text); text-decoration:none; font-weight:700; font-size:1.2rem; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
.auth-card { max-width:400px; margin:3rem auto; }
label { display:block; margin:.75rem 0 .25rem; color:var(--muted); }
input { width:100%; padding:.6rem; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-family:inherit; }
.btn { padding:.6rem 1.2rem; border-radius:8px; border:none; cursor:pointer; font-size:1rem; font-family:inherit; }
.btn-primary { background:var(--accent); color:#fff; width:100%; margin-top:1rem; }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.error { color:#d32f2f; }
[data-theme="dark"] .error { color:#ff8a80; }
.badge { display:inline-block; padding:.15rem .6rem; border-radius:999px; font-size:.8rem; }
.badge-live { background:var(--accent); color:#fff; }
.badge-muted { background:var(--border); color:var(--muted); }
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.section-title { margin:1.5rem 0 .75rem; }
.player-wrap { position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#000; }
.player-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:center; background:rgba(0,0,0,.85); color:#e8eaed; text-align:center; padding:1rem; }