* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05070d; color: #f7f8fb; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 24px; }
button, input, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

#background { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: radial-gradient(circle at 18% 8%, #1f2540 0, #090d19 32%, #05070d 70%); }
#background:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; }
#background i { position: absolute; display: block; border: 1px solid rgba(135,108,255,.25); border-radius: 50%; }
#background i:nth-child(1) { width: 720px; height: 720px; left: -250px; top: -370px; }
#background i:nth-child(2) { width: 940px; height: 940px; right: -530px; bottom: -560px; border-color: rgba(26,205,255,.18); }
#background i:nth-child(3) { width: 440px; height: 440px; right: 16%; top: 18%; border-color: rgba(255,255,255,.06); }

.app-shell { position: relative; z-index: 1; width: 100%; height: 100%; }
.topbar { position: absolute; z-index: 10; left: 0; top: 0; width: 100%; height: 114px; padding: 30px 58px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; pointer-events: none; }
.brand { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 16px; }
.brand img { width: 54px; height: 54px; border-radius: 14px; box-shadow: 0 8px 30px rgba(105,79,255,.32); }
.brand img + div { margin-left: 16px; }
.brand div { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.brand strong { font-size: 23px; letter-spacing: .16em; }
.brand span { margin-top: 4px; color: #9198ad; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.clock { color: #aeb4c6; font-size: 22px; font-variant-numeric: tabular-nums; }

.screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; }
.screen.active { display: block; }
.center-screen.active { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; padding: 120px 70px 55px; text-align: center; }
.eyebrow { margin: 0 0 12px; color: #9e8cff; font-size: 16px; font-weight: 700; letter-spacing: .22em; }
h1 { margin: 0; font-size: 54px; line-height: 1.08; letter-spacing: -.025em; }
.lead { max-width: 860px; margin: 22px auto 0; color: #afb5c7; font-size: 23px; line-height: 1.5; }

.orbit { position: relative; width: 112px; height: 112px; margin-bottom: 34px; border: 2px solid rgba(151,127,255,.28); border-radius: 50%; box-shadow: 0 0 70px rgba(112,83,255,.24); -webkit-animation: spin 2.5s linear infinite; animation: spin 2.5s linear infinite; }
.orbit:before, .orbit:after { content: ""; position: absolute; border-radius: 50%; }
.orbit:before { left: 19px; top: 19px; right: 19px; bottom: 19px; border: 1px solid rgba(92,208,255,.5); }
.orbit:after { width: 17px; height: 17px; left: 1px; top: 42px; background: #9b82ff; box-shadow: 0 0 25px #8065ff; }
.orbit span { position: absolute; left: 45px; top: 45px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 34px rgba(255,255,255,.72); }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

.access-card { width: 920px; max-width: 92vw; padding: 54px 64px 44px; border: 1px solid rgba(255,255,255,.12); border-radius: 32px; background: rgba(9,12,23,.91); box-shadow: 0 30px 90px rgba(0,0,0,.52); }
.access-card h1 { font-size: 48px; }
.choice-grid { margin-top: 42px; display: -webkit-flex; display: flex; gap: 24px; }
.choice-grid .tile + .tile { margin-left: 24px; }
.tile { min-height: 210px; -webkit-flex: 1; flex: 1; padding: 30px; color: #f4f5fa; text-align: left; border: 2px solid rgba(255,255,255,.1); border-radius: 24px; background: rgba(255,255,255,.055); cursor: pointer; }
.tile.primary { background: linear-gradient(145deg, rgba(115,79,255,.3), rgba(37,30,75,.58)); }
.tile b { display: block; width: 56px; height: 56px; margin-bottom: 24px; line-height: 56px; text-align: center; border-radius: 16px; color: #fff; background: #6f54ec; }
.tile strong, .tile span { display: block; }
.tile strong { margin-bottom: 10px; font-size: 28px; }
.tile span { color: #9ea5b7; font-size: 18px; }
.access-panel { margin-top: 36px; }
.panel-label { margin: 0 0 10px; color: #8991a7; font-size: 15px; letter-spacing: .17em; }
.device-code { margin: 14px 0 18px; color: #fff; font-size: 72px; font-weight: 800; letter-spacing: .16em; text-shadow: 0 0 34px rgba(135,108,255,.55); }
.device-help { max-width: 700px; margin: 0 auto 26px; color: #aeb4c5; font-size: 20px; line-height: 1.45; }
.button, .small-button, .back-button, .text-button { display: inline-block; min-height: 58px; margin: 7px; padding: 14px 25px; color: #ecedf4; text-decoration: none; border: 2px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.07); cursor: pointer; }
.primary-button { border-color: rgba(142,119,255,.72); background: #6e54e7; }
.text-button { color: #aeb4c5; border-color: transparent; background: transparent; }
.password-toggle { display: block; margin: -5px 0 8px auto; min-height: 44px; padding: 7px 13px; font-size: 16px; }
.access-panel label { display: block; margin: 18px 0; text-align: left; }
.access-panel label span { display: block; margin: 0 0 8px; color: #abb1c3; font-size: 17px; }
.access-panel input { width: 100%; height: 64px; padding: 0 18px; color: #fff; border: 2px solid rgba(255,255,255,.15); border-radius: 14px; outline: 0; background: #111624; }
.error-message { min-height: 28px; margin: 18px 0 0; color: #ff8d9a; font-size: 18px; }

.content-screen { padding: 135px 58px 44px; overflow: hidden; }
.section-heading { height: 150px; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: space-between; justify-content: space-between; }
.section-heading h1 { font-size: 48px; }
.section-heading p:not(.eyebrow) { margin: 12px 0 0; color: #9ca3b5; font-size: 18px; }
.section-heading.compact { height: 145px; -webkit-justify-content: flex-start; justify-content: flex-start; gap: 28px; }
.section-heading.compact .back-button + div { margin-left: 28px; }
.small-button, .back-button { min-height: 50px; margin: 3px 0; padding: 11px 20px; font-size: 17px; }
.heading-with-back { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; }
.heading-with-back .back-button + div { margin-left: 28px; }

.portal-screen { padding-top: 132px; }
.portal-heading { height: 145px; text-align: center; }
.portal-heading h1 { font-size: 48px; }
.portal-heading p:last-child { margin: 12px 0 0; color: #9ca3b5; font-size: 18px; }
.portal-grid { width: 1120px; max-width: 92%; height: calc(100% - 145px); margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.portal-card { position: relative; width: calc(50% - 14px); height: calc(50% - 14px); min-height: 230px; margin: 0 14px 14px 0; padding: 30px 36px; overflow: hidden; color: #fff; text-align: left; border: 2px solid rgba(255,255,255,.1); border-radius: 27px; background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025)); cursor: pointer; }
.portal-card:nth-child(even) { margin-right: 0; margin-left: 14px; }
.portal-card:after { content: ""; position: absolute; width: 260px; height: 260px; right: -105px; top: -110px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.portal-card b { position: absolute; right: 34px; top: 30px; width: 62px; height: 62px; line-height: 62px; color: #fff; text-align: center; font-size: 27px; border-radius: 18px; background: rgba(119,88,246,.72); }
.portal-card span, .portal-card strong, .portal-card small, .portal-card i { display: block; }
.portal-card span { color: #9f8bff; font-size: 14px; font-weight: 700; letter-spacing: .18em; }
.portal-card strong { margin-top: 18px; font-size: 34px; }
.portal-card small { margin-top: 10px; color: #aab0c1; font-size: 17px; }
.portal-card i { position: absolute; left: 36px; bottom: 26px; color: #d4d0ff; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: .11em; }
.portal-cinema { background: linear-gradient(145deg, rgba(27,121,151,.28), rgba(16,34,48,.32)); }
.portal-cinema b { background: rgba(27,174,207,.68); }
.portal-favorites { background: linear-gradient(145deg, rgba(130,33,88,.25), rgba(49,17,38,.3)); }
.portal-favorites b { background: rgba(210,55,126,.66); }
.portal-account { background: linear-gradient(145deg, rgba(191,112,25,.2), rgba(53,32,14,.3)); }
.portal-account b { background: rgba(215,138,45,.66); }
.region-grid { height: calc(100% - 150px); display: -webkit-flex; display: flex; gap: 22px; }
.region-grid .region-card + .region-card { margin-left: 22px; }
.region-card { position: relative; -webkit-flex: 1; flex: 1; min-width: 0; height: 68%; padding: 30px 26px; overflow: hidden; color: #fff; text-align: left; border: 2px solid rgba(255,255,255,.1); border-radius: 26px; background: linear-gradient(155deg, rgba(255,255,255,.095), rgba(255,255,255,.025)); cursor: pointer; }
.region-card:before { content: ""; position: absolute; width: 230px; height: 230px; right: -100px; top: -100px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.region-card b { display: block; margin-bottom: 108px; color: #8f7aff; font-size: 18px; letter-spacing: .12em; }
.region-card strong { display: block; font-size: 30px; }
.region-card span { display: block; margin-top: 12px; color: #aab0c1; font-size: 17px; }

.directory-grid { height: calc(100% - 145px); padding: 5px 3px 28px; overflow-y: auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: flex-start; align-content: flex-start; }
.directory-card { position: relative; width: calc(20% - 16px); height: 132px; margin: 0 16px 16px 0; padding: 20px 45px 20px 20px; color: #fff; text-align: left; border: 2px solid rgba(255,255,255,.095); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); cursor: pointer; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.directory-card b { -webkit-flex: 0 0 58px; flex: 0 0 58px; width: 58px; height: 58px; margin-right: 18px; line-height: 58px; color: #dfe1e9; text-align: center; font-size: 16px; border-radius: 14px; background: rgba(255,255,255,.105); }
.directory-card span, .directory-card strong, .directory-card small { display: block; min-width: 0; }
.directory-card span { overflow: hidden; }
.directory-card strong { overflow: hidden; font-size: 19px; white-space: nowrap; text-overflow: ellipsis; }
.directory-card small { margin-top: 8px; color: #949bad; font-size: 14px; }
.directory-card i { position: absolute; right: 20px; top: 50%; margin-top: -18px; color: #9a83ff; font-size: 31px; font-style: normal; line-height: 36px; }
.directory-card.all-card { border-color: rgba(137,111,255,.36); background: linear-gradient(145deg, rgba(112,78,241,.2), rgba(32,28,62,.34)); }
.directory-card.all-card b { color: #fff; background: rgba(115,85,236,.55); }
.category-card b { color: #b9e6ff; background: rgba(49,99,123,.36); }
.category-card i { color: #55c9ff; }

.channel-grid { height: calc(100% - 190px); padding: 5px 3px 30px; overflow-y: auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; }
.channel-card { position: relative; width: calc(20% - 16px); height: 196px; margin: 0 16px 16px 0; padding: 16px; overflow: hidden; color: #fff; text-align: left; border: 2px solid rgba(255,255,255,.095); border-radius: 20px; background: rgba(255,255,255,.055); cursor: pointer; }
.channel-card .logo-box { height: 108px; margin-bottom: 13px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; border-radius: 13px; background: rgba(255,255,255,.94); overflow: hidden; }
.channel-card img { max-width: 90%; max-height: 90%; }
.channel-card strong { display: block; overflow: hidden; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; }
.channel-card small { display: block; margin-top: 5px; color: #9299ac; font-size: 13px; }
.channel-number { position: absolute; left: 22px; top: 22px; z-index: 2; padding: 4px 8px; color: #fff; font-size: 12px; border-radius: 7px; background: rgba(6,8,14,.78); }
.favorite-card .favorite-heart { position: absolute; right: 22px; top: 22px; z-index: 2; width: 32px; height: 32px; line-height: 32px; text-align: center; color: #ff6eae; border-radius: 9px; background: rgba(6,8,14,.82); }
.load-more { position: absolute; right: 58px; bottom: 32px; font-size: 17px; }

.cinema-scroll { height: calc(100% - 145px); padding: 0 4px 30px; overflow-y: auto; }
.cinema-row-section { margin-bottom: 34px; }
.cinema-row-section h2 { margin: 0 0 18px; font-size: 25px; }
.movie-row { min-height: 322px; display: -webkit-flex; display: flex; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 18px; }
.movie-card { -webkit-flex: 0 0 220px; flex: 0 0 220px; width: 220px; height: 310px; margin: 0 18px 0 0; padding: 0 0 16px; overflow: hidden; color: #fff; text-align: left; border: 2px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.055); cursor: pointer; }
.movie-poster { position: relative; display: block; width: 100%; height: 230px; overflow: hidden; background: #151925; }
.movie-poster img { width: 100%; height: 100%; object-fit: cover; }
.movie-poster i { position: absolute; right: 14px; bottom: 13px; width: 42px; height: 42px; line-height: 42px; text-align: center; font-size: 17px; font-style: normal; border-radius: 50%; background: rgba(105,79,237,.92); box-shadow: 0 8px 25px rgba(0,0,0,.38); }
.movie-card strong { display: block; margin: 13px 14px 0; overflow: hidden; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; }
.movie-card small { display: block; margin: 6px 14px 0; overflow: hidden; color: #969db0; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.empty-state { width: 100%; padding: 80px 20px; color: #aeb4c5; text-align: center; }
.empty-state b { display: block; color: #9d86ff; font-size: 54px; }
.empty-state h2 { margin: 14px 0 8px; color: #fff; font-size: 28px; }
.empty-state p { margin: 0; font-size: 18px; }

.account-card { width: 940px; max-width: 92vw; padding: 48px 56px 40px; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: rgba(9,12,23,.92); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.account-card h1 { font-size: 48px; }
.account-details { margin: 34px 0 26px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; text-align: left; }
.account-details div { width: calc(50% - 10px); margin: 0 10px 12px 0; padding: 20px 22px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.045); }
.account-details div:nth-child(even) { margin-right: 0; margin-left: 10px; }
.account-details span, .account-details strong { display: block; }
.account-details span { color: #8e96aa; font-size: 13px; letter-spacing: .13em; }
.account-details strong { margin-top: 8px; overflow: hidden; font-size: 21px; white-space: nowrap; text-overflow: ellipsis; }
.account-actions { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
.danger-button { color: #ffd9de; border-color: rgba(255,91,111,.45); background: rgba(164,37,55,.34); }

.player-screen { background: #000; }
.player-screen.active { display: block; }
#video { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-shade { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.78), transparent 31%, transparent 70%, rgba(0,0,0,.68)); opacity: 1; -webkit-transition: opacity .25s; transition: opacity .25s; }
.player-info { position: absolute; left: 52px; top: 42px; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; gap: 24px; }
.player-info .back-button + div { margin-left: 24px; }
.player-info h1 { font-size: 38px; }
.player-info p:last-child { margin: 8px 0 0; color: #bdc2ce; font-size: 16px; }
.favorite-button { min-height: 50px; margin: 3px 0 0 26px; padding: 11px 18px; color: #f4ddea; font-size: 16px; border: 2px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(21,24,36,.82); cursor: pointer; }
.favorite-button.saved { color: #fff; border-color: rgba(255,105,174,.7); background: rgba(164,42,100,.72); }
.player-help { position: absolute; right: 50px; bottom: 34px; color: #c3c7d1; font-size: 16px; }
.player-screen.playing .player-shade, .player-screen.playing .player-info { opacity: 0; }
.player-screen.playing .player-help { opacity: .35; }

[data-focusable="1"] { outline: 0; -webkit-transition: border-color .12s, box-shadow .12s, -webkit-transform .12s; transition: border-color .12s, box-shadow .12s, transform .12s; }
[data-focusable="1"]:focus { z-index: 5; border-color: #ffffff !important; box-shadow: 0 0 0 5px rgba(130,103,255,.78), 0 18px 44px rgba(0,0,0,.45); -webkit-transform: scale(1.035); transform: scale(1.035); }
input[data-focusable="1"]:focus { -webkit-transform: none; transform: none; }
.toast { position: absolute; left: 50%; bottom: 34px; z-index: 50; max-width: 900px; padding: 16px 24px; color: #fff; font-size: 17px; text-align: center; border: 1px solid rgba(255,255,255,.17); border-radius: 13px; background: rgba(8,10,17,.94); opacity: 0; pointer-events: none; -webkit-transform: translate(-50%, 18px); transform: translate(-50%, 18px); -webkit-transition: .2s; transition: .2s; }
.toast.show { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

@media (max-width: 1280px) {
  body { font-size: 18px; }
  .topbar { height: 86px; padding: 20px 38px; }
  .brand img { width: 42px; height: 42px; }
  .brand strong { font-size: 18px; }
  .content-screen { padding: 100px 40px 30px; }
  .section-heading { height: 120px; }
  .portal-screen { padding-top: 96px; }
  .portal-heading { height: 108px; }
  .portal-heading h1 { font-size: 36px; }
  .portal-card { min-height: 176px; padding: 21px 27px; }
  .portal-card b { right: 25px; top: 20px; width: 49px; height: 49px; line-height: 49px; font-size: 21px; }
  .portal-card strong { margin-top: 12px; font-size: 26px; }
  .portal-card small { margin-top: 6px; font-size: 14px; }
  .portal-card i { left: 27px; bottom: 17px; font-size: 12px; }
  .region-card b { margin-bottom: 65px; }
  .directory-grid { height: calc(100% - 120px); }
  .directory-card { width: calc(25% - 14px); height: 104px; margin: 0 14px 14px 0; padding: 14px 38px 14px 14px; }
  .directory-card b { -webkit-flex-basis: 46px; flex-basis: 46px; width: 46px; height: 46px; margin-right: 12px; line-height: 46px; font-size: 13px; }
  .directory-card strong { font-size: 15px; }
  .directory-card small { margin-top: 5px; font-size: 12px; }
  .channel-card { height: 150px; }
  .channel-card .logo-box { height: 78px; }
  .channel-grid { height: calc(100% - 145px); }
  .access-card { padding: 34px 50px 28px; }
  .choice-grid { margin-top: 28px; }
  .tile { min-height: 165px; padding: 22px; }
  .tile b { margin-bottom: 12px; }
  .device-code { font-size: 54px; }
  .cinema-scroll { height: calc(100% - 120px); }
  .cinema-row-section { margin-bottom: 22px; }
  .movie-row { min-height: 250px; }
  .movie-card { -webkit-flex-basis: 164px; flex-basis: 164px; width: 164px; height: 238px; }
  .movie-poster { height: 168px; }
  .movie-card strong { margin-top: 9px; font-size: 14px; }
  .account-card { padding: 32px 44px 26px; }
  .account-details { margin: 24px 0 18px; }
  .account-details div { padding: 14px 17px; }
}