@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #090d15;
  --surface: #101621;
  --surface-2: #161d2a;
  --surface-3: #1d2635;
  --text: #f3f6fb;
  --muted: #8d98aa;
  --muted-2: #667185;
  --border: rgba(255,255,255,.08);
  --accent: #7c5cff;
  --accent-2: #5f42e8;
  --accent-soft: rgba(124,92,255,.14);
  --accent-ring: rgba(124,92,255,.5);
  --accent-shadow: rgba(124,92,255,.28);
  --green: #45d092;
  --shadow: 0 26px 70px rgba(0,0,0,.34);
  --spotlight-overlay: linear-gradient(90deg, rgba(8,11,18,.96) 0%, rgba(8,11,18,.78) 42%, rgba(8,11,18,.18) 74%, rgba(8,11,18,.08) 100%);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #edf0f5;
  --text: #151a24;
  --muted: #687286;
  --muted-2: #8e97a7;
  --border: rgba(23,31,46,.09);
  --accent: #6647ed;
  --accent-2: #5538d7;
  --accent-soft: rgba(102,71,237,.10);
  --accent-ring: rgba(102,71,237,.42);
  --accent-shadow: rgba(102,71,237,.22);
  --green: #159765;
  --shadow: 0 22px 55px rgba(32,42,62,.12);
  --spotlight-overlay: linear-gradient(90deg, rgba(18,22,31,.94) 0%, rgba(18,22,31,.76) 42%, rgba(18,22,31,.16) 76%, rgba(18,22,31,.06) 100%);
}

html[data-accent="blue"] { --accent:#4d9cff; --accent-2:#287bd8; --accent-soft:rgba(77,156,255,.14); --accent-ring:rgba(77,156,255,.48); --accent-shadow:rgba(77,156,255,.28); }
html[data-accent="teal"] { --accent:#2bb5ad; --accent-2:#188e89; --accent-soft:rgba(43,181,173,.14); --accent-ring:rgba(43,181,173,.48); --accent-shadow:rgba(43,181,173,.26); }
html[data-accent="green"] { --accent:#43b879; --accent-2:#278e5a; --accent-soft:rgba(67,184,121,.14); --accent-ring:rgba(67,184,121,.48); --accent-shadow:rgba(67,184,121,.26); }
html[data-accent="orange"] { --accent:#f09a4a; --accent-2:#c87529; --accent-soft:rgba(240,154,74,.14); --accent-ring:rgba(240,154,74,.48); --accent-shadow:rgba(240,154,74,.26); }
html[data-accent="rose"] { --accent:#ef6f91; --accent-2:#c94b70; --accent-soft:rgba(239,111,145,.14); --accent-ring:rgba(239,111,145,.48); --accent-shadow:rgba(239,111,145,.26); }
html[data-accent="red"] { --accent:#c7484e; --accent-2:#a93239; --accent-soft:rgba(199,72,78,.14); --accent-ring:rgba(199,72,78,.48); --accent-shadow:rgba(199,72,78,.26); }
html[data-accent="gold"] { --accent:#946307; --accent-2:#795100; --accent-soft:rgba(148,99,7,.16); --accent-ring:rgba(148,99,7,.48); --accent-shadow:rgba(148,99,7,.26); }
html[data-theme="light"][data-accent="blue"] { --accent:#1768c5; --accent-2:#1056a7; --accent-soft:rgba(23,104,197,.10); --accent-ring:rgba(23,104,197,.4); --accent-shadow:rgba(23,104,197,.2); }
html[data-theme="light"][data-accent="teal"] { --accent:#087f79; --accent-2:#066a65; --accent-soft:rgba(8,127,121,.10); --accent-ring:rgba(8,127,121,.4); --accent-shadow:rgba(8,127,121,.2); }
html[data-theme="light"][data-accent="green"] { --accent:#147a4c; --accent-2:#0d653d; --accent-soft:rgba(20,122,76,.10); --accent-ring:rgba(20,122,76,.4); --accent-shadow:rgba(20,122,76,.2); }
html[data-theme="light"][data-accent="orange"] { --accent:#a84b0f; --accent-2:#8c3c0a; --accent-soft:rgba(168,75,15,.10); --accent-ring:rgba(168,75,15,.4); --accent-shadow:rgba(168,75,15,.2); }
html[data-theme="light"][data-accent="rose"] { --accent:#b92f59; --accent-2:#9b2449; --accent-soft:rgba(185,47,89,.10); --accent-ring:rgba(185,47,89,.4); --accent-shadow:rgba(185,47,89,.2); }
html[data-theme="light"][data-accent="red"] { --accent:#ad343c; --accent-2:#8f252d; --accent-soft:rgba(173,52,60,.10); --accent-ring:rgba(173,52,60,.4); --accent-shadow:rgba(173,52,60,.2); }
html[data-theme="light"][data-accent="gold"] { --accent:#815500; --accent-2:#674300; --accent-soft:rgba(129,85,0,.10); --accent-ring:rgba(129,85,0,.4); --accent-shadow:rgba(129,85,0,.2); }

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.5 'DM Sans', sans-serif; transition: background .25s, color .25s; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.app-shell[hidden],.auth-gate[hidden],.auth-form[hidden] { display:none; }
.auth-gate { min-height:100vh; display:grid; place-items:center; padding:28px 18px; background:radial-gradient(circle at 15% 15%,var(--accent-soft),transparent 34%),radial-gradient(circle at 85% 80%,var(--accent-soft),transparent 30%),var(--bg); }
.auth-card { width:min(440px,100%); padding:30px; border:1px solid var(--border); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }
.auth-brand { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; margin-bottom:30px; text-align:center; }
.gaucak-logo { display:block; height:auto; object-fit:contain; }
.auth-logo { width:100%; max-width:340px; }
.sidebar-logo { width:188px; max-width:100%; }
.sidebar .brand { flex-direction:column; align-items:center; gap:4px; text-align:center; }
.mobile-logo { width:88px; max-height:54px; }
.admin-logo { width:130px; max-height:66px; }
.auth-brand .brand-mark { width:64px; height:64px; border-radius:20px; }
.auth-brand .brand-mark i { width:7px; height:28px; }
.auth-brand .brand-mark i:first-child { translate:-7px 0; }
.auth-brand .brand-mark i:last-child { translate:7px 0; height:18px; }
.auth-brand b,.auth-brand small { display:block; }.auth-brand b { font:800 clamp(30px,7vw,38px)/1.1 'Manrope',sans-serif; letter-spacing:.08em; }.auth-brand small { margin-top:8px; color:var(--muted); font-size:16px; }
.auth-intro { text-align:center; }
.auth-language { position:absolute; top:20px; right:20px; display:flex; gap:3px; padding:3px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.auth-language button { min-height:30px; padding:0 9px; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; font-weight:800; }
.auth-language button.active { background:var(--accent-soft); color:var(--accent); }
.auth-intro h1 { margin:4px 0 6px; font:800 34px/1.05 'Manrope',sans-serif; letter-spacing:-.04em; }
.auth-intro > p:not(.eyebrow) { max-width:340px; margin:10px auto 0; color:var(--muted); font-size:17px; line-height:1.6; }
.auth-tour-link { display:flex; align-items:center; gap:13px; min-height:76px; margin-top:23px; padding:12px 14px; border:1px solid var(--accent-ring); border-radius:13px; background:linear-gradient(105deg,var(--accent-soft),var(--surface-2)); color:var(--text); text-decoration:none; box-shadow:0 8px 25px var(--accent-shadow); transition:transform .2s,border-color .2s,background .2s; }
.auth-tour-link:hover { transform:translateY(-2px); border-color:var(--accent); background:var(--accent-soft); }
.auth-tour-link[hidden] { display:none; }
.auth-tour-link:focus-visible { outline:3px solid var(--accent-ring); outline-offset:4px; }
.auth-tour-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:11px; background:var(--accent); color:#fff; font-size:13px; }
.auth-tour-copy { display:grid; gap:2px; min-width:0; }.auth-tour-copy strong { font-size:13px; line-height:1.3; }.auth-tour-copy small { color:var(--muted); font-size:11px; line-height:1.3; }
.auth-tour-arrow { margin-left:auto; color:var(--accent); font-size:22px; font-weight:800; }
.auth-tour-link + .auth-tabs { margin-top:16px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:24px 0 18px; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.auth-tabs button { min-height:38px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-weight:800; }
.auth-tabs button.active { background:var(--accent); color:#fff; box-shadow:0 5px 14px var(--accent-shadow); }
.auth-form { display:grid; gap:14px; }
.auth-form label span { display:block; margin-bottom:6px; color:var(--muted); font-size:12px; font-weight:800; }
.auth-form input { width:100%; min-height:46px; padding:0 13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); color:var(--text); }
.auth-form input:focus { border-color:var(--accent); }
.auth-form > small { margin-top:-7px; color:var(--muted); font-size:11px; }
.auth-form .primary-button { margin-top:4px; }
.account-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.account-actions a { display:inline-flex; align-items:center; text-decoration:none; }
.nickname-setting input { width:100%; min-width:0; min-height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text); }
.avatar-setting-controls { display:flex; align-items:center; gap:16px; min-width:0; }
.avatar.settings-avatar-preview { width:72px; height:72px; flex:0 0 72px; overflow:hidden; font-size:22px; }
.avatar-upload-label { display:inline-flex; align-items:center; cursor:pointer; font-size:12px; }
.avatar-setting-controls .text-button { display:block; margin-top:8px; font-size:12px; }
#settingsModal .settings-modal { max-height:85dvh; overflow-y:auto; overscroll-behavior:contain; }
@media(max-width:760px) { #settingsModal .settings-modal { max-height:92dvh; } }
.avatar,.friend-avatar { position:relative; }
.avatar img,.friend-avatar img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.friend-avatar { overflow:hidden; }
.auth-status { min-height:20px; margin:14px 0 0; color:var(--accent); font-size:13px; font-weight:700; text-align:center; }
.auth-status.error { color:#ef6b7b; }
.auth-privacy { margin:12px 0 0; color:var(--muted-2); font-size:11px; text-align:center; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; padding: 28px 18px 22px; border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.brand b { display: block; font: 800 14px/1.2 'Manrope'; letter-spacing: .08em; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; background: var(--accent); display: grid; place-items: center; position: relative; box-shadow: 0 8px 24px var(--accent-shadow); flex: 0 0 auto; }
.brand-mark i { position: absolute; width: 4px; height: 15px; border-radius: 3px; background: white; transform: rotate(-28deg); }
.brand-mark i:first-child { translate: -4px 0; }
.brand-mark i:last-child { translate: 4px 0; height: 9px; }
.side-nav { display: grid; gap: 6px; }
.nav-item { width: 100%; border: 0; border-radius: 11px; background: transparent; padding: 11px 12px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; text-align: left; color: var(--muted); cursor: pointer; font-weight: 600; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-icon { font-size: 20px; line-height: 1; }
.nav-icon svg,.bottom-nav .nav-symbol svg { display:block; width:20px; height:20px; }
.nav-icon,.bottom-nav .nav-symbol { display:grid; place-items:center; }
.nav-count { font-size: 12px; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 10px; }
.bug-report-link { display:flex; align-items:center; gap:10px; min-height:46px; padding:0 13px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); color:var(--text); cursor:pointer; font:700 13px 'DM Sans',sans-serif; text-align:left; }
.bug-report-link:hover,.bug-report-link.active { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.bug-report-link span { font-size:20px; line-height:1; }
.bug-report-count { display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border-radius:11px; background:var(--accent); color:#fff; font-size:11px !important; font-weight:800; line-height:1; }
.bug-report-link .bug-report-count { margin-left:auto; }
.bug-report-count[hidden] { display:none; }
.source-credit { padding: 0 8px 4px; color: var(--muted); }.source-credit span { display: block; font-size: 11px; font-weight: 700; }.source-credit small { display: block; margin-top: 3px; font-size: 9px; line-height: 1.3; }
.theme-switch, .profile-mini { border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; min-height: 54px; cursor: pointer; }
.theme-switch { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; padding: 0 12px; text-align: left; font-size: 14px; font-weight: 600; }
.theme-icon { font-size: 18px; }
.switch-track { width: 34px; height: 20px; border-radius: 10px; background: var(--accent); padding: 3px; display: flex; justify-content: flex-end; }
.switch-track span { width: 14px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
html[data-theme="light"] .switch-track { justify-content: flex-start; background: #c7ccd6; }
.profile-mini { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; text-align: left; }
.profile-mini b, .profile-mini small { display: block; }
.profile-mini b { font-size: 14px; }.profile-mini small { font-size: 12px; color: var(--muted); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background:var(--accent); color:#fff; font-size: 12px; font-weight: 700; border: 0; }

.main-content { margin-left: 240px; min-height: 100vh; padding: 0 44px 60px; }
.topbar { position:relative; height: 82px; display:grid; grid-template-columns:minmax(0,1fr) 480px; align-items:center; gap:28px; max-width:1760px; margin:auto; }
.search-trigger { width: min(420px, 45vw); margin-right: auto; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 13px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); cursor: text; text-align: left; }
.topbar .search-trigger { grid-column:1; width:min(420px,100%); margin-right:0; }
.search-trigger span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-trigger kbd { margin-left: auto; border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; background: var(--surface-2); color: var(--muted); font-size: 11px; }
.icon-button { width: 42px; height: 42px; display: none; place-items: center; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.top-avatar { display: none; width: 38px; height: 38px; cursor: pointer; }
.mobile-brand { display: none; border: 0; background: transparent; padding: 0; }
.notification-button { position:relative; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--border); border-radius:11px; background:var(--surface); cursor:pointer; font-size:17px; }
.topbar .notification-button { grid-column:2; justify-self:end; }
.notification-button:hover,.notification-button[aria-expanded="true"] { border-color:var(--accent); background:var(--accent-soft); }
.notification-button b { position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border:2px solid var(--bg); border-radius:10px; background:var(--accent); color:#fff; font-size:10px; line-height:1; }
.notification-button b[hidden],.notification-panel[hidden] { display:none; }
.notification-panel { position:absolute; z-index:80; top:68px; right:0; width:min(390px,calc(100vw - 32px)); max-height:min(590px,calc(100vh - 100px)); overflow:auto; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:0 22px 70px rgba(0,0,0,.32); }
.notification-head { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid var(--border); background:var(--surface); }
.notification-head h2 { margin:0; font:800 19px 'Manrope',sans-serif; }
.notification-head button { padding:4px 0; border:0; background:transparent; color:var(--accent); cursor:pointer; font-size:12px; font-weight:800; }
.notification-head button:disabled { color:var(--muted-2); cursor:default; }
.notification-list { display:grid; }
.notification-item { width:100%; display:grid; grid-template-columns:9px minmax(0,1fr); gap:10px; padding:14px 16px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; text-align:left; }
.notification-item:hover { background:var(--surface-2); }
.notification-dot { width:8px; height:8px; margin-top:6px; border-radius:50%; background:transparent; }
.notification-item.unread .notification-dot { background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.notification-item b,.notification-item strong,.notification-item small { display:block; }
.notification-item b { color:var(--accent); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.notification-item strong { margin-top:2px; font:750 14px 'Manrope',sans-serif; }
.notification-item small { margin-top:3px; color:var(--muted); font-size:12px; }
.notification-empty { padding:30px 22px; text-align:center; }
.notification-empty b { font:750 15px 'Manrope',sans-serif; }
.notification-empty p,.notification-local-note { color:var(--muted); font-size:12px; }
.notification-empty p { margin:5px 0 0; }
.notification-local-note { margin:0; padding:12px 16px; background:var(--surface-2); }
.view { display: none; max-width: 1440px; margin: auto; animation: fade .25s ease; }
.view.active { display: block; }
.bug-report-panel { max-width:920px; margin:28px auto 0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.bug-report-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:19px 24px; border-bottom:1px solid var(--border); }
.bug-report-head strong { font-size:16px; }.bug-report-head span { font-size:12px; color:var(--muted); }
.bug-report-list { display:flex; flex-direction:column; gap:16px; min-height:190px; max-height:65vh; overflow-y:auto; padding:24px; }
.bug-report-message { width:min(100%,720px); padding:15px 18px; border:1px solid var(--border); border-radius:15px; background:var(--surface-2); }
.bug-report-message.fixed { border-color:color-mix(in srgb,#43b879 42%,var(--border)); }
.bug-report-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; font-size:12px; }
.bug-report-meta strong { color:var(--text); font-size:13px; }.bug-report-meta time { color:var(--muted); }
.bug-report-badge { margin-left:auto; padding:4px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:700; }
.bug-report-message.fixed .bug-report-badge { background:rgba(67,184,121,.13); color:#43b879; }
.bug-report-message p { margin:12px 0 0; color:var(--text); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.bug-report-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:13px; padding-top:10px; border-top:1px solid var(--border); }
.bug-report-actions button { padding:0; border:0; background:none; color:var(--accent); font:700 12px 'DM Sans',sans-serif; cursor:pointer; }
.bug-report-actions button.delete { color:#df7180; }.bug-report-actions button:disabled { opacity:.5; cursor:wait; }
.bug-report-empty { margin:auto; color:var(--muted); text-align:center; }
.bug-report-more { display:block; margin:0 auto 20px; }
.bug-report-more[hidden] { display:none; }
.bug-report-form { display:grid; gap:10px; padding:20px 24px 24px; border-top:1px solid var(--border); }
.bug-report-form label { font-size:13px; font-weight:700; }
.bug-report-composer { display:flex; align-items:flex-end; gap:12px; }
.bug-report-composer textarea { flex:1; min-width:0; min-height:80px; padding:12px; resize:vertical; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); color:var(--text); font:inherit; }
.bug-report-composer textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.bug-report-composer .primary-button { white-space:nowrap; }.bug-report-form p { min-height:18px; margin:0; color:var(--muted); font-size:12px; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
.page-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin: 16px 0 28px; }
.page-heading h1 { font: 800 clamp(28px,3.2vw,42px)/1.08 'Manrope'; letter-spacing: -.04em; margin: 5px 0 7px; }
.page-heading p:not(.eyebrow) { margin: 0; color: var(--muted); }
.compact-heading { align-items: center; margin-top: 30px; }
.eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.primary-button, .light-button, .glass-button { border: 0; border-radius: 11px; min-height: 42px; padding: 0 17px; font-weight: 700; cursor: pointer; }
.primary-button { background: var(--accent); color: white; box-shadow: 0 8px 22px var(--accent-shadow); }
.primary-button:hover { background: var(--accent-2); transform: translateY(-1px); }

.spotlight-card { height: 390px; border-radius: 22px; overflow: hidden; position: relative; box-shadow: var(--shadow); background: #111722; color: white; }
.spotlight-art { position: absolute; inset: -40% -6% -40% 33%; height: auto; border-radius: 0; aspect-ratio: auto; background-size: 400% 200%; background-position: 0 0; }
.spotlight-shade { position: absolute; inset: 0; background: var(--spotlight-overlay); }
.spotlight-content { position: relative; height: 100%; padding: 42px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 610px; }
.spotlight-content h2 { font: 800 clamp(36px,5vw,62px)/.98 'Manrope'; letter-spacing: -.05em; margin: 8px 0 5px; }
.series-label { margin: 17px 0 0; color: rgba(255,255,255,.6); font-size: 12px; letter-spacing: .12em; font-weight: 700; }
.episode-line { margin: 0 0 26px; color: rgba(255,255,255,.72); }
.pill { border-radius: 20px; padding: 7px 11px; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.live-pill { background: rgba(12,16,24,.62); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.14); }
.live-pill i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 0 4px rgba(69,208,146,.15); }
.spotlight-actions { display: flex; gap: 10px; }
.light-button { background: white; color: #171b24; }
.glass-button { background: rgba(255,255,255,.1); color: white; border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.spotlight-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: rgba(255,255,255,.15); }
.spotlight-progress span { display: block; height: 100%; background: var(--accent); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(340px,.8fr); gap: 22px; margin-top: 30px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 20px; }
.section-head h2 { font: 700 21px/1.2 'Manrope'; letter-spacing: -.02em; margin: 5px 0 0; }
.text-button { border: 0; background: transparent; color: var(--muted); padding: 6px 0; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap; }
.text-button:hover { color: var(--accent); }
.continue-list { display: grid; gap: 12px; }
.continue-item { display: grid; grid-template-columns: 62px 1fr auto; gap: 13px; align-items: center; padding: 9px; margin: 0 -9px; border-radius: 12px; cursor: pointer; }
.continue-item:hover { background: var(--surface-2); }
.continue-thumb { width: 62px; height: 72px; border-radius: 9px; background-size: 400% 200%; }
.continue-copy h3 { margin: 0 0 3px; font-size: 15px; }.continue-copy p { margin: 0; color: var(--muted); font-size: 13px; }
.mini-progress { margin-top: 9px; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }.mini-progress span { display: block; height: 100%; background: var(--accent); }
.play-button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; color: var(--accent); }
.week-list { display: grid; gap: 4px; }
.week-item { display: grid; grid-template-columns: 44px 42px 1fr; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.week-item:last-child { border: 0; }.week-date { text-align: center; line-height: 1.1; }.week-date b { display: block; font-size: 18px; }.week-date span { font-size: 11px; color: var(--muted); font-weight: 700; }
.week-thumb { width: 42px; height: 51px; border-radius: 7px; background-size: 400% 200%; }
.week-copy h3 { font-size: 14px; margin: 0; }.week-copy p { color: var(--muted); font-size: 12px; margin: 2px 0 0; }
.library-preview { margin-top: 34px; }
.dashboard-library-group + .dashboard-library-group { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border); }.dashboard-library-group > h3 { margin: 0 0 14px; font: 700 17px 'Manrope'; }
.poster-row, .library-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; }
.poster-card { min-width: 0; cursor: pointer; }
.poster-card:hover .poster { transform: translateY(-4px); box-shadow: var(--shadow); }
.poster { aspect-ratio: 2/3; border-radius: 13px; background-image: url('./assets/poster-sheet.png'); background-size: 400% 200%; background-repeat: no-repeat; background-color: var(--surface-3); transition: transform .22s, box-shadow .22s; }
.poster-0 { background-position: 0 0; }.poster-1 { background-position: 33.333% 0; }.poster-2 { background-position: 66.666% 0; }.poster-3 { background-position: 100% 0; }
.poster-4 { background-position: 0 100%; }.poster-5 { background-position: 33.333% 100%; }.poster-6 { background-position: 66.666% 100%; }.poster-7 { background-position: 100% 100%; }
.remote-poster { background-size: cover !important; background-position: center !important; }
.poster-card h3 { font-size: 15px; margin: 10px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.poster-card p { font-size: 13px; color: var(--muted); margin: 0; }
.card-progress { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: var(--surface-3); }.card-progress span { display: block; height: 100%; background: var(--accent); }.card-progress-label { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.poster-wrap { position: relative; }.status-badge { position: absolute; left: 8px; top: 8px; color: white; background: rgba(10,13,20,.76); backdrop-filter: blur(8px); padding: 4px 7px; border-radius: 7px; font-size: 10px; font-weight: 700; }

.filter-row { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 2px; }
.filter-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 20px; padding: 8px 15px; color: var(--muted); cursor: pointer; white-space: nowrap; font-size: 14px; font-weight: 600; }
.filter-chip.active { background: var(--accent); color: white; border-color: var(--accent); }
.library-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.library-grid .poster-card { margin-bottom: 12px; }
.library-section + .library-section { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--border); }.library-section > h2 { margin: 0 0 16px; font: 700 21px 'Manrope'; }
.empty-state { text-align: center; border: 1px dashed var(--border); border-radius: 18px; padding: 70px 20px; background: var(--surface); }.empty-state span { font-size: 36px; color: var(--accent); }.empty-state h3 { margin: 10px 0 4px; }.empty-state p { margin: 0; color: var(--muted); }

.calendar-controls { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); padding: 5px; border-radius: 12px; }.calendar-controls button { width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; }.calendar-controls button:hover { background: var(--surface-2); }.calendar-controls b { min-width: 125px; text-align: center; text-transform: capitalize; }
.calendar-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 22px; }
.month-calendar, .upcoming-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; }
.weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.weekday-row span { padding: 5px 8px 13px; color: var(--muted); font-size: 11px; font-weight: 800; text-align: right; }
.calendar-day { min-height: 118px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: 8px; position: relative; overflow: hidden; }.calendar-day:nth-child(7n+1) { border-left: 0; }.calendar-day.other-month { opacity: .35; }.calendar-day.today .day-number { background: var(--accent); color: white; }.day-number { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; margin-left: auto; font-size: 12px; font-weight: 700; }
.day-event { margin-top: 5px; display: grid; grid-template-columns: 27px 1fr; gap: 6px; align-items: center; padding: 4px; border-radius: 7px; background: var(--surface-2); cursor: pointer; }.event-thumb { width: 27px; height: 35px; border-radius: 4px; background-size: 400% 200%; }.day-event span { font-size: 10px; line-height: 1.15; font-weight: 700; overflow: hidden; }
.upcoming-panel h2 { font: 700 21px 'Manrope'; margin: 4px 0 18px; }.upcoming-item { display: grid; grid-template-columns: 54px 1fr; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; }.upcoming-item:last-child { border: 0; }.upcoming-thumb { width: 54px; height: 70px; border-radius: 8px; background-size: 400% 200%; }.upcoming-item h3 { margin: 2px 0 3px; font-size: 14px; }.upcoming-item p { color: var(--muted); margin: 0; font-size: 12px; }.upcoming-item b { display: block; color: var(--accent); margin-top: 6px; font-size: 11px; text-transform: uppercase; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: 11vh 20px 20px; background: rgba(5,8,13,.74); backdrop-filter: blur(8px); }
.modal-backdrop[hidden] { display: none; }
.search-modal { width: min(680px,100%); max-height: 75vh; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.search-input-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }.search-input-wrap > span { font-size: 23px; color: var(--muted); }.search-input-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 18px; }.search-input-wrap input::placeholder { color: var(--muted-2); }.close-modal, .close-detail { border: 0; background: var(--surface-2); color: var(--muted); cursor: pointer; border-radius: 8px; width: 32px; height: 32px; font-size: 22px; }
.search-body { padding: 18px; overflow-y: auto; max-height: calc(75vh - 70px); }.search-results { display: grid; gap: 7px; margin-top: 10px; }.search-result { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 12px; padding: 8px; border-radius: 11px; }.search-result:hover { background: var(--surface-2); }.search-result .poster { width: 43px; border-radius: 6px; }.search-result h3 { margin: 0; font-size: 14px; }.search-result p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }.result-add { border: 1px solid var(--border); background: var(--surface); border-radius: 9px; padding: 7px 10px; cursor: pointer; color: var(--accent); font-weight: 700; font-size: 13px; }.result-add.added { color: var(--green); }
.search-loading { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--muted); }.search-loading span { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }.search-loading p { margin: 0; }.search-empty { padding: 38px 20px; }.data-credit { display: block; color: var(--muted); font-size: 12px; text-align: right; padding: 10px 8px 2px; text-decoration: none; }.data-credit a { color: inherit; font-weight: 700; }.data-credit a:hover, a.data-credit:hover { color: var(--accent); text-decoration: underline; }.result-rating { display: block; margin-top: 3px; color: #d49f16; font-size: 11px; font-weight: 700; }
@keyframes spin { to { transform: rotate(360deg); } }
.detail-modal { width: min(920px,100%); max-height: 86vh; overflow-y: auto; padding: 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 100px rgba(0,0,0,.45); position: relative; }.detail-overview { display: grid; grid-template-columns: 230px 1fr; gap: 30px; }.detail-poster { width: 100%; }.close-detail { position: absolute; right: 14px; top: 14px; z-index: 2; }.detail-copy { align-self: center; padding-right: 24px; }.detail-copy h2 { font: 800 34px/1.1 'Manrope'; letter-spacing: -.04em; margin: 5px 0 13px; }.detail-copy > p:not(.eyebrow) { color: var(--muted); }.detail-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }.detail-stats span { border: 1px solid var(--border); background: var(--surface-2); padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }.detail-stats .rating-chip { color: #ffc94a; border-color: rgba(255,201,74,.25); background: rgba(255,201,74,.08); }
.series-explorer { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }.series-explorer-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 15px; }.series-explorer-head h3 { font: 700 22px 'Manrope'; margin: 4px 0 0; }.rating-note { color: var(--muted); font-size: 12px; }.series-loading { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); }.series-loading span { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }.series-loading p { margin: 0; }
.compact-loader { min-height: 100px; }
.series-progress-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); }.progress-copy b, .progress-copy span { display: block; }.progress-copy b { font-size: 16px; }.progress-copy span { color: var(--muted); font-size: 12px; }.progress-track { height: 7px; overflow: hidden; border-radius: 5px; background: var(--surface-3); }.progress-track span { display: block; height: 100%; background: var(--accent); }.series-progress-summary strong { color: var(--accent); font-size: 14px; }
.seasons-list { display: grid; gap: 8px; }.season-block { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-2); }.season-toggle { width: 100%; min-height: 72px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: transparent; cursor: pointer; text-align: left; }.season-toggle:hover { background: var(--surface-3); }.season-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-weight: 800; }.season-copy b, .season-copy > span { display: block; }.season-copy > span { color: var(--muted); font-size: 12px; }.season-progress { display: grid; grid-template-columns: auto minmax(70px,150px) auto; align-items: center; gap: 8px; margin-top: 7px; }.season-progress .progress-copy span { display: none; }.season-progress .progress-copy b, .season-progress strong { color: var(--muted); font-size: 11px; }.season-progress .progress-track { height: 4px; }.rating { color: #ffc94a; font-size: 13px; font-weight: 700; white-space: nowrap; }.chevron { color: var(--muted); font-size: 18px; transition: transform .2s; }.season-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }.episode-list { border-top: 1px solid var(--border); background: var(--surface); }.episode-list[hidden] { display: none; }.season-actions { display:flex; justify-content:flex-end; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); }.season-watch-action { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:7px 12px; border:1px solid var(--accent); border-radius:9px; background:var(--accent-soft); color:var(--accent); font:inherit; font-size:13px; font-weight:750; cursor:pointer; }.season-watch-action:hover { filter:brightness(1.08); }.season-watch-action:focus-visible { outline:3px solid var(--accent-ring); outline-offset:2px; }.episode-row { display: grid; grid-template-columns: 32px 56px 1fr auto; align-items: center; gap: 12px; min-height: 62px; padding: 8px 14px; border-bottom: 1px solid var(--border); transition: opacity .2s, background .2s; }.episode-row:last-child { border-bottom: 0; }.episode-row.watched-episode { background: rgba(69,208,146,.05); }.episode-row.future-episode { opacity: .5; }.episode-check { width: 24px; height: 24px; display: grid; cursor: pointer; }.episode-check input { position: absolute; opacity: 0; pointer-events: none; }.episode-check span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: transparent; font-size: 13px; font-weight: 800; }.episode-check input:checked + span { border-color: var(--green); background: var(--green); color: #07140e; }.episode-check input:focus-visible + span { outline: 3px solid var(--accent-ring); outline-offset: 2px; }.episode-check:has(input:disabled) { cursor: not-allowed; }.episode-code { color: var(--accent); font-size: 12px; font-weight: 800; }.episode-copy b { display: block; font-size: 14px; }.episode-copy span { color: var(--muted); font-size: 12px; }.episode-unrated { color: var(--muted-2); font-size: 12px; }.detail-credit { margin-top: 12px; }
.settings-modal { width: min(720px,100%); padding: 26px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.settings-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 10px; }.settings-head h2 { font: 800 28px/1.1 'Manrope'; letter-spacing: -.03em; margin: 5px 0 0; }
.close-settings { border: 0; background: var(--surface-2); color: var(--muted); cursor: pointer; border-radius: 8px; width: 32px; height: 32px; font-size: 22px; }
.setting-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 22px; padding: 22px 0; border-top: 1px solid var(--border); }.setting-row b { display: block; font: 700 16px 'Manrope'; }.setting-row p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.language-choice { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }.language-choice button { min-width: 84px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 700; }.language-choice button.active { background: var(--accent); color: white; box-shadow: 0 5px 14px var(--accent-shadow); }
.accent-setting { grid-template-columns:minmax(190px,1fr) minmax(390px,1.45fr); align-items:start; }
.accent-palette { display:grid; grid-template-columns:repeat(3,minmax(120px,1fr)); gap:8px; width:100%; }
.accent-palette button { min-height:54px; display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--muted); cursor:pointer; }
.accent-palette button:hover { border-color:var(--accent); color:var(--text); }
.accent-palette button.active { border-color:var(--accent); color:var(--text); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent-ring); }
.accent-palette button span { width:24px; height:24px; flex:0 0 auto; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.accent-palette button i { min-width:0; font-style:normal; font-size:13px; font-weight:700; white-space:nowrap; }
.settings-note { margin: 0; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 22px; }.settings-actions .primary-button { min-width: 160px; }
.account-setting .secondary-button { white-space:nowrap; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 120; padding: 12px 16px; border-radius: 11px; background: var(--text); color: var(--bg); box-shadow: var(--shadow); font-weight: 700; opacity: 0; transform: translateY(14px); pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: none; }
.bottom-nav { display: none; }

@media (max-width: 1100px) {
  .main-content { padding-inline: 28px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .week-list { grid-template-columns: repeat(2,1fr); gap: 0 20px; }
  .poster-row { grid-template-columns: repeat(4,1fr); }.poster-row .poster-card:nth-child(n+5) { display: none; }
  .calendar-layout { grid-template-columns: 1fr; }.upcoming-panel { display: none; }
  .library-grid { grid-template-columns: repeat(4,1fr); }
}

@media (max-width:1200px) and (min-width:981px) {
  .topbar { grid-template-columns:minmax(0,1fr) 320px; gap:20px; }
  .notification-panel { left:auto; right:0; }
}
@media (max-width:980px) and (min-width:761px) {
  .topbar { display:flex; gap:12px; }
  .topbar .search-trigger { width:min(420px,60vw); margin-right:auto; }
  .notification-panel { left:auto; right:0; }
}

@media (max-width: 760px) {
  .auth-gate { padding:64px 14px 20px; place-items:start center; }.auth-card { padding:24px 20px; border-radius:18px; }.auth-language { top:14px; right:14px; }.auth-intro h1 { font-size:30px; }
  .top-avatar { display: grid; }
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding: 0 16px 94px; }
  .topbar { display:flex; height: 70px; gap: 9px; position: sticky; top: 0; z-index: 30; background: color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter: blur(14px); }
  .notification-panel { position:fixed; top:64px; right:12px; left:12px; width:auto; max-height:calc(100vh - 150px); }
  .mobile-brand, .icon-button { display: grid; }
  .topbar .mobile-brand { flex:0 0 88px; width:88px; }
  .topbar .mobile-logo { width:100%; max-width:100%; }
  .topbar .notification-button,.topbar .icon-button,.topbar .top-avatar { flex-shrink:0; }
  .mobile-brand .brand-mark { width:38px; height:38px; }
  .topbar .search-trigger { width:0; min-width:0; flex:1 1 0; padding-inline:10px; gap:6px; }
  .topbar .search-trigger span:first-child { flex-shrink:0; }
  .topbar .search-trigger span:nth-child(2) { min-width:0; }
  .search-trigger kbd { display:none; }
  .page-heading { margin: 17px 0 22px; align-items: flex-start; }.page-heading h1 { font-size: 30px; }.page-heading p:not(.eyebrow) { font-size: 14px; }.page-heading > .primary-button { display: none; }
  .spotlight-card { height: 390px; border-radius: 18px; }.spotlight-art { inset: 0; background-size: cover; background-position: 0 0; }.spotlight-shade { background: linear-gradient(0deg,rgba(8,11,18,.96),rgba(8,11,18,.56) 62%,rgba(8,11,18,.06)); }.spotlight-content { justify-content: flex-end; padding: 26px 20px 32px; }.spotlight-content h2 { font-size: 39px; }.series-label { margin-top: 12px; }.spotlight-actions { width: 100%; }.light-button { flex: 1; }.glass-button { padding-inline: 12px; font-size: 0; }.glass-button::after { content: 'Více'; font-size: 14px; }
  .panel { padding: 20px 16px; border-radius: 16px; }.dashboard-grid { margin-top: 16px; gap: 16px; }.week-list { grid-template-columns: 1fr; }.library-preview { margin-top: 28px; }.poster-row { grid-template-columns: repeat(2,1fr); gap: 13px; }.poster-row .poster-card:nth-child(n+5) { display: block; }.poster-row .poster-card:nth-child(n+7) { display: none; }
  .bottom-nav { position: fixed; inset: auto 10px 10px; z-index: 40; height: 68px; display: grid; grid-template-columns: repeat(3,1fr); padding: 6px; background: color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }.bottom-nav button { border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 13px; font-size: 11px; font-weight: 700; }.bottom-nav button span { font-size: 20px; line-height: 1; }.bottom-nav button i { font-style: normal; }.bottom-nav button.active { color: var(--accent); background: var(--accent-soft); }
  .library-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .compact-heading { display: block; }.calendar-controls { margin-top: 18px; width: fit-content; }.month-calendar { padding: 12px 7px; overflow: hidden; }.weekday-row span { text-align: center; padding-inline: 0; }.calendar-day { min-height: 78px; padding: 5px 2px; border-left: 0; }.day-number { margin: 0 auto; }.day-event { display: block; width: 28px; margin: 5px auto 0; padding: 0; background: transparent; }.event-thumb { width: 28px; height: 36px; }.day-event span { display: none; }
  .modal-backdrop { padding: 0; place-items: end center; }.search-modal { border-radius: 20px 20px 0 0; width: 100%; max-height: 85vh; }.detail-modal { width: 100%; max-height: 92vh; padding: 20px; border-radius: 20px 20px 0 0; }.detail-overview { grid-template-columns: 110px 1fr; gap: 17px; }.detail-copy { display: contents; }.detail-copy h2 { font-size: 26px; align-self: end; padding-right: 30px; }.detail-copy > p:not(.eyebrow) { grid-column: 1/-1; margin-block: 2px; }.detail-copy .eyebrow { align-self: end; }.detail-stats { grid-column: 1/-1; margin: 8px 0; }.detail-copy .primary-button { grid-column: 1/-1; }.series-explorer { margin-top: 22px; }.series-explorer-head { align-items: start; }.rating-note { display: none; }.season-toggle { grid-template-columns: auto 1fr auto; }.season-toggle > .rating { grid-column: 2; }.season-toggle .chevron { grid-column: 3; grid-row: 1 / span 2; }.episode-row { grid-template-columns: 28px 44px 1fr; padding-inline: 10px; }.episode-row > .rating, .episode-row > .episode-unrated { grid-column: 3; }.series-progress-summary { grid-template-columns: 1fr auto; }.series-progress-summary > .progress-track { grid-column: 1/-1; grid-row: 2; }.season-progress { grid-template-columns: auto 1fr auto; }
  .toast { right: 14px; left: 14px; bottom: 90px; text-align: center; }
  .settings-modal { width: 100%; padding: 22px 18px; border-radius: 20px 20px 0 0; }.setting-row,.accent-setting { grid-template-columns: 1fr; gap: 14px; }.language-choice { width: 100%; }.language-choice button { flex: 1; }.accent-palette { grid-template-columns:repeat(2,minmax(0,1fr)); }.settings-actions .primary-button { width: 100%; }
}

@media (max-width: 390px) {
  .search-trigger span:nth-child(2) { font-size: 13px; }
  .continue-item { grid-template-columns: 54px 1fr auto; }.continue-thumb { width: 54px; height: 66px; }
  .section-head h2 { font-size: 19px; }
}
@media (max-width: 680px) { .bug-report-head { align-items:flex-start; flex-direction:column; }.bug-report-list { padding:15px; max-height:none; }.bug-report-form { padding:18px 15px; }.bug-report-composer { align-items:stretch; flex-direction:column; }.bug-report-composer .primary-button { align-self:stretch; } }

/* Library and two-month release calendar */
#dashboard { max-width:1760px; }
.overview-columns { display:grid; grid-template-columns:minmax(0,1fr) 480px; gap:28px; align-items:start; margin-top:24px; }
.overview-columns .library-preview { margin-top:0; min-width:0; }
.overview-columns .poster-row { display:flex; flex-wrap:wrap; gap:18px; max-width:calc(7 * var(--library-poster-width) + 6 * 18px); }
.overview-columns .poster-row .poster-card { display:block; }
.overview-calendar { min-width:0; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:18px; }
.overview-calendar .section-head { gap:12px; }
.overview-calendar .calendar-controls { margin:0; gap:2px; }
#twoMonthCalendar { display:grid; gap:24px; }
.overview-calendar .month-calendar { padding:0; border:0; border-radius:0; }
.month-calendar h3 { font-size:16px; text-transform:capitalize; margin:4px 0 14px; }
.overview-calendar .weekday-row span { padding:5px 0 10px; text-align:center; font-size:12px; }
.overview-calendar .calendar-grid { grid-template-columns:repeat(7,minmax(0,1fr)); grid-auto-columns:minmax(0,1fr); grid-auto-rows:80px; width:100%; min-width:0; }
.overview-calendar .calendar-day { box-sizing:border-box; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; width:100%; min-width:0; max-width:100%; height:80px; min-height:80px; max-height:80px; padding:5px 2px; overflow:hidden; text-align:center; vertical-align:top; }
.overview-calendar .day-number { flex:0 0 25px; align-self:center; margin:0; }
.overview-calendar .day-events { display:flex; align-items:flex-start; justify-content:center; gap:2px; width:100%; min-width:0; max-width:100%; overflow:hidden; }
.overview-calendar .day-event { display:block; flex:0 0 27.2px; width:27.2px; max-width:27.2px; padding:0; margin:4px 0 0; border:0; vertical-align:top; }
.overview-calendar .day-events[data-preview-count="2"] .day-event { flex-basis:min(24px,calc((100% - 2px)/2)); width:min(24px,calc((100% - 2px)/2)); }
.overview-calendar .day-events[data-preview-count="3"] .day-event { flex-basis:min(17.6px,calc((100% - 4px)/3)); width:min(17.6px,calc((100% - 4px)/3)); }
.overview-calendar .event-thumb { display:block; width:100%; height:auto; aspect-ratio:27.2/37.4; background-image:url('./assets/poster-sheet.png'); }
.overview-calendar .day-more { position:absolute; right:3px; bottom:3px; min-width:18px; height:18px; display:grid; place-items:center; padding:0 4px; border-radius:9px; background:var(--surface-3); color:var(--muted); font-size:10px; font-weight:800; }
.calendar-status,.group-empty { color:var(--muted); font-size:14px; line-height:1.5; }
.group-empty { grid-column:1/-1; padding:20px 0; }
.card-progress-label { font-size:12px; }
.bottom-nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
.bottom-nav.has-admin { grid-template-columns:repeat(5,minmax(0,1fr)); }
.admin-navigation { text-decoration:none; }
.bottom-nav a.admin-navigation { display:grid; place-items:center; align-content:center; gap:2px; border-radius:13px; color:var(--muted); font-size:11px; font-weight:700; }
.bottom-nav a.admin-navigation span { font-size:20px; line-height:1; }
.bottom-nav a.admin-navigation i { font-style:normal; }
[data-admin-nav][hidden],.bottom-nav a.admin-navigation[hidden],.account-actions a[hidden] { display:none; }
.nav-count[hidden],.mobile-request-dot[hidden] { display:none; }
.bottom-nav [data-view="friends"] { position:relative; }
.mobile-request-dot { position:absolute; top:6px; right:20%; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.friend-search { max-width:580px; margin:24px 0 10px; }
.friend-search label { display:block; margin-bottom:8px; color:var(--muted); font-size:13px; font-weight:700; }
.friend-search > div { display:flex; gap:10px; }
.friend-search input { flex:1; min-width:0; min-height:44px; padding:0 13px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); }
.friends-status { min-height:22px; margin:10px 0 18px; color:var(--muted); font-size:13px; }
.friends-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:26px; }
.friends-panel { padding:22px; border:1px solid var(--border); border-radius:17px; background:var(--surface); min-width:0; }
.friends-panel h2 { margin:0 0 16px; font:800 19px 'Manrope',sans-serif; }
.accepted-friends { margin-top:20px; }
.friend-list { display:grid; gap:10px; }
.friend-card { display:flex; align-items:center; gap:12px; min-width:0; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.friend-identity { flex:1; min-width:0; }.friend-identity b { display:block; overflow-wrap:anywhere; font-size:14px; }.friend-identity small { display:block; margin-top:3px; color:var(--muted-2); font-size:10px; }
.friend-avatar { display:inline-flex; align-items:center; justify-content:center; flex:0 0 38px; width:38px; height:38px; border:2px solid var(--surface); border-radius:50%; background:var(--avatar-bg,var(--accent)); color:#fff; font-size:12px; font-weight:800; line-height:1; }
.friend-actions { display:flex; flex-wrap:wrap; gap:7px; }.friend-actions button { min-height:34px; padding:0 10px; font-size:11px; }.friend-actions button:disabled { opacity:.5; cursor:wait; }
.friends-empty { margin:0; padding:8px 0; color:var(--muted); font-size:13px; }
.episode-friends { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:7px; }.episode-friends:empty { display:none; }
.episode-copy { min-width:0; }
.episode-description { margin-top:7px; font-size:12px; color:var(--muted); }
.episode-description summary { cursor:pointer; color:var(--accent); }
.episode-description p { margin:7px 0 3px; line-height:1.6; overflow-wrap:anywhere; }
.episode-friend-label { font-size:10px; color:var(--muted); }
.episode-friend-avatars { display:inline-flex; align-items:center; padding-left:5px; }.episode-friend-avatars .friend-avatar { flex-basis:26px; width:26px; height:26px; margin-left:-5px; font-size:9px; }.episode-friend-avatars .friend-overflow { background:var(--surface-3); color:var(--text); }
@media(max-width:760px) { .friends-columns { grid-template-columns:1fr; }.friends-panel { padding:17px; }.friend-card { flex-wrap:wrap; }.friend-actions { margin-left:auto; }.friend-search button { padding-inline:14px; }.bottom-nav button { font-size:10px; } }
@media(max-width:1200px) { .overview-columns { grid-template-columns:minmax(0,1fr) 320px; gap:20px; } }
@media(max-width:980px) { .overview-columns { grid-template-columns:1fr; } }
@media(max-width:760px) { .overview-calendar { padding:16px 12px; } }

.calendar-day-button { background:transparent; color:var(--text); border:0; border-top:1px solid var(--border); border-left:1px solid var(--border); font:inherit; cursor:pointer; text-align:center; }
.calendar-day-button:hover { background:var(--accent-soft); }
.calendar-day-button.today { background:var(--accent-soft); }
.calendar-day-button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.day-modal { width:min(560px,100%); max-height:82vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); padding:20px; border-radius:18px; box-shadow:var(--shadow); }
.day-modal h2 { font-size:20px; text-transform:capitalize; margin:0; }
.day-modal #dayTimeNote { margin:7px 0 10px; font-size:12px; line-height:1.4; }
.day-detail-item { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--border); }
.day-detail-item .poster { width:44px; border-radius:7px; }
.day-detail-item h3 { margin:0 0 2px; font-size:15px; line-height:1.25; }
.day-detail-item p { margin:0 0 2px; color:var(--muted); font-size:12px; line-height:1.35; }
.day-detail-item b { display:block; font-size:12px; line-height:1.35; }
.day-title-link { margin-top:4px; font-size:12px; }
@media(max-width:760px) { .day-modal { width:100%; border-radius:20px 20px 0 0; padding:16px; max-height:90vh; } }

.detail-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; margin:5px 0 13px; }
.detail-title-row h2 { flex:1 1 190px; margin:0; min-width:0; overflow-wrap:anywhere; }
.detail-trailer { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; margin-left:auto; padding:7px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text); font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; }
.detail-trailer span { color:#ff4747; font-size:14px; }
.detail-trailer:hover { border-color:var(--accent); color:var(--accent); }
.detail-trailer:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.detail-watch-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:0 0 20px; }
.detail-watch-label { color:var(--muted); font-size:12px; font-weight:800; white-space:nowrap; }
.watch-providers { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0; }
.provider-icon { position:relative; }
.provider-icon summary { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); cursor:pointer; list-style:none; }
.provider-icon summary::-webkit-details-marker { display:none; }
.provider-icon summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.provider-icon img { width:34px; height:34px; border-radius:8px; }
.provider-icon[open] summary { outline:2px solid var(--accent); }
.provider-popover { position:absolute; top:44px; left:0; z-index:4; width:210px; padding:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); font-size:14px; }
.provider-popover b,.provider-popover > span { display:block; }
.provider-title-link { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--text); font-weight:800; text-decoration:none; }
.provider-title-link:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.provider-title-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.provider-title-link span { flex:0 0 auto; color:var(--accent); font-size:15px; }
.provider-popover > span { margin-top:6px; color:var(--muted); }
.provider-hint { font-size:12px; color:var(--muted); }
.provider-bombuj { display:inline-flex; align-items:center; align-self:center; gap:6px; min-height:36px; padding:3px 9px 3px 4px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text); font-size:11px; font-weight:800; text-decoration:none; white-space:nowrap; }
.provider-bombuj:hover { border-color:var(--accent); color:var(--accent); }.provider-bombuj:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }.provider-bombuj-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:6px; background:#ac182a; color:#fff; font-size:14px; }.provider-bombuj > span:last-child { color:var(--accent); }
.movie-external-links { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.movie-external-links[hidden] { display:none; }
.movie-external-links a { display:inline-flex; align-items:center; min-height:36px; padding:7px 11px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--surface-2); font-size:13px; font-weight:700; text-decoration:none; }
.movie-external-links a:hover { border-color:var(--accent); color:var(--accent); }
.movie-external-links a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:760px) { .provider-popover { position:fixed; left:20px; right:20px; top:auto; bottom:22px; width:auto; z-index:110; }.detail-title-row { grid-column:1/-1; padding-right:28px; gap:12px 20px; }.detail-title-row h2 { padding-right:0; }.detail-watch-row { grid-column:1/-1; align-items:flex-start; flex-direction:column; margin:0 0 6px; } }

/* TMDB discovery */
.discover-heading { margin-bottom:20px; }
.discover-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.discover-switch { display:flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.discover-switch button { min-height:38px; padding:0 16px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font:700 13px 'Manrope',sans-serif; }
.discover-switch button:hover { color:var(--text); background:var(--surface-2); }
.discover-switch button.active { color:#fff; background:var(--accent); box-shadow:0 5px 14px var(--accent-shadow); }
.discover-genres { position:relative; min-width:210px; margin-left:auto; }
.discover-genres summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:46px; padding:0 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--muted); cursor:pointer; list-style:none; font-size:13px; font-weight:700; }
.discover-genres summary::-webkit-details-marker { display:none; }
.discover-genres summary::after { content:'⌄'; color:var(--muted); font-size:16px; line-height:1; transition:transform .18s ease; }
.discover-genres[open] summary { border-color:var(--accent); }
.discover-genres[open] summary::after { transform:rotate(180deg); }
.discover-genres summary strong { max-width:160px; overflow:hidden; color:var(--text); text-overflow:ellipsis; white-space:nowrap; }
.discover-genre-options { position:absolute; z-index:30; top:calc(100% + 8px); right:0; display:grid; grid-template-columns:repeat(2,minmax(150px,1fr)); gap:4px; width:max-content; max-width:min(420px,calc(100vw - 40px)); max-height:340px; margin:0; padding:10px; overflow:auto; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 18px 48px rgba(0,0,0,.22); }
.discover-genre-options legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.discover-genre-options label { display:flex; align-items:center; gap:9px; min-height:38px; padding:6px 10px; border-radius:9px; color:var(--muted); cursor:pointer; font-size:13px; font-weight:700; }
.discover-genre-options label:hover { background:var(--surface-2); color:var(--text); }
.discover-genre-options label:has(input:checked) { background:var(--accent-soft); color:var(--accent); }
.discover-genre-options input { width:17px; height:17px; margin:0; accent-color:var(--accent); cursor:pointer; }
.discover-language { display:flex; align-items:center; gap:7px; min-height:46px; margin:0; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.discover-language legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.discover-language label { display:flex; align-items:center; gap:7px; min-height:36px; padding:0 11px; border-radius:9px; color:var(--muted); cursor:pointer; font-size:13px; font-weight:700; }
.discover-language label:hover { background:var(--surface-2); color:var(--text); }
.discover-language input { width:17px; height:17px; margin:0; accent-color:var(--accent); cursor:pointer; }
.discover-language label:has(input:checked) { background:var(--accent-soft); color:var(--accent); }
.discover-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px 18px; }
.discover-card { position:relative; cursor:default; }
.discover-detail { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; font:inherit; }
.discover-detail .poster { width:100%; }
.discover-rating { display:block; margin-top:5px; color:#ffc94a; font-size:12px; font-weight:800; }
.discover-add { width:100%; min-height:34px; margin-top:9px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text); cursor:pointer; font-size:12px; font-weight:800; }
.discover-add:hover { border-color:var(--accent); color:var(--accent); }
.discover-add.added { color:var(--green); }
.discover-loading,.discover-empty { grid-column:1/-1; }
.discover-more { display:flex; justify-content:center; margin-top:28px; }
.discover-more button { min-height:42px; padding:0 24px; border:1px solid var(--accent); border-radius:11px; background:var(--accent-soft); color:var(--accent); cursor:pointer; font-weight:800; }
.discover-more button:hover { background:var(--accent); color:#fff; }
.discover-more button:disabled { cursor:wait; opacity:.7; }
.discover-more button[hidden] { display:none; }
.discover-credit { margin-top:16px; }
@media(max-width:1100px) { .discover-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:760px) { .discover-toolbar { align-items:stretch; }.discover-switch { flex:1; }.discover-switch button { flex:1; padding-inline:10px; }.discover-genres { width:100%; margin-left:0; }.discover-genres summary strong { max-width:none; }.discover-genre-options { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; max-width:none; margin-top:8px; box-shadow:none; }.discover-language { width:100%; }.discover-language label { flex:1; justify-content:center; }.discover-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 13px; } }

/* Archive */
.archive-heading { margin-bottom:20px; }
.archive-switch { width:max-content; margin-bottom:24px; }
.overview-columns,.archive-grid { --library-poster-width:150px; }
.archive-grid { display:flex; flex-wrap:wrap; margin-top:0; gap:18px; max-width:calc(7 * var(--library-poster-width) + 6 * 18px); align-items:flex-start; }
.overview-columns .poster-row > .poster-card,.archive-grid > .archive-card { flex:0 0 var(--library-poster-width); width:var(--library-poster-width); max-width:100%; min-width:0; }
.archive-card { cursor:default; }
.archive-card .poster-card { cursor:pointer; }
.archive-grid .poster-card { margin-bottom:0; }
.archive-restore { width:100%; min-height:36px; margin-top:10px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text); cursor:pointer; font-size:13px; font-weight:800; }
.archive-restore:hover { border-color:var(--accent); color:var(--accent); }
.detail-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.detail-actions #detailAdd,.detail-actions #detailArchive { min-height:34px; padding:0 13px; border-radius:8px; font-size:13px; }
.secondary-button,.archive-button { min-height:42px; padding:0 16px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text); cursor:pointer; font-size:14px; font-weight:800; }
.secondary-button:hover,.archive-button:hover { border-color:var(--accent); color:var(--accent); }
.archive-button { background:transparent; }
@media(max-width:760px) { .archive-switch { display:flex; width:100%; }.archive-switch button { flex:1; }.detail-actions { grid-column:1/-1; }.detail-actions button { flex:1 1 auto; } }
@media(max-width:760px) { .overview-columns .poster-row,.archive-grid { gap:18px 13px; max-width:calc(7 * var(--library-poster-width) + 6 * 13px); } }

/* Administration */
.admin-actions { display:flex; gap:8px; flex-wrap:wrap; }
.delete-account-button { padding:9px 12px; border:1px solid #8c4444; border-radius:9px; background:#382024; color:#ffb7b7; cursor:pointer; white-space:nowrap; }
.delete-account-button:disabled { opacity:.4; cursor:not-allowed; }
.admin-page { min-height:100vh; background:var(--bg); color:var(--text); }
.admin-topbar { height:78px; padding:0 max(24px,calc((100vw - 1320px)/2)); border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.admin-brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; }.admin-brand b,.admin-brand small { display:block; }.admin-brand b { font:800 14px 'Manrope',sans-serif; letter-spacing:.1em; }.admin-brand small { margin-top:2px; color:var(--muted); font-size:11px; }
.admin-wrap { width:min(1320px,calc(100% - 48px)); margin:0 auto; padding:48px 0 70px; }
.admin-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:28px; }.admin-heading h1 { margin:5px 0 7px; font:800 42px/1 'Manrope',sans-serif; letter-spacing:-.04em; }.admin-heading p:not(.eyebrow) { margin:0; color:var(--muted); }
.admin-total { min-width:150px; padding:16px 18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }.admin-total strong,.admin-total span { display:block; }.admin-total strong { color:var(--accent); font:800 27px/1 'Manrope',sans-serif; }.admin-total span { margin-top:6px; color:var(--muted); font-size:12px; }
.admin-tools { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:16px; }.admin-tools label { width:min(440px,100%); }.admin-tools label span { display:block; margin-bottom:6px; color:var(--muted); font-size:12px; font-weight:800; }.admin-tools input { width:100%; min-height:44px; padding:0 13px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); }
.temporary-password { position:relative; display:grid; grid-template-columns:minmax(240px,1fr) auto auto; align-items:center; gap:18px; margin-bottom:24px; padding:18px 52px 18px 20px; border:1px solid var(--accent-ring); border-radius:14px; background:var(--accent-soft); }.temporary-password b { display:block; }.temporary-password p { margin:4px 0 0; color:var(--muted); font-size:12px; }.temporary-password code { padding:9px 12px; border-radius:8px; background:var(--surface); color:var(--text); font-size:15px; font-weight:800; letter-spacing:.04em; }.temporary-password .icon-button { position:absolute; top:10px; right:10px; }
.admin-table-wrap { overflow:auto; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }.admin-table { width:100%; min-width:1200px; border-collapse:collapse; }.admin-table th { padding:12px; border-bottom:1px solid var(--border); color:var(--muted); background:var(--surface-2); font-size:11px; text-align:left; text-transform:uppercase; letter-spacing:.04em; }.admin-table td { padding:14px 12px; border-bottom:1px solid var(--border); color:var(--muted); font-size:13px; vertical-align:middle; }.admin-table tbody tr:last-child td { border-bottom:0; }.admin-table td b { display:block; color:var(--text); font-size:14px; }.admin-table td small { display:block; max-width:230px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; color:var(--muted-2); font-size:10px; white-space:nowrap; }
.admin-statuses { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }.status-pill { display:inline-flex; min-height:24px; align-items:center; padding:0 8px; border-radius:999px; background:rgba(69,208,146,.12); color:var(--green); font-size:10px; font-weight:800; }.status-pill.admin { background:var(--accent-soft); color:var(--accent); }.status-pill.warning { background:rgba(240,154,74,.14); color:#f0a65f; }.status-pill.danger { background:rgba(239,107,123,.13); color:#ef6b7b; }
.reset-password-button { min-height:36px; padding:0 11px; border:1px solid rgba(239,107,123,.28); border-radius:9px; background:rgba(239,107,123,.08); color:#ef7d8c; cursor:pointer; font-size:12px; font-weight:800; white-space:nowrap; }.reset-password-button:hover { background:rgba(239,107,123,.15); }.reset-password-button:disabled { opacity:.45; cursor:not-allowed; }
.admin-message,.admin-empty { padding:28px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--muted); text-align:center; }.admin-message.error { border-color:rgba(239,107,123,.3); color:#ef7d8c; }.admin-message p { margin:5px 0 0; }.admin-empty { border:0; border-radius:0; background:transparent; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:760px) { .admin-topbar { height:68px; padding:0 14px; }.admin-topbar .secondary-button { padding:0 10px; font-size:11px; }.admin-wrap { width:calc(100% - 28px); padding:30px 0 48px; }.admin-heading { align-items:flex-start; flex-direction:column; }.admin-heading h1 { font-size:34px; }.admin-total { width:100%; }.admin-tools { align-items:stretch; flex-direction:column; }.admin-tools .secondary-button { width:100%; }.temporary-password { grid-template-columns:1fr; }.temporary-password code { overflow:auto; } }

/* Invite-only cinema */
[data-cinema-nav][hidden] { display:none !important; }
.cinema-heading { margin-top:20px; gap:18px; }
.cinema-heading h1 { font-size:clamp(29px,3vw,42px); }
.cinema-heading-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.cinema-private { color:var(--muted); font-size:12px; font-weight:700; padding:9px 12px; border:1px solid var(--border); border-radius:9px; }
.cinema-private::before { content:'●'; color:var(--accent); margin-right:8px; }
.cinema-status { color:var(--muted); font-size:13px; min-height:0; margin:0 0 12px; }
.cinema-status:empty { display:none; }
.cinema-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.cinema-screen-column { min-width:0; }
.cinema-stage { position:relative; aspect-ratio:16/9; background:#05080d; border:1px solid var(--border); border-radius:13px; overflow:hidden; isolation:isolate; color:#f3f6fb; }
.cinema-frame,.cinema-frame iframe { display:block; width:100%; height:100%; border:0; }
.cinema-frame { position:absolute; inset:0; }
.cinema-empty { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:24px; text-align:center; background:radial-gradient(ellipse at 50% 35%,#1a2034,#080c14 75%); }
.cinema-empty[hidden] { display:none; }
.cinema-empty-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:var(--accent-soft); color:var(--accent); font-size:23px; margin-bottom:13px; }
.cinema-empty h2 { margin:0 0 8px; font-size:21px; }
.cinema-empty p { max-width:440px; margin:0 0 18px; color:#a1aabb; font-size:13px; }
.cinema-bubbles { position:absolute; right:24px; top:24px; display:flex; flex-direction:column; gap:10px; width:min(370px,calc(100% - 48px)); pointer-events:none; z-index:3; }
.cinema-bubble { display:flex; align-items:flex-start; gap:10px; padding:13px; background:rgba(10,15,24,.88); border:1px solid rgba(255,255,255,.15); border-radius:12px; box-shadow:0 8px 24px #0004; color:#f3f6fb; animation:cinemaBubbleIn .25s ease-out; }
.cinema-bubble strong { display:block; color:#c6b7ff; font-size:13px; margin-bottom:4px; }
.cinema-bubble p { margin:0; font-size:14px; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.cinema-bubble.is-leaving { opacity:0; transition:opacity .3s; }
@keyframes cinemaBubbleIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.cinema-fullscreen-tools { display:none; position:absolute; bottom:calc(76px + env(safe-area-inset-bottom,0px)); right:20px; width:150px; flex-direction:column; align-items:stretch; gap:8px; z-index:4; opacity:0; pointer-events:none; transition:opacity .2s; }
.cinema-controls-wake { display:none; position:absolute; bottom:48px; left:0; right:0; height:14px; z-index:2; }
.cinema-fullscreen-tools button { background:#101621e6; border:1px solid #ffffff33; border-radius:8px; color:#fff; padding:10px 13px; cursor:pointer; }
.cinema-stage:fullscreen { width:100vw; height:100vh; aspect-ratio:auto; border-radius:0; }
.cinema-stage:fullscreen .cinema-fullscreen-tools,.cinema-stage:fullscreen .cinema-controls-wake { display:flex; }
.cinema-stage:fullscreen .cinema-bubbles { top:30px; right:30px; }
.cinema-watchbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:10px 0 16px; color:var(--muted); font-size:12px; }
.cinema-watchbar label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.cinema-watchbar input { accent-color:var(--accent); }
.cinema-watchbar > div { display:flex; gap:8px; }
.cinema-watchbar button { border:1px solid var(--border); background:var(--surface); color:var(--text); padding:7px 10px; border-radius:8px; cursor:pointer; }
.cinema-watchbar button:disabled { opacity:.4; cursor:default; }
.cinema-info { display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--border); border-radius:12px; padding:12px 16px; background:var(--surface); }
.cinema-viewers { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; width:100%; color:var(--muted); font-size:12px; }
#cinemaViewerAvatars { display:flex; gap:8px 14px; flex-wrap:wrap; }
.cinema-viewer-chip { display:inline-flex; align-items:center; gap:7px; color:var(--text); }
.cinema-viewer-chip .cinema-avatar { width:28px; height:28px; flex-basis:28px; font-size:12px; }
.cinema-avatar { width:32px; height:32px; flex:0 0 32px; display:inline-grid; place-items:center; border-radius:50%; background:var(--accent); color:white; font-size:13px; font-weight:800; overflow:hidden; }
.cinema-avatar img { width:100%; height:100%; object-fit:cover; }
.cinema-chat { display:flex; flex-direction:column; height:clamp(390px,45vw,610px); border:1px solid var(--border); border-radius:13px; background:var(--surface); overflow:hidden; }
.cinema-chat-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:18px; border-bottom:1px solid var(--border); }
.cinema-chat-head h2 { margin:0; font-size:15px; }
.cinema-chat-head span { color:var(--muted); font-size:11px; }
.cinema-messages { overflow-y:auto; overscroll-behavior:contain; flex:1; padding:18px 14px; }
.cinema-message { display:flex; align-items:flex-start; gap:9px; margin-bottom:19px; }
.cinema-message > div { min-width:0; flex:1; }
.cinema-message header { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.cinema-message strong { font-size:12px; overflow-wrap:anywhere; }
.cinema-message time { color:var(--muted); font-size:10px; }
.cinema-message p { margin:6px 0 0; padding:9px 11px; background:var(--surface-2); border-radius:0 10px 10px; font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.cinema-message button { margin-left:auto; color:var(--muted); border:0; background:none; font-size:11px; cursor:pointer; }
.cinema-composer { display:flex; align-items:center; gap:9px; padding:12px; border-top:1px solid var(--border); }
.cinema-composer textarea { resize:vertical; min-width:0; width:100%; max-height:130px; padding:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; color:var(--text); font:inherit; font-size:13px; }
.cinema-composer button { border:0; border-radius:50%; width:37px; height:37px; flex:0 0 37px; background:var(--accent); color:white; cursor:pointer; }
.cinema-composer button:disabled { opacity:.4; cursor:default; }
.cinema-chat-empty { color:var(--muted); font-size:13px; text-align:center; line-height:1.6; padding:32px 10px; }
.cinema-admin { border:1px solid var(--border); background:var(--surface); border-radius:13px; padding:20px; margin-top:20px; }
.cinema-admin[hidden] { display:none; }
.cinema-admin-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.cinema-admin-heading h2 { font-size:17px; margin:0 0 6px; }
.cinema-admin-heading p,.cinema-help,.cinema-footnote { color:var(--muted); font-size:12px; line-height:1.6; }
.cinema-admin-heading p { margin:0; }
.cinema-admin-heading a { display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.cinema-start-form { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.cinema-start-form label { flex:1 1 210px; display:grid; gap:7px; font-size:12px; color:var(--muted); }
.cinema-start-form input,.cinema-members-dialog input { width:100%; min-height:42px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text); padding:10px 12px; font:inherit; font-size:13px; }
.cinema-stop { color:#f07178; }
.cinema-help { margin-bottom:0; }
.cinema-footnote { margin:14px 0; }
.cinema-members-dialog { width:min(560px,calc(100% - 28px)); max-height:85vh; overflow:auto; padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:16px; color:var(--text); box-shadow:var(--shadow); }
.cinema-members-dialog::backdrop { background:#000b; }
.cinema-members-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.cinema-members-head h2 { margin:4px 0; }
.cinema-members-head button { background:var(--surface-2); border:0; border-radius:8px; color:var(--text); font-size:24px; width:34px; height:34px; cursor:pointer; }
.cinema-members-dialog > p { color:var(--muted); font-size:13px; }
#cinemaMemberSearchForm label { display:block; font-size:13px; margin:18px 0 8px; }
#cinemaMemberSearchForm > div { display:flex; gap:10px; }
.cinema-member-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); }
.cinema-member-row strong { font-size:13px; overflow-wrap:anywhere; }
.cinema-member-row button { margin-left:auto; min-height:34px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text); cursor:pointer; }
#cinema :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(min-width:761px) { .bottom-nav [data-cinema-nav] { display:none; } }
@media(max-width:1100px) { .cinema-layout { grid-template-columns:minmax(0,1fr) 265px; }.cinema-info { align-items:flex-start; flex-direction:column; } }
@media(max-width:900px) { .cinema-layout { grid-template-columns:minmax(0,1fr); }.cinema-chat { height:390px; }.cinema-info { flex-direction:row; }.cinema-heading { flex-wrap:wrap; }.cinema-admin-heading { flex-wrap:wrap; } }
@media(max-width:760px) { .bottom-nav.has-cinema { display:flex; overflow-x:auto; justify-content:flex-start; }.bottom-nav.has-cinema > * { flex:1 0 58px; }.cinema-heading-actions { width:100%; }.cinema-stage { border-radius:10px; }.cinema-info { flex-direction:column; }.cinema-empty { padding:14px; }.cinema-empty-icon { width:38px; height:38px; font-size:16px; margin-bottom:8px; }.cinema-empty h2 { font-size:17px; }.cinema-empty p { font-size:12px; margin-bottom:10px; }.cinema-empty .primary-button { min-height:34px; font-size:12px; }.cinema-bubbles { top:12px; right:12px; width:min(300px,calc(100% - 24px)); }.cinema-bubble { padding:9px; }.cinema-bubble p { font-size:12px; -webkit-line-clamp:3; }.cinema-private { font-size:11px; }.cinema-start-form label { flex-basis:100%; }.cinema-fullscreen-tools { right:12px; width:145px; } }
@media(prefers-reduced-motion:reduce) { .cinema-bubble { animation:none; }.cinema-bubble.is-leaving { transition:none; } }

body.cinema-is-large { overflow:hidden; }
.cinema-stage.cinema-theater { position:fixed; inset:0; width:100vw; height:100dvh; aspect-ratio:auto; border-radius:0; z-index:2000; }
.cinema-stage.cinema-theater .cinema-fullscreen-tools,.cinema-stage.cinema-theater .cinema-controls-wake { display:flex; }
.cinema-stage.cinema-controls-visible .cinema-fullscreen-tools,.cinema-fullscreen-tools:hover,.cinema-fullscreen-tools:has(button:focus-visible) { opacity:1; pointer-events:auto; }
.cinema-fullscreen-tools button { font-size:13px; }