:root { color-scheme: dark; font-family: Arial, sans-serif; background:#07111f; color:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top,#17345b,#07111f 58%); }
.hidden { display:none!important; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(470px,100%); background:#0d1c30; padding:36px; border-radius:18px; box-shadow:0 20px 70px #0008; }
h1 { margin:0 0 8px; font-size:38px; }
.login-card>p { color:#aebed3; margin:0 0 26px; }
label { display:block; margin:17px 0; color:#d7e2ef; font-weight:bold; }
input,select { display:block; width:100%; margin-top:8px; padding:15px; border:2px solid #304b6d; border-radius:10px; background:#091526; color:#fff; font-size:18px; }
input:focus,select:focus,button:focus,.channel:focus { outline:4px solid #36a3ff; outline-offset:3px; }
button { border:0; border-radius:10px; background:#1685e6; color:white; padding:14px 20px; font-size:18px; font-weight:bold; cursor:pointer; }
form button { width:100%; margin-top:10px; }
.secondary { background:#253b56; }
.error { min-height:24px; color:#ff8585; }
header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:18px 26px; background:#081524ed; }
header strong { font-size:25px; margin-right:18px; }
#tv-alias { color:#91a9c2; }
.status { padding:35px; text-align:center; font-size:21px; }
.channel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; padding:24px; }
.channel { border:2px solid #263f5c; border-radius:14px; overflow:hidden; background:#0d1c30; color:#fff; text-align:left; padding:0; }
.channel img { width:100%; aspect-ratio:16/10; object-fit:contain; background:#fff; }
.channel span { display:block; padding:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-screen { min-height:100vh; background:#000; }
video { display:block; width:100%; height:calc(100vh - 78px); background:#000; }
.player-bar { height:78px; display:flex; align-items:center; gap:24px; padding:12px 20px; background:#07111f; }
@media (max-width:700px) { .channel-grid{grid-template-columns:repeat(2,1fr)} .login-card{padding:25px} }