:root {
  color-scheme: dark;
  --bg: #080b12;
  --surface: #151923;
  --muted: #98a0ae;
  --red: #ea273d;
  --red-deep: #ad132d;
  --border: rgba(255,255,255,.11);
  --white: #f4f5fa;
  --page-width: 1480px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--white); background: var(--bg); min-height: 100vh; }
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(ellipse 65% 55% at 16% 3%,#251523 0,transparent 70%),linear-gradient(118deg,#080b12,#0d121d 60%,#090b12); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid #fb6c81; outline-offset:3px; }
.ambient { position:fixed; width:43vw; aspect-ratio:1; filter:blur(130px); opacity:.17; pointer-events:none; z-index:-1; border-radius:50%; }
.ambient-a { top:-27vw; left:5%; background:#ce1b48; }
.ambient-b { bottom:-30vw; right:-15vw; background:#3556ba; }
.brand-lockup { display:flex; align-items:center; gap:13px; flex-shrink:0; letter-spacing:.11em; }
.brand-mark { display:grid; place-content:center; width:57px; height:57px; border-radius:18px; background:linear-gradient(142deg,#f53950,#ac1029); font-size:20px; font-weight:950; letter-spacing:-.13em; box-shadow:0 15px 34px #ab10294d; }
.brand-mark span { color:#ffd7df; }
.brand-text { font-size:22px; font-weight:920; line-height:1.05; }
.brand-text small { display:block; font-size:9px; font-weight:700; letter-spacing:.36em; margin-top:7px; color:#aeb2c1; }
.login-layout { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(370px,.72fr); grid-template-rows:auto 1fr auto; column-gap:6vw; max-width:var(--page-width); margin:auto; padding:42px clamp(22px,5vw,72px) 20px; }
.login-layout > .brand-lockup { grid-column:1/-1; }
.login-copy { align-self:center; padding:70px 0 50px; min-width:0; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.2em; font-weight:850; color:#ffb2bf; }
.eyebrow.small { font-size:10px; color:#f08396; }
.live-dot { display:inline-block; flex-shrink:0; width:7px; height:7px; border-radius:50%; background:#f03954; box-shadow:0 0 0 5px #f0395424,0 0 24px #f0395488; }
.login-copy h1 { font-size:clamp(46px,5.2vw,82px); letter-spacing:-.062em; line-height:1.06; margin:25px 0 22px; font-weight:880; }
h1 em { font-style:normal; color:#fc425c; }
.login-copy > p { font-size:17px; line-height:1.82; max-width:530px; color:#a6adba; }
.feature-list { display:flex; gap:10px; flex-wrap:wrap; margin:32px 0 28px; }
.feature-list span { color:#e4e7f0; font-size:12px; font-weight:750; background:#ffffff0d; border:1px solid #ffffff16; padding:10px 14px; border-radius:10px; }
.login-art { height:245px; max-width:600px; position:relative; margin-top:30px; overflow:hidden; border-radius:20px; background:radial-gradient(circle at 38% 58%,#8e243854,transparent 55%),linear-gradient(132deg,#1b1b2b,#0f121f); border:1px solid #ffffff13; }
.login-art::before { content:""; position:absolute; inset:0; background:linear-gradient(25deg,transparent 42%,#fff1 42.3%,transparent 43%); }
.art-card { position:absolute; width:180px; height:185px; top:40px; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:15px; border:1px solid #ffffff30; box-shadow:0 12px 46px #0009; transform:rotate(-8deg); }
.art-card span { font-weight:900; font-size:10px; letter-spacing:.23em; color:#fff9; }
.art-card b { margin-top:10px; font-size:19px; }
.art-one { left:12%; background:linear-gradient(30deg,#510d26,#e13c60 55%,#49356a); }
.art-two { left:39%; transform:rotate(4deg); background:linear-gradient(45deg,#052d5c,#1b548c,#ac2e49); }
.art-three { left:65%; transform:rotate(11deg); background:linear-gradient(40deg,#4f214e,#76518d,#182a42); }
.login-box { background:linear-gradient(153deg,rgba(29,33,45,.94),rgba(14,16,24,.96)); border:1px solid #ffffff1c; border-radius:26px; padding:clamp(26px,3.4vw,46px); align-self:center; box-shadow:0 30px 100px #0008, inset 0 1px #ffffff13; }
.box-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.glass-chip { font-size:10px; font-weight:850; letter-spacing:.14em; background:#e9384b26; color:#ff8495; border:1px solid #fc5b7140; padding:9px 12px; border-radius:8px; }
.secure-indicator { color:#8dd9af; letter-spacing:.12em; font-weight:800; font-size:10px; }
.login-box h2 { font-size:32px; margin:35px 0 10px; letter-spacing:-.04em; }
.muted { color:var(--muted); }
.login-box .muted { margin:0 0 32px; font-size:14px; line-height:1.65; }
form label { display:block; margin:19px 0 9px; color:#d7dae4; font-size:12px; font-weight:800; }
.input-wrap { position:relative; display:flex; align-items:center; min-height:54px; border:1px solid #3a3e4c; border-radius:11px; background:#0c0e15; }
.input-wrap:focus-within { border-color:#f34d65; box-shadow:0 0 0 3px #ed30451b; }
.field-icon { color:#999dac; font-size:20px; padding:0 15px; }
.input-wrap input { min-width:0; width:100%; border:0; background:transparent; color:#f6f7fa; font-size:14px; outline:0; padding:15px 13px 15px 0; }
.input-wrap.lock { opacity:.65; }
.input-wrap .reveal { border:0; background:none; color:#adb4c1; font-size:18px; padding:12px; margin-right:3px; }
.primary-button { border:0; color:white; font-weight:800; background:linear-gradient(102deg,#ed2e47,#be1532); padding:15px 20px; border-radius:11px; box-shadow:0 13px 35px #b51b3048; transition:transform .15s ease,filter .15s ease; }
.primary-button:not(:disabled):hover { filter:brightness(1.12); transform:translateY(-1px); }
.primary-button.full { width:100%; display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:27px; font-size:14px; }
.form-error { color:#ffb6bf; border:1px solid #bb374b66; border-radius:9px; background:#bb374b22; padding:12px; font-size:12px; line-height:1.5; }
.login-foot { display:flex; align-items:flex-start; gap:12px; padding:24px 0 0; border-top:1px solid #ffffff17; margin-top:28px; }
.login-foot p { margin:0; font-size:12px; line-height:1.65; color:#9299a8; }
.privacy-icon { font-size:22px; color:#86b7a0; }
.login-footer { grid-column:1/-1; color:#656c7a; font-size:10px; letter-spacing:.22em; padding-top:12px; }
.login-footer span { margin:0 8px; color:#a43249; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:88px; padding:18px clamp(20px,4vw,70px); position:sticky; top:0; z-index:10; background:#0b0e16f5; border-bottom:1px solid #ffffff0b; backdrop-filter:blur(18px); }
.brand-small .brand-mark { width:44px; height:44px; border-radius:13px; font-size:16px; }
.brand-small .brand-text { font-size:16px; }
.brand-small .brand-text small { font-size:7px; margin-top:5px; }
.main-nav { display:flex; gap:4px; align-items:center; }
.nav-item { border:0; border-radius:9px; padding:11px 13px; font-size:12px; font-weight:780; color:#a3a9b8; background:transparent; white-space:nowrap; }
.nav-item:hover, .nav-item.active { color:white; background:#ffffff12; }
.nav-item.active::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:#ee334b; vertical-align:middle; margin-right:9px; }
.profile-actions { display:flex; align-items:center; gap:12px; }
.user-pill { max-width:145px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:12px; color:#ced1dc; background:#ffffff0c; border:1px solid #ffffff13; border-radius:30px; padding:11px 13px; }
.outline-button { border:1px solid #ffffff30; background:#ffffff0a; color:#e1e4ed; border-radius:10px; padding:11px 14px; font-size:12px; font-weight:800; }
.outline-button:hover { background:#ffffff18; }
.mobile-nav { display:none; }
.dashboard-hero { position:relative; max-width:var(--page-width); margin:25px auto 0; border:1px solid #ffffff1b; border-radius:24px; min-height:360px; overflow:hidden; background:linear-gradient(112deg,#17111e,#202237 57%,#1f0c1b); }
.hero-haze { position:absolute; inset:0; background:radial-gradient(circle at 73% 48%,#e5265152,transparent 31%),radial-gradient(circle at 53% 110%,#1a428366,transparent 37%); }
.hero-content { position:relative; width:58%; z-index:1; padding:50px clamp(24px,5vw,72px); }
.hero-tag { color:#f9a6b4; font-weight:840; font-size:10px; letter-spacing:.19em; display:inline-flex; gap:11px; align-items:center; }
.hero-content h1 { font-size:clamp(37px,4vw,60px); margin:20px 0 16px; line-height:1.08; letter-spacing:-.05em; }
.hero-content p { color:#b1b0bf; font-size:14px; line-height:1.7; max-width:560px; }
.hero-metrics { display:flex; gap:42px; margin-top:30px; }
.hero-metrics div { display:flex; flex-direction:column; gap:4px; }
.hero-metrics strong { font-size:23px; }
.hero-metrics small { color:#b4b3c1; font-size:9px; font-weight:900; letter-spacing:.1em; }
.hero-display { position:absolute; right:4%; top:0; width:37%; height:100%; display:grid; place-items:center; transform:rotate(-7deg); }
.screen-bezel { display:flex; width:80%; aspect-ratio:1.55; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; border:10px solid #191925; border-radius:18px; box-shadow:0 35px 80px #000c,0 0 1px 2px #fff3; background:radial-gradient(circle at 25% 35%,#b73257,#272449 53%,#0b1324); }
.screen-shine { position:absolute; inset:0; background:linear-gradient(140deg,#fff3 0%,transparent 44%); }
.screen-word { text-align:center; font-weight:950; font-size:clamp(26px,4vw,55px); line-height:.86; letter-spacing:-.04em; text-shadow:0 8px 25px #0008; }
.screen-now { position:absolute; bottom:15px; left:18px; font-size:8px; letter-spacing:.15em; font-weight:800; }
.screen-now i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#f54a68; margin-right:5px; }
.browse-section { max-width:var(--page-width); margin:0 auto; padding:42px 22px 80px; min-height:50vh; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:26px; }
.section-heading h2 { margin:10px 0 6px; font-size:clamp(25px,2.3vw,37px); letter-spacing:-.035em; }
.section-heading p { margin:0; font-size:13px; }
.result-badge { font-size:11px; font-weight:900; color:#fcb8c4; border:1px solid #ed43614c; background:#de20402b; border-radius:30px; padding:10px 15px; }
.toolbar { display:flex; align-items:end; gap:12px; margin-bottom:23px; flex-wrap:wrap; }
.search-box { display:flex; align-items:center; gap:14px; min-width:280px; max-width:500px; flex:1; border-radius:11px; border:1px solid #ffffff20; background:#ffffff0b; padding:0 15px; }
.search-box span { font-size:26px; color:#b0b4bd; }
.search-box input { flex:1; min-width:0; border:0; background:transparent; outline:none; padding:14px 0; font-size:13px; color:white; }
.filter { display:flex; flex-direction:column; gap:6px; color:#9399a9; font-size:10px; font-weight:800; letter-spacing:.06em; }
.filter select { appearance:none; border:1px solid #ffffff20; border-radius:10px; background:#161a27; color:#ecedf4; padding:13px 29px 13px 15px; min-width:210px; max-width:350px; font-size:12px; }
.poster-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:23px 17px; }
.poster-card { position:relative; min-width:0; cursor:pointer; }
.poster-media { position:relative; aspect-ratio:2/2.65; border-radius:14px; background:linear-gradient(143deg,#17243b,#80263b 75%,#141425); overflow:hidden; border:1px solid #ffffff18; box-shadow:0 13px 24px #0004; }
.poster-card:nth-child(6n+2) .poster-media { background:linear-gradient(145deg,#192c45,#443571,#1a1d2e); }
.poster-card:nth-child(6n+3) .poster-media { background:linear-gradient(145deg,#3c1a31,#a4434f,#2e2241); }
.poster-card:nth-child(6n+4) .poster-media { background:linear-gradient(145deg,#14363b,#356a67,#141d34); }
.poster-card:nth-child(6n+5) .poster-media { background:linear-gradient(145deg,#30213e,#5f2e4d,#102c43); }
.poster-card:nth-child(6n+6) .poster-media { background:linear-gradient(145deg,#363248,#9d613c,#1a1e33); }
.poster-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.poster-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; color:#ffffffbd; padding:16px; text-align:center; }
.poster-placeholder b { font-size:clamp(22px,2.9vw,46px); letter-spacing:-.08em; opacity:.68; }
.poster-placeholder span { text-transform:uppercase; font-size:10px; font-weight:900; letter-spacing:.18em; }
.poster-quality { position:absolute; left:10px; top:10px; font-size:9px; font-weight:900; letter-spacing:.11em; border-radius:5px; background:#05060bb3; padding:6px 7px; }
.poster-favorite { position:absolute; right:8px; top:8px; z-index:2; width:34px; height:34px; border:1px solid #ffffff36; border-radius:50%; background:#090b12c9; color:#d9d9e1; font-size:21px; display:grid; place-content:center; }
.poster-favorite.active { color:#ffcb58; }
.poster-card:hover .poster-media { transform:translateY(-4px); border-color:#ffffff62; }
.poster-media { transition:transform .17s ease,border .17s ease; }
.poster-title { font-size:13px; font-weight:750; color:#f3f4f7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:11px 0 5px; }
.poster-detail { font-size:11px; color:#8790a1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.loading { display:flex; gap:12px; align-items:center; font-size:13px; color:#b9becb; margin:35px 0; }
.spinner { width:22px; height:22px; border:3px solid #ffffff1b; border-top-color:#eb3b55; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.notice { border:1px solid #e58d4855; background:#b36c2920; border-radius:11px; color:#f5caa2; padding:14px 16px; margin:18px 0; font-size:12px; line-height:1.6; }
.empty-state { text-align:center; padding:70px 20px; border:1px dashed #ffffff24; border-radius:16px; color:#a9afbd; }
.empty-state > span { font-size:36px; color:#ff5771; }
.empty-state h3 { margin:15px 0 5px; color:#efeff6; }
.empty-state p { margin:0; font-size:13px; }
.more-button { display:block; margin:32px auto 0; border:1px solid #ffffff26; background:#ffffff0b; color:#e8e9f1; border-radius:10px; padding:13px 28px; font-weight:800; }
.manage-list { border:1px solid #ffffff1c; border-radius:15px; overflow:hidden; }
.manage-row { display:grid; grid-template-columns:minmax(180px,1fr) auto auto minmax(130px,180px) auto; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid #ffffff12; background:#10141f; font-size:12px; }
.manage-row:nth-child(even) { background:#151925; }
.manage-row:last-child { border-bottom:0; }
.manage-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:750; }
.manage-row button { color:#fff; background:#ffffff0b; border:1px solid #ffffff22; border-radius:8px; min-width:32px; height:34px; }
.manage-row button.active { color:#ffcc64; }
.manage-row label { display:flex; align-items:center; gap:5px; color:#adb4bf; }
.manage-row select { width:100%; min-width:0; border:1px solid #ffffff22; background:#202538; color:#efeff4; border-radius:8px; padding:9px; }
.manage-arrows { display:flex; gap:4px; }
.manage-list { padding:18px; }
.country-hint { color:#a9b1c3; font-size:13px; line-height:1.6; margin:0 0 14px; }
.country-refresh { margin:0 0 15px; font-size:12px; }
.country-error { border:1px solid #e58d4855; background:#b36c2920; border-radius:10px; color:#ffb6a9; padding:12px 15px; font-size:12px; }
.country-row { display:flex; align-items:center; justify-content:space-between; gap:20px; background:#151b29; border:1px solid #ffffff19; border-radius:12px; padding:17px 19px; margin:10px 0; }
.country-info { display:grid; gap:5px; min-width:0; }
.country-info strong { font-size:14px; color:#f5f5fa; overflow-wrap:anywhere; }
.country-info small { color:#a4adbf; font-size:12px; }
.country-toggle { border:1px solid #ffffff38; color:#c5ccdd; border-radius:40px; min-width:80px; padding:11px 17px; font-weight:800; background:#2a3241; cursor:pointer; }
.country-toggle.active { color:#fff; background:#cf2f62; border-color:#ed4679; }
.country-toggle:disabled, .country-refresh:disabled { cursor:wait; opacity:.55; }
.app-footer { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; border-top:1px solid #ffffff14; padding:27px clamp(20px,4vw,70px); color:#747e91; font-size:10px; font-weight:800; letter-spacing:.12em; }
.details-dialog { width:min(620px,calc(100vw - 30px)); max-height:calc(100vh - 40px); overflow:auto; border:1px solid #ffffff2d; border-radius:18px; background:#141724; color:var(--white); padding:0; box-shadow:0 35px 100px #000d; }
.details-dialog::backdrop { background:#030407dd; backdrop-filter:blur(7px); }
.dialog-close { position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border:1px solid #ffffff37; border-radius:50%; color:white; background:#141722c9; font-size:24px; }
.details-backdrop { height:205px; background:linear-gradient(140deg,#812947,#282f56 65%,#111629); }
.details-art { width:100%; height:100%; background:radial-gradient(circle at 47% 35%,#ff477359,transparent 45%); }
.details-body { padding:28px; }
.details-body h2 { font-size:30px; letter-spacing:-.03em; margin:9px 0 12px; }
.details-body p { color:#aeb5c4; line-height:1.7; font-size:13px; }
.video-warning { padding:14px; border:1px solid #bd82494c; border-radius:10px; background:#a5753520; color:#eed0a9 !important; }
.player-panel { margin:18px 0; border:1px solid #ffffff2a; padding:12px; border-radius:14px; background:#070910; }
.player-panel video { display:block; width:100%; aspect-ratio:16/9; background:#000; border-radius:9px; }
.player-status { color:#c2c8d4 !important; font-size:12px !important; margin:12px 0 !important; }
.details-body #play-live-button { margin:0 0 14px; }
.channel-switcher { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:0 0 16px; }
.channel-switcher[hidden] { display:none; }
.channel-switcher span { color:#aeb7cb; font-size:12px; font-weight:750; }
.channel-switcher button:disabled { opacity:.35; cursor:not-allowed; }
.channel-switcher button { flex:1 1 auto; }
.details-body #details-favorite { display:block; margin-top:12px; }
@media (max-width:1150px) {
  .login-layout { column-gap:3vw; }
  .main-nav { gap:0; }
  .nav-item { padding:10px 7px; font-size:11px; }
  .user-pill { display:none; }
  .poster-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:850px) {
  .login-layout { display:flex; flex-direction:column; padding:25px 20px; }
  .login-copy { padding:55px 0 15px; }
  .login-copy h1 { font-size:clamp(43px,8vw,65px); }
  .login-art { height:150px; }
  .art-card { top:24px; height:135px; }
  .login-box { margin:20px auto 36px; width:min(100%,540px); }
  .login-footer { align-self:flex-start; }
  .topbar { min-height:68px; }
  .main-nav { display:none; }
  .mobile-nav { display:flex; gap:3px; overflow:auto; border-bottom:1px solid #ffffff1c; background:#10131e; padding:8px 14px; position:sticky; top:68px; z-index:9; }
  .mobile-nav button { white-space:nowrap; border:0; border-radius:8px; padding:12px; background:transparent; color:#a3a9b7; font-size:12px; font-weight:800; }
  .mobile-nav button.active { background:#ffffff16; color:#fff; }
  .dashboard-hero { margin:15px 15px 0; }
  .hero-content { width:78%; }
  .hero-display { opacity:.4; }
  .poster-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .login-copy h1 { font-size:43px; }
  .login-copy > p { font-size:14px; }
  .login-art { display:none; }
  .login-box { padding:26px 22px; }
  .topbar { padding:11px 15px; }
  .brand-small .brand-text { font-size:14px; }
  .profile-actions .outline-button { padding:9px; }
  .hero-content { width:100%; padding:36px 23px; }
  .hero-content h1 { font-size:36px; }
  .hero-display { display:none; }
  .hero-metrics { gap:24px; }
  .browse-section { padding:30px 15px 55px; }
  .toolbar { display:block; }
  .search-box { max-width:none; margin-bottom:12px; }
  .filter select { width:100%; max-width:none; }
  .poster-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 13px; }
  .manage-row { grid-template-columns:minmax(115px,1fr) auto auto; gap:8px; padding:10px; }
  .manage-row select, .manage-arrows { grid-column:1/-1; }
  .manage-row select { width:100%; }
  .manage-arrows { justify-content:flex-end; }
}