/* Octo Film — OCTO_DESIGN_SYSTEM v1.0, adapted for a TV remote and touch. */
@font-face{font-family:Manrope;src:url('fonts/manrope-cyrillic.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('fonts/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}
:root{color-scheme:light;--bg:#f7f7fc;--surface:#fff;--ink:#181a33;--muted:#555b78;--blue:#5064f7;--line:#e2e4f1;--radius:16px;--octo-soft:#f2f3fa;--octo-brand-soft:#eef0ff;--octo-violet:#7c5cfc;--octo-nav:#171a33;--octo-nav-text:#cbd0e7;--octo-shadow:0 1px 2px rgba(33,35,72,.03),0 12px 36px rgba(53,55,98,.06);font-family:Manrope,Arial,sans-serif;font-variant-numeric:tabular-nums}
html{min-width:320px;min-height:100%;scrollbar-color:#b9bfd5 transparent}
body{min-height:100vh;background:radial-gradient(circle at 1px 1px,rgba(79,82,145,.065) 1px,transparent 1.3px) 0 0/24px 24px,var(--bg);-webkit-font-smoothing:antialiased}
header{background:var(--bg);border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:-1px;gap:10px}
.brand-mark{width:42px;height:42px;flex:none;clip-path:none;border-radius:12px;background:transparent url('octo-film-icon.svg') center/contain no-repeat}
.brand-name{white-space:nowrap}.brand-name em{font-style:normal;color:var(--blue)}
.icon-button{background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink)}
h1,h2,.page-location{font-weight:800;letter-spacing:-.035em}
.eyebrow{font-weight:800;color:var(--blue);letter-spacing:.11em}
.primary,.secondary,.chip,.field,.search-form input,.setting-row select,.ad-switch{border-radius:12px}
.primary{background:var(--blue);color:#fff;font-weight:750}.primary:hover{background:#4052df}.primary:active{background:#3443bd}
.secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:700}.secondary:hover{background:var(--octo-soft);border-color:#ced2e6}
button:disabled{opacity:1;background:#eef0f6!important;color:#9298ad!important;border-color:var(--line)!important}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:650}.chip.selected{background:var(--octo-brand-soft);border-color:#ced2e6;color:var(--blue);font-weight:800}
.field,.search-form input,.setting-row select{background:var(--surface);color:var(--ink);border:1px solid #d4d7e8}
.field::placeholder,.search-form input::placeholder{color:#7c829e}
.tv .account-form input:focus-visible,.tv input:focus,.tv select:focus,input:focus-visible,select:focus-visible{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:0}
.card{background:var(--surface);padding:5px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--octo-shadow)}
.poster{border-radius:12px;background:var(--octo-soft)}
.poster.fallback:before{content:'';width:52%;height:52%;background:url('octo-original.png') center/contain no-repeat;opacity:.2}
.card-title{padding:0 5px;font-weight:750;line-height:1.4}.card-meta{padding:0 5px 7px}
.score{background:var(--octo-nav);color:#fff;border-radius:8px}
.collection-card--text{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.collection-mark{background:var(--octo-brand-soft);color:var(--blue);border-radius:12px}
.collection-card--text .card-title{color:var(--ink)}
.settings-group,.account-panel{border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--octo-shadow)}
.settings-group{padding:20px;margin:0 0 16px}.settings-group h2{color:var(--ink)}
.watch-summary{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:0 16px 16px 0;box-shadow:var(--octo-shadow)}
.account-error{color:#cf3f55}.switch-track{background:#ced2e6}.switch-track:before{background:#fff}
.ad-switch[aria-checked=true] .switch-track:before{background:#fff}
.offline{background:#fff6df;border-color:#f0dbb3;color:#a6650a}
.error{background:#fff0f3;border:1px solid #f0ced5;color:#cf3f55}
.error p{color:#a83246}
.danger{background:#fff0f3;color:#cf3f55;border:1px solid #f0ced5}
.update-banner{background:var(--octo-brand-soft);border-color:#ced2e6;border-radius:16px}
.skeleton{background:linear-gradient(100deg,#eef0f6 20%,#e2e4f1 45%,#eef0f6 70%);background-size:240% 100%;border-radius:16px}
dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 70px rgba(32,31,75,.18);max-height:90vh;overflow:auto}
dialog::backdrop{background:rgba(23,26,51,.72)}dialog p{color:var(--muted)}
#toast{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 36px rgba(53,55,98,.12);border-radius:12px}
.tv{font-size:17px}.tv h2{font-size:21px}.tv .card-title{font-size:17px}.tv .card-meta{font-size:14px}
.tv .primary,.tv .secondary{font-size:17px}.tv .icon-button{width:44px;height:44px}
.tv .card{border:3px solid transparent;border-radius:16px;background:var(--surface)}
.tv .card:focus,.tv .card:focus-visible{border-color:var(--blue);background:var(--octo-brand-soft);outline:none;box-shadow:var(--octo-shadow);transform:none}
.tv.nav-open .rail:not(.collection-rail) .card{width:calc((100% - 42px)/4);flex-basis:calc((100% - 42px)/4)}
.tv.nav-open .grid:not(.collection-grid){grid-template-columns:repeat(4,minmax(0,1fr))}
.tv.nav-open .collection-rail .card{width:calc((100% - 28px)/3);flex-basis:calc((100% - 28px)/3)}
.tv.nav-open .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tv .chip:focus{background:var(--blue);color:#fff;outline-color:var(--blue)}
.tv #sidebar:not([hidden]){color:var(--octo-nav-text);border-right:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 1px 1px,rgba(128,137,175,.14) 1px,transparent 1.3px) 0 0/24px 24px,var(--octo-nav)}
.sidebar-brand{color:#fff;font-size:25px;letter-spacing:-1px;gap:10px}.sidebar-brand .brand-mark{width:42px;height:42px}.sidebar-brand .brand-name em{color:#b9b2ff}
.nav-collapse{background:rgba(255,255,255,.06);color:var(--octo-nav-text);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.nav-item{color:var(--octo-nav-text);font-weight:650;border-radius:12px}
.nav-item[aria-current=page]{background:linear-gradient(135deg,#5064f7,#7c5cfc);color:#fff;box-shadow:none;font-weight:750}
.tv .nav-item:focus,.tv .nav-collapse:focus{background:var(--octo-brand-soft);color:var(--octo-nav);outline:3px solid var(--blue);outline-offset:0;box-shadow:none}
.nav-hint{color:#aab1cd}
.auth-required{background:radial-gradient(circle at 1px 1px,rgba(128,137,175,.16) 1px,transparent 1.3px) 0 0/24px 24px,var(--octo-nav)}
.auth-required main>h1{color:#fff}.auth-brand{display:flex;align-items:center;gap:12px;font-size:30px;letter-spacing:-1px}.auth-brand .brand-mark{width:42px;height:42px}
.auth-required .account-panel{color:var(--ink);background:var(--surface);border-radius:22px}
.auth-required .account-panel .eyebrow{color:var(--blue)}
@media(max-width:600px){.brand{font-size:23px}.brand-mark{width:38px;height:38px}.header-actions{gap:6px}.icon-button{width:44px;height:44px}.settings-group{padding:18px}.auth-brand{font-size:28px}.auth-required main{padding-top:24px}.card-title{font-size:15px}}
@media(max-width:360px){.brand{font-size:21px}.brand-mark{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}