@font-face { font-family: Onest; src: url('/onest-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Onest; src: url('/onest-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* Cabinet primitives are roles over the generated palette (theme.css): no colour of its own. */
:root {
  --cab-menu-bg: var(--surface-control);
  --cab-menu-shadow: 0 18px 56px var(--shade-50);
  color-scheme: dark;
  --cab-ivory: var(--paper);
  --cab-white: var(--white);
  --cab-charcoal: var(--surface-control);
  --cab-purple: var(--brand-purple);
  --cab-purple-deep: color-mix(in srgb,var(--brand-purple) 82%,var(--black));
  --cab-lilac: color-mix(in srgb,var(--brand-purple) 22%,var(--surface-raised));
  --cab-bg: var(--cinema-ground);
  --cab-panel: var(--surface-raised);
  --cab-subtle: var(--surface-sunken);
  --cab-control: var(--surface-control);
  --cab-hover: var(--surface-selected);
  --cab-selected: color-mix(in srgb,var(--rating-top) 18%,var(--surface-control));
  --cab-line: transparent;
  --cab-field-line: transparent;
  --cab-ink: var(--text);
  --cab-secondary: var(--text-2);
  --cab-muted: var(--text-3);
  --cab-accent: var(--accent);
  --cab-accent-hover: color-mix(in srgb,var(--accent) 88%,var(--ink));
  --cab-accent-ink: var(--focus-ink);
  --cab-brand: var(--rating-top);
  --cab-danger: var(--danger-text);
  --cab-danger-surface: color-mix(in srgb,var(--danger-fill) 40%,var(--surface-raised));
  --cab-success: color-mix(in srgb,var(--status-success) 55%,var(--text));
  --cab-radius: 16px;
  --cab-control-radius: 12px;
  --cab-small-radius: 6px;
  --cab-tap: 44px;
  --cab-width: 1240px;
  --cab-gutter: 32px;
  --cab-space-1: 4px; --cab-space-2: 8px; --cab-space-3: 12px; --cab-space-4: 16px;
  --cab-space-5: 20px; --cab-space-6: 24px; --cab-space-8: 32px; --cab-space-10: 40px;
  --cab-space-12: 48px; --cab-space-16: 64px;
  --cab-text-xs: .75rem;
  --cab-text-sm: .875rem;
  --cab-text-base: 1rem;
  --cab-text-lg: 1.125rem;
  --cab-text-xl: 1.5rem;
  --cab-text-title: 2.25rem;
  --cab-duration: 160ms;
  --cab-ease: cubic-bezier(.16,1,.3,1);
  --cab-shadow: 0 32px 100px var(--shade-55);
  font: 16px/1.5 Onest, sans-serif;
  background: var(--cab-bg);
  color: var(--cab-ink);
}

/* Shared select popover. Native values remain the form and filter contract. */
.cab-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--cab-control-radius); background: var(--cab-control); font-size: 1rem; }
.cab-select-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-select-trigger > .icon { width: 18px; height: 18px; color: var(--cab-muted); transition: transform var(--cab-duration) var(--cab-ease); }
.cab-select-trigger[aria-expanded=true] > .icon { transform: rotate(180deg); }
.cab-select-popup { position: fixed; inset: auto; margin: 0; padding: 8px; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: var(--cab-radius); background: var(--cab-menu-bg); color: var(--cab-ink); box-shadow: var(--cab-menu-shadow); scrollbar-gutter: stable; }
.cab-select-popup:popover-open { animation: cab-menu-enter var(--cab-duration) var(--cab-ease); }
@media (max-width:599px) { .cab-select-popup { padding-bottom: max(8px,env(safe-area-inset-bottom)); } }
.cab-select-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 4px 10px; }
.cab-select-heading > strong { font-size: var(--cab-text-sm); font-weight: 550; color: var(--cab-secondary); }
.cab-select-close, .cab-decade-step { display: grid; place-items: center; width: var(--cab-tap); height: var(--cab-tap); flex: none; border-radius: var(--cab-control-radius); }
.cab-select-close .icon { width: 18px; height: 18px; }
.cab-select-options { display: grid; gap: 4px; }
.cab-select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--cab-tap); padding: 11px 12px; border-radius: 9px; font-size: var(--cab-text-sm); line-height: 1.4; }
.cab-select-option .icon { width: 18px; height: 18px; color: var(--cab-brand); }
.cab-select-option[aria-selected=true], .cab-select-option[aria-pressed=true] { background: var(--cab-selected); color: var(--cab-brand); }
.cab-select-option:focus-visible { outline: 2px solid var(--cab-brand); outline-offset: -2px; }
.cab-select-search { position: relative; margin: 0 4px 8px; }
.cab-select-search > .icon { position: absolute; width: 18px; height: 18px; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cab-muted); pointer-events: none; }
.cab-select-search input { width: 100%; min-height: 44px; padding: 10px 12px 10px 38px; border: 0; border-radius: 9px; background: var(--cab-subtle); color: var(--cab-ink); font-size: 1rem; }
.cab-select-search input::placeholder { color: var(--cab-muted); }
.cab-select-empty { padding: 16px 12px; color: var(--cab-muted); font-size: var(--cab-text-sm); }
.cab-year-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.cab-year-nav strong { font-size: var(--cab-text-sm); font-weight: 550; font-variant-numeric: tabular-nums; }
.cab-year-grid { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0 4px; }
.cab-year-grid .cab-select-option { justify-content: center; padding-inline: 4px; font-variant-numeric: tabular-nums; }
.cab-year-grid .cab-select-empty { grid-column: 1 / -1; }
.cab-select-any { display: block; width: calc(100% - 8px); min-height: var(--cab-tap); margin: 8px 4px 4px; padding: 10px; border-radius: 9px; background: var(--cab-control); text-align: center; font-size: var(--cab-text-sm); }
.cab-select-any[aria-pressed=true] { color: var(--cab-brand); background: var(--cab-selected); }
@media (hover:hover) {
  .cab-select-trigger:hover, .cab-select-option:hover, .cab-select-close:hover, .cab-decade-step:hover, .cab-select-any:hover { background: var(--cab-hover); }
}
@keyframes cab-menu-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion:reduce) { .cab-select-popup:popover-open { animation: none; } .cab-select-trigger > .icon { transition: none; } }
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--surface-selected) transparent; }
html { scrollbar-gutter: stable; }
body { margin: 0; min-width: 320px; background: var(--cab-bg); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { appearance: none; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: inherit; }
button, a { touch-action: manipulation; }
button:disabled, input:disabled, select:disabled { cursor: default; opacity: .48; }
a { color: inherit; text-underline-offset: 4px; }
h1, h2, h3, p, dl, dd, dt, ul, ol, li, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: var(--cab-text-title); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
h2 { font-size: var(--cab-text-xl); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
h3 { font-size: var(--cab-text-lg); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb,var(--brand-purple) 55%,var(--surface-control)); color: var(--white); }
:focus-visible { outline: 2px solid var(--cab-accent); outline-offset: 3px; }
#page-heading:focus, #content:focus { outline: 0; }
input, textarea { caret-color: var(--cab-accent); }
.num { font-variant-numeric: tabular-nums; }
.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; }
.skip { position: fixed; top: -100px; left: 12px; z-index: 80; padding: 12px 18px; background: var(--cab-accent); color: var(--cab-accent-ink); border-radius: var(--cab-control-radius); }
.skip:focus { top: 12px; }
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.muted, .note { color: var(--cab-muted); }
.note { font-size: var(--cab-text-sm); line-height: 1.6; }
.dim { opacity: .6; }
.brand { display: inline-flex; align-items: center; gap: 7px; width: fit-content; text-decoration: none; flex: none; }
.brand-mark { display: block; width: 36px; height: 28px; object-fit: contain; }
.wordmark { font-size: 27px; line-height: 1; font-weight: 750; letter-spacing: -.04em; }

/* One action and form vocabulary across every page and dialog. */
.btn { min-height: var(--cab-tap); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border: 1px solid transparent; border-radius: var(--cab-control-radius); background: var(--cab-control); color: var(--cab-ink); font-size: var(--cab-text-sm); font-weight: 550; text-align: center; text-decoration: none; line-height: 1.4; transition: background var(--cab-duration), color var(--cab-duration); }
.btn.primary { background: var(--cab-accent); color: var(--cab-accent-ink); }
.btn.quiet { background: transparent; color: var(--cab-secondary); }
.btn.danger, .danger { color: var(--cab-danger); }
.btn:active:not(:disabled) { background: var(--cab-hover); }
.btn.primary:active:not(:disabled) { background: var(--cab-accent-hover); }
.btn-icon { width: var(--cab-tap); padding: 10px; flex: none; }
.btn .icon { width: 19px; height: 19px; }
.btn.wide, .wide.btn { width: 100%; }
.text-action { padding-left: 0; padding-right: 0; justify-content: flex-start; }
.text-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 44px; padding: 0; border: 0; background: transparent; text-decoration: none; font-size: var(--cab-text-sm); font-weight: 500; color: var(--cab-brand); }
.text-link .icon { width: 16px; height: 16px; }
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stack { margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: var(--cab-text-sm); }
.field > span:first-child { font-weight: 550; }
.field > span:last-child:not(:first-child) { color: var(--cab-muted); font-size: var(--cab-text-xs); }
.field input, .field select, .field textarea, .setting-input { display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 12px 14px; background: var(--cab-panel); border: 1px solid var(--cab-field-line); border-radius: var(--cab-control-radius); font-size: 1rem; line-height: 1.4; outline-offset: 3px; }
.field input::placeholder, .field textarea::placeholder, .setting-input::placeholder { color: var(--cab-muted); opacity: 1; }
.field input[aria-invalid=true], .field select[aria-invalid=true], .setting-input[aria-invalid=true] { border-color: var(--cab-danger); }
.field select { padding-right: 32px; }
.field textarea { resize: vertical; }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 16px; }
.switch { position: relative; display: inline-block; width: 44px; height: 44px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 10px 0; background: var(--line-strong); border-radius: 999px; transition: background var(--cab-duration); }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: transform var(--cab-duration) var(--cab-ease); }
.switch input:checked + i { background: color-mix(in srgb,var(--brand-purple) 70%,var(--white)); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--cab-brand); outline-offset: 3px; }
.switch input:disabled + i { opacity: .45; }

/* Navigation remains available without taking over the content. */
.shell { min-height: 100svh; display: flex; flex-direction: column; }
.topbar, .main, .workspace-footer { width: min(var(--cab-width),calc(100% - var(--cab-gutter) * 2)); margin-right: auto; margin-left: auto; }
.topbar { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--cab-line); }
.desktop-nav, #desktop-nav { display: flex; align-items: center; gap: 4px; }
.nav-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: var(--cab-control-radius); text-decoration: none; color: var(--cab-secondary); font-size: var(--cab-text-sm); font-weight: 500; transition: background var(--cab-duration),color var(--cab-duration); }
.nav-link.active { color: var(--cab-brand); background: var(--cab-lilac); }
.nav-link .icon { width: 20px; height: 20px; }
.desktop-nav .nav-link .icon { display: none; }
.header-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.header-search { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--cab-control-radius); }
.account-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 12px; border-radius: var(--cab-control-radius); font-size: var(--cab-text-sm); color: var(--cab-secondary); }
.account-trigger > .icon { width: 20px; height: 20px; }
.account-trigger > span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 44px; padding: 5px 10px 5px 5px; border: 1px solid var(--cab-line); border-radius: 999px; background: var(--cab-panel); text-decoration: none; }
.who .avatar { width: 32px; height: 32px; }
.who > .icon { width: 15px; height: 15px; color: var(--cab-muted); }
.who > span:not(.avatar) { min-width: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cab-text-sm); font-weight: 500; }
.workspace { width: 100%; min-width: 0; flex: 1; display: flex; flex-direction: column; }
.main { min-width: 0; flex: 1; padding-top: 40px; padding-bottom: 64px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading > div:first-child { min-width: 0; }
.page-heading p { color: var(--cab-muted); margin-top: 8px; max-width: 62ch; font-size: var(--cab-text-sm); }
.heading-actions { flex: none; }
.heading-actions .btn { white-space: nowrap; }
.page-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0 16px; color: var(--cab-muted); font-size: var(--cab-text-sm); text-decoration: none; }
.page-back .icon { width: 18px; height: 18px; }
.workspace-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid var(--cab-line); color: var(--cab-muted); font-size: var(--cab-text-xs); }
.workspace-footer a { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.workspace-footer .icon { width: 13px; height: 13px; }
.mobile-nav { display: none; }
.preview-notice { background: var(--cab-lilac); color: var(--cab-brand); padding: 6px 12px; font-size: var(--cab-text-xs); text-align: center; }

/* The home screen is the account's device list. Entire devices are actionable. */
.device-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.device-card { display: flex; align-items: center; gap: 20px; width: 100%; min-width: 0; min-height: 112px; padding: 22px; border: 1px solid var(--cab-line); border-radius: var(--cab-radius); background: var(--cab-panel); text-align: left; transition: background var(--cab-duration),border-color var(--cab-duration); }
.device-visual { display: grid; place-items: center; width: 72px; height: 64px; flex: none; border-radius: 12px; background: var(--cab-subtle); color: var(--cab-secondary); }
.device-visual .icon { width: 46px; height: 38px; stroke-width: 1.4; }
.device-copy { display: grid; flex: 1; min-width: 0; gap: 5px; }
.device-copy > b { font-size: 1rem; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.device-copy > small { font-size: var(--cab-text-xs); color: var(--cab-muted); line-height: 1.5; }
.device-card > .icon { width: 18px; height: 18px; color: var(--cab-muted); }
.device-limit { margin-bottom: 20px; padding: 14px 18px; border-radius: var(--cab-control-radius); background: var(--cab-subtle); color: var(--cab-secondary); font-size: var(--cab-text-sm); }
.device-onboarding { display: flex; align-items: center; gap: 32px; padding: 36px 40px; background: var(--cab-panel); border: 1px solid var(--cab-line); border-radius: var(--cab-radius); }
.onboarding-visual { display: grid; place-items: center; width: 112px; height: 96px; flex: none; color: var(--cab-secondary); }
.onboarding-visual .icon { width: 96px; height: 80px; stroke-width: 1.1; }
.onboarding-copy { min-width: 0; }
.onboarding-copy h2 { font-size: 1.5rem; }
.onboarding-copy p { max-width: 52ch; margin-top: 8px; font-size: var(--cab-text-sm); color: var(--cab-muted); }
.onboarding-copy .actions { margin-top: 24px; }
.device-help { margin-top: 12px; font-size: var(--cab-text-sm); }
.device-help a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cab-secondary); text-underline-offset: 4px; }
.device-help .icon { width: 16px; height: 16px; }
.home-profile-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--cab-line); }
.home-profile-line > span { flex: 1; color: var(--cab-muted); font-size: var(--cab-text-sm); }
.home-profile-line > .text-link { margin-left: auto; flex: none; }
.inline-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 16px 20px; border-radius: var(--cab-control-radius); background: var(--cab-subtle); color: var(--cab-secondary); font-size: var(--cab-text-sm); }
.import-shortcut, .install-shortcut { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0; font-size: var(--cab-text-sm); color: var(--cab-brand); text-underline-offset: 4px; }
.import-shortcut .icon, .install-shortcut .icon { width: 17px; height: 17px; }
.list-footnote { margin-top: 16px; color: var(--cab-muted); font-size: var(--cab-text-xs); }

/* Profile creation has its own variant, without avatar-upload selector collisions. */
.profile-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.profile-card { position: relative; display: flex; align-items: center; flex-direction: column; gap: 14px; min-width: 0; padding: 28px 20px 24px; border: 1px solid var(--cab-line); border-radius: var(--cab-radius); background: var(--cab-panel); color: var(--cab-ink); text-align: center; transition: background var(--cab-duration),border-color var(--cab-duration); }
.profile-card > .avatar { width: 88px; height: 88px; }
.profile-info { display: grid; gap: 5px; min-width: 0; }
.profile-info > b { font-size: 1rem; font-weight: 550; overflow-wrap: anywhere; }
.profile-info > small { font-size: var(--cab-text-xs); color: var(--cab-muted); }
.profile-edit { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 24px; height: 24px; color: var(--cab-muted); }
.profile-edit .icon { width: 17px; height: 17px; }
.profile-create { justify-content: center; background: transparent; border-style: dashed; }
.profile-create > .avatar { display: grid; place-items: center; overflow: visible; background: var(--cab-control); color: var(--cab-secondary); }
.profile-create > .avatar::after { display: none; }
.profile-create > .avatar > .icon { width: 28px; height: 28px; }
.avatar { position: relative; display: inline-block; flex: none; width: 40px; height: 40px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: var(--cab-control); vertical-align: middle; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.blank::after, .avatar:empty::after { content: attr(data-letter); position: absolute; inset: 0; display: grid; place-items: center; color: var(--cab-secondary); font-size: 24px; font-weight: 550; }
.avatars { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 5px; }
.avatars button.avatar { width: 64px; height: 64px; }
.avatars button.avatar[aria-pressed=true] { outline: 2px solid var(--cab-brand); outline-offset: 3px; }
.avatar-slot { position: relative; display: inline-flex; padding-top: 8px; padding-right: 8px; }
.avatar-slot .avatar-remove { position: absolute; right: -8px; top: -8px; width: 44px; min-height: 44px; padding: 13px; border-radius: 50%; background: var(--cab-control); }
.avatar-remove .icon { width: 16px; height: 16px; }
.avatar-upload { border-radius: var(--cab-radius); background: var(--cab-control); transition: background var(--cab-duration); }
.avatar-upload.is-dragging { background: var(--cab-selected); outline: 2px solid var(--cab-brand); outline-offset: 3px; }
.avatar-upload-button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px; border-radius: inherit; }
.avatar-upload-button > .avatar { width: 56px; height: 56px; }
.avatar-upload-button > span:nth-child(2) { display: grid; gap: 5px; flex: 1; min-width: 0; }
.avatar-upload-button b { font-size: var(--cab-text-sm); font-weight: 550; }
.avatar-upload-button small { font-size: var(--cab-text-xs); color: var(--cab-muted); }
.avatar-upload-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--cab-secondary); }
.avatar-collection { display: grid; gap: 16px; }
.avatar-collection h3 { font-size: var(--cab-text-sm); font-weight: 500; color: var(--cab-secondary); }
.avatar-collection .avatars { display: grid; grid-template-columns: repeat(auto-fill,minmax(64px,1fr)); justify-items: center; gap: 20px 12px; }
.avatar-collection .avatar-slot { padding: 0; }
.avatar-editor { display: grid; justify-items: center; gap: 16px; padding-top: 8px; }
#avatar-crop { display: block; width: min(280px,100%); height: auto; aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab; background: var(--cab-control); box-shadow: 0 16px 40px var(--shade-34); }
#avatar-crop:active { cursor: grabbing; }
.avatar-crop-hint { font-size: var(--cab-text-xs); color: var(--cab-muted); text-align: center; }
.avatar-zoom { display: grid; grid-template-columns: auto minmax(60px,1fr) 44px; align-items: center; gap: 14px; width: min(360px,100%); font-size: var(--cab-text-xs); color: var(--cab-secondary); }
.avatar-zoom input { width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: var(--cab-brand); cursor: pointer; }
.avatar-zoom output { text-align: right; font-variant-numeric: tabular-nums; }

/* Grouped settings support long names and values without squeezing their controls. */
.group { margin-bottom: 28px; }
.group:last-child { margin-bottom: 0; }
.group-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.group-head h2 { font-size: var(--cab-text-lg); }
.group-head .kicker { font-size: var(--cab-text-xs); color: var(--cab-muted); }
.group > .note { margin-top: 12px; }
.rows { background: var(--cab-panel); border-radius: var(--cab-radius); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-width: 0; min-height: 72px; padding: 16px 20px; border: 0; border-radius: var(--cab-control-radius); background: transparent; color: var(--cab-ink); text-align: left; transition: background var(--cab-duration); }
.row + .row { border-top: 1px solid var(--cab-line); }
.row-copy { display: grid; flex: 1; min-width: 0; gap: 5px; }
.row-copy > b { font-size: var(--cab-text-sm); font-weight: 550; overflow-wrap: anywhere; }
.row-copy > small { font-size: var(--cab-text-xs); color: var(--cab-muted); line-height: 1.5; max-width: 50ch; overflow-wrap: anywhere; }
.row-value { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 48%; font-size: var(--cab-text-sm); color: var(--cab-muted); text-align: right; overflow-wrap: anywhere; }
.row-value > .icon { width: 17px; height: 17px; }
.row.danger .row-copy > b { color: var(--cab-danger); }
.picked { color: var(--cab-brand); }
.settings-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,1fr); gap: 28px; align-items: start; }
.settings-content, .help-content, .preference-menu { max-width: 780px; display: grid; gap: 24px; min-width: 0; }
.settings-content .group, .preference-menu .group { margin: 0; }
.section-note { margin-top: 24px; }
.account-content { display: grid; gap: 24px; max-width: 780px; }
.account-identity { display: flex; align-items: center; gap: 16px; min-width: 0; margin-bottom: 28px; }
.account-content .account-identity { margin-bottom: 0; }
.account-identity > div { min-width: 0; }
.account-identity .avatar { width: 64px; height: 64px; }
.account-identity h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.account-identity p { color: var(--cab-muted); font-size: var(--cab-text-sm); margin-top: 4px; overflow-wrap: anywhere; }
.account-avatar { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--cab-control); color: var(--cab-secondary); font-size: 1.5rem; }
.account-avatar .icon { width: 28px; height: 28px; }
.logout-action { justify-self: start; color: var(--cab-danger); }

/* Library cards open details; management actions live with the selected film. */
.library-content, .search-content { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; min-width: 0; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.library-toolbar .chips { min-width: 0; }
.chips.library-tabs { padding: 5px; background: var(--cab-panel); border-radius: var(--cab-radius); }
.library-tabs .chip { min-height: 42px; }
.library-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 360px; padding: 48px 24px; text-align: center; border-radius: var(--cab-radius); background: var(--cab-panel); }
.library-empty-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--cab-control); color: var(--cab-secondary); }
.library-empty-mark .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.library-empty h3 { font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
.library-empty p { max-width: 32ch; margin: 10px auto 0; color: var(--cab-muted); font-size: var(--cab-text-sm); }
.library-empty .btn { padding-right: 24px; padding-left: 24px; }
.library-skeleton > div { display: grid; gap: 14px; }
.library-skeleton .skeleton:first-child { aspect-ratio: 2/3; height: auto; border-radius: 10px; }
.library-skeleton .skeleton:last-child { width: 70%; height: 14px; }
.search-shortcut { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; color: var(--cab-brand); text-decoration: none; font-size: var(--cab-text-sm); }
.chips { display: flex; align-items: center; gap: 6px; max-width: 100%; overflow-x: auto; padding: 4px 2px 8px; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--cab-control-radius); background: transparent; color: var(--cab-secondary); font-size: var(--cab-text-sm); font-weight: 500; white-space: nowrap; }
.chip[aria-pressed=true] { color: var(--cab-brand); background: var(--cab-lilac); }
.chips-folders { gap: 8px; padding-bottom: 4px; }
.chip-folder { border-color: var(--cab-line); border-radius: 999px; padding: 9px 14px; font-size: var(--cab-text-xs); }
.chip-folder[aria-pressed=true] { border-color: var(--cab-accent); }
.chip-add { min-width: 44px; padding: 0; }
.chip-add .icon { width: 18px; height: 18px; }
.folder-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.count { font-size: var(--cab-text-xs); color: var(--cab-muted); }
.count:empty { display: none; }
.entries { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 28px 20px; min-width: 0; }
.entry { display: flex; flex-direction: column; align-self: start; gap: 10px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--cab-ink); text-align: left; }
.entry-main { display: grid; align-content: start; gap: 10px; width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; border-radius: 10px; text-align: left; }
.entry-art { display: block; position: relative; border-radius: 10px; overflow: hidden; }
.entry-art > .bar { position: absolute; bottom: 12px; left: 12px; right: 12px; height: 3px; background: var(--episode-progress-track); box-shadow: 0 1px 4px var(--shade-50); }
.entry-progress { position: absolute; bottom: 26px; left: 12px; max-width: calc(100% - 24px); padding: 5px 8px; border-radius: 6px; background: var(--scrim-88); color: var(--cab-ink); font-size: 11px; }
.entry-poster img { transition: transform 220ms var(--cab-ease); }
.entry-tap { width: 100%; border-radius: 10px; }
.entry-body { display: grid; gap: 6px; min-width: 0; width: 100%; }
.entry-body > b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--cab-text-sm); font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; }
.entry-body > small { color: var(--cab-muted); font-size: var(--cab-text-xs); line-height: 1.5; }
.entry-body .entry-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cab-secondary); }
.entry-tap > .entry-actions { display: none; }
.poster { display: block; position: relative; overflow: hidden; border-radius: 10px; background: var(--cab-control); flex: none; }
.entry-poster { width: 100%; height: auto; aspect-ratio: 2/3; }
.poster img { width: 100%; height: 100%; display: block; object-fit: cover; }
.poster.blank::after { content: attr(data-letter); position: absolute; inset: 0; display: grid; place-items: center; color: var(--cab-muted); font-size: 36px; }
.bar { height: 3px; border-radius: 999px; overflow: hidden; background: var(--cab-control); }
.bar > i { display: block; height: 100%; width: 0; background: var(--cab-accent); border-radius: 999px; }
.bar.wide { height: 6px; }
.more { margin-top: 24px; }
.more .btn { max-width: 320px; }
.search-field { position: relative; }
.search-field > .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: block; color: var(--cab-muted); pointer-events: none; }
.search-field > .setting-input { padding-left: 48px; min-height: 52px; }
.search-help { margin-top: 10px; font-size: var(--cab-text-xs); color: var(--cab-muted); }
.entry-detail { display: grid; gap: 24px; }
.entry-detail-head { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.entry-detail-head > div { display: grid; min-width: 0; gap: 10px; }
.entry-detail-head h3 { font-size: 1.25rem; }
.entry-detail-head p { font-size: var(--cab-text-sm); color: var(--cab-muted); }
.entry-options-row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.entry-options-row > .btn { justify-content: flex-start; }
.card-hero { position: relative; border-radius: var(--cab-radius); overflow: hidden; background: var(--cab-subtle); }
.card-art { display: none; }
.card-head { position: relative; display: flex; align-items: flex-start; gap: 20px; padding: 20px; }
.card-poster { width: 104px; height: 156px; }
.card-copy { display: grid; gap: 10px; min-width: 0; }
.card-copy h3 { font-size: 1.25rem; line-height: 1.3; }
.card-original, .card-genres { font-size: var(--cab-text-sm); color: var(--cab-muted); }
.card-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact { font-size: var(--cab-text-xs); padding: 4px 8px; border-radius: var(--cab-small-radius); background: var(--cab-control); color: var(--cab-secondary); }
.fact-rating { color: var(--cab-brand); }
.card-text { font-size: var(--cab-text-sm); line-height: 1.75; color: var(--cab-secondary); }

/* Messages sit beside the action; empty views leave room for the next step. */
.status { font-size: var(--cab-text-sm); color: var(--cab-secondary); line-height: 1.55; overflow-wrap: anywhere; }
.status:empty { display: none; }
.status.error { color: var(--cab-danger); }
.status.done { color: var(--cab-success); }
#panel-status:not(:empty) { padding: 14px 18px; border-radius: var(--cab-control-radius); background: var(--cab-panel); margin-bottom: 24px; }
#panel-status.error { background: var(--cab-danger-surface); }
.banner { background: var(--cab-subtle); color: var(--cab-secondary); padding: 16px 20px; border-radius: var(--cab-control-radius); font-size: var(--cab-text-sm); margin-bottom: 20px; overflow-wrap: anywhere; }
.banner.error { background: var(--cab-danger-surface); color: var(--cab-danger); }
.empty { padding: 40px 20px; color: var(--cab-muted); text-align: center; }
.empty > strong { display: block; color: var(--cab-ink); font-size: 1.25rem; font-weight: 550; margin-bottom: 8px; letter-spacing: -.02em; }
.empty > p { max-width: 46ch; margin: 0 auto; font-size: var(--cab-text-sm); }
.empty > h3 { margin-bottom: 8px; color: var(--cab-ink); }
.empty > .btn { margin-top: 20px; }
.empty + .actions { justify-content: center; margin-top: -16px; }
.loading { padding: 32px; color: var(--cab-muted); text-align: center; }
.skeleton { background: var(--cab-control); border-radius: var(--cab-control-radius); animation: loading-pulse 1.6s ease-in-out infinite; }
.loading-skeleton { display: grid; gap: 14px; padding: 16px 0; }
.loading-skeleton > .skeleton { height: 92px; }
.loading-skeleton > .skeleton:nth-child(2) { opacity: .7; }
.loading-skeleton > .skeleton:nth-child(3) { opacity: .4; }

/* Dialogs protect focus while their body scrolls independently. */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim-45); }
.sheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 61; width: min(560px,calc(100vw - 48px)); max-height: calc(100svh - 64px); display: flex; flex-direction: column; padding: 28px; background: var(--cab-panel); border-radius: var(--cab-radius); box-shadow: var(--cab-shadow); animation: dialog-in 180ms var(--cab-ease); }
.sheet-wide { width: min(740px,calc(100vw - 48px)); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 16px; margin-bottom: 20px; }
.sheet-head h2 { flex: 1; font-size: 1.25rem; min-width: 0; }
.sheet-head > .btn { margin: -8px -8px -8px 0; }
.sheet-head > .sheet-back { width: 44px; min-height: 44px; flex: none; margin: -8px 0 -8px -8px; padding: 10px; }
.sheet-note { flex: none; font-size: var(--cab-text-sm); color: var(--cab-muted); margin-bottom: 20px; }
.sheet-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 20px; min-height: 0; padding: 5px; margin: -5px; }
.sheet-body > * { flex: none; min-width: 0; max-width: 100%; }
.sheet-body .group { margin-bottom: 0; }
.sheet-body .rows { background: var(--cab-subtle); }
.sheet-body .entries { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sheet-foot { display: flex; flex: none; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
#sheet-status { flex: none; }
#sheet-status:not(:empty) { margin-top: 16px; }
@keyframes dialog-in { from { transform: translate(-50%,calc(-50% + 8px)); } to { transform: translate(-50%,-50%); } }

/* Pairing keeps its code and next action in one readable column. */
#panel > .text-action { margin-top: -16px; margin-bottom: 20px; }
.connect-focus, .connect-layout { display: grid; gap: 24px; width: 100%; max-width: 640px; margin: 0 auto; }
.connect-focus > header p { margin-top: 10px; color: var(--cab-muted); font-size: var(--cab-text-sm); }
.pair-panel { width: 100%; padding: 28px; background: var(--cab-panel); border: 1px solid var(--cab-line); border-radius: var(--cab-radius); text-align: center; }
.pair-panel h2 { color: var(--cab-secondary); font-size: 1rem; font-weight: 500; }
.pair-code { display: flex; flex-wrap: nowrap; justify-content: center; gap: 16px; font-size: 2.75rem; font-weight: 600; letter-spacing: .08em; line-height: 1.2; margin: 28px 0 12px; user-select: all; font-variant-numeric: tabular-nums; }
.pair-time { font-size: var(--cab-text-sm); color: var(--cab-muted); }
.waiting-status { display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--cab-brand); font-size: var(--cab-text-sm); margin: 20px 0; }
.waiting-status .icon { width: 18px; height: 18px; animation: loading-turn 1.2s linear infinite; }
.pair-panel > .actions { justify-content: center; margin-top: 20px; }
.pair-panel > .note { max-width: 42ch; margin: 20px auto 0; font-size: var(--cab-text-xs); }
.pair-panel > .muted { margin-top: 24px; font-size: var(--cab-text-sm); }
.code-skeleton { height: 56px; margin: 28px 0; }
.connect-steps h2 { margin-bottom: 16px; font-size: var(--cab-text-lg); }
.connect-steps ol { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 20px; }
.connect-steps li { counter-increment: step; position: relative; padding-left: 36px; }
.connect-steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 24px; height: 24px; display: grid; place-items: center; background: var(--cab-control); border-radius: 50%; font-size: var(--cab-text-xs); color: var(--cab-secondary); }
.connect-steps li > b { font-size: var(--cab-text-sm); font-weight: 550; }
.connect-steps li > p { font-size: var(--cab-text-sm); color: var(--cab-muted); margin-top: 5px; }
.connect-steps .help-disclosure { margin-top: 20px; }
.connection-success { max-width: 600px; padding: 28px; background: var(--cab-panel); border-radius: var(--cab-radius); display: grid; justify-items: start; gap: 20px; }
.connection-success > .icon { width: 36px; height: 36px; color: var(--cab-success); }
.connection-success h2 { font-size: 1.25rem; }
.connection-success p { color: var(--cab-secondary); font-size: var(--cab-text-sm); }
.help-disclosure { border-bottom: 1px solid var(--cab-line); padding: 12px 0; }
.help-disclosure summary { cursor: pointer; font-size: var(--cab-text-sm); font-weight: 500; min-height: 44px; padding: 10px 0; }
.help-disclosure p, .help-disclosure ol, #code-location { font-size: var(--cab-text-sm); color: var(--cab-muted); margin-top: 12px; line-height: 1.65; }
.help-disclosure ol { padding-left: 20px; }
.help-disclosure li + li { margin-top: 8px; }
.help-contact { display: flex; align-items: center; gap: 20px; margin-top: 12px; font-size: var(--cab-text-sm); color: var(--cab-muted); }
.import-prompt { margin-bottom: 24px; padding: 16px 20px; background: var(--cab-subtle); border-radius: var(--cab-radius); font-size: var(--cab-text-sm); }
.import-prompt summary { cursor: pointer; min-height: 44px; padding: 10px 0; }
.import-prompt p { margin: 16px 0; color: var(--cab-muted); max-width: 56ch; }

/* Sign-in is a short task, not a second landing page. */
.gate-layout { width: min(var(--cab-width),calc(100% - var(--cab-gutter) * 2)); min-height: 100svh; margin: 0 auto; display: flex; flex-direction: column; }
.gate-header { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 24px; }
.gate-main { width: min(440px,100%); margin: auto; padding: 48px 0 64px; }
.sign-in { padding: 32px; background: var(--cab-panel); border: 1px solid var(--cab-line); border-radius: var(--cab-radius); }
.sign-in > h1 { font-size: 1.75rem; margin-bottom: 28px; }
.sign-in > h2 { font-size: 1.5rem; }
.sign-in > .muted, .sign-in > p:not(.status) { font-size: var(--cab-text-sm); color: var(--cab-muted); margin-top: 12px; margin-bottom: 24px; line-height: 1.6; }
.telegram-door .note { margin-top: 12px; font-size: var(--cab-text-xs); }
#door-tg { display: grid; gap: 8px; }
#tg-status:not(:empty) { margin-top: 14px; }
.separator { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--cab-muted); font-size: var(--cab-text-xs); }
.separator::before, .separator::after { content: ''; height: 1px; background: var(--cab-line); flex: 1; }
.gate-form { display: grid; gap: 16px; margin-top: 20px; }
.gate-form .code-input { font-size: 1.25rem; letter-spacing: .15em; height: 52px; text-align: center; text-transform: uppercase; }
.sign-in .help-disclosure { margin-top: 16px; border: 0; padding: 0; }
.sign-in .help-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--cab-secondary); font-size: 13px; list-style: none; }
.sign-in .help-disclosure summary::-webkit-details-marker { display: none; }
.sign-in .help-disclosure summary > .icon { width: 16px; height: 16px; flex: none; transition: transform var(--cab-duration); }
.sign-in .help-disclosure[open] summary > .icon { transform: rotate(90deg); }
.gate-footer { padding: 24px 0; display: flex; gap: 20px; justify-content: space-between; color: var(--cab-muted); font-size: var(--cab-text-xs); }
.page.boot { min-height: 100svh; display: grid; place-content: center; padding: 32px; }
.boot-line { color: var(--cab-muted); font-size: var(--cab-text-sm); }
.page.boot { justify-items: center; gap: 18px; text-align: center; }
.boot-mark { display: block; width: 64px; height: 48px; object-fit: contain; margin-bottom: 6px; }
.boot-spinner, .status.is-pending::before { display: inline-block; width: 24px; height: 24px; border: 2px solid var(--cab-line); border-top-color: var(--cab-accent); border-radius: 50%; animation: loading-turn .85s linear infinite; flex: none; }
.status.is-pending { display: flex; align-items: center; gap: 10px; }
.status.is-pending::before { content: ''; width: 16px; height: 16px; }
.boot-retry { margin-top: 4px; color: var(--cab-muted); }
.boot-failed h1 { font-size: 24px; max-width: 24ch; }
.boot-failed .btn { margin-top: 6px; }
@keyframes loading-turn { to { transform: rotate(360deg); } }
@keyframes loading-pulse { 50% { opacity: .45; } }
noscript { max-width: 50ch; font-size: var(--cab-text-sm); }

@media (hover: hover) {
  .avatar-upload:hover { background: var(--cab-hover); }
  .entry-main:hover .entry-poster img { transform: scale(1.025); }
  .btn:hover:not(:disabled) { background: var(--cab-hover); }
  .btn.primary:hover:not(:disabled) { background: var(--cab-accent-hover); }
  .btn.quiet:hover:not(:disabled) { background: var(--cab-subtle); color: var(--cab-ink); }
  .btn.quiet.danger:hover:not(:disabled) { background: var(--cab-danger-surface); color: var(--cab-danger); }
  .nav-link:hover, .header-search:hover, .account-trigger:hover, .who:hover { background: var(--cab-subtle); color: var(--cab-ink); }
  .nav-link.active:hover { background: var(--cab-lilac); color: var(--cab-brand); }
  .device-card:hover, .profile-card:hover { background: var(--cab-subtle); border-color: var(--cab-field-line); }
  button.row:hover { background: var(--cab-subtle); }
  .sheet-body button.row:hover { background: var(--cab-hover); }
  .chip:hover { color: var(--cab-ink); background: var(--cab-subtle); }
  .chip[aria-pressed=true]:hover { color: var(--cab-brand); background: var(--cab-lilac); }
  .entry-tap:hover .entry-body > b, .entry-main:hover .entry-body > b { color: var(--cab-brand); }
  .text-link:hover, .page-back:hover, .device-help a:hover, .workspace-footer a:hover { text-decoration: underline; }
}
@media (max-width: 1000px) {
  .topbar { gap: 16px; }
  .nav-link { padding: 10px 12px; }
  .account-trigger > span, .header-devices > span { display: none; }
  .account-trigger, .header-devices { padding: 10px; width: 44px; }
  .device-card { gap: 16px; padding: 20px; }
  .entries { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .settings-layout { grid-template-columns: 1fr; max-width: 780px; }
}
@media (max-width: 760px) {
  :root { --cab-gutter: 20px; --cab-text-title: 1.75rem; --cab-text-xl: 1.25rem; }
  .topbar { min-height: 72px; gap: 16px; }
  .desktop-nav, #desktop-nav { display: none; }
  .brand-mark { width: 33px; height: 26px; }
  .wordmark { font-size: 25px; }
  .account-trigger > .icon { display: block; }
  .main { padding-top: 24px; padding-bottom: 40px; }
  .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .page-heading > div:first-child { flex: 1 1 100%; }
  .page-heading p { margin-top: 8px; }
  .heading-actions { max-width: 100%; }
  .page-back { margin-top: -8px; margin-bottom: 12px; }
  .workspace-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .mobile-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; padding: 5px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background: var(--cab-panel); border-top: 1px solid var(--cab-line); }
  .mobile-nav > .nav-link { padding: 7px 2px; display: grid; justify-items: center; gap: 4px; font-size: 11px; line-height: 1.3; min-height: 54px; border-radius: 8px; }
  .mobile-nav .icon { width: 21px; height: 21px; }
  .mobile-nav .nav-link.active { background: transparent; color: var(--cab-brand); }
  .device-list { grid-template-columns: 1fr; gap: 12px; }
  .device-card { min-height: 96px; padding: 18px 16px; gap: 14px; }
  .device-visual { width: 56px; height: 52px; border-radius: 10px; }
  .device-visual .icon { width: 38px; height: 32px; }
  .device-copy > b { font-size: var(--cab-text-sm); }
  .device-onboarding { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; }
  .onboarding-visual { width: 64px; height: 52px; }
  .onboarding-visual .icon { width: 64px; height: 52px; }
  .onboarding-copy h2 { font-size: 1.25rem; }
  .onboarding-copy .actions { margin-top: 20px; gap: 8px 16px; }
  .onboarding-copy .actions > .primary { width: 100%; }
  .home-profile-line { gap: 12px; margin-top: 20px; padding-top: 20px; }
  .home-profile-line > span { order: 3; flex-basis: 100%; }
  .home-profile-line .who > span:not(.avatar) { max-width: 110px; }
  .inline-notice { align-items: flex-start; flex-direction: column; gap: 8px; padding: 16px; }
  .profile-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .profile-card { padding: 24px 12px 20px; gap: 12px; }
  .profile-card > .avatar { width: 72px; height: 72px; }
  .profile-info > b { font-size: var(--cab-text-sm); }
  .profile-edit { top: 10px; right: 8px; width: 20px; height: 20px; }
  .profile-edit .icon { width: 15px; height: 15px; }
  .profile-create > .avatar > .icon { width: 26px; height: 26px; }
  .row { padding: 16px; gap: 14px; }
  .row-value { max-width: 44%; font-size: var(--cab-text-xs); }
  .settings-layout { gap: 24px; }
  .account-identity { gap: 14px; }
  .library-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .library-toolbar .search-shortcut { align-self: flex-end; }
  .library-tabs { width: 100%; }
  .library-empty { min-height: 320px; padding: 32px 20px; }
  .avatar-upload-button { gap: 12px; padding: 16px; }
  .avatar-upload-button > .avatar { width: 48px; height: 48px; }
  .avatar-upload-icon { width: 24px; }
  .entries { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
  .chips { gap: 4px; }
  .chip { padding: 10px 12px; }
  .chips-folders { gap: 8px; }
  .empty { padding: 32px 12px; }
  .sheet { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 92svh; border-radius: 16px 16px 0 0; padding: 24px 20px max(24px,env(safe-area-inset-bottom)); animation: sheet-in 180ms var(--cab-ease); }
  .sheet-wide { width: 100%; }
  .sheet-foot > .primary { flex: 1; }
  .sheet .row { padding: 14px; }
  .sheet-body .entries { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sheet .chips { margin: 0; padding-left: 0; padding-right: 0; }
  .card-head { padding: 16px; gap: 16px; }
  .card-poster { width: 80px; height: 120px; }
  .card-copy h3 { font-size: 1.125rem; }
  .entry-detail-head { gap: 16px; }
  .entry-detail-head h3 { font-size: 1.125rem; }
  .entry-options-row { flex-direction: column; }
  .pair-panel { padding: 24px 16px; }
  .pair-code { font-size: 2rem; gap: 12px; letter-spacing: .06em; margin-top: 24px; }
  .pair-panel > .actions { gap: 8px; }
  .pair-panel > .actions .btn { padding: 10px 12px; }
  .help-contact { align-items: flex-start; flex-direction: column; gap: 10px; }
  .connection-success { padding: 24px; }
  .connection-success > .btn { width: 100%; }
  .import-prompt { padding: 14px 16px; }
  .gate-header { min-height: 76px; gap: 16px; }
  .gate-header > .text-link { font-size: var(--cab-text-xs); }
  .gate-main { margin: 0 auto; padding: 24px 0 40px; flex: 1; }
  .sign-in { padding: 24px; }
  .gate-footer { padding: 20px 0 24px; flex-wrap: wrap; gap: 8px 20px; }
  .gate-form .code-input { font-size: 1.125rem; }
  @keyframes sheet-in { from { transform: translateY(12px); } to { transform: none; } }
}
@media (max-width: 360px) {
  :root { --cab-gutter: 16px; }
  .device-card { gap: 12px; padding: 16px 12px; }
  .device-onboarding, .sign-in { padding: 20px; }
  .home-profile-line > .text-link { font-size: var(--cab-text-xs); }
  .pair-code { font-size: 1.75rem; gap: 10px; }
  .sheet { padding-left: 16px; padding-right: 16px; }
  .entries { gap: 24px 12px; }
}
/* Cinema: imagery supplies the colour; surfaces supply depth, without outlines. */
.topbar { min-height: 96px; border: 0; }
.desktop-nav { padding: 0; background: transparent; gap: 8px; }
.desktop-nav .nav-link { position: relative; border-radius: var(--cab-control-radius); padding: 12px 16px; background: transparent; }
.desktop-nav .nav-link.active { background: transparent; color: var(--cab-ink); }
.desktop-nav .nav-link.active::after { content: ''; position: absolute; bottom: 2px; inset-inline: 16px; height: 2px; border-radius: 2px; background: var(--cab-brand); }
.header-devices { text-decoration: none; }
.header-devices.active, .account-trigger.active { background: var(--cab-control); color: var(--cab-ink); }
.nav-link.active { color: var(--cab-ink); background: var(--surface-control); }
.main { padding-top: 40px; }
.page-heading { margin-bottom: 32px; }
.btn { border: 0; transition: background 160ms, color 160ms, transform 160ms var(--cab-ease); }
.btn:active:not(:disabled) { transform: scale(.98); }
.who, .device-card, .device-onboarding, .profile-card, .pair-panel, .sign-in, .chip-folder { border: 0; }
.field input, .field select, .field textarea, .setting-input { border: 0; background: var(--cab-control); }
.field input[aria-invalid=true] { outline: 2px solid var(--cab-danger); }
.profile-card, .sign-in, .pair-panel { background: linear-gradient(145deg,var(--surface-control),var(--cab-panel) 60%); }
.profile-create { background: var(--cab-subtle); }
.profile-card > .avatar { box-shadow: 0 12px 32px var(--shade-34); }
.row + .row, .help-disclosure, .workspace-footer, .home-profile-line { border: 0; }
.rows { padding: 4px; }
.sheet-body .rows { display: grid; gap: 8px; background: transparent; padding: 0; }
.sheet { border: 0; background: var(--surface-dialog); }
.scrim { background: var(--shade-72); backdrop-filter: blur(8px); }
.sheet-head > .btn { background: var(--surface-1); border-radius: 50%; }
.sheet-body .row { border-radius: var(--cab-control-radius); }
.sheet-body button.row { background: var(--cab-control); }
.sheet-body .row[aria-pressed=true] { background: var(--cab-selected); }
.choice-list .avatar { width: 48px; height: 48px; }
.choice-list .row-value { color: var(--cab-brand); }
.chip[aria-pressed=true] { color: var(--cab-ink); background: var(--cab-control); }
.search-shortcut { background: var(--cab-panel); }
.mobile-nav { box-shadow: 0 -12px 32px var(--shade-34); }
.home-bento { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.bento-panel { min-width: 0; padding: 28px; border-radius: var(--cab-radius); background: var(--cab-panel); overflow: hidden; }
.bento-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.bento-heading h2 { font-size: 21px; font-weight: 550; }
.bento-count { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--cab-muted); }
.bento-devices { grid-column: span 7; background: linear-gradient(135deg,var(--surface-control) 0%,var(--surface-raised) 65%); }
.bento-devices .device-list { grid-template-columns: 1fr; gap: 4px; }
.bento-devices .device-card { min-height: 88px; padding: 12px 4px; background: transparent; border-radius: 10px; }
.bento-devices .device-card:hover { background: var(--surface-1); }
.bento-devices .device-visual { background: transparent; width: 64px; color: var(--text-2); }
.bento-devices .device-copy > b { font-size: 16px; }
.bento-first-device { background: radial-gradient(ellipse at 82% 18%,color-mix(in srgb,var(--brand-purple) 30%,var(--surface-raised)) 0%,transparent 65%),var(--surface-raised); }
.bento-setup { position: relative; min-height: 206px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-top: 72px; }
.bento-screen { position: absolute; top: 0; right: 8px; color: var(--rating-top); }
.bento-screen .icon { width: 116px; height: 96px; stroke-width: 1; }
.bento-setup > p { max-width: 28ch; margin-bottom: 20px; font-size: 16px; color: var(--cab-secondary); }
.bento-profiles { grid-column: span 7; }
.bento-profiles .bento-heading { margin-bottom: 22px; }
.bento-people { display: flex; gap: 24px; overflow-x: auto; padding: 4px 2px 8px; }
.bento-person { display: grid; justify-items: center; gap: 10px; flex: none; width: 72px; text-align: center; }
.bento-person .avatar { width: 64px; height: 64px; background: var(--surface-control); }
.bento-person > span:last-child { max-width: 100%; font-size: 12px; color: var(--cab-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bento-person-add .avatar { display: grid; place-items: center; }
.bento-person-add .avatar::after { display: none; }
.bento-person-add .icon { width: 24px; height: 24px; }
.bento-library { grid-column: 8 / 13; grid-row: 1 / 3; display: flex; flex-direction: column; background: linear-gradient(160deg,var(--surface-control),var(--surface-sunken) 65%); }
.bento-library .bento-heading { flex-wrap: wrap; gap: 8px; }
.bento-library .who { padding-right: 8px; background: transparent; }
.bento-library .who > span:not(.avatar) { max-width: 110px; }
.bento-library .who .avatar { width: 24px; height: 24px; }
.bento-posters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 12px; margin: auto 0; padding: 20px 0; }
.bento-film { min-width: 0; color: var(--cab-secondary); }
.bento-poster { width: 100%; aspect-ratio: 2/3; box-shadow: 0 16px 36px var(--shade-50); }
.bento-film > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 12px; font-size: 12px; line-height: 1.5; }
.bento-posters > .skeleton { aspect-ratio: 2/3; }
.bento-library-link { margin-top: auto; padding-top: 24px; color: var(--cab-secondary); }
.bento-library-empty { display: flex; flex: 1; align-items: center; justify-content: center; }
.bento-library-empty .library-empty { min-height: 280px; padding: 24px 0 40px; background: transparent; }
.bento-library-empty .library-empty p { max-width: 26ch; }
.home-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 16px; }
.home-links .text-link { color: var(--cab-muted); font-size: 13px; }
.home-bento + .inline-notice { margin-top: 20px; }
.sheet.sheet-cinema { width: min(820px,calc(100vw - 48px)); padding: 0; overflow: hidden; background: var(--surface-raised); }
.sheet-cinema .sheet-head { position: absolute; z-index: 2; top: 20px; right: 20px; left: 20px; margin: 0; pointer-events: none; }
.sheet-cinema .sheet-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.sheet-cinema .sheet-head > .btn { margin: 0; pointer-events: auto; background: var(--scrim-72); color: var(--white); }
.sheet-cinema .sheet-head > .btn:last-child { margin-left: auto; }
.sheet-cinema .sheet-body { gap: 0; padding: 0 0 4px; margin: 0; }
.sheet-cinema .card-hero { min-height: 310px; border-radius: 0; overflow: visible; background: var(--cab-panel); display: flex; align-items: flex-end; flex: none; }
.sheet-cinema .card-hero.has-backdrop { min-height: 360px; }
.sheet-cinema .card-art { display: block; position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: center 35%; }
.sheet-cinema .card-art picture, .sheet-cinema .card-art img { display: block; width: 100%; height: 100%; }
.sheet-cinema .card-art img { object-fit: cover; object-position: center 35%; }
.sheet-cinema .card-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,var(--scrim-16) 20%,var(--scrim-78) 72%,var(--surface-raised) 100%); }
.sheet-cinema .card-head { width: 100%; padding: 84px 32px 32px; gap: 24px; align-items: flex-end; }
.sheet-cinema .card-poster { width: 116px; height: 174px; box-shadow: 0 12px 40px var(--shade-50); }
.sheet-cinema .card-copy { padding-bottom: 4px; gap: 12px; }
.sheet-cinema .card-copy h3 { font-size: 32px; line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
.sheet-cinema .card-original { font-size: 13px; color: var(--text-2); }
.card-heading-meta { font-size: 13px; color: var(--cab-secondary); }
.card-content { display: grid; gap: 20px; padding: 0 32px 4px; }
.sheet-cinema .card-facts { gap: 8px; align-items: center; }
.sheet-cinema .card-facts:empty { display: none; }
.sheet-cinema .fact { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border-radius: 10px; background: var(--cab-control); color: var(--cab-secondary); font-size: 13px; }
.sheet-cinema .fact-rating { color: var(--cab-ink); }
.sheet-cinema .rating-tmdb { background: color-mix(in srgb,var(--tmdb-blue) 18%,var(--surface-raised)); }
.sheet-cinema .rating-kinopoisk { background: color-mix(in srgb,var(--brand-orange) 16%,var(--surface-raised)); }
.rating-logo { flex: none; width: 28px; height: 28px; fill: currentColor; }
.rating-extra { display: contents; }
.rating-tmdb .rating-logo { color: color-mix(in srgb,var(--tmdb-blue) 55%,var(--white)); }
.rating-kinopoisk .rating-logo { color: var(--brand-orange-soft); }
.fact-rating > b { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 600; }
.fact-rating > span { display: grid; gap: 1px; font-size: 10px; line-height: 1.3; }
.fact-rating small { font-size: 10px; color: var(--cab-secondary); }
.sheet-cinema .card-genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 11px; color: var(--cab-secondary); }
.card-genres > span { padding: 5px 10px; border-radius: 999px; background: var(--surface-1); }
.card-synopsis .card-text { max-width: 65ch; }
.card-synopsis.is-collapsed .card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.synopsis-toggle { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--cab-brand); }
.card-credits { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px 24px; }
.card-credits > div { min-width: 0; }
.card-credits dt { margin-bottom: 5px; color: var(--cab-muted); font-size: 11px; }
.card-credits dd { color: var(--cab-secondary); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.card-cast { grid-column: 1/-1; }
.sheet-cinema .sheet-foot { margin: 20px 32px 32px; }
.sheet-cinema #sheet-status:not(:empty) { margin: 12px 32px 0; }
@media (max-width: 960px) {
  .bento-devices, .bento-profiles { grid-column: span 7; }
  .bento-panel { padding: 24px; }
  .bento-posters { gap: 8px; }
  .bento-people { gap: 16px; }
}
@media (max-width: 760px) {
  .home-bento { display: flex; flex-direction: column; gap: 16px; }
  .bento-panel { padding: 24px; }
  .bento-profiles { order: 2; }
  .bento-library { order: 3; }
  .bento-heading h2 { font-size: 20px; }
  .bento-setup { min-height: 210px; padding-top: 80px; }
  .bento-screen .icon { width: 92px; height: 76px; }
  .bento-setup .btn { min-height: 48px; }
  .bento-people { gap: 18px; }
  .bento-posters { max-width: 440px; width: 100%; gap: 14px; padding-top: 12px; }
  .bento-library-empty .library-empty { min-height: 260px; padding-bottom: 24px; }
  .sheet.sheet-cinema { width: 100%; border-radius: 16px 16px 0 0; padding: 0; }
  .sheet-cinema .card-hero.has-backdrop { min-height: 320px; }
  .sheet-cinema .card-head { padding: 80px 24px 28px; gap: 16px; }
  .sheet-cinema .card-poster { width: 80px; height: 120px; }
  .sheet-cinema .card-copy h3 { font-size: 25px; }
  .sheet-cinema .card-original { font-size: 12px; }
  .sheet-cinema .card-facts { gap: 8px; }
  .sheet-cinema .fact { font-size: 12px; }
  .card-content { padding-right: 24px; padding-left: 24px; }
  .card-credits { gap: 16px; }
  .sheet-cinema .sheet-foot { margin: 20px 24px max(24px,env(safe-area-inset-bottom)); }
  .sheet-cinema #sheet-status:not(:empty) { margin-right: 24px; margin-left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* A stable, compact cinema header across the whole account. */
:root { --cab-header-height: 88px; --cab-cinema-width: 1440px; --cab-motion-scene: 420ms; --cab-motion-cover: 650ms; --cab-cinema-display: clamp(2.5rem,4.3vw,4rem); }
html { scroll-padding-top: calc(var(--cab-header-height) + 24px); }
.topbar { position: relative; z-index: 35; width: 100%; min-height: var(--cab-header-height); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 24px; margin: 0; padding: 8px max(var(--cab-gutter),calc((100% - var(--cab-cinema-width))/2)); background: transparent; }
.topbar .brand { gap: 6px; }
.topbar .brand-mark { width: 31px; height: 24px; }
.topbar .wordmark { font-size: 25px; }
.topbar .desktop-nav { justify-content: center; gap: 4px; }
.topbar .nav-link { min-height: var(--cab-tap); padding: 10px 18px; border-radius: 999px; font-weight: 550; }
.topbar .nav-link.active { background: var(--cab-control); color: var(--cab-ink); }
.topbar .nav-link.active::after { display: none; }
.topbar .header-actions { justify-self: end; gap: 8px; }
.topbar .header-actions .btn { width: 44px; height: 44px; padding: 11px; border-radius: 50%; }
.topbar .account-trigger { background: var(--cab-control); }
.topbar .header-devices > span, .topbar .account-trigger > span { display: none; }
.topbar .header-actions .icon { display: block; width: 21px; height: 21px; }
.topbar .header-actions .active { background: var(--cab-accent); color: var(--cab-accent-ink); }
.shell[data-view="watch"] .main, .shell[data-view="watch-player"] .main { width: min(var(--cab-cinema-width),calc(100% - var(--cab-gutter)*2)); padding-top: 24px; }
@media (hover: hover) {
  .topbar .nav-link:not(.active):hover { background: var(--cab-control); color: var(--cab-ink); }
  .topbar .header-actions .btn:not(.active):hover { background: var(--cab-hover); color: var(--cab-ink); }
}
@media (max-width: 760px) {
  :root { --cab-header-height: 64px; }
  .topbar { grid-template-columns: minmax(0,1fr) auto; gap: 16px; }
  .topbar .header-actions { gap: 4px; }
  .topbar .brand-mark { width: 28px; height: 23px; }
  .topbar .wordmark { font-size: 23px; }
  .mobile-nav { background: var(--scrim-92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: none; }
  .mobile-nav .nav-link { transition: color 160ms; }
  .mobile-nav .nav-link.active { color: var(--cab-ink); }
  .mobile-nav .nav-link.active .icon { fill: color-mix(in srgb,var(--rating-top) 14%,transparent); color: var(--cab-brand); }
  .shell[data-view="watch"] .main { padding-top: 16px; }
}
@supports not (backdrop-filter: blur(1px)) {
  .mobile-nav { background: var(--surface-sunken); }
}
@media (prefers-reduced-transparency: reduce) {
  .mobile-nav { background: var(--surface-sunken); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Artwork light: one shared layer, mounted only for the active card. */
:root { --cab-art-glow-blur: 32px; --cab-art-glow-opacity: .48; }
:is(.cinema-poster,.cinema-wide-card,.cinema-ranked-card,.cinema-editorial-card,.cinema-collection-card,.cinema-resume-main,.entry-main,.entry-tap) { position: relative; isolation: isolate; }
.cinema-art-glow-viewport { position: absolute; z-index: -3; display: block; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,var(--black) 24px,var(--black) calc(100% - 24px),transparent); mask-image: linear-gradient(90deg,transparent,var(--black) 24px,var(--black) calc(100% - 24px),transparent); }
.cinema-art-glow { position: absolute; display: block; pointer-events: none; border-radius: 32%; background-size: cover; background-position: center; filter: blur(var(--cab-art-glow-blur)) saturate(1.35); opacity: 0; transform: scale(1.08); transition: opacity 420ms var(--cab-ease); }
.cinema-art-glow.is-lit { opacity: var(--cab-art-glow-opacity); }
@media (prefers-reduced-motion: reduce) { .cinema-art-glow { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .cinema-art-glow { display: none; } }

/* Library information: a quiet sync summary; diagnostics are progressively disclosed. */
.library-storage { display: grid; gap: 20px; }
.library-sync-status { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--cab-control); border-radius: var(--cab-radius); }
.library-sync-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--cab-brand); }
.library-sync-icon .icon { width: 28px; height: 28px; }
.library-sync-status > div { display: grid; gap: 4px; min-width: 0; }
.library-sync-status span:not(.library-sync-icon) { color: var(--cab-secondary); font-size: var(--cab-text-xs); }
.library-sync-status strong { font-size: var(--cab-text-lg); font-weight: 550; text-wrap: pretty; }
.library-storage-note { max-width: 38ch; color: var(--cab-secondary); font-size: var(--cab-text-sm); text-wrap: pretty; }
.library-storage-details summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: var(--cab-tap); list-style: none; cursor: pointer; color: var(--cab-muted); font-size: var(--cab-text-sm); border-radius: var(--cab-control-radius); }
.library-storage-details summary::-webkit-details-marker { display: none; }
.library-storage-details summary > .icon { flex: none; width: 16px; height: 16px; transition: transform var(--cab-duration); }
.library-storage-details[open] summary > .icon { transform: rotate(90deg); }
.library-storage-facts { display: grid; gap: 12px; margin-top: 12px; font-size: var(--cab-text-sm); }
.library-storage-facts > div, .library-storage-types > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.library-storage-facts dt, .library-storage-facts dd > span, .library-storage-types dt { color: var(--cab-muted); }
.library-storage-facts dd, .library-storage-types dd { font-variant-numeric: tabular-nums; text-align: right; }
.library-storage-types { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 24px; margin-top: 20px; padding: 16px; border-radius: var(--cab-control-radius); background: var(--cab-subtle); font-size: var(--cab-text-xs); }
@media (max-width: 430px) { .library-sync-status { padding: 16px; gap: 12px; } .library-sync-icon { width: 32px; } .library-storage-types { column-gap: 16px; } }