/* Octo Film reference components: dark space, neon focus, luminous actions. */
:root[data-theme=dark]{--bg:#080e25;--surface:#111a3d;--ink:#fff;--muted:#9ca9cf;--blue:#4169ff;--line:rgba(131,159,231,.22);--octo-soft:#0d1533;--octo-brand-soft:#1c2854;--octo-violet:#7546ff;--card-edge:rgba(131,159,231,.26);--accent-violet:#7546ff;--accent-blue:#4169ff;--accent-cyan:#1e9bff;--neon-white:#c8d8ff;--action-gradient:linear-gradient(110deg,#8545ff 0%,#4169ff 60%,#168fff 100%);--card-gradient:linear-gradient(160deg,#0d1533,#111a3d);--icon-surface:rgba(36,42,104,.72);--icon-hover:rgba(59,69,147,.86);--icon-edge:rgba(142,160,255,.24);--control-text:#fff;--quality-good:#168451;--quality-medium:#d97800;--quality-poor:#bd3343;--badge-surface:rgba(7,15,52,.90);--button-edge:rgba(213,225,255,.50);--button-inset:rgba(238,244,255,.4);--glow-blue:rgba(65,105,255,.48);--glow-violet:rgba(117,70,255,.28);--focus-ring:#c8d8ff;--focus-gap:#080e25}
.card,.tv .card,.tv .card:focus,.tv .card:focus-visible,.card:focus-visible,.card:hover{background:var(--card-gradient);box-shadow:inset 0 0 0 1px var(--card-edge),0 8px 20px rgba(0,0,0,.16);color:var(--ink)}
.card .poster{box-shadow:inset 0 0 0 1px var(--card-edge)}
.card .card-title,.tv .card .card-title{padding:0 10px;font-weight:750;margin-top:10px;margin-bottom:5px}
.card .card-meta,.tv .card .card-meta{padding-left:10px;padding-right:10px;padding-bottom:12px;color:var(--muted)}
.score{display:inline-flex;align-items:center;gap:4px;border-radius:10px;background:var(--badge-surface);padding:5px 7px;line-height:1.2;color:var(--ink);font-weight:750}
.score .icon{width:12px;height:12px;filter:drop-shadow(0 0 4px var(--accent-blue))}
.score.quality{border-radius:10px;max-width:calc(100% - 78px);padding:5px 7px}
.score.quality--excellent,.card:focus .quality--excellent{background:var(--quality-good)}
.score.quality--medium,.card:focus .quality--medium{background:var(--quality-medium)}
.score.quality--poor,.card:focus .quality--poor{background:var(--quality-poor)}
.card .badge{left:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 8px;border-radius:10px;background:var(--badge-surface);font-weight:650}
:root[data-theme=dark] .primary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid var(--button-edge);background:var(--action-gradient);color:var(--control-text);box-shadow:inset 0 1px 2px var(--button-inset),0 0 16px var(--glow-violet),0 5px 18px rgba(0,0,0,.2);padding:12px 22px;font-weight:750;transition:transform 180ms ease-out,box-shadow 180ms ease-out,outline-color 180ms ease-out}
:root[data-theme=dark] .primary:not(:disabled):is(:focus,:focus-visible,:hover){background:var(--action-gradient);color:var(--control-text);outline:2px solid var(--neon-white);outline-offset:3px;transform:scale(1.03);z-index:10;box-shadow:inset 0 1px 3px var(--button-inset),0 0 7px var(--accent-blue),0 0 22px var(--glow-blue),0 0 30px var(--glow-violet)}
.primary>.icon{width:20px;height:20px;flex-shrink:0}
:root[data-theme=dark] :is(.secondary,.chip){border-radius:999px}
:root[data-theme=dark] :is(.icon-button,.search-form>button){position:relative;display:inline-flex;align-items:center;justify-content:center;width:52px;min-width:52px;height:52px;min-height:52px;flex:0 0 52px;padding:0;border:1px solid var(--icon-edge);border-radius:50%;background:var(--icon-surface);color:var(--control-text);box-shadow:inset 0 1px 2px rgba(187,201,255,.1),0 5px 14px rgba(0,0,0,.18);transition:transform 180ms ease-out,background 180ms ease-out,box-shadow 180ms ease-out}
:root[data-theme=dark] :is(.icon-button,.search-form>button):not(:disabled):is(:focus,:focus-visible,:hover){background:var(--icon-hover);color:var(--control-text);outline:2px solid var(--neon-white);outline-offset:3px;transform:scale(1.05);z-index:10;box-shadow:0 0 6px var(--accent-blue),0 0 18px var(--glow-violet),inset 0 1px 2px var(--button-inset)}
.search-form>button>.icon,.header-actions .icon{width:24px;height:24px}
.tv .nav-item[aria-current=page]{background:var(--action-gradient);color:var(--control-text);box-shadow:inset 0 1px 2px rgba(240,245,255,.22);font-weight:750}
.tv .nav-item:is(:focus,:focus-visible){background:var(--icon-hover);color:var(--control-text);outline:2px solid var(--neon-white);outline-offset:0;box-shadow:0 0 10px var(--glow-blue)}
.tv .nav-item[aria-current=page]:is(:focus,:focus-visible){background:var(--action-gradient);color:var(--control-text);box-shadow:inset 0 1px 2px var(--button-inset),0 0 12px var(--glow-blue)}
.card:is(:focus,:focus-visible,.is-focused)::after{border:2px solid var(--neon-white)}
@media(max-width:420px){.search-form{gap:8px}:root[data-theme=dark] .search-form>button{width:46px;min-width:46px;height:46px;min-height:46px;flex-basis:46px}}
@media(prefers-reduced-motion:reduce){:root[data-theme=dark] :is(.primary,.icon-button,.search-form>button){transition:none}}
/* Resume cards keep the standard metadata height; progress stays in text only. */
.card .history-card-meta,.tv .card .history-card-meta{white-space:nowrap;min-height:calc(1.4em + 12px)}
.continue-card .card-title,.tv .continue-card .card-title{min-height:37.8px;max-height:37.8px}
/* Override legacy !important multi-line history sizing in the untouched APK baseline. */
.continue-card .history-card-meta{white-space:nowrap!important;min-height:calc(1.4em + 12px)!important}
/* Compact detail facts and the same glass surface as the sidebar profile. */
.detail-head{align-items:flex-start;gap:28px}
.detail-head>div:last-child{min-width:0;flex:1}
.detail-head .detail-original{color:var(--muted);margin:4px 0 10px}
.detail-facts{display:grid;gap:8px;margin:16px 0 0;font-size:14px;line-height:1.45}
.detail-facts>div{display:grid;grid-template-columns:125px minmax(0,1fr);gap:12px}
.detail-facts dt{color:var(--muted)}.detail-facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.watch-summary,.tv .watch-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;margin:22px 0;border:1px solid rgba(173,191,255,.23);border-radius:16px;background:rgba(8,16,43,.66);-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);box-shadow:0 4px 18px rgba(0,0,20,.2),inset 0 1px rgba(225,232,255,.08)}
.watch-summary-info{display:grid;gap:5px}.watch-label{color:var(--muted);font-size:12px}.watch-summary .watch-position{margin:0;font-size:17px;font-weight:600}.watch-summary small{font-size:12px}
.history-remove{flex-shrink:0;color:#ffc6d4;border-color:rgba(231,123,150,.4);background:rgba(77,24,56,.48)}
.catalog-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;margin:20px 0 28px;padding:6px}
.catalog-filters label{display:flex;flex:1 1 140px;min-width:0;flex-direction:column;gap:6px;color:var(--muted);font-size:12px}
.catalog-filters select{width:100%;height:46px;min-width:0;padding:10px 30px 10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-size:14px}
.catalog-filters>button{min-height:46px}.catalog-prompt{margin:18px 0 26px;color:var(--muted)}
.history-filters{display:flex;flex-wrap:wrap;gap:10px;padding:8px;margin:12px -8px 24px;overflow:visible}
.history-filters .chip{display:inline-flex;align-items:center;gap:7px}.history-filters .icon{width:19px;height:19px}
:root[data-theme=dark] .chips .chip:is(:focus,:focus-visible,:hover){outline:2px solid var(--neon-white);outline-offset:-3px;box-shadow:inset 0 0 10px rgba(65,105,255,.35);transform:none}
.catalog-pagination{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 6px 60px;font-size:12px;color:var(--muted)}
.tv[data-screen=section] main,body:not(.tv)[data-screen=section] main{padding-bottom:120px}
/* Focus moves light around the action without changing layout. */
:root[data-theme=dark] :is(.primary,.secondary){position:relative;isolation:isolate;transition:background 180ms ease-out,box-shadow 180ms ease-out,transform 180ms ease-out}
:root[data-theme=dark] :is(.primary,.secondary)::after{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;background:conic-gradient(from var(--neon-angle),#4169ff,#c8d8ff 15%,#635bff 38%,#4169ff 60%,#f5f6ff 75%,#635bff);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;transition:opacity 180ms ease-out}
:root[data-theme=dark] :is(.primary,.secondary):not(:disabled):is(:focus,:focus-visible,:hover)::after{opacity:1;animation:neon-orbit 4s linear infinite}
:root[data-theme=dark] :is(.primary,.secondary):not(:disabled):is(:focus,:focus-visible,:hover){outline:0;transform:translateY(-2px);box-shadow:0 0 7px rgba(65,105,255,.55),0 0 20px rgba(99,91,255,.3),inset 0 1px 2px rgba(238,244,255,.28)}
@media(max-width:600px){.detail-head{gap:16px}.detail-facts>div{grid-template-columns:1fr;gap:2px}.detail-facts{font-size:13px}.watch-summary,.tv .watch-summary{align-items:flex-start;flex-direction:column;padding:14px}.history-remove{font-size:13px}.catalog-filters{gap:10px;padding:4px}.catalog-filters label{flex-basis:calc(50% - 10px)}}
@media(max-width:600px){body:not(.tv) .rail,body:not(.tv) .grid{padding:20px;margin:-20px}body:not(.tv) .score.quality{max-width:calc(100% - 60px);padding:4px 5px;font-size:10px}body:not(.tv) .score{padding:4px 5px;font-size:10px;gap:3px}body:not(.tv) .score .icon{width:10px;height:10px}}
@media(prefers-reduced-motion:reduce){:root[data-theme=dark] :is(.primary,.secondary),:root[data-theme=dark] :is(.primary,.secondary)::after{transition:none;animation:none!important}.card:is(:hover,:focus,:focus-visible,.is-focused),.tv .card:is(:hover,:focus,:focus-visible,.is-focused){transform:none}}