:root { color-scheme: light; --paper: #f5efe3; --ink: #1b1712; --accent: #7a1f2b; --line: #cdbfa9; --rule: #cdbfa9; --muted: #5f5448; --card: #ece3d1; --surface: #f5efe3; --poster-bg: #ece3d1; --detail-ink: var(--surface); --detail-paper: var(--ink); --detail-coral: var(--accent); --detail-mint: var(--muted); --detail-rule: var(--line); --detail-accent: var(--accent)}
html[data-card-mode="dark"] { color-scheme: dark}
/* Card themes x modes: data-card-theme picks the character (zhurnal / reestr / ticket), data-card-mode picks light or dark.
   Every theme defines both palettes; components read only these variables, so no rule repeats per theme for colour.
   Contrast (WCAG): ink/paper and muted/paper >= 4.5 in all six palettes, accent/paper and paper/accent >= 4.5 (text on the accent chip). */
html[data-card-theme="zhurnal"] { --paper: #f5efe3; --ink: #1b1712; --accent: #7a1f2b; --line: #cdbfa9; --rule: #cdbfa9; --muted: #5f5448; --card: #ece3d1; --surface: #f5efe3; --poster-bg: #ece3d1}
html[data-card-theme="zhurnal"][data-card-mode="dark"] { --paper: #2a3b3d; --ink: #e9f2f0; --accent: #f3b58c; --line: #4a6261; --rule: #4a6261; --muted: #b5cac7; --card: #344749; --surface: #2a3b3d; --poster-bg: #344749}
html[data-card-theme="reestr"] { --paper: #f7f7f4; --ink: #0b0b0b; --accent: #b83700; --line: #d9d9d3; --rule: #d9d9d3; --muted: #5c5c57; --card: #ececE6; --surface: #f7f7f4; --poster-bg: #ececE6}
html[data-card-theme="reestr"][data-card-mode="dark"] { --paper: #0d0e0d; --ink: #e8e8e3; --accent: #ff7a3d; --line: #2e302d; --rule: #2e302d; --muted: #a0a29b; --card: #171917; --surface: #0d0e0d; --poster-bg: #171917}
html[data-card-theme="ticket"] { --paper: #f7edd9; --ink: #382d28; --accent: #a84428; --line: #bc9f77; --rule: #bc9f77; --muted: #53615a; --card: #efe4cd; --surface: #efe4cd; --poster-bg: #d6c2a1}
html[data-card-theme="ticket"][data-card-mode="dark"] { --paper: #1d302b; --ink: #f6f0e4; --accent: #ef9275; --line: #718178; --rule: #53645c; --muted: #c7d6c7; --card: #17221f; --surface: #17221f; --poster-bg: #101a17}
/* Zhurnal type system: 3 families with fixed roles (display serif / text serif / small sans caps), 5 sizes. */
html[data-card-theme="zhurnal"] { --zh-serif-display: 'Playfair Display', Georgia, serif; --zh-serif-text: 'PT Serif', Georgia, serif; --zh-sans: Manrope, Arial, sans-serif; --zh-fs-title: 1.5rem; --zh-fs-body: 1.05rem; --zh-fs-meta: 1rem; --zh-fs-ui: .8rem; --zh-fs-micro: .7rem; --zh-track: .12em}
html[data-card-theme="reestr"] { --rs-mono: 'IBM Plex Mono', 'Courier New', monospace; --rs-sans: 'IBM Plex Sans', Arial, sans-serif; --rs-poster: clamp(84px, 24%, 140px); --rs-label: 6.5rem}
* { box-sizing: border-box}
html { background: var(--paper); color: var(--ink); font: 16px/1.6 Georgia, serif}
body { margin: 0; min-width: 320px; overflow-x: hidden}
.shell { width: min(1120px, calc(100% - 2.5rem)); margin: auto}
.site-header { border-bottom: 1px solid var(--line); padding: 1.1rem 0}
.site-header .shell, .site-footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem}
.site-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 1rem}
.site-nav form { margin: 0}
.site-nav a, .site-nav button { color: var(--ink); font: .82rem Arial, sans-serif; text-decoration: underline; text-underline-offset: .25rem}
.site-nav button { padding: 0; border: 0; background: transparent; cursor: pointer}
.nav-theme-switcher { position: relative}
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font: bold 1rem Arial, sans-serif; text-decoration: none}
.brand-mark { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .42rem; overflow: hidden; background: transparent; color: var(--paper); font-size: .72rem; letter-spacing: .05em; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent)}
.brand-mark img { display: block; width: 100%; height: 100%}
.site-header nav a, .text-link, .back-link { color: var(--ink); font: .82rem Arial, sans-serif; text-decoration: underline; text-underline-offset: .25rem}
.intro { max-width: 780px; padding: 5rem 0 6rem}
.eyebrow, .card-year { color: var(--accent); font: bold .72rem/1.2 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase}
.intro h1, .film-detail h1 { --title-size: clamp(2.6rem, 6.2vw, 7.2rem); margin: .8rem 0 1.4rem; font-size: var(--title-size); font-weight: 400; line-height: .95; letter-spacing: -.06em}
/* Film-detail title fits its longest word instead of breaking it. show.html.twig emits
   --title-word-chars (character count of the title's longest unbreakable word); --title-char-em is the
   active theme's h1 font's average per-character advance in em, empirically fitted against the production
   title catalog (measured in Chromium on 9+ letter Russian title words, letter-spacing included, rounded
   up ~5%; not a safe upper bound — pathological single long words can still slightly overflow; per-theme
   overrides next to the theme h1 rules below). The font-size is the usual --title-size clamp, capped
   so that longest word * char width never exceeds the h1's real line box: min(--title-measure,
   container width), with .film-detail as the inline-size container. Titles whose words already fit
   are untouched (the cap is above --title-size); only long-word titles shrink, and only just enough.
   overflow-wrap: break-word stays as the last resort for a word wider than the bound predicts. */
.film-detail { container-type: inline-size}
.film-detail h1 { --title-char-em: .64; font-size: min(var(--title-size), calc(min(var(--title-measure), 100cqi) / var(--title-word-chars, 1) / var(--title-char-em))); overflow-wrap: break-word}
.film-detail h1 .title-tail { white-space: nowrap}
.intro h1 em { color: var(--accent); font-style: normal}
.lede { max-width: 34rem; color: var(--muted); font-size: 1.2rem}
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line)}
.section-heading h2 { font-size: 1.5rem; font-weight: 400}
.section-heading span { color: var(--muted); font: .75rem Arial, sans-serif}
.catalog-active-filters { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline; margin-left: .25rem}
.catalog-active-filter { max-width: 100%; overflow-wrap: anywhere; color: var(--ink); font: .72rem Arial, sans-serif}
.catalog-active-filter-label { color: var(--muted); font-weight: bold}
.nav-theme-toggle::after { content: '▾'; margin-left: .3em; font-size: .85em}
.nav-theme-toggle[aria-expanded="true"]::after { content: '▴'}
.card-theme-switcher { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 30; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; width: max-content; max-width: min(90vw, 22rem); padding: .75rem 1rem; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 .6rem 1.75rem rgba(0, 0, 0, .22)}
.card-theme-switcher-label { margin-right: .35rem; color: var(--ink); font: bold .78rem Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase}
.card-theme-button { min-height: 2.4rem; padding: .5rem .9rem; border: 2px solid var(--ink); color: var(--ink); background: var(--paper); font: bold .78rem Arial, sans-serif; letter-spacing: .04em; cursor: pointer}
.card-theme-button[aria-pressed="true"] { border-color: var(--ink); color: var(--paper); background: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink)}
.card-theme-button:hover { background: color-mix(in srgb, var(--ink) 12%, var(--paper))}
.card-theme-options { display: flex; flex-wrap: wrap; gap: .5rem}
.site-header .site-nav button.mode-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; padding: 0; color: var(--muted); border: 1px solid var(--line); border-radius: 0; background: var(--paper); font: 16px/1 Arial, sans-serif; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: color .25s ease-out, border-color .25s ease-out}
.site-header .site-nav button.mode-toggle:hover, .site-header .site-nav button.mode-toggle:focus-visible { color: var(--accent); border-color: var(--accent)}
.site-header .site-nav button.mode-toggle[aria-pressed="true"] { color: var(--ink); transform: scaleX(-1)}
.card-theme-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.section-toggle { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.4rem; margin: 1.1rem 1rem 0 0; padding: .5rem 1rem; border: 2px solid var(--ink); color: var(--paper); background: var(--ink); font: bold .78rem Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer}
.section-toggle::after { content: '▾'; font-size: .85em}
.section-toggle[aria-expanded="true"]::after { content: '▴'}
.section-toggle:hover { background: var(--accent)}
.section-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.section-heading .section-toggle { margin: 0 0 0 auto; align-self: center}
.card-theme-switcher[hidden], .catalog-filters[hidden] { display: none}
.catalog-active-filters[hidden] { display: none}
.catalog-filters { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; padding: 2rem; margin: 1.75rem 0 2.75rem; overflow: visible; color: var(--ink); background: var(--card); border: 1px solid var(--line)}
.catalog-filters::before, .catalog-filters::after { position: absolute; width: 1.3rem; height: 1.3rem; content: ''; pointer-events: none}
.catalog-filters::before { top: .55rem; left: .55rem; border-top: 1px solid var(--muted); border-left: 1px solid var(--muted)}
.catalog-filters::after { right: .55rem; bottom: .55rem; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted)}
.filters-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1.1rem 1.4rem}
.filters-fields .filter-field-title { grid-column: span 2}
.filters-fields--user .filter-field-title { grid-column: auto}
.catalog-combobox { position: relative; display: grid; gap: .45rem; min-width: 0}
.filter-label { color: var(--muted); font: bold .67rem Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase}
.combobox-control { display: flex; align-items: center; min-height: 3rem; padding: 0 .7rem; border: 1px solid var(--line); background: var(--paper); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease}
.combobox-control:hover { border-color: var(--muted); background: var(--paper)}
.combobox-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.catalog-filters input { min-width: 0; width: 100%; min-height: 2.7rem; padding: .35rem 0; border: 0; outline: 0; background: transparent; font: .98rem Georgia, serif; color: var(--ink)}
.catalog-filters input::placeholder { color: var(--muted); font-style: italic}
.catalog-filters select { width: 100%; min-height: 2.7rem; padding: .35rem 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: .98rem Georgia, serif}
.catalog-filters select option { color: var(--ink)}
.combobox-caret { flex: none; width: .5rem; height: .5rem; margin: 0 .25rem 0 .55rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s ease, border-color .15s ease}
.catalog-combobox.is-open .combobox-caret { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--ink)}
.combobox-clear { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border: 0; border-radius: 2px; color: var(--muted); background: transparent; font: 1.1rem/1 Arial, sans-serif; opacity: 0; transform: scale(.8); transition: opacity .15s ease, transform .15s ease, background-color .15s ease, color .15s ease; cursor: pointer}
.catalog-combobox.is-filled .combobox-clear { opacity: 1; transform: none}
.combobox-clear:hover { color: var(--paper); background: var(--ink)}
.combobox-list { position: absolute; z-index: 5; top: calc(100% + .25rem); right: 0; left: 0; max-height: 16rem; overflow-y: auto; margin: 0; padding: .35rem; border: 1px solid var(--muted); background: var(--paper); box-shadow: 0 .8rem 1.5rem rgba(0, 0, 0, .3); list-style: none}
.combobox-list li { padding: .3rem .7rem; font: .92rem Georgia, serif; line-height: 1.25; color: var(--ink); cursor: pointer}
.combobox-list li:hover, .combobox-list li.is-active { color: var(--paper); background: var(--ink)}
.filters-actions { display: flex; align-items: center; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line)}
.catalog-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line)}
.catalog-tab { flex: 1 1 auto; min-height: 2.5rem; margin-bottom: -1px; padding: .45rem 1.1rem; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font: bold .78rem Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer}
.catalog-tab:hover { color: var(--ink)}
.catalog-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent)}
.catalog-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.catalog-tabpanel--full, .catalog-tabpanel--brief, .catalog-tabpanel--name, .catalog-tabpanel--rating { display: grid; gap: inherit}
.catalog-tabpanel--brief, .catalog-tabpanel--rating { gap: 1.2rem}
.catalog-tabpanel[hidden] { display: none}
.rating-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none}
.brief-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.2rem; min-width: 0}
.brief-rating .rating-tiers { flex: 1 1 18rem; min-width: 0}
.brief-rating-atleast { flex: 0 0 auto}
.rating-tier { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 5rem; padding: .6rem .5rem; color: var(--ink); border: 1px solid var(--line); text-align: center; text-decoration: none}
.rating-tier:hover { border-color: var(--ink)}
.rating-tier.is-active, .rating-tier[aria-current="true"] { color: var(--paper); border-color: var(--accent); background: var(--accent)}
.rating-tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.rating-tier-value { font: bold 1.6rem Georgia, serif; font-variant-numeric: lining-nums}
.rating-tier-name { font: .8rem Georgia, serif}
.filters-actions-copy { flex: 1; color: var(--muted); font: .72rem Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase}
.filters-quick-rating { display: flex; align-items: center; gap: .5rem; text-transform: none}
.quick-rating { min-width: 2.8rem; min-height: 2.5rem; padding: .45rem .8rem; border: 1px solid var(--line); background: transparent; color: var(--ink); font: bold .9rem Georgia, serif; font-variant-numeric: lining-nums; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease}
.quick-rating:hover { border-color: var(--ink); color: var(--ink)}
.quick-rating.is-active, .quick-rating[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--paper)}
.quick-rating:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.filters-apply { padding: .85rem 1.4rem; border: 1px solid var(--accent); background: var(--accent); color: var(--paper); font: bold .72rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease}
.filters-apply:hover { border-color: var(--ink); background: var(--ink)}
.filters-reset { padding: .7rem .25rem; border: 0; background: transparent; color: var(--ink); font: .75rem Arial, sans-serif; text-decoration: underline; text-underline-offset: .25rem; cursor: pointer}
.filters-reset:hover { color: var(--ink)}
.catalog-filters input:focus-visible, .filters-apply:focus-visible, .filters-reset:focus-visible, .combobox-clear:focus-visible, .combobox-list li:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.film-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; align-items: start}
.collection-group { grid-column: 1 / -1; padding-top: .5rem}
.collection-group-label { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; color: var(--muted); font: bold .8rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase}
.collection-group-label::after { flex: 1 1 auto; height: 1px; background: var(--line); content: ''}
.collection-group-films { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; align-items: start}
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem}
.pagination-link { padding: .6rem 1.1rem; border: 2px solid var(--ink); color: var(--ink); background: var(--paper); font: bold .78rem Arial, sans-serif; letter-spacing: .04em; text-decoration: none; cursor: pointer}
.pagination-link:hover { background: var(--line)}
.pagination-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.pagination-status { color: var(--muted); font: .78rem Arial, sans-serif}
.film-card { min-width: 0; min-height: 100%; position: relative; color: var(--ink); background: var(--surface); border: 1px solid var(--line)}
.film-card--hidden { opacity: .45 }
.film-card--hidden:hover, .film-card--hidden:focus-within { opacity: 1 }
.film-card-link { position: absolute; z-index: 0; inset: 0; display: block; color: inherit; text-decoration: none}
.film-card-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px}
.film-card-content, .film-card > .user-mark-widget, .film-card > .film-card-admin { position: relative; z-index: 1; pointer-events: none}
.film-card-content a, .film-card-content button, .film-card-content input, .film-card-content select, .film-card-content summary, .film-card > .user-mark-widget *, .film-card > .film-card-admin * { pointer-events: auto}
.film-card-content { display: flex; min-width: 0; flex-direction: column}
.film-card-body { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 1rem; background: var(--surface)}
.card-topline { display: flex; align-items: baseline; gap: .75rem; min-height: 1.1rem; padding-left: .7rem; border-left: 2px solid var(--accent)}
.card-topline-spacer { min-width: 0; flex: 1}
.card-year { margin: 0; color: var(--accent)}
.card-album-rating { color: var(--ink); font: bold .78rem/1 Arial, sans-serif; letter-spacing: .04em; white-space: nowrap}
.card-age-rating { display: inline-flex; flex: 0 0 2.1rem; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; color: var(--surface); border: 1px solid var(--accent); background: var(--ink); font: bold .66rem/1.1 Arial, sans-serif; letter-spacing: .02em; white-space: nowrap; -webkit-appearance: none; appearance: none; text-decoration: none}
/* In admin mode the badge becomes a <button class="card-age-rating"> -- keep it looking like the
   static non-admin span, just interactive. The empty state (no rating yet) uses a dashed outline so
   the admin can spot films still missing an age rating at a glance. */
button.card-age-rating { cursor: pointer }
button.card-age-rating:hover { background: color-mix(in srgb, var(--ink) 88%, var(--surface)) }
button.card-age-rating:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }
button.card-age-rating[aria-busy="true"] { opacity: .55; cursor: progress }
.card-age-rating--empty { color: var(--muted); border-style: dashed; border-color: var(--line); opacity: .85 }
.card-age-rating--empty:hover { background: color-mix(in srgb, var(--ink) 88%, var(--surface)) }
.card-age-label { color: var(--accent); font-size: .58rem; letter-spacing: .1em}
.card-age-value { color: var(--surface); font-size: .78rem}
.film-card h3.card-title { min-height: 2.1em; margin: .8rem 0 1rem; color: var(--ink); font-size: 1.3rem; font-weight: 400; line-height: 1; letter-spacing: -.04em; overflow-wrap: break-word; word-break: break-word}
.card-title-link { color: inherit; text-decoration: none}
.card-title-link:hover, .card-title-link:focus-visible { text-decoration: underline; text-underline-offset: .15em}
.film-grid .card-poster, .catalog-section .card-poster { display: flex; position: relative; width: 100%; min-width: 0; aspect-ratio: 16 / 9; flex-direction: column; justify-content: flex-end; overflow: hidden; margin: 0; background: var(--poster-bg)}
.film-grid .card-poster img, .catalog-section .card-poster img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: center}
.image-lightbox-trigger { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; cursor: zoom-in}
.image-lightbox-trigger:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px}
.card-poster-open { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none}
.card-poster-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px}
.image-lightbox { width: min(92vw, 72rem); max-width: none; max-height: 92vh; padding: 3rem 1rem 1rem; border: 1px solid var(--line); color: var(--ink); background: var(--paper)}
.image-lightbox::backdrop { background: rgba(0, 0, 0, .78)}
.image-lightbox img { display: block; width: 100%; max-width: 100%; max-height: calc(92vh - 4rem); object-fit: contain}
.image-lightbox-close { position: absolute; top: .45rem; right: .65rem; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--line); color: var(--ink); background: transparent; font: 1.75rem/1 Arial, sans-serif; cursor: pointer}
.image-lightbox-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.image-lightbox-nav { position: absolute; top: 50%; width: 2.75rem; height: 3.5rem; margin-top: -1.75rem; padding: 0; border: 1px solid var(--line); color: var(--ink); background: var(--paper); font: 2rem/1 Arial, sans-serif; cursor: pointer; opacity: .9}
.image-lightbox-nav[hidden] { display: none}
.image-lightbox-prev { left: .5rem}
.image-lightbox-next { right: .5rem}
.image-lightbox-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.film-grid .card-poster--fallback, .catalog-section .card-poster--fallback { align-items: flex-start; padding: 1rem; color: var(--ink); background: var(--poster-bg); border: 1px solid var(--rule); text-decoration: none}
.card-poster--fallback span { color: var(--accent); font: bold clamp(2rem, 7vw, 3.5rem)/1 Arial, sans-serif; letter-spacing: -.08em}
.card-poster--fallback small { margin-top: auto; color: var(--ink); font: .65rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase}
.card-poster--placeholder { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); border: 1px solid var(--line); color: var(--ink)}
.film-grid .card-poster--placeholder, .catalog-section .card-poster--placeholder { color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); border-color: var(--line)}
.card-poster--placeholder::before { display: none}
.card-poster--placeholder span { color: var(--accent)}
.card-poster--placeholder small { overflow: hidden; max-width: 100%; color: var(--muted); text-overflow: ellipsis; white-space: nowrap}
.detail-gallery .poster--placeholder { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 2 / 3; margin: 0; padding: 1.2rem; color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); border: 1px solid var(--line); box-shadow: none}
.poster--placeholder .poster-monogram { color: var(--accent); font: bold clamp(3rem, 14vw, 6rem)/1 Arial, sans-serif}
.poster--placeholder figcaption { display: flex; flex-direction: column; gap: .3rem}
.poster--placeholder small { color: var(--muted); font: .8rem Arial, sans-serif; letter-spacing: .1em}
.card-meta, .card-copy, .recommendation p, .facts dd { overflow-wrap: anywhere}
.card-genre-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .65rem; padding-bottom: .65rem; border-bottom: 1px solid var(--rule)}
.card-genre-chip { padding: .15rem .5rem; border: 1px solid var(--rule); color: var(--muted); font: .6rem Arial, sans-serif; letter-spacing: .04em; text-decoration: none; text-transform: uppercase}
.card-genre-chip-group { display: inline-flex; align-items: center; gap: .2rem}
.card-primary-genre-control { padding: .1rem .25rem; border: 1px solid currentColor; color: inherit; background: transparent; font: .55rem Arial, sans-serif; cursor: pointer}
.card-primary-genre-control[aria-pressed="true"] { border-width: 2px}
body[data-admin-mode="on"] .film-genre-remove-form { display: inline-flex; margin: 0}
.film-genre-remove-form button { padding: .1rem .3rem; border: 1px solid currentColor; color: inherit; background: transparent; font: .7rem Arial, sans-serif; line-height: 1; cursor: pointer}
.card-genre-chip:hover { text-decoration: underline; text-underline-offset: .18em}
.card-genre-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; text-decoration: none}
/* Admin-picked primary genre (rating-hint-primary-genre task): a plain [data-primary-genre] attribute
   on the chip (see catalog/_film_card.html.twig), not a second class -- a second class would either
   duplicate the chip's <a> for the two cases or interpolate its class attribute, both of which disturb
   this template's own single-anchor and plain-chip-class literals that existing tests read straight out
   of its raw source. The attribute selector is also a theme-agnostic accent, so it never needs its own
   copy in every [data-card-theme="X"] .card-genre-chip override block above -- border-width and a
   currentColor-tinted background never fight those blocks' color/border-color specificity, they just
   ride whatever color is already in effect for the given theme. */
.card-genre-chip[data-primary-genre] { border-width: 2px; background: color-mix(in srgb, currentColor 28%, transparent)}
.card-watch-links-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; margin: 0 0 .65rem}
.card-info-link { display: inline-flex; flex: 0 0 1rem; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: var(--muted); border: 1px solid currentColor; border-radius: 50%; font: bold .7rem/1 Arial, sans-serif; text-decoration: none}
.card-info-link:hover, .card-info-link:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--ink) 14%, transparent)}
.card-info-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.card-links-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; margin: 0 0 .65rem}
.card-watch-links { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0}
.card-watch-link { display: inline-flex; align-items: center; justify-content: center}
.card-watch-link img { display: block; width: 18px; height: 18px}
.card-watch-link:hover { opacity: .75}
.card-watch-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.card-detail-link { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; padding: .1rem 0; color: var(--accent); text-decoration: none}
.card-detail-link svg { display: block; width: 15px; height: 15px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7}
.card-detail-link:hover { color: var(--ink)}
.card-detail-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.card-links-row .card-watch-links { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0}
.card-copy { display: -webkit-box; min-height: 3.2em; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden}
.card-bottom { margin-top: auto}
.card-metadata { margin-top: 1rem; color: var(--muted); font: .72rem Arial, sans-serif}
.card-metadata-row { display: flex; flex-direction: column; gap: .2rem; min-width: 0; margin: 0; padding: .65rem 0; border-top: 1px solid var(--rule); color: var(--ink); font: .92rem/1.45 Georgia, serif}
.card-label { margin: 0; color: var(--accent); font: bold .62rem/1.3 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase}
.card-value { min-width: 0; overflow-wrap: anywhere}
.card-country .card-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.film-card .user-mark-widget { padding: 0 1rem 1rem}
.film-card .library-quick-actions { justify-content: flex-start; min-width: 0}
.film-card .user-mark-widget .library-rating { flex-basis: 100%; flex-wrap: wrap}
.film-card .user-mark-widget .rating-digits { flex-basis: 100%}
.film-card .user-mark-widget .film-card-admin { margin: .75rem 0 0}
.catalog-filters .catalog-user-filter select { width: 100%}
.album-rating-form { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line)}
.album-rating-form label { width: 100%; color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase}
.album-rating-form input { width: 7rem; padding: .55rem .65rem; color: inherit; border: 1px solid currentColor; border-radius: .45rem; background: transparent; font: inherit}
.album-rating-form button { padding: .6rem 1.1rem; color: var(--paper); border: 1px solid var(--ink); border-radius: .45rem; background: var(--ink); font: inherit; cursor: pointer}
.album-rating-form button:hover { border-color: var(--accent); background: var(--accent)}
.film-links-form, .film-title-form { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line)}
.film-links-form fieldset { margin: 0; padding: 0; border: 0}
.film-links-form legend { margin-bottom: .55rem; color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase}
.film-link-role-picker { display: flex; flex-wrap: wrap; gap: .45rem}
.film-link-role-badge { position: relative; cursor: pointer}
.film-link-role-badge input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}
.film-link-role-badge span { display: block; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .8rem}
.film-link-role-badge input:checked + span { border-color: var(--ink); color: var(--paper); background: var(--ink)}
.film-link-role-badge input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px}
.film-links-form label, .film-title-form label { color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase}
.film-links-form input, .film-title-form input { width: 100%; padding: .55rem .65rem; color: inherit; border: 1px solid currentColor; border-radius: .45rem; background: transparent; font: inherit}
.film-links-form button, .film-title-form button { align-self: flex-start; padding: .6rem 1.1rem; color: var(--paper); border: 1px solid var(--ink); border-radius: .45rem; background: var(--ink); font: inherit; cursor: pointer}
.film-links-form button:hover, .film-title-form button:hover { border-color: var(--accent); background: var(--accent)}
.film-links-admin { margin-top: 2rem; padding: 1rem; border: 1px solid var(--line); border-radius: .6rem; background: color-mix(in srgb, var(--ink) 4%, transparent)}
.film-links-admin-role { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line)}
.film-links-admin-role h3 { margin: 0; font-size: 1rem; text-transform: capitalize}
.film-links-list { display: grid; gap: .55rem; margin: .75rem 0 0; padding: 0; list-style: none}
.film-links-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0}
.film-links-list a { min-width: 0; overflow-wrap: anywhere}
.film-links-list form { flex: 0 0 auto}
.film-links-list button { padding: .35rem .6rem; color: var(--ink); border: 1px solid var(--line); border-radius: .35rem; background: transparent; cursor: pointer}
.admin-links-error, .admin-links-success { margin: .75rem 0 0; padding: .65rem .8rem; border-left: 3px solid var(--accent)}
.admin-links-error { color: var(--accent)}
@media (max-width: 600px) { .film-links-list li { align-items: flex-start; flex-direction: column; } .film-links-list form, .film-links-list button { width: 100%; } }
.login-form, .admin-settings-form, .admin-import-form { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line)}
.login-form label, .admin-settings-form label, .admin-import-form label { color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase}
.login-form input, .admin-settings-form input, .admin-settings-form textarea, .admin-import-form input, .admin-import-form textarea { width: 100%; padding: .55rem .65rem; color: inherit; border: 1px solid currentColor; border-radius: .45rem; background: transparent; font: inherit}
.admin-import-form textarea { resize: vertical; min-height: 6rem}
.login-form button, .admin-settings-form button, .admin-import-form button, .admin-import-watch-links [data-find-watch-links-start] { align-self: flex-start; padding: .6rem 1.1rem; color: var(--paper); border: 1px solid var(--ink); border-radius: .45rem; background: var(--ink); font: inherit; cursor: pointer}
.login-form button:hover, .admin-settings-form button:hover, .admin-import-form button:hover, .admin-import-watch-links [data-find-watch-links-start]:hover { border-color: var(--accent); background: var(--accent)}
.filters-toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line)}
.filters-toggles .catalog-checkbox { display: grid; gap: .3rem; min-width: 0; align-content: start}
.filters-toggles .field-hint { margin: 0; padding-left: 1.65rem}
.catalog-filters .field-hint { color: var(--muted)}
.combobox-control--select { position: relative}
.combobox-control--select select { appearance: none; -webkit-appearance: none; padding-right: 1.6rem; cursor: pointer}
.combobox-control--select::after { position: absolute; top: 50%; right: .95rem; width: .5rem; height: .5rem; content: ''; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none}
.catalog-filters .filter-checkbox { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--ink); font: .9rem Georgia, serif; cursor: pointer}
.catalog-filters .filter-checkbox input { width: 1.1rem; min-width: 1.1rem; min-height: 1.1rem; margin: 0; padding: 0; accent-color: var(--accent)}
.field-hint { margin: -.35rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4}
.admin-import-error, .admin-import-notice { margin: 1.25rem 0 0; padding: .75rem .9rem; border-radius: .4rem; border-left: 3px solid var(--line)}
.admin-import-error { color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent)}
.admin-import-notice { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent)}
.admin-import-notice a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .2em}
.admin-import-watch-links { margin: 1.5rem 0 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line)}
.admin-import-watch-links-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem}
.admin-import-watch-links .field-hint { margin: .6rem 0 0}
.admin-import-watch-links-progress { margin: 0; color: var(--muted); font: 600 .8rem/1.3 var(--zh-sans, Arial, sans-serif)}
.admin-import-watch-links-progress:empty { display: none}
.admin-import-watch-links-log { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: .75rem 1.5rem; margin: 1rem 0 0; padding: 0; list-style: none}
.admin-import-watch-links-log:empty { display: none}
.admin-import-watch-links-log li { min-width: 0; padding-top: .6rem; border-top: 1px solid var(--line)}
.admin-import-watch-links-log strong { display: block; margin: 0 0 .35rem; font: 800 1rem/1.2 var(--zh-serif-display, Georgia, serif)}
.admin-import-watch-links-line { margin: 0 0 .3rem; font: 600 .78rem/1.35 var(--zh-sans, Arial, sans-serif); overflow-wrap: anywhere}
.admin-import-watch-links-line a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .2em}
.admin-import-watch-links-line ul, .film-card-watch-links-results ul { display: flex; flex-direction: column; gap: .35rem; margin: .35rem 0 0; padding: 0; list-style: none}
.admin-import-watch-links-line li, .admin-import-results .film-card-watch-links-results li { display: flex; align-items: center; gap: .25rem .5rem; padding: 0; border: 0}
/* Import controls share one small-button look (height of a status chip, square like the chips, the card's sans font):
   outlined by default, the collection submit is the one filled primary action. */
.admin-import-watch-links button:not([data-find-watch-links-start]), .admin-import-results .film-card-admin button, .admin-import-results .admin-import-collection button, .admin-import-collection select, .admin-import-collection input[type="text"] { min-height: 2.25rem; padding: .35rem .75rem; color: var(--ink); border: 1px solid var(--line); border-radius: 0; background: transparent; font: 600 .72rem/1.2 var(--zh-sans, Arial, sans-serif); letter-spacing: .02em; text-transform: none; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease}
.admin-import-watch-links button:not([data-find-watch-links-start]):hover, .admin-import-results .film-card-admin button:hover, .admin-import-results .admin-import-collection button:hover { border-color: var(--accent); color: var(--accent)}
.admin-import-watch-links button:focus-visible, .admin-import-results button:focus-visible, .admin-import-collection select:focus-visible, .admin-import-collection input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.admin-import-watch-links button:disabled, .admin-import-results button:disabled { opacity: .55; cursor: default}
.admin-import-watch-links .admin-import-watch-links-line button, .admin-import-results .film-card-watch-links-results button { flex: none; min-height: 1.6rem; padding: .2rem .55rem}
.admin-import-watch-links-line li > a, .admin-import-results .film-card-watch-links-results li > a { flex: 1 1 9rem; min-width: 0}
.admin-import-results .film-card .film-card-admin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: .75rem 0 0; border-top: 1px solid var(--line)}
.admin-import-results .film-card .user-mark-widget { display: flex; flex-direction: column; gap: .75rem}
[data-card-theme="zhurnal"] .admin-import-results .film-card .user-mark-widget { padding: 0}
.admin-import-results .film-card-admin > .admin-import-collection, .admin-import-results .film-card-admin > .film-card-watch-links, .admin-import-results .film-card-admin > .film-card-admin-message { grid-column: 1 / -1}
.admin-import-results .film-card-admin > .film-card-admin-message { margin: 0}
.admin-import-results .film-card-watch-links { gap: .5rem}
.admin-import-results .film-card-watch-links-results { font: 600 .75rem/1.35 var(--zh-sans, Arial, sans-serif); overflow-wrap: anywhere}
.admin-import-results .film-card-watch-links-results a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .2em}
.admin-import-collection { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; margin: 0}
.admin-import-collection select, .admin-import-collection input[type="text"] { width: 100%; min-width: 0; padding: .35rem .6rem; font-size: .8rem}
.admin-import-collection button[type="submit"] { color: var(--paper); border-color: var(--ink); background: var(--ink)}
.admin-import-results .admin-import-collection button[type="submit"] { color: var(--paper)}
.admin-import-results .admin-import-collection button[type="submit"]:hover { color: var(--paper); border-color: var(--accent); background: var(--accent)}
.admin-import-collection-message { margin: 0; color: var(--muted); font: 600 .75rem/1.35 var(--zh-sans, Arial, sans-serif)}
.admin-import-bulk { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; max-width: 34rem; margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent)}
.admin-import-bulk[hidden] { display: none}
.admin-import-bulk select, .admin-import-bulk input[type="text"] { box-sizing: border-box; width: 100%; min-height: 2.6rem; padding: .45rem .7rem; color: var(--ink); border: 1px solid var(--line); border-radius: 0; background: var(--paper); font: inherit}
.admin-import-bulk button[type="submit"] { min-height: 2.8rem; padding: .65rem 1.25rem; color: var(--paper); border: 1px solid var(--ink); border-radius: 0; background: var(--ink); font: bold .8rem Arial, sans-serif; letter-spacing: .06em; cursor: pointer}
.admin-import-bulk button[type="submit"]:hover:not(:disabled) { border-color: var(--accent); background: var(--accent)}
.admin-import-bulk button[type="submit"]:disabled { opacity: .6; cursor: progress}
.admin-import-bulk select:focus-visible, .admin-import-bulk input:focus-visible, .admin-import-bulk button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.admin-import-row .admin-import-collection { margin-top: .5rem}
/* Per-row result placeholder in #admin-import-results (multi-url-import-progress task): the row shares
   .film-card so it picks up the theme's own background/border/typography, same as a real catalog card,
   while it waits for its own POST /admin/films/import to resolve into either the real rendered card
   (admin-import.js's showCard(), which replaces this whole row) or an inline error (.admin-import-error,
   reused as-is). */
.admin-import-row { display: flex; flex-direction: column; gap: .65rem; padding: 1rem 1.1rem; word-break: break-all}
.admin-import-row-url { margin: 0; color: var(--muted); font-size: .8rem}
.admin-import-row .admin-import-error { margin: 0}
.admin-import-progress { position: relative; height: .4rem; overflow: hidden; border-radius: .2rem; background: color-mix(in srgb, var(--ink) 10%, transparent)}
.admin-import-progress::after { position: absolute; inset: 0; width: 40%; border-radius: .2rem; background: color-mix(in srgb, var(--accent) 60%, transparent); content: ''; animation: admin-import-progress-pulse 1.1s ease-in-out infinite}
@keyframes admin-import-progress-pulse {
    0% { transform: translateX(-100%)}
    100% { transform: translateX(250%)}
}
/* Progress panel of the links import (admin-import-progress.js): a determinate bar with «обработано N из M»; while the run is going the
   fill carries a moving stripe so the page never looks frozen on a slow import. */
.admin-import-run { display: flex; flex-direction: column; gap: .6rem; max-width: 34rem; margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent)}
.admin-import-run[hidden], .admin-import-run [hidden] { display: none}
.admin-import-run-count { margin: 0; font: 700 .9rem/1.3 var(--zh-sans, Arial, sans-serif)}
.admin-import-run-bar { height: .75rem; overflow: hidden; border-radius: .4rem; background: color-mix(in srgb, var(--ink) 12%, transparent)}
.admin-import-run-fill { display: block; width: 0; height: 100%; border-radius: .4rem; background-color: var(--accent); transition: width .3s ease}
.admin-import-run.is-running .admin-import-run-fill { background-image: linear-gradient(45deg, color-mix(in srgb, var(--paper) 35%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, var(--paper) 35%, transparent) 50%, color-mix(in srgb, var(--paper) 35%, transparent) 75%, transparent 75%); background-size: 1rem 1rem; animation: admin-import-run-stripes .8s linear infinite}
@keyframes admin-import-run-stripes {
    0% { background-position: 0 0}
    100% { background-position: 1rem 0}
}
.admin-import-run-current { margin: 0; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere}
.admin-import-run-current:empty { display: none}
.admin-import-run-errors { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; list-style: none}
.admin-import-run-errors li { padding: .6rem .8rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: .85rem; overflow-wrap: anywhere}
.admin-import-run-continue { align-self: flex-start; padding: .6rem 1.1rem; color: var(--paper); border: 1px solid var(--ink); border-radius: .45rem; background: var(--ink); text-decoration: none}
.admin-import-run-continue:hover, .admin-import-run-continue:focus-visible { border-color: var(--accent); background: var(--accent)}
.admin-import-form button:disabled { opacity: .6; cursor: progress}
@media (prefers-reduced-motion: reduce) { .admin-import-run.is-running .admin-import-run-fill { animation: none} .admin-import-run-fill { transition: none} }
.auth-card { width: min(100%, 34rem); margin: clamp(2.5rem, 8vw, 6rem) auto; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); background: rgba(255, 255, 255, .22); box-shadow: .7rem .7rem 0 var(--line)}
.auth-card h1 { margin: .65rem 0 .8rem; font-size: clamp(2.8rem, 10vw, 5.2rem); font-weight: 400; line-height: .95; letter-spacing: -.06em}
.auth-lede { max-width: 25rem; margin: 0; color: var(--muted); font-size: 1.05rem}
.auth-form { display: grid; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line)}
.auth-field { display: grid; gap: .35rem}
.auth-field label { color: var(--muted); font: bold .68rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase}
.auth-field input { width: 100%; min-height: 2.8rem; padding: .6rem .7rem; color: var(--ink); border: 1px solid var(--ink); background: var(--paper); font: inherit}
.auth-field.auth-remember { display: flex; align-items: center; gap: .6rem}
.auth-field.auth-remember input { width: auto; min-height: 0; accent-color: var(--accent)}
.auth-field.auth-remember label { order: 2; text-transform: none; letter-spacing: 0; font-size: .85rem}
.auth-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.auth-form button { justify-self: start; min-height: 2.8rem; padding: .65rem 1.25rem; color: var(--paper); border: 1px solid var(--ink); background: var(--ink); font: bold .75rem Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer}
.auth-form button:hover { border-color: var(--accent); background: var(--accent)}
.auth-form button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.auth-error { margin: 1.25rem 0 0; padding: .75rem .9rem; color: var(--accent); border-left: 3px solid var(--accent); background: rgba(168, 68, 40, .08)}
.auth-switch { margin: 1.5rem 0 0; color: var(--muted); font: .8rem Arial, sans-serif}
.auth-switch a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .25rem}
.auth-google-block { margin-top: 1.5rem}
.auth-google { display: flex; align-items: center; justify-content: center; gap: .75rem; box-sizing: border-box; width: 100%; min-height: 2.75rem; padding: .6rem 1rem; color: #1f1f1f; border: 1px solid #747775; background: #fff; font: 500 .95rem Arial, sans-serif; line-height: 1.2; text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent}
.auth-google:hover { border-color: var(--accent); background: #f6f7f8}
.auth-google:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.auth-google:active { background: #e9ebee}
.auth-google__logo { flex: none; width: 1.125rem; height: 1.125rem}
.auth-google__hint { margin: .6rem 0 0; color: var(--muted); font: .8rem Arial, sans-serif; text-align: center}
.auth-or { display: flex; align-items: center; gap: .8rem; margin: 1.25rem 0 0; color: var(--muted); font: bold .68rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase}
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line)}
.auth-google-block + .auth-form { margin-top: 1.25rem; padding-top: 0; border-top: 0}
.library-heading { padding: 3rem 0 2.5rem}
.library-heading h1 { margin: .6rem 0 1rem; font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 400; line-height: .95; letter-spacing: -.06em}
.library-section { margin: 0 0 3.5rem}
.settings-form { max-width: 40rem}
.settings-group { min-width: 0; margin: 0; padding: 0; border: 0}
.settings-legend { padding: 0; margin: 0 0 .75rem; color: var(--muted); font: .78rem/1.4 Arial, sans-serif}
.settings-option { position: relative; display: grid; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .5rem; background: color-mix(in srgb, var(--ink) 4%, transparent)}
.settings-option + .settings-option { margin-top: .75rem}
.settings-option:hover { border-color: var(--accent)}
.settings-option:has(input:focus-visible) { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px}
.settings-option-label { display: flex; align-items: center; gap: .7rem; color: var(--ink); font-size: 1rem; line-height: 1.35; cursor: pointer}
.settings-option-label::after { position: absolute; inset: 0; content: ''}
.settings-option-label input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--accent)}
.settings-option-label input:focus-visible { outline: 0}
.settings-option-hint { margin: 0; padding-left: 1.9rem; font-size: .82rem}
.settings-flash { max-width: 40rem; margin: 0 0 1.25rem}
.settings-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem}
.settings-actions .settings-button { min-height: 2.75rem; padding: .6rem 1.3rem; border-radius: .45rem; font: .88rem Arial, sans-serif}
.settings-actions .settings-button--primary { color: var(--paper); border-color: var(--ink); background: var(--ink)}
.settings-actions .settings-button--primary:hover { border-color: var(--accent); background: var(--accent)}
.settings-back { margin: 1.75rem 0 0}
.library-filters { position: relative; display: flex; align-items: end; flex-wrap: wrap; gap: 1.1rem; padding: 1.75rem; margin: 0 0 .5rem; overflow: visible; color: var(--ink); background: var(--card); border: 1px solid var(--line)}
.library-filters::before, .library-filters::after { position: absolute; width: 1.1rem; height: 1.1rem; content: ''; pointer-events: none}
.library-filters::before { top: .5rem; left: .5rem; border-top: 1px solid var(--muted); border-left: 1px solid var(--muted)}
.library-filters::after { right: .5rem; bottom: .5rem; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted)}
.library-filters label { display: grid; gap: .35rem; color: var(--muted); font: bold .67rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase}
.library-filters select, .library-filters input { min-height: 2.6rem; padding: .5rem 0; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); background: transparent; font: .95rem Georgia, serif; transition: border-color .15s ease}
.library-filters select:focus-visible, .library-filters input:focus-visible { outline: 0; border-color: var(--accent)}
.library-filters select option { color: var(--ink)}
.library-rating { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; color: var(--muted); font: bold .67rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase}
/* Rating picker: a row of 10..1 round digit buttons beside the label; always one row (shrinks on a phone, never wraps). */
.rating-digits { display: grid; flex: 1 1 auto; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .3rem; min-width: 0}
.library-filters button { min-height: 2.6rem; padding: .6rem 1.2rem; color: var(--paper); border: 1px solid var(--accent); background: var(--accent); font: bold .72rem Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease, color .15s ease}
.library-filters button:hover { color: var(--ink); background: transparent}
.library-filters .text-link { color: var(--muted); align-self: center}
.library-filters .text-link:hover { color: var(--ink)}
.library-item { display: flex; flex-direction: column; gap: .85rem}
.recommendation h3 a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .2em}
.library-meta { margin: .25rem 0 .6rem; color: var(--muted); font: .78rem Arial, sans-serif}
.library-tags, .user-tags { display: flex; flex-wrap: wrap; gap: .35rem}
.user-tag { padding: .18rem .5rem; color: var(--ink); border: 1px solid var(--line); font: .68rem Arial, sans-serif}
.user-tags-empty { color: var(--muted); font: .75rem Arial, sans-serif}
.library-quick-actions, .user-status-actions, .user-rating-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem}
.library-quick-actions { justify-content: flex-end; min-width: 18rem; gap: .5rem .75rem}
.library-item-panel .library-quick-actions { justify-content: flex-start; min-width: 0}
.user-action-button, .user-rating-button { min-height: 2rem; padding: .35rem .55rem; color: var(--ink); border: 1px solid var(--line); background: transparent; font: .68rem Arial, sans-serif; cursor: pointer}
.user-action-button[aria-pressed="true"], .user-rating-button[aria-pressed="true"] { color: var(--paper); border-color: var(--accent); background: var(--accent)}
.user-action-button:hover, .user-rating-button:hover { border-color: var(--accent)}
.user-action-button:focus-visible, .user-rating-button:focus-visible, .rating-digit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.rating-digit, .user-rating-button:not(.user-action-muted) { display: grid; place-items: center; width: 100%; min-height: 0; aspect-ratio: 1; padding: 0; border: 1px solid currentColor; border-radius: 50%; font-size: .72rem; font-weight: 700; line-height: 1; font-variant-numeric: lining-nums}
.rating-digit:hover { color: var(--paper); border-color: var(--accent); background: var(--accent)}
.user-rating-button:not(.user-action-muted):hover { color: var(--detail-ink); border-color: var(--detail-accent); background: var(--detail-accent)}
.user-rating-actions { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .3rem; max-width: 24rem}
.user-rating-actions > span, .user-rating-actions .user-action-muted { grid-column: 1 / -1}
.user-rating-actions .user-action-muted { justify-self: start; border-radius: 999px; padding: .35rem .9rem}
@media (max-width: 400px) {
  .rating-digits, .user-rating-actions { gap: .15rem}
  .rating-digit, .user-rating-button:not(.user-action-muted) { font-size: .62rem}
}
/* Status chips: one segmented group of icon + label buttons (the same markup in the catalog card, the
   film page and /my-library). Adjacent chips share a border (the negative margins), the pressed chip is
   filled with the accent and lifted above its neighbours so its full border shows. The grid auto-fits:
   4 across when there is room, 2x2 in a narrow card or on a phone (<= 480px, forced below). */
.status-segments { display: grid; flex: 1 1 18rem; grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)); min-width: 0; padding: 0 1px 1px 0}
.status-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.25rem; margin: 0 -1px -1px 0; padding: .35rem .5rem; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); line-height: 1.15; text-align: left}
.status-chip[aria-pressed="true"] { z-index: 1}
[data-rating-field][hidden] { display: none !important}
.status-chip { min-width: 2.25rem; padding: .35rem}
.status-chip[aria-pressed="true"] { color: var(--paper); border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent)}
.user-status-actions .status-chip[aria-pressed="true"] { color: var(--detail-ink); border-color: var(--detail-accent); background: var(--detail-accent); box-shadow: inset 0 0 0 1px var(--detail-accent)}
.status-chip-icon { flex: none; width: 1.15rem; height: 1.15rem; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat}
.status-chip--to_watch .status-chip-icon { -webkit-mask-image: url(../img/status-to-watch.svg); mask-image: url(../img/status-to-watch.svg)}
.status-chip--hidden .status-chip-icon { -webkit-mask-image: url(../img/status-hidden.svg); mask-image: url(../img/status-hidden.svg)}
.status-chip--watched .status-chip-icon { -webkit-mask-image: url(../img/status-watched.svg); mask-image: url(../img/status-watched.svg)}
.status-chip--postponed .status-chip-icon { -webkit-mask-image: url(../img/status-postponed.svg); mask-image: url(../img/status-postponed.svg)}
.status-chip--rated .status-chip-icon { display: none}
.status-chip-digit { font: bold .9rem/1 Arial, sans-serif}
.library-item-panel .status-chip { color: var(--ink); border-color: var(--line)}
.library-item-panel .status-chip[aria-pressed="true"] { color: var(--paper); border-color: var(--accent)}
@media (max-width: 480px) {
  .status-segments { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr))}
  .library-rating { flex-basis: 100%; justify-content: space-between}
  .library-quick-actions { min-width: 0}
}
.user-action-muted { color: var(--muted)}
.user-action-message { min-height: 1.2em; margin: .45rem 0 0; color: var(--muted); font: .72rem Arial, sans-serif}
.user-action-message.is-error { color: var(--accent)}
.user-film-panel { display: grid; gap: .9rem; margin: 2rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--detail-rule); background: color-mix(in srgb, var(--detail-paper) 5%, transparent)}
.user-rating-actions { color: var(--detail-mint); font: .72rem Arial, sans-serif}
.user-rating-button { color: var(--detail-paper); border-color: var(--detail-rule)}
.user-rating-button[aria-pressed="true"] { color: var(--detail-ink); background: var(--detail-accent); border-color: var(--detail-accent)}
.user-status-actions .user-action-button { color: var(--detail-paper); border-color: var(--detail-rule)}
.user-status-actions .status-segments { flex-basis: 100%}
.user-status-actions .user-action-button[aria-pressed="true"] { color: var(--detail-ink); background: var(--detail-accent); border-color: var(--detail-accent)}
.user-tags { align-items: center; color: var(--detail-mint); font: .72rem Arial, sans-serif}
.user-tag-select { display: flex; align-items: center; gap: .6rem; color: var(--detail-mint); font: .72rem Arial, sans-serif}
.user-tag-select select { max-width: 14rem; padding: .35rem; color: var(--detail-paper); border: 1px solid var(--detail-rule); background: transparent; font: .85rem Georgia, serif}
.user-film-panel .user-tag { color: var(--detail-paper); border-color: var(--detail-rule)}
.recommendation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem}
.recommendation h3 { margin-top: 0; font-size: 1.2rem; font-weight: 400}
.library-empty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem; border: 1px dashed var(--line); color: var(--muted)}
.library-empty p { margin: 0}
.library-item-panel { display: flex; flex-direction: column; gap: .65rem; padding: .9rem 1rem; border: 1px solid var(--line); background: var(--card)}
.library-item-panel .library-meta { margin: 0}
.library-item-panel select[data-user-tag-select] { min-height: 2.1rem; padding: .3rem .5rem; color: var(--ink); border: 1px solid var(--line); background: var(--paper); font: .72rem Arial, sans-serif}
.library-item-panel [data-user-message], [data-user-tag-message] { min-height: 1.2em; margin: .45rem 0 0; color: var(--muted); font: .72rem Arial, sans-serif}
.library-item-panel [data-user-message].is-error, [data-user-tag-message].is-error { color: var(--accent)}
.library-tag-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem}
.library-tag-form input { min-height: 2.5rem; min-width: 12rem; padding: .45rem .6rem; color: var(--ink); border: 1px solid var(--line); background: var(--paper); font: .9rem Georgia, serif}
.library-tag-form button { min-height: 2.5rem; padding: .5rem 1rem; color: var(--paper); border: 1px solid var(--ink); background: var(--ink); font: bold .72rem Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer}
.library-tag-form button:hover { border-color: var(--accent); background: var(--accent)}
.library-tag-list { display: flex; flex-wrap: wrap; gap: .6rem}
.library-tag-row { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .4rem .35rem .75rem; border: 1px solid var(--line); background: var(--card); font: .72rem Arial, sans-serif}
.library-tag-row .user-tag { padding: 0; border: 0; font-weight: bold}
.library-tag-row button { min-height: 1.7rem; padding: .2rem .5rem; color: var(--muted); border: 1px solid var(--line); background: transparent; font: .64rem Arial, sans-serif; letter-spacing: .03em; text-transform: uppercase; cursor: pointer}
.library-tag-row button:hover { color: var(--paper); border-color: var(--accent); background: var(--accent)}
/* Card themes. Colours come from the palette variables above (theme x mode); these rules add only character: shape, type, layout. */
/* Ticket: a cinema ticket stub with a dashed tear line and two punched notches. */
[data-card-theme="ticket"] :is(.film-grid, .catalog-section) .film-card-body { position: relative; padding: 1rem 1.1rem 1.25rem; border-top: 2px dashed var(--line)}
[data-card-theme="ticket"] :is(.film-grid, .catalog-section) .film-card-body::before, [data-card-theme="ticket"] :is(.film-grid, .catalog-section) .film-card-body::after { position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); content: ''}
[data-card-theme="ticket"] :is(.film-grid, .catalog-section) .film-card-body::before { left: -9px}
[data-card-theme="ticket"] :is(.film-grid, .catalog-section) .film-card-body::after { right: -9px}
[data-card-theme="ticket"] :is(.film-grid, .catalog-section) .card-topline { padding-left: 0; border-left: 0}
[data-card-theme="ticket"] :is(.film-grid, .catalog-section) .film-card h3.card-title { min-height: 0; margin: .55rem 0 .65rem; font: bold 1.5rem/1.05 Arial, sans-serif; letter-spacing: .02em; text-transform: uppercase}
/* Zhurnal: an editorial magazine page, a hairline under each entry, serif display type. */
[data-card-theme="zhurnal"] .film-grid, [data-card-theme="zhurnal"] .catalog-section .film-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem 2.6rem}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .film-card { min-height: 0; padding-bottom: 1.5rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .film-card-body { padding: 0; background: transparent}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-poster { aspect-ratio: 2 / 3; margin-bottom: .75rem; filter: sepia(.35)}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-poster img { object-fit: cover}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-topline { padding-left: 0; border-left: 0; font: 600 var(--zh-fs-micro)/1.3 var(--zh-sans); letter-spacing: var(--zh-track); text-transform: uppercase}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-year, [data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-label, [data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-poster--fallback small { font: 600 var(--zh-fs-micro)/1.3 var(--zh-sans); letter-spacing: var(--zh-track)}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-album-rating { color: var(--accent); font: 800 var(--zh-fs-meta)/1.2 var(--zh-serif-display); letter-spacing: 0}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-age-rating { border-color: var(--accent); color: var(--accent); background: transparent; border-radius: 0; font: 600 var(--zh-fs-micro)/1.1 var(--zh-sans); letter-spacing: .02em}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .film-card h3.card-title { min-height: 0; margin: .3rem 0 .15rem; font: 800 var(--zh-fs-title)/1.08 var(--zh-serif-display); letter-spacing: -.015em; text-transform: none}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-copy { font: 400 var(--zh-fs-body)/1.4 var(--zh-serif-text); -webkit-line-clamp: 3}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-genre-chip { border-radius: 0; text-transform: uppercase; font: 600 var(--zh-fs-micro)/1.3 var(--zh-sans); letter-spacing: var(--zh-track)}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-genre-chips { gap: .5rem; margin: .8rem 0 .9rem; padding-bottom: .9rem}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-genre-chip[data-primary-genre] { border-color: var(--accent); background: var(--accent); color: var(--paper)}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-metadata, [data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-metadata-row { font: 600 var(--zh-fs-meta)/1.4 var(--zh-serif-text)}
[data-card-theme="zhurnal"] :is(.film-grid, .catalog-section) .card-poster--fallback span { font-family: var(--zh-serif-display); font-weight: 800}
[data-card-theme="zhurnal"] .film-card .user-action-button, [data-card-theme="zhurnal"] .film-card .library-rating, [data-card-theme="zhurnal"] .film-card [data-user-message] { font: 600 var(--zh-fs-micro)/1.3 var(--zh-sans); letter-spacing: .02em; text-transform: none}
/* Reestr: a dense registry list. One card = one row of a monospace table: poster | title, meta, rating, chips, personal marks.
   .film-card-link stays the absolute overlay anchor; .film-card-content is dissolved (display: contents) so the poster, the body
   and the marks widget become cells of the card's own two-column grid. Cells that hold links are raised above the overlay. */
[data-card-theme="reestr"] :is(.film-grid:not(.collections-slider), .collection-group-films) { grid-template-columns: minmax(0, 1fr); gap: 1rem}
html[data-card-theme="reestr"][data-grid-cols] :is(.film-grid:not(.collections-slider), .collection-group-films):not(.how-to-theme-preview *, .howto-preview *, .admin-import-results *) { grid-template-columns: minmax(0, 1fr); column-gap: 0}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) { display: grid; grid-template-columns: var(--rs-poster) minmax(0, 1fr); align-items: start; column-gap: 1.25rem; min-height: 0; padding: 1rem .75rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0; background: var(--card); color: var(--ink); font-family: var(--rs-mono)}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row):hover { background: color-mix(in srgb, var(--accent) 8%, var(--card))}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) > .film-card-content { display: contents}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) .card-poster { grid-column: 1; grid-row: 1 / span 2; z-index: 1; align-self: start; aspect-ratio: 2 / 3; border: 1px solid var(--line); background: var(--poster-bg)}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) .film-card-body { grid-column: 2; grid-row: 1; position: relative; z-index: 1; min-width: 0; padding: 0; background: transparent}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) > .user-mark-widget, [data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) > .film-card-admin--standalone { grid-column: 2; grid-row: 2; min-width: 0; margin-top: .75rem; padding: .75rem 0 0; border-top: 1px solid var(--line)}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-topline { align-items: center; gap: .6rem; min-height: 0; padding-left: 0; border-left: 0; color: var(--muted); font: 500 .75rem/1.3 var(--rs-mono); letter-spacing: .04em; text-transform: uppercase}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-album-rating { padding: .12rem .4rem; color: var(--paper); background: var(--accent); font: 600 .75rem/1.2 var(--rs-mono); letter-spacing: .02em}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-year { color: var(--muted); font: 500 .75rem/1.3 var(--rs-mono); letter-spacing: .04em}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-age-rating { flex: none; width: auto; height: auto; min-width: 1.9rem; padding: .12rem .35rem; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; background: transparent; font: 600 .7rem/1.2 var(--rs-mono)}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-age-rating--empty { border-style: dashed; border-color: var(--muted); color: var(--muted)}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card h3.card-title { min-height: 0; margin: .5rem 0 .6rem; font: 600 1.1rem/1.25 var(--rs-mono); letter-spacing: -.01em; text-transform: none}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-genre-chips { gap: .35rem; margin: 0 0 .6rem; padding: 0; border-bottom: 0}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-genre-chip { padding: .12rem .45rem; border-radius: 0; font: 500 .68rem/1.3 var(--rs-mono); letter-spacing: .04em; text-transform: uppercase}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-genre-chip[data-primary-genre] { border-color: var(--ink); background: var(--ink); color: var(--paper)}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-links-row { margin: 0 0 .6rem}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-copy { min-height: 0; margin: 0 0 .8rem; font: 400 .88rem/1.5 var(--rs-sans); -webkit-line-clamp: 3}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-bottom { margin-top: 0}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-metadata { margin-top: 0; font: 400 .78rem/1.4 var(--rs-mono)}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-metadata-row { display: grid; grid-template-columns: var(--rs-label) minmax(0, 1fr); align-items: baseline; column-gap: .75rem; padding: .4rem 0; font: 400 .78rem/1.4 var(--rs-mono)}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-label, [data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-country::before { color: var(--muted); font: 500 .66rem/1.4 var(--rs-mono); letter-spacing: .08em; text-transform: uppercase}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-country::before { content: 'Страна'}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-country .card-value { overflow: visible; white-space: normal}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-poster--fallback { padding: .5rem}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-poster--fallback span { font: 600 1.5rem/1 var(--rs-mono); letter-spacing: -.04em}
[data-card-theme="reestr"] :is(.film-grid, .catalog-section) .card-poster--fallback small { font: 500 .58rem/1.25 var(--rs-mono); letter-spacing: .04em}
[data-card-theme="reestr"] .film-card .status-chip, [data-card-theme="reestr"] .film-card .rating-digit, [data-card-theme="reestr"] .film-card .user-action-button, [data-card-theme="reestr"] .film-card .user-rating-button { border-radius: 0; font-family: var(--rs-mono)}
[data-card-theme="reestr"] .film-card .library-rating, [data-card-theme="reestr"] .film-card [data-user-message] { font-family: var(--rs-mono)}
[data-card-theme="reestr"] .film-card:not(.admin-import-row) > .user-mark-widget .library-quick-actions { align-items: center; gap: .6rem 1.75rem}
[data-card-theme="reestr"] .film-card:not(.admin-import-row) > .user-mark-widget .status-segments { flex: 0 0 15rem}
[data-card-theme="reestr"] .film-card:not(.admin-import-row) > .user-mark-widget .library-rating { flex: 0 1 22rem}
[data-card-theme="reestr"] .film-card:not(.admin-import-row) > .user-mark-widget .rating-digits { flex-basis: 100%; max-width: 22rem}
@media (max-width: 480px) {
  [data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) { column-gap: .75rem; padding: .85rem .6rem; --rs-label: 4.75rem}
  [data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) .card-poster { grid-row: 1}
  [data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) > .user-mark-widget, [data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card:not(.admin-import-row) > .film-card-admin--standalone { grid-column: 1 / -1; grid-row: 2}
  [data-card-theme="reestr"] :is(.film-grid, .catalog-section) .film-card h3.card-title { font-size: 1rem}
}
.empty { color: var(--muted)}
.back-link { display: inline-block; margin: 2rem 0}
.sources-page { max-width: 46rem}
.sources-page h2 { margin: 2rem 0 .5rem; font-size: 1.25rem; font-weight: 400}
.sources-page p { margin: 0 0 .75rem}
.sources-page a:not(.back-link) { color: var(--accent)}
.rightsholder-form { max-width: 36rem}
.auth-field textarea, .auth-field select { width: 100%; padding: .6rem .7rem; color: var(--ink); border: 1px solid var(--ink); background: var(--paper); font: inherit; resize: vertical}
.auth-field textarea:focus-visible, .auth-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px}
.rightsholder-consent label { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink); font: inherit; letter-spacing: 0; text-transform: none}
.rightsholder-consent input { width: auto; min-height: 0; margin-top: .25rem}
.sources-page pre { margin: 0 0 .75rem; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit}
.rightsholder-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden}
.site-footer a { color: var(--ink); text-decoration: underline; text-underline-offset: .25rem}
.film-detail { padding-bottom: 5rem}
.detail-back { margin-bottom: 2.5rem}
.film-detail { position: relative; padding: clamp(1.25rem, 3vw, 2.75rem); color: var(--detail-paper); background: var(--detail-ink)}
.film-detail::before, .film-detail::after { position: absolute; width: 1.2rem; height: 1.2rem; content: ''; pointer-events: none}
.film-detail::before { top: .6rem; left: .6rem; border-top: 1px solid var(--detail-mint); border-left: 1px solid var(--detail-mint)}
.film-detail::after { right: .6rem; bottom: .6rem; border-right: 1px solid var(--detail-mint); border-bottom: 1px solid var(--detail-mint)}
.film-detail a { color: inherit; text-decoration-color: var(--detail-coral); text-underline-offset: .22em}
.film-detail .facts a:not(.wiki-link) { text-decoration: none}
.film-detail .facts a:not(.wiki-link):hover, .film-detail .facts a:not(.wiki-link):focus-visible { text-decoration: underline}
.detail-heading { padding-bottom: clamp(2rem, 5vw, 4.5rem)}
.detail-kicker { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--detail-rule); color: var(--detail-mint); font: .68rem Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase}
.detail-heading .eyebrow { margin-top: 2.2rem; color: var(--detail-accent, #ef9275)}
.film-detail h1 { --title-measure: 900px; max-width: var(--title-measure); margin-bottom: .8rem; color: var(--detail-paper)}
.original-title { margin: 0; color: var(--detail-mint); font-style: italic}
.detail-layout { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 7vw, 7rem); align-items: start}
.detail-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-content: start; min-width: 0}
.detail-gallery figure { min-width: 0; margin: 0}
.detail-gallery .poster { grid-column: 1 / -1; padding: .7rem; background: var(--detail-paper); box-shadow: 0 .6rem 1.4rem color-mix(in srgb, var(--detail-ink) 45%, transparent)}
.detail-gallery img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: cover}
.detail-gallery .poster img { aspect-ratio: 2 / 3}
.gallery-image img { aspect-ratio: 16 / 9; border: 1px solid var(--detail-rule)}
.detail-gallery .gallery-image { position: relative}
.gallery-admin-message { grid-column: 1 / -1; margin: 0; font: .85rem Arial, sans-serif}
.gallery-still-remove-form { position: absolute; top: .4rem; right: .4rem; margin: 0}
.gallery-still-remove-form button { box-sizing: border-box; width: 2.2rem; height: 2.2rem; padding: 0; color: var(--ink); font: 1.3rem/1 Arial, sans-serif; border: 1px solid var(--line); border-radius: .45rem; background: color-mix(in srgb, var(--paper) 88%, transparent); cursor: pointer}
.gallery-still-remove-form button:hover, .gallery-still-remove-form button:focus-visible { color: var(--paper); background: var(--accent); border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px}
.gallery-placeholder { display: grid; min-height: 7rem; grid-column: 1 / -1; padding: 1.2rem; place-items: center; text-align: center; color: var(--detail-mint); border: 1px dashed var(--detail-rule); font: .78rem Arial, sans-serif}
.synopsis { max-width: 38rem; margin-top: .4rem; color: var(--detail-paper); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; white-space: pre-line}
.tmdb-logo-link { display: inline-block; vertical-align: middle}
.tmdb-logo { display: block; height: 12px; width: auto}
.sources-page .tmdb-logo { height: 16px}
.section-label { margin: 0; color: var(--detail-accent, #ef9275); font: bold .68rem/1.2 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase}
.facts { display: grid; gap: 0; margin: clamp(2rem, 5vw, 4rem) 0; border-top: 1px solid var(--detail-rule)}
.facts div { display: grid; grid-template-columns: minmax(6.5rem, .45fr) minmax(0, 1.55fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--detail-rule); min-width: 0}
.facts dt { color: var(--detail-mint); font: .68rem/1.3 Arial, sans-serif; letter-spacing: .11em; text-transform: uppercase}
.facts dd { margin: 0; color: var(--detail-paper)}
/* Genre badges on the detail page (genre-badges task) reuse the catalog card grid's own
   .card-genre-chips/.card-genre-chip markup and CSS classes verbatim (see catalog/show.html.twig
   and _film_card.html.twig) instead of a comma-separated text list -- the primary-genre highlight
   comes along for free via .card-genre-chip[data-primary-genre] above (theme-agnostic, see its own
   comment), so no separate .facts-scoped color/border rule is needed here.

   Layout does need one, though. .card-genre-chips is `display: flex` -- a block-level box, so its
   `width: auto` fills 100% of its containing block. In the card grid that containing block is the
   narrow card face and the wrapper's own margin/padding/border-bottom double as an intentional
   separator before the next card section (rating, watch links) in the same flow. Inside .facts dd
   there is no "next section" to separate from -- each fact row already gets its own separator via
   `.facts div`'s border-bottom above -- so on the detail page the full-width wrapper reads as the
   badge itself stretching across the row, and its own border-bottom draws a second, redundant line
    a few pixels above the row's real one. Full width keeps the badges anchored to the facts column's
    left edge while preserving wrapping on narrow screens, and zeroing the card-only margin/padding/
    border-bottom removes the stray second line. */
 .film-detail .facts .card-genre-chips { display: flex; width: 100%; max-width: 100%; justify-content: flex-start; margin: 0; padding-top: 0; padding-bottom: 0; border-bottom: 0; align-items: center; gap: .5rem}
 .film-detail .facts .card-genre-chip { display: inline-flex; align-items: center; min-height: 2rem; padding: .35rem .7rem; border-radius: 999px; line-height: 1.1; white-space: normal; overflow-wrap: anywhere}
.detail-rating-value { color: var(--detail-paper)}
.detail-rating-badge { display: inline-block; padding: .18rem .55rem; color: var(--detail-ink); background: var(--detail-paper); border: 2px solid var(--detail-accent); border-radius: .35rem; font: bold 1rem/1.2 Arial, sans-serif; letter-spacing: .04em}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0}
.recommendation { max-width: 38rem; padding: 1.25rem 1.4rem; border-left: 2px solid var(--detail-coral); border-radius: .4rem; background: color-mix(in srgb, var(--accent) 9%, transparent)}
.recommendation p:last-child { margin-bottom: 0}
.recommendation h2 { overflow-wrap: anywhere}
/* recommendation--detail: film-detail-only modifier (show.html.twig's single editorial title+body
   box) that lays title and body out as a row, vertically centered -- kept off the bare
   .recommendation selector so library.html.twig's .recommendation-grid cards (title-less
   machine-generated reason strings, several per grid) render exactly as before. */
.recommendation.recommendation--detail { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem}
.recommendation.recommendation--detail p { margin: 0}
.recommendation.recommendation--detail .section-label { flex-shrink: 0}
.recommendation.recommendation--detail p:not(.section-label) { flex: 1 1 12rem; min-width: 0}
.external-links { margin-top: 1rem; padding-top: 0}
.external-links-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .65rem}
.external-links-groups { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start }
.external-links-groups .external-links { flex: 1 1 14rem; min-width: 0 }
.about-film-links { flex-basis: 100% !important }
  .external-link-item { display: block; min-width: 0; max-width: 100% }
  .film-link-summary-row { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; min-width: 0 }
  .film-links-edit-forms, .film-link-edit-disclosure { display: contents }
  .film-link-edit-disclosure > summary { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; color: var(--detail-paper); border: 1px solid var(--detail-coral); border-radius: 999px; background: var(--detail-coral); font: 1rem/1 Arial, sans-serif; cursor: pointer; list-style: none }
  .film-link-edit-icon { display: block; font: bold 1.15rem/1 Arial, sans-serif; transform: rotate(-12deg); }
 .film-link-edit-disclosure > summary::-webkit-details-marker { display: none }
 .film-link-edit-disclosure > summary:hover, .film-link-edit-disclosure > summary:focus-visible { color: var(--detail-paper); background: var(--detail-coral) }
 .film-link-edit-disclosure > summary:focus-visible { outline: 2px solid var(--detail-coral); outline-offset: 2px }
    .film-link-form-block { flex: 0 0 100%; flex-basis: 100%; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; margin-top: .55rem }
  .film-link-admin-controls { display: grid; gap: .55rem; min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .45rem; background: color-mix(in srgb, var(--ink) 4%, transparent) }
 .film-link-edit-form { display: grid; gap: .45rem; min-width: 0 }
 .film-link-edit-form input, .film-link-edit-form select { width: 100%; padding: .45rem .55rem; color: inherit; border: 1px solid currentColor; border-radius: .35rem; background: transparent; font: inherit }
 .film-link-edit-form button { justify-self: start; padding: .45rem .8rem; color: var(--paper); border: 1px solid var(--ink); border-radius: .35rem; background: var(--ink); font: inherit; cursor: pointer }
 .film-link-remove-form { margin: 0 }
  .film-link-remove-form button { padding: .35rem .65rem; color: var(--ink); border: 1px solid var(--line); border-radius: .35rem; background: transparent; font: .75rem Arial, sans-serif; cursor: pointer }
  .film-link-edit-form button:hover, .film-link-remove-form button:hover { border-color: var(--accent); background: var(--accent); color: var(--paper) }
.external-link-annotation { flex-basis: 100%; color: var(--muted); font-size: .88rem}
 .external-link-badge { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; align-self: flex-start; gap: .35rem; min-height: 2rem; padding: .35rem .7rem; color: var(--detail-ink) !important; background: var(--detail-paper); border: 1px solid var(--detail-coral); border-radius: 999px; font: bold .7rem/1 Arial, sans-serif; letter-spacing: .08em; text-decoration: none !important; text-transform: uppercase; overflow-wrap: anywhere}
.external-link-badge:hover, .external-link-badge:focus-visible { color: var(--detail-paper) !important; background: var(--detail-coral)}
.link-with-report { display: inline-flex; align-items: center; gap: .15rem}
/* The button sits on the .film-detail surface, whose background is var(--detail-ink): the icon must use the text colour (--detail-paper), never --detail-ink (that was ink-on-ink, i.e. invisible in every card theme). Quiet by default, full on hover/focus. */
.link-report-button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; color: var(--detail-paper); background: transparent; border: 0; border-radius: 999px; opacity: .4; cursor: pointer}
.link-report-button:hover, .link-report-button:focus-visible { opacity: 1; background: color-mix(in srgb, var(--detail-paper) 16%, transparent)}
.link-report-button:disabled { opacity: .5; cursor: default}
.link-report-icon { width: .85rem; height: .85rem; background: currentColor; -webkit-mask: url(../img/report-link.svg) center / contain no-repeat; mask: url(../img/report-link.svg) center / contain no-repeat}
.link-report-button.is-sent .link-report-icon { -webkit-mask-image: url(../img/status-watched.svg); mask-image: url(../img/status-watched.svg)}
@media (pointer: coarse) { .link-report-button { width: 2.5rem; height: 2.5rem; opacity: .55}}
.wiki-link { display: inline-flex; margin-left: .3em; color: var(--detail-mint); vertical-align: -.12em}
.wiki-icon { display: block; width: 16px; height: 16px}
/* The globe is a black SVG on the surface in .wiki-link, so it flips in dark mode. Coloured badge icons (VK, Kinopoisk, YouTube) keep their natural colours. */
html[data-card-mode="dark"] .wiki-link .wiki-icon { filter: invert(1)}
.wiki-link:hover, .wiki-link:focus-visible { color: var(--detail-coral)}
.site-footer .site-footer-tmdb { margin-top: .6rem; justify-content: flex-start; flex-wrap: wrap; gap: .5rem .75rem; font-size: .7rem}
.site-footer-tmdb .tmdb-logo-link { flex: 0 0 auto}
.site-footer-tmdb span { flex: 1 1 14rem; min-width: 0}
.site-footer-credits { margin-top: .6rem; font-size: .7rem; opacity: .8}
.site-footer .site-footer-page-credits { margin-top: .6rem; flex-direction: column; align-items: flex-start; gap: .25rem; font-size: .7rem; opacity: .8; overflow-wrap: anywhere}
.site-footer { margin-top: 5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); color: var(--muted); font: .78rem Arial, sans-serif}
.skip-link { position: absolute; left: -9999px}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1; padding: .5rem; background: var(--paper)}
[data-card-theme="ticket"] .film-detail h1 { font-family: Arial, sans-serif; font-weight: bold; letter-spacing: .02em; text-transform: uppercase}
[data-card-theme="zhurnal"] .film-detail h1 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 800; font-style: normal; letter-spacing: normal}
[data-card-theme="reestr"] .film-detail h1 { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-weight: 500; letter-spacing: -.03em; text-transform: none}
/* Per-theme --title-char-em for the film-detail title fit (see the .film-detail h1 font-size rule near the top). */
[data-card-theme="ticket"] .film-detail h1 { --title-char-em: .87}
[data-card-theme="zhurnal"] .film-detail h1 { --title-char-em: .72}
[data-card-theme="reestr"] .film-detail h1 { --title-char-em: .66}
[data-card-theme="reestr"] .film-detail::before, [data-card-theme="reestr"] .film-detail::after { display: none}
[data-card-theme="reestr"] .detail-kicker, [data-card-theme="reestr"] .section-label, [data-card-theme="reestr"] .facts dt, [data-card-theme="reestr"] .original-title { font-family: 'IBM Plex Mono', 'Courier New', monospace}
[data-card-theme="reestr"] .synopsis, [data-card-theme="reestr"] .facts dd, [data-card-theme="reestr"] .recommendation { font-family: 'IBM Plex Sans', Arial, sans-serif}
[data-card-theme="reestr"] .detail-rating-badge, [data-card-theme="reestr"] .external-link-badge { border-radius: 0; font-family: 'IBM Plex Mono', monospace}
[data-card-theme="reestr"] .detail-gallery .poster { padding: 0; box-shadow: none; border: 1px solid var(--detail-paper)}
[data-card-theme="reestr"] .facts { border-top-width: 2px; border-top-color: var(--detail-paper)}
[data-card-theme="reestr"] .facts div { border-bottom-color: var(--detail-rule)}
[data-card-theme="reestr"] .recommendation { border-radius: 0}
[data-card-theme="reestr"] .site-nav a, [data-card-theme="reestr"] .site-nav button, [data-card-theme="reestr"] .section-heading span, [data-card-theme="reestr"] .site-footer { font-family: 'IBM Plex Mono', 'Courier New', monospace}
[data-card-theme="reestr"] .brand, [data-card-theme="reestr"] .section-heading h2 { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-weight: 500}
[data-card-theme="zhurnal"] .detail-kicker, [data-card-theme="zhurnal"] .section-label, [data-card-theme="zhurnal"] .facts dt, [data-card-theme="zhurnal"] .eyebrow, [data-card-theme="zhurnal"] .external-link-badge, [data-card-theme="zhurnal"] .collection-group-label, [data-card-theme="zhurnal"] .collection-slide-count, [data-card-theme="zhurnal"] .collection-index-count { font: 600 var(--zh-fs-micro)/1.3 var(--zh-sans); letter-spacing: var(--zh-track)}
[data-card-theme="zhurnal"] .synopsis, [data-card-theme="zhurnal"] .facts dd, [data-card-theme="zhurnal"] .original-title, [data-card-theme="zhurnal"] .recommendation { font-family: var(--zh-serif-text); font-size: var(--zh-fs-meta); font-weight: 600; line-height: 1.4}
[data-card-theme="zhurnal"] .synopsis { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 400; line-height: 1.5}
[data-card-theme="zhurnal"] .synopsis::first-letter { float: left; margin: .05em .12em 0 0; color: var(--accent); font-family: 'Playfair Display', Georgia, serif; font-size: 3.4em; font-weight: 800; line-height: .82}
[data-card-theme="zhurnal"] .detail-rating-badge { border-radius: 0; font-family: var(--zh-serif-display); font-weight: 800; font-style: italic; letter-spacing: 0}
[data-card-theme="zhurnal"] .detail-gallery .poster { filter: sepia(.15)}
[data-card-theme="zhurnal"] .film-detail .card-genre-chip { font: 600 var(--zh-fs-micro)/1.3 var(--zh-sans); letter-spacing: var(--zh-track); text-transform: uppercase}
[data-card-theme="zhurnal"] .section-heading h1 { font-family: var(--zh-serif-display); font-weight: 800}
[data-card-theme="zhurnal"] .collection-hero-body a, [data-card-theme="zhurnal"] .empty { font-family: var(--zh-serif-text); font-size: var(--zh-fs-meta); font-weight: 600}
[data-card-theme="zhurnal"] .site-nav a, [data-card-theme="zhurnal"] .site-nav button, [data-card-theme="zhurnal"] .site-header nav a, [data-card-theme="zhurnal"] .text-link, [data-card-theme="zhurnal"] .back-link, [data-card-theme="zhurnal"] .site-footer, [data-card-theme="zhurnal"] .section-heading span { font: 600 var(--zh-fs-ui)/1.4 var(--zh-sans)}
[data-card-theme="zhurnal"] .card-theme-switcher-label, [data-card-theme="zhurnal"] .card-theme-group-label, [data-card-theme="zhurnal"] .card-theme-button { font: 600 var(--zh-fs-ui)/1.4 var(--zh-sans); letter-spacing: var(--zh-track)}
[data-card-theme="zhurnal"] .brand { font: 800 var(--zh-fs-meta)/1.2 var(--zh-serif-display)}
[data-card-theme="zhurnal"] .section-heading h2, [data-card-theme="zhurnal"] .collection-slide-title, [data-card-theme="zhurnal"] .collection-index-card-body h3 { font: 800 var(--zh-fs-title)/1.08 var(--zh-serif-display)}
[data-card-theme="zhurnal"] .intro h1 { font-family: var(--zh-serif-display); font-weight: 800; letter-spacing: normal}
[data-card-theme="zhurnal"] .lede, [data-card-theme="zhurnal"] .collection-description, [data-card-theme="zhurnal"] .collection-slide-description, [data-card-theme="zhurnal"] .collection-index-description { font-family: var(--zh-serif-text); font-size: var(--zh-fs-body); font-weight: 600; line-height: 1.4}
@media (max-width: 900px) {
[data-card-theme="zhurnal"] .film-grid { grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 600px) {
[data-card-theme="zhurnal"] .film-grid, [data-card-theme="zhurnal"] .catalog-section .film-grid { grid-template-columns: 1fr}
.shell { width: min(100% - 1.5rem, 1120px)}
.site-header .shell { align-items: flex-start; position: relative}
.site-nav { gap: .65rem}
.nav-theme-switcher { position: static}
.card-theme-switcher { left: 1rem; right: 1rem; width: auto; max-width: none}
.intro { padding: 3rem 0 4rem}
.intro h1, .film-detail h1 { --title-size: clamp(2.4rem, 10.3vw, 5rem)}
.film-detail { padding: 1rem}
.detail-layout { grid-template-columns: 1fr; gap: 2.5rem}
.detail-gallery { grid-template-columns: 1fr 1fr}
.detail-gallery .poster { max-width: 20rem}
.facts div { grid-template-columns: minmax(0, 1fr); gap: .35rem}
.section-heading { flex-wrap: wrap; align-items: center}
.section-heading h2 { min-width: 0; flex: 1 1 auto}
.catalog-active-filters { flex: 1 1 100%; order: 3; margin-left: 0}
.section-heading .section-toggle { order: 4; margin-left: auto}
.catalog-filters { padding: 1.4rem; gap: 1.3rem}
.filters-fields { grid-template-columns: repeat(2, minmax(0, 1fr))}
.filters-fields .filter-field-title { grid-column: auto}
.filters-fields--user .filter-field-title { grid-column: span 2}
.filters-toggles { grid-template-columns: 1fr}
.rating-tiers { grid-template-columns: repeat(2, minmax(0, 1fr))}
.filters-actions { align-items: flex-start; flex-wrap: wrap}
.filters-quick-rating { flex-wrap: wrap}
.catalog-tab { min-width: 0; padding-inline: .4rem}
.filters-apply { flex: 1; text-align: center}
.library-filters { padding: 1.4rem; gap: 1.3rem}
.library-empty { align-items: flex-start; flex-direction: column}
}
@media (max-width: 420px) {
.filters-fields { grid-template-columns: 1fr}
.filters-fields .filter-field-title, .filters-fields--user .filter-field-title { grid-column: auto}
.filters-actions-copy { flex-basis: 100%}
.filters-apply { flex: 1 1 auto}
}
.catalog-results.is-loading { cursor: progress}
@media (prefers-reduced-motion: reduce) {
.combobox-caret, .combobox-clear, .combobox-control, .filters-apply, .quick-rating, .catalog-tab, .rating-tier, .card-theme-button { transition: none}
.admin-import-progress::after { animation: none; width: 100%}
}
.collections-slider-section { margin-bottom: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line) }
.collections-slider { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.25rem }
.collection-slide { display: flex; min-width: 0 }
.collection-slide-link { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none }
.collection-slide-body { display: flex; flex: 1 1 auto; flex-direction: column; padding-top: .75rem }
.collection-slide-title { margin: 0 0 .4rem; font: bold 1.1rem Arial, sans-serif }
.collection-slide-description { margin: 0 0 .4rem; color: var(--muted); font-size: .9rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden }
.collection-slide-count { margin: auto 0 0; color: var(--muted); font: bold .72rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase }
.collections-slider-controls { display: none }
.collections-slider-prev, .collections-slider-next { width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer }
.collection-slider-block + .collection-slider-block { margin-top: 2rem }
.collection-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); grid-auto-rows: 1fr; gap: 1.25rem; align-items: stretch }
.collection-index-card { --ci-desc-fs: .9rem; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: var(--card) }
[data-card-theme="zhurnal"] .collection-index-card { --ci-desc-fs: var(--zh-fs-body) }
.collection-index-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .4rem; padding: 1rem }
.collection-group + .collection-group { margin-top: 2rem }
.collection-group[id] { scroll-margin-top: 1rem }
.collection-group-anchor { color: inherit; text-decoration: none }
.collection-group-anchor:hover::after, .collection-group-anchor:focus-visible::after { content: ' #'; opacity: .6 }
.collection-group-heading { margin: 0 0 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); font: bold .85rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.collection-index-card-body h3 { margin: 0; font: bold 1.2rem Arial, sans-serif; min-height: 2.4em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden }
.collection-index-description { margin: 0; color: var(--muted); font-size: var(--ci-desc-fs); line-height: 1.4; min-height: 4.2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden }
/* A card without a description keeps the description's slot so every card has the same height. */
.collection-index-card-body h3:has(+ .collection-index-count) { margin-bottom: calc(4.2 * var(--ci-desc-fs) + .4rem) }
.collection-index-count { margin: auto 0 0; color: var(--muted); font: bold .72rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase }
.collection-hero { display: flex; gap: 1.5rem; align-items: flex-start; margin: 1.5rem 0 }
.collection-hero-cover { flex: 0 0 auto; width: min(36vw, 200px); margin: 0 }
.collection-hero-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--line) }
.collection-hero-body { flex: 1 1 auto; min-width: 0 }
.collection-description { max-width: 42rem; color: var(--muted); font-size: 1.05rem; line-height: 1.55 }
.collection-description p { margin: 0 0 .85rem }
.how-to-section { margin-bottom: 2.5rem }
.site-nav a[aria-current="page"] { font-weight: bold; text-decoration-thickness: 2px }
.video-embed { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: var(--card) }
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0 }
.collection-cover-admin { margin-bottom: 1.5rem; padding: .75rem 1rem; border: 1px solid var(--line); background: var(--card) }
.collection-cover-admin summary { cursor: pointer; font: bold .8rem Arial, sans-serif }
.collection-cover-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem }
.collection-cover-picker button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer }
.collection-cover-picker button:hover, .collection-cover-picker button:focus-visible { border-color: var(--accent) }
.collection-cover-picker img { display: block; width: 72px; height: 108px; object-fit: cover }
.collection-cover-picker .collection-cover-reset { align-self: center; padding: .5rem .8rem; border: 1px solid var(--line); color: var(--ink); font: .75rem Arial, sans-serif }
.admin-collections-table-wrap { overflow-x: auto }
.admin-collections-table { width: 100%; border-collapse: collapse; font: .9rem Arial, sans-serif }
.admin-collections-table th { padding: .6rem .75rem; border-bottom: 2px solid var(--line); color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap }
.admin-collections-table td { padding: .75rem; border-bottom: 1px solid var(--line); vertical-align: middle }
.admin-collections-table tbody tr:hover { background: var(--card) }
.admin-collections-table tr.is-child td:first-child { padding-left: 2rem }
.admin-collections-title { font-weight: bold; white-space: nowrap }
.admin-collections-title a { color: var(--ink); text-decoration: none; vertical-align: middle }
.admin-collections-title a:hover, .admin-collections-title a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: .2rem }
.section-heading > img { object-fit: cover}
.admin-collections-title img { display: inline-block; margin-right: .5rem; border-radius: 50%; vertical-align: middle }
.admin-collections-branch, .admin-collections-groups { color: var(--muted); font-weight: normal }
.admin-collections-branch { margin-right: .5rem }
.admin-badge { display: inline-block; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; white-space: nowrap }
.admin-badge--on { border-color: var(--accent); color: var(--accent) }
.admin-badge--off { color: var(--muted) }
.admin-collections-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center }
.admin-collections-actions form { margin: 0 }
.admin-collections-button { display: inline-block; padding: .35rem .65rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: .75rem Arial, sans-serif; text-decoration: none; cursor: pointer }
.admin-collections-button:hover, .admin-collections-button:focus-visible { border-color: var(--accent); color: var(--accent) }
.admin-collections-button--danger:hover, .admin-collections-button--danger:focus-visible { background: var(--accent); color: var(--paper) }
@media (max-width: 600px) { .collection-hero { flex-direction: column } .collection-hero-cover { width: 160px } }
.channel-list { display: grid; gap: 1rem; margin: 0 0 1rem; padding: 0; list-style: none}
.channel-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); background: var(--card)}
.channel-card h3 { margin: 0 0 .4rem; font-size: 1.2rem}
.channel-card p { margin: 0 0 .6rem}
.channel-card-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; font: .82rem Arial, sans-serif}
.channel-card-icon { flex: 0 0 auto; width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover}
.channel-card-body { min-width: 0}
@media (max-width: 30rem) { .channel-card-icon { width: 3.5rem; height: 3.5rem} }
.how-to { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2.5rem; align-items: start }
.how-to-body { min-width: 0 }
.how-to-toc { position: sticky; top: 1rem; font: .9rem/1.35 Arial, sans-serif }
.how-to-toc-title { margin: 0 0 .6rem; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase }
.how-to-toc-list { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line) }
.how-to-toc-list a { display: block; margin-left: -2px; padding: .5rem .8rem; border-left: 2px solid transparent; color: var(--ink); text-decoration: none }
.how-to-toc-list a:hover { background: color-mix(in srgb, var(--ink) 6%, var(--paper)) }
.how-to-toc-list a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px }
.how-to-toc-list a[aria-current] { border-left-color: var(--accent); background: color-mix(in srgb, var(--ink) 8%, var(--paper)); font-weight: bold }
.how-to-toc-name { display: block }
.how-to-toc-hint { display: block; margin-top: .1rem; color: var(--muted); font-size: .76rem; font-weight: normal }
.how-to-section, .how-to-section h2 { scroll-margin-top: 1rem }
.how-to-top { color: var(--muted); font: .75rem Arial, sans-serif; white-space: nowrap }
.how-to-top:hover { color: var(--ink) }
.how-to-themes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 1.25rem; align-items: start; margin-top: 1rem }
.how-to-theme-pick { display: flex; flex-direction: column; gap: .9rem }
.how-to-theme-preview { padding: .9rem; border: 1px dashed var(--line); background: var(--paper) }
.how-to-theme-preview .film-grid { grid-template-columns: minmax(0, 1fr) }
@media (max-width: 62rem) {
  .how-to { grid-template-columns: minmax(0, 1fr); gap: 1rem }
  .how-to-toc { top: 0; z-index: 20; margin: 0 -1.25rem; padding: .5rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--paper) }
  .how-to-toc-title, .how-to-toc-hint { display: none }
  .how-to-toc-list { position: relative; display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain; border-left: 0; scrollbar-width: none }
  .how-to-toc-list::-webkit-scrollbar { display: none }
  .how-to-toc-list li { flex: 0 0 auto }
  .how-to-toc-list a { margin: 0; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap }
  .how-to-toc-list a[aria-current] { border-color: var(--ink); color: var(--paper); background: var(--ink) }
  .how-to-section, .how-to-section h2 { scroll-margin-top: 4.5rem }
}
@media (max-width: 600px) { .how-to-toc { margin: 0 -.75rem; padding: .5rem .75rem } }
@media (max-width: 40rem) { .how-to-themes { grid-template-columns: minmax(0, 1fr) } }
.how-to-section > p { max-width: 46rem }
.how-to-fit-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 46rem; margin-top: 1rem }
.how-to-fit-link { display: grid; gap: .25rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--card); color: var(--ink); text-decoration: none }
.how-to-fit-link strong { font-size: 1.35rem }
.how-to-fit-link span { color: var(--muted); font: .82rem Arial, sans-serif }
.how-to-fit-link:hover, .how-to-fit-link:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)) }
.how-to-fit-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }
@media (max-width: 30rem) { .how-to-fit-links { grid-template-columns: minmax(0, 1fr) } }
.how-to-list { max-width: 46rem; margin: 0; padding-left: 1.25rem; display: grid; gap: .6rem }
.how-to-list + .how-to-list, .how-to-section > p + .how-to-list { margin-top: .8rem }
.how-to-buttons { padding-left: 0; list-style: none }
.how-to-buttons > li { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .8rem; align-items: start }
.howto-legend-chip { display: block; width: 3rem; pointer-events: none }
.howto-legend-chip .status-chip { width: 100%; margin: 0 }
.howto-legend-digits .rating-digit { width: 2rem; margin: 0 auto }
.howto-example { margin: 1rem 0 0 }
.howto-example-note { margin: 0 0 .6rem; color: var(--muted); font: .78rem Arial, sans-serif }
.howto-tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 1.25rem; align-items: start }
.howto-tour--card { grid-template-columns: minmax(0, 24.5rem) minmax(16rem, 34rem) }
.howto-stage { position: relative; overflow: hidden; min-width: 0; padding: .9rem; border: 1px dashed var(--line); background: var(--paper) }
.howto-preview { pointer-events: none; user-select: none; -webkit-user-select: none; min-width: 0 }
.howto-preview a, .howto-preview button, .howto-preview select { cursor: default }
.howto-preview .film-card-link { cursor: default }
.howto-preview [data-howto-path] > :not([data-howto-path]):not([data-howto-on]) { opacity: .62; transition: opacity .25s }
.howto-preview .film-grid, .howto-preview .film-grid.howto-card-grid { grid-template-columns: minmax(0, 1fr) }
.howto-preview .film-card { min-width: 0 }
.howto-preview--film .film-detail { padding: 1.25rem }
.howto-preview--film .film-detail h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); letter-spacing: -.04em }
.howto-preview--film .detail-heading { padding-bottom: 1.5rem }
.howto-preview--film .detail-heading .eyebrow { margin-top: 1.2rem }
.howto-preview--film .detail-layout { gap: 1.5rem; margin-top: .9rem }
.howto-preview--film .detail-back { margin: 0 0 .75rem }
.howto-preview--film .facts { margin: 1.2rem 0 }
.howto-preview--film .synopsis { font-size: 1rem }
.howto-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.howto-preview--film .user-film-panel { margin: 1rem 0 0 }
.howto-preview--collection .collection-hero-cover { width: min(30vw, 150px) }
.howto-cover-fallback { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 3; color: var(--muted); border: 1px solid var(--line); font: .75rem Arial, sans-serif }
.howto-ring { position: absolute; z-index: 2; box-sizing: border-box; border: 3px solid var(--accent); border-radius: 4px; box-shadow: 0 0 0 2px var(--paper); pointer-events: none }
.howto-ring.is-animated { transition: left .25s, top .25s, width .25s, height .25s }
.howto-ring[hidden] { display: none }
.howto-panel { display: flex; flex-direction: column; position: sticky; top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--ink) 6%, var(--paper)); font: .92rem/1.5 Arial, sans-serif }
.howto-panel[hidden] { display: none }
.howto-panel-count { margin: 0 0 .3rem; color: var(--muted); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase }
.howto-panel-title { margin: 0 0 .5rem; color: var(--ink); font: bold 1.15rem/1.25 Georgia, serif }
.howto-panel-text { margin: 0 0 1rem; color: var(--ink) }
.howto-panel-nav { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem }
.howto-nav-button { min-height: 2.25rem; padding: .35rem .85rem; color: var(--paper); border: 1px solid var(--ink); background: var(--ink); font: bold .82rem Arial, sans-serif; cursor: pointer }
.howto-nav-button:disabled { color: var(--muted); border-color: var(--line); background: transparent; cursor: default }
.howto-nav-button:focus-visible, .howto-dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }
.howto-dots { display: flex; flex: 1 0 100%; flex-wrap: nowrap; justify-content: center; order: -1; gap: 0; margin-bottom: .3rem; min-width: 0 }
.howto-dot { position: relative; flex: 1 1 0; min-width: .9rem; max-width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: transparent; cursor: pointer }
.howto-dot::before { position: absolute; top: 50%; left: 50%; width: .6rem; height: .6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--muted); transform: translate(-50%, -50%); content: '' }
.howto-dot[aria-current="step"]::before { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent) }
.howto-steps { margin: 1rem 0 0; padding-left: 1.4rem; max-width: 46rem }
.howto-steps li { margin-bottom: .45rem }
.howto-example.is-tour .howto-steps { display: none }
@media (max-width: 900px) {
  .howto-tour, .howto-tour--card { grid-template-columns: minmax(0, 1fr) }
  .howto-tour--card .howto-stage { max-width: 24.5rem }
  .howto-panel { display: flex; flex-direction: column; position: sticky; top: auto; bottom: .5rem; z-index: 5; box-shadow: 0 .4rem 1rem color-mix(in srgb, var(--ink) 25%, transparent) }
}
@media (max-width: 600px) {
  .howto-stage { padding: .5rem }
  .howto-tour--card .howto-stage { max-width: none }
}
@media (prefers-reduced-motion: reduce) { .howto-ring.is-animated, .howto-preview [data-howto-path] > :not([data-howto-path]):not([data-howto-on]) { transition: none } }
.card-collection-remove { position: absolute; top: .5rem; right: .5rem; z-index: 3; margin: 0 }
.card-collection-remove button { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; color: #f6f0e4; background: rgba(23, 34, 31, .82); border: 1px solid #718178; border-radius: 50%; cursor: pointer; transition: background .15s, border-color .15s }
.card-collection-remove svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
.card-collection-remove button:hover, .card-collection-remove button:focus-visible { background: var(--accent); border-color: var(--accent); outline: none }
.card-collection-remove button:focus-visible { box-shadow: 0 0 0 2px #f6f0e4 }
.collection-films-admin { margin-bottom: 1.5rem; padding: .75rem 1rem; border: 1px solid var(--line); background: var(--card) }
.collection-films-admin summary { cursor: pointer; font: bold .8rem Arial, sans-serif }
.collection-films-admin .admin-links-error, .collection-films-admin .admin-links-success { margin: 0 0 .6rem; font: .85rem Arial, sans-serif }
.collection-films-count { display: inline-block; min-width: 1.4rem; margin-left: .3rem; padding: 0 .4rem; color: var(--paper); background: var(--muted); border-radius: 1rem; font-weight: normal; text-align: center }
.collection-films-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; padding: 0; list-style: none }
.collection-films-chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .2rem .25rem .2rem .65rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--paper); font: .8rem Arial, sans-serif }
.collection-films-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.collection-films-chip small { color: var(--muted) }
.collection-films-chip form { margin: 0 }
.collection-films-chip button { width: 1.4rem; height: 1.4rem; padding: 0; color: var(--ink); background: transparent; border: 0; border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer }
.collection-films-chip button:hover, .collection-films-chip button:focus-visible { color: var(--paper); background: var(--accent) }
.collection-films-add { position: relative; max-width: 28rem }
.collection-films-add label { display: block; margin-bottom: .3rem; color: var(--muted); font: .75rem Arial, sans-serif }
.collection-films-add-row { display: flex; gap: .4rem }
.collection-films-add input[type="text"] { flex: 1; min-width: 0; padding: .45rem .6rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); font: .9rem Arial, sans-serif }
.collection-films-add button { padding: .45rem .8rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); font: .8rem Arial, sans-serif; cursor: pointer }
.collection-films-add button:hover, .collection-films-add button:focus-visible { border-color: var(--accent); color: var(--accent) }
.collection-films-results { position: absolute; left: 0; right: 0; z-index: 10; max-height: 16rem; margin: .2rem 0 0; padding: 0; overflow-y: auto; list-style: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .18); font: .85rem Arial, sans-serif }
.collection-films-results[hidden] { display: none }
.collection-films-results li { padding: .5rem .7rem; cursor: pointer }
.collection-films-results li[aria-selected="true"], .collection-films-results li:hover { color: var(--paper); background: var(--accent) }
.collection-films-results li.is-present { color: var(--muted); cursor: default }
@media (max-width: 600px) { .collection-films-add { max-width: none } .card-collection-remove button { width: 2.3rem; height: 2.3rem } }
.collection-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.25rem }
.collection-sort-label { color: var(--muted); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase }
.collection-sort-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 2px }
.collection-sort-option { padding: .4rem .95rem; border-radius: 999px; color: var(--ink); font-size: .9rem; text-decoration: none; white-space: nowrap }
.collection-sort-option:hover { color: var(--accent) }
.collection-sort-option[aria-pressed="true"] { background: var(--accent); color: var(--paper) }
.collection-sort-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* Card row alignment. Grids top-align cards (align-items: start), so every section of a card sat at the
   height its own title/genres/copy produced. Fallback for browsers without subgrid: cards stretch to the
   row height and the status widget is pinned to the card bottom. */
.film-grid, .collection-group-films { align-items: stretch }
html:not([data-card-theme="reestr"]) .film-grid > .film-card:not(.admin-import-row):not(.howto-card-marks), html:not([data-card-theme="reestr"]) .collection-group-films > .film-card:not(.admin-import-row):not(.howto-card-marks) { display: flex; flex-direction: column }
html:not([data-card-theme="reestr"]) .film-grid > .film-card:not(.admin-import-row):not(.howto-card-marks) > .film-card-content, html:not([data-card-theme="reestr"]) .collection-group-films > .film-card:not(.admin-import-row):not(.howto-card-marks) > .film-card-content { flex: 1 1 auto }
/* Subgrid: a card spans 10 rows of the grid (poster, topline, title, genres, links, synopsis, director,
   cast, country, status widget); the nested wrappers re-export those rows, so each row is as tall as the
   tallest card's section and neighbouring cards line up section by section. A missing field leaves its
   row empty. Reestr is a one-card-per-row list, nothing to align there. */
@supports (grid-template-rows: subgrid) {
  html:not([data-card-theme="reestr"]) .film-grid > .film-card:not(.admin-import-row):not(.howto-card-marks), html:not([data-card-theme="reestr"]) .collection-group-films > .film-card:not(.admin-import-row):not(.howto-card-marks) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 10; row-gap: 0 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) > .film-card-content { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 9; row-gap: 0 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) > .film-card-content > .card-poster { grid-row: 1 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) > .film-card-content > .film-card-body { display: grid; grid-template-rows: subgrid; grid-row: 2 / span 8; row-gap: 0; align-content: stretch }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .film-card-body > .card-topline { grid-row: 1 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .film-card-body > .card-title { grid-row: 2 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .film-card-body > .card-genre-chips { grid-row: 3; align-self: start }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .film-card-body > .card-links-row { grid-row: 4; align-self: start }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .film-card-body > .card-copy { grid-row: 5 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .film-card-body > .card-bottom { display: grid; grid-template-rows: subgrid; grid-row: 6 / span 3; row-gap: 0; margin-top: 0 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .film-card-body > .card-bottom > .card-metadata { grid-row: 1 / span 3; row-gap: 0; display: grid; grid-template-rows: subgrid }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .card-metadata > .card-director { grid-row: 1 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .card-metadata > .card-cast { grid-row: 2 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) .card-metadata > .card-country { grid-row: 3 }
  html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) > .user-mark-widget, html:not([data-card-theme="reestr"]) :is(.film-grid, .collection-group-films) > .film-card:not(.admin-import-row):not(.howto-card-marks) > .film-card-admin--standalone { grid-row: 10 }
}

/* admin collection edit */
.admin-collection-edit { max-width: 56rem; margin-inline: auto }
.admin-collection-heading { margin: 0 0 1.25rem; overflow-wrap: anywhere }
.section-heading .admin-collection-heading { margin: 0 }
.admin-collection-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem }
.admin-card { min-width: 0; margin: 0; padding: 1.1rem 1.25rem 1.25rem; border: 1px solid var(--line); background: var(--card); display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem }
.admin-card > legend { padding: 0 .5rem; margin-left: -.5rem; color: var(--muted); font: bold .72rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase }
.admin-card label:not(.admin-check):not(.collection-film-position):not(.collection-film-group):not(.collection-film-remove):not(.filter-label) { display: grid; gap: .35rem; color: var(--ink); font: bold .8rem Arial, sans-serif }
.admin-card input[type="text"], .admin-card input[type="url"], .admin-card input[type="search"], .admin-card input[type="number"], .admin-card input[type="file"], .admin-card textarea, .admin-card select { box-sizing: border-box; width: 100%; min-height: 2.6rem; padding: .5rem .7rem; color: var(--ink); border: 1px solid var(--line); border-radius: 0; background: var(--paper); font: normal .95rem Arial, sans-serif }
.admin-card textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45 }
.admin-card input[type="file"] { padding: .4rem .5rem; font-size: .85rem }
.admin-card input:focus-visible, .admin-card textarea:focus-visible, .admin-card select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.admin-card .admin-links-error { margin: 0 }
.admin-hint { margin: -.5rem 0 0; color: var(--muted); font: .78rem Arial, sans-serif }
.admin-preview { justify-self: start; max-width: 100%; height: auto; border: 1px solid var(--line); background: var(--paper) }
.admin-preview--icon { border-radius: 50%; object-fit: cover }
.admin-checks { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem }
.admin-check { display: inline-flex; align-items: center; gap: .55rem; font: .9rem Arial, sans-serif; cursor: pointer }
.admin-check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent) }
.admin-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; box-sizing: border-box; min-height: 2.6rem; padding: .5rem 1.1rem; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; background: var(--paper); font: bold .8rem Arial, sans-serif; letter-spacing: .04em; text-decoration: none; cursor: pointer }
.admin-btn:hover, .admin-btn:focus-visible { color: var(--accent); border-color: var(--accent) }
.admin-btn--primary { color: var(--paper); background: var(--ink) }
.admin-btn--primary:hover, .admin-btn--primary:focus-visible { color: var(--paper); background: var(--accent) }
.admin-btn--small { min-height: 2.2rem; padding: .3rem .65rem; border-color: var(--line); font-weight: normal; font-size: .78rem; letter-spacing: 0 }
.admin-btn--danger:hover, .admin-btn--danger:focus-within { color: var(--paper); border-color: var(--accent); background: var(--accent) }
.admin-form-actions { display: flex; flex-wrap: wrap; gap: .6rem }
.admin-subheading { margin: 1.75rem 0 .5rem }
.admin-children { margin: 0 0 1rem; padding-left: 1.2rem; font: .9rem Arial, sans-serif; line-height: 1.7 }
.admin-collection-edit .back-link { display: inline-block; margin-top: 1.25rem }
.admin-card .collection-film-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none }
.admin-card .collection-film-list:empty { display: none }
.collection-film-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding: .6rem; border: 1px solid var(--line); background: var(--paper) }
.collection-film-poster { flex: none; width: 2.75rem; height: 4rem; object-fit: cover; background: var(--card) }
.collection-film-title { flex: 1 1 calc(100% - 4rem); min-width: 0; font: bold .92rem Arial, sans-serif; overflow-wrap: anywhere }
.collection-film-title em { color: var(--muted); font-weight: normal; font-size: .78rem }
.admin-card .collection-film-position, .admin-card .collection-film-group { display: grid; gap: .2rem; color: var(--muted); font: .68rem Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase }
.collection-film-position { flex: 0 0 5.5rem }
.collection-film-group { flex: 1 1 9rem }
.collection-film-use-poster { margin-left: auto }
.collection-film-row input[type="number"], .collection-film-row input[type="text"] { min-height: 2.2rem !important; padding: .3rem .5rem !important; font-size: .88rem !important }
.collection-film-move, .collection-film-link { width: 2.2rem; padding: .3rem 0; text-align: center; text-decoration: none }
/* One look for every inline admin form of the film page (year, genre, collection, delete): same height,
   font, radius and colours (all derived from the card's own text colour, so every card theme works). */
body[data-admin-mode="on"] form:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; min-width: 0; margin: .6rem 0 0 }
:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) [hidden] { display: none }
:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) select, :is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) input[type="text"], :is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) input[type="number"], :is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) button { box-sizing: border-box; min-width: 0; min-height: 2.2rem; padding: .35rem .7rem; color: inherit; font: .85rem/1.2 Arial, sans-serif; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: .45rem; background: color-mix(in srgb, currentColor 6%, transparent) }
:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) select, :is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) input[type="text"] { flex: 1 1 12rem; max-width: 100% }
:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) input[type="number"] { flex: 0 0 6rem; width: 6rem }
:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) select option { color: initial }
:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) button { flex: none; font-weight: 600; white-space: nowrap; cursor: pointer }
:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) button:hover { color: var(--accent); border-color: var(--accent) }
:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) select:focus-visible, :is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) input:focus-visible, :is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.film-delete-form { margin-top: 1.5rem }
:is(.film-year-form, .film-age-rating-form, .film-genre-add-form, .film-collection-add-form, .film-delete-form) .film-delete-button:hover { color: var(--paper); background: var(--accent); border-color: var(--accent) }
/* The year sits beside its edit form; flash messages take a full row. */
body[data-admin-mode="on"] .facts dd:has(> :is(.film-year-form, .film-age-rating-form)) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem }
body[data-admin-mode="on"] .facts dd:has(> :is(.film-year-form, .film-age-rating-form)) :is(.film-year-form, .film-age-rating-form) { margin: 0 }
.facts dd:has(> :is(.film-year-form, .film-age-rating-form)) > .admin-links-error, .facts dd:has(> :is(.film-year-form, .film-age-rating-form)) > .admin-links-success { flex-basis: 100%; margin: 0 }
.facts dd { min-width: 0 }
.collection-film-remove { position: relative }
.collection-film-remove input { position: absolute; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none }
.admin-card .catalog-combobox { margin-top: .6rem; padding-top: .9rem; border-top: 1px solid var(--line) }
.admin-card .filter-label { color: var(--ink); font: bold .8rem Arial, sans-serif }
.admin-card .combobox-control { padding: 0; border-color: var(--line); background: var(--paper) }
.admin-card .combobox-control:hover { background: var(--paper); border-color: var(--ink) }
.admin-card .combobox-control input { border: 0; background: transparent; box-shadow: none }
.admin-card .combobox-list li[aria-selected="true"] { color: var(--paper); background: var(--accent) }
@media (max-width: 600px) { .admin-card { padding: .9rem } .admin-form-actions .admin-btn { flex: 1 1 100% } .collection-film-position { flex: 1 1 5.5rem } .collection-film-group { flex: 2 1 8rem } .collection-film-use-poster { margin-left: 0; flex: 1 1 100% } }
.admin-publish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; padding: 1rem 1.25rem; border: 2px solid var(--ink); background: var(--card) }
.admin-publish-status { margin: 0; font: .9rem Arial, sans-serif }
.admin-publish-status strong { text-transform: uppercase; letter-spacing: .06em }
.admin-publish:not(.is-published) .admin-publish-status strong { color: var(--accent) }
.admin-btn--big { min-height: 3.6rem; padding: .8rem 2.5rem; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase }
.admin-btn--warn { background: var(--paper) }
@media (max-width: 600px) { .admin-publish { flex-direction: column; align-items: stretch; text-align: center } .admin-btn--big { width: 100%; padding-inline: 1rem } }
.admin-channels .admin-collections-title img { border-radius: 50%; object-fit: cover }
.admin-collections-button[disabled] { opacity: .35; cursor: default }
.admin-order .order-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; align-items: start }
.admin-order .order-panel h3 { margin: 0 0 .75rem; font: bold .8rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.admin-order .order-hint, .admin-order .order-films-hint { color: var(--muted); font: .85rem Arial, sans-serif }
.admin-order .order-status { font: .85rem Arial, sans-serif; color: var(--muted) }
.admin-order .order-status.is-ok { color: var(--ink) }
.admin-order .order-status.is-error { color: var(--accent); font-weight: bold }
.admin-order .order-list { list-style: none; margin: 0; padding: 0 }
.admin-order .order-list .order-list { margin: .35rem 0 0 1.5rem }
.admin-order .order-item { margin: 0 0 .35rem }
.admin-order .order-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border: 1px solid var(--line); background: var(--paper) }
.admin-order .order-item.is-dragging > .order-row { border-color: var(--accent); background: var(--card); opacity: .8 }
.admin-order .order-handle { cursor: grab; touch-action: none; user-select: none; padding: .2rem .4rem; color: var(--muted); font-size: 1.1rem; line-height: 1 }
.admin-order .order-pick { flex: 1; padding: 0; border: 0; background: none; color: var(--ink); font: bold .95rem Arial, sans-serif; text-align: left; cursor: pointer }
.admin-order .order-pick:hover, .admin-order .order-pick:focus-visible { color: var(--accent) }
.admin-order .order-pick.is-active { color: var(--accent); text-decoration: underline; text-underline-offset: .2rem }
.admin-order .order-move { display: flex; gap: .25rem; margin-left: auto }
.admin-order .order-poster { flex: none; width: 36px; height: 54px; object-fit: cover }
.admin-order .order-film-title { flex: 1; font: .9rem Arial, sans-serif }
.admin-order .order-group { padding: .1rem .4rem; border: 1px solid var(--line); color: var(--muted); font: .7rem Arial, sans-serif }
.admin-order .order-group-row { background: var(--card); border-style: dashed }
.admin-order .order-group-title { flex: 1; font: bold 1rem Arial, sans-serif }
.admin-order .order-group-item > .order-list { margin: .35rem 0 .35rem 1.5rem }
.admin-order .order-dropzone { min-height: 1.6rem; padding-bottom: .1rem }
.admin-order .order-dropzone:empty { border: 1px dashed var(--line) }
.admin-order .order-ungrouped-title { margin: 1rem 0 .5rem; font: bold .8rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.admin-order .order-group-select { max-width: 9rem; font: .8rem Arial, sans-serif }
.admin-users-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin: 0 0 1.25rem }
.admin-users-stats > div { padding: .7rem .85rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card) }
.admin-users-stats dt { color: var(--muted); font: .68rem Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase }
.admin-users-stats dd { margin: .25rem 0 0; font: bold 1.4rem Arial, sans-serif }
.admin-users-table td { white-space: nowrap }
.admin-users-email { color: var(--muted); font-size: .8rem }
.admin-users-note { margin: .6rem 0 1.5rem; color: var(--muted); font: .8rem Arial, sans-serif }

/* Analytics keeps the journal/registry rhythm but gives the report a clear reading order. */
.admin-analytics-intro, .admin-analytics-explanation { max-width: 58rem; color: var(--muted); font: .85rem/1.5 Arial, sans-serif }
.admin-analytics-summary, .admin-analytics-comparison, .admin-analytics-daily { margin-top: 1.75rem }
.admin-analytics-summary h3, .admin-analytics-comparison h3, .admin-analytics-daily h3 { margin-bottom: .75rem }
.admin-analytics-summary-grid, .admin-analytics-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--line); background: var(--line) }
.admin-analytics-summary-grid > div, .admin-analytics-comparison-grid > div { min-width: 0; padding: .85rem 1rem; background: var(--paper) }
.admin-analytics-summary-grid dt { color: var(--muted); font: .68rem/1.3 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase }
.admin-analytics-summary-grid dd { margin: .25rem 0 0; font: 700 1.35rem/1.1 Arial, sans-serif }
.admin-analytics-comparison-grid strong, .admin-analytics-comparison-grid span { display: block }
.admin-analytics-comparison-grid strong { font: 700 1rem/1.2 Arial, sans-serif }
.admin-analytics-comparison-grid span { margin-top: .25rem; color: var(--muted); font: .85rem/1.4 Arial, sans-serif }
.admin-analytics-daily + h3, .admin-analytics-daily + h3 + h3 { margin-top: 1.75rem }
.admin-analytics-daily table { min-width: 34rem }
.admin-analytics-summary-grid > div:nth-child(5) { grid-column: 1 / -1 }

@media (max-width: 900px) {
  .admin-analytics-summary-grid, .admin-analytics-comparison-grid { grid-template-columns: minmax(0, 1fr) }
  .admin-analytics-summary-grid > div:nth-child(5) { grid-column: auto }
}

@media (prefers-reduced-motion: reduce) {
  .admin-analytics-summary-grid, .admin-analytics-comparison-grid { scroll-behavior: auto }
}
.admin-visits-periods { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem }
.admin-visits-chip { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; font: .85rem Arial, sans-serif; text-decoration: none }
.admin-visits-chip[aria-current="page"] { border-color: currentColor; font-weight: bold }
.admin-visits-range { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; margin: 0 0 .8rem; font: .85rem Arial, sans-serif }
.admin-visits-range label { display: grid; gap: .2rem; color: var(--muted) }
.admin-visits-secondary { opacity: .65 }
.admin-visits-bar { display: inline-block; width: calc(var(--share, 0) * .08rem); min-width: 1px; height: .6rem; border-radius: .2rem; background: currentColor; vertical-align: middle }
.admin-visits-unconfirmed { margin: 1.25rem 0 }
.admin-visits-unconfirmed summary { cursor: pointer; color: var(--muted); font: .9rem Arial, sans-serif }
.admin-visits-daily td, .admin-visitors-table td, .admin-visits-registered td, .admin-unconfirmed-table td { white-space: nowrap }

/* Per-user column count (/my-settings -> user.grid_columns, html[data-grid-cols]). Absent attribute = untouched theme layout.
   Narrow screens cap the choice (4 -> 3 up to 900px, 3/4 -> 2 up to 600px). Reestr film lists stay one card per row (display: block);
   the how-to previews and the admin import list keep their own layout. */
html[data-grid-cols="2"] { --grid-cols: 2 }
html[data-grid-cols="3"] { --grid-cols: 3 }
html[data-grid-cols="4"] { --grid-cols: 4 }
@media (max-width: 900px) { html[data-grid-cols="4"] { --grid-cols: 3 } }
@media (max-width: 600px) { html[data-grid-cols="3"], html[data-grid-cols="4"] { --grid-cols: 2 } }
html[data-grid-cols] :is(.film-grid, .collection-group-films, .collection-index-grid):not(.how-to-theme-preview *, .howto-preview *, .admin-import-results *) { grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)) }
@media (max-width: 600px) { html[data-grid-cols] :is(.film-grid, .collection-group-films, .collection-index-grid):not(.how-to-theme-preview *, .howto-preview *, .admin-import-results *) { column-gap: .9rem } }
.settings-grid-options { display: flex; flex-wrap: wrap; gap: .6rem }
.settings-grid-option { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-width: 4.5rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--ink); font: 1rem Arial, sans-serif; cursor: pointer }
.settings-grid-option:hover, .settings-grid-option:has(input:checked) { border-color: var(--accent) }
.settings-grid-option input { margin: 0; accent-color: var(--accent) }
.settings-group--grid { margin-top: 1.5rem }
/* Admin: countries that take part in the age-rating median. Colours come from the card-theme variables, so every theme works. */
.admin-age-countries .age-countries-hint { max-width: 46rem; margin: 1rem 0; color: var(--muted); font: .9rem/1.55 Arial, sans-serif }
.admin-age-countries code { padding: .1rem .35rem; border: 1px solid var(--line); background: var(--card); font-size: .85em }
.age-countries-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin: 1rem 0 }
.age-countries-counter { margin: 0; font: .95rem Arial, sans-serif }
.age-countries-counter strong { color: var(--accent); font-size: 1.25rem }
.age-countries-warning { margin: 0; padding: .35rem .7rem; border-left: 3px solid var(--accent); color: var(--accent); font: bold .8rem Arial, sans-serif }
.age-countries-warning[hidden], .age-countries-bulk[hidden] { display: none }
.age-countries-bulk { display: flex; gap: .5rem; margin-left: auto }
.age-countries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; margin: 0 0 1.5rem; padding: 0; list-style: none }
.age-country { position: relative; border: 1px solid var(--line); background: var(--card); transition: border-color .15s, box-shadow .15s }
.age-country:has(.age-country-input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) }
.age-country:not(:has(.age-country-input:checked)) .age-country-flag { filter: grayscale(1); opacity: .5 }
.age-country:not(:has(.age-country-input:checked)) .age-country-text { opacity: .6 }
.age-country--other { border-style: dashed }
.age-country-label { display: flex; align-items: center; gap: .75rem; min-height: 4.25rem; padding: .75rem .9rem; cursor: pointer }
.age-country-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.age-country-switch { position: relative; flex: none; order: 3; margin-left: auto; width: 2.6rem; height: 1.45rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); transition: background .15s }
.age-country-switch::after { position: absolute; top: 50%; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ink); transform: translateY(-50%); transition: left .15s, background .15s; content: '' }
.age-country-input:checked + .age-country-switch { background: var(--accent); border-color: var(--accent) }
.age-country-input:checked + .age-country-switch::after { left: 1.3rem; background: var(--paper) }
.age-country-input:focus-visible + .age-country-switch { outline: 2px solid var(--accent); outline-offset: 3px }
.age-country-flag { flex: none; order: 1; font-size: 1.9rem; line-height: 1 }
.age-country-text { display: grid; gap: .1rem; order: 2; min-width: 0 }
.age-country-text strong { font: bold .95rem Arial, sans-serif }
.age-country-text small { color: var(--muted); font: .75rem/1.3 Arial, sans-serif; overflow-wrap: anywhere }
@media (max-width: 600px) { .age-countries-grid { grid-template-columns: 1fr } .age-countries-bulk { width: 100%; margin-left: 0 } .age-countries-bulk .admin-btn { flex: 1 1 0 } }
.film-synopsis-edit { margin-top: .8rem; font: .85rem/1.3 Arial, sans-serif }
.film-synopsis-edit summary { cursor: pointer; color: var(--muted) }
.film-synopsis-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; max-width: 38rem }
.film-synopsis-form textarea { box-sizing: border-box; width: 100%; padding: .55rem .65rem; color: inherit; font: 1rem/1.5 Arial, sans-serif; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: .45rem; background: color-mix(in srgb, currentColor 6%, transparent); resize: vertical }
.film-synopsis-actions { display: flex; align-items: center; gap: 1rem }
.film-synopsis-actions button { min-height: 2.2rem; padding: .35rem .9rem; color: inherit; font: inherit; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: .45rem; background: color-mix(in srgb, currentColor 6%, transparent); cursor: pointer }
.collection-index-poster-link { display: block; color: inherit; text-decoration: none }
.comments { max-width: 46rem; margin: 3rem 0 4rem; padding-top: 1.5rem; color: var(--ink); border-top: 1px solid var(--line)}
.comments:empty { display: none}
.comments__title { margin: 0 0 1rem; font-size: 1.4rem; font-weight: 400}
.comments__count { margin-left: .35rem; color: var(--muted); font: .9rem Arial, sans-serif}
.comments__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none}
.comment { padding: .85rem 1rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent)}
.comment--mine { border-color: var(--muted)}
.comment--hidden, .comment--deleted { border-style: dashed; opacity: .75}
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .35rem; color: var(--muted); font: .8rem Arial, sans-serif}
.comment__author { color: var(--ink); font-weight: 700}
.comment__head .avatar { align-self: center}
.comment__badge { padding: .05rem .4rem; color: var(--paper); background: var(--accent); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase}
.comment__note { margin: 0 0 .35rem; color: var(--accent); font: .8rem Arial, sans-serif}
.comment__body { margin: 0; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere}
.comments__more, .comments__retry { min-height: 2.2rem; margin: 0 0 .75rem; padding: .35rem .9rem; color: var(--ink); border: 1px solid var(--line); background: transparent; font: .82rem Arial, sans-serif; cursor: pointer}
.comments__more:hover, .comments__retry:hover { border-color: var(--accent)}
.comments__more:focus-visible, .comments__retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.comments__more:disabled { opacity: .5; cursor: default}
.comments__empty, .comments__invite, .comments__noscript, .comments__error { margin: .75rem 0 0; color: var(--muted); font: .9rem Arial, sans-serif}
.comments__error { color: var(--accent)}
.comment__actions { display: flex; gap: .5rem; margin: .5rem 0 0}
.comment__action { padding: 0; color: var(--muted); border: 0; background: transparent; font: .78rem Arial, sans-serif; text-decoration: underline; text-underline-offset: .2rem; cursor: pointer}
.comment__action:hover, .comment__action:focus-visible { color: var(--accent)}
.comment__action:disabled { opacity: .5; cursor: default}
.comment__reported, .comment__flags { color: var(--muted); font: .78rem Arial, sans-serif}
.comment__flags { color: var(--accent)}
.comment__error { margin: 0; color: var(--accent); font: .78rem Arial, sans-serif}
.comments__compose { margin-top: 1.25rem}
.comments__form, .comment__editor { display: grid; gap: .5rem; margin: 0}
.comments__label { color: var(--muted); font: .8rem Arial, sans-serif}
.comments__input { box-sizing: border-box; width: 100%; padding: .55rem .65rem; color: var(--ink); border: 1px solid var(--line); background: var(--paper); font: 1rem/1.5 Arial, sans-serif}
.comments__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.comments__textarea { resize: vertical}
.comments__hint { margin: 0; color: var(--muted); font: .78rem Arial, sans-serif}
.comments__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem}
.comments__button { min-height: 2.4rem; padding: .4rem 1.1rem; color: var(--ink); border: 1px solid var(--line); background: transparent; font: .85rem Arial, sans-serif; cursor: pointer}
.comments__button:hover, .comments__button:focus-visible { border-color: var(--accent)}
.comments__button:disabled { opacity: .5; cursor: default}
.comments__button--primary { color: var(--paper); border-color: var(--ink); background: var(--ink)}
.comments__button--primary:hover, .comments__button--primary:focus-visible { border-color: var(--accent); background: var(--accent)}
.comments__status { margin: 0; min-height: 1.2em; color: var(--muted); font: .82rem Arial, sans-serif}
.comments__name { display: grid; gap: .5rem; padding: .75rem; border: 1px dashed var(--line)}
.comments__name[hidden] { display: none}
.comments__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden}
.comment__likebar { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 0; color: var(--muted); font: .82rem Arial, sans-serif}
.comment__like, .comment__likes { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.9rem; padding: .1rem .6rem; color: var(--muted); border: 1px solid var(--line); background: transparent; font: inherit}
.comment__like { cursor: pointer}
.comment__like::before, .comment__likes::before { content: "\2661"; font-size: 1rem; line-height: 1}
.comment__likes::before, .comment__like[aria-pressed="true"]::before { content: "\2665"}
.comment__like:hover, .comment__like:focus-visible { color: var(--accent); border-color: var(--accent)}
.comment__like:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.comment__like[aria-pressed="true"] { color: var(--accent); border-color: var(--accent)}
.comment__like:disabled { opacity: .5; cursor: default}
.comment__likenote { color: var(--accent)}

/* Avatars: a picture or, without one, the first letter of the signature on a tone circle. Tone and ink follow the light/dark mode, not the card theme. */
:root { --avatar-tone-0: #8a3b2e; --avatar-tone-1: #2f5d50; --avatar-tone-2: #3d4f7c; --avatar-tone-3: #7a5a1e; --avatar-tone-4: #5b3f72; --avatar-tone-5: #2f6470; --avatar-ink: #fff}
html[data-card-mode="dark"] { --avatar-tone-0: #f0b8a8; --avatar-tone-1: #a8d5c4; --avatar-tone-2: #b7c3ec; --avatar-tone-3: #e8cf98; --avatar-tone-4: #d4bdea; --avatar-tone-5: #a6d6df; --avatar-ink: #1b1712}
.avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; border-radius: 50%; object-fit: cover; background: var(--card); color: var(--avatar-ink); font: 700 1rem/1 Arial, sans-serif; text-decoration: none; text-transform: uppercase; user-select: none; vertical-align: middle}
.avatar--24 { width: 24px; height: 24px; font-size: .72rem}
.avatar--36 { width: 36px; height: 36px; font-size: 1rem}
.avatar--96 { width: 96px; height: 96px; font-size: 2.8rem}
.avatar--tone-0 { background: var(--avatar-tone-0)}
.avatar--tone-1 { background: var(--avatar-tone-1)}
.avatar--tone-2 { background: var(--avatar-tone-2)}
.avatar--tone-3 { background: var(--avatar-tone-3)}
.avatar--tone-4 { background: var(--avatar-tone-4)}
.avatar--tone-5 { background: var(--avatar-tone-5)}
.site-nav a.nav-settings { display: inline-flex; align-items: center; gap: .4rem}
.settings-avatar-current { display: flex; align-items: center; gap: .75rem; margin: 0 0 .75rem}
.film-original-title-edit { margin-top: .4rem; font: .85rem/1.3 Arial, sans-serif }
.film-original-title-edit summary { cursor: pointer; color: var(--muted) }
.film-original-title-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; max-width: 38rem }
.film-original-title-form input[type="text"] { box-sizing: border-box; width: 100%; padding: .55rem .65rem; color: inherit; font: 1rem Arial, sans-serif; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: .45rem; background: color-mix(in srgb, currentColor 6%, transparent) }
.film-original-title-actions { display: flex; align-items: center; gap: 1rem }
.film-original-title-actions button { min-height: 2.2rem; padding: .35rem .9rem; color: inherit; font: inherit; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: .45rem; background: color-mix(in srgb, currentColor 6%, transparent); cursor: pointer }
.card-person-link { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .18em}
.card-person-link:hover { text-decoration-color: currentColor}
.card-person-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.stats-table-wrap { max-width: 100%; overflow-x: auto}
.stats-table { width: 100%; border-collapse: collapse; font: .95rem Arial, sans-serif}
.stats-table th, .stats-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle}
.stats-table thead th { color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--line)}
.stats-table thead th.stats-num { white-space: nowrap}
.stats-table tbody th { min-width: 9rem; font-weight: 400; text-align: left}
.stats-table thead th:first-child { text-align: left}
.stats-table tbody th a { color: var(--ink); text-decoration: underline; text-underline-offset: .2rem}
.stats-table tbody th a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px}
.stats-table .stats-total th, .stats-table .stats-total td { border-bottom: 2px solid var(--line); font-weight: 700}
.stats-num { text-align: right; font-variant-numeric: tabular-nums}
.stats-zero { color: var(--muted)}
.stats-bar { display: block; width: 100%; height: .35rem; margin-top: .35rem; border: 0; border-radius: .2rem; background: var(--card); color: var(--accent); appearance: none; -webkit-appearance: none}
.stats-bar::-webkit-progress-bar { border-radius: .2rem; background: var(--card)}
.stats-bar::-webkit-progress-value { border-radius: .2rem; background: var(--accent)}
.stats-bar::-moz-progress-bar { border-radius: .2rem; background: var(--accent)}
.stats-note, .stats-empty { margin: 1rem 0 0; color: var(--muted); font: .85rem/1.5 Arial, sans-serif}
.stats-empty p { margin: 0 0 .5rem}
.stats-sort { display: inline-flex; align-items: center; gap: .25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer}
.stats-sort:hover, .stats-table thead th[aria-sort="ascending"] .stats-sort, .stats-table thead th[aria-sort="descending"] .stats-sort { color: var(--ink)}
.stats-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .2rem}
.stats-sort-indicator { display: inline-block; width: .8em; color: var(--accent)}
.stats-table thead th[aria-sort="ascending"] .stats-sort-indicator::before { content: "\25B2"}
.stats-table thead th[aria-sort="descending"] .stats-sort-indicator::before { content: "\25BC"}