:root {
  color-scheme: dark;
  --space-0: 0;
  --space-1: .375rem;
  --space-2: .625rem;
  --space-3: .875rem;
  --space-4: 1.125rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --ink: #f4f6ff;
  --ink-soft: #c7ccdb;
  --ink-muted: #8d94a9;
  --ink-dim: #626a80;
  --void: #03040a;
  --space: #070918;
  --surface: rgba(13, 16, 31, .76);
  --surface-strong: #101425;
  --surface-raised: #171c31;
  --line: rgba(196, 215, 255, .13);
  --line-soft: rgba(196, 215, 255, .075);
  --accent: #238dff;
  --accent-bright: #8bd5ff;
  --accent-soft: rgba(35, 141, 255, .18);
  --success: #57dcaf;
  --warning: #f4bf67;
  --danger: #ff879a;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --shadow-soft: 0 18px 55px rgba(0, 0, 0, .3);
  --shadow-deep: 0 32px 100px rgba(0, 0, 0, .58);
  --focus-ring: 0 0 0 3px rgba(43, 151, 255, .94), 0 0 0 8px rgba(43, 151, 255, .2), 0 18px 45px rgba(0, 89, 255, .24);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --fast: 160ms;
  --base: 260ms;
  --slow: 420ms;
}
* { box-sizing: border-box }
html { background: var(--void); scroll-behavior: smooth }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: #020307; font: 15px/1.48 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.01em }
button, input, select { font: inherit }
button { -webkit-tap-highlight-color: transparent }
a { color: inherit }
.cosmic-backdrop { position: fixed; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(2,3,9,.58), rgba(2,3,9,.12) 62%, rgba(2,3,9,.34)), linear-gradient(0deg, rgba(2,3,9,.54), rgba(2,3,9,.03) 65%), url('/static/assets/cosmo-space-v1.png') center / cover no-repeat; }
.stars { position: fixed; z-index: 1; inset: 0; pointer-events: none; opacity: .16; background-image: radial-gradient(circle at 10% 18%, #d6e9ff 0 1px, transparent 1.6px), radial-gradient(circle at 66% 14%, #7fbdff 0 1px, transparent 1.5px), radial-gradient(circle at 82% 57%, #fff 0 .8px, transparent 1.45px), radial-gradient(circle at 30% 75%, #dfe8ff 0 1px, transparent 1.55px); background-size: 269px 231px, 367px 317px, 221px 197px, 411px 353px; mask-image: linear-gradient(to bottom, #fff, rgba(255,255,255,.8) 75%, transparent) }
#root { position: relative; z-index: 2 }
.boot { min-height: 52vh; display: grid; place-content: center; justify-items: center; gap: var(--space-3); color: var(--ink-muted) }
.loader { width: 27px; height: 27px; border: 2px solid rgba(139, 213, 255, .18); border-top-color: var(--accent-bright); border-radius: 50%; animation: orbit 780ms linear infinite }
@keyframes orbit { to { transform: rotate(360deg) } }

.button, .icon-button, .nav-button, .filter-button { border: 0; color: var(--ink); cursor: pointer }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; gap: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; transition: transform var(--fast) var(--ease-out), background var(--fast), box-shadow var(--fast), border-color var(--fast) }
.button:hover { transform: translateY(-1px); background: #409fff; box-shadow: 0 10px 27px rgba(25, 126, 255, .26) }
.button:active { transform: scale(.975) }
.button.secondary { background: rgba(205, 221, 255, .075); border-color: var(--line); box-shadow: none }
.button.secondary:hover { background: rgba(205, 221, 255, .13); box-shadow: none }
.button.ghost { background: transparent; border-color: var(--line); box-shadow: none }
.button.ghost:hover { background: rgba(205, 221, 255, .07); box-shadow: none }
.button.danger { color: #ffb6c1; background: rgba(255, 90, 116, .1); border-color: rgba(255, 135, 154, .24); box-shadow: none }
.button.small { min-height: 34px; padding-inline: 11px; font-size: 12px }
.button:disabled { cursor: wait; opacity: .62; transform: none; box-shadow: none }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: rgba(8, 10, 21, .67); color: var(--ink-soft); transition: background var(--fast), transform var(--fast), border-color var(--fast) }
.icon-button:hover { transform: scale(1.04); border-color: rgba(139, 213, 255, .45); background: rgba(31, 47, 78, .86) }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring) }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .16em }
.brand-dot { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--accent-bright); border-radius: 50%; box-shadow: inset 0 0 9px var(--accent), 0 0 17px rgba(56, 166, 255, .46) }
.eyebrow { margin: 0; color: var(--accent-bright); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase }
.muted { color: var(--ink-muted) }
.field { display: grid; gap: 7px }
.field label { color: var(--ink-soft); font-size: 12px; font-weight: 700 }
.field input, .search-input, .select { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; color: var(--ink); background: rgba(5, 7, 18, .74); transition: border-color var(--fast), box-shadow var(--fast), background var(--fast) }
.field input::placeholder, .search-input::placeholder { color: var(--ink-dim) }
.field input:hover, .search-input:hover, .select:hover { border-color: rgba(139, 213, 255, .3) }
.form-message { min-height: 18px; margin: 0; color: var(--danger); font-size: 12px }

/* Profile selection */
.auth-page { position: relative; display: grid; min-height: 100dvh; place-items: center; overflow: hidden; padding: var(--space-6); isolation: isolate; background: linear-gradient(90deg, rgba(2,3,10,.38), rgba(2,3,10,.1) 66%, rgba(2,3,10,.42)), url('/static/assets/cosmo-space-v1.png') center / cover }
.auth-page::before { position: absolute; z-index: -2; inset: 0; content: ""; background: radial-gradient(35rem 24rem at 12% 72%, rgba(24, 96, 180, .25), transparent 68%), radial-gradient(38rem 32rem at 91% 22%, rgba(91, 58, 147, .16), transparent 70%), linear-gradient(180deg, rgba(2,4,12,.15), rgba(2,3,9,.82)) }
.auth-page::after { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .6; background: linear-gradient(176deg, transparent 36%, rgba(1, 2, 6, .55) 75%, rgba(1, 2, 6, .9)); pointer-events: none }
.auth-art { position: absolute; z-index: -1; width: min(41vw, 580px); aspect-ratio: 1; right: 4vw; top: 12vh; opacity: .42; pointer-events: none; filter: saturate(1.1) }
.orb-shell, .cosmo-orb { width: 100%; height: 100% }
.cosmo-orb canvas { width: 100% !important; height: 100% !important }
.auth-card-wrap { width: min(100%, 640px); text-align: center }
.auth-card { width: 100%; padding: clamp(28px, 5vw, 52px); border: 1px solid rgba(196, 215, 255, .14); border-radius: var(--radius-xl); background: linear-gradient(140deg, rgba(13, 17, 35, .78), rgba(5, 7, 17, .85)); box-shadow: var(--shadow-deep); backdrop-filter: blur(22px) saturate(115%) }
.auth-card .brand { justify-content: center }
.auth-card .eyebrow { margin-top: var(--space-3) }
.auth-card h1 { max-width: 640px; margin: var(--space-5) auto var(--space-2); font-size: clamp(32px, 5vw, 54px); line-height: .98; letter-spacing: -.06em }
.auth-card > .muted { max-width: 480px; margin: 0 auto; color: var(--ink-soft) }
.auth-card form { display: grid; max-width: 340px; gap: var(--space-3); margin: var(--space-5) auto 0; text-align: left }
.auth-card form .button { width: 100% }
.auth-foot { margin: var(--space-5) 0 0; color: var(--ink-dim); font-size: 12px }
.profile-picker { max-width: 660px; margin: var(--space-6) auto 0 }
.profile-picker > p { margin: 0 0 var(--space-4); color: var(--ink-soft); font-size: 13px }
.profile-picker-list { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 2vw, 22px) }
.saved-profile { display: grid; width: 142px; gap: 10px; padding: 10px 8px; border: 1px solid transparent; border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(24, 30, 52, .72), rgba(8, 11, 24, .62)); color: var(--ink); cursor: pointer; transition: transform var(--base) var(--ease-out), border-color var(--base), box-shadow var(--base), background var(--base) }
.saved-profile:hover, .saved-profile:focus-visible, .saved-profile.selected { transform: translateY(-4px) scale(1.025); border-color: var(--accent-bright); box-shadow: var(--focus-ring); background: linear-gradient(145deg, rgba(30, 55, 91, .9), rgba(9, 13, 29, .84)) }
.profile-photo { display: grid; width: 116px; height: 116px; place-items: center; justify-self: center; overflow: hidden; border: 1px solid rgba(195, 225, 255, .26); border-radius: var(--radius-sm); background: radial-gradient(circle at 35% 25%, #8be2ff, #2e72ce 46%, #17204d 100%); color: white; font-size: 34px; font-weight: 800; box-shadow: inset 0 1px rgba(255,255,255,.25) }
.profile-photo img, .avatar img { width: 100%; height: 100%; object-fit: cover }
.profile-picker .saved-profile > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700 }
.tv-pair .auth-card-wrap { width: min(100%, 500px) }.tv-qr { display: grid; width: max-content; min-height: 210px; margin: var(--space-5) auto; place-items: center; padding: 14px; border-radius: var(--radius-md); background: #fff }.tv-qr img { display: block; max-width: 190px; height: auto }

/* Shell and navigation */
.app-shell { min-height: 100vh; padding-bottom: var(--space-7) }
.topbar { position: sticky; z-index: 40; top: 0; display: grid; grid-template-columns: auto 1fr auto; min-height: 68px; gap: var(--space-5); align-items: center; padding: 0 max(24px, calc((100vw - 1520px) / 2)); border-bottom: 1px solid rgba(196, 215, 255, .065); background: linear-gradient(180deg, rgba(3,4,10,.92), rgba(3,4,10,.68)); backdrop-filter: blur(18px) saturate(120%) }
.topbar .brand { padding: 0; background: transparent; border: 0; cursor: pointer }
.desktop-nav { display: flex; height: 100%; gap: 0; align-items: stretch }
.nav-button { position: relative; min-height: 44px; padding: 0 var(--space-3); background: transparent; color: var(--ink-muted); font-size: 13px; font-weight: 700; transition: color var(--fast), background var(--fast) }
.desktop-nav .nav-button::after { position: absolute; right: 16px; bottom: 5px; left: 16px; height: 2px; content: ""; border-radius: 99px; background: var(--accent-bright); transform: scaleX(0); transform-origin: center; transition: transform var(--base) var(--ease-out), opacity var(--base); opacity: .4 }
.desktop-nav .nav-button:hover { color: var(--ink) }.desktop-nav .nav-button.active { color: var(--ink) }.desktop-nav .nav-button.active::after { transform: scaleX(1); opacity: 1 }
.top-actions { display: flex; align-items: center; gap: var(--space-2) }
.profile-menu { position: relative }.avatar { display: grid; width: 38px; height: 38px; place-items: center; overflow: hidden; padding: 0; border: 1px solid rgba(195,225,255,.28); border-radius: 50%; background: linear-gradient(145deg, #4eb7ff, #355cae); color: white; font-weight: 800; cursor: pointer }.avatar:hover { border-color: var(--accent-bright) }
.menu-popover { position: absolute; right: 0; top: calc(100% + 10px); display: grid; width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(12, 15, 30, .96); box-shadow: var(--shadow-deep); backdrop-filter: blur(18px) }.menu-popover[hidden] { display: none }.menu-popover button { padding: 10px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); text-align: left; cursor: pointer }.menu-popover button:hover { background: rgba(165, 206, 255, .09); color: var(--ink) }
.main { width: min(1520px, 100%); margin: 0 auto; padding: var(--space-6) max(24px, calc((100vw - 1520px) / 2)) var(--space-8) }

/* Home, media and discover */
.hero { position: relative; display: flex; min-height: clamp(380px, 46vw, 570px); align-items: flex-end; overflow: hidden; padding: clamp(28px, 5vw, 70px); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); background: radial-gradient(64% 106% at 83% 44%, rgba(14,100,205,.24), transparent 58%), radial-gradient(40% 80% at 70% 55%, rgba(51,35,154,.16), transparent 72%), linear-gradient(115deg, #0b1022, #050711 78%); box-shadow: var(--shadow-soft) }

.hero::after { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(4,5,14,.68) 4%, rgba(4,5,14,.24) 52%, rgba(4,5,14,0) 100%), linear-gradient(0deg, rgba(3,4,10,.42), transparent 55%) }
.hero-orb { position: absolute; z-index: 2; top: 50%; right: 8%; width: min(36vw, 460px); height: min(36vw, 460px); opacity: .94; transform: translateY(-50%); pointer-events: none; mix-blend-mode: screen }.hero-content { position: relative; z-index: 3; width: min(610px, 76%); animation: fade-rise var(--slow) var(--ease-out) both }.hero h1 { max-width: 620px; margin: var(--space-3) 0; font-size: clamp(38px, 5.5vw, 72px); line-height: .96; letter-spacing: -.065em }.hero p { max-width: 500px; margin: 0; color: var(--ink-soft); font-size: 16px }.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5) }
@keyframes fade-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.section { margin-top: var(--space-7); animation: fade-rise var(--base) var(--ease-out) both }.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3) }.section-head h2 { margin: 0; font-size: clamp(19px, 2vw, 25px); letter-spacing: -.04em }.section-head p { margin: 3px 0 0; color: var(--ink-muted); font-size: 13px }
.media-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(152px, 12.8%); gap: var(--space-3); overflow-x: auto; padding: 6px 4px 20px; scroll-padding-inline: 4px; scroll-snap-type: x proximity; scrollbar-color: rgba(139,213,255,.3) transparent }.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--space-4) }
.media-card { position: relative; min-width: 0; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; scroll-snap-align: start; transition: transform var(--base) var(--ease-out), filter var(--base), z-index var(--fast) }.media-card:hover, .media-card:focus-visible, .media-card:focus-within { z-index: 2; outline: none; transform: translateY(-5px) scale(1.025); filter: brightness(1.08); box-shadow: var(--focus-ring) }.poster-wrap { position: relative; overflow: hidden; aspect-ratio: 2 / 3; border-radius: var(--radius-sm); background: linear-gradient(135deg, #1e2842, #0d1120) }.poster-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out) }.media-card:hover img, .media-card:focus-visible img { transform: scale(1.045) }.poster-fallback { display: grid; height: 100%; place-items: center; padding: var(--space-4); color: var(--ink-muted); text-align: center; background: radial-gradient(circle at 30% 20%, rgba(75,148,230,.46), transparent 50%), #121628 }.card-overlay { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; background: linear-gradient(180deg, transparent 40%, rgba(1,3,10,.78)); transition: opacity var(--fast) }.media-card:hover .card-overlay, .media-card:focus-within .card-overlay, .media-card:focus-visible .card-overlay { opacity: 1 }.round-play { display: grid; width: 48px; height: 48px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: #071020; font-size: 17px; box-shadow: 0 8px 28px rgba(0,0,0,.36); cursor: pointer; transform: translateY(6px); transition: transform var(--fast) var(--ease-out) }.media-card:hover .round-play, .media-card:focus-within .round-play, .media-card:focus-visible .round-play { transform: none }.round-play svg { width: 18px; height: 18px; transform: translateX(1px) }.card-copy { min-height: 55px; padding: var(--space-2) 1px 0; text-align: left }.card-copy strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap }.card-meta { display: flex; gap: 7px; margin-top: 2px; color: var(--ink-muted); font-size: 11px }.badge { display: inline-flex; width: max-content; align-items: center; gap: 5px; margin-top: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase }.badge::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: currentColor; opacity: .85 }.badge.ready { color: var(--success) }.badge.active { color: var(--accent-bright) }.badge.warn { color: var(--warning) }.progress { height: 4px; overflow: hidden; margin-top: 8px; border-radius: 99px; background: rgba(214,226,255,.16) }.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transition: width 700ms var(--ease-soft) }
.empty { display: grid; min-height: 300px; place-content: center; justify-items: center; padding: var(--space-6); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-align: center }.empty-icon { color: var(--accent-bright); font-size: 28px }.empty h2 { margin: var(--space-3) 0 var(--space-1); font-size: 22px; letter-spacing: -.035em }.empty p { max-width: 400px; margin: 0 0 var(--space-4); color: var(--ink-muted) }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin: var(--space-3) 0 var(--space-6) }.page-head h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.06em }.page-head p { margin: var(--space-1) 0 0; color: var(--ink-muted) }.search-box { display: grid; grid-template-columns: 1fr auto; max-width: 720px; gap: var(--space-2); margin-bottom: var(--space-6) }.search-input { min-height: 50px; background: rgba(11,14,29,.76) }.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-soft) }.filter-button { padding: 8px 12px; border-radius: 7px; background: transparent; color: var(--ink-muted); font-size: 13px }.filter-button:hover { color: var(--ink); background: rgba(196,215,255,.06) }.filter-button.active { color: var(--accent-bright); background: var(--accent-soft) }

/* Requests, details, account and admin */
.request-list { display: grid; gap: 0; border-top: 1px solid var(--line-soft) }.request-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(120px, auto); gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft) }.request-poster { width: 64px; height: 90px; border-radius: 7px; object-fit: cover; background: var(--surface-raised) }.request-card h3 { margin: 0; font-size: 16px }.request-card p { margin: 4px 0 0; color: var(--ink-muted); font-size: 12px }.request-state { min-width: 110px; color: var(--ink-soft); text-align: right }.request-state strong { display: block; color: var(--accent-bright); font-size: 13px }
.settings-grid { display: grid; grid-template-columns: 190px minmax(0, 680px); gap: var(--space-6) }.settings-nav { display: grid; align-content: start; gap: 3px }.settings-nav button { justify-content: flex-start; text-align: left }.settings-panel { padding: var(--space-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(20,25,45,.4), transparent) }.settings-panel h2 { margin: var(--space-6) 0 var(--space-2); font-size: 19px }.settings-panel form { display: grid; max-width: 430px; gap: var(--space-3) }.account-row { display: flex; gap: var(--space-3); align-items: center; padding-bottom: var(--space-5); border-bottom: 1px solid var(--line-soft) }.account-row .avatar { width: 54px; height: 54px }.account-row h3, .account-row p { margin: 0 }.admin-entry { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line-soft) }.admin-entry h3, .admin-entry p { margin: 0 }.admin-entry p { margin-top: 3px; color: var(--ink-muted); font-size: 13px }
.dialog-close { position: absolute; z-index: 4; top: 18px; right: 18px }.details-dialog { width: min(1080px, calc(100vw - 32px)); max-height: 90dvh; padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #070a14; box-shadow: var(--shadow-deep) }.details-dialog::backdrop, .admin-dialog::backdrop { background: rgba(1,2,7,.78); backdrop-filter: blur(8px) }.detail-hero { position: relative; display: flex; min-height: 480px; align-items: end; overflow: hidden; padding: clamp(24px, 5vw, 54px) }.detail-backdrop { position: absolute; inset: 0; background-position: center; background-size: cover }.detail-backdrop::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(5,7,17,.98), rgba(5,7,17,.72) 48%, rgba(5,7,17,.16)), linear-gradient(0deg, #070a14, transparent 62%) }.detail-copy { position: relative; z-index: 1; max-width: 620px }.detail-copy h1 { margin: var(--space-3) 0; font-size: clamp(36px, 5vw, 62px); line-height: .96; letter-spacing: -.065em }.detail-copy p { max-width: 600px; color: var(--ink-soft); line-height: 1.6 }.detail-meta { display: flex; flex-wrap: wrap; gap: 9px; color: var(--ink-soft); font-size: 13px }.detail-meta span + span::before { margin-right: 9px; color: var(--ink-dim); content: "•" }.detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5) }.episodes { padding: 0 clamp(24px, 5vw, 54px) var(--space-6) }.season-dots { display: flex; flex-wrap: wrap; gap: 9px }.season-dot { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink-muted); font-weight: 800; cursor: pointer; transition: background var(--fast), color var(--fast), transform var(--fast), box-shadow var(--fast) }.season-dot:hover, .season-dot.active, .season-dot:focus-visible { border-color: var(--accent-bright); background: var(--accent); color: white; transform: scale(1.06); box-shadow: 0 0 0 4px rgba(35,141,255,.16); outline: none }.episode-list { display: grid; gap: 0; border-top: 1px solid var(--line-soft) }.episode { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft) }.episode > span { color: var(--accent-bright); font-size: 12px; font-weight: 800 }.episode h4, .episode p { margin: 0 }.episode h4 { font-size: 14px }.episode p { margin-top: 2px; color: var(--ink-muted); font-size: 12px }.episode-actions { display: flex; gap: var(--space-1) }
.admin-dialog { width: min(1160px, calc(100vw - 30px)); height: min(820px, 92dvh); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #090c18; box-shadow: var(--shadow-deep) }.admin-layout { display: grid; height: 100%; grid-template-columns: 200px 1fr }.admin-side { padding: var(--space-5) var(--space-3); border-right: 1px solid var(--line-soft); background: rgba(18,23,40,.62) }.admin-side .brand { padding: 0 var(--space-2) var(--space-5) }.admin-tabs { display: grid; gap: 3px }.admin-tabs .nav-button { width: 100%; text-align: left }.admin-main { overflow: auto; padding: var(--space-6) }.admin-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5) }.admin-top h2 { margin: 0; font-size: 27px; letter-spacing: -.045em }.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3) }.health-card { padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft) }.health-card strong { font-size: 13px }.health-card .status { margin-top: 8px; color: var(--ink-soft) }.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 11px rgba(87,220,175,.5) }.status-dot.bad { background: var(--warning); box-shadow: none }.admin-table-wrap { overflow: auto; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft) }.admin-table { width: 100%; min-width: 620px; border-collapse: collapse }.admin-table th, .admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--line-soft); text-align: left }.admin-table th { color: var(--ink-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase }.admin-table tr:last-child td { border-bottom: 0 }.admin-actions, .admin-links { display: flex; flex-wrap: wrap; gap: 6px }.event-list { display: grid; gap: 0; border-top: 1px solid var(--line-soft) }.event { display: grid; grid-template-columns: 155px 90px 1fr; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-muted); font-size: 13px }.invite-link { margin: var(--space-4) 0; padding: var(--space-3); border-left: 2px solid var(--accent); background: rgba(35,141,255,.08) }.invite-link > div { display: flex; gap: var(--space-2); margin-top: 9px }.invite-link input { flex: 1; min-width: 0 }
.toast { position: fixed; z-index: 100; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; max-width: min(430px, calc(100vw - 32px)); padding: 11px 15px; border: 1px solid rgba(139,213,255,.23); border-radius: var(--radius-sm); background: rgba(16,22,39,.94); color: var(--ink); box-shadow: var(--shadow-deep); opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: transform var(--base) var(--ease-out), opacity var(--base) }.toast.show { opacity: 1; transform: translate(-50%, 0) }
.skeleton { background: linear-gradient(100deg, #101526 25%, #1e2940 40%, #101526 60%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite }@keyframes shimmer { to { background-position: -100% 0 } }
.mobile-nav { display: none }.only-mobile { display: none }.episode[hidden] { display: none }

@media (max-width: 900px) { .topbar { grid-template-columns: auto 1fr auto; gap: var(--space-3) }.desktop-nav { display: none }.topbar .brand { font-size: 11px }.main { padding-top: var(--space-5) }.media-row { grid-auto-columns: minmax(148px, 27%) }.settings-grid { grid-template-columns: 1fr }.settings-nav { display: flex; overflow-x: auto }.settings-nav .nav-button { flex: 0 0 auto }.admin-layout { grid-template-columns: 1fr }.admin-side { padding: var(--space-3); border-right: 0; border-bottom: 1px solid var(--line-soft) }.admin-side .brand { display: none }.admin-tabs { display: flex; overflow-x: auto }.admin-tabs .nav-button { width: auto; flex: 0 0 auto; white-space: nowrap }.admin-main { padding: var(--space-5) } }
@media (max-width: 680px) { .auth-page { padding: var(--space-4) }.auth-art { top: -6vh; right: -23vw; width: 90vw; opacity: .25 }.auth-card { padding: 30px 20px; border-radius: 22px }.profile-picker-list { gap: 10px }.saved-profile { width: 112px }.profile-photo { width: 88px; height: 88px; font-size: 28px }.topbar { min-height: 62px; padding-inline: 16px }.main { padding: var(--space-4) 14px 96px }.hero { min-height: 390px; padding: var(--space-5); border-radius: var(--radius-lg) }.hero-content { width: 100% }.hero h1 { font-size: 42px }.hero-orb { top: 31%; right: -106px; width: 330px; height: 330px; opacity: .37 }.media-row { grid-auto-columns: 42% }.media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }.page-head { align-items: flex-start; flex-direction: column; margin-bottom: var(--space-5) }.page-head h1 { font-size: 34px }.search-box { grid-template-columns: 1fr }.request-card { grid-template-columns: 52px minmax(0,1fr) }.request-poster { width: 52px; height: 74px }.request-state { grid-column: 2; min-width: 0; text-align: left }.settings-panel { padding: var(--space-4) 0; background: transparent }.admin-entry { align-items: flex-start; flex-direction: column }.mobile-nav { position: fixed; z-index: 45; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10,13,27,.93); box-shadow: var(--shadow-deep); backdrop-filter: blur(18px) }.mobile-nav button { display: grid; gap: 2px; justify-items: center; min-height: 46px; padding: 5px 2px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-muted); font-size: 10px }.mobile-nav button span:first-child { font-size: 17px }.mobile-nav button.active { background: rgba(112,180,255,.12); color: var(--accent-bright) }.details-dialog, .admin-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0 }.detail-hero { min-height: 500px; padding: 30px 20px }.detail-backdrop::after { background: linear-gradient(0deg, #070a14 8%, rgba(7,10,20,.72) 55%, rgba(7,10,20,.25)) }.episodes { padding: 0 20px var(--space-6) }.episode { grid-template-columns: 1fr auto }.episode > span { display: none }.episode-actions { flex-direction: column }.admin-main { padding: var(--space-4) }.event { grid-template-columns: 1fr }.only-mobile { display: block } }

/* Remote-first treatment for the Android TV wrapper. */
.tv-mode body { font-size: 19px }.tv-mode .topbar { min-height: 92px; padding-inline: 5vw }.tv-mode .brand { font-size: 17px }.tv-mode .desktop-nav { display: flex; gap: 10px }.tv-mode .desktop-nav .nav-button { min-height: 70px; padding-inline: 17px; font-size: 18px }.tv-mode .main { width: 100%; padding: 42px 5vw 104px }.tv-mode .hero { min-height: 440px; padding: 54px }.tv-mode .hero h1 { font-size: 64px }.tv-mode .hero p { font-size: 21px }.tv-mode .hero-orb { width: 540px; height: 540px }.tv-mode .section { margin-top: 46px }.tv-mode .section-head h2 { font-size: 30px }.tv-mode .section-head p { font-size: 17px }.tv-mode .media-row { grid-auto-columns: minmax(250px, 18vw); gap: 22px; padding: 7px 8px 32px }.tv-mode .media-card:focus, .tv-mode .media-card:focus-within, .tv-mode button:focus, .tv-mode a:focus, .tv-mode select:focus, .tv-mode input:focus { outline: none; box-shadow: var(--focus-ring) }.tv-mode .media-card:focus, .tv-mode .media-card:focus-within { transform: translateY(-8px) scale(1.05) }.tv-mode .media-card:focus .card-overlay, .tv-mode .media-card:focus-within .card-overlay { opacity: 1 }.tv-mode .card-copy strong { font-size: 19px }.tv-mode .card-meta { font-size: 15px }.tv-mode .round-play { width: 62px; height: 62px; font-size: 24px }.tv-mode .button, .tv-mode input, .tv-mode select { min-height: 56px; font-size: 18px }.tv-mode .profile-picker-list { gap: 26px }.tv-mode .saved-profile { width: 180px; padding: 14px 10px; font-size: 18px }.tv-mode .profile-photo { width: 150px; height: 150px }.tv-mode .auth-card { max-width: 860px }.tv-mode .auth-card h1 { font-size: 60px }.tv-mode .auth-card form { max-width: 440px }.tv-mode .season-dot { width: 52px; height: 52px; font-size: 18px }.tv-mode .mobile-nav { display: none !important }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important } }

/* A calm, TV-friendly rail gives large screens the same spatial hierarchy as the Cosmo product. */
@media (min-width: 1101px) {
  .app-shell { min-height: 100vh; padding: 0 0 0 232px }
  .topbar { position: fixed; inset: 0 auto 0 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; width: 232px; min-height: 100vh; gap: var(--space-5); padding: 30px 14px 22px; border-right: 1px solid var(--line-soft); border-bottom: 0; background: linear-gradient(180deg, rgba(7,10,23,.96), rgba(3,4,11,.88)); }
  .topbar .brand { justify-self: start; padding: 0 10px; }
  .desktop-nav { display: grid; height: auto; grid-template-rows: repeat(6, 46px) 1fr 46px; align-content: stretch; gap: 4px; }
  .desktop-nav .nav-button { display: flex; min-height: 46px; align-items: center; justify-content: flex-start; padding: 0 12px; border-radius: 9px; text-align: left; }
  .desktop-nav .nav-button::after { top: 11px; right: auto; bottom: 11px; left: 0; width: 2px; height: auto; transform: scaleY(0); transform-origin: center; }
  .desktop-nav .nav-button:hover { background: rgba(166,208,255,.06); }
  .desktop-nav .nav-button.active { background: linear-gradient(90deg, rgba(35,141,255,.17), rgba(35,141,255,.04)); color: var(--ink); }
  .desktop-nav .nav-button.active::after { transform: scaleY(1); }
  .desktop-nav .nav-button[data-page="settings"] { grid-row: 8; }
  .top-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 10px; border-top: 1px solid var(--line-soft); }
  .top-actions > .icon-button { display: none; }
  .profile-menu { min-width: 0; }
  .profile-button { width: 38px; height: 38px; }
  .menu-popover { right: auto; bottom: 0; left: calc(100% + 12px); top: auto; }
  .main { width: min(1680px, 100%); padding: var(--space-7) clamp(30px, 4vw, 76px) var(--space-8); }
  .tv-mode .topbar { min-height: 100vh; padding: 30px 14px 22px; }
  .tv-mode .desktop-nav { display: grid; grid-template-rows: repeat(6, 70px) 1fr 70px; gap: 8px; }
  .tv-mode .desktop-nav .nav-button { min-height: 70px; }
}
.field input[type="file"] { min-height: 52px; padding: 7px; color: var(--ink-muted); cursor: pointer }
.field input[type="file"]::file-selector-button { margin-right: 11px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: rgba(139, 213, 255, .11); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background var(--fast) }
.field input[type="file"]::file-selector-button:hover { background: rgba(139, 213, 255, .2) }
.add-profile { place-items: center; background: rgba(8, 12, 27, .46); border-style: dashed; border-color: rgba(139, 213, 255, .26) }
.add-profile .profile-photo { border-radius: 50%; background: rgba(139, 213, 255, .08); color: var(--accent-bright); font-size: 42px; font-weight: 300 }

/* Route continuity: outgoing content recedes; the next screen settles into the same spatial plane. */
.main { transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), filter 150ms var(--ease-out) }
.main.route-out { opacity: 0; transform: translateY(8px) scale(.992); filter: blur(3px) }
.main.route-in > * { animation: route-morph 300ms var(--ease-out) both }
.main.route-in > *:nth-child(2) { animation-delay: 28ms }
.main.route-in > *:nth-child(3) { animation-delay: 54ms }
.main.route-in > *:nth-child(4) { animation-delay: 80ms }
@keyframes route-morph { from { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(5px) } 68% { opacity: 1; transform: translateY(-1px) scale(1.002); filter: blur(0) } to { opacity: 1; transform: none; filter: none } }
.details-dialog[open] { animation: dialog-morph 260ms var(--ease-out) both }
.admin-dialog[open] { animation: dialog-morph 260ms var(--ease-out) both }
@keyframes dialog-morph { from { opacity: 0; transform: translateY(16px) scale(.975); filter: blur(5px) } to { opacity: 1; transform: none; filter: none } }

/* Portrait artwork and a centered Cosmo composition for narrow displays. */
@media (max-width: 680px) {
  .hero { min-height: 470px; }
  .hero-orb { top: 27%; right: 50%; width: 240px; height: 240px; opacity: .56; transform: translate(50%, -50%); }
}

/* The hero card intentionally features Cosmo alone: no decorative planet competes with it. */
@media (max-width: 680px) {
  .cosmic-backdrop { background: linear-gradient(180deg, rgba(2,3,9,.48), rgba(2,3,9,.78)), url('/static/assets/cosmo-space-mobile-v1.png') center / cover no-repeat; }
  .auth-page { background-image: linear-gradient(180deg, rgba(2,3,9,.54), rgba(2,3,9,.72)), url('/static/assets/cosmo-space-mobile-v1.png'); }
  .hero-orb { top: 31%; right: 50%; width: min(82vw, 360px); height: min(82vw, 360px); opacity: .88; transform: translate(50%, -50%); }
  .hero-content { padding-top: 200px; text-align: center; }
  .hero-actions { justify-content: center; }
}