/* ============================================================
   amvnews.ru — modern stylesheet
   No frameworks, no CDN. Drop-in replacement for the legacy
   template/Default look while keeping a contemporary feel.
   ============================================================ */

:root {
    /* Greyscale "newspaper" light theme — descended from the legacy
       phpNuke look (warm neutral greys, content reads as ink on
       paper). Interactive accents stay blue so links/buttons still
       have a recognisable affordance. */
    --bg:            #f1f1ef;   /* warm off-white page */
    --bg-elev:       #fafaf8;   /* card / panel surface */
    --bg-soft:       #e8e8e4;   /* section dividers */
    --border:        #d4d4cf;
    --border-strong: #b3b3ad;
    --text:          #1f1f1d;
    --text-soft:     #4a4a47;
    --text-muted:    #777772;
    --link:          #1d4ed8;
    --link-hover:    #1e3a8a;
    --accent:        #2563eb;
    --accent-2:      #1e3a8a;
    --accent-soft:   #3b82f6;
    --warn:          #d97706;   /* warm amber, fits greyscale */
    --good:          #047857;
    --bad:           #b91c1c;
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, .04);
    --shadow:        0 4px 14px rgba(0, 0, 0, .07);
    --shadow-lg:     0 12px 32px rgba(0, 0, 0, .12);
    --radius-sm:     6px;
    --radius:        12px;
    --radius-lg:     18px;
    --container:     1240px;

    --font-sans:     "Inter", "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
    --font-display:  "Inter", "Segoe UI", system-ui, sans-serif;
}

html[data-theme="dark"] {
    /* "Carbon midnight" palette — closer to true black with a faint
       blue undertone. Designed so cards feel suspended over a deep
       background rather than floating on a slate one, which reads as
       more elegant + less cartoonish than the prior brighter navy. */
    --bg:            #07090f;   /* near-black with a hint of cobalt */
    --bg-elev:       #10131c;   /* card / panel surface */
    --bg-soft:       #161a26;   /* hover / section divider */
    --border:        #1d2335;   /* main hairline */
    --border-strong: #2a3149;   /* prominent edges */
    --text:          #e8eaf2;   /* slightly cool off-white */
    --text-soft:     #b8c0d4;
    --text-muted:    #818aa3;
    --link:          #94adff;
    --link-hover:    #cfdaff;
    /* Accent + semantic ramp — the light :root defines these as dark
       navy / forest-green / deep-red, which wash out or vanish on a
       near-black ground. Re-light them so badges, rating chips, "good /
       warn / bad" cues and accent-2 surfaces stay readable in dark. */
    --accent:        #3b82f6;
    --accent-2:      #2563eb;
    --accent-soft:   #60a5fa;
    --good:          #34d399;
    --warn:          #fbbf24;
    --bad:           #f87171;
    /* Deeper shadows on darker backgrounds need MORE opacity to read,
       not less — black-on-black ambient occlusion. */
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, .55);
    --shadow:        0 8px 24px rgba(0, 0, 0, .65);
    --shadow-lg:     0 22px 52px rgba(0, 0, 0, .75);
}

/* ── Header in dark mode ──
   The light-theme header uses a bright blue gradient (#0c1b3c → #1d4ed8)
   which jumps off the page on dark mode. Override to a nearly-black
   gradient with the same accent at the trailing edge so the brand
   colour is still hinted at without dominating. */
html[data-theme="dark"] .site-header {
    background: linear-gradient(120deg, #05070d 0%, #0a1024 60%, #121a3a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .brand__mark {
    /* Dim the brand-mark glow so it doesn't beacon through the
       otherwise restrained header. */
    box-shadow: 0 4px 14px rgba(37, 99, 235, .22);
}
html[data-theme="dark"] .site-header__search input {
    /* Sub-header search bar — was rgba(255,255,255,.08) inherited from
       the light header; nudge slightly darker so it sits flush against
       the carbon background. */
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .07);
}

/* ============================================================
   Six extra theme presets. Each overrides just the CSS custom-
   property palette + the few hardcoded chrome rules (header
   gradient, admin nav). The rest of the stylesheet picks up the
   new colours through the cascade.
   ============================================================ */

/* AMOLED — pitch-black for OLED phones. Saves battery + makes the
   accent pop hard. */
html[data-theme="amoled"] {
    --bg:            #000000;
    --bg-elev:       #0a0a0a;
    --bg-soft:       #131313;
    --border:        #1f1f1f;
    --border-strong: #2e2e2e;
    --text:          #ededed;
    --text-soft:     #bdbdbd;
    --text-muted:    #828282;
    --link:          #a3bdff;
    --link-hover:    #dde5ff;
    /* Same re-lighting as dark — amoled inherits the light accent ramp
       otherwise, leaving dark-navy chips invisible on pure black. */
    --accent:        #4d8bff;
    --accent-2:      #3b82f6;
    --accent-soft:   #6ea8ff;
    --good:          #34d399;
    --warn:          #fbbf24;
    --bad:           #f87171;
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, .8);
    --shadow:        0 8px 24px rgba(0, 0, 0, .85);
    --shadow-lg:     0 22px 52px rgba(0, 0, 0, .9);
}
html[data-theme="amoled"] .site-header,
html[data-theme="amoled"] .admin-shell__top {
    background: #000;
    border-bottom: 1px solid #1a1a1a;
}

/* SEPIA — warm cream paper with brown ink. Reading mode. */
html[data-theme="sepia"] {
    --bg:            #f5ecd9;
    --bg-elev:       #faf4e3;
    --bg-soft:       #ece1c5;
    --border:        #d8c8a4;
    --border-strong: #b89e6f;
    --text:          #3b2f1c;
    --text-soft:     #5b4a30;
    --text-muted:    #816947;
    --link:          #7a4e1f;
    --link-hover:    #5a3a14;
    --accent:        #a05a1f;
    --accent-2:      #6e3c11;
    --shadow-sm:     0 1px 2px rgba(80, 60, 30, .06);
    --shadow:        0 4px 14px rgba(80, 60, 30, .10);
}
html[data-theme="sepia"] .site-header {
    background: linear-gradient(120deg, #5a3a14 0%, #7a4e1f 100%);
}

/* NORD — arctic blue-grey. Cold neutral palette. */
html[data-theme="nord"] {
    --bg:            #2e3440;
    --bg-elev:       #3b4252;
    --bg-soft:       #434c5e;
    --border:        #4c566a;
    --border-strong: #5e6779;
    --text:          #eceff4;
    --text-soft:     #d8dee9;
    --text-muted:    #a3aab5;
    --link:          #88c0d0;
    --link-hover:    #8fbcbb;
    --accent:        #88c0d0;
    --accent-2:      #5e81ac;
    --accent-soft:   #81a1c1;
    --good:          #a3be8c;
    --warn:          #ebcb8b;
    --bad:           #bf616a;
}
html[data-theme="nord"] .site-header {
    background: linear-gradient(120deg, #2e3440 0%, #3b4252 60%, #5e81ac 100%);
}

/* DRACULA — dark purple with vibrant accents. */
html[data-theme="dracula"] {
    --bg:            #282a36;
    --bg-elev:       #313342;
    --bg-soft:       #44475a;
    --border:        #44475a;
    --border-strong: #6272a4;
    --text:          #f8f8f2;
    --text-soft:     #d6d6ce;
    --text-muted:    #999a9e;
    --link:          #8be9fd;
    --link-hover:    #bd93f9;
    --accent:        #bd93f9;
    --accent-2:      #6272a4;
    --accent-soft:   #ff79c6;
    --good:          #50fa7b;
    --warn:          #f1fa8c;
    --bad:           #ff5555;
}
html[data-theme="dracula"] .site-header {
    background: linear-gradient(120deg, #282a36 0%, #44475a 60%, #6272a4 100%);
}

/* SOLARIZED DARK — classic Ethan Schoonover scheme. */
html[data-theme="solarized-dark"] {
    --bg:            #002b36;
    --bg-elev:       #073642;
    --bg-soft:       #093f4d;
    --border:        #2a4a55;
    --border-strong: #3a5a66;
    --text:          #eee8d5;
    --text-soft:     #b8b297;
    --text-muted:    #859094;
    --link:          #2aa198;
    --link-hover:    #b58900;
    --accent:        #268bd2;
    --accent-2:      #2aa198;
    --accent-soft:   #6c71c4;
    --good:          #859900;
    --warn:          #b58900;
    --bad:           #dc322f;
}
html[data-theme="solarized-dark"] .site-header {
    background: linear-gradient(120deg, #002b36 0%, #073642 60%, #268bd2 100%);
}

/* GRUVBOX DARK — warm retro tan. */
html[data-theme="gruvbox-dark"] {
    --bg:            #282828;
    --bg-elev:       #32302f;
    --bg-soft:       #3c3836;
    --border:        #504945;
    --border-strong: #665c54;
    --text:          #ebdbb2;
    --text-soft:     #d5c4a1;
    --text-muted:    #a89984;
    --link:          #fabd2f;
    --link-hover:    #fe8019;
    --accent:        #fabd2f;
    --accent-2:      #d65d0e;
    --accent-soft:   #fe8019;
    --good:          #b8bb26;
    --warn:          #fabd2f;
    --bad:           #fb4934;
}
html[data-theme="gruvbox-dark"] .site-header {
    background: linear-gradient(120deg, #1d2021 0%, #3c3836 60%, #d65d0e 100%);
}

/* ════════════════ PREMIUM / TIER-LOCKED THEMES ════════════════
   Exclusive palettes unlocked by climbing tiers (gated server-side via
   config amvnews.level.gates.theme_<key> + the picker; see UserName/UserLevel).
   Same variable contract as the themes above. */

/* AURORA — veteran+. Deep teal night with emerald/cyan aurora accents. */
html[data-theme="aurora"] {
    --bg:            #07171b;
    --bg-elev:       #0c2128;
    --bg-soft:       #133038;
    --border:        #1c4049;
    --border-strong: #2c6b73;
    --text:          #e6fbf6;
    --text-soft:     #bfe9e0;
    --text-muted:    #7fa7a3;
    --link:          #5eead4;
    --link-hover:    #a7f3d0;
    --accent:        #2dd4bf;
    --accent-2:      #0e7490;
    --accent-soft:   #6ee7b7;
    --good:          #34d399;
    --warn:          #fde68a;
    --bad:           #fb7185;
    color-scheme: dark;
}
html[data-theme="aurora"] .site-header {
    background: linear-gradient(120deg, #07171b 0%, #0e7490 55%, #2dd4bf 120%);
}

/* NEBULA — master+. Near-black violet with magenta/indigo nebula accents. */
html[data-theme="nebula"] {
    --bg:            #0c0a18;
    --bg-elev:       #15122a;
    --bg-soft:       #20193f;
    --border:        #2c2350;
    --border-strong: #4c3a86;
    --text:          #f1ecff;
    --text-soft:     #d6caf6;
    --text-muted:    #9489b8;
    --link:          #c4b5fd;
    --link-hover:    #f0abfc;
    --accent:        #a855f7;
    --accent-2:      #6d28d9;
    --accent-soft:   #e879f9;
    --good:          #4ade80;
    --warn:          #facc15;
    --bad:           #fb7185;
    color-scheme: dark;
}
html[data-theme="nebula"] .site-header {
    background: linear-gradient(120deg, #0c0a18 0%, #6d28d9 55%, #a855f7 120%);
}

/* REGAL — legend only. Charcoal with antique-gold accents. */
html[data-theme="regal"] {
    --bg:            #14120c;
    --bg-elev:       #1e1a0f;
    --bg-soft:       #2a2415;
    --border:        #3a3120;
    --border-strong: #6b5a2e;
    --text:          #f7f1df;
    --text-soft:     #e3d6ab;
    --text-muted:    #a8966a;
    --link:          #e8c66b;
    --link-hover:    #f7e3a1;
    --accent:        #d4af37;
    --accent-2:      #8a6d1f;
    --accent-soft:   #f0d77a;
    --good:          #86c34a;
    --warn:          #f0c14b;
    --bad:           #e0796b;
    color-scheme: dark;
}
html[data-theme="regal"] .site-header {
    background: linear-gradient(120deg, #14120c 0%, #8a6d1f 55%, #d4af37 120%);
}

/* HIGH CONTRAST — accessibility theme for low-vision / visually
   impaired users. Pure black ground, pure white text (21:1, WCAG AAA),
   canonical yellow links (#ff0, ~19.5:1) like the Windows High-Contrast
   "Black" scheme. Panels are separated by solid WHITE borders rather
   than subtle fills, "muted" text is never dimmed to grey (it stays
   near-white), links carry an underline so colour isn't the only cue,
   and focus is a thick yellow ring. */
html[data-theme="high-contrast"] {
    --bg:            #000000;
    --bg-elev:       #000000;   /* panels read via borders, not fills */
    --bg-soft:       #1a1a1a;   /* faint hover lift, still >15:1 w/ white */
    --border:        #ffffff;
    --border-strong: #ffffff;
    --text:          #ffffff;
    --text-soft:     #ffffff;
    --text-muted:    #e6e6e6;   /* ~17:1 — never the usual dim grey */
    --link:          #ffff00;
    --link-hover:    #ffffff;
    --accent:        #ffff00;
    --accent-2:      #00ffff;
    --accent-soft:   #ffff00;
    --good:          #00ff00;
    --warn:          #ffff00;
    --bad:           #ff6b6b;
    /* Shadows are invisible on pure black and only muddy edges — drop
       them so the white borders do the separation work. */
    --shadow-sm:     0 0 0 1px #ffffff;
    --shadow:        0 0 0 1px #ffffff;
    --shadow-lg:     0 0 0 2px #ffffff;
    color-scheme: dark;
}
html[data-theme="high-contrast"] .site-header,
html[data-theme="high-contrast"] .admin-shell__top {
    background: #000000;
    border-bottom: 2px solid #ffffff;
}
html[data-theme="high-contrast"] .brand__mark {
    background: #000000;
    border: 2px solid #ffffff;
    box-shadow: none;
    color: #ffff00;
}
/* Colour is never the sole affordance: underline body links. (Nav/btn
   links opt out via their own classes so the chrome stays clean.) */
html[data-theme="high-contrast"] a:not(.btn):not(.theme-picker__item):not(.header-action) {
    text-decoration: underline;
}
/* Buttons become clearly-outlined hit targets. */
html[data-theme="high-contrast"] .btn {
    border: 2px solid #ffffff;
    background: #000000;
    color: #ffffff;
}
html[data-theme="high-contrast"] .btn:hover {
    background: #ffffff;
    color: #000000;
}
/* Accent-FILLED controls (primary buttons, the active source/quality/
   speed pills, the admin link, the favourite toggle, accent badges, the
   active step / PM folder…) ship light or white text by default — which
   is unreadable on the bright yellow/cyan accent. Flatten every such
   fill to solid yellow with BLACK ink, killing any accent gradient.
   Admin-panel selectors are intentionally absent: the admin layout is
   hardwired to the dark theme, so high-contrast never reaches them. */
html[data-theme="high-contrast"] .btn--primary,
html[data-theme="high-contrast"] .nav-strip__link--admin,
html[data-theme="high-contrast"] .player__controls .btn.is-active,
html[data-theme="high-contrast"] .video-rating__fav-btn.is-on,
html[data-theme="high-contrast"] .badge--accent,
html[data-theme="high-contrast"] .submit-steps__item.is-active,
html[data-theme="high-contrast"] .pm-folder.is-active,
html[data-theme="high-contrast"] .news-card__cat,
html[data-theme="high-contrast"] .comments__count,
html[data-theme="high-contrast"] .forum-cat__title,
html[data-theme="high-contrast"] .event__date,
html[data-theme="high-contrast"] .drawer-toggle,
html[data-theme="high-contrast"] .profile-sidecard__avatar,
html[data-theme="high-contrast"] .user-menu__pill,
html[data-theme="high-contrast"] .amv-chat__launcher,
html[data-theme="high-contrast"] .amv-chat__head,
html[data-theme="high-contrast"] .amv-chat__send,
html[data-theme="high-contrast"] .pagination .active span,
html[data-theme="high-contrast"] nav[role="navigation"] .active span {
    background: #ffff00 !important;
    background-image: none !important;
    color: #000000 !important;
    border-color: #ffff00 !important;
}
/* Same for child text/icons inside those filled surfaces so nothing
   stays white-on-yellow. */
html[data-theme="high-contrast"] .forum-cat__title a,
html[data-theme="high-contrast"] .amv-chat__head *,
html[data-theme="high-contrast"] .news-card__cat * {
    color: #000000 !important;
}
/* Hover states that fill with the accent — keep their text black so
   they don't flash white-on-yellow on pointer-over. */
html[data-theme="high-contrast"] .nav-strip__link:hover,
html[data-theme="high-contrast"] .user-menu__list button:hover,
html[data-theme="high-contrast"] .last-comments__nav:not(:disabled):hover {
    background: #ffff00 !important;
    color: #000000 !important;
}
/* Unmistakable keyboard-focus ring across the whole UI. */
html[data-theme="high-contrast"] :focus-visible {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px;
}
/* Cards / panels get a real border so they don't dissolve into the
   black ground when their fill equals --bg. */
html[data-theme="high-contrast"] .block,
html[data-theme="high-contrast"] .card,
html[data-theme="high-contrast"] .entry,
html[data-theme="high-contrast"] .panel {
    border: 1px solid #ffffff;
}

/* Brand-mark glow follows the active accent on themed variants so it
   doesn't keep beaming the default blue on, say, sepia or dracula. */
html[data-theme="sepia"] .brand__mark,
html[data-theme="nord"] .brand__mark,
html[data-theme="dracula"] .brand__mark,
html[data-theme="solarized-dark"] .brand__mark,
html[data-theme="gruvbox-dark"] .brand__mark,
html[data-theme="amoled"] .brand__mark {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Slightly tighter overall letter rhythm reads as more
       considered, especially against the carbon dark theme. */
    letter-spacing: -.005em;
}

a { color: var(--link); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 .55em;
    color: var(--text);
    /* Tight tracking on display type — the canonical "expensive" type
       cue. Light backgrounds can take a bit less; for dark this also
       cleans up the slight ringing around Inter's caps. */
    letter-spacing: -.018em;
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.42rem; }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1em; }

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
    margin: 1.6em 0;
}

/* ---------- Layout ---------- */

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 22px;
}

.site-header {
    background: linear-gradient(120deg, #0c1b3c 0%, #1e3a8a 60%, #1d4ed8 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: var(--shadow);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .5px;
}
.brand:hover { color: #fff; text-decoration: none; }
.brand__mark {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: grid; place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.1rem;
    box-shadow: 0 6px 20px rgba(37,99,235,.4);
}
.brand__name small {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    opacity: .75;
    margin-top: 2px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.site-header__search {
    flex: 1;
    max-width: 820px;
    position: relative;
    min-width: 220px;
}
/* The header is always the dark-blue gradient regardless of light/dark
   theme, so the search input lives in a permanently-dark context. We
   compound-class the selector (`.site-header .site-header__search input`)
   so it beats the generic `input[type="search"]` rule further down in
   this file — without that, light mode flipped the typed text and
   placeholder to dark-on-light, making them invisible on the dark
   header gradient. */
.site-header .site-header__search input {
    width: 100%;
    box-sizing: border-box;
    /* Extra-roomy left padding so the magnifying-glass icon never sits
       under the placeholder text, even on browsers that pad type=search
       a bit aggressively by default. */
    padding: 11px 16px 11px 54px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.10);
    color: #fff;
    border-radius: 999px;
    font-size: .95rem;
    outline: none;
    transition: background .15s, border-color .15s;
    color-scheme: dark;     /* caret + autofill bg follow dark UA defaults */
    /* Reset webkit / firefox quirks that add a hidden indent or "clear" widget. */
    -webkit-appearance: none;
    appearance: none;
}
.site-header .site-header__search input::-webkit-search-decoration,
.site-header .site-header__search input::-webkit-search-cancel-button,
.site-header .site-header__search input::-webkit-search-results-button,
.site-header .site-header__search input::-webkit-search-results-decoration { -webkit-appearance: none; }
.site-header .site-header__search input::placeholder { color: rgba(255,255,255,.72); }
.site-header .site-header__search input:focus {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.42);
    box-shadow: none;       /* generic input:focus blue glow doesn't fit on a dark header */
}
.site-header__search-icon {
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;       /* hard pin so inherited font-size doesn't enlarge the SVG */
    color: rgba(255,255,255,.65);
    pointer-events: none;
    display: block;
}

.site-header__actions {
    display: flex; gap: 10px; align-items: center;
}

/* ---------- Header utility buttons (PM inbox + theme + lang) ----------
   The mail icon link is its own element so it can render at-a-glance,
   without forcing the user to open the user-menu to discover unread PMs.
   The icon button is square (so it doesn't look like a bare "text strip"
   on mobile) and carries a tiny red badge when there's anything unread. */
.header-pm-link {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #fff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.header-pm-link:hover {
    background: rgba(255,255,255,.22);
    transform: translateY(-1px);
}
.header-pm-link svg { display: block; }
.header-pm-link__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    padding: 2px 5px;
    min-width: 16px;
    text-align: center;
    /* Outline ring uses the header's deep-blue gradient base so the badge
       reads as separate from the envelope on every backdrop variant. */
    box-shadow: 0 0 0 2px #1e3a8a;
}

/* Header action buttons (theme, language) use a split icon/label layout
   so we can collapse to icon-only on phones. */
.header-action { display: inline-flex; align-items: center; gap: 4px; }
.header-action__icon  { line-height: 1; font-size: 1rem; }
.header-action__label { line-height: 1; }
.header-action--lang { font-weight: 700; min-width: 32px; text-align: center; justify-content: center; }

/* ---------- Nav ---------- */

.nav {
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(150%) blur(8px);
}
.nav__row {
    display: flex; flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0;
}
.nav a {
    padding: 12px 16px;
    color: var(--text-soft);
    font-weight: 600;
    font-size: .94rem;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
}
.nav a:hover, .nav a.is-active {
    background: var(--bg-soft);
    color: var(--text);
    text-decoration: none;
}

/* ---------- Hero strip (header rotating thumbnails) ---------- */

.hero {
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    /* Extra top padding so the rotated tile corners don't clip the
       header above. */
    padding: 26px 0 24px;
}
/* Header strip — 10 random high-rated thumbnails with the cat-eared
   amvnews logo cell inserted after the 5th (so the row reads:
   5 clips · LOGO · 5 clips). Uses CSS grid with 11 equal columns
   on the wide breakpoint; falls back to a horizontal-scroll flex on
   narrow viewports. */
.hero__strip {
    display: grid;
    /* 12 cols = 5 clips + 2-col logo + 5 clips. The winged logo spans
       two columns so its wings have room to extend horizontally without
       getting clipped or squashing the badge text. */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    /* Allow rotated tile corners to extend past the grid edge. */
    overflow: visible;
    align-items: center;
}
.hero__tile {
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    /* Polaroid-style frame around each thumb. The frame colour follows
       `--bg-elev` so it lifts off all themes — dark amoled gets a
       near-black "frame", sepia gets cream, etc. — while the
       border-strong tint underneath simulates a printed photo edge. */
    background: var(--bg-elev);
    border: 4px solid var(--bg-elev);
    outline: 1px solid color-mix(in srgb, var(--border-strong) 60%, transparent);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
    transition: transform .25s ease, box-shadow .25s ease;
    text-decoration: none;
    display: block;
    /* Default tilt for everything; nth-child variants below randomise
       so adjacent thumbnails don't tilt in lockstep. */
    transform: rotate(-1.5deg);
}
/* Pseudo-random rotation pattern using prime-ish nth-child cycles so
   no two neighbouring tiles read the same. */
.hero__tile:nth-child(3n)     { transform: rotate(1.8deg); }
.hero__tile:nth-child(4n + 1) { transform: rotate(-2.4deg); }
.hero__tile:nth-child(5n + 2) { transform: rotate(2.6deg); }
.hero__tile:nth-child(7n + 3) { transform: rotate(-1deg); }
.hero__tile:nth-child(11n + 4){ transform: rotate(0.6deg); }
.hero__tile:hover {
    /* Snap to upright + lift on hover so the clicked clip presents
       itself cleanly. */
    transform: rotate(0) translateY(-3px) scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    z-index: 1;
}
.hero__tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Scale the photo down a touch so the frame around it is visible
       on every theme (matches the legacy header strip where the picture
       sits a hair inside the white card). */
    transform: scale(0.96);
    transform-origin: center;
}
.hero__tile::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.hero__tile:hover::after { opacity: 1; }

/* Cat-eared logo cell. `currentColor` paints both the body and the
   ear silhouettes so the logo automatically picks up the accent
   colour of whatever theme is active (default blue, dracula purple,
   gruvbox amber, etc.). */
.hero__logo {
    /* Spans 2 grid columns for width and STRETCHES to the row height the
       square tiles define. The badge image is absolutely positioned (see
       below) so it never inflates this cell — otherwise a 2-col-wide 3:2
       image renders 137px tall, taller than the 105px tiles, which then
       float in whitespace and the logo reads as detached. */
    grid-column: span 2;
    align-self: stretch;
    position: relative;
    text-decoration: none;
    transition: transform .2s ease;
}
.hero__logo:hover { transform: translateY(-3px) scale(1.04); }
.hero__logo-img {
    /* Out of flow → contributes no height, so the strip row stays at the
       tile height. `margin:auto` + `inset:0` centres it; max-* fit it to
       the tile height while keeping the PNG's 3:2 ratio (≈157×105). */
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Neutral dark drop-shadow: lifts the logo on light themes, but is
       invisible on dark/amoled grounds (a near-black shadow over a
       near-black page reads as nothing). The previous BLUE shadow
       (rgba(58,126,180,.35)) glowed as a weird halo on dark themes. */
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .28));
}
/* Dark themes: the badge's WINGS and the dark ribbon stripes are
   near-black, so they disappear against a dark ground — only the blue
   disc + ribbon stay visible. Swap to a recoloured variant whose dark
   elements are lightened to steel-blue so the whole winged logo reads.
   `content` swaps the rendered image of the <img>, overriding the
   <picture> webp the light themes use. (Sepia is a LIGHT theme — it
   keeps the original.) */
html[data-theme="dark"]           .hero__logo-img,
html[data-theme="amoled"]         .hero__logo-img,
html[data-theme="nord"]           .hero__logo-img,
html[data-theme="dracula"]        .hero__logo-img,
html[data-theme="solarized-dark"] .hero__logo-img,
html[data-theme="gruvbox-dark"]   .hero__logo-img,
html[data-theme="high-contrast"]  .hero__logo-img {
    content: url('/assets/logo-dark.webp');
}

@media (max-width: 900px) {
    /* On phones the 11-cell grid would be < 30px per tile. Switch to
       a horizontal scroller so each thumbnail stays legible. */
    .hero__strip {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .hero__tile {
        flex: 0 0 80px;
        scroll-snap-align: start;
    }
    .hero__logo {
        /* Wider than a tile because of the wings. Keep the SVG's
           12:7 aspect (≈ 137 × 80). */
        flex: 0 0 140px;
        scroll-snap-align: start;
    }
}

/* ---------- Page grid (content + sidebars) ---------- */

.page {
    /* Generous bottom whitespace so the footer doesn't crowd the last
       card. Top breathing room matches the gap between cards inside. */
    padding: 32px 0 80px;
}
.page__grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    /* Wider gutters give content room to breathe and stop the cards
       from feeling like they're bumping into the sidebars. */
    gap: 28px;
}
@media (max-width: 1100px) {
    .page__grid { grid-template-columns: 1fr 280px; }
    .sidebar--left { display: none; }
}
@media (max-width: 800px) {
    .page__grid { grid-template-columns: 1fr; }
    .sidebar--right { order: 3; }
}

.sidebar {
    display: flex; flex-direction: column; gap: 20px;
}
.sidebar h3 {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-muted);
    margin: 0 0 12px;
    /* Light weight + heavy tracking is the classic "magazine column
       label" look — distinguishes sidebar section titles from body
       headings without shouting. */
    font-weight: 600;
}
.sidebar .block {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-sm);
}
.sidebar .block ul {
    list-style: none; padding: 0; margin: 0;
}
.sidebar .block li + li {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.sidebar .block li a { color: var(--text); }
.sidebar .block li a:hover { color: var(--link); }
.sidebar .block .muted { color: var(--text-muted); font-size: .8rem; }

/* ---------- Primary nav strip (inside the dark header) ---------- */

.nav-strip {
    background: rgba(0, 0, 0, .28);
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.nav-strip__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}
.nav-strip__link {
    position: relative;
    padding: 14px 22px;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
    font-size: .94rem;
    letter-spacing: .2px;
    transition: color .15s, background .15s;
}
.nav-strip__link::before {
    content: "■";
    margin-right: 8px;
    color: var(--accent);
    font-size: .65em;
    vertical-align: middle;
}
.nav-strip__link:first-child::before { content: ""; margin-right: 0; }
.nav-strip__link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}
.nav-strip__link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}
.nav-strip__link.is-active::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 4px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.nav-strip__link--admin::before { content: ""; margin-right: 0; }

/* ---------- Section header ---------- */

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    position: relative;
    /* Faded gradient divider instead of a flat hairline — reads as
       intentional separation rather than a borrowed wireframe stroke. */
    border-bottom: 1px solid transparent;
    background-image: linear-gradient(90deg, var(--border-strong) 0%, var(--border) 30%, transparent 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
}
.section-head__title {
    margin: 0;
    font-size: 1.38rem;
    letter-spacing: -.022em;
    font-weight: 700;
}
.section-head__rss {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #fff;
    background: var(--warn);
    padding: 3px 8px;
    border-radius: 4px;
}
.section-head__rss:hover { color: #fff; opacity: .85; text-decoration: none; }

/* ---------- Exam strip — own category, never mixed with news ---------- */

.exam-strip {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px 22px;
    margin: 0 0 26px;
}
.exam-strip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.exam-strip__head h2 {
    margin: 0 0 2px;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}
.exam-strip__head .muted { font-size: .82rem; margin: 0; }

.exam-strip__rail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 900px) { .exam-strip__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 540px) { .exam-strip__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.exam-tile {
    display: flex; flex-direction: column;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.exam-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.exam-tile__thumb {
    aspect-ratio: 1;
    background-color: var(--bg-soft);
    background-size: cover;
    background-position: center;
}
.exam-tile__caption {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.exam-tile__title {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.exam-tile__author {
    font-size: .72rem;
    color: var(--text-muted);
}

/* ---------- Cards ---------- */

.card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);   /* 18px — softer corners */
    padding: 24px 26px;
    box-shadow: var(--shadow-sm);
    /* Single transition track for hover lifts elsewhere — no-op when
       there's no state change but the property listing keeps repaints
       smooth when a card animates in. */
    transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.card + .card { margin-top: 22px; }

/* ---------- Submit-success "thank you" card + moderator preview banner ---------- */
.submit-success { text-align: center; padding: 36px 28px; max-width: 640px; margin: 32px auto; }
.submit-success__head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 12px; }
.submit-success__icon { font-size: 2.6rem; line-height: 1; }
.submit-success__title { font-size: 1.4rem; margin: 0; }
.submit-success__body { font-size: .95rem; color: var(--text-muted); line-height: 1.55; margin: 8px 0 16px; }
.submit-success__meta { margin: 10px 0 18px; font-size: .95rem; }
.submit-success__actions {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    padding-top: 8px; border-top: 1px solid var(--border);
}

.preview-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(234,179,8,.18), rgba(234,179,8,.06));
    border: 1px solid rgba(234,179,8,.45);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 14px;
    font-size: .9rem;
}

.news-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 26px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.news-card:hover {
    box-shadow: var(--shadow);
    /* Subtle accent on the border on hover — less aggressive than the
       prior shadow-only lift. */
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.news-card__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
    padding: 20px 26px 4px;
}
.news-card__head h2 {
    margin: 0;
    font-size: 1.32rem;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.news-card__head h2 a { color: var(--text); }
.news-card__head h2 a:hover { color: var(--link); text-decoration: none; }
.news-card__meta {
    display: flex; align-items: center; gap: 12px;
    font-size: .82rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.news-card__cat {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.news-card__cat:hover { color: #fff; text-decoration: none; opacity: .9; }
.news-card__body {
    padding: 14px 26px 22px;
    color: var(--text-soft);
    font-size: 1rem;
    /* Slightly looser leading on body copy — easier to read at this
       width and gives the cards a more editorial feel. */
    line-height: 1.65;
}
.news-card__body img {
    border-radius: var(--radius-sm);
    margin: 8px 0;
}
.news-card__foot {
    padding: 14px 26px;
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px;
    font-size: .8rem;
    color: var(--text-muted);
    /* Footer letters tracked slightly for the "byline" vibe — common
       editorial polish trick. */
    letter-spacing: .01em;
}
.news-card__foot .stats { display: inline-flex; gap: 16px; }
.news-card__foot .stats span::before {
    content: ""; display: inline-block; width: 8px; height: 8px;
    border-radius: 2px; background: var(--accent-2);
    margin-right: 6px; vertical-align: middle;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    /* Use the elevated card colour + a stronger border so the pill
       reads as a distinct affordance on top of cards / panels that
       share the soft background. Without this the button blended
       into surrounding cards (e.g. the exam-strip "Подробнее →"). */
    background: var(--bg-elev, #fff);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s, color .15s, border-color .15s;
}
html[data-theme="dark"] .btn {
    background: var(--bg-soft, #1a2235);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.35);
}
.btn:hover {
    background: var(--bg-soft);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(37,99,235,.18);
    text-decoration: none;
}
html[data-theme="dark"] .btn:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    color: #fff;
    border: 0;
    box-shadow: 0 8px 22px rgba(37,99,235,.35);
}
/* Re-state every layer the generic `.btn:hover` touches — without
   restoring the gradient + white text, the primary pill inherited the
   muted hover background and turned white-on-light (unreadable). */
.btn--primary:hover {
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    color: #fff;
    border-color: transparent;
    filter: brightness(1.07);
    box-shadow: 0 10px 26px rgba(37,99,235,.45);
}
html[data-theme="dark"] .btn--primary:hover {
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    color: #fff;
}
.btn--ghost {
    background: transparent;
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.22);
}
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--sm { padding: 6px 12px; font-size: .8rem; }

/* ---------- Pagination ---------- */

.pagination, nav[role="navigation"] ul.flex,
nav[role="navigation"] .flex {
    display: flex; flex-wrap: wrap; gap: 6px;
    list-style: none; padding: 0; margin: 28px 0 0;
    justify-content: center;
}
.pagination a, .pagination span,
nav[role="navigation"] a, nav[role="navigation"] span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text-soft);
    font-weight: 600;
    font-size: .9rem;
}
.pagination a:hover { background: var(--bg-soft); text-decoration: none; }
.pagination .active span, nav[role="navigation"] .active span {
    background: var(--link);
    border-color: var(--link);
    color: #fff;
}
.pagination .disabled span { opacity: .45; }

/* ---------- Files / videos grid ---------- */

.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.file-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.file-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.file-card__thumb {
    aspect-ratio: 16 / 9;
    background: var(--bg-soft) center/cover no-repeat;
    position: relative;
}
.file-card__thumb::after {
    content: "▶";
    position: absolute;
    inset: 0;
    display: grid; place-items: center;
    color: rgba(255,255,255,.85);
    font-size: 28px;
    background: rgba(0,0,0,.18);
    opacity: 0; transition: opacity .2s;
}
.file-card:hover .file-card__thumb::after { opacity: 1; }
.file-card__body {
    padding: 12px 14px;
    flex: 1;
    display: flex; flex-direction: column; gap: 6px;
}
.file-card__title {
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.file-card__meta {
    margin-top: auto;
    font-size: .78rem;
    color: var(--text-muted);
    display: flex; gap: 12px; justify-content: space-between;
}
.rating-pill {
    background: var(--bg-soft);
    border-radius: 999px;
    padding: 2px 8px;
    color: var(--good);
    font-weight: 700;
}

/* ---------- Single news / file ---------- */

.entry {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
}
.entry h1 { font-size: 2rem; }
.entry__meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    color: var(--text-muted);
    font-size: .9rem;
    margin-bottom: 16px;
    align-items: center;
}
.entry__body { font-size: 1.04rem; color: var(--text-soft); }
.entry__body img { border-radius: var(--radius-sm); margin: 12px 0; box-shadow: var(--shadow-sm); }
.entry__body p { margin: 0 0 1em; }
.entry__body a { color: var(--link); }
.entry__body a:hover { color: var(--link-hover); }

.entry__player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 0 24px;
}
.entry__player iframe, .entry__player video {
    width: 100%; height: 100%; border: 0;
}

/* ---------- Comments ---------- */

/* ============================================================
   Comments section (rebuilt for clarity)
   ============================================================ */
.comments {
    margin-top: 32px;
    /* Below the fold on the file/news pages and often the heaviest part of
       the DOM (every comment renders BBCode, an avatar, tier badge, vote
       pills…). `content-visibility: auto` lets the browser skip its layout
       + paint until it's scrolled near, so the visible content (player,
       description) paints in the first frame instead of waiting on a
       full-document layout — which is what caused the "blank lower half,
       then the page fills in" flash on load. `contain-intrinsic-size`
       reserves an estimated height so the scrollbar doesn't jump.
       Fragment links (#comments, #c<id>) still auto-reveal it. */
    content-visibility: auto;
    contain-intrinsic-size: 0 1500px;
}

.comments__head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
}
.comments__title {
    margin: 0;
    font-size: 1.2rem;
    display: flex; align-items: center; gap: 8px;
}
.comments__count {
    display: inline-block;
    min-width: 26px;
    padding: 2px 9px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}
.comments__actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.comments__list {
    list-style: none;
    margin: 0; padding: 0;
}

/* ---- Each comment is a 2-col flexbox: avatar + body ---- */
.comment {
    display: flex;
    gap: 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .12s, border-color .12s;
}
.comment:hover { border-color: var(--border-strong); }
.comment.is-flash {
    animation: comment-flash 1.6s ease-out 1;
}
@keyframes comment-flash {
    0%   { background: rgba(37,99,235,.18); }
    100% { background: var(--bg-elev); }
}

.comment__avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    user-select: none;
}
.comment__avatar--me { width: 36px; height: 36px; font-size: .95rem; }
.comment__avatar--img { object-fit: cover; background: var(--bg-soft); }

/* Subtitle download strip — sits directly under the video player and
   mirrors the legacy `subtitles-block` row. The HTML5 `<track>` element
   inside the player loads the WebVTT-converted form transparently; this
   strip lets viewers download the original .srt / .ass for offline use. */
.video-subtitles {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 0;
    font-size: .88rem;
}
.video-subtitles__dl { text-transform: uppercase; letter-spacing: .04em; }

/* Header avatar — legacy image variant overrides the initials-circle
   colour grid so the actual photo shows pixel-perfect. */
.user-menu__avatar--img { object-fit: cover; background: var(--bg-soft); }

/* Forum-post author panel — a 60px square avatar above the username. */
.forum-post__avatar {
    width: 60px; height: 60px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-soft);
    margin-bottom: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

.comment__main { flex: 1; min-width: 0; }

.comment__head {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.comment__author { font-weight: 700; color: var(--text); font-size: .92rem; }
.comment__author a { color: var(--text); }
.comment__author a:hover { color: var(--accent); text-decoration: none; }

.comment__meta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto;
    font-size: .76rem;
    color: var(--text-muted);
}
.comment__permalink {
    color: var(--text-muted);
    font-weight: 800;
    padding: 0 5px;
    border-radius: 4px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.comment__permalink:hover { background: var(--bg-soft); color: var(--accent); text-decoration: none; }
.comment__permalink.is-copied {
    background: var(--accent); color: #fff;
}
.comment__permalink.is-copied::after { content: " ✓"; font-size: .7rem; }
.comment__permalink.is-copy-failed {
    background: var(--bad, #d23b3b); color: #fff;
}
.comment__permalink.is-copy-failed::after { content: " ✕"; font-size: .7rem; }

.comment__title {
    display: block;
    margin: 2px 0 4px;
    font-size: .9rem;
}
.comment__body {
    color: var(--text);
    font-size: .94rem;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.comment__body p:first-child { margin-top: 0; }
.comment__body p:last-child  { margin-bottom: 0; }
.comment__body img { max-width: 100%; height: auto; border-radius: 6px; }

/* On-demand translation, injected under the comment body. */
.comment__translation {
    margin: 6px 0 0;
    padding: 7px 10px;
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-radius: 0 6px 6px 0;
    font-size: .92rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.comment__translation.is-error {
    border-left-color: var(--text-muted);
    color: var(--text-muted);
    font-style: italic;
}

/* Enhanced opt-in spell-check (App\...; amvSpell module). */
.amv-spell-chip {
    display: flex; align-items: center; gap: 6px;
    margin: 6px 0 0; font-size: .8rem;
}
.amv-spell-chip__enable {
    border: 1px dashed var(--border); background: transparent; color: var(--text-muted);
    border-radius: 999px; padding: 2px 10px; cursor: pointer;
}
.amv-spell-chip__enable:hover { color: var(--text); border-color: var(--accent); }
.amv-spell-chip__dismiss {
    border: 0; background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 4px;
}
.amv-spell-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 6px 0 0; font-size: .82rem; position: relative;
}
.amv-spell-bar__label { margin-right: 2px; }
.amv-spell-word {
    border: 0; background: transparent; cursor: pointer; padding: 1px 2px;
    color: var(--text);
    text-decoration: underline wavy var(--bad, #e11d48);
    text-underline-offset: 2px;
}
.amv-spell-word:hover { background: color-mix(in srgb, var(--bad, #e11d48) 12%, transparent); border-radius: 4px; }
.amv-spell-pop {
    position: absolute; z-index: 30; margin-top: 2px;
    display: flex; flex-direction: column; min-width: 120px;
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); overflow: hidden;
}
.amv-spell-pop button {
    text-align: left; border: 0; background: transparent; color: var(--text);
    padding: 6px 12px; cursor: pointer; font-size: .85rem;
}
.amv-spell-pop button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.amv-spell-pop .muted { padding: 6px 12px; }

.comment__foot {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* ---- Admin moderation dropdown (partials/mod-actions) ---- */
.mod-actions { position: relative; display: inline-block; margin-left: auto; }
.mod-actions__trigger {
    cursor: pointer; list-style: none; font-size: .9rem; line-height: 1;
    opacity: .55; padding: 2px 4px; border-radius: 6px; user-select: none;
}
.mod-actions__trigger::-webkit-details-marker { display: none; }
.mod-actions__trigger:hover,
.mod-actions[open] .mod-actions__trigger { opacity: 1; background: var(--bg-soft); }
.mod-actions__panel {
    position: absolute; right: 0; z-index: 50; min-width: 190px;
    margin-top: 4px; padding: 6px;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 2px;
}
.mod-actions__item {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; color: var(--text);
    padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: .85rem;
}
.mod-actions__item:hover { background: var(--bg-soft); }
.mod-actions__item--danger { color: var(--bad); }
.mod-actions__group { padding: 4px 4px 2px; }
.mod-actions__label { display: block; font-size: .72rem; color: var(--text-muted); margin-bottom: 4px; }
.mod-actions__windows { display: flex; gap: 4px; }
.mod-actions__item--sm {
    width: auto; padding: 3px 9px; border: 1px solid var(--border);
    border-radius: 6px; font-variant-numeric: tabular-nums;
}

/* ---- Inline comment edit + delete ---- */
.comment__action--danger { color: var(--bad); }
.comment-edit { margin: 6px 0 4px; }
.comment-edit__text {
    width: 100%; min-height: 80px; resize: vertical;
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
    font: inherit; line-height: 1.5;
}
.comment-edit__actions { display: flex; gap: 6px; margin-top: 6px; }

/* ---- Vote pill ---- */
.comment__pill {
    display: inline-flex; align-items: center;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    font-size: .78rem;
    height: 28px;
}
.comment__pill--ro { padding: 0 4px; }
.comment__pill-btn {
    background: transparent;
    border: 0;
    width: 28px; height: 28px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .85rem;
    padding: 0;
    transition: background .12s, color .12s;
}
.comment__pill-btn:hover { background: var(--bg-elev); color: var(--text); }
.comment__pill-btn--up:hover   { color: #16a34a; }
.comment__pill-btn--down:hover { color: var(--bad); }
.comment__pill-score, .comment__pill-icon {
    display: inline-block;
    min-width: 36px;
    padding: 0 8px;
    text-align: center;
    font-weight: 700;
    color: var(--text);
    line-height: 28px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.comment__pill-score.is-pos { color: #16a34a; }
.comment__pill-score.is-neg { color: var(--bad); }
.comment__pill-icon { font-weight: 400; color: var(--text-muted); }

.comment__action {
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: .8rem;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.comment__action:hover {
    background: var(--bg-soft);
    color: var(--accent);
    border-color: var(--border);
}

/* ---- Best-comment highlight (overrides earlier rule) ---- */
.comment--best {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245,158,11,.18);
    background: linear-gradient(180deg, rgba(245,158,11,.07), var(--bg-elev));
}

/* ---- Empty state ---- */
.comments__empty {
    background: var(--bg-soft);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    list-style: none;
}
.comments__empty-icon { font-size: 2.4rem; margin-bottom: 6px; }
.comments__empty-text { color: var(--text-muted); margin: 0 0 10px; }

/* Server-side comment pagination — sits between the list and the
   reply form so it doesn't crowd either. */
.comments__pagination {
    margin: 18px 0 6px;
    display: flex;
    justify-content: center;
}

/* ---- Compose form ---- */
.comment-form {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-top: 18px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 10px;
}
.comment-form__author {
    display: flex; align-items: center; gap: 10px;
}
.comment-form__author-text { display: flex; flex-direction: column; }
.comment-form__hint { font-size: .72rem; }
.comment-form__textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-soft);
    color: var(--text);
    font-size: .94rem;
    line-height: 1.5;
    transition: border-color .12s, box-shadow .12s;
}
.comment-form__textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}
.comment-form__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.comment-form__count { font-size: .76rem; }
.comment-form__count.is-near { color: #f59e0b; font-weight: 700; }
.comment-form__count.is-over { color: var(--bad);  font-weight: 800; }
.comment-form__error {
    color: var(--bad);
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: .85rem;
}
.comment-form--anon {
    flex-direction: row; align-items: center; gap: 12px;
}

/* ---------- BBCode toolbar ----------
   Shared by the comment form (file/news/voting) and the forum reply box.
   Buttons are organised into <div class="bbcode-group"> chunks so the
   eye can quickly scan groups (text style · colour/size · blocks · media
   · smileys). A faint vertical rule separates groups. Colour and size
   pickers use a native <details> popover so we don't ship a JS popup lib. */
.bbcode-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
}
.bbcode-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border-right: 1px solid var(--border);
}
.bbcode-group:last-child,
.bbcode-group--end { border-right: 0; }

.bbcode-btn {
    min-width: 32px;
    padding: 4px 8px;
    line-height: 1.1;
}
.bbcode-btn strong,
.bbcode-btn em,
.bbcode-btn s,
.bbcode-btn span { display: inline-block; }

/* Colour & size pickers (and the smiley picker reuse the same shell) */
.bbcode-picker { position: relative; display: inline-block; }
.bbcode-picker > summary {
    list-style: none;
    cursor: pointer;
}
.bbcode-picker > summary::-webkit-details-marker { display: none; }
.bbcode-picker[open] > summary { background: var(--bg-soft); }

.bbcode-picker__pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    padding: 8px;
}

.bbcode-picker__pop--colors {
    display: grid;
    grid-template-columns: repeat(5, 22px);
    gap: 4px;
}
.bbcode-color {
    width: 22px;
    height: 22px;
    /* Outer rim works on both light and dark popovers — semi-transparent
       so the chip's actual colour still reads, just framed. */
    border: 1px solid rgba(127,127,127,.45);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.bbcode-color:hover { transform: scale(1.1); }
html[data-theme="dark"] .bbcode-color {
    border-color: rgba(255,255,255,.35);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

.bbcode-picker__pop--sizes {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    gap: 2px;
}
.bbcode-size {
    text-align: left;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text);
}
.bbcode-size:hover { background: var(--bg-soft); }

/* The summary "current colour" indicator — small rainbow chip so the
   colour-picker button reads obviously as a colour control. */
.bbcode-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, #e11d48 0%, #f59e0b 35%, #16a34a 65%, #2563eb 100%);
    vertical-align: middle;
}

/* Smiley grid — slightly larger cells and a max-height so very long
   smiley registries get a scroll instead of breaking the layout. */
.bbcode-smiley__grid {
    display: grid;
    grid-template-columns: repeat(8, 28px);
    gap: 4px;
    max-height: 260px;
    overflow: auto;
}
.bbcode-smiley__grid button {
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bbcode-smiley__grid button:hover {
    background: var(--bg-soft);
    border-color: var(--border);
}
.bbcode-smiley__grid img {
    max-width: 22px;
    max-height: 22px;
    display: block;
}
/* SVG smileys (legacy comment set) lack intrinsic dimensions, so the
   max-* fallback isn't enough — they need an explicit size. */
.bbcode-smiley__grid--svg img {
    width: 22px;
    height: 22px;
}

/* Small screens: scroll horizontally instead of wrapping (groups stay
   intact, separators still read). */
@media (max-width: 540px) {
    .bbcode-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bbcode-toolbar::-webkit-scrollbar { display: none; }
    .bbcode-group { flex: 0 0 auto; }
    /* Pickers stay anchored to their button on mobile too. */
    .bbcode-picker__pop { left: auto; right: 0; }
}

/* Small screens: avatars wrap, meta block falls under author */
@media (max-width: 540px) {
    .comment { padding: 12px; gap: 10px; }
    .comment__avatar { width: 34px; height: 34px; font-size: .95rem; }
    .comment__meta { margin-left: 0; }
}

label.field {
    display: flex; flex-direction: column; gap: 6px;
    font-size: .82rem;
    color: var(--text-muted);
    font-weight: 600;
}
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], textarea, select {
    font: inherit; color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--link);
    box-shadow: 0 0 0 3px rgba(44,92,221,.15);
    background: var(--bg-elev);
}
textarea { min-height: 130px; resize: vertical; }

/* ---------- Search results ---------- */

.search-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin: 0 0 18px;
    padding: 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 7px;
}

.search-filter input[type="search"] {
    width: 100%;
    min-height: 38px;
    background: var(--bg-soft);
    border-color: var(--border);
}

.search-filter .btn {
    min-height: 38px;
    white-space: nowrap;
}

.search-list { display: grid; gap: 14px; }
.search-list .item {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    padding: 30px 0;
    color: var(--text-muted);
    font-size: .88rem;
}
.site-footer__row {
    display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    align-items: center;
}
.site-footer a { color: var(--text-soft); }

/* ---------- Utility ---------- */

.flex { display: flex; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }

.empty {
    background: var(--bg-elev);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

/* ---------- Voting widget ---------- */

.voting__bar {
    background: var(--bg-soft);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-top: 4px;
}
.voting__bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.voting__option { margin-bottom: 10px; }
.voting__option label { display: flex; gap: 8px; align-items: center; cursor: pointer; font-size: .9rem; }

/* ---------- Star rating ---------- */

.stars { display: inline-flex; gap: 3px; direction: rtl; }
.stars input { display: none; }
.stars label {
    cursor: pointer;
    font-size: 22px;
    color: var(--border-strong);
    line-height: 1;
}
.stars input:checked ~ label,
.stars label:hover, .stars label:hover ~ label { color: #f5b400; }

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.breadcrumbs a { color: var(--text-soft); }

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    background: var(--bg-soft);
    color: var(--text-soft);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.badge--accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.badge--muted  { opacity: .65; }

/* ---------- Forum ---------- */

.forum-cat { margin-bottom: 24px; }
.forum-cat__title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: var(--text);
    background: linear-gradient(90deg, var(--accent-2), transparent);
    color: #fff;
    padding: 8px 14px;
    border-radius: var(--radius);
}
.forum-cat__table {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.forum-row {
    display: grid;
    /* The stat columns were 90px each, too tight for "СООБЩЕНИЯ" and
       "ПОСЛЕДНЕЕ СООБЩЕНИЕ" to fit on a single uppercase line — they
       overflowed and collided with the next column. Widened + the
       header row now lets long labels wrap to two lines. */
    grid-template-columns: minmax(0,1fr) 110px 110px 240px;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.forum-row:last-child { border-bottom: 0; }
.forum-row--head {
    background: var(--bg-soft);
    color: var(--text-muted);
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.25;
    align-items: end;
}
.forum-row--head > span {
    white-space: normal;
    overflow: hidden;
    word-break: keep-all;
}
.forum-row__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text);
}
.forum-row__name strong { font-size: 1rem; }
.forum-row__name .muted { font-size: .82rem; }
.forum-row__stat {
    text-align: center;
    color: var(--text-soft);
    font-weight: 700;
}
.forum-row__last {
    color: var(--text-soft);
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 720px) {
    .forum-row { grid-template-columns: minmax(0,1fr) 60px; }
    .forum-row > :nth-child(3),
    .forum-row > :nth-child(4) { display: none; }
}

.forum-post {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.forum-post__author {
    padding: 16px 14px;
    background: var(--bg-soft);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 4px;
}
.forum-post__name {
    font-weight: 700;
    color: var(--accent-2);
    text-decoration: none;
    font-size: 1.02rem;
}
.forum-post__body { padding: 14px 18px; }
.forum-post__head {
    display: flex; justify-content: space-between;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.forum-post__text { color: var(--text); }
.forum-post__text blockquote {
    margin: 8px 0;
    border-left: 3px solid var(--accent-2);
    background: var(--bg-soft);
    padding: 8px 12px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.forum-post__text pre {
    background: var(--bg-soft);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: .88rem;
}
.forum-post__text img { max-width: 100%; border-radius: var(--radius-sm); }
@media (max-width: 640px) {
    .forum-post { grid-template-columns: 1fr; }
    .forum-post__author { border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; gap: 10px; align-items: center; }
}

/* ---------- Admin ---------- */

.admin {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 22px;
}
@media (max-width: 800px) { .admin { grid-template-columns: 1fr; } }

.admin__nav {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex; flex-direction: column; gap: 4px;
    align-self: start;
    position: sticky; top: 72px;
    box-shadow: var(--shadow-sm);
}
.admin__nav a {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-weight: 600;
}
.admin__nav a:hover { background: var(--bg-soft); text-decoration: none; color: var(--text); }
.admin__nav a.is-active { background: var(--accent-2); color: #fff; }

.admin__body {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
}
.admin__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.admin__head h2 { margin: 0; }
.admin__search {
    display: flex; gap: 8px; margin-bottom: 14px;
    align-items: center;
}
.admin__search input, .admin__search select { padding: 8px 10px; }
.admin__flash {
    background: rgba(16,185,129,.12);
    border: 1px solid var(--good);
    color: var(--good);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-weight: 700;
}

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.admin-card {
    background: linear-gradient(135deg, var(--bg-soft), var(--bg-elev));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex; flex-direction: column; gap: 6px;
    color: var(--text);
}
.admin-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.admin-card__count {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-2);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.admin-table th, .admin-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}
.admin-table th {
    color: var(--text-muted);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.admin-table__actions { display: flex; gap: 4px; }

.admin-form {
    display: grid;
    gap: 14px;
    max-width: 920px;
}
.admin-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.admin-form__foot {
    display: flex; align-items: center; gap: 10px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

/* ---------- Small helpers for legacy embedded markup ---------- */

table.legacy { width: 100%; border-collapse: collapse; }
table.legacy td, table.legacy th { padding: 8px 10px; border-bottom: 1px solid var(--border); }


/* ============================================================
   Compact pack — overrides earlier defaults to densify layout.
   ============================================================ */

body { font-size: 14px; line-height: 1.42; }

h1 { font-size: 1.45rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 .55em; }

.container { max-width: 1280px; padding: 0 12px; }

.site-header__bar { padding: 8px 0; gap: 12px; }
.site-header--slim .site-header__bar { padding: 5px 0; }
.site-header--slim .brand { font-size: 1.05rem; }
.site-header--slim .brand__mark { width: 28px; height: 28px; font-size: .75rem; border-radius: 7px; }
.site-header--slim .brand__name small { display: none; }

.brand { gap: 8px; font-size: 1.2rem; }
.brand__mark { width: 32px; height: 32px; font-size: .9rem; border-radius: 8px; }
.brand__name small { font-size: .62rem; }

.site-header__search input { padding: 7px 14px 7px 54px !important; font-size: .85rem; }

.nav-strip__link { padding: 9px 14px; font-size: .82rem; }
.nav-strip__link.is-active::after { left: 12px; right: 12px; bottom: 3px; }

.hero { padding: 6px 0; }
.hero__strip { gap: 4px; }
.hero__tile { border-radius: 5px; }

.page { padding: 12px 0 28px; }

/* Force-sized layout: 3-column grid with EXPLICIT row placement so items
   physically cannot wrap to a new row. Every grid item is locked to row 1
   via `grid-row: 1`, the columns are template-area named, and the content
   column hard-clips overflow so a wide embedded table can't expand it. */
.page__grid {
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) 230px;
    grid-template-rows: auto;
    grid-template-areas: "leftcol content rightcol";
    gap: 12px;
    align-items: start;
}
.page__grid > .sidebar--left  {
    grid-area: leftcol;
    grid-row: 1; grid-column: 1;
    min-width: 0; max-width: 190px; width: 190px;
    overflow: hidden;
}
.page__grid > .content        {
    grid-area: content;
    grid-row: 1; grid-column: 2;
    min-width: 0; max-width: 100%;
    overflow: hidden;
}
.page__grid > .sidebar--right {
    grid-area: rightcol;
    grid-row: 1; grid-column: 3;
    min-width: 0; max-width: 230px; width: 230px;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .page__grid {
        grid-template-columns: minmax(0, 1fr) 230px;
        grid-template-areas: "content rightcol";
    }
    .page__grid > .sidebar--left { display: none; }
    .page__grid > .content       { grid-column: 1; }
    .page__grid > .sidebar--right { grid-column: 2; }
}
@media (max-width: 800px) {
    .page__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "content" "rightcol";
    }
    .page__grid > .content       { grid-row: 1; grid-column: 1; max-width: 100%; }
    .page__grid > .sidebar--right { grid-row: 2; grid-column: 1; max-width: 100%; width: 100%; }
}

.sidebar { gap: 8px; }
.sidebar h3 { font-size: .7rem; margin: 0 0 5px; }
.sidebar .block { padding: 8px 10px; font-size: .82rem; border-radius: 8px; }
.sidebar .block li + li { margin-top: 4px; padding-top: 4px; }

.card { padding: 12px 14px; border-radius: 8px; }
.card + .card { margin-top: 8px; }

.news-card { border-radius: 9px; margin-bottom: 10px; }
.news-card__head { padding: 8px 12px 0; gap: 8px; }
.news-card__head h2 { font-size: 1rem; line-height: 1.25; }
.news-card__meta { font-size: .74rem; gap: 8px; }
.news-card__cat { padding: 2px 7px; font-size: .65rem; }
.news-card__body { padding: 6px 12px 10px; font-size: .88rem; }
/* `width: auto` previously let the intrinsic / HTML-attribute width win,
   which made legacy news bodies with `<img width="500">` overflow phone
   viewports and trigger the browser's auto-zoom-out. Cap to the column. */
.news-card__body img { max-height: 320px; max-width: 100%; width: auto; height: auto; }
.news-card__foot { padding: 5px 12px; font-size: .72rem; }

.files-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.file-card { border-radius: 8px; }
.file-card__body { padding: 6px 8px 8px; font-size: .82rem; gap: 3px; }
.file-card__title { font-size: .85rem; }
.file-card__meta  { font-size: .72rem; }

.entry { padding: 14px 18px; border-radius: 9px; }
.entry h1 { font-size: 1.4rem; }
.entry__meta { gap: 10px; font-size: .8rem; margin-bottom: 10px; }
.entry__body { font-size: .92rem; }
.entry__player { margin-bottom: 14px; border-radius: 8px; }

.exam-strip { padding: 8px 12px 10px; margin: 0 0 10px; border-radius: 9px; }
.exam-strip__head { margin-bottom: 8px; }
.exam-strip__head h2 { font-size: 1rem; }
.exam-strip__head .muted { font-size: .75rem; }
.exam-strip__rail { gap: 5px; }
.exam-tile { border-radius: 7px; }
.exam-tile__caption { padding: 5px 7px 6px; gap: 1px; }
.exam-tile__title { font-size: .74rem; }
.exam-tile__author { font-size: .66rem; }

.section-head { margin: 0 0 8px; padding-bottom: 4px; gap: 8px; }
.section-head__title { font-size: 1.05rem; }
.section-head__rss { font-size: .65rem; padding: 2px 6px; }

.btn { padding: 6px 12px; font-size: .82rem; }
.btn--sm { padding: 4px 9px; font-size: .74rem; }

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], textarea, select { padding: 7px 9px; font-size: .88rem; }
textarea { min-height: 100px; }

.comment { padding: 9px 12px; margin-bottom: 6px; border-radius: 8px; }
.comment__head { font-size: .76rem; }
.comment__body { font-size: .88rem; }

.pagination, nav[role="navigation"] ul.flex, nav[role="navigation"] .flex { margin: 16px 0 0; gap: 4px; }
.pagination a, .pagination span,
nav[role="navigation"] a, nav[role="navigation"] span {
    min-width: 32px; height: 32px; padding: 0 9px; font-size: .82rem;
}

.site-footer { padding: 18px 0; font-size: .8rem; }


/* ============================================================
   Events
   ============================================================ */

.event-list__head { margin: 16px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.event-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 8px;
}
.event-list--past .event { opacity: .7; }

.event {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 9px;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    box-shadow: var(--shadow-sm);
}
.event--live {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(59,130,246,.06), var(--bg-elev));
}
.event__date {
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    border-radius: 7px;
    color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4px 0;
    line-height: 1.05;
}
.event__day   { font-size: 1.25rem; font-weight: 800; }
.event__month { font-size: .68rem; font-weight: 700; letter-spacing: 1px; }
.event__year  { font-size: .65rem; color: rgba(255,255,255,.7); }
.event__title { font-weight: 700; color: var(--text); font-size: .96rem; }
.event__main  { min-width: 0; }

.event-block { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.event-block__row {
    display: flex; gap: 6px; align-items: baseline; font-size: .78rem;
    padding: 3px 0;
    border-bottom: 1px dashed var(--border);
}
.event-block__row:last-child { border-bottom: 0; }
.event-block__date {
    font-weight: 700;
    color: var(--accent-2);
    min-width: 38px;
    font-variant-numeric: tabular-nums;
}
.event-block__title { color: var(--text); }


/* ============================================================
   Forum layout
   ============================================================ */

.page--forum { padding: 10px 0 30px; }
/* Forum layout was a 2-col grid (content + right aside). The aside is
   retired; the page is now full-width. .forum-layout--full is the new
   variant; the older grid rules stay below for any view that still
   uses the wrapped column for max-width readability. */
.forum-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.forum-layout--full { display: block; }
.forum-layout__aside { display: none; }

.forum-cat { margin-bottom: 14px; }
.forum-cat__title { padding: 6px 10px; font-size: .92rem; margin-bottom: 4px; border-radius: 7px; }
.forum-cat__table { border-radius: 9px; }
.forum-row { padding: 8px 12px; gap: 10px; grid-template-columns: minmax(0,1fr) 92px 92px 200px; }
.forum-row--head { font-size: .66rem; letter-spacing: .2px; }
.forum-row__name strong { font-size: .92rem; }
.forum-row__name .muted { font-size: .76rem; }

.forum-post { margin-bottom: 8px; border-radius: 9px; grid-template-columns: 150px minmax(0, 1fr); }
.forum-post__author { padding: 10px 10px; gap: 2px; }
.forum-post__name { font-size: .92rem; }
.forum-post__body { padding: 10px 14px; }
.forum-post__head { padding-bottom: 6px; margin-bottom: 6px; }
.forum-post__text { font-size: .9rem; }


/* ============================================================
   Admin shell (its own layout)
   ============================================================ */

body.body--admin {
    background: #0e1320;
    color: #ecedf3;
}

.admin-shell__top {
    /* Matches the new carbon-midnight dark palette — pure-dark with a
       faint blue cast, distinct from the body bg so the sticky bar
       reads as elevated chrome. */
    background: #0c1018;
    border-bottom: 1px solid #1a2034;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}
.admin-shell__bar {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 0;
}
.admin-shell__brand {
    display: flex; align-items: center; gap: 8px;
    color: #fff; font-weight: 700; font-size: .98rem;
}
.admin-shell__brand:hover { text-decoration: none; }
.admin-shell__crumb {
    display: flex; gap: 2px; align-items: center;
    flex: 1; flex-wrap: wrap;
}
.admin-shell__crumb a {
    padding: 6px 10px;
    color: rgba(255,255,255,.7);
    font-weight: 600;
    font-size: .82rem;
    border-radius: 6px;
}
.admin-shell__crumb a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.admin-shell__crumb a.is-active { background: var(--accent-2); color: #fff; }
.admin-shell__user {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem;
}
.admin-shell__user form button.btn { background: rgba(255,255,255,.08); color: #fff; border-color: transparent; }

.admin-shell__body { padding: 14px 0 30px; }
.admin-shell__foot {
    border-top: 1px solid #1a2034;
    padding: 12px 0; font-size: .8rem;
}

body.body--admin .admin__body,
body.body--admin .admin__nav,
body.body--admin .admin-card,
body.body--admin .admin-table th,
body.body--admin .admin-table td {
    background: #161c2c;
    border-color: #283149;
    color: #ecedf3;
}
body.body--admin .admin-table th { color: #8f99b3; }
body.body--admin .admin-card__count { color: #f5b400; }
body.body--admin input, body.body--admin textarea, body.body--admin select {
    background: #0e1320; color: #ecedf3; border-color: #283149;
}
body.body--admin .admin-form textarea { min-height: 120px; }

/* On the admin shell pages, the admin layout file just yields content;
   keep the inner admin __body card unboxed when used directly. */
body.body--admin .admin { display: block; }
body.body--admin .admin__nav { display: none; }
body.body--admin .admin__body { border: 0; padding: 0; box-shadow: none; background: transparent; }


/* Nav-strip — boost so it can't be missed even with the dense header. */
.nav-strip {
    background: rgba(0, 0, 0, .35);
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.nav-strip__row { gap: 0; flex-wrap: wrap; }
.nav-strip__link {
    padding: 10px 18px;
    font-size: .88rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: .25px;
    border-bottom: 2px solid transparent;
}
.nav-strip__link::before {
    content: "■";
    margin-right: 8px;
    color: rgba(255,255,255,.5);
    font-size: .58em;
    vertical-align: middle;
}
.nav-strip__link:first-child::before { content: ""; margin-right: 0; }
.nav-strip__link:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav-strip__link.is-active {
    background: rgba(255,255,255,.10);
    border-bottom-color: var(--accent);
    color: #fff;
}
.nav-strip__link.is-active::after { display: none; }
.nav-strip__link--admin {
    margin-left: auto;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.cat-contests details summary { cursor: pointer; padding: 4px 0; font-size: .78rem; }
.cat-contests details > ul { padding-left: 14px; }
/* Legacy `[?]` help icon next to each contest title — opens the
   "Information about contest …" static info page. */
.cat-contests__help {
    color: var(--text-muted);
    font-weight: 700;
    font-size: .8rem;
    margin-right: 4px;
    text-decoration: none;
}
.cat-contests__help:hover { color: var(--accent); }

/* Sidebar "new" badge on genre categories — port of legacy
   new_icons(last_add). Three recency tiers, hottest (today) most
   saturated, fading to a muted hairline pill for "this week". */
.cat-new {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}
.cat-new--today { background: var(--bad);  color: #fff; }
.cat-new--3days { background: var(--warn); color: #1a1209; }
.cat-new--week  {
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--text-muted);
    border: 1px solid color-mix(in srgb, var(--text-muted) 32%, transparent);
}
/* High-contrast: flatten all tiers to the theme's black-on-yellow chip
   so the badge stays legible (tier nuance gives way to readability). */
html[data-theme="high-contrast"] .cat-new {
    background: #ffff00 !important;
    color: #000000 !important;
    border-color: #ffff00 !important;
}

/* Contest "voting is open" sidebar block — port of the legacy
   block-Login.php voting links. Legacy rendered them red and centred;
   we keep the red urgency cue on the CTA but use the normal block
   layout. */
.block--contest-voting .contest-voting__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.block--contest-voting li {
    display: grid;
    gap: 2px;
    font-size: .9rem;
}
.contest-voting__cta {
    color: #d33;
    font-weight: 700;
    text-decoration: none;
}
.contest-voting__cta:hover { text-decoration: underline; }

/* Round-2 ballot: unfilled selects flagged on submit. */
.contest-rank-list select.is-invalid {
    border-color: var(--bad, #d33);
    outline: 1px solid var(--bad, #d33);
}

/* Ballot clip preview panel (legacy convote setPreview port). */
.contest-preview {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
}
.contest-preview__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
}
.contest-preview__close {
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}
.contest-preview__close:hover { color: var(--bad, #d33); }
.contest-preview__author { margin: 0 0 8px; }
.contest-preview__thumb img {
    max-width: 320px;
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin-bottom: 8px;
}
.contest-preview__text { font-size: .9rem; line-height: 1.5; }
.contest-preview__text img { max-width: 100%; height: auto; }
.contest-preview__trigger {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1rem;
    opacity: .65;
}
.contest-preview__trigger:hover { opacity: 1; }

/* Events sidebar block — port of legacy block-Events.php.
   Legacy emitted `<BR><center><a><img border=0></a></center><UL>…`
   — a plain, un-styled banner with a vanilla disc-bullet list under
   it. We replicate that minimalism (no shadow, no rounded poster, no
   accent rail) so contest banners look identical to the legacy site. */
.events-block { padding: 4px 6px 8px; }
.events-block > h3 { margin-bottom: 6px; }
.events-block__poster-wrap {
    text-align: center;
    margin: 6px 0 10px;
    line-height: 0;
}
.events-block__poster-wrap a { display: inline-block; }
.events-block__poster-wrap img {
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.events-block__list {
    list-style: disc outside;
    padding: 0 0 0 22px;
    margin: 8px 0 4px;
    font-size: .9rem;
    line-height: 1.55;
}
.events-block__list li { margin: 3px 0; }
.events-block__list a { color: var(--link, var(--accent)); text-decoration: none; }
.events-block__list a:hover { text-decoration: underline; }
.events-block.is-live {
    /* No accent rail in legacy — only the bullet list signals "active". */
}

/* User-panel variant of the auth block (shown when signed in). */
.user-block__links { list-style: none; padding: 0; margin: 0 0 8px; }
.user-block__links li { padding: 3px 0; }
.user-block__links a { color: var(--text); font-weight: 600; }

/* Grid items default to min-width: auto, which lets long unbreakable words
   (long English titles, raw URLs, embedded tables) blow the column out and
   push siblings onto the next row. Clamping all flex/grid columns to
   min-width: 0 keeps the page__grid tracks honored. */
.page__grid > .sidebar,
.page__grid > .content,
.forum-layout > .forum-layout__main,
.forum-layout > .forum-layout__aside {
    min-width: 0;
}
.content,
.news-card,
.news-card__body,
.entry,
.entry__body {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Legacy stored HTML inside news bodies and file/page entries embeds tables
   with width="100%", percentage TD widths, raw URLs, and onclick handlers.
   Without explicit clamping the table grows to its preferred min-content
   width and pushes the right sidebar onto the next grid row (mostly visible
   on EN where the content is wider). Force every embedded block to fit. */
.news-card__body,
.entry__body {
    overflow-x: auto;
}
.news-card__body *,
.entry__body * {
    max-width: 100%;
}
.news-card__body img,
.news-card__body video,
.news-card__body iframe,
.entry__body img,
.entry__body video,
.entry__body iframe {
    height: auto;
}
.news-card__body table,
.entry__body table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    table-layout: fixed;
    border-collapse: collapse;
}
.news-card__body td,
.entry__body td {
    word-break: break-word;
}
/* Default borders for legacy news / page tables (the editor emits
   `<table cellspacing="1" cellpadding="1">` without inline CSS, so
   without these the cells render as plain whitespace-separated text). */
.news-card__body table th, .news-card__body table td,
.entry__body table th, .entry__body table td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    vertical-align: top;
}
.news-card__body table th, .entry__body table th {
    background: var(--bg-soft);
    font-weight: 700;
    text-align: left;
}

/* Legacy contest table — class names `contest-table` / `contanh` /
   `contan` come from `admin/modules/contests.php::create_con_table`. */
.contest-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
}
.contest-table td, .contest-table th {
    border: 1px solid var(--border);
    padding: 8px 10px;
    vertical-align: top;
}
.contest-table .contanh td,
.contest-table tr.contanh > td {
    background: var(--bg-soft);
    font-weight: 700;
    text-align: left;
    color: var(--text);
}
.contest-table .contan {
    cursor: pointer;
    transition: background .12s;
}
.contest-table .contan:hover {
    background: var(--bg-soft);
}
/* The "show full table" anchor itself — `<a href="javascript:show(…)">`. */
.contest-table a[href^="javascript:show"] {
    display: inline-block;
    padding: 4px 0;
    font-weight: 700;
    color: var(--link);
}

/* Off-screen tracking pixels — present but invisible. */
.beacons { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Homepage polish and responsive navigation cleanup. */
.drawer-toggle {
    display: none;
}

/* Hide the drawer toggle on layouts that don't carry a left sidebar
   (forum, admin) — the button used to render but did nothing on tap,
   because the drawer-open CSS only knows how to slide in the
   .page__grid > .sidebar--left used by layouts/app.blade.php. */
.body--forum .drawer-toggle,
.body--admin .drawer-toggle {
    display: none !important;
}

.site-header__bar {
    min-height: 56px;
}

.site-header__actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-strip__row {
    justify-content: center;
}

.page__grid {
    grid-template-columns: 190px minmax(0, 1fr) 250px;
}

.page__grid > .sidebar--right {
    max-width: 250px;
    width: 250px;
}

.sidebar .block {
    border-radius: 7px;
    box-shadow: none;
}

.sidebar .block + .block {
    margin-top: 2px;
}

/* Theme-agnostic surface — an accent-tinted elevation built from theme
   variables so the panel reads on EVERY palette. (Was a hardcoded
   white→lavender gradient with a dark-only override, which left the
   strip light — and its muted subtitle unreadable — on amoled, sepia,
   nord, dracula, solarized, gruvbox and high-contrast.) On high-contrast
   --bg-elev equals the page black, so the themed --border (white) keeps
   the panel outlined. */
.exam-strip {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 12%, var(--bg-elev)),
            var(--bg-elev));
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    box-shadow: var(--shadow-sm);
}

.exam-strip__head {
    align-items: flex-start;
}

.exam-tile {
    box-shadow: none;
}

.exam-tile__thumb {
    aspect-ratio: 16 / 10;
}

.news-card {
    border-radius: 7px;
    box-shadow: none;
}

.news-card:hover {
    box-shadow: 0 8px 24px rgba(35, 42, 66, .06);
}

.news-card__head {
    align-items: baseline;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.news-card__body {
    padding-top: 10px;
}

.news-card__body p:empty {
    display: none;
}

@media (max-width: 1100px) {
    .drawer-toggle {
        display: grid;
        position: fixed;
        left: 10px;
        bottom: 12px;
        z-index: 80;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-2), var(--accent));
        color: #fff;
        box-shadow: var(--shadow);
        cursor: pointer;
    }

    body.drawer-open .page__grid > .sidebar--left {
        /* `!important` overrules the defensive `.page__grid >
           .sidebar--left { display: none !important; }` mobile rule
           later in this file (line ~5223). Both have !important; the
           drawer selector wins on specificity (3 classes vs 2). */
        display: flex !important;
        position: fixed;
        z-index: 75;
        left: 12px;
        top: 76px;
        bottom: 66px;
        width: min(280px, calc(100vw - 24px));
        max-width: min(280px, calc(100vw - 24px));
        overflow-y: auto;
        padding: 0;
    }

    body.drawer-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(8, 12, 24, .38);
    }
}

@media (max-width: 800px) {
    .site-header__bar {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .site-header__search {
        grid-column: 1 / -1;
        max-width: none;
        order: 3;
        width: 100%;
    }

    .brand__name small {
        display: none;
    }

    .nav-strip__row {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .nav-strip__row::-webkit-scrollbar {
        display: none;
    }

    .nav-strip__link {
        flex: 0 0 auto;
    }

    /* Stack title/subtitle and the "Подробнее →" button vertically on
       phones — `justify-content: space-between` was forcing the button
       into a narrow gutter where its label wrapped to 4 lines. */
    .exam-strip__head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .exam-strip__head .btn {
        align-self: flex-start;
        white-space: nowrap;
    }

    .news-card__head {
        display: grid;
    }

    .search-filter {
        grid-template-columns: minmax(0, 1fr);
    }

    .search-filter .btn {
        width: 100%;
    }
}

/* Smileys inline. The SVG variant (legacy comment set) needs an explicit
   width too — the source SVGs have no intrinsic size and would balloon
   to fit their parent without it. */
.smiley { display: inline-block; vertical-align: middle; max-height: 18px; }
.smiley--svg { width: 18px; height: 18px; max-height: 18px; }

/* Error pages. */
.errorpage {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 50px 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.errorpage__code {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--accent-2);
    margin: 0 0 12px;
    letter-spacing: -.02em;
}
.errorpage__msg { font-size: 1.05rem; color: var(--text-soft); margin: 0 0 18px; }

/* Profile achievements grid. `auto-fill` + minmax means the grid
   naturally fans out across multiple rows once the tiles can't fit on
   one line — no extra wrap logic needed. Long titles wrap inside the
   tile (clamp keeps the row heights uniform). */
.achievements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.achievement {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 10px;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    font-size: .82rem;
    line-height: 1.25;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.achievement:hover {
    box-shadow: var(--shadow);
    border-color: var(--accent);
    transform: translateY(-2px);
}
.achievement img {
    width: 56px; height: 56px;
    object-fit: contain;
    margin-bottom: 8px;
}
.achievement span {
    /* Two-line clamp so a 60-char title doesn't stretch its tile twice
       as tall as its neighbours, breaking the grid's visual rhythm. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

@media (max-width: 540px) {
    .achievements { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
    .achievement { padding: 12px 8px; font-size: .78rem; }
    .achievement img { width: 48px; height: 48px; }
}

/* ===== Video player ===== */
.player { margin: 0 0 14px; }
.player__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.player__frame iframe, .player__frame video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    background: #000;
}
/* Transparent click-to-play/pause shield (added by app.js) — sits above the
   <video> so a click gives one deterministic toggle, instead of Firefox's
   un-preventable native content-area toggle that desyncs play/pause. Stops
   44px short of the bottom so the native control bar stays clickable. */
.player__click {
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: 44px;
    z-index: 2;
    cursor: pointer;
    background: transparent;
}
.player__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.player__controls .btn { padding: 3px 10px; font-size: .78rem; }
.player__controls .btn.is-active {
    background: var(--accent-2);
    color: #fff;
    border-color: transparent;
}

.downloads {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: 14px 0;
}
.downloads__title {
    margin: 0 0 6px;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.downloads__list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}

/* (.comment--best / .comment__badge moved into the rebuilt comments block above) */
.comment__badge {
    background: #f59e0b;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 4px;
}

/* ============================================================
   Phase G — full file/video page
   ============================================================ */

.video-page__head {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
    align-items: center;
}
.video-page__title { margin: 0; font-size: 1.35rem; }
.video-page__cats  { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   Legacy-style video page (close port of legacy func_view.php)
   ============================================================ */

/* Breadcrumb bar + action icons (legacy table.video-page-color) */
.video-crumbs {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 10px;
    margin-bottom: 8px;
    font-size: .86rem;
}
.video-crumbs__path a { color: var(--accent); }
.video-crumbs__path a:hover { text-decoration: underline; }
.video-crumbs__path strong { color: var(--text); }
.video-crumbs__actions { display: inline-flex; gap: 10px; }
.video-crumbs__actions a { font-size: 1rem; opacity: .75; }
.video-crumbs__actions a:hover { opacity: 1; text-decoration: none; }

/* Title bar (legacy video-page-sub-color row with the video.png icon) */
.video-titlebar {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
}
.video-titlebar__icon { font-size: 1.4rem; line-height: 1; }
.video-titlebar__title { margin: 0; font-size: 1.25rem; flex: 1; }
.video-titlebar__spoiler { align-self: center; white-space: nowrap; }

/* Category links right below title (legacy nav_link tail) */
.video-cats {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 0 0 12px;
    font-size: .85rem;
}
.video-cats a {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 12px;
    color: var(--text-muted);
}
.video-cats a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Boxed sections (legacy ".video-descr-color .video-descr-border") */
.video-box {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 10px 0;
}
.video-box__inner { padding: 12px 14px; }

.video-box--descr .video-box__inner {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 320px);
    gap: 16px;
    align-items: start;
}
@media (max-width: 760px) {
    .video-box--descr .video-box__inner { grid-template-columns: 1fr; }
}

/* Left column: author/studio/submitter/links rows */
.video-info { font-size: .92rem; line-height: 1.55; }
.video-info__row { margin-bottom: 5px; }
.video-info__label {
    font-weight: 700;
    color: var(--text-muted);
    margin-right: 4px;
}
.video-info__sub { margin-left: 6px; font-size: .76rem; }
.video-info__row a { color: var(--accent); }
.video-info__row a:hover { text-decoration: underline; }

/* Right column: big rating + your vote + favorite */
.video-rating {
    display: flex; flex-direction: column; gap: 8px;
    align-items: flex-end;
    text-align: right;
}
.video-rating__bar {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap; justify-content: flex-end;
}
.video-rating__star {
    color: var(--border-strong); font-size: 1.25rem; line-height: 1;
}
.video-rating__star.on { color: #f5b400; }
.video-rating__star.half {
    background: linear-gradient(90deg, #f5b400 50%, var(--border-strong) 50%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.video-rating__score {
    font-size: 1.4rem; font-weight: 800; color: var(--accent-2);
    margin-left: 6px;
}
.video-rating__count { font-size: .78rem; }
.video-rating__form {
    display: flex; align-items: center; gap: 6px;
    font-size: .82rem;
}
.video-rating__fav {
    display: flex; align-items: center; gap: 6px;
    font-size: .82rem;
}
.video-rating__fav-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--text);
    font-size: .82rem;
}
.video-rating__fav-btn:hover { border-color: var(--accent); }
.video-rating__fav-btn.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.video-rating__fav-count { font-size: .76rem; }
.video-rating__nologin { font-size: .78rem; text-align: right; margin: 0; }

/* Downloads box — labelled rows (legacy "dllinks-block") */
.video-box--downloads .downloads { padding: 12px 14px; margin: 0; }
.video-box--downloads .downloads__title { margin: 0 0 8px; font-size: 1rem; }
.video-box--downloads .downloads__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
}

/* Stats box — collapsible (legacy show/hide-additional-information) */
.video-box--stats { padding: 0; }
.video-stats > summary {
    cursor: pointer;
    padding: 10px 14px;
    list-style: none;
    user-select: none;
    display: flex; align-items: center; gap: 10px;
    border-radius: var(--radius);
}
.video-stats > summary::-webkit-details-marker { display: none; }
.video-stats > summary:hover { background: var(--bg-soft); }
.video-stats[open] > summary {
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}
.video-stats__title { font-weight: 700; font-size: 1rem; }
.video-stats__hint { font-size: .76rem; }
.video-stats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 12px 14px;
}
@media (max-width: 760px) { .video-stats__grid { grid-template-columns: 1fr; } }
.video-stats__col h4 {
    margin: 0 0 6px;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.video-stats__list {
    list-style: none; padding: 0; margin: 0;
    font-size: .88rem;
    display: flex; flex-direction: column; gap: 4px;
}
.video-stats__list li {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 3px 0;
    border-bottom: 1px dashed var(--border);
}
.video-stats__list li:last-child { border-bottom: 0; }
.video-stats__list strong { color: var(--text); font-weight: 700; }
.video-page__poster {
    width: 100%; max-height: 540px;
    object-fit: contain;
    border-radius: var(--radius);
    background: #000;
    margin: 0 0 14px;
}
.video-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px; margin-top: 12px;
}
@media (max-width: 900px) { .video-page__grid { grid-template-columns: 1fr; } }

.video-page__meta {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin: 12px 0;
    font-size: .9rem;
}
.video-page__meta dt { font-weight: 700; color: var(--text-muted); margin-top: 6px; }
.video-page__meta dd { margin: 2px 0 6px 0; }

.screenshots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin: 12px 0;
}
.screenshots__item img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--border);
}

.player__controls { gap: 12px; }
.player__group { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.rating-block { text-align: center; }
.rating-block__big {
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rating-block__score {
    font-size: 2rem; font-weight: 800;
    color: var(--accent-2); line-height: 1;
}
.rating-block__bar { display: inline-flex; gap: 1px; font-size: 1.1rem; }
.rating-block__star { color: var(--border-strong); }
.rating-block__star.on   { color: #f5b400; }
.rating-block__star.half {
    background: linear-gradient(90deg, #f5b400 50%, var(--border-strong) 50%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.rating-block__count { margin: 0; font-size: .78rem; }
.rating-block__yours { display: block; font-size: .8rem; margin: 6px 0 4px; }
.rating-block__form { display: flex; flex-direction: column; align-items: center; }

.stars-pick { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.stars-pick input { display: none; }
.stars-pick label {
    cursor: pointer; font-size: 22px; line-height: 1;
    color: var(--border-strong); transition: color .12s;
}
.stars-pick input:checked ~ label,
.stars-pick label:hover,
.stars-pick label:hover ~ label { color: #f5b400; }

.stats-list { margin: 0; font-size: .82rem; }
.stats-list dt { color: var(--text-muted); float: left; clear: left; }
.stats-list dd { margin: 0 0 4px; text-align: right; font-weight: 700; }
.stats-list::after { content: ""; display: block; clear: both; }

.embed-panel {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); margin: 12px 0; padding: 10px 14px;
}
.embed-panel summary { cursor: pointer; }
.embed-panel__body { margin-top: 10px; display: grid; gap: 8px; max-width: 560px; }

.badge--warn { background: var(--warn); color: #fff; }
.badge--bad  { background: var(--bad);  color: #fff; }

/* File card: surface author + stats. */
.file-card__meta {
    font-size: .72rem;
    color: var(--text-muted);
    display: flex; justify-content: space-between; gap: 6px;
    align-items: center;
}
.file-card__author { color: var(--text); font-weight: 600; }
.file-card__stats { display: inline-flex; gap: 6px; }
.file-card__stats span { white-space: nowrap; }
.file-card__title-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.file-card__rating {
    background: var(--bg-soft);
    border-radius: 999px;
    padding: 1px 7px;
    font-weight: 700;
    color: #f5b400;
    font-size: .72rem;
    flex-shrink: 0;
}

/* ===== Ratings module ===== */
.ratings-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.rating-tile {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: transform .15s, box-shadow .15s;
    box-shadow: var(--shadow-sm);
}
.rating-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.rating-tile strong {
    display: block;
    font-size: 1.4rem;
    color: var(--accent-2);
    font-weight: 800;
}
.rating-tile span { font-size: .78rem; color: var(--text-muted); }

/* BBCode live preview. */
.bbcode-preview {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px dashed var(--border);
    border-radius: 8px;
    min-height: 38px;
    font-size: .88rem;
}
.bbcode-preview blockquote {
    border-left: 3px solid var(--accent-2);
    padding: 4px 10px;
    background: var(--bg-elev);
    border-radius: 0 6px 6px 0;
    margin: 4px 0;
}
.bbcode-preview pre {
    background: var(--bg-elev);
    padding: 8px 10px;
    overflow-x: auto;
    border-radius: 6px;
    font-size: .84rem;
}

/* Submission wizard. */
.submit-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 14px;
    font-size: .82rem;
}
.submit-steps__item {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    color: var(--text-muted);
}
.submit-steps__item.is-active { background: var(--accent-2); color: #fff; border-color: transparent; }
.submit-steps__item.is-done   { background: var(--good); color: #fff; border-color: transparent; }

.submit-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.submit-cat {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
}
.submit-cat:has(input:checked) { border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(37,99,235,.18); }
.submit-cat input { margin-right: 6px; }
.submit-cat .muted { font-size: .76rem; }

/* ===== File list (row layout, legacy-style) ===== */
.file-list {
    display: flex; flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.file-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s;
}
.file-row:hover { box-shadow: var(--shadow); }
.file-row__thumb {
    aspect-ratio: 16 / 9;
    background: var(--bg-soft);
    border-radius: 6px;
    overflow: hidden;
    display: block;
}
.file-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-row__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px;
}
.file-row__title {
    margin: 0; font-size: 1.05rem; line-height: 1.25;
}
.file-row__title a { color: var(--text); }
.file-row__title a:hover { color: var(--link); text-decoration: none; }
.file-row__rating {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg-soft);
    border-radius: 999px;
    padding: 2px 10px;
    flex-shrink: 0;
}
.file-row__rating strong { color: #f5b400; font-weight: 800; }
.file-row__rating .muted { font-size: .72rem; }
.file-row__byline {
    margin: 4px 0 6px;
    color: var(--text-soft);
    font-size: .82rem;
}
.file-row__byline strong { color: var(--text-muted); font-weight: 600; }
.file-row__excerpt {
    margin: 0 0 6px;
    font-size: .88rem;
    color: var(--text-soft);
}
.file-row__hint {
    margin: 0 0 6px;
    font-size: .78rem;
}
.file-row__hint strong { color: var(--text-muted); }
.file-row__foot {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: .78rem;
}
@media (max-width: 600px) {
    .file-row { grid-template-columns: 1fr; }
    .file-row__thumb { max-height: 220px; }
}

/* ============================================================
   Phase V — admin shell with grouped left-nav + search + sticky save
   ============================================================ */

.admin-shell__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}
.admin-shell__search input {
    width: 100%;
    background: rgba(255,255,255,.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 7px 14px;
}
.admin-shell__search input::placeholder { color: rgba(255,255,255,.45); }
.admin-shell__search input:focus {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.32);
    outline: none;
}

.admin-shell__layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .admin-shell__layout { grid-template-columns: 1fr; } }

.admin-shell__nav {
    align-self: start;
    position: sticky; top: 64px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: #10131c;
    border: 1px solid #1d2335;
    border-radius: var(--radius);
    padding: 8px 6px;
}
.admin-nav-group { padding: 6px 4px 4px; }
.admin-nav-group + .admin-nav-group { border-top: 1px dashed #1d2335; margin-top: 4px; }
.admin-nav-group h4 {
    margin: 0 0 4px;
    padding: 0 8px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8f99b3;
    font-weight: 700;
}
.admin-nav-group a {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    color: rgba(255,255,255,.78);
    font-size: .85rem;
    font-weight: 500;
}
.admin-nav-group a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.admin-nav-group a.is-active { background: var(--accent); color: #fff; }
.admin-nav__glyph { width: 18px; text-align: center; font-size: .9rem; flex-shrink: 0; }

.admin-shell__content {
    background: #161c2c;
    border: 1px solid #283149;
    border-radius: var(--radius);
    padding: 16px 18px;
    min-height: 60vh;
}

/* Sticky save-bar */
.admin-form__sticky {
    position: fixed;
    bottom: 0; right: 0; left: 0;
    background: rgba(22, 28, 44, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid #283149;
    padding: 8px 16px;
    text-align: right;
    transform: translateY(120%);
    transition: transform .15s ease-out;
    z-index: 150;
}
.admin-form__sticky.is-active { transform: translateY(0); }

/* Bulk-action toolbar */
.admin-bulk-bar {
    position: sticky; top: 56px;
    background: var(--accent-2);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    z-index: 50;
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.admin-bulk-bar.is-active { display: flex; }
.admin-bulk-bar [data-bulk-count] { font-weight: 800; }
.admin-bulk-bar form, .admin-bulk-bar button { background: rgba(255,255,255,.12); color: #fff; border: 0; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.admin-bulk-bar button:hover { background: rgba(255,255,255,.22); }

/* Admin stats charts */
.admin-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.admin-chart {
    background: #0e1320;
    border: 1px solid #283149;
    border-radius: 8px;
    padding: 12px 14px;
}
.admin-chart h4 {
    margin: 0 0 6px;
    font-size: .82rem;
    color: #8f99b3;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.admin-chart__num { font-size: 1.8rem; font-weight: 800; color: var(--accent); }
.admin-chart__sub { font-size: .76rem; color: #8f99b3; margin-top: 2px; }
.admin-chart svg {
    width: 100%; height: 80px; display: block; margin-top: 8px;
}
.admin-chart__bar { fill: var(--accent); opacity: .85; }
.admin-chart__bar:hover { opacity: 1; }
.admin-chart__line { fill: none; stroke: var(--accent); stroke-width: 2; }

/* ---------- Admin tabs (queue, contest votes) ---------- */
.admin-tabs {
    display: flex; gap: 4px; margin: 0 0 16px;
    border-bottom: 1px solid var(--border);
}
.admin-tabs a {
    padding: 8px 14px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    text-decoration: none;
}
.admin-tabs a:hover { color: var(--text); }
.admin-tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tabs__num {
    display: inline-block; min-width: 16px;
    padding: 0 5px; margin-left: 6px;
    background: var(--bg-soft); color: var(--text-muted);
    border-radius: 8px; font-size: .72rem; line-height: 16px;
    text-align: center;
}

/* ---------- Admin rowlist (forum simple lists) ---------- */
.admin-rowlist__row {
    display: flex; gap: 8px; align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.admin-rowlist__row input[type=text], .admin-rowlist__row input[type=number] {
    background: var(--bg-soft); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 4px 8px; font-size: .85rem;
}

/* ---------- Pills ---------- */
.pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-soft); color: var(--text);
    border-radius: 12px; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .5px;
}

/* ---------- Contest phase fieldset ---------- */
.admin-form__phases {
    border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 14px; margin: 10px 0;
    display: flex; gap: 16px; flex-wrap: wrap;
}
.admin-form__phases legend { padding: 0 6px; color: var(--text-muted); font-size: .8rem; }

/* ---------- Stats line ---------- */
.admin-chart__svg { width: 100%; height: 80px; display: block; margin-top: 8px; }

/* ---------- Submission wizard: drag-and-drop ---------- */
.dropzone {
    display: block;
    border: 2px dashed var(--border);
    border-radius: 12px;
    background: var(--bg-soft);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.is-drop {
    border-color: var(--accent);
    background: rgba(37,99,235,.07);
}
.dropzone.has-file { border-style: solid; border-color: var(--accent); }
.dropzone__inner {
    display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.dropzone__icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: 1.4rem;
}
.dropzone__title { font-size: 1rem; font-weight: 700; }
.dropzone__filename:not(:empty) { font-size: .82rem; margin-top: 4px; }
.dropzone__progress {
    width: 100%; max-width: 480px;
    height: 8px; margin-top: 10px;
    -webkit-appearance: none; appearance: none;
}
.dropzone__progress::-webkit-progress-bar { background: var(--bg-elev); border-radius: 4px; }
.dropzone__progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.dropzone__progress::-moz-progress-bar { background: var(--accent); border-radius: 4px; }

/* ── Async-upload widget (each video slot on /files/add) ── */
.async-dz { display: flex; flex-direction: column; gap: 8px; }
.async-dz__preview {
    border: 1px solid var(--card-bd);
    border-radius: 10px;
    background: #000;
    overflow: hidden;
}
.async-dz__preview video {
    width: 100%;
    max-height: 420px;
    background: #000;
    display: block;
}
.async-dz__preview-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--card-bg);
    border-top: 1px solid var(--card-bd);
}

/* ── 20-frame screenshot picker ── */
.frame-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 6px;
}
.frame-gallery__cell {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .12s, transform .12s;
}
.frame-gallery__cell:hover { border-color: var(--accent); transform: translateY(-1px); }
.frame-gallery__cell img { display: block; width: 100%; height: auto; }

/* ── Screenshot-slot thumbnail preview ── */
.scrin-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.scrin-row__thumb {
    position: relative;
    width: 120px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--card-bd);
}
.scrin-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrin-row__clear {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,.7);
    color: #fff;
    cursor: pointer;
    font-size: .85rem;
    display: grid;
    place-items: center;
}
.scrin-row__clear:hover { background: var(--bad, #d23b3b); }

/* ---------- Char counter ---------- */
.field__counter { font-size: .72rem; margin-left: 8px; }
.field__counter.is-over { color: var(--bad); font-weight: 700; }

/* ---------- Collapsible "more details" ---------- */
.submit-details { margin-top: 14px; }
.submit-details > summary {
    cursor: pointer;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.submit-details > summary::-webkit-details-marker { display: none; }
.submit-details > summary:hover { background: rgba(37,99,235,.08); }
.submit-details[open] > summary { background: rgba(37,99,235,.12); }

/* ---------- Poster picker ---------- */
.poster-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.poster-picker__item {
    position: relative;
    display: block;
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .12s, transform .12s;
}
.poster-picker__item input { position: absolute; opacity: 0; pointer-events: none; }
.poster-picker__item img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.poster-picker__item:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.poster-picker__item.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}
.poster-picker__item.is-selected::after {
    content: "✓"; position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: grid; place-items: center; font-size: .85rem; font-weight: 800;
}
.poster-picker__foot {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 12px; flex-wrap: wrap;
}

/* ---------- Profile rewrite ---------- */
.profile-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 760px) { .profile-shell { grid-template-columns: 1fr; } }

.profile-sidecard {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    position: sticky; top: 80px;
}
.profile-sidecard__avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: grid; place-items: center;
    color: #fff; font-size: 2.6rem; font-weight: 800;
    margin: 0 auto 10px;
    overflow: hidden;
}
.profile-sidecard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-sidecard__name { text-align: center; margin: 0; font-size: 1.15rem; }
.profile-sidecard__rank { text-align: center; color: var(--text-muted); font-size: .82rem; margin: 4px 0 14px; }
.profile-sidecard__stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    margin-top: 12px;
}
.profile-sidecard__stat {
    background: var(--bg-soft);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}
.profile-sidecard__stat strong { display: block; font-size: 1.05rem; color: var(--accent); }
.profile-sidecard__stat span { color: var(--text-muted); font-size: .72rem; }
.profile-sidecard__links { margin-top: 14px; display: grid; gap: 4px; }
.profile-sidecard__links a {
    display: block; padding: 6px 8px; border-radius: 4px;
    color: var(--text); font-size: .88rem;
}
.profile-sidecard__links a:hover { background: var(--bg-soft); text-decoration: none; }

.profile-tabs {
    display: flex; gap: 4px; margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.profile-tabs a {
    padding: 10px 14px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    font-size: .92rem;
}
.profile-tabs a:hover { color: var(--text); }
.profile-tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.profile-section { margin-bottom: 24px; }
.profile-section h3 { margin: 0 0 10px; font-size: 1.05rem; }

.profile-fav-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.profile-fav-strip__item {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
    transition: transform .12s;
}
.profile-fav-strip__item:hover { transform: translateY(-2px); text-decoration: none; }
.profile-fav-strip__item img {
    display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
}
.profile-fav-strip__item span {
    display: block; padding: 6px 8px; font-size: .82rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   Tiny self-contained WYSIWYG (legacy FCKEditor replacement)
   ============================================================ */
.amv-wysiwyg {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.amv-wysiwyg__bar {
    display: flex; flex-wrap: wrap; gap: 2px;
    padding: 6px 8px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}
.amv-wysiwyg__btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    min-width: 28px;
    height: 28px;
    cursor: pointer;
    color: var(--text);
    font-size: .82rem;
    line-height: 1;
}
.amv-wysiwyg__btn:hover {
    background: var(--bg-elev);
    border-color: var(--border);
}
.amv-wysiwyg__btn:active { transform: translateY(1px); }
.amv-wysiwyg__sep {
    display: inline-block;
    width: 1px;
    background: var(--border);
    margin: 4px 4px;
}
.amv-wysiwyg__pane {
    padding: 10px 14px;
    min-height: 180px;
    max-height: 560px;
    overflow: auto;
    background: var(--bg-elev);
    color: var(--text);
    outline: none;
    font-size: .94rem;
    line-height: 1.5;
}
.amv-wysiwyg__pane:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.amv-wysiwyg__pane h2 { font-size: 1.25rem; margin: 12px 0 6px; }
.amv-wysiwyg__pane h3 { font-size: 1.08rem; margin: 10px 0 4px; }
.amv-wysiwyg__pane p { margin: 6px 0; }
.amv-wysiwyg__pane blockquote {
    margin: 8px 0; padding: 6px 12px;
    border-left: 3px solid var(--accent);
    color: var(--text-soft);
    background: var(--bg-soft);
}
.amv-wysiwyg__pane img { max-width: 100%; height: auto; }
.amv-wysiwyg__pane a { color: var(--link); }
.amv-wysiwyg__pane ul, .amv-wysiwyg__pane ol { padding-left: 24px; }

/* ---------- Admin grouped fieldsets (file edit) ---------- */
.admin-fieldset {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 14px;
    background: rgba(0, 0, 0, 0.02);
}
.admin-fieldset > legend {
    padding: 0 8px;
    font-size: .78rem;
    font-weight: 800;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ───── Queue clip-review — legacy `check_adds` two-column table ─────
   Every field gets its own row: label cell on the left (180-220px),
   input cell on the right. Matches the legacy admin so reviewers
   don't have to re-learn where each field lives. */
.queue-review-form { max-width: 1100px; margin-top: 14px; }
.queue-review {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.queue-review > tbody > tr > th,
.queue-review > tbody > tr > td,
.queue-review > tr > th,
.queue-review > tr > td {
    background: var(--bg-elev, var(--card-bg));
    padding: 7px 12px;
    vertical-align: middle;
    color: var(--text);
}
.queue-review th {
    width: 210px;
    font-weight: 600;
    text-align: left;
    color: var(--text-soft);
    font-size: .85rem;
    line-height: 1.25;
}
.queue-review td input[type="text"],
.queue-review td input[type="number"],
.queue-review td textarea,
.queue-review td select { width: auto; max-width: 100%; }
/* `.queue-review td textarea` had higher specificity than the plain
   `.queue-review__wide` class, so wide-marked textareas were silently
   shrinking back to `width: auto`. Scope the wide rule to the cell so
   it actually wins, and stretch the parent `<td>` to the row's full
   width too (the cell otherwise hugs its content). */
.queue-review td.queue-review__wide,
.queue-review td .queue-review__wide,
.queue-review td input.queue-review__wide,
.queue-review td textarea.queue-review__wide,
.queue-review td select.queue-review__wide {
    width: 100%;
    box-sizing: border-box;
    display: block;
}
.queue-review td { width: auto; }
.queue-review td:nth-child(2) { width: 100%; }
.queue-review__section td {
    background: var(--bg-soft);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .82rem;
    color: var(--text-muted);
    padding: 10px 12px;
}
.queue-review__inline { margin-left: 8px; font-size: .82rem; }
.queue-review__inline-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.queue-review__inline-row input[type="text"] { flex: 0 0 280px; min-width: 0; }
.queue-review__url-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.queue-review__url-cell input { flex: 1 1 auto; }
.queue-review__inline-links { line-height: 1.7; }
.queue-review__inline-links a { margin-right: 4px; }
.queue-review__actions td {
    background: var(--bg-soft);
    padding: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.queue-review__reject-link { color: var(--bad); margin-left: auto; }
.queue-review__reject-link:hover { background: rgba(210, 59, 59, .08); }

/* Reject form — hidden until the admin clicks the "Delete from queue"
   link in the action row; opens as a card below the main table. */
.queue-review__reject {
    display: none;
    margin-top: 14px;
    border: 2px solid var(--bad);
    background: var(--bg-elev, var(--card-bg));
    padding: 14px;
    border-radius: 8px;
    max-width: 600px;
}
.queue-review__reject.is-open { display: block; }

.admin-queue-crumbs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
}

@media (max-width: 720px) {
    .queue-review th, .queue-review td { display: block; width: auto !important; }
    .queue-review th { background: var(--bg-soft); padding-bottom: 0; }
    .queue-review__actions td { display: flex; }
}

/* Admin screenshot manager — one row per slot, 90px thumb on the left,
   path + caption + replace + delete on the right. Wraps at narrow widths. */
.admin-screens {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}
.admin-screen {
    display: grid;
    grid-template-columns: 32px 130px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-soft);
}
.admin-screen--add { border-style: dashed; opacity: .9; }
.admin-screen__num {
    font-weight: 800;
    text-align: center;
    color: var(--text-soft);
}
.admin-screen__thumb {
    width: 130px;
    height: 76px;
    overflow: hidden;
    border-radius: 4px;
    background: #000;
    display: grid;
    place-items: center;
}
.admin-screen__thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.admin-screen__fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.admin-screen__fields input[type="text"] {
    font-family: monospace;
    font-size: .82rem;
    padding: 4px 6px;
}
.admin-screen__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
@media (max-width: 600px) {
    .admin-screen { grid-template-columns: 28px 1fr; }
    .admin-screen__thumb { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .admin-screen__fields { grid-column: 1 / -1; }
}

/* Bulk-action header bar on the admin files index. */
.admin__bulk-bar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin: 8px 0;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.admin-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}

/* ============================================================
   Profile page — inline messaging
   ============================================================ */
.profile-actions {
    display: flex; flex-direction: column; gap: 6px;
    align-items: flex-end;
}
.profile-actions .muted { font-size: .82rem; }

.profile-msg {
    background: var(--bg-elev);
    border: 1px solid var(--accent);
    border-radius: 10px;
    margin: 18px 0;
    box-shadow: 0 12px 28px rgba(37,99,235,.18);
    animation: profile-msg-pop .18s ease-out;
}
@keyframes profile-msg-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.profile-msg__form {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px;
}
.profile-msg__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap;
    font-size: .88rem;
}
.profile-msg__foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap;
}
[data-profile-msg-toggle].is-active {
    opacity: .55;
    cursor: not-allowed;
}

/* ============================================================
   Header user menu (replaces bare username + logout button)
   ============================================================ */
.user-menu {
    position: relative;
    display: inline-block;
}
.user-menu > summary {
    list-style: none;
    cursor: pointer;
}
.user-menu > summary::-webkit-details-marker { display: none; }

.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: .85rem;
    line-height: 1;
    transition: background .12s;
}
.user-menu__trigger:hover { background: rgba(255, 255, 255, 0.18); }
.user-menu[open] > summary > .user-menu__trigger,
.user-menu[open] > .user-menu__trigger,
.user-menu[open] .user-menu__trigger {
    background: rgba(255, 255, 255, 0.22);
}
.user-menu__avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    flex-shrink: 0;
}
.user-menu__avatar--lg { width: 44px; height: 44px; font-size: 1.1rem; }
.user-menu__name {
    font-weight: 600;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu__caret { font-size: .65rem; opacity: .85; transition: transform .12s; }
.user-menu[open] .user-menu__caret { transform: rotate(180deg); }

.user-menu__badge {
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.3;
    min-width: 18px;
    text-align: center;
}

.user-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
    z-index: 200;
    animation: user-menu-pop .14s ease-out;
}
@keyframes user-menu-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.user-menu__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.user-menu__head strong { font-size: .98rem; display: block; }
.user-menu__email {
    font-size: .76rem;
    word-break: break-all;
}

.user-menu__list {
    list-style: none;
    margin: 0;
    padding: 6px;
}
.user-menu__list a,
.user-menu__list button {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: .9rem;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}
.user-menu__list a:hover,
.user-menu__list button:hover {
    background: var(--bg-soft);
    color: var(--accent);
    text-decoration: none;
}
.user-menu__icon {
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    font-size: .98rem;
    line-height: 1;
}
.user-menu__pill {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 700;
}
.user-menu__sep {
    display: block;
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}
.user-menu__admin-link {
    color: var(--accent) !important;
    font-weight: 600;
}
.user-menu__logout-form {
    margin: 0;
}

/* Mobile: hide the username text but keep avatar + caret tap target */
@media (max-width: 540px) {
    .user-menu__name { display: none; }
    .user-menu__panel { right: -10px; min-width: 240px; }
}

/* ============================================================
   Video page: technical-spec ribbon + download tech badges
   ============================================================ */

/* Technical-spec ribbon below the player (duration · res · codec · fps · bitrate) */
.video-techbar {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin: 6px 0 12px;
    padding: 6px 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1.6;
}
.video-techbar span { white-space: nowrap; }

/* Per-mirror tech badges in the downloads list */
.downloads__list--detailed {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.downloads__item {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
}
.downloads__link {
    display: flex; align-items: center; gap: 10px;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}
.downloads__link:hover { color: var(--accent); text-decoration: none; }
.downloads__link.is-primary {
    color: var(--accent);
    font-weight: 800;
}
.downloads__label { display: inline-flex; align-items: center; gap: 6px; }
.downloads__size {
    margin-left: auto;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .76rem;
    color: var(--text-muted);
    font-weight: 600;
}
/* The tech ribbon (duration / resolution / codec / bitrate) is meaningful
   to power users but visually noisy in the default state, so collapse it
   by default and slide it down on hover / keyboard-focus of the row.
   The transition keeps the change discoverable instead of feeling like
   a layout glitch. Touch viewers (no hover) toggle it open by tapping
   the row — `:focus-within` from the keyboard handles that branch too. */
.downloads__tech {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: .78rem;
    /* Collapsed state. `max-height` + opacity together give us a smooth
       slide instead of an instant pop. */
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .18s ease, opacity .18s ease, margin-top .18s ease;
}
.downloads__tech span { white-space: nowrap; }
.downloads__item:hover .downloads__tech,
.downloads__item:focus-within .downloads__tech,
.downloads__item.is-tech-open .downloads__tech {
    max-height: 6em;        /* enough for 2 lines of badges */
    margin-top: 6px;
    opacity: 1;
    pointer-events: auto;
}
/* Touch devices have no real hover signal — always show the ribbon
   there so phone users aren't stuck with mystery download rows. */
@media (hover: none) {
    .downloads__tech {
        max-height: none;
        margin-top: 6px;
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================================
   Favorites widget (video page) — rebuilt heart + count + dropdown
   ============================================================ */
.fav-widget {
    display: flex; flex-direction: column; gap: 6px;
    align-items: flex-end;
    margin-top: 4px;
}
.fav-widget__form { margin: 0; padding: 0; }
.fav-widget__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.fav-widget__btn:hover {
    border-color: #e11d48;       /* rose-600 */
    color: #e11d48;
}
.fav-widget__btn:active { transform: scale(0.96); }
.fav-widget__btn[data-busy] { opacity: .65; cursor: wait; }

.fav-widget__btn.is-on {
    background: linear-gradient(135deg, #ec4899, #e11d48);
    border-color: #e11d48;
    color: #fff;
    box-shadow: 0 6px 16px rgba(225,29,72,.28);
}
.fav-widget__btn.is-on:hover { color: #fff; filter: brightness(1.05); }

.fav-widget__heart {
    font-size: 1.15rem; line-height: 1;
    transition: transform .25s cubic-bezier(.5,1.8,.5,.95);
}
.fav-widget__btn.is-on .fav-widget__heart { color: #fff; }
.fav-widget__btn.is-pulsing .fav-widget__heart {
    animation: fav-pop .32s ease;
}
@keyframes fav-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    65%  { transform: scale(0.85); }
    100% { transform: scale(1); }
}

.fav-widget__label { font-weight: 700; white-space: nowrap; }
.fav-widget__count {
    background: rgba(255,255,255,.18);
    color: inherit;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: .76rem;
    font-weight: 800;
    min-width: 22px;
    text-align: center;
}
.fav-widget__btn:not(.is-on) .fav-widget__count {
    background: var(--bg-soft);
    color: var(--text-muted);
}

/* "Who favorited" dropdown */
.fav-widget__who {
    width: 100%;
    max-width: 320px;
}
.fav-widget__who > summary {
    cursor: pointer;
    font-size: .76rem;
    color: var(--text-muted);
    list-style: none;
    padding: 2px 6px;
    border-radius: 4px;
    user-select: none;
    text-align: right;
}
.fav-widget__who > summary::-webkit-details-marker { display: none; }
.fav-widget__who > summary:hover { color: var(--accent); }
.fav-widget__who[open] > summary { color: var(--accent); }
.fav-widget__who-body {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex; flex-wrap: wrap; gap: 4px;
    max-height: 220px;
    overflow: auto;
}
.fav-widget__who-body .pill {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 2px 8px;
    text-transform: none;
    letter-spacing: 0;
    font-size: .76rem;
    text-decoration: none;
}
.fav-widget__who-body .pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* ---------- BBCode quote styling ---------- */
.bbcode-quote {
    margin: 8px 0;
    padding: 4px 0 4px 10px;
    border-left: 3px solid var(--accent);
    background: rgba(37, 99, 235, 0.06);
    border-radius: 0 6px 6px 0;
}
.bbcode-quote__cite {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: .78rem;
    color: var(--accent);
    margin-bottom: 4px;
    /* Preserve the original username casing — no text-transform. */
    letter-spacing: .4px;
}
.bbcode-quote__body {
    color: var(--text-soft);
    padding: 2px 8px 2px 0;
    font-size: .94rem;
    line-height: 1.5;
}
.bbcode-quote .bbcode-quote {       /* nested */
    margin: 6px 0;
    background: rgba(37, 99, 235, 0.04);
    border-left-color: var(--border-strong);
}

/* ---------- Best-comment toggle (admin) — visible state ---------- */
.comment__action.is-on {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    border-color: #f59e0b;
}
.comment__action.is-on:hover {
    color: #fff;
    filter: brightness(1.05);
}
.comment__best-icon { font-size: 1rem; line-height: 1; }

/* ---------- "Change mirror links" footer link in downloads box ---------- */
.downloads__edit-mirrors {
    margin: 12px 14px 0;
    font-size: .82rem;
    text-align: right;
}
.downloads__edit-mirrors a:hover { color: var(--accent); text-decoration: none; }

/* ============================================================
   Sidebar "Свежие комментарии" — comment text is the primary link
   ============================================================ */
.last-comments ul { padding: 0; margin: 0; list-style: none; }
.last-comments li {
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}
.last-comments li:last-child { border-bottom: 0; }

.last-comments__text {
    display: block;
    font-size: .85rem;
    line-height: 1.35;
    color: var(--text);
    text-decoration: none;
    word-break: break-word;
}
.last-comments__text:hover { color: var(--accent); text-decoration: none; }

.last-comments__author {
    font-size: .72rem;
    margin-top: 2px;
}

/* ============================================================
   Rich "Latest comments" sidebar — avatar + name + L-badge + clip
   ============================================================ */
.last-comments--rich li {
    padding: 0;
    border-bottom: 0;
    margin: 0 0 4px;
}
.last-comments--rich li:last-child { margin-bottom: 0; }

.last-comments__link {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px;
    align-items: start;
    padding: 8px 8px 8px 6px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, transform .15s;
}
.last-comments__link:hover {
    background: var(--bg-soft);
    border-color: var(--border);
    text-decoration: none;
    transform: translateX(2px);
}

.last-comments__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bg-soft);
}
.last-comments__avatar--fallback {
    display: grid; place-items: center;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .82rem;
    background: linear-gradient(135deg,
                var(--lvl-color, var(--accent)),
                color-mix(in srgb, var(--lvl-color, var(--accent)) 60%, #4f46e5));
}

.last-comments__main {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.last-comments__head {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    font-size: .76rem;
}
.last-comments__author-name {
    font-weight: 600;
    color: var(--text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.last-comments__text {
    font-size: .82rem;
    line-height: 1.35;
    color: var(--text-muted, var(--text));
    word-break: break-word;
    /* Three-line clamp gives readable previews on the typical 80-char
       comment while still preventing wall-of-text rows. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.last-comments__on {
    font-size: .72rem;
    /* Full title — wrap onto a second line if needed. Clamp at 2
       lines so a 200-char title can't push the row arbitrarily tall. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.3;
}

/* ============================================================
   User-level pill — emoji + L-number, color from the tier table
   ============================================================ */
.user-level {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    background: color-mix(in srgb, var(--lvl-color, var(--accent)) 14%, transparent);
    color: color-mix(in srgb, var(--lvl-color, var(--accent)) 70%, var(--text));
    border: 1px solid color-mix(in srgb, var(--lvl-color, var(--accent)) 30%, transparent);
    white-space: nowrap;
}
html[data-theme="dark"] .user-level {
    color: color-mix(in srgb, var(--lvl-color, var(--accent)) 85%, #fff);
}
.user-level--lg {
    padding: 4px 10px;
    font-size: .85rem;
    gap: 6px;
}
.user-level__label {
    text-transform: uppercase;
    letter-spacing: .04em;
}
.user-level__num { font-variant-numeric: tabular-nums; opacity: .85; }
/* Recent level-movement cue under the tier pill. */
.user-level__trend { font-weight: 600; }
.user-level__trend.is-up   { color: var(--good); }
.user-level__trend.is-down { color: var(--text-muted); }

/* Tier reward — the top tiers get a coloured glow, legend gently pulses.
   Driven entirely by the --lvl-color the badge already sets inline, so no
   markup change is needed beyond the existing user-level--<tier> class. */
.user-level--elite,
.user-level--master,
.user-level--mythic,
.user-level--legend {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lvl-color) 35%, transparent),
                0 0 8px color-mix(in srgb, var(--lvl-color) 45%, transparent);
}
.user-level--legend { animation: amv-tier-pulse 2.4s ease-in-out infinite; }
@keyframes amv-tier-pulse {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lvl-color) 35%, transparent),
                           0 0 5px  color-mix(in srgb, var(--lvl-color) 35%, transparent); }
    50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lvl-color) 50%, transparent),
                           0 0 12px color-mix(in srgb, var(--lvl-color) 60%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .user-level--legend { animation: none; } }

/* Tier reward — a chosen username colour (App\Support\UserName). The inline
   color wins by specificity; the weight bump makes it read as "special"
   even where link colour would otherwise dominate. */
.username--colored { font-weight: 600; }

/* Elite+: the colour becomes a gradient clipped to the text. Driven by the
   --name-color var the renderer sets (no inline `color`, so the transparent
   fill shows the gradient). Falls back to the var as a flat colour where
   background-clip:text isn't supported. */
.username--gradient,
.username--animated {
    color: var(--name-color);   /* graceful fallback */
    background: linear-gradient(90deg, var(--name-color), color-mix(in srgb, var(--name-color) 35%, #fff), var(--name-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
/* Legend: the gradient drifts for a subtle shimmer. */
.username--animated {
    background-size: 200% auto;
    animation: amv-name-shimmer 3s linear infinite;
}
@keyframes amv-name-shimmer { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .username--animated { animation: none; } }

/* ---------- Tier breakdown card (profile page) ---------- */
.level-card {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 2%, transparent);
    overflow: hidden;
    scroll-margin-top: 80px;       /* so the in-page anchor doesn't hide under the sticky header */
}
.level-card[open] { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.level-card__summary {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    flex-wrap: wrap;
}
.level-card__summary::-webkit-details-marker { display: none; }
.level-card__summary::marker { display: none; }
.level-card__summary strong { font-size: 1rem; }
.level-card__how {
    margin-left: auto;
    font-size: .82rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}
.level-card[open] .level-card__how::after { content: ""; }
.level-card[open] .level-card__how {
    text-decoration: none;
}

.level-card__body {
    padding: 0 16px 16px;
    display: flex; flex-direction: column; gap: 14px;
}

/* Leveling-reward ladder on the profile. */
.level-rewards__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.level-rewards__tier { padding-left: 4px; border-left: 3px solid var(--lvl-color, var(--border)); }
.level-rewards__tier.is-locked { opacity: .55; }
.level-rewards__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.level-rewards__state { margin-left: auto; font-size: .85rem; }
.level-rewards__tier.is-unlocked .level-rewards__state { color: var(--good); }
.level-rewards__items { margin: 0; padding-left: 22px; font-size: .88rem; color: var(--text-soft); }
.level-rewards__items li { margin: 1px 0; }

.level-card__next-row {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: .88rem;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.level-card__bar {
    height: 8px;
    background: color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.level-card__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--from, var(--accent)), var(--to, var(--accent-2)));
    transition: width .35s ease;
}
.level-card__maxed { margin: 0; font-size: .95rem; }
.level-card__suggest-intro { margin: 0; font-size: .82rem; }

.level-card__factors {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 12px;
}
@media (min-width: 720px) {
    .level-card__factors { grid-template-columns: 1fr 1fr; }
}
.level-card__factor {
    padding: 10px 12px;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
}
html[data-theme="dark"] .level-card__factor { background: var(--bg-soft); }
.level-card__factor.is-suggestion {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev, #fff));
}
html[data-theme="dark"] .level-card__factor.is-suggestion {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft));
}
.level-card__factor-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px;
    font-size: .9rem;
    margin-bottom: 6px;
}
.level-card__factor-head .muted { font-size: .78rem; font-variant-numeric: tabular-nums; }
.level-card__factor-bar {
    height: 6px;
    background: color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: 999px;
    overflow: hidden;
}
.level-card__factor-fill {
    height: 100%;
    background: var(--accent);
    transition: width .35s ease;
}
.level-card__factor.is-suggestion .level-card__factor-fill {
    background: linear-gradient(90deg, var(--accent), var(--accent-2, #c084fc));
}
.level-card__factor-hint {
    display: block;
    margin-top: 6px;
    line-height: 1.35;
}
/* Fallback when color-mix isn't supported (very old WebKit). */
@supports not (background: color-mix(in srgb, red, blue)) {
    .user-level { background: rgba(96,165,250,.16); color: var(--text); border-color: rgba(96,165,250,.4); }
}

/* ============================================================
   Rotating Top10 (sidebar)
   ============================================================ */
.top10-block h3 {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.top10-block__caption {
    font-size: .7rem;
    font-weight: 400;
    text-decoration: none;
}
.top10-block__caption:hover { color: var(--accent); text-decoration: none; }
.top10-block__list {
    list-style: none; padding: 0; margin: 0;
}
.top10-block__list li {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border);
    font-size: .85rem;
}
.top10-block__list li:last-child { border-bottom: 0; }
.top10-block__title {
    flex: 1; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
    color: var(--text);
}
.top10-block__title:hover { color: var(--accent); text-decoration: none; }
/* Rating chip. `--link` is contrast-tuned for every theme's background
   (light blue on dark, brown on sepia, yellow on high-contrast…), so
   keying the number to it — on a subtle accent-tinted pill with a
   matching hairline — keeps the score readable on ALL themes instead of
   the dark-navy-on-dark wash-out that `--accent-2` produced. */
.top10-block__val {
    font-weight: 700;
    color: var(--link);
    font-size: .78rem;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 999px;
    padding: 1px 8px;
}

/* ============================================================
   Sidebar "Recommended" block
   ============================================================ */
.recommended-block .recommended-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.recommended-block .recommended-grid a {
    display: block;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-soft);
    transition: transform .12s, border-color .12s;
}
.recommended-block .recommended-grid a:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.recommended-block .recommended-grid img {
    display: block;
    width: 100%;
    height: 56px;
    object-fit: contain;
    padding: 4px;
    background: #fff;
}

/* ---------- Admin key/value display (queue review etc.) ---------- */
.admin-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: .9rem;
}
.admin-kv dt {
    color: var(--text-muted);
    font-weight: 700;
}
.admin-kv dd { margin: 0; word-break: break-word; }

/* ---------- Paged "Latest news comments" sidebar block ---------- */
.last-comments h3 {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
}
.last-comments__pager {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem;
    font-weight: 400;
}
.last-comments__nav {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: 20px; height: 20px;
    line-height: 18px;
    padding: 0;
    color: var(--text);
    cursor: pointer;
    font-size: .65rem;
}
.last-comments__nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.last-comments__nav:not(:disabled):hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.last-comments__page { padding: 0; margin: 0; list-style: none; }

/* ---------- Admin contests 2-row grid ---------- */
.contests-grid { border-radius: 10px; overflow: hidden; }
.contests-grid th, .contests-grid td { vertical-align: top; padding: 12px 10px; }
.contests-grid__id {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-muted);
    width: 56px;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.contests-grid__title {
    min-width: 220px;
    background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.contests-grid__title-link { text-decoration: none; color: var(--text); }
.contests-grid__title-link:hover strong { color: var(--accent); }
.contests-grid__title strong { font-size: 1rem; line-height: 1.3; display: block; }

/* Round chip — tells the admin at a glance which row is R1 vs R2. */
.contests-grid__round-cell {
    min-width: 160px;
}
.contests-grid__round {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 999px;
    margin-right: 6px;
    text-transform: uppercase;
}
.contests-grid__round--1 { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.contests-grid__round--2 { background: color-mix(in srgb, #a78bfa 16%, transparent); color: #7c3aed; }
.contests-grid__cat { font-size: .76rem; }

.contests-grid__catlinks {
    font-size: .74rem;
    margin-top: 6px;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.contests-grid__catlinks a { text-decoration: none; }
.contests-grid__catlinks a:hover { text-decoration: underline; }

.contests-grid__quick {
    font-size: .76rem;
    margin-top: 6px;
    display: flex; gap: 10px; flex-wrap: wrap;
}
.contests-grid__quick a { text-decoration: none; }
.contests-grid__quick a:hover { color: var(--accent); }

.contests-grid__cell-link {
    display: inline-block;
    font-size: .8rem;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
}
.contests-grid__cell-link:hover {
    color: var(--accent);
    border-bottom-style: solid;
}

.contests-grid__reg {
    padding: 3px 0;
    font-size: .8rem;
    display: flex; align-items: center; gap: 6px;
}
.contests-grid__phase { white-space: nowrap; text-align: right; }

/* Pair the R1/R2 rows visually — no border between, full border below. */
.contests-grid__r1 td { border-bottom: 0; padding-bottom: 6px; }
.contests-grid__r2 td { padding-top: 6px; border-top: 0; border-bottom: 1px solid var(--border); }
.contests-grid tbody tr:last-of-type td { border-bottom: 0; }

/* Subtle zebra for separating contests when many are listed. */
.contests-grid tbody tr.contests-grid__r1:nth-of-type(4n+1) td,
.contests-grid tbody tr.contests-grid__r2:nth-of-type(4n+2) td {
    background: color-mix(in srgb, var(--accent) 2%, transparent);
}

.contests-grid__empty { text-align: center; padding: 32px; }

/* State-aware phase pill — replaces the legacy `<font color=red>` text.
   OPEN: outline + green dot ("phase is currently closed, click to open")
   CLOSE: filled + red dot ("phase is currently open, click to close")  */
.contest-phase-form { display: inline-block; margin: 0; padding: 0; }
.contest-phase-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elev, #fff);
    color: var(--text);
    cursor: pointer;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background .15s, border-color .15s, transform .1s;
}
html[data-theme="dark"] .contest-phase-btn {
    background: var(--bg-soft);
    border-color: rgba(255,255,255,.16);
}
.contest-phase-btn:hover { transform: translateY(-1px); }
.contest-phase-btn__dot {
    font-size: .9em;
    line-height: 1;
}

.contest-phase-btn--open {
    color: #15803d;
    border-color: rgba(34,197,94,.4);
    background: color-mix(in srgb, #22c55e 8%, transparent);
}
.contest-phase-btn--open:hover {
    border-color: rgba(34,197,94,.7);
    background: color-mix(in srgb, #22c55e 18%, transparent);
}
html[data-theme="dark"] .contest-phase-btn--open { color: #4ade80; }

.contest-phase-btn--close {
    color: #b91c1c;
    border-color: rgba(239,68,68,.45);
    background: color-mix(in srgb, #ef4444 10%, transparent);
}
.contest-phase-btn--close:hover {
    border-color: rgba(239,68,68,.75);
    background: color-mix(in srgb, #ef4444 22%, transparent);
}
html[data-theme="dark"] .contest-phase-btn--close { color: #f87171; }

/* "Add contest" footer — match the table width and ride lower. */
.contests-add {
    margin-top: 32px;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 2%, transparent);
}
.contests-add__title {
    margin: 0 0 12px;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.contests-add__row {
    display: flex; gap: 12px; align-items: end; flex-wrap: wrap;
}

/* ---------- Profile clickable counters ---------- */
.profile-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.profile-counter {
    display: block;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 10px;
    text-align: center;
    text-decoration: none;
    transition: transform .12s, border-color .12s, box-shadow .12s;
    color: var(--text);
}
.profile-counter:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.profile-counter strong {
    display: block;
    font-size: 1.4rem;
    color: var(--accent-2);
    line-height: 1.1;
}
.profile-counter span { font-size: .78rem; }

/* ---------- Member-list (per-user comments / posts / favs) ---------- */
.member-list { list-style: none; padding: 0; margin: 0; }
.member-list__item {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.member-list__head {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
    font-size: .88rem;
    margin-bottom: 6px;
}
.member-list__parent { font-weight: 700; }
.member-list__parent:hover { color: var(--accent); }
.member-list__date { margin-left: auto; font-size: .76rem; }
.member-list__body { font-size: .92rem; line-height: 1.5; }
.member-list__foot { font-size: .78rem; margin-top: 6px; }

/* ---------- Clickable sidebar comment-block heading ---------- */
.last-comments__see-all {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.last-comments__see-all:hover { color: var(--accent); text-decoration: none; }

/* ---------- Single-page "Add clip" form (legacy form-horizontal port) ---------- */
.submit-form {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
}
.submit-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}
.submit-row:last-child, .submit-row--foot { border-bottom: 0; }
.submit-row__label {
    text-align: right;
    padding-top: 8px;
    font-weight: 600;
    color: var(--text-soft);
    font-size: .9rem;
}
.submit-row__req { color: #e11d48; font-weight: 800; margin-right: 2px; }
.submit-row__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.submit-row__field input[type="text"],
.submit-row__field input[type="url"],
.submit-row__field input[type="file"],
.submit-row__field select,
.submit-row__field textarea {
    width: 100%;
}
.submit-row__stack { display: flex; flex-direction: column; gap: 6px; }
/* The date row marks the field container with both `submit-row__field`
   (vertical stack) AND `submit-row__inline-selects` (horizontal row) —
   the latter must override the parent's `flex-direction: column` AND
   the generic `select { width: 100% }` further up, or the three selects
   render as full-width vertical bars instead of a single line. */
.submit-row__field.submit-row__inline-selects,
.submit-row__inline-selects {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}
.submit-row__field.submit-row__inline-selects select,
.submit-row__inline-selects select {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
}
.submit-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: .92rem;
}
.submit-advanced {
    margin-top: 18px;
    border: 1px solid var(--card-bd);
    border-radius: 8px;
    background: var(--card-bg);
    padding: 0;
}
.submit-advanced > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 700;
    user-select: none;
    color: var(--text);
}
.submit-advanced > summary::-webkit-details-marker { display: none; }
.submit-advanced > summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform .15s;
    color: var(--text-muted);
}
.submit-advanced[open] > summary::before { transform: rotate(90deg); }
.submit-advanced > summary:hover { background: var(--hover); }
.submit-advanced > .submit-row { padding: 0 14px; }
.submit-advanced > .submit-row:first-of-type { padding-top: 8px; }
.submit-advanced > .submit-row:last-of-type { padding-bottom: 14px; }

.submit-row--screenshot.is-optional .submit-row__req { display: none; }
[data-extra-screenshot-toggle] { margin: 4px 0; }
.submit-row__help { font-size: .76rem; margin: 0; }

.submit-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.submit-row--screenshot .submit-row__field {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.submit-row--screenshot .submit-row__field input[type="file"] { width: auto; }
.submit-row--screenshot .submit-row__field input[type="text"] { flex: 1; min-width: 200px; }
.submit-row--foot { padding-top: 14px; }

@media (max-width: 700px) {
    .submit-row { grid-template-columns: 1fr; }
    .submit-row__label { text-align: left; padding-top: 0; }
    .submit-cats { grid-template-columns: repeat(2, 1fr); }
}

/* ───────── Contests (Waves B-D) ───────── */
.contest-section-head { margin: 22px 0 8px; font-size: 1.05rem; }
.contest-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.contest-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--card-bd);
    border-radius: 8px;
    padding: 12px;
}
.contest-card__poster img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
}
.contest-card__poster:only-child { grid-column: 1 / -1; }
.contest-card:has(.contest-card__body:only-child) { grid-template-columns: 1fr; }
.contest-card__title { margin: 0 0 6px; font-size: 1rem; }
.contest-card__title a { color: inherit; text-decoration: none; }
.contest-card__title a:hover { text-decoration: underline; }
.contest-card__deadline { margin: 4px 0; font-size: .85rem; }
.contest-card__counts { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 10px; font-size: .85rem; color: var(--muted); }
.contest-card__counts li { display: inline; }
.contest-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }

.contest-view__head { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; margin-bottom: 14px; }
.contest-view__head:has(.contest-view__head-body:only-child) { grid-template-columns: 1fr; }
.contest-view__poster { width: 220px; max-width: 100%; border-radius: 8px; }
.contest-view__phase { display: flex; gap: 10px; align-items: center; margin: 6px 0 10px; flex-wrap: wrap; }
.contest-view__actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.contest-view__description { margin: 12px 0; }
.contest-view__nom-head { margin: 18px 0 8px; }

.contest-noms { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.contest-nom { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: 6px; padding: 10px 12px; }
.contest-nom__title { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; flex-wrap: wrap; }
.contest-nom__title:hover strong { text-decoration: underline; }
.contest-nom p { margin: 6px 0 0; }

/* Legacy `_NOTE` fieldset on the registration / jury pages. */
.contest-note {
    border: 1px solid var(--card-bd);
    border-radius: 8px;
    background: var(--card-bg);
    padding: 12px 14px;
    margin: 14px 0;
}
.contest-note__title {
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 6px;
}
.contest-note p { margin: 6px 0; }
.contest-note p:last-child { margin-bottom: 0; }

.contest-reg-form { display: grid; gap: 8px; margin: 8px 0; max-width: 560px; }
.contest-reg-form__row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--card-bd); border-radius: 4px; cursor: pointer; }
.contest-reg-form__row:hover { background: var(--hover); }

.contest-reg-users { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.contest-reg-users__cell { display: inline-flex; align-items: center; gap: 4px; background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: 4px; padding: 4px 8px; font-size: .85rem; }
.contest-reg-users__cell a { color: inherit; text-decoration: none; }
.contest-reg-users__cell a:hover { text-decoration: underline; }
.contest-reg-users__cell.reg-new   a { color: #d44; font-weight: 600; }
.contest-reg-users__cell.reg-recent a { color: #2a8; }
.contest-reg-users__cell.reg-week  a { color: #36c; }
.contest-reg-users__flag { width: 16px; height: 11px; vertical-align: middle; }

.contest-vote-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.contest-vote-table th, .contest-vote-table td { padding: 6px 8px; border-bottom: 1px solid var(--card-bd); text-align: left; }
.contest-vote-table th { background: var(--card-bg); }
.contest-vote-row--picked { background: rgba(80,140,255,0.08); }

.contest-rank-list { list-style: none; counter-reset: rank; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.contest-rank-list__row { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: 4px; padding: 6px 8px; }
.contest-rank-list__pos { font-weight: 700; text-align: center; }
.contest-rank-list select { width: 100%; }

.contest-ballot__hint { margin: 8px 0; font-size: .9rem; }

.contest-results__export { display: flex; gap: 8px; margin: 8px 0 18px; }
.contest-results__nom { margin: 14px 0; }
.contest-results__rank { list-style: none; padding: 0; }
.contest-results__rank li { margin: 6px 0; }
.contest-results__rank-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.contest-results__authorlist { padding-left: 22px; }
.contest-results__authors { margin-top: 22px; }

.badge--warn { background: #c80; color: white; }

/* ───── Private messaging — port of legacy forum/privmsg.php ───── */

.pm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pm-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pm-folders {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-bd);
    border-radius: 8px;
    padding: 4px;
}
.pm-folder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: .88rem;
}
.pm-folder:hover { background: var(--hover); }
.pm-folder.is-active { background: var(--accent); color: #fff; }
.pm-folder__count {
    background: rgba(0,0,0,.08);
    color: inherit;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
}
.pm-folder.is-active .pm-folder__count { background: rgba(255,255,255,.22); }
.pm-folder__badge {
    background: var(--bad, #d33);
    color: #fff;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.pm-bulk-form { margin: 8px 0; }
.pm-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    background: var(--card-bg);
    border: 1px solid var(--card-bd);
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
    flex-wrap: wrap;
}
.pm-bulk-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .88rem; }
.pm-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.pm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--card-bd);
    border-radius: 0 0 8px 8px;
    background: var(--card-bg);
    overflow: hidden;
}
.pm-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--card-bd);
}
.pm-row:last-child { border-bottom: 0; }
.pm-row:hover { background: var(--hover); }
.pm-row.is-unread { background: rgba(37, 99, 235, .06); }
html[data-theme="dark"] .pm-row.is-unread { background: rgba(37, 99, 235, .14); }
.pm-row__check { display: flex; align-items: center; justify-content: center; }
.pm-row__main { min-width: 0; }
.pm-row__subject {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}
.pm-row.is-unread .pm-row__subject { font-weight: 800; }
.pm-row__subject:hover { text-decoration: underline; }
.pm-row__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
}
.pm-row__meta {
    display: flex;
    gap: 14px;
    font-size: .8rem;
    margin-top: 2px;
    flex-wrap: wrap;
}

.pm-show { margin: 0 0 12px; }

/* ── PM attachments (compose picker + show list) ───────────────────── */
.pm-attach {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 10px 0;
    background: var(--bg-soft);
}
.pm-attach legend {
    padding: 0 6px; font-size: .85rem; color: var(--text-muted);
}
.pm-attach__row {
    display: flex; gap: 8px; align-items: center; margin: 4px 0;
}
.pm-attach__file    { flex: 0 0 auto; }
.pm-attach__comment {
    flex: 1; min-width: 0;
    padding: 4px 8px; font-size: .85rem;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg);
}

.pm-attach-list {
    margin-top: 14px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}
.pm-attach-list__title { margin: 0 0 8px; font-size: .9rem; }
.pm-attach-list ul     { list-style: none; padding: 0; margin: 0; }
.pm-attach-list__item  { margin: 4px 0; }
.pm-attach-list__link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 4px; text-decoration: none;
}
.pm-attach-list__link:hover { background: var(--bg-soft); }
.pm-attach-list__thumb {
    width: 64px; height: 48px; object-fit: cover; border-radius: 4px;
    border: 1px solid var(--border);
}
.pm-attach-list__icon { font-size: 1.4rem; }
.pm-attach-list__name { font-weight: 600; }
.pm-attach-list__meta { font-size: .78rem; }
.pm-attach-list__comment {
    margin-left: 76px; font-size: .8rem; padding: 2px 0 4px;
}
.pm-show__permalink {
    margin-left: auto;
    padding: 0 6px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 800;
}
.pm-show__permalink:hover { background: var(--hover); }
.pm-show__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;
}

@media (max-width: 540px) {
    .pm-folder { padding: 6px 10px; font-size: .82rem; }
    .pm-folder__count, .pm-folder__badge { padding: 1px 6px; font-size: .7rem; }
    .pm-row { grid-template-columns: 30px minmax(0, 1fr); padding: 9px 10px; }
    .pm-bulk-actions { width: 100%; justify-content: flex-end; }
}

/* Contest registrant listing (legacy show_reg, modern rewrite). */
.contest-showreg__section { margin-bottom: 24px; }
.contest-showreg__legend { margin-top: 10px; font-size: .85rem; }
.contest-section-head__link {
    font-size: .8rem;
    font-weight: 400;
    margin-left: 8px;
}
.reg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px 10px;
}
/* Legacy `wrapper_one_user` was a 200px-wide block with the flag,
   youtube icon, and a truncated linked name on a single line, plus
   optional meta lines below for jury cards. We render the same shape
   with flexbox so it still wraps responsively. */
.reg-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    line-height: 1.25;
    border: 1px solid transparent;
}
.reg-card:hover { background: var(--hover); border-color: var(--card-bd); }
.reg-card__flag {
    flex: 0 0 auto;
    width: 20px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12);
    object-fit: cover;
    vertical-align: middle;
}
.reg-card__ytlink {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.reg-card__yt {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    color: var(--text-muted);
    opacity: .35;
}
.reg-card__ytlink:hover .reg-card__yt { color: #c00; opacity: 1; }
.reg-card__yt.is-active { color: #c00; opacity: 1; }
.reg-card__yt.is-active polygon { fill: currentColor; stroke: none; }
.reg-card__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    text-decoration: none;
}
.reg-card__name:hover { text-decoration: underline; }
.reg-card__meta {
    flex-basis: 100%;
    margin-left: 30px;
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.reg-card__meta a { color: var(--link); }
/* Registration-recency colouring on the name (legacy palette). */
.reg-card.reg-new    .reg-card__name { color: #d23b3b; }
.reg-card.reg-recent .reg-card__name { color: #1f9d56; }
.reg-card.reg-week   .reg-card__name { color: #3567d6; }
html[data-theme="dark"] .reg-card.reg-new    .reg-card__name { color: #ff6b6b; }
html[data-theme="dark"] .reg-card.reg-recent .reg-card__name { color: #4fd28a; }
html[data-theme="dark"] .reg-card.reg-week   .reg-card__name { color: #6f9bff; }
/* Pending-upload tech_check tint (legacy blue/red for uploaded section). */
.reg-grid__cell.reg-tech-progress .reg-card__name { color: #2569d6; }
.reg-grid__cell.reg-tech-issue    .reg-card__name { color: #d23b3b; }

@media (max-width: 540px) {
    .reg-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .reg-card { padding: 4px 4px; }
    .reg-card__name { font-size: .84rem; }
}

/* Comment-entropy report — top-3 medal rows + roomier columns. */
.contest-entropy .admin-table th,
.contest-entropy .admin-table td { padding: 9px 16px; }
.contest-entropy .admin-table td:last-child,
.contest-entropy .admin-table th:last-child { text-align: right; white-space: nowrap; }

/* Ranking table: narrow rank index, wide author name. */
.contest-entropy .entropy-rank td:first-child,
.contest-entropy .entropy-rank th:first-child { width: 48px; }

/* Detail table: author column wide enough to never wrap mid-word. */
.contest-entropy .entropy-detail td:first-child,
.contest-entropy .entropy-detail th:first-child {
    width: 160px;
    min-width: 140px;
    white-space: nowrap;
    vertical-align: top;
}
.contest-entropy .entropy-detail td:nth-child(2) { line-height: 1.5; }

.contest-entropy .entropy-top-1 td { background: rgba(255, 204, 0, 0.22); font-weight: 700; }
.contest-entropy .entropy-top-2 td { background: rgba(176, 176, 176, 0.22); font-weight: 600; }
.contest-entropy .entropy-top-3 td { background: rgba(205, 127, 50, 0.22); font-weight: 600; }
html[data-theme="dark"] .contest-entropy .entropy-top-1 td { background: rgba(255, 204, 0, 0.14); }
html[data-theme="dark"] .contest-entropy .entropy-top-2 td { background: rgba(200, 200, 200, 0.12); }
html[data-theme="dark"] .contest-entropy .entropy-top-3 td { background: rgba(205, 127, 50, 0.16); }

@media (max-width: 700px) {
    .contest-card { grid-template-columns: 1fr; }
    .contest-card__poster img { width: 100%; height: auto; }
    .contest-view__head { grid-template-columns: 1fr; }
    .contest-view__poster { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile responsiveness — homepage, video, admin, forum (≤ 760 / 480px)
   ───────────────────────────────────────────────────────────────────── */

/* Safety net against horizontal overflow — any rogue content beyond the
   viewport edge triggers the browser's auto-zoom-out, producing the
   "page is narrower than the screen" symptom. Clipping the body to the
   viewport silently absorbs strays; the per-element clamps below still
   handle the common cases cleanly. */
html, body { overflow-x: hidden; }

/* Defensive collapse: there are two `.page__grid` rule blocks elsewhere
   in this file with conflicting `grid-template-columns` and competing
   `grid-template-areas` declarations. On phones, force the single-column
   stack and make every direct child fill the row, regardless of which
   earlier rule wins the cascade. This guarantees the right sidebar
   never holds an empty 230px column next to content. */
@media (max-width: 800px) {
    .page__grid {
        display: block !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: none !important;
    }
    .page__grid > .sidebar--left { display: none !important; }
    .page__grid > .content,
    .page__grid > .sidebar--right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
    }
    .page__grid > .sidebar--right { margin-top: 14px; }
}

/* ---- Generic: video / image / iframe never overflow the viewport ----
   Legacy news / pages content carries `<img width="500">` and `<iframe
   width="640">` attributes from a desktop-era WYSIWYG. Without these
   clamps the page would overflow phone viewports horizontally, which the
   browser papers over by auto-zooming-out — producing the "page is
   narrower than the screen" symptom. */
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
.entry__body img, .entry__body iframe,
.news-card__body img, .news-card__body iframe,
.video-page__player iframe { max-width: 100%; height: auto; }
.entry__body table { max-width: 100%; display: block; overflow-x: auto; }
/* Long unbreakable strings (URLs, hashes) inside narrow cards should
   wrap instead of stretching the column. */
.entry__body, .news-card__body, .comment__body, .forum-post__text {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---- Header: stack brand → search → actions on phones ---- */
@media (max-width: 760px) {
    .site-header__bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 0;
    }
    .brand { font-size: 1.15rem; gap: 8px; flex-shrink: 0; }
    .brand__mark { width: 32px; height: 32px; font-size: .85rem; border-radius: 8px; box-shadow: none; }
    .brand__name small { display: none; }   /* free up width — tagline is in <title> anyway */

    /* Search jumps below brand/actions on phones, full width. */
    .site-header__search { order: 3; flex-basis: 100%; max-width: 100%; min-width: 0; }
    .site-header .site-header__search input { padding: 9px 14px 9px 46px; font-size: .9rem; }
    .site-header__search-icon { left: 14px; width: 14px; height: 14px; }

    .site-header__actions { gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
    .site-header__actions .btn { padding: 6px 10px; font-size: .82rem; }
    /* Drop the wordy "Тёмная" / "Светлая" label on phones so the action
       row reads as a tight cluster of icon buttons instead of a single
       "weird toggle bar that only darkens/lightens". The glyph carries
       the meaning and the title= attribute carries the full label. */
    .header-action__label { display: none; }
    .header-action .header-action__icon { font-size: 1.05rem; }
    .user-menu__name { display: none; }     /* keep only avatar + badge */
    .user-menu__caret { font-size: .8rem; }
}

/* ---- Nav row: horizontal scroll instead of wrapping into 3 rows ---- */
@media (max-width: 760px) {
    .nav { position: static; }              /* sticky steals too much vertical space on phones */
    .nav__row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 2px 0;
        scrollbar-width: none;
    }
    .nav__row::-webkit-scrollbar { display: none; }
    .nav a { padding: 9px 12px; font-size: .86rem; white-space: nowrap; flex-shrink: 0; }
}

/* ---- Container padding pinch on tiny screens ---- */
@media (max-width: 540px) {
    .container { padding: 0 10px; }
    .page { padding: 12px 0 36px; }
    .page__grid { gap: 14px; }
    .section-head { padding: 4px 0; }
    .section-head__title { font-size: 1.15rem; }
}

/* ---- Hero strip + featured rails ---- */
@media (max-width: 760px) {
    .hero { padding: 14px 0; }
    .files-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    /* Tighter exam-strip on phones — the title + subtitle were eating a
       third of the first screen before the tiles became visible. */
    .exam-strip { padding: 10px 12px; margin: 0 0 12px; }
    .exam-strip__head { margin-bottom: 8px; gap: 6px; }
    .exam-strip__head h2 { font-size: 1rem; line-height: 1.15; }
    .exam-strip__head .muted { font-size: .76rem; line-height: 1.25; }
    .exam-strip__head .btn { padding: 5px 12px; font-size: .8rem; }
}
@media (max-width: 420px) {
    .files-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Video page ---- */
@media (max-width: 760px) {
    .video-page__head { padding: 10px 0; }
    .video-page__title { font-size: 1.1rem; }
    .video-box { border-radius: 8px; }
    .video-box__inner { padding: 10px; }
    .video-page__poster img { width: 100%; height: auto; }
    .video-page__player { padding: 0; }
    .video-page__meta dl,
    .video-page__meta { gap: 4px; font-size: .85rem; }
}

/* ---- Forum: list, topic, post ---- */
@media (max-width: 540px) {
    .forum-row { padding: 8px 10px; gap: 8px; }
    .forum-row__name strong { font-size: .92rem; }
    .forum-row__name .muted { font-size: .76rem; }
    .forum-row__stat { font-size: .78rem; }
    .forum-post__author { padding: 10px 12px; }
    .forum-post__author .forum-post__name { font-size: .95rem; }
    .forum-post__body { padding: 10px 12px; }
    .forum-post__head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---- Admin shell: nav becomes a horizontal pill bar above content ---- */
@media (max-width: 900px) {
    .admin-shell__bar {
        grid-template-columns: auto 1fr;
        gap: 8px;
    }
    .admin-shell__user { grid-column: 2; justify-self: end; }
    .admin-shell__search { grid-column: 1 / -1; order: 3; }

    .admin-shell__nav {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 6px;
    }
    .admin-nav-group {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px;
    }
    .admin-nav-group + .admin-nav-group { border-top: 0; margin-top: 0; }
    .admin-nav-group h4 {
        flex-basis: 100%;
        margin: 6px 0 2px;
        padding: 0;
    }
    .admin-nav-group a {
        padding: 6px 10px;
        font-size: .8rem;
        background: rgba(255,255,255,.04);
    }
    .admin-nav-group a.is-active { background: var(--accent); }
}

/* Admin tables overflow horizontally on phones rather than crushing cells. */
@media (max-width: 760px) {
    .admin-shell__content,
    .admin-card,
    .admin-shell__content .card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-table { font-size: .82rem; min-width: 480px; }
    .admin-table th, .admin-table td { padding: 7px 6px; }
    .admin-table__actions { gap: 2px; flex-wrap: wrap; }
    .admin-form { gap: 10px; }
    .admin-shell__top { padding: 4px 0; }
    .admin-shell__brand span:not(.brand__mark) { display: none; }
}

/* ---- Cards / comments / dropzone on phones ---- */
@media (max-width: 540px) {
    .card { padding: 10px; border-radius: 8px; }
    .comment { padding: 10px; }
    .comment__avatar { width: 32px; height: 32px; }
    .comment__head { flex-wrap: wrap; gap: 6px; }
    .dropzone { padding: 18px 12px; }
    .submit-row { grid-template-columns: 1fr !important; }   /* `!important` overrides existing 200px label col */
    .submit-row__label { text-align: left; padding-top: 0; }
}

/* ---- Tap-target floor: buttons + nav links ≥ 36px on phones ---- */
@media (max-width: 760px) {
    .btn { min-height: 34px; }
    .btn--sm { min-height: 30px; }
}

/* ---- Forum/admin mobile tightening pass ---- */
@media (max-width: 760px) {
    .body--forum .section-head,
    .body--admin .admin__head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .body--forum .section-head > *,
    .body--admin .admin__head > * {
        min-width: 0;
    }

    .breadcrumbs {
        overflow-wrap: anywhere;
    }

    .body--forum form.card,
    .body--forum .admin-form {
        width: 100%;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .body--forum form.card[style*="grid-template-columns"],
    .body--admin form.admin-form[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Deprecated mobile bbcode-toolbar block removed — the base styles
       around line 1018 + their 540px media-query now handle mobile
       layout consistently. */

    .forum-post,
    .forum-post__body,
    .forum-post__text {
        min-width: 0;
    }

    .body--forum .forum-post {
        grid-template-columns: 1fr !important;
    }

    .forum-post__author {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }

    .forum-post__author > * {
        min-width: 0;
    }

    .forum-post__author .muted {
        overflow-wrap: anywhere;
    }

    .forum-post__text table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .admin-shell__layout {
        gap: 10px;
    }

    .admin-shell__nav {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: sticky;
        top: 58px;
        z-index: 40;
        margin: 0 -10px;
        padding: 6px 10px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .admin-shell__nav::-webkit-scrollbar { display: none; }

    .admin-nav-group {
        display: contents;
    }

    .admin-nav-group h4 {
        display: none;
    }

    .admin-nav-group a {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 34px;
    }

    .admin-shell__content {
        padding: 12px 10px;
        min-width: 0;
    }

    .admin__search {
        flex-wrap: wrap;
    }

    .admin__search input,
    .admin__search select,
    .admin__search .btn {
        width: 100%;
        min-width: 0;
    }

    .admin-form,
    .admin-form__grid,
    .admin-form__foot,
    .admin-bulk-bar,
    .admin-rowlist__row {
        min-width: 0;
    }

    .admin-form__grid,
    .admin-form__foot,
    .admin-rowlist__row {
        grid-template-columns: 1fr !important;
        flex-wrap: wrap;
    }

    .admin-rowlist__row > *,
    .admin-form__foot > * {
        min-width: 0;
    }

    .admin-rowlist__row input[type=text],
    .admin-rowlist__row input[type=number] {
        flex: 1 1 160px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .admin-bulk-bar {
        top: 102px;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .admin-bulk-bar form,
    .admin-bulk-bar button {
        flex: 1 1 auto;
    }

    .admin-table {
        min-width: 560px;
    }
}

@media (max-width: 480px) {
    .body--admin .admin-shell__bar {
        grid-template-columns: 1fr;
    }

    .body--admin .admin-shell__user,
    .body--admin .admin-shell__search {
        grid-column: 1;
        justify-self: stretch;
    }

    .body--admin .admin-shell__user {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .body--admin .admin-shell__user .muted {
        flex-basis: 100%;
    }

    .body--admin .admin-shell__user .btn {
        flex: 1 1 auto;
        text-align: center;
    }

    .forum-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .forum-row--head > :nth-child(2),
    .forum-row__stat {
        min-width: 48px;
    }
}

/* ============================================================
   Floating chat widget — bottom-right launcher + slide-up panel.
   Hidden for logged-out users (the Blade partial doesn't render).
   Behaves the same on every layout (app / forum / admin via include).
   ============================================================ */
.amv-chat {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 95;
    font-size: .88rem;
}
.amv-chat__launcher {
    position: relative;        /* anchor for the unread bubble */
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--accent-2, #1e3a8a), var(--accent, #2563eb));
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    transition: transform .15s ease;
}
.amv-chat__launcher:hover { transform: translateY(-2px); }
/* Legacy "has-unread" dot kept for compat with the autoscroll-on flag
   in fetchMessages — small accent dot, separate from the data-driven
   badge below. */
.amv-chat--has-unread .amv-chat__launcher::after {
    content: "";
    position: absolute; top: -2px; right: -2px;
    width: 12px; height: 12px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--bg, #fff);
}

/* Counted badge — populated by the /api/chat/unread background poll.
   Shows the actual number of pending DMs on the launcher; pulses
   briefly on first appearance so an idle tab catches the eye. */
.amv-chat__badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--bg, #fff);
    box-shadow: 0 2px 6px rgba(239,68,68,.45);
    pointer-events: none;
}
.amv-chat__badge.is-pulsing { animation: amvChatBadgePulse 1.6s ease-out 1; }
@keyframes amvChatBadgePulse {
    0%   { transform: scale(.6); box-shadow: 0 0 0 0   rgba(239,68,68,.55); }
    60%  { transform: scale(1.15); box-shadow: 0 0 0 14px rgba(239,68,68,0);  }
    100% { transform: scale(1);    box-shadow: 0 2px 6px rgba(239,68,68,.45); }
}

/* Tiny dot on the 👥 Users tab when there are unread DMs to nudge the
   user toward the right place after they open the panel. */
.amv-chat__tab { position: relative; }
.amv-chat__tab-dot {
    position: absolute;
    top: 4px; right: 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px var(--bg-elev, #fff);
}
.amv-chat--open .amv-chat__launcher { display: none; }
.amv-chat--closed .amv-chat__panel  { display: none; }

.amv-chat__panel {
    width: 340px;
    height: 440px;
    background: var(--bg-elev, #fff);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.amv-chat__head {
    background: linear-gradient(135deg, var(--accent-2, #1e3a8a), var(--accent, #2563eb));
    color: #fff;
    padding: 8px 12px;
    display: flex; align-items: center; gap: 8px;
}
.amv-chat__head-title { flex: 1; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.amv-chat__icon-btn {
    background: transparent; border: 0; color: #fff;
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 8px;
    border-radius: 4px;
}
.amv-chat__icon-btn:hover { background: rgba(255,255,255,.18); }

.amv-chat__view {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 8px 10px;
}
.amv-chat__view--messages { display: flex; flex-direction: column; padding: 0; }
.amv-chat__messages {
    list-style: none; margin: 0; padding: 8px 10px 0;
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
}
.amv-chat__msg {
    background: var(--bg-soft, #f3f4f6);
    border-radius: 8px;
    padding: 6px 8px;
    max-width: 90%;
    position: relative;
}
/* Moderation icons sit inline next to the timestamp; revealed on
   row hover so they don't clutter the chat when a mod is just
   reading. Wrapper itself is rendered only for non-own messages
   when the server-confirmed `can_moderate` flag is true. */
.amv-chat__msg-mod {
    display: inline-flex;
    gap: 2px;
    margin-left: 4px;
    opacity: 0;
    transition: opacity .12s;
}
.amv-chat__msg:hover .amv-chat__msg-mod { opacity: 1; }
.amv-chat__msg-mod-btn {
    background: transparent;
    border: 0;
    padding: 0 2px;
    cursor: pointer;
    font-size: .82rem;
    line-height: 1;
    color: var(--text-muted, #6b7280);
}
.amv-chat__msg-mod-btn:hover { color: #ef4444; }

/* `@nick` mention chip inside a message body. Gold when it's the
   current user (you), accent when it's someone else. */
.amv-chat__mention {
    display: inline-block;
    padding: 0 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.amv-chat__mention:hover { text-decoration: underline; }
.amv-chat__mention--me {
    background: color-mix(in srgb, #f59e0b 22%, transparent);
    color: #b45309;
}
html[data-theme="dark"] .amv-chat__mention--me { color: #fbbf24; }

/* A whole message that mentions the current user gets a subtle gold
   left border + tinted background, like Slack/Discord highlight rows. */
.amv-chat__msg.is-mention {
    background: color-mix(in srgb, #f59e0b 10%, var(--bg-soft, #f3f4f6));
    border-left: 3px solid #f59e0b;
    padding-left: 6px;
}
html[data-theme="dark"] .amv-chat__msg.is-mention {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
}

/* Launcher badge variant — when the only unread is a mention (no
   pending DMs), the bubble goes gold instead of red so the user can
   tell which kind of attention is needed at a glance. */
.amv-chat__badge.is-mention {
    background: #f59e0b;
    box-shadow: 0 2px 6px rgba(245, 158, 11, .5);
}
.amv-chat__badge.is-mention.is-pulsing {
    animation: amvChatMentionPulse 1.6s ease-out 1;
}
@keyframes amvChatMentionPulse {
    0%   { transform: scale(.6); box-shadow: 0 0 0 0   rgba(245,158,11,.6); }
    60%  { transform: scale(1.15); box-shadow: 0 0 0 14px rgba(245,158,11,0); }
    100% { transform: scale(1);    box-shadow: 0 2px 6px rgba(245,158,11,.5); }
}
.amv-chat__msg.is-mine {
    align-self: flex-end;
    background: rgba(37, 99, 235, .14);
}
.amv-chat__msg-author { font-weight: 700; font-size: .82rem; text-decoration: none; }
.amv-chat__msg-author:hover { text-decoration: underline; }
.amv-chat__msg-time {
    font-size: .68rem;
    color: var(--text-muted, #6b7280);
    margin-left: 6px;
}
.amv-chat__msg-body {
    margin-top: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* Rich content (smiley imgs, youtube/imgur embeds) must stay inside the
   narrow chat column. */
.amv-chat__msg-body img,
.amv-chat__msg-body iframe,
.amv-chat__msg-body .amv-embed__slot {
    max-width: 100%;
    height: auto;
}
.amv-chat__msg-body img { vertical-align: middle; }
/* "(edited)" marker + inline edit box. */
.amv-chat__msg-edited {
    font-size: .72em;
    color: var(--text-muted);
    font-style: italic;
}
.amv-chat__edit-box {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 3px 6px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--bg-elev);
    color: var(--text);
}

.amv-chat__compose {
    border-top: 1px solid var(--border);
    display: flex; gap: 4px; padding: 6px;
    background: var(--bg, #fff);
}
.amv-chat__compose input {
    flex: 1; min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg, #fff);
    color: var(--text);
}
.amv-chat__send {
    width: 36px; border: 0;
    background: var(--accent, #2563eb);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}

.amv-chat__heading {
    font-size: .82rem;
    margin: 4px 0 4px;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.amv-chat__threads,
.amv-chat__users {
    list-style: none; padding: 0; margin: 0 0 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.amv-chat__thread-btn,
.amv-chat__user-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.amv-chat__thread-btn { flex-direction: column; align-items: stretch; }
.amv-chat__thread-btn:hover,
.amv-chat__user-btn:hover { background: var(--bg-soft, #f3f4f6); }
.amv-chat__thread-preview {
    font-size: .76rem;
    color: var(--text-muted, #6b7280);
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.amv-chat__user-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
}
.amv-chat__empty {
    padding: 10px 6px;
    color: var(--text-muted, #6b7280);
    font-size: .82rem;
    text-align: center;
}

.amv-chat__setting {
    display: flex; gap: 8px; align-items: center; padding: 4px 0;
}
.amv-chat__hint {
    margin-top: 12px;
    font-size: .78rem;
}

.amv-chat__tabs {
    display: flex;
    border-top: 1px solid var(--border);
    background: var(--bg-soft, #f3f4f6);
}
.amv-chat__tab {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 8px 0;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-muted, #6b7280);
}
.amv-chat__tab.is-active {
    color: var(--accent, #2563eb);
    background: var(--bg, #fff);
}

/* Mobile: full-width panel anchored to the bottom of the viewport */
@media (max-width: 540px) {
    .amv-chat { right: 8px; bottom: 8px; }
    .amv-chat__panel { width: calc(100vw - 16px); height: 60vh; }
}

/* Chat thread-row direction indicator (Users tab) */
.amv-chat__thread-row { display: flex; align-items: baseline; gap: 6px; }
.amv-chat__thread-time {
    margin-left: auto;
    font-size: .68rem;
    color: var(--text-muted, #6b7280);
}
.amv-chat__thread-arrow { display: inline-block; min-width: 1em; color: var(--text-muted, #6b7280); }
.amv-chat__thread.is-incoming .amv-chat__thread-arrow { color: var(--accent, #2563eb); }
.amv-chat__thread.is-incoming strong { font-weight: 800; }

/* ── Submit-form draft restore chip ──
   Tiny banner that appears above the file-submission form when the JS
   finds a saved draft in localStorage. */
.submit-draft-chip {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(37,99,235,.04));
    border: 1px solid rgba(37,99,235,.35);
    border-radius: 8px;
    font-size: .88rem;
}
.submit-draft-chip > :last-child { margin-left: auto; }

/* ── "You might also like" grid on file-view ── */
.related-clips {
    margin-top: 18px;
    /* Below the fold — skip its layout/paint until scrolled near so it
       doesn't delay first paint of the player/description above it. */
    content-visibility: auto;
    contain-intrinsic-size: 0 480px;
}
.related-clips__title { font-size: 1.05rem; margin: 0 0 12px; }
.related-clips__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.related-clips__item {}
.related-clips__link {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: background .15s, transform .15s;
}
.related-clips__link:hover {
    background: var(--bg-soft);
    transform: translateY(-1px);
}
.related-clips__name {
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.related-clips__meta { font-size: .78rem; }

/* ---------- Prev / next clip nav (file view) ----------
   Two-column strip below the player. On mobile the JS-driven swipe
   gesture (see app.js `[data-clip-nav]`) replaces the need to tap a
   small button — the buttons are still there but get a generous
   tap target. */
.clip-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}
.clip-nav__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    min-height: 56px;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    background: var(--bg-elev, #fff);
    transition: background .15s, border-color .15s, transform .12s;
}
.clip-nav__btn:hover {
    background: var(--bg-soft);
    border-color: var(--accent);
    transform: translateY(-1px);
    text-decoration: none;
}
.clip-nav__btn--prev { justify-self: start; width: 100%; }
.clip-nav__btn--next { justify-self: end;   width: 100%; text-align: right; }
.clip-nav__btn--next .clip-nav__inner { align-items: flex-end; }
.clip-nav__btn--disabled {
    visibility: hidden;       /* keeps the grid column even when missing */
}
.clip-nav__arrow {
    font-size: 1.4rem;
    color: var(--accent);
    flex: 0 0 auto;
}
.clip-nav__inner {
    display: flex; flex-direction: column;
    min-width: 0; flex: 1;
}
.clip-nav__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.clip-nav__name {
    font-weight: 600; font-size: .95rem; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clip-nav__author { font-size: .78rem; }
@media (max-width: 540px) {
    .clip-nav__author { display: none; }
    .clip-nav__btn { padding: 8px 10px; min-height: 52px; }
}

/* ---------- Mobile polish: bigger tap targets, mod bar wraps ---------- */
@media (max-width: 540px) {
    /* WCAG / Material 48px-ish target on small `.btn--sm` chips. */
    .btn.btn--sm { min-height: 36px; padding: 6px 12px; }
    .btn          { min-height: 40px; }

    /* The topic mod-bar (Pin / Lock / Delete / …) overflows the
       section header on narrow screens. Force it to wrap. */
    .section-head { flex-wrap: wrap; gap: 8px; }
    .section-head details { width: 100%; }

    /* Forum-post layout: stack author column above the body so the
       avatar + name don't squeeze the text to one word per line. */
    .forum-post { grid-template-columns: 1fr; }
    .forum-post__author {
        flex-direction: row; flex-wrap: wrap; align-items: center;
        gap: 8px; padding-bottom: 8px;
    }
    .forum-post__avatar { width: 36px; height: 36px; }

    /* Tighter breadcrumbs so long topic titles wrap onto a second
       line instead of overflowing. */
    .breadcrumbs { font-size: .82rem; line-height: 1.4; }
}

/* Touch-action hint for the file-view page swipe nav — prevent
   the browser from kidnapping horizontal pans for back/forward
   navigation while the user is swiping between clips. */
.body--app .clip-nav { touch-action: pan-y; }

/* ---------- Click-to-expand imgur / coub inline embeds ---------- */
/* The text link looks like a normal link, with a tiny inline icon
   hinting that it can expand. `is-open` swaps the icon for a close
   arrow once the embed is showing. */
.amv-embed {
    text-decoration: none;
    border-bottom: 1px dotted color-mix(in srgb, var(--accent) 60%, transparent);
    padding-right: 18px;
    background-repeat: no-repeat;
    background-position: right 0.25em;
    background-size: 14px 14px;
    cursor: pointer;
    /* A bare YouTube/imgur URL is one long unbreakable token; without this the
       whole link jumps to its own line instead of breaking where it sits. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
.amv-embed:hover { color: var(--accent); }
.amv-embed--imgur {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231bb76e'><path d='M21 5H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-9 11.5l-3-4-3 4h12l-4-5z'/></svg>");
}
.amv-embed--coub {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'><path d='M8 5v14l11-7z'/></svg>");
}
.amv-embed--youtube {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'><path d='M23 12s0-3.7-.5-5.5c-.3-1-1-1.8-2-2C18.7 4 12 4 12 4s-6.7 0-8.5.5c-1 .2-1.7 1-2 2C1 8.3 1 12 1 12s0 3.7.5 5.5c.3 1 1 1.8 2 2C5.3 20 12 20 12 20s6.7 0 8.5-.5c1-.2 1.7-1 2-2 .5-1.8.5-5.5.5-5.5zM10 15.5v-7l6 3.5-6 3.5z'/></svg>");
}
.amv-embed--vimeo {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231ab7ea'><path d='M22.4 6.1c-.1 2-1.5 4.7-4.2 8.2-2.8 3.6-5.2 5.4-7.1 5.4-1.2 0-2.2-1.1-3-3.3l-1.6-6c-.6-2.2-1.3-3.3-2-3.3-.2 0-.7.3-1.6 1L2 6.7c1-.9 2-1.8 3-2.6 1.3-1.2 2.3-1.8 3-1.9 1.6-.2 2.5.9 2.9 3.2.4 2.5.7 4.1.8 4.7.4 2 .9 3 1.4 3 .4 0 1-.6 1.7-1.7.8-1.1 1.2-2 1.2-2.6.1-.6-.2-.9-.6-.9-.4 0-.8.1-1.2.2.8-2.7 2.4-4 4.7-3.9 1.8 0 2.6 1 2.5 2.9z'/></svg>");
}
.amv-embed.is-open {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
}
.amv-embed__slot {
    display: block;
    margin: 8px 0 12px;
    max-width: 560px;
}
.amv-embed__slot[hidden] { display: none; }
.amv-embed__slot img,
.amv-embed__slot iframe {
    max-width: 100%;
    border-radius: 6px;
}

/* ---------- Theme picker dropdown (header) ---------- */
.theme-picker { position: relative; }
.theme-picker > summary {
    list-style: none;
    cursor: pointer;
}
.theme-picker > summary::-webkit-details-marker { display: none; }
.theme-picker > summary::marker                { display: none; }
.theme-picker__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 210px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: grid; gap: 2px;
}
/* Section heading inside the picker (Light / Dark / Accessibility). */
.theme-picker__group-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 8px 10px 3px;
}
.theme-picker__group-label:first-child { padding-top: 2px; }
.theme-picker__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: .88rem;
    text-align: left;
}
.theme-picker__item:hover { background: var(--bg-soft); }
.theme-picker__item.is-active {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    font-weight: 600;
}
.theme-picker__item.is-active::after {
    content: "✓";
    margin-left: auto;
    color: var(--accent);
}
.theme-picker__swatch {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    flex-shrink: 0;
}
/* Tier-locked theme entries: visible but not selectable, with a lock. */
.theme-picker__item--locked {
    cursor: default;
    color: var(--text-muted);
}
.theme-picker__item--locked:hover { background: transparent; }
.theme-picker__lock { margin-left: auto; font-size: .8rem; opacity: .8; }