:root{
  --bg:#0d0d0d;
  --panel:#171717;
  --panel2:#1d1d1d;
  --text:#f7f7f7;
  --muted:#979797;
  --line:#2b2b2b;
  --accent:#6f6f6f;
  --accent2:#afafaf;
  --danger:#ef4444;
  --ok:#22c55e;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(circle at 20% 0,#1a1a1a 0,#0d0d0d 42%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
.auth-bg{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(420px,100%);padding:34px;border:1px solid var(--line);border-radius:24px;background:rgba(23,23,23,.92);box-shadow:0 30px 80px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
.auth-card h1{margin:6px 0 0;font-size:32px;letter-spacing:.04em}
.brand-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:24px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 12px 30px rgba(111,111,111,.35)}
.muted{color:var(--muted)}
.stack{display:grid;gap:12px}
.stack input,.stack textarea{width:100%;background:#111111;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:13px 14px;outline:none}
.stack input:focus,.stack textarea:focus{border-color:var(--accent)}
.stack button,.auth-card button{border:0;border-radius:12px;padding:13px 16px;background:linear-gradient(135deg,var(--accent),#8a8a8a);color:#ffffff;font-weight:800}
.stack button:disabled{opacity:.45}
.admin-link{display:block;margin-top:18px;color:var(--muted);font-size:13px}
.alert,.ok{border-radius:12px;padding:12px 14px;margin:12px 0}
.alert{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35)}
.ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35)}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(13,13,13,.82);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}
.topbar nav,.top-actions{display:flex;align-items:center;gap:14px}
.top-actions input{width:min(320px,36vw);background:#151515;color:var(--text);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.brand-inline{display:flex;align-items:center;gap:10px}
.brand-dot{width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 22px var(--accent)}
.announcement{padding:9px 18px;text-align:center;background:rgba(111,111,111,.11);border-bottom:1px solid rgba(111,111,111,.2);color:#d7d7d7}
.tv-shell{height:calc(100vh - 68px);display:grid;grid-template-columns:230px 360px minmax(0,1fr);gap:14px;padding:14px}
.panel{background:linear-gradient(180deg,rgba(27,27,27,.96),rgba(18,18,18,.96));border:1px solid var(--line);border-radius:18px;overflow:hidden}
.sidebar,.channels{min-height:0}
.section-title,.section-head{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);font-weight:800}
.category-list,.channel-list{height:calc(100% - 52px);overflow:auto;padding:8px}
.category-btn{width:100%;display:flex;align-items:center;text-align:left;border:0;background:transparent;color:#c3c3c3;border-radius:11px;padding:11px 12px;margin:2px 0}
.category-btn:hover,.category-btn.active{background:linear-gradient(90deg,rgba(111,111,111,.18),rgba(175,175,175,.06));color:#ffffff}
.channel-row{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px;border:1px solid transparent;background:transparent;color:var(--text);border-radius:13px;text-align:left}
.channel-row:hover,.channel-row.active{background:#1e1e1e;border-color:#353535}
.channel-row img{width:44px;height:44px;border-radius:10px;object-fit:contain;background:#101010}
.channel-text{min-width:0}
.channel-text strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-text small{display:block;color:var(--muted);margin-top:3px}
.live-pill,.badge{font-size:10px;font-weight:900;letter-spacing:.08em;border-radius:999px;padding:4px 7px;background:rgba(239,68,68,.13);color:#fb7185;border:1px solid rgba(239,68,68,.22)}
.badge{background:#292929;color:#d5d5d5;border-color:#363636}
.viewer{min-width:0;display:grid;grid-template-rows:minmax(360px,1fr) minmax(180px,.42fr);gap:14px;min-height:0}
.video-card{position:relative;background:#070707}
.video-card video{width:100%;height:100%;background:#000000;display:block}
.video-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;background:radial-gradient(circle at 50% 50%,#1d1d1d 0,#090909 58%);pointer-events:none}
.play-orb{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));font-size:28px;box-shadow:0 18px 50px rgba(111,111,111,.35)}
.video-empty h2{margin:18px 0 4px}
.program-card{overflow:auto}
.icon-btn{border:1px solid var(--line);background:#181818;color:#d3d3d3;border-radius:10px;padding:7px 11px;font-size:20px}
.epg-row{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.epg-row.now{background:linear-gradient(90deg,rgba(111,111,111,.13),transparent)}
.epg-row>div:first-child strong{font-size:10px;letter-spacing:.08em;color:var(--accent2)}
.epg-row h3{margin:0 0 4px;font-size:15px}
.epg-row p{margin:0 0 6px;color:var(--muted);font-size:13px;line-height:1.35}
.epg-row small{color:#797979}
.admin-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;padding:22px;max-width:1200px;margin:auto}
.admin-grid .panel{padding:20px}
.admin-grid h2{margin-top:0}
.provider-list{margin-top:18px;display:grid;gap:9px}
.provider-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px}
.provider-row small{display:block;color:var(--muted);margin-top:4px;word-break:break-all}
.danger{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#b8b8b8;border-radius:9px;padding:8px 10px}
.check{display:flex;align-items:center;gap:8px;color:var(--muted)}
.skeleton-line{height:38px;margin:7px;border-radius:10px;background:linear-gradient(90deg,#1c1c1c,#292929,#1c1c1c);background-size:200% 100%;animation:pulse 1.2s infinite}
@keyframes pulse{to{background-position:-200% 0}}
@media(max-width:980px){
  .tv-shell{grid-template-columns:190px 300px minmax(0,1fr)}
}
@media(max-width:760px){
  .tv-shell{height:auto;grid-template-columns:1fr;padding:10px}
  .sidebar,.channels{height:320px}
  .viewer{grid-template-rows:340px auto}
  .top-actions input{width:44vw}
  .admin-grid{grid-template-columns:1fr;padding:12px}
}


/* ===== WEBPLAYER BRANDING ===== */
:root{
  --accent:#8a8a8a;
  --accent2:#c7c7c7;
}

html,body{
  background:
    radial-gradient(circle at 72% 18%, rgba(138,138,138,.10), transparent 30%),
    radial-gradient(circle at 18% 76%, rgba(199,199,199,.06), transparent 28%),
    linear-gradient(180deg,#0f0f0f 0%,#121212 48%,#080808 100%);
}

/* Login backdrop: graphite and silver */
.auth-bg{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.86) 32%,rgba(8,8,8,.52) 64%,rgba(8,8,8,.78) 100%),
    linear-gradient(180deg,rgba(11,11,11,.35),rgba(11,11,11,.65)),
    url('login-city-lights.png') center center / cover no-repeat;
}
.auth-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 70% 20%, rgba(138,138,138,.22), transparent 22%),
    radial-gradient(circle at 82% 65%, rgba(199,199,199,.14), transparent 18%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.30));
}
.auth-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(110deg,rgba(255,255,255,.03) 0,rgba(255,255,255,0) 28%),
    radial-gradient(circle at 16% 84%, rgba(138,138,138,.10), transparent 16%);
  pointer-events:none;
}

.auth-card{
  border-color:rgba(162,162,162,.22);
  background:linear-gradient(180deg,rgba(20,20,20,.78),rgba(10,10,10,.88));
  box-shadow:0 34px 90px rgba(0,0,0,.50),0 0 60px rgba(138,138,138,.06);
}

.ll-logo{display:block;object-fit:contain}
.ll-logo-login{width:152px;max-width:62%;margin-bottom:18px}
.ll-logo-top{width:78px;height:28px}

.brand-inline strong{
  font-weight:800;
  letter-spacing:.01em;
}

.topbar{
  background:linear-gradient(180deg,rgba(12,12,12,.95),rgba(12,12,12,.82));
  border-bottom-color:rgba(162,162,162,.15);
}

.player-page{
  background:
    radial-gradient(circle at 70% 0,rgba(138,138,138,.07),transparent 32%),
    linear-gradient(180deg,#0f0f0f 0,#0f0f0f 100%);
}

.panel{
  background:linear-gradient(180deg,rgba(23,23,23,.97),rgba(14,14,14,.97));
  border-color:rgba(162,162,162,.15);
  box-shadow:0 12px 35px rgba(0,0,0,.16);
}

.category-btn:hover,.category-btn.active{
  background:linear-gradient(90deg,rgba(138,138,138,.20),rgba(199,199,199,.055));
}

.channel-row:hover,.channel-row.active{
  background:linear-gradient(90deg,rgba(35,35,35,.92),rgba(26,26,26,.92));
  border-color:rgba(145,145,145,.24);
}

.play-orb{
  background:linear-gradient(135deg,#838383,#bdbdbd);
  box-shadow:0 18px 55px rgba(138,138,138,.28);
}

.video-empty{
  background:
    radial-gradient(circle at 50% 44%,rgba(138,138,138,.13),transparent 22%),
    linear-gradient(145deg,#101010,#070707 70%);
}

.stack button,.auth-card button{
  background:linear-gradient(135deg,#838383,#7b7b7b);
  box-shadow:0 12px 28px rgba(138,138,138,.18);
}

@media(max-width:760px){
  .ll-logo-login{width:128px}
}

/* Neutral silver controls */
:root{--accent:#b8b8b8;--accent2:#e0e0e0;--muted:#a3a3a3}
.stack button,.auth-card button{background:linear-gradient(135deg,#dedede,#a8a8a8);color:#171717;box-shadow:0 12px 28px rgba(180,180,180,.12)}
.stack button:hover:not(:disabled),.auth-card button:hover:not(:disabled){background:linear-gradient(135deg,#eeeeee,#bcbcbc)}
.play-orb,.brand-mark{color:#171717}
button:focus-visible,a:focus-visible{outline:2px solid #dedede;outline-offset:3px}
input::placeholder,textarea::placeholder{color:#999999}
input[type="checkbox"]{accent-color:#b8b8b8}

.playback-status{position:absolute;left:16px;right:16px;top:16px;z-index:2;padding:14px;border:1px solid #666;border-radius:12px;background:rgba(20,20,20,.95);color:#eee;font-size:14px;line-height:1.5}
.playback-status[hidden]{display:none}