/* Kraefik: the user's blue split-K identity, charcoal panels and fine borders.
   Keep the cinematic layout and reflections in style.css. */
:root{--bg:#080808;--panel:#171717;--muted:#a1a1a9;--text:#f5f5f7;--accent:#3266f5;--line:#343438;--brand-blue:#3266f5;--brand-hover:#4778ff;--brand-pale:#a4c0ff}
body{background:var(--bg)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#709cff;outline-offset:4px}
.brand{gap:12px;letter-spacing:0}
.brand-logo{display:block;width:27px;height:32px;object-fit:contain;flex-shrink:0}
.topbar .brand-text,.login-card .brand-text{font-size:24px;font-weight:550;letter-spacing:-.8px;color:#f5f5f7}
.topbar{background:#0b0b0be8;border-bottom:1px solid #ffffff24;gap:28px;backdrop-filter:blur(18px)}
.top-nav{gap:6px}
.nav-button{border:1px solid transparent;border-radius:5px;color:#b8b8c1}
.nav-button.active{background:#202024;border-color:#45454d;color:#fff;box-shadow:inset 0 -2px var(--brand-blue)}
.nav-button:hover:not(.active){border-color:#34343c;background:#18181c;color:#fff}
.search-box{border:1px solid var(--line);background:#171719;border-radius:5px}
.search-box>span{color:#d9d9df}
.search-box:focus-within{border-color:#709cff;box-shadow:0 0 0 2px #3266f528}
.search-box input::placeholder,.search-box kbd{color:#9d9da6}
.round-button,.player-button{border:1px solid var(--line);background:#171719;border-radius:5px;color:#dddde4}
.round-button:hover,.player-button:hover{background:#242428;border-color:#696975}
.player-button>span:last-child{color:#b8b8c1}
.avatar{background:#1b2d55;border:1px solid #4c6ea9;border-radius:5px;color:#cfddff}
.connection-dot.connected{background:#8dd4b6}
.ambient{background:radial-gradient(ellipse at 50% 10%,#202b42,transparent 70%)}
.ambient img{opacity:.38}
.ambient:after{background:linear-gradient(0deg,#080808 3%,#08080855 58%,#08080822)}
.feature-poster,.feature-poster>img,.feature-card{border-radius:5px}
.feature-poster{background:#171719;box-shadow:0 0 0 1px #ffffff20}
.feature-arrow{border-radius:5px;background:#101012b0;border-color:#ffffff25}
.feature-caption .eyebrow{color:#a4b6d8}
.feature-type{color:#aeafb9}
.feature-info{border-radius:5px}
.button{border-radius:5px;min-height:36px}
.primary{background:var(--brand-blue);color:#fff;border:1px solid #4c7cff}
.primary:hover{background:var(--brand-hover)}
.secondary{background:#1a1a1e;border:1px solid #414149;color:#ededf2}
.secondary:hover{background:#24242a;border-color:#73737e}
.poster-image{border-radius:5px;box-shadow:0 0 0 1px #ffffff1c;background:#171719}
.continue-card .poster-image,.art-reflection>img{border-radius:5px}
.poster-card:hover .poster-image{box-shadow:0 0 0 2px #608dff;transform:translateY(-3px)}
.poster-card p{color:#a0a0aa}
.progress-track span{background:var(--brand-blue)}
.section-heading h2 small{color:#a0a0aa}
.section-link{color:#a5bdf2}
.section-link:hover{color:#d1dfff}
.card-play{background:#fff;color:#15151a}
.genre-tile,.studio-tile{border-radius:5px;border:1px solid var(--line);background:#19191c}
.genre-tile:after{background:linear-gradient(0deg,#08080bee,#0000 95%)}
.studio-tile:hover{background:#20242d;border-color:#638be2}
.studio-tile span,.collection-heading p{color:#a3a3ad}
.sort-choice{border-radius:4px;color:#b8b8c2;border:1px solid transparent}
.sort-choice.selected{background:#1d263b;border-color:#4765a5;color:#d8e5ff}
.sort-choice:hover{background:#202024}
.filter-strip>span{border:1px solid #4765a5;border-radius:4px;background:#17233b;color:#ccdcff}
.filter-strip button{color:#a5bdf2}
.detail-dialog,.small-dialog,.server-dialog{background:#141416;border:1px solid #44444b;border-radius:7px}
.detail-art:after{background:linear-gradient(0deg,#141416 0%,transparent 90%),linear-gradient(90deg,#14141677,transparent 80%)}
.detail-heading .eyebrow,.small-dialog .eyebrow,.server-dialog>.eyebrow,.server-dialog .eyebrow{color:#93b3ff}
.detail-genre span{border-radius:4px;border-color:#3a3a44;background:#222226}
.meta .score,.episode .episode-play{color:#9bbaff}
.episode{border-radius:5px;border-color:#303038}
.episode:hover{border-color:#638be2}
.player-choice{border-radius:5px}
.player-choice.selected{border-color:#638be2;background:#18243c}
.account-link{color:#d1d1dc;border-bottom:1px solid #2f2f36}
.account-link:hover{color:#adc6ff}
.server-stats>div{border-radius:5px;background:#1b1b1e;border:1px solid var(--line)}
.server-stats span,.server-libraries small,.server-note p,.server-state{color:#b1b1bc}
.server-libraries>div,.server-note{border-color:var(--line)}
.server-note{margin-top:24px}
.toast,.now-playing{background:#1b1d24;border:1px solid #49556f;border-radius:6px}
.method-tag{color:#a9c4ff;border-color:#4a6399;border-radius:4px}
.empty-state{border-color:var(--line);border-radius:6px}
.footer{color:#92929f}
.login-screen{background:radial-gradient(ellipse at 60% 15%,#13213a55,transparent 65%),#080808;padding:35px 0}
.login-art{display:none}
.login-card{background:#121214;border:1px solid #3c3c43;border-radius:6px;padding:38px;box-shadow:0 25px 90px #0006}
.login-card>.brand{margin-bottom:35px;gap:13px}
.login-card .brand-logo{width:32px;height:38px}
.login-card .eyebrow{color:#8eadf7;letter-spacing:1.8px}
.login-card h1{font-size:35px;letter-spacing:-1px}
.login-card .muted,.small-dialog .muted{color:#aaaab5}
.login-card label{font-size:12px;color:#c0c0cc}
.login-card input{background:#1a1a1e;border:1px solid #44444e;border-radius:4px;min-height:43px}
.login-card input:focus{outline:2px solid #709cff;outline-offset:3px;border-color:#709cff}
.login-foot{color:#9a9aa6;font-size:11px;line-height:1.7}
@media(max-width:1050px){.topbar{gap:18px}.topbar .brand-text{font-size:21px}.nav-button{padding:9px 12px}}
@media(max-width:700px){.topbar{gap:12px}.top-nav{gap:4px}.topbar .brand-text{font-size:20px}.topbar .brand-logo{width:23px;height:28px}.nav-button{padding:8px 11px}.login-card{padding:30px 25px}}

/* Minimal centered sign-in, per the user's brand direction. */
.login-card>.brand{justify-content:center;margin-bottom:25px}
.login-card h1{text-align:center;font-size:25px;letter-spacing:-.5px;margin:0 0 25px}
.login-card .button{justify-content:center;text-align:center}
.login-card .error:empty{display:none}

/* Flat scrolling surfaces keep the embedded WebKit software compositor light.
   Retain the poster carousel and small reflections; avoid full-window filters. */
.ambient{display:none}
.topbar{background:#0b0b0b;backdrop-filter:none;-webkit-backdrop-filter:none}
.login-screen{background:#080808}
.login-card,.small-dialog,.server-dialog,.detail-dialog{box-shadow:none}
dialog::backdrop{background:#000b;backdrop-filter:none;-webkit-backdrop-filter:none}
.feature-stage{perspective:none}
.feature-card,.feature-card:hover{filter:none;transition:none}
.feature-m1,.feature-m2,.feature-p1,.feature-p2{transform:translateX(-50%)}
.feature-m1,.feature-p1{opacity:.85}
.feature-m2,.feature-p2{opacity:.65}
.poster-image,.poster-image img,.genre-tile img{transition:none}
.poster-card:hover .poster-image,.poster-card:hover img,.genre-tile:hover img{transform:none}
.poster-card:hover .art-reflection>img{transform:scaleY(-1)}
.section{padding-top:26px;margin-bottom:12px}
.section-heading{margin-bottom:18px}
.section-heading h2{font-weight:600;letter-spacing:-.3px}
.collection-heading h1{font-weight:600}
.nav-button.active{box-shadow:none;background:#1d1d20;border-color:#49494e}
.account-link{padding:14px 0}

/* Studio artwork is contained, with a real name fallback for missing images. */
.studio-identity{display:grid;place-items:center;width:100%;height:62px;position:relative}
.studio-identity img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.studio-identity.has-logo strong{visibility:hidden}
.studio-tile .studio-identity{color:var(--text);letter-spacing:normal;text-transform:none;font-size:inherit}
.studio-tile strong{font-size:18px}

/* Studio thumbnails already contain a complete 16:9 composition. Display that
   composition as the card, rather than shrinking it inside a padded panel. */
.studio-tile{padding:0;gap:0;height:auto;min-height:0;overflow:hidden;background:#101010}
.studio-tile .studio-identity{display:grid;width:100%;height:auto;aspect-ratio:16/9;flex-shrink:0}
.studio-identity img{object-fit:contain;background:#101010}
.studio-identity strong{padding:18px;line-height:1.3}
.studio-tile>span:last-child:not(.studio-identity){display:none}
.studio-tile:hover{background:#171717}

/* Transparent marks share one neutral surface, as in the user's reference. */
.studio-tile,.studio-tile:hover{background:#262626}
.studio-tile .studio-identity{aspect-ratio:1.9}
.studio-identity img{background:transparent;inset:21px 24px;width:calc(100% - 48px);height:calc(100% - 42px);object-fit:contain}

.identity-signin{display:flex;justify-content:center;width:100%;margin-bottom:20px;min-height:43px}

/* Unified catalog and browser playback use the existing flat Kraefik controls. */
.search-card .poster-image{aspect-ratio:2/3;border:1px solid #303036;border-radius:4px;overflow:hidden}.search-card .poster-image img{width:100%;height:100%;object-fit:cover}.availability{display:inline-block;font-size:11px;line-height:1.5;padding:3px 6px;margin-top:8px;border:1px solid #38383e;border-radius:3px;color:#bbb}.availability.available{color:#9ad4b5;border-color:#355246}.catalog-credit{color:#888;font-size:11px;margin:28px 0}.web-player-dialog{width:min(1100px,96vw);max-width:none;max-height:96vh;padding:14px;background:#080808;border:1px solid #38383e;border-radius:5px}.web-player-heading{display:flex;align-items:center;gap:14px;margin-bottom:12px}.web-player-heading h2{font-size:18px;flex:1;margin:0}.web-player-heading span{font-size:12px;color:#aaa}#web-video{display:block;width:100%;max-height:78vh;background:#000;aspect-ratio:16/9}

.search-card h3{margin:8px 0 3px}.search-card .availability{max-width:100%;white-space:nowrap}

/* Browser playback options inherit the current Kraefik palette. */
.web-player-options{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:12px 0 0;color:var(--muted);font-size:12px}
.web-player-options label{display:flex;align-items:center;gap:8px;min-width:0}
.web-player-options select{max-width:min(280px,55vw);min-height:36px;padding:6px 28px 6px 10px;background:var(--surface,var(--panel));border:1px solid var(--line);border-radius:4px;color:var(--text);font-size:12px}
.web-player-options>.button{margin-left:auto;min-height:36px;padding:7px 14px;font-size:12px}