/* Cozy Room: presentation-only skin shared by every Portal page.
   Existing data hooks, player controls, permissions and media URLs stay intact. */
:root {
    --bg: #17110e;
    --panel: #211914;
    --panel-2: #2c211a;
    --line: rgba(224, 182, 125, .2);
    --text: #f6e8d0;
    --muted: #c0ae9b;
    --cyan: #e8b35f; /* Compatibility alias used by the existing Portal components. */
    --cyan-dark: #291a0b;
    --danger: #ff98a0;
    --radius: 18px;
    --shadow: 0 18px 54px rgba(0, 0, 0, .23);
    accent-color: var(--cyan);
}
html { scroll-padding-top: 100px; }
body { background: radial-gradient(ellipse at 80% 0, #39271b55, transparent 55%), var(--bg); font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
input, select, textarea { color-scheme: dark; }
h1, h2, h3, p, dd, a { overflow-wrap: anywhere; }
.portal-paw { display: inline-block; width: 36px; height: 36px; flex: 0 0 auto; color: var(--text); }
.portal-sr-only, .portal-skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.portal-skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--cyan); color: var(--cyan-dark); padding: 12px 18px; border-radius: 10px; }
.portal-header { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 13px max(24px, calc((100vw - 1320px)/2)); background: #17110eef; backdrop-filter: blur(14px); min-height: 76px; }
.portal-brand { gap: 10px; letter-spacing: -.035em; font-size: 22px; white-space: nowrap; }
.portal-brand strong { font-weight: 750; }
.portal-header nav { justify-content: center; }
.portal-header nav a { font-size: 13px; font-weight: 650; white-space: nowrap; }
.portal-header nav a:hover, .portal-header nav a.active { background: #e8b35f12; color: var(--cyan); }
.portal-account { max-width: 180px; }
.portal-account summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line); color: var(--text); }
.portal-account summary::after { content: "⌄"; margin-left: 10px; color: var(--cyan); }
.portal-account[open] { background: transparent; }
.portal-account[open] > a, .portal-account[open] > form { position: absolute; right: 0; width: 210px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); z-index: 21; }
.portal-account[open] > a { top: calc(100% + 8px); border-radius: 12px 12px 0 0; padding: 14px; }
.portal-account[open] > form { top: calc(100% + 58px); border-radius: 0 0 12px 12px; padding: 4px; }
.portal-main { width: min(1320px, calc(100% - 64px)); padding-top: 30px; padding-bottom: 44px; }
.portal-kicker { letter-spacing: .12em; font-size: 11px; color: var(--cyan); }
.portal-button { gap: 10px; border-radius: 10px; transition: background-color .15s, border-color .15s, transform .15s; }
.portal-button.primary { background: linear-gradient(115deg, #efbd70, #dba04b); border-color: #f4c98380; box-shadow: 0 4px 18px #0002; color: #271a0e; }
.portal-button.primary:hover:not(:disabled) { background: #f4c983; }
.portal-button.secondary:hover:not(:disabled) { border-color: #e8b35f88; background: #38281d; }
.portal-button:active:not(:disabled) { transform: translateY(1px); }
.portal-button:disabled { opacity: .58; }
.portal-cozy-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; min-height: 450px; padding: 48px; border-radius: 22px; background: #1a120e; box-shadow: var(--shadow); }
.portal-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: -2; }
.portal-cozy-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #160f0bad 0%, #160f0b33 43%, transparent 62%); }
.portal-hero-copy { max-width: 46%; align-self: center; }
.portal-hero-copy h1 { font-size: clamp(32px, 3.8vw, 54px); font-weight: 750; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; overflow-wrap: normal; }
.portal-hero-copy > p:not(.portal-kicker) { max-width: 330px; color: #dfcbb5; font-size: 16px; margin: 22px 0; }
.portal-hero-copy .portal-kicker { color: #edc186; }
.portal-hero-copy .portal-button { margin-top: 6px; }
.portal-section { margin-top: 32px; }
.portal-section h2 { font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
.portal-section > header { margin-bottom: 18px; }
.portal-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.portal-folder-card { transition: border-color .15s, transform .15s; box-shadow: 0 8px 24px #0001; }
.portal-folder-card:hover { transform: translateY(-3px); border-color: #e8b35f77; }
.portal-folder-card .portal-cover { height: auto; aspect-ratio: 16/10; }
.portal-cover { background: radial-gradient(ellipse at top right, #67442d55, transparent), #2b211b; }
.portal-folder-card > div:last-child { padding: 16px; }
.portal-card h3 { font-size: 18px; line-height: 1.3; }
.portal-card p { font-size: 13px; }
.portal-continue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-continue-card { grid-template-columns: 140px minmax(0, 1fr); }
.portal-continue-card .portal-cover { height: 185px; }
.portal-continue-card > div:last-child { padding: 18px; }
.portal-empty { padding: 26px; background: #e8b35f04; }
.portal-empty > span { color: #d3a974; }
.portal-empty p { margin: 8px 0; }
#library, #continue { scroll-margin-top: 95px; }
.portal-library-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px; margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; background: #241b15; }
.portal-library-toolbar label { min-width: 0; }
.portal-library-search { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.portal-library-search > span:first-child { color: var(--cyan); font-size: 28px; line-height: 1; }
.portal-library-toolbar input, .portal-library-toolbar select { min-height: 42px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #1b140f; color: var(--text); }
.portal-library-toolbar input { width: 100%; border-color: transparent; background: transparent; }
.portal-library-toolbar select { width: 100%; cursor: pointer; }
input::placeholder { color: #b19b85; opacity: 1; }
.portal-search-status { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.portal-series-hero { background: linear-gradient(135deg, #342318, #211914 65%); border-radius: 22px; }
.portal-series-hero h1 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.025em; }
.portal-original-title, .portal-series-meta.secondary { color: #ad9783; }
.portal-series-summary, .portal-series-meta { color: var(--muted); }
.portal-series-meta span:not(:last-child)::after { color: #8c7057; }
.portal-genre-list span { border-color: var(--line); background: #e8b35f0a; color: #e8c18b; }
.portal-episode-row:hover { border-color: #e8b35f50; }
.portal-breadcrumbs { flex-wrap: wrap; }
.portal-page-heading h1 { font-size: clamp(30px, 4vw, 48px); }
.portal-form input, .portal-share-result input, .portal-share-card input, .portal-premium-dialog select, .portal-media-preferences select, .portal-variant-picker select, .portal-premium-dialog input:not([type=file]) { background: #19120e; border-color: #aa82553d; }
.portal-media-preferences select:focus { border-color: var(--cyan); outline-color: #e8b35f22; }
.portal-premium-hero { background: linear-gradient(120deg, #3d2b1c, #211914 78%); border-radius: 22px; }
.portal-profile-card { max-width: 820px; margin: 0 auto; padding: 32px; background: linear-gradient(140deg, #322318, #211914 38%); }
.portal-profile-card h1 { font-size: 34px; }
.portal-profile-card dl > div { gap: 16px; }
.portal-profile-card dd { min-width: 0; text-align: right; }
.portal-media-preferences, .portal-billing-summary, .portal-variant-manager { background: #e8b35f06; border-color: var(--line); }
.portal-dropzone { border-color: #e8b35f77; background: #e8b35f08; }
.portal-status { background: #e8b35f14; }
.portal-success { border-color: #9dd8b33b; background: #93c9a010; color: #b6dec1 !important; }
.portal-storage-alert, .portal-premium-note { color: #edc68e; }
.portal-premium-dialog > form, .portal-share-result > form { position: relative; padding: 28px; }
.portal-share-result h2, .portal-premium-dialog h2 { padding-right: 38px; }
.portal-player::backdrop, .portal-share-result::backdrop, .portal-premium-dialog::backdrop { background: #100b08db; }
.portal-footer { width: min(1320px, calc(100% - 64px)); margin: 10px auto 0; padding: 24px 0 32px; border-top: 1px solid var(--line); display: flex; gap: 14px; justify-content: space-between; color: #ae9781; font-size: 12px; }
.portal-footer > span:first-child { font-weight: 750; color: #dfc6a6; }
.portal-guest-header { grid-template-columns: auto 1fr; }
.portal-guest-header > nav { display: flex; justify-content: flex-end; }
.portal-guest-header nav a { border: 1px solid var(--line); padding: 9px 18px; }
.portal-guest-header nav .portal-join-link { background: var(--cyan); color: var(--cyan-dark); }
.portal-login-main { width: min(1200px, calc(100% - 64px)); min-height: calc(100svh - 180px); padding: 38px 0; }
.portal-auth-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); width: 100%; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.portal-auth-scene { position: relative; min-height: 640px; overflow: hidden; isolation: isolate; background: #19110d; }
.portal-auth-scene > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
.portal-auth-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #160f0bf7 0%, #160f0bbf 23%, transparent 64%); }
.portal-auth-welcome { position: absolute; bottom: 0; padding: 38px; }
.portal-auth-welcome h2 { max-width: 370px; margin: 0; font-size: 36px; letter-spacing: -.025em; line-height: 1.13; text-wrap: balance; }
.portal-auth-welcome > p:not(.portal-kicker) { color: #e0cdb8; margin: 16px 0; }
.portal-auth-caption { display: block; font-size: 12px; color: #bfa58c; }
.portal-login-card { width: 100%; border: 0; border-radius: 0; padding: 38px 42px; box-shadow: none; align-self: center; background: transparent; }
.portal-login-mark { float: left; line-height: 1; margin-bottom: 22px; }
.portal-login-mark .portal-paw { width: 36px; height: 36px; color: var(--cyan); }
.portal-login-card > .portal-kicker { clear: both; }
.portal-login-card h1 { font-size: 34px; letter-spacing: -.03em; line-height: 1.15; }
.portal-login-card.portal-register-card h1 { font-size: clamp(26px, 4vw, 34px); }
.portal-login-card .portal-form { margin: 24px 0; gap: 15px; }
.portal-login-card a { color: var(--cyan); text-underline-offset: 4px; }
.portal-login-card > small, .portal-register-card .portal-form small { font-size: 12px; line-height: 1.5; }
.portal-form input { min-height: 47px; }
.portal-error-body { background: linear-gradient(#17110ecd, #17110ef5), url('/static/assets/portal/cozy-room-v1.webp') center / cover fixed; }
.portal-error-card { border: 1px solid var(--line); border-radius: 24px; background: #211914ed; }
.portal-error-mark .portal-paw { width: 56px; height: 56px; color: var(--cyan); }
@media (max-width: 1100px) {
    .portal-header { gap: 12px; padding-inline: 20px; }
    .portal-header nav a { padding-inline: 8px; }
    .portal-brand { font-size: 19px; }
    .portal-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .portal-continue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-cozy-hero { min-height: 400px; padding: 34px; }
    .portal-login-card { padding: 28px; }
}
@media (max-width: 850px) {
    .portal-header { grid-template-columns: minmax(0, 1fr) auto auto; }
    .portal-guest-header { grid-template-columns: auto minmax(0, 1fr); }
    .portal-guest-header > nav { display: flex; }
    .portal-main, .portal-footer { width: calc(100% - 32px); }
    .portal-auth-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
    .portal-auth-welcome { padding: 26px; }
    .portal-auth-welcome h2 { font-size: 30px; }
    .portal-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-continue-card { grid-template-columns: 100px minmax(0, 1fr); }
    .portal-continue-card > div:last-child { padding: 14px; }
    .portal-continue-card .portal-button { font-size: 12px; }
    .portal-mobile-nav { background: #241a14f5; bottom: max(10px, env(safe-area-inset-bottom)); backdrop-filter: blur(14px); }
    .portal-body:has(.portal-mobile-nav) .portal-footer { padding-bottom: 100px; }
    .portal-toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
    html { scroll-padding-top: 80px; }
    .portal-header { min-height: 66px; padding: 10px 14px; gap: 8px; }
    .portal-brand strong { display: inline; font-size: 16px; }
    .portal-brand { gap: 6px; }
    .portal-paw { width: 27px; height: 27px; }
    .portal-account summary { padding: 8px; max-width: 85px; font-size: 12px; }
    .portal-account summary::after { display: none; }
    .portal-language-switch button { min-width: 28px; padding: 5px; }
    .portal-header > .portal-language-switch > span { display: none; }
    .portal-main { padding-top: 18px; padding-bottom: 26px; }
    .portal-cozy-hero { min-height: 470px; padding: 24px; align-items: end; border-radius: 18px; }
    .portal-hero-art { object-position: 75% top; height: 345px; }
    .portal-cozy-hero::after { background: linear-gradient(0deg, #1a120e 0%, #1a120ef0 20%, #1a120e88 38%, transparent 70%); }
    .portal-hero-copy { max-width: 100%; align-self: end; }
    .portal-hero-copy h1 { max-width: 290px; font-size: 34px; }
    .portal-hero-copy > p:not(.portal-kicker) { margin: 12px 0; font-size: 14px; }
    .portal-hero-copy .portal-kicker { margin-bottom: 8px; }
    .portal-hero-copy .portal-button { min-height: 45px; font-size: 13px; }
    .portal-continue-grid, .portal-video-grid { grid-template-columns: 1fr; }
    .portal-continue-card { grid-template-columns: 100px minmax(0, 1fr); }
    .portal-continue-card .portal-cover { height: 160px; }
    .portal-folder-card > div:last-child { padding: 12px; }
    .portal-folder-card h3 { font-size: 15px; }
    .portal-folder-card p { font-size: 11px; }
    .portal-folder-card .portal-kicker { font-size: 9px; }
    .portal-card-grid { gap: 12px; }
    .portal-section { margin-top: 26px; }
    .portal-section h2 { font-size: 23px; }
    .portal-library-toolbar { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
    .portal-library-search { grid-column: 1/-1; padding-left: 0; }
    .portal-library-toolbar select { font-size: 12px; padding: 10px 8px; }
    .portal-library-toolbar input { font-size: 14px; padding-inline: 3px; }
    .portal-guest-header nav a { padding: 8px 10px; font-size: 12px; }
    .portal-login-main { width: calc(100% - 24px); min-height: auto; padding: 20px 0; }
    .portal-auth-layout { grid-template-columns: 1fr; border-radius: 20px; }
    .portal-auth-scene { min-height: 255px; }
    .portal-auth-scene > img { object-position: 77% 42%; }
    .portal-auth-scene::after { background: linear-gradient(0deg, #211914 0%, #211914c0 18%, transparent 80%); }
    .portal-auth-welcome { padding: 20px; }
    .portal-auth-welcome h2 { max-width: 230px; font-size: 26px; }
    .portal-auth-welcome > p:not(.portal-kicker), .portal-auth-caption, .portal-auth-welcome .portal-kicker { display: none; }
    .portal-login-card { padding: 20px 24px 26px; }
    .portal-login-card h1 { font-size: 30px; }
    .portal-login-mark { margin-bottom: 16px; }
    .portal-profile-card { padding: 22px 18px; }
    .portal-profile-card h1 { font-size: 28px; }
    .portal-profile-card dl > div { flex-wrap: wrap; }
    .portal-series-hero { padding: 20px; }
    .portal-episode-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-episode-actions .portal-button { padding-inline: 9px; font-size: 12px; }
    .portal-premium-dialog > form, .portal-share-result > form { padding: 22px 18px; }
    .portal-footer { flex-wrap: wrap; gap: 5px; padding-top: 18px; }
    .portal-footer > span { width: 100%; }
}
@media (max-width: 360px) {
    .portal-header .portal-brand strong { font-size: 14px; }
    .portal-header { gap: 5px; padding-inline: 10px; }
    .portal-account summary { max-width: 62px; }
    .portal-card-grid { grid-template-columns: 1fr; }
    .portal-login-card { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}