/* =====================================================================
   FAN INCHART design system -- V1 Consumer UI/UX Redesign.
   Near-black navy background, violet/magenta accent system, restrained
   glow, gold reserved for genuine rank/award emphasis only. No framework;
   every component below is plain CSS consumed by the existing PHP views.
   ===================================================================== */

/* ===== Design tokens ============================================== */
:root {
    color-scheme: dark;

    /* Surfaces -- near-black navy ground, cards a step lighter, elevated
       a step lighter again. Never introduce a fourth surface level. */
    --bg: #06070d;
    --bg-glow-1: rgb(124 92 255 / 16%);
    --bg-glow-2: rgb(236 72 153 / 10%);
    --surface: #10121e;
    --surface-alt: #141728;
    --surface-elevated: #1a1e32;
    --border: rgb(148 163 209 / 14%);
    --border-strong: rgb(148 163 209 / 30%);
    --border-accent: rgb(139 108 255 / 55%);

    /* Text */
    --text: #f5f6ff;
    --muted: #a3aac4;
    --muted-2: #767d9a;

    /* Accent system: violet primary, magenta secondary, gold reserved
       strictly for rank #1 / award-winner emphasis (never decorative). */
    --accent: #8b6cff;
    --accent-strong: #a78bfa;
    --accent-2: #ec4899;
    --gold: #f2b705;
    --gold-soft: rgb(242 183 5 / 16%);
    --success: #34d399;
    --success-bg: rgb(52 211 153 / 14%);
    --warning: #e8b339;
    --warning-bg: rgb(232 179 57 / 14%);
    --danger: #fb7185;
    --danger-bg: rgb(251 113 133 / 14%);

    /* ONE shared content shell -- every major page/section aligns to
       --content-max; narrower single-column content (forms, short
       messages) nests --content-narrow inside it. Never add a new
       one-off page width outside this pair. */
    --content-max: 78rem;
    --content-narrow: 36rem;
    --page-gutter: 1.25rem;

    --radius-card: 1.1rem;
    --radius-card-lg: 1.5rem;
    --radius-button: .75rem;
    --radius-pill: 999px;
    --section-spacing: 3.5rem;
    --card-gap: 1rem;

    --shadow-card: 0 1rem 2.5rem rgb(4 5 12 / 45%);
    --shadow-elevated: 0 1.5rem 4rem rgb(4 5 12 / 60%);
    --glow-violet: 0 0 0 1px rgb(139 108 255 / 35%), 0 0 2rem rgb(139 108 255 / 20%);
    --glow-gold: 0 0 0 1px rgb(242 183 5 / 45%), 0 0 2rem rgb(242 183 5 / 18%);

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===== Base ========================================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    background:
        radial-gradient(56rem 30rem at 12% -8%, var(--bg-glow-1), transparent 60%),
        radial-gradient(46rem 26rem at 92% 4%, var(--bg-glow-2), transparent 55%),
        var(--bg);
}
a { color: inherit; }
img, iframe { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; overflow-wrap: anywhere; }

/* Visually hides content while keeping it in the accessibility tree --
   e.g. a <label> whose text is redundant with a visible placeholder.
   Never use display:none/visibility:hidden for this: those also remove
   it from screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
    border-radius: .3rem;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    padding: .75rem 1rem;
    background: var(--text);
    color: var(--bg);
    border-radius: .5rem;
    z-index: 20;
}
.skip-link:focus { top: 1rem; }

/* ===== Shared shell ================================================= */
/* The one horizontal baseline every header/main/footer aligns to. */
.site-header,
.site-footer,
main {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

main {
    /* 9rem assumed a much shorter header+footer than this round's rebuilt
       five-column footer now renders at -- on tall viewports the stale
       constant forced an oversized blank gap between the last section and
       the footer. Widened to better match the real combined height. */
    min-height: calc(100vh - 20rem);
    padding-block: 2rem 4rem;
    display: block;
}
main > * + * { margin-top: var(--section-spacing); }

/* Narrow content nested inside the shared shell -- forms and short
   single-column messages, never a new arbitrary width. */
.form-card,
.message {
    width: 100%;
    max-width: var(--content-narrow);
    margin-inline: auto;
}

/* ===== Header ======================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-block: 1rem;
    background: rgb(6 7 13 / 88%);
    backdrop-filter: blur(.6rem);
    -webkit-backdrop-filter: blur(.6rem);
    border-bottom: 1px solid var(--border);
}
.header-start { display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
.brand {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 900;
    font-size: 1.3rem;
    letter-spacing: -.03em;
    text-decoration: none;
    color: var(--text);
}
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .55rem;
    background: linear-gradient(140deg, var(--accent), var(--accent-2));
    color: #0a0714;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: var(--glow-violet);
}
.brand-word {
    background: linear-gradient(120deg, var(--text), var(--accent-strong) 70%, var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.header-end { display: none; align-items: center; gap: .6rem; flex: none; }

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    align-items: center;
}
.site-header nav a, .nav-form button {
    display: inline-block;
    padding: .55rem .8rem;
    border-radius: var(--radius-button);
    color: var(--muted);
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}
.site-header nav a:hover, .nav-form button:hover { color: var(--text); background: var(--surface); }
.site-header nav a[aria-current="page"] {
    color: var(--text);
    background: linear-gradient(120deg, rgb(139 108 255 / 20%), rgb(236 72 153 / 14%));
    box-shadow: inset 0 0 0 1px var(--border-accent);
}

/* ===== Primary nav / mobile menu ====================================
   Desktop (>=64rem): the primary nav is ALWAYS visible inline, next to
   the brand -- never hidden behind a "Menu" toggle at real desktop
   width. Below that, an intentional mobile navigation system: a single
   compact trigger opens a full slide-down panel with the real primary
   destinations plus account/locale state, never a row that merely wraps.
   Native <details>/<summary> -- framework-free, fully keyboard- and
   screen-reader-accessible; the !important declarations at the desktop
   breakpoint are author styles that deliberately override the browser's
   own <details> collapse behavior so nothing about the desktop
   experience depends on JS or the open/closed state at all. ========= */
.nav-menu { position: relative; }
.nav-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    cursor: pointer;
    font-weight: 700;
    font-size: .88rem;
    list-style: none;
    color: var(--text);
    background: var(--surface);
}
.nav-menu-toggle::-webkit-details-marker { display: none; }
.nav-menu-toggle-icon { display: inline-flex; width: 1.05rem; height: 1.05rem; flex: none; }
.nav-menu[open] .nav-menu-toggle { border-color: var(--accent); box-shadow: var(--glow-violet); }
.nav-menu nav {
    position: fixed;
    inset: 4.2rem .75rem auto .75rem;
    z-index: 25;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-elevated);
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
}
.nav-menu nav a, .nav-menu nav .nav-form button { width: 100%; text-align: left; padding: .75rem .9rem; font-size: 1rem; }
.nav-menu nav .nav-divider { margin: .4rem .4rem; border: 0; border-top: 1px solid var(--border); }
.nav-form { margin: 0; }
.nav-form button { border: 0; background: none; cursor: pointer; }

/* Compact language dropdown -- replaces the previous always-visible
   EN/KO/JA/ZH-CN pill row (too visually prominent) with a single
   globe+current-language trigger, mirroring the account-menu's own
   native <details>/<summary> popover pattern. Same /locale form/route,
   same one-button-per-locale submission -- only the visual container
   changed. Used identically for the desktop header and (per an explicit
   product-owner request) the mobile menu. */
.locale-menu { position: relative; }
.locale-menu summary {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.55rem;
    padding: .3rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    list-style: none;
    cursor: pointer;
    font-size: .86rem;
    font-weight: 700;
    color: var(--text);
}
.locale-menu summary::-webkit-details-marker { display: none; }
.locale-globe { font-size: .95rem; }
.locale-current { max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locale-chevron { color: var(--muted); }
.locale-popover {
    position: absolute;
    right: 0;
    top: calc(100% + .65rem);
    z-index: 20;
    width: 10rem;
    display: grid;
    gap: .15rem;
    margin: 0;
    padding: .45rem;
    border: 1px solid var(--border-strong);
    border-radius: .85rem;
    background: rgb(10 16 32 / 98%);
    box-shadow: var(--shadow-elevated);
}
.locale-option {
    display: block;
    width: 100%;
    padding: .6rem .75rem;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--muted);
    text-align: left;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
}
.locale-option:hover { color: var(--text); background: rgb(255 255 255 / 6%); }
.locale-option.is-active { color: var(--text); background: rgb(139 108 255 / 16%); font-weight: 700; }
.header-cta { display: inline-flex; gap: .5rem; align-items: center; }
/* Login/Register share the locale trigger's own control height (item 18)
   -- .button/.button-secondary's later 3rem min-height (below, shared
   with large page-level CTAs) would otherwise make the anonymous header
   read as two different height systems side by side. */
.header-cta .button, .header-cta .button-secondary { min-height: 2.55rem; padding: .55rem .95rem; font-size: .9rem; }

/* ===== Footer ======================================================== */
.site-footer {
    padding-block: 3rem 2.5rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
}
.footer-grid {
    display: grid;
    gap: 2.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
    /* Brand / Services / Community / Support / SNS -- the mockup's five-
       column composition, brand block wider than the four content columns. */
    .footer-grid { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 2rem; }
}
.footer-brand { display: flex; flex-direction: column; gap: .75rem; max-width: 24rem; }
.footer-brand .brand { font-size: 1.15rem; }
.footer-tagline { margin: 0; font-size: .88rem; line-height: 1.6; }
.footer-copyright { margin: .25rem 0 0; font-size: .8rem; color: var(--muted); }
.footer-col h2 { margin: 0 0 .85rem; font-size: .82rem; color: var(--text); text-transform: uppercase; letter-spacing: .08em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { text-decoration: none; color: var(--muted); font-size: .9rem; }
.footer-col a:hover { color: var(--text); }
/* Non-clickable presentation labels (Community/Support product gaps) --
   deliberately NOT an <a>, so nothing reads as a working destination. */
.footer-label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--muted); }
.footer-soon { font-style: normal; padding: .1rem .45rem; border-radius: var(--radius-pill); background: rgb(255 255 255 / 6%); color: rgb(197 203 224 / 75%); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* .footer-col ul's own display:grid (0,2,0 specificity) otherwise beats
   .footer-sns-list's display:flex (0,1,0) and the icons rendered as a
   single-column vertical stack -- item 14, Visual Correction Round 4.
   ul.footer-sns-list matches .footer-col ul's specificity and wins via
   source order. */
ul.footer-sns-list { display: flex; flex-direction: row; align-items: center; gap: .55rem; }
/* P0-6.6 -- these icons are deliberately non-interactive (no verified
   official FAN INCHART social URL exists yet; see the comment above this
   list in layouts/app.php). A :hover state that changes color/border is
   exactly the kind of affordance that makes a non-clickable element look
   clickable, inviting a click that does nothing -- removed rather than
   kept, since there is no click handler to justify it. cursor is pinned
   to `default` for the same reason: no implicit "this is a link" cue
   from a bare <span>. */
.footer-sns-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.05rem; height: 2.05rem; border-radius: 50%; border: 1px solid var(--border); color: var(--muted); opacity: .85; cursor: default; }
.footer-sns-icon svg { width: 1rem; height: 1rem; }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: .82rem;
}
.footer-bottom a { color: var(--muted); text-decoration: none; margin-right: 1rem; }
.footer-bottom a:hover { color: var(--text); }
.footer-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-accent);
    color: var(--accent-strong);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
}

/* ===== Buttons =======================================================
   .button and .button-secondary share ONE box-model (height, radius,
   padding, typography, alignment) so an anonymous-header Login/Register
   pair (or any other primary/secondary pairing) reads as one intentional
   two-state system -- only fill/weight communicates hierarchy, never a
   mismatched shape. Fixed per an explicit product-owner report that the
   two previously looked like unrelated components (.button-secondary was
   missing the shared box-model entirely). */
.button, .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .8rem 1.3rem;
    border-radius: var(--radius-button);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    transition: filter .15s ease, transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.button {
    border: 0;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    color: #0a0714;
    font-weight: 800;
    box-shadow: var(--glow-violet);
}
.button:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: no-preference) { .button:hover, .button-secondary:hover { transform: translateY(-.1rem); } }
.button-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.button-secondary:hover { border-color: var(--accent); background: rgb(139 108 255 / 10%); }

/* ===== Avatar fallback ==============================================
   No fandom/artist image field exists anywhere in this codebase's data
   model -- every circular "artist image" in the approved mockup is,
   here, an honest deterministic-color initial avatar, never a hotlinked
   or fabricated photo (see MASTER redesign spec §29). One shared
   generator class, sized by a modifier. */
.avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    font-weight: 800;
    color: #f5f0ff;
    background: linear-gradient(150deg, var(--avatar-a, var(--accent)), var(--avatar-b, var(--accent-2)));
    line-height: 1;
    user-select: none;
}
.avatar-fallback.size-sm { width: 2.25rem; height: 2.25rem; font-size: .85rem; }
.avatar-fallback.size-md { width: 3.25rem; height: 3.25rem; font-size: 1.15rem; }
.avatar-fallback.size-lg { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }
.avatar-fallback.size-xl { width: 6rem; height: 6rem; font-size: 2.1rem; }

/* ===== Cards ========================================================= */
/* One shared card vocabulary for every card-like block across the app. */
.discovery-card,
.post-card,
.comment,
.post-detail,
.empty-state,
.founding-fan-banner,
.ranking-card,
.invite-cta,
.fandom-ambassadors,
.candidate,
.duplicate-warning,
.admin-shell,
.admin-audit-scroll {
    padding: 1.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: linear-gradient(160deg, var(--surface-alt), var(--surface));
    overflow-wrap: anywhere;
}
a.discovery-card, a.post-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s ease, transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
a.discovery-card:hover, a.post-card:hover {
    border-color: var(--border-accent);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-card);
}
@media (prefers-reduced-motion: no-preference) {
    a.discovery-card:hover, a.post-card:hover { transform: translateY(-.2rem); }
}
.discovery-card h3, .post-card h3 { margin: .35rem 0; font-size: 1.1rem; }
.discovery-card-media { margin-bottom: .85rem; }
.eyebrow {
    margin: 0 0 .5rem;
    color: var(--accent-2);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.meta { margin: .15rem 0; color: var(--muted); font-size: .85rem; }
.badge, .official-badge, .phase-note {
    display: inline-block;
    margin: .35rem 0 0;
    padding: .35rem .7rem;
    border-radius: var(--radius-pill);
    color: #ecdcff;
    background: rgb(139 108 255 / 16%);
    font-size: .8rem;
    font-weight: 700;
}
.empty-state { color: var(--muted); text-align: center; padding: 2.25rem 1.5rem; }
.growth-marker { color: var(--success); font-size: .68rem; }
/* Vote/Battle/Awards pre-launch empty state -- reuses .empty-state's own
   centered/muted baseline, just adds a card surface + a visual hierarchy
   (title/description/hint) plus one CTA. Never a new design system. */
.feature-empty-state {
    text-align: center;
    padding: 2rem 1.5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--surface);
    max-width: 34rem;
    margin-inline: auto;
}
.feature-empty-state-title { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.feature-empty-state-desc { margin: 0 0 .75rem; color: var(--muted); font-size: .92rem; }
.feature-empty-state-hint { margin: 0 0 1.25rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.feature-empty-state-actions { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.feature-empty-state-community-link { font-size: .82rem; color: var(--accent); text-decoration: underline; }
@media (max-width: 26rem) {
    .feature-empty-state { padding: 1.5rem 1.1rem; }
    .feature-empty-state-actions .button { width: 100%; }
}

/* ===== Section heading =============================================== */
.section-heading, .action-row, .owner-actions, .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.section-heading h2 { margin: 0; font-size: clamp(.95rem, 2vw, 1.15rem); letter-spacing: -.01em; }
.section-heading .eyebrow { margin: 0 0 .35rem; }
.section-heading-text { display: flex; flex-direction: column; }
.section-link { text-decoration: none; color: var(--accent-strong); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.section-link:hover { color: var(--text); }

/* ===== Hero ========================================================== */
.hero {
    position: relative;
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card-lg);
    background:
        radial-gradient(50rem 24rem at 8% -20%, rgb(139 108 255 / 22%), transparent 60%),
        radial-gradient(38rem 22rem at 105% 10%, rgb(236 72 153 / 14%), transparent 55%),
        linear-gradient(180deg, var(--surface-alt), var(--surface) 70%);
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
}
.hero-main { position: relative; z-index: 1; }
.hero h1 {
    max-width: 17ch;
    margin: 0;
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    letter-spacing: -.03em;
}
.hero h1 em, .hero-emphasis {
    font-style: normal;
    background: linear-gradient(120deg, var(--accent-strong), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-copy { max-width: 40rem; margin: 1.1rem 0 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; }
.hero-tagline { max-width: 40rem; margin: .85rem 0 0; color: var(--text); font-size: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.cta-icon { display: inline-block; font-weight: 900; }

/* Compact "Can't find your fandom? + Create my fandom" strip -- the
   create-fandom action relocated out of the Hero into the Hero->discovery
   transition, per an explicit product-owner request. Deliberately a
   single-line bar, never another full Hero. */
.create-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: linear-gradient(100deg, var(--surface-alt), var(--surface));
}
.create-prompt p { margin: 0; color: var(--muted); font-weight: 600; }
.create-prompt .button { padding: .65rem 1.1rem; min-height: 0; }
.fandom-hero { padding-bottom: 2rem; grid-template-columns: 1fr; }

/* Hero right-side feature cards -- Ranking / Vote / Battle / Awards.
   Home Hero Feature Card Redesign (3rd pass): each card image
   (assets/images/hero/hero-card-{key}.png) is the product owner's own
   final Photoshop crop -- a complete card visual with its own baked-in
   rounded corners, its own baked-in violet/pink/gold border, and no
   text. So the card element adds NO CSS border/background of its own
   (that was the earlier double-border bug); it only sizes a box at the
   image's exact native ratio (731x406) and shows the image edge-to-edge
   via object-fit: fill (safe because the ratio matches exactly -- no
   distortion, no cropping, nothing of the source image lost). Title/
   description sit in an absolutely-positioned HTML region over the
   image's own empty left-side space (verified per-image so text never
   overlaps the icon). English-only copy by design, independent of
   locale. Purely decorative, hidden from assistive tech. */
.hero-visual {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
    /* Every .hero-feature-card child is now sized purely by aspect-ratio
       with all its own content (bg image/text/arrow) absolutely
       positioned -- so .hero-visual has zero normal-flow content of its
       own. Combined with align-self: center below (needed to vertically
       center it in the Hero row), a grid item with non-stretch align-self
       and zero intrinsic content collapses to its own gap width instead
       of stretching to fill its grid column. An explicit width (resolved
       directly against the already-definite grid-area width, unlike
       auto/stretch sizing) sidesteps that trap. */
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
}
.hero-feature-card {
    position: relative;
    display: block;
    aspect-ratio: 731 / 406;
    /* Product-owner tuned by eye against the live preview: the Photoshop
       source's own baked-in corner line reads truest at a tighter clip
       radius than the card's earlier 16px/14px values. Nothing else about
       the card changes. */
    border-radius: 0.4rem;
    overflow: hidden;
    /* Now an <a>, not a decorative <div> -- neutralize the browser's
       default link color/underline so the card's look is unchanged. */
    color: inherit;
    text-decoration: none;
}
.hero-feature-card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 70%);
}
.hero-feature-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
.hero-feature-text {
    position: absolute;
    left: 7%;
    top: 50%;
    width: 38%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}
.hero-feature-title { font-weight: 800; font-size: .88rem; letter-spacing: .03em; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 60%); }
.hero-feature-desc { font-size: .66rem; line-height: 1.28; color: #dcd8f5; text-shadow: 0 1px 3px rgb(0 0 0 / 60%); }
.hero-feature-arrow {
    position: absolute;
    right: .6rem;
    bottom: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 35%);
    background: rgb(0 0 0 / 25%);
    color: rgb(255 255 255 / 85%);
    font-size: .68rem;
}
@media (min-width: 56rem) {
    .hero { grid-template-columns: 1.15fr .85fr; padding: 3.5rem; }
    .fandom-hero { grid-template-columns: 1fr; }
}

/* ===== Fandom-level nav (Home / Community / Music / Listening Room /
   Ranking) -- desktop: inline pill row; mobile: horizontally scrollable
   with snap, so it stays a real one-line tab strip rather than
   wrapping. ============================================================ */
.fandom-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: .15rem;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.fandom-nav a {
    flex: none;
    scroll-snap-align: start;
    padding: .55rem .9rem;
    border-radius: var(--radius-button);
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    border: 1px solid transparent;
}
.fandom-nav a:hover { color: var(--text); background: rgb(255 255 255 / 6%); }
.fandom-nav a[aria-current="page"] { color: var(--text); background: rgb(139 108 255 / 16%); border-color: var(--border-accent); }

/* ===== Discovery / homepage grid ==================================== */
.discovery-section .section-heading { margin-bottom: 1.25rem; }
.discovery-section .section-heading h2 { font-size: clamp(.95rem, 1.6vw, 1.15rem); }
.discovery-grid { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; }
@media (min-width: 30rem) { .discovery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .discovery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 75rem) { .discovery-grid { grid-template-columns: repeat(4, 1fr); } }
.discovery-more { display: flex; justify-content: center; margin-top: 1.5rem; }

/* Popular Fandom TOP 10 -- a horizontally-scrollable snap rail at any
   width narrower than desktop (never ten cramped cards forced into one
   screen), a plain grid at desktop. Top-3 get distinctive gold/violet
   rank-badge emphasis; ranks 4-10 share a lighter treatment. Never a
   second ranking formula -- rank/score come straight from the same
   FandomRankingService data /ranking itself uses. */
.top-rail {
    display: flex;
    gap: .9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    margin: 0 calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
}
/* The <li> and the <a> inside it both carry the .top-rail-card class (the
   <li> for the .is-top3 gold-styling hook, the <a> as the actual visual/
   flex card) -- without this split, the shared padding/gap rule below
   applied twice (li padding, then a's own padding again, nested), which
   was a real, silent contributor to "unnecessarily tall" cards (item 5,
   Visual Correction Round 4). The <li> now carries no box model of its
   own; the <a> carries all of it. */
li.top-rail-card { position: relative; padding: 0; gap: 0; display: block; }
a.top-rail-card {
    position: relative;
    scroll-snap-align: start;
    flex: none;
    width: 9.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
    /* Compact ranking-card proportions (Visual Correction Round 4, item 5)
       -- the rank badge is position:absolute and no longer reserves its
       own layout row, so the card only needs to fit avatar+name+score. */
    padding: .65rem .3rem .75rem;
    text-decoration: none;
    color: var(--text);
}
.top-rail-rank {
    /* Small, close to the card's own top-left corner (~8px, item 3 of
       Visual Correction Round 4) -- not an oversized medal. Absolute, so
       it never reserves its own layout row/column. */
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    font-weight: 900;
    font-size: .66rem;
    background: var(--surface-elevated);
    border: 1px solid var(--border-strong);
    color: var(--muted);
}
.top-rail-card.is-top3 .top-rail-rank { color: #241605; background: linear-gradient(150deg, var(--gold), #ffd873); box-shadow: var(--glow-gold); }
.top-rail-card.is-top3 .avatar-fallback { box-shadow: var(--glow-gold); }
/* Avatar enlarged to ~2.3x the prior size-sm (2.25rem -> 5.2rem), item 4
   of Visual Correction Round 4 -- the compact card's dominant element. */
/* Home Card Scale Correction item 1: avatar reduced to 0.9x the round-4
   size (5.2rem -> 4.68rem); paired with the tighter desktop gap/padding
   below so all 10 cards fit 1024px+ with real margin to spare. */
/* 90% of the real measured 74.875px (4.68rem) -- target ~67.4px. */
.top-rail-card .avatar-fallback { width: 4.2rem; height: 4.2rem; font-size: 1.5rem; margin-top: .35rem; }
.top-rail-name {
    width: 100%;
    font-weight: 700;
    font-size: .78rem;
    /* nowrap + ellipsis (item 6) -- an ugly 2-3 character mid-word wrap
       (e.g. "FEA/RNO/T") is worse than a clean truncation; the full name
       is still available via the link/page it points to. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-rail-score { font-size: .68rem; color: var(--muted); }
@media (min-width: 62rem) {
    /* minmax(0,1fr): plain 1fr still floors each track at its content's
       min-content width, so a long unbroken fandom name (e.g. "SHINee
       WORLD") forced the 10-column row past the content width -- exactly
       the overflow item 5 of the Visual Reference Alignment round flags.
       minmax(0,1fr) lets every column genuinely shrink to fit. */
    .top-rail { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
    /* min-width:0 -- a grid ITEM's own default minimum size is still its
       content's min-content width (same rule as flex items) even though
       the TRACK itself is minmax(0,1fr); without this the card refused to
       shrink below its fixed-size avatar and visually overflowed into the
       next column at narrower desktop widths (e.g. 1024px). */
    /* Card width footprint reduced (Home Card Scale Correction item 1) --
       horizontal padding tightened .3rem->.15rem so the 0.9x avatar has
       real margin at 1024px instead of being right at the edge. */
    /* a.top-rail-card, not the bare .top-rail-card -- the base rule is
       `a.top-rail-card { width: 9.5rem; ... }` (element+class,
       specificity 0,1,1), which a plain `.top-rail-card` override
       (0,1,0) can NEVER beat regardless of media query/source order.
       Confirmed via real getComputedStyle() measurement: the <a> stayed
       at 152px (9.5rem) even inside the desktop grid, while its <li>
       grid-item wrapper correctly shrank to the ~86px track width --
       the <a> visually overflowed its own grid cell by ~66px per card,
       the actual cause of the "cards overlap" reports every prior round
       chased with the wrong theory (shadow bleed, min-width, etc). */
    a.top-rail-card { width: auto; min-width: 0; padding: .65rem .15rem .75rem; }
    /* .avatar-fallback's shared 1.8rem-blur drop shadow (tuned for large,
       widely-spaced avatars elsewhere) visually bled across the tight
       .8rem gap between these compact 10-up cards, darkening the
       neighboring card's name text underneath the shadow -- not an
       actual layout overlap, but visually indistinguishable from one. */
    .top-rail-card .avatar-fallback { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 17%), 0 .3rem .6rem rgb(0 0 0 / 26%); }
}

/* ===== Rising Fandoms -- medium cards, exactly 6 in one desktop row =====
   Distinct geometry from Popular (smaller/compact) and New (larger/
   informational) -- never the same generic card repeated. */
.rising-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 40rem) { .rising-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62rem) {
    /* 62rem, not 64rem -- matches Popular's own grid-activation threshold.
       Measured via real getComputedStyle(): requesting a 1024px browser
       window yields an effective CSS viewport of ~1008px (the vertical
       scrollbar subtracts from window.innerWidth), which is BELOW 64rem
       (1024px) but still above 62rem (992px). At 64rem, Rising/New never
       actually reached their 6/5-column desktop grid at a real 1024px
       window -- they silently fell back to the 3-column tablet layout
       (confirmed: grid-template-columns computed as 3 tracks, not 6).
       Card Scale Correction item 2: gap/padding also tightened here,
       specifically at this breakpoint (never touching the 2/3-col
       mobile/tablet modes), to make room for the enlarged avatar below. */
    .rising-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
    .rising-card { padding-inline: .4rem; }
}
.rising-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: .5rem;
    padding: 1.25rem .6rem 1.1rem;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: linear-gradient(160deg, var(--surface-alt), var(--surface));
    transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.rising-card:hover { border-color: rgb(52 211 153 / 45%); }
@media (prefers-reduced-motion: no-preference) { .rising-card:hover { transform: translateY(-.2rem); } }
.rising-marker {
    /* ~10px inset, slightly smaller (item 7, Visual Correction Round 4). */
    position: absolute;
    top: .625rem;
    left: .625rem;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .16rem .42rem;
    border-radius: 999px;
    background: rgb(52 211 153 / 14%);
    border: 1px solid rgb(52 211 153 / 30%);
    color: var(--success);
    font-size: .66rem;
    font-weight: 800;
}
/* Avatar enlarged to the max size that still keeps 6 cards in one
   1024px-wide no-overlap row (6.5rem -> 8.25rem, ~1.27x) -- the product
   owner's requested 2.5x (16.25rem) is mathematically incompatible with
   a strict 6x1/no-scroll grid at that width (confirmed: 6 avatars at
   that size alone would need ~1560px, more than the ~960px content area
   has at 1024px); this is the maximum achievable within that hard
   constraint, per explicit product-owner direction. */
/* 80% of the real measured 132px (8.25rem) -- target ~105.6px. */
.rising-avatar { width: 6.6rem; height: 6.6rem; font-size: 2.3rem; margin-top: .35rem; }
.rising-name { margin: 0; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.rising-count { font-size: .78rem; }

/* ===== New Fandoms -- 5x2 (10) larger informational cards ============ */
.new-fandom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}
@media (min-width: 40rem) { .new-fandom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62rem) {
    /* 62rem, not 64rem -- see the matching comment on .rising-grid above;
       same measured scrollbar-vs-breakpoint mismatch applied here.
       Card Scale Correction item 3: gap/padding tightened specifically at
       this breakpoint (never touching the 2/3-col mobile/tablet modes)
       to make room for the enlarged avatar below at 1024px. */
    .new-fandom-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
    .new-fandom-card { padding-inline: .5rem; }
}
.new-fandom-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: .3rem;
    /* Extra top padding clears the now-absolute badge (item 10, Visual
       Correction Round 4) so the enlarged avatar below never sits under it. */
    padding: 2.1rem .7rem 1.3rem;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: linear-gradient(160deg, var(--surface-alt), var(--surface));
    transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.new-fandom-card:hover { border-color: rgb(142 104 255 / 52%); }
@media (prefers-reduced-motion: no-preference) { .new-fandom-card:hover { transform: translateY(-.2rem); } }
.new-fandom-badge {
    /* Absolute, top-left (~10px), never consumes its own flex row (item 10). */
    position: absolute;
    top: .625rem;
    left: .625rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgb(236 72 153 / 14%);
    border: 1px solid rgb(236 72 153 / 24%);
    color: var(--accent-2);
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
/* Avatar enlarged to the max size that still keeps 5 cards in one
   1024px-wide no-overlap row (8.125rem -> 10rem, ~1.23x) -- the product
   owner's requested 2.5x (20.3125rem) is mathematically incompatible with
   a strict 5x2/no-scroll grid at that width (5 avatars alone would need
   ~1625px, more than the ~960px content area has at 1024px); this is the
   maximum achievable within that hard constraint, per explicit
   product-owner direction. */
/* 80% of the real measured 160px (10rem) -- target 128px exactly. */
.new-fandom-avatar { width: 8rem; height: 8rem; font-size: 2.7rem; margin: 0 0 .3rem; }
.meta-icon { flex: none; margin-right: .3rem; vertical-align: -1px; color: var(--muted); }
.new-fandom-card .meta { display: flex; align-items: center; width: 100%; justify-content: center; }
.new-fandom-card h3 { margin: 0; font-size: 1.02rem; overflow-wrap: anywhere; }
.new-fandom-created-date-only { display: none; }
@media (max-width: 39.99rem) {
    /* 2-column mobile cards: full "Created :date" label wraps mid-date on
       narrow cards. Hide the label, show the bare date nowrap instead. */
    .new-fandom-created-full { display: none; }
    .new-fandom-created-date-only { display: inline; white-space: nowrap; }
}

/* ===== Community Hot Posts -- exactly 4 wide image-backed media cards ==
   Real uploaded post image as background when one exists (item 17);
   otherwise a deterministic, copyright-safe FAN INCHART fallback
   illustration (item 18) -- never a third-party artist photo either way. */
.community-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
}
@media (min-width: 40rem) { .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .community-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.community-media-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 16rem;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    background-color: var(--surface);
    background-size: cover;
    background-position: center;
    transition: border-color .15s ease, transform .15s ease;
}
.community-media-card:hover { border-color: rgb(142 104 255 / 52%); }
@media (prefers-reduced-motion: no-preference) { .community-media-card:hover { transform: translateY(-.2rem); } }
/* A real uploaded post image renders via <img src>, never a per-post
   inline style="background-image" -- this site's CSP (style-src 'self')
   silently drops every inline style attribute (confirmed via real
   getComputedStyle()/element.style.cssText measurement while fixing the
   same class of bug on the Hero feature cards). img[src] is governed by
   img-src, not style-src, so this is CSP-safe without a per-post
   stylesheet rule (which isn't possible for an unbounded set of ids). */
.community-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.community-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(4 6 16 / 92%) 0%, rgb(4 6 16 / 55%) 55%, rgb(4 6 16 / 25%) 100%);
}
.community-media-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
    padding: 1.25rem;
}
.community-media-content > .eyebrow {
    align-self: flex-start;
    margin: 0;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgb(139 108 255 / 22%);
    border: 1px solid rgb(139 108 255 / 34%);
    color: #ecdcff;
}
.community-media-title { font-size: 1.1rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.community-media-card .hot-post-meta { margin-top: 0; padding-top: 0; border-top: 0; color: rgb(255 255 255 / 78%); }
/* Deterministic copyright-safe fallback illustrations (no real image
   uploaded) -- assets/images/community/community-0N.jpg, cropped from an
   original FAN INCHART asset-pack image (removing its baked-in border/
   caption band) and re-compressed, never a scraped/third-party photo. */
.fallback-bg-1 { background-image: linear-gradient(0deg, rgb(4 6 16 / 40%), rgb(4 6 16 / 10%)), url('/assets/images/community/community-01.jpg'); }
.fallback-bg-2 { background-image: linear-gradient(0deg, rgb(4 6 16 / 40%), rgb(4 6 16 / 10%)), url('/assets/images/community/community-02.jpg'); }
.fallback-bg-3 { background-image: linear-gradient(0deg, rgb(4 6 16 / 40%), rgb(4 6 16 / 10%)), url('/assets/images/community/community-03.jpg'); }
.fallback-bg-4 { background-image: linear-gradient(0deg, rgb(4 6 16 / 40%), rgb(4 6 16 / 10%)), url('/assets/images/community/community-04.jpg'); }
.fallback-bg-5 { background-image: linear-gradient(0deg, rgb(4 6 16 / 40%), rgb(4 6 16 / 10%)), url('/assets/images/community/community-05.jpg'); }
.fallback-bg-6 { background-image: linear-gradient(0deg, rgb(4 6 16 / 40%), rgb(4 6 16 / 10%)), url('/assets/images/community/community-06.jpg'); }
.fallback-bg-7 { background-image: linear-gradient(0deg, rgb(4 6 16 / 40%), rgb(4 6 16 / 10%)), url('/assets/images/community/community-07.jpg'); }
.fallback-bg-8 { background-image: linear-gradient(0deg, rgb(4 6 16 / 40%), rgb(4 6 16 / 10%)), url('/assets/images/community/community-08.jpg'); }

.hot-post-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .75rem; color: var(--muted); font-size: .8rem; }
.hot-post-meta span { display: inline-flex; align-items: center; gap: .3rem; }

/* ===== Share controls / ambassadors ================================= */
.share-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }
.share-controls .button, .share-controls button[data-share-button] {
    padding: .55rem .9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-button);
    color: var(--text);
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.share-controls label { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .85rem; }
.share-controls input[data-share-input] { width: auto; min-width: 12rem; padding: .4rem .6rem; border: 1px solid var(--border-strong); border-radius: .5rem; color: var(--text); background: var(--bg); font: inherit; }
.share-controls [data-share-status] { color: var(--muted); font-size: .85rem; }
.ambassador-list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ambassador-list li { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .6rem; }
.ambassador-name { font-weight: 700; }

/* ===== Forms ========================================================= */
.form-card, .create-page, .community-page.form-card {
    padding: 2rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card-lg);
    background: linear-gradient(160deg, var(--surface-alt), var(--surface));
    box-shadow: var(--shadow-card);
}
.form-card h1 { font-size: clamp(1.05rem, 3.3vw, 1.45rem); }
.form-card h2 { margin-top: 2rem; }
.form-card form, .create-mode form, .search-form, .community-page form, .create-page form {
    display: grid;
    gap: 1rem;
}
.form-card label, .community-page label, .create-page label { display: grid; gap: .45rem; color: var(--muted); font-weight: 600; font-size: .88rem; }
.form-card input, .form-card select, .community-page input, .community-page select, .community-page textarea,
.create-mode input, .create-page input, .create-page select {
    width: 100%;
    padding: .8rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    color: var(--text);
    background: var(--bg);
    font: inherit;
}
.form-card input:focus, .form-card select:focus, .community-page input:focus, .community-page select:focus, .community-page textarea:focus,
.create-mode input:focus, .create-page input:focus, .create-page select:focus { border-color: var(--accent); }
.community-page textarea { min-height: 9rem; resize: vertical; }
.form-card .button, .community-page .button { border: 0; cursor: pointer; }
.form-error { padding: .7rem .9rem; border-radius: var(--radius-button); background: var(--danger-bg); color: var(--danger); font-size: .88rem; font-weight: 600; }
.flash-success {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding: .8rem 1rem;
    border-radius: var(--radius-button);
    background: var(--success-bg);
    color: var(--success);
    font-weight: 600;
}
.inline-form { display: inline; }

.create-mode {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.create-mode h2 { font-size: clamp(.95rem, 2.25vw, 1.15rem); }
.create-page h1 { font-size: clamp(1.1rem, 3.6vw, 1.55rem); }
.candidate, .duplicate-warning { margin: 1rem 0; }
.candidate h2 { margin-top: 0; }
.confirm { grid-template-columns: auto 1fr !important; align-items: start; }
.confirm input { width: auto; }

/* ===== Community feed / posts ======================================= */
.community-feed { margin: 0; }
.post-card a, .community-page a { color: var(--text); }
.post-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: pre-line; color: var(--muted); }
.post-body, .comment-body { margin: 1.5rem 0; overflow-wrap: anywhere; line-height: 1.7; }
.action-row form, .owner-actions form { display: inline; }
.action-row button, .owner-actions button, .report-form button, .comment button {
    padding: .5rem .8rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    color: var(--text);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
.action-row button:hover, .owner-actions button:hover, .report-form button:hover, .comment button:hover { border-color: var(--accent); }
.report-form { margin-top: 1rem; }
.report-form form { margin-top: 1rem; }
.pagination { justify-content: center; margin: 2rem 0 0; }
.pagination a { padding: .5rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--radius-button); text-decoration: none; font-weight: 600; }
.pagination a:hover { border-color: var(--accent); }
.translation-controls { margin: .5rem 0; }
.translation-save { margin: 1rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.translation-save label { display: flex; align-items: center; gap: .4rem; margin: .35rem 0; color: var(--muted); }
.translate-locale-checkbox { width: auto; }
.activity-summary, .activity-badges { color: var(--muted); }

/* ===== Media ========================================================= */
.post-media { display: grid; gap: 1rem; margin: 1.5rem 0; }
.post-media figure { margin: 0; }
.image-gallery img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.embeds iframe, .post-video iframe { width: 100%; min-height: 16rem; border: 0; border-radius: var(--radius-card); background: #fff; }
@media (min-width: 40rem) { .embeds iframe, .post-video iframe { min-height: 24rem; } }
.media-link { display: block; padding: 1rem; overflow-wrap: anywhere; border: 1px solid var(--border-strong); border-radius: var(--radius-card); text-decoration: none; }
.media-manager { margin: 1.5rem 0; }
.media-manager form { margin-top: 1rem; }

/* ===== Music (MUSIC-A) =============================================== */
.music-page { margin: 0; }
.now-playing { margin-bottom: 1.5rem; }
.now-playing-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: #000; box-shadow: var(--shadow-card); }
.now-playing-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.now-playing-title { margin: .85rem 0 .25rem; font-size: 1.15rem; font-weight: 700; }
.track-list { display: grid; gap: .6rem; }
.track-card {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    gap: .85rem;
    padding: .6rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.track-card:hover { border-color: var(--border-strong); background: var(--surface-elevated); }
.track-card.is-active { border-color: var(--accent); background: rgb(139 108 255 / 10%); }
.track-thumb { grid-row: span 2; width: 4.5rem; height: 4.5rem; border-radius: .6rem; object-fit: cover; }
.track-title { font-weight: 700; }

/* ===== Listening Room (MUSIC-B1/B2) -- desktop: Now Playing/Queue and
   Chat sit side by side as two columns; mobile: an intentional, single
   stacked order (Now Playing -> Queue -> Chat), never a squeezed
   side-by-side layout. Every id/class/data-attribute the existing JS
   (assets/js/listening-room.js, listening-room-chat.js) selects by is
   left completely unchanged -- only the surrounding layout/visuals. == */
.listening-room-page { margin: 0; }
.listening-room-live-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .65rem;
    border-radius: var(--radius-pill);
    background: var(--success-bg);
    color: var(--success);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.listening-room-live-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--success); }
.listening-room-room #listening-room-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.listening-room-join { margin: 1rem 0; }
.listening-room-next { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.listening-room-layout { display: grid; gap: var(--section-spacing); grid-template-columns: 1fr; }
@media (min-width: 64rem) {
    .listening-room-layout { grid-template-columns: 1.3fr .9fr; align-items: start; }
    .listening-room-layout > .listening-room-chat-section { margin-top: 0; }
}

/* ===== Listening Room chat (MUSIC-B2) ================================ */
.listening-room-chat-section { margin-top: var(--section-spacing); }
.listening-room-chat-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .6rem;
    max-height: 24rem;
    overflow-y: auto;
}
.listening-room-chat-message {
    padding: .6rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    overflow-wrap: anywhere;
}
.listening-room-chat-text { margin: .25rem 0 0; }
.listening-room-chat-report {
    margin-top: .4rem;
    padding: .2rem .6rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: .75rem;
    cursor: pointer;
}
.listening-room-chat-report:hover { color: var(--text); border-color: var(--accent); }
.listening-room-chat-report-form { display: grid; gap: .5rem; margin-top: .6rem; max-width: var(--content-narrow); }
.listening-room-chat-report-form select, .listening-room-chat-report-form textarea {
    padding: .6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    color: var(--text);
    background: var(--bg);
    font: inherit;
}
.listening-room-chat-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.listening-room-chat-form textarea {
    flex: 1 1 16rem;
    min-height: 2.75rem;
    padding: .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    color: var(--text);
    background: var(--bg);
    font: inherit;
    resize: vertical;
}

/* ===== Admin ========================================================= */
.admin-shell h1 { margin-top: 0; }
.admin-nav { margin-top: 1.5rem; }
.admin-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.admin-nav li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface-elevated);
}
.admin-nav a { color: var(--text); font-weight: 700; text-decoration: none; }
.admin-nav-future { color: var(--muted); }
.admin-badge-soon {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    color: var(--muted);
    font-size: .75rem;
}
/* A real, actionable count (e.g. pending moderation reports) -- kept
   visually distinct from .admin-badge-soon's inert placeholder style so
   an operator never mistakes live work for a "not built yet" label. */
.admin-badge-count {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgb(236 72 153 / 18%);
    color: var(--accent-2);
    font-size: .75rem;
    font-weight: 700;
}
.admin-badge-count.is-zero { background: rgb(255 255 255 / 8%); color: var(--muted); font-weight: 400; }
/* ADMIN V1 PHASE A -- reuses the existing admin-shell/table/pagination
   system; only these few new grid/card primitives are added, and they
   are plain CSS grid/flex so they wrap safely at mobile widths without
   any extra media queries. */
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 1.25rem 0; }
.admin-stat-card { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); display: flex; flex-direction: column; gap: .3rem; }
.admin-stat-value { font-size: 1.4rem; font-weight: 800; }
.admin-stat-label { color: var(--muted); font-size: .78rem; }
.admin-recent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.admin-recent-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.admin-recent-list li { padding: .4rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.admin-music-actions { margin: 1rem 0; }
.admin-audit-scroll { padding: 0; overflow-x: auto; }
.admin-audit-table { width: 100%; border-collapse: collapse; }
.admin-audit-table thead th { text-align: left; padding: .85rem 1rem; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-audit-table tbody td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); font-size: .9rem; vertical-align: top; }
.admin-audit-meta { display: inline-block; margin: 0 .4rem .3rem 0; padding: .2rem .5rem; border-radius: .4rem; background: rgb(255 255 255 / 6%); font-size: .8rem; color: var(--muted); }
.admin-audit-pagination { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
.admin-audit-pagination a { padding: .5rem .9rem; border: 1px solid var(--border-strong); border-radius: .5rem; text-decoration: none; }
.admin-music-lookup, .admin-shell form { display: grid; gap: .75rem; max-width: var(--content-narrow); margin: 1rem 0; }
.admin-music-lookup label, .admin-shell form label { display: grid; gap: .4rem; color: var(--muted); }
.admin-music-lookup input, .admin-shell form input, .admin-shell form select {
    padding: .7rem;
    border: 1px solid var(--border-strong);
    border-radius: .6rem;
    color: var(--text);
    background: var(--bg);
    font: inherit;
}
.admin-music-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.admin-music-actions form { margin: 0; max-width: none; }
.admin-observability-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1.5rem; }
.admin-observability-card { padding: 1.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-elevated); }
.admin-observability-card h2 { margin: 0 0 .75rem; font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.admin-observability-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: 0; }
.admin-observability-facts dt { color: var(--muted); font-size: .85rem; }
.admin-observability-facts dd { margin: 0; font-weight: 600; }
.admin-observability-note { margin: .85rem 0 0; color: var(--muted); font-size: .8rem; }
.admin-status-pill { padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: 1px solid transparent; }
.admin-status-ok { color: var(--success); background: var(--success-bg); border-color: var(--success); }
.admin-status-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning); }
.admin-status-error { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
.admin-status-not_configured { color: var(--muted); background: rgb(255 255 255 / 6%); border-color: var(--border-strong); }
.admin-status-not_yet_run { color: var(--muted); background: rgb(255 255 255 / 6%); border-color: var(--border-strong); }

/* ===== V1 public surfaces (Ranking/Voting/Battle/Awards/Music
   discovery) -- ONE shared status-pill vocabulary (text label always
   present, never color-only) and ONE shared bounded-list/entry-card
   pattern reused across all four, rather than a bespoke style per page.
   Every list here is a responsive card stack (never a desktop-only
   table), so it stays usable at any viewport without a separate mobile
   layout. ===================================================== */
.status-pill { display: inline-block; align-self: flex-start; width: fit-content; padding: .25rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border: 1px solid transparent; }
.status-active { color: var(--success); background: var(--success-bg); border-color: var(--success); }
.status-scheduled { color: var(--accent-strong); background: rgb(139 108 255 / 16%); border-color: var(--accent); }
.status-ended { color: var(--muted); background: rgb(255 255 255 / 8%); border-color: var(--border-strong); }
.status-cancelled { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
.status-draft { color: var(--muted); background: rgb(255 255 255 / 6%); border-color: var(--border); }

.entry-list { display: grid; gap: .75rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.entry-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .5rem 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: linear-gradient(160deg, var(--surface-alt), var(--surface));
}
a.entry-card { text-decoration: none; color: var(--text); }
a.entry-card:hover { border-color: var(--border-accent); background: var(--surface-elevated); box-shadow: var(--shadow-card); }
.entry-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text);
    background: var(--surface-elevated);
    border: 1px solid var(--border-strong);
}
/* Top-3 emphasis, reused identically on /ranking, Battle standings, and
   Award results -- gold is reserved for exactly this. */
li:nth-child(1) > .entry-rank, li:nth-child(1) > a.entry-card > .entry-rank {
    color: #241605;
    background: linear-gradient(150deg, var(--gold), #ffd873);
    border-color: transparent;
    box-shadow: var(--glow-gold);
}
li:nth-child(2) > .entry-rank, li:nth-child(2) > a.entry-card > .entry-rank { color: #14151f; background: linear-gradient(150deg, #d7dbee, #9aa1c2); border-color: transparent; }
li:nth-child(3) > .entry-rank, li:nth-child(3) > a.entry-card > .entry-rank { color: #241608; background: linear-gradient(150deg, #d69a63, #a9612f); border-color: transparent; }
.entry-main { display: flex; align-items: center; gap: .6rem; }
.entry-main h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.entry-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (min-width: 30rem) {
    .entry-side { grid-column: 3; flex-direction: column; align-items: flex-end; text-align: right; }
}

.candidate-list { display: grid; gap: .75rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.candidate-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: linear-gradient(160deg, var(--surface-alt), var(--surface)); }
.candidate-card.is-selected { border-color: var(--success); background: rgb(52 211 153 / 8%); box-shadow: 0 0 0 1px var(--success) inset; }
.candidate-card form { margin: 0; }
.candidate-card .button, .candidate-card .button-secondary { padding: .5rem .9rem; }
.candidate-identity { display: flex; align-items: center; gap: .75rem; }

/* ===== Battle -- fandom-vs-fandom composition ======================== */
.vs-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.vs-participants { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin: 1.25rem 0; }
.vs-fandom { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; text-decoration: none; color: var(--text); padding: 1rem; border-radius: var(--radius-card); min-width: 8rem; }
.vs-fandom:hover { background: var(--surface); }
.vs-fandom-name { font-weight: 800; font-size: .95rem; }
.vs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 900;
    font-size: .85rem;
    color: var(--accent-2);
    background: rgb(236 72 153 / 14%);
    border: 1px solid rgb(236 72 153 / 45%);
}

/* ===== Awards -- prestige/trophy treatment =========================== */
.award-category-card { padding: 1.5rem; }
.award-category-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; }
.award-trophy-icon { display: inline-flex; color: var(--gold); }
.entry-card.is-winner { border-color: var(--gold); box-shadow: var(--glow-gold); background: linear-gradient(160deg, var(--gold-soft), var(--surface)); }

/* ===== Messages (403/404/etc) ======================================= */
.message {
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card-lg);
    background: linear-gradient(160deg, var(--surface-alt), var(--surface));
    box-shadow: var(--shadow-elevated);
    text-align: center;
}
.message h1 { font-size: clamp(1.05rem, 3.3vw, 1.45rem); }
.post-detail h1 { margin: .35rem 0; font-size: clamp(1.1rem, 3vw, 1.5rem); }

/* ===== Responsive ==================================================== */
@media (min-width: 48rem) {
    .site-header, .site-footer { padding-inline: 2rem; }
    main { padding-inline: 2rem; }
    .form-card, .create-page, .community-page.form-card { padding: 2.5rem; }
    .create-mode form, .search-form { grid-template-columns: 1fr auto; align-items: end; }
}

/* The primary nav is ALWAYS inline at real desktop width, immediately
   next to the brand -- never behind a "Menu" toggle once there is
   genuine room for it. Tablet (portrait or landscape) keeps the
   compact mobile trigger below this width, a deliberate choice rather
   than letting an 11+-link row wrap into a dense multi-line header. */
@media (min-width: 64rem) {
    .nav-menu-toggle { display: none; }
    .nav-menu nav {
        display: flex !important;
        position: static;
        inset: auto;
        flex-direction: row;
        min-width: 0;
        max-height: none;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    .nav-menu nav a, .nav-menu nav .nav-form button { width: auto; text-align: left; padding: .55rem .8rem; font-size: .92rem; }
    .nav-menu nav .nav-divider { display: none; }
    .nav-menu-mobile-extra { display: none !important; }
    .header-end { display: flex; }
}

@media (max-width: 26rem) {
    .locale-menu summary { padding: .3rem .55rem; gap: .3rem; }
    .locale-current { max-width: 4.5rem; }
    .header-cta .button, .header-cta .button-secondary { padding: .5rem .75rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Public beta visual refinement. The rules below deliberately consolidate
   the consumer surfaces around one quieter, image-independent visual system.
   ===================================================================== */
:root {
    --bg: #040713;
    --surface: #0a1020;
    --surface-alt: #0d1528;
    --surface-elevated: #121c34;
    --border: rgb(155 174 220 / 18%);
    --border-strong: rgb(171 188 230 / 34%);
    --accent: #8047ee;
    --accent-strong: #ac78ff;
    --accent-2: #f13a9b;
    --content-max: 90rem;
    --page-gutter: clamp(1rem, 3vw, 2.5rem);
    /* Reduced from clamp(3rem,7vw,6.5rem) -- item 22 of the Visual
       Reference Alignment round: too much vertical whitespace between
       Home sections; the approved mockup is dense but organized. */
    --section-spacing: clamp(1.75rem, 3.5vw, 3.25rem);
    --radius-card: 1rem;
    --radius-card-lg: 1.35rem;
    --shadow-card: 0 1.25rem 3rem rgb(0 3 14 / 40%);
}
body {
    background:
        radial-gradient(55rem 35rem at 0 -10%, rgb(54 102 255 / 11%), transparent 64%),
        radial-gradient(52rem 35rem at 100% 8%, rgb(175 53 255 / 9%), transparent 62%),
        linear-gradient(180deg, #040713 0%, #050916 52%, #030611 100%);
}
main { padding-top: clamp(1.25rem, 3vw, 2.6rem); }
.site-header {
    max-width: none;
    min-height: 4.75rem;
    padding-inline: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2 + var(--page-gutter)));
    background: rgb(4 7 19 / 82%);
    border-color: rgb(170 186 226 / 11%);
    box-shadow: 0 .75rem 2rem rgb(0 0 0 / 14%);
}
.brand { gap: .6rem; letter-spacing: -.045em; font-size: 1.08rem; }
.brand-mark { width: 2rem; height: 2rem; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.brand-word { color: #fafaff; background: none; white-space: nowrap; }
.site-header nav { gap: .2rem; }
.desktop-primary { display: none !important; }
.site-header nav a, .nav-form button { font-size: .87rem; font-weight: 650; }
.site-header nav a[aria-current="page"] { background: transparent; box-shadow: none; color: #fff; position: relative; }
.site-header nav a[aria-current="page"]::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -.88rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-2), var(--accent-strong)); }
.account-menu { position: relative; }
.account-menu summary { display: flex; align-items: center; gap: .55rem; min-height: 2.55rem; padding: .3rem .7rem .3rem .35rem; border: 1px solid var(--border-strong); border-radius: 999px; list-style: none; cursor: pointer; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-avatar { display: flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; color: white; font-size: .78rem; font-weight: 850; background: linear-gradient(135deg, var(--accent-2), var(--accent), #2e9cff); }
img.account-avatar { object-fit: cover; background: var(--surface); }
.account-name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 700; }
.account-chevron { color: var(--muted); }
.account-popover { position: absolute; right: 0; top: calc(100% + .65rem); width: 12rem; padding: .45rem; border: 1px solid var(--border-strong); border-radius: .85rem; background: rgb(10 16 32 / 98%); box-shadow: var(--shadow-elevated); }
.account-popover a, .account-popover button { display: block; width: 100%; padding: .68rem .75rem; border: 0; border-radius: .55rem; color: var(--muted); background: transparent; text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.account-popover a:hover, .account-popover button:hover { color: white; background: rgb(255 255 255 / 6%); }

.hero {
    /* Reduced ~25% from the original clamp(29rem,44vw,39rem)/clamp(2.25rem,6vw,5.5rem)
       per an explicit product-owner request ("Hero feels excessively large") --
       still premium/recognizable, just no longer a giant SaaS-landing-page block. */
    /* minmax(0,1fr): an implicit single-column grid track otherwise sizes
       to its content's max-content width (the CTA button/long copy line),
       overflowing narrow viewports -- clipped invisibly since body has
       overflow-x:hidden, so it read as silently truncated text/buttons at
       320-430px rather than an obvious scrollbar. */
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(21rem, 33vw, 29rem);
    padding: clamp(1.75rem, 4.5vw, 4rem);
    /* Home Final Visual Correction item 2: the new product-owner-supplied
       Hero photo (assets/images/hero/fan-inchart-hero-bg.jpg, derived
       from the approved source master at
       /home/fan/assets_source/hero/fan-inchart-hero-bg.png -- source
       untouched) is itself composed with a dark/quiet left side and the
       concert-stage visual on the right, so it needs a lighter overlay
       than the prior asset did to stay "visible enough for a premium
       atmosphere" per spec -- still strongest over the real H1/copy on
       the left, fading out toward the right where the decorative
       Ranking/Vote/Battle/Awards .hero-visual cards sit. */
    border-color: rgb(150 162 214 / 16%);
    background-image:
        linear-gradient(100deg, rgb(4 6 19 / 82%) 0%, rgb(4 6 19 / 62%) 40%, rgb(4 6 19 / 32%) 74%, rgb(4 6 19 / 16%) 100%),
        radial-gradient(46rem 26rem at 18% -12%, rgb(120 86 255 / 10%), transparent 62%),
        url('/assets/images/hero/fan-inchart-hero-bg.jpg');
    background-position: center, center, center 42%;
    background-size: auto, auto, cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px rgb(255 255 255 / 3%), 0 1.5rem 3rem rgb(0 0 0 / 28%);
    overflow: hidden;
}
.hero::before { width: 22rem; height: 22rem; right: -6rem; top: -8rem; background: radial-gradient(circle, rgb(120 56 255 / 11%), transparent 67%); }
.hero::after { content: ""; position: absolute; width: 17rem; height: 17rem; left: 34%; bottom: -15rem; border-radius: 50%; background: rgb(241 58 155 / 6%); filter: blur(3rem); }
.hero-main { align-self: center; }
.hero .eyebrow { color: #d5d8ec; letter-spacing: .08em; }
/* Global H1 reduced to ~60% of its previous rendered size, and H2 to ~50%,
   per an explicit product-owner request that headings "are not enormous."
   .page-heading (added to every non-Home page's title section -- see
   §5/§21) gets an EVEN smaller size below, since only the true Home Hero
   still functions as a marketing headline. */
.hero h1 { max-width: 12ch; font-size: clamp(1.4rem, 3.2vw, 2.65rem); letter-spacing: -.06em; line-height: 1; text-wrap: balance; }
.hero.page-heading h1 { font-size: clamp(1.25rem, 2.6vw, 1.9rem); max-width: 22ch; }
/* Flatten the page-title band on every non-Home page (item 5/§21):
   a section should not read as a second giant bordered card once real
   content follows it. Same markup as the Home Hero -- only the card
   treatment (border/background/shadow/glow) is stripped, so it reads
   as a flat title band the page background flows through. */
.hero.page-heading {
    min-height: 0;
    padding: 1.5rem 0 1.75rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.hero.page-heading::before, .hero.page-heading::after { display: none; }
.hero-copy { max-width: 34rem; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.hero-tagline { color: var(--accent-strong); font-weight: 750; }
.hero-actions { margin-top: 1.35rem; }
.button, button.button { min-height: 3rem; padding-inline: 1.35rem; background: linear-gradient(115deg, #5c4cea, #a337ef 62%, #d829b1); box-shadow: 0 .7rem 1.8rem rgb(113 53 236 / 24%); }
.button-secondary { min-height: 3rem; padding-inline: 1.35rem; background: rgb(7 12 27 / 54%); }
.hero-visual { align-self: center; }
.hero-feature-card { box-shadow: 0 .9rem 2rem rgb(0 0 0 / 32%); }

.section-heading { align-items: end; margin-bottom: 1.45rem !important; }
.section-heading h2, .discovery-section .section-heading h2 { margin: 0; font-size: clamp(.95rem, 1.3vw, 1.15rem); letter-spacing: -.02em; }
.section-link { color: #c8cde2; font-size: .88rem; }
.section-link::after { content: "  ›"; color: var(--accent-strong); }
/* gap tightened .8rem->.45rem (Home Card Scale Correction item 1) -- part
   of reducing the card width footprint so all 10 cards clear 1024px with
   real margin at the 0.9x avatar size. */
.top-rail { gap: .45rem; padding: .45rem .15rem 1.2rem; scroll-padding-inline: .15rem; }
.top-rail > li { min-width: min(10.4rem, 42vw); }
@media (min-width: 62rem) {
    /* This is the real root cause of the Popular TOP 10 overlap: the
       <li> wrapper's own min-width (up to 10.4rem/166px, sized for the
       narrow horizontal-scroll rail) was NEVER reset for the desktop
       10-column grid mode below -- .top-rail-card's min-width:0 (added
       above) had no effect because .top-rail > li is more specific and
       applies unconditionally. 10 columns at 166px minimum each cannot
       fit in any realistic content width, so cards were forced to
       visually overlap their neighbors. */
    .top-rail > li { min-width: 0; }
}
/* min-height dropped from 14.5rem -- Visual Correction Round 4 item 5:
   with the rank badge now position:absolute (no layout row) and padding
   reduced above, the card only needs to fit its (now much larger)
   avatar + name + score, not a fixed tall minimum. */
a.top-rail-card { justify-content: center; border-color: var(--border); background: linear-gradient(155deg, rgb(17 27 50 / 96%), rgb(8 14 29 / 96%)); }
.top-rail-card:hover { translate: 0 -.3rem; border-color: rgb(142 104 255 / 56%); }
.top-rail-rank { position: absolute; top: .75rem; left: .75rem; }
.avatar-fallback {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 24%, rgb(255 255 255 / 20%) 0 5%, transparent 6%),
        linear-gradient(135deg, var(--avatar-a, #f43b9b), var(--avatar-b, #6558f5) 58%, #248ee9);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 17%), 0 .8rem 1.8rem rgb(0 0 0 / 28%);
}
.avatar-fallback::before { content: ""; position: absolute; z-index: -1; width: 75%; height: 75%; border: 1px solid rgb(255 255 255 / 20%); rotate: 35deg; border-radius: 32% 68% 56% 44%; }
.avatar-fallback::after { content: ""; position: absolute; z-index: -1; inset: 60% -20% -35%; border-radius: 50%; background: rgb(3 7 22 / 35%); }
.top-rail-card:nth-child(4n + 2) .avatar-fallback, .discovery-card:nth-child(4n + 2) .avatar-fallback, .new-fandom-card:nth-child(4n + 2) .avatar-fallback { --avatar-a:#ef3d75; --avatar-b:#873ee6; }
.top-rail-card:nth-child(4n + 3) .avatar-fallback, .discovery-card:nth-child(4n + 3) .avatar-fallback, .new-fandom-card:nth-child(4n + 3) .avatar-fallback { --avatar-a:#385eea; --avatar-b:#18a6ca; }
.top-rail-card:nth-child(4n) .avatar-fallback, .discovery-card:nth-child(4n) .avatar-fallback, .new-fandom-card:nth-child(4n) .avatar-fallback { --avatar-a:#9744db; --avatar-b:#ed4e83; }
/* font-size removed here -- this later same-specificity rule was silently
   overriding .top-rail-name's own .84rem down in the Popular section
   (both plain .top-rail-name), leaving the real effective size at .96rem
   the whole time. margin-top is still additive/harmless, kept. */
.top-rail-name { margin-top: .25rem; }
.discovery-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
.discovery-card, .post-card { min-height: 13.75rem; padding: 1.25rem; border-color: var(--border); background: linear-gradient(145deg, rgb(15 25 47 / 96%), rgb(7 13 27 / 98%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.discovery-card:hover, .post-card:hover { translate: 0 -.25rem; border-color: rgb(142 104 255 / 52%); box-shadow: var(--shadow-card); }
/* Left-aligned, small top-left category marker + compact media (item 7)
   -- replaces a previous centered/oversized-avatar "hero card" treatment
   that read as its own mini-banner rather than a structured card. */
.discovery-card-media { width: 2.75rem; height: 2.75rem; font-size: 1rem; margin-bottom: .7rem; }
.discovery-card h3 { text-align: left; font-size: 1.06rem; }
.discovery-card > .eyebrow, .post-card > .eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: .6rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    color: var(--accent-2);
    background: rgb(236 72 153 / 14%);
    border: 1px solid rgb(236 72 153 / 24%);
    font-size: .68rem;
}
.post-card { min-height: 12.5rem; justify-content: end; background: radial-gradient(18rem 10rem at 80% 0, rgb(117 66 227 / 20%), transparent 65%), linear-gradient(145deg, #101a31, #080e1e); }
.post-excerpt { color: #c0c6dc; }
.hot-post-meta { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }

/* ===== Fandom Detail V1 -- Hero, nav, Community feed, Music Talk ===== */
.fandom-hero { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
/* fandom-hero-v2: a real per-fandom background (copyright-safe abstract
   texture, never a photo) with a dark left-to-right overlay so the
   identity text always stays readable regardless of the texture under it
   -- same technique the Home hero already uses for its own photo. The
   per-fandom badge (see .fandom-hero-badge below) supplies the actual
   fandom-to-fandom visual difference, since the texture itself is shared. */
/* .hero.page-heading (0,2,0 specificity) sets background: none to flatten
   every non-Home page-title band -- a bare .fandom-hero-v2 (0,1,0) would
   lose to it regardless of source order (confirmed the hard way earlier
   in this same file's .fandom-hero min-height history). Matching it with
   the two-class .fandom-hero.fandom-hero-v2 selector here wins instead. */
.fandom-hero.fandom-hero-v2 {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(100deg, rgb(4 6 19 / 88%) 0%, rgb(4 6 19 / 72%) 45%, rgb(4 6 19 / 40%) 100%), url('/assets/images/fandom/hero-texture.jpg');
    background-position: center;
    background-size: cover;
}
/* Per-fandom decorative visual emphasis (right side, per spec: "왼쪽
   identity/text: dark overlay / 오른쪽: visual emphasis") -- one of the
   25 official copyright-safe abstract badges, deterministic per fandom
   (see $badgeIndex in the view), never a real artist photo. Purely
   decorative (aria-hidden), sized so it never collides with the text
   column on any tested width; hidden below the tablet breakpoint where
   there is no room for it without crowding the identity text. */
.fandom-hero-badge {
    position: absolute;
    right: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16rem;
    height: 16rem;
    opacity: .9;
    filter: drop-shadow(0 1rem 3rem rgb(0 0 0 / 45%));
    pointer-events: none;
}
.fandom-hero-avatar.avatar-fallback.size-md { margin-bottom: .6rem; }
.fandom-hero-meta { display: flex; align-items: center; gap: .4rem; }
/* ARTIST x FANDOM identity -- the base .hero h1's 12ch max-width (sized
   for Home's short marketing headline) would badly truncate a combined
   "SEVENTEEN x CARAT" heading; h1/h2/h3's global overflow-wrap:anywhere
   still protects very long combined names on narrow widths. */
.fandom-identity { max-width: 34ch; }
.fandom-identity-x { color: var(--muted); font-weight: 600; }
.fandom-hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; }
.fandom-hero-badges .badge { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
/* Founding Fan / Ambassadors -- folded into compact Hero badges (product-
   owner decision) instead of separate bordered sections, alongside the
   pre-existing .official-badge pill they already share the .badge look
   with. */
.fandom-founder-badge { color: var(--gold); border-color: rgb(242 183 5 / 30%); background: var(--gold-soft); }
.fandom-founder-badge .meta-icon { margin-right: 0; color: inherit; }
.fandom-ambassador-badge { color: #5ab4f0; border-color: rgb(56 158 234 / 30%); background: rgb(56 158 234 / 12%); }
.fandom-ambassador-badge .meta-icon { margin-right: 0; color: inherit; }
/* Rank/Fandom Power glance, directly in the identity area (spec: "ranking
   / Fandom Power where available") -- reuses the exact same $rankingCard
   data the old standalone Ranking Card rendered, no new query/formula.
   Omitted (not a fabricated placeholder) only in the sense that the
   honest "not ranked yet" state renders instead when unranked. */
.fandom-hero-rank { margin: .85rem 0 0; }
.fandom-hero-rank-row { display: flex; align-items: center; gap: .85rem; margin-top: .15rem; }
.fandom-hero-rank-number {
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(120deg, var(--accent-strong), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ranking-movement { display: flex; align-items: center; font-size: .85rem; font-weight: 700; }
.ranking-movement.is-up { color: var(--success); }
.ranking-movement.is-down { color: var(--danger); }
.ranking-movement.is-new { color: var(--accent-strong); }
.ranking-movement .meta-icon { color: inherit; }
.fandom-hero-rank-empty { margin: .85rem 0 0; padding: .5rem 0; text-align: left; color: var(--muted); }
/* Nav -- Community (default home) + 24h Music Talk (both real <a> page
   links) + Ranking Share/Invite (icon-only data-share actions, never
   giant standalone cards per spec item 15). */
.fandom-nav { margin-top: .5rem; background: rgb(5 10 24 / 72%); backdrop-filter: blur(.8rem); box-shadow: 0 .8rem 2rem rgb(0 0 0 / 20%); align-items: center; }
.fandom-nav-icon { position: relative; display: inline-flex; flex: none; }
.fandom-nav-icon button[data-share-button] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}
.fandom-nav-icon button[data-share-button]:hover { color: var(--text); background: rgb(255 255 255 / 6%); }
.fandom-nav-share-status {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 2;
    padding: .35rem .6rem;
    border-radius: .5rem;
    background: rgb(10 14 28 / 96%);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: .76rem;
    white-space: nowrap;
}
.fandom-nav-share-status:empty { display: none; }
/* Community feed -- ONE continuous surface with row dividers, never a
   giant bordered card repeated per post (spec item 6). */
.community-feed-surface {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: linear-gradient(160deg, var(--surface-alt), var(--surface));
    overflow: hidden;
}
.community-feed-row { padding: 1.1rem 1.35rem; }
.community-feed-row + .community-feed-row { border-top: 1px solid var(--border); }
.community-feed-row h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.community-feed-row h3 a { color: var(--text); text-decoration: none; }
.community-feed-row h3 a:hover { color: var(--accent-strong); }
.community-feed-row .post-excerpt { margin: 0 0 .6rem; color: #c0c6dc; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.community-feed-row .hot-post-meta { margin-top: 0; padding-top: 0; border-top: 0; }
/* V1 Fandom Board -- cross-fandom row list, so each row also identifies
   which fandom it belongs to (the single-fandom feed above never needed
   this). Reuses .avatar-fallback.size-sm as-is, never a new avatar style. */
.community-board-row-fandom { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.community-board-row-fandom .avatar-fallback { flex: none; }
.community-board-fandom-name { font-size: .82rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.community-board-fandom-name:hover { color: var(--accent-strong); }
/* Music Talk -- messenger-style conversation, fundamentally different
   from Community's post/comment model (spec item 7). Other users' bubbles
   left-aligned with their name shown above; the viewer's own bubbles
   right-aligned with no name (matches a real chat app, not a comment
   thread). */
.now-playing-compact { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; }
.now-playing-compact .now-playing-frame { flex: none; width: 8rem; aspect-ratio: 16 / 9; margin: 0; }
.now-playing-info { min-width: 0; }
.now-playing-info .now-playing-title { margin: .2rem 0 .1rem; font-size: .98rem; }
.now-playing-info .listening-room-join { min-height: 2.2rem; padding-inline: .9rem; margin-bottom: .4rem; }
.listening-room-next-line { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }
.music-talk-track-list-link { margin-top: .5rem; }
.music-talk-track-list-link a { color: var(--accent-strong); font-size: .88rem; font-weight: 700; text-decoration: none; }
.music-talk-track-list-link a:hover { text-decoration: underline; }
.listening-room-chat-list { display: flex; flex-direction: column; gap: .2rem; list-style: none; margin: 0 0 1rem; padding: 0; max-height: 26rem; overflow-y: auto; }
.listening-room-chat-message { display: flex; flex-direction: column; max-width: 78%; margin: .35rem 0; }
.listening-room-chat-message.is-theirs { align-items: flex-start; align-self: flex-start; }
.listening-room-chat-message.is-mine { align-items: flex-end; align-self: flex-end; }
.chat-author { margin: 0 0 .2rem .2rem; color: var(--muted); font-size: .74rem; font-weight: 700; }
.chat-bubble {
    margin: 0;
    padding: .55rem .85rem;
    border-radius: 1.1rem;
    font-size: .9rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.is-theirs .chat-bubble { border-bottom-left-radius: .3rem; background: var(--surface-elevated); color: var(--text); }
.is-mine .chat-bubble { border-bottom-right-radius: .3rem; background: linear-gradient(115deg, #5c4cea, #a337ef); color: #fff; }
.chat-time { margin: .2rem .2rem 0; color: var(--muted-2); font-size: .68rem; }
.listening-room-chat-report { align-self: inherit; margin-top: .15rem; border: 0; background: transparent; color: var(--muted-2); font-size: .7rem; text-decoration: underline; cursor: pointer; padding: 0; }
.listening-room-chat-form { display: flex; gap: .6rem; align-items: flex-end; }
.listening-room-chat-form textarea { flex: 1; min-height: 2.6rem; max-height: 8rem; padding: .65rem .85rem; border: 1px solid var(--border-strong); border-radius: 1.2rem; background: var(--bg); color: var(--text); font: inherit; resize: none; }
.listening-room-chat-form .button { min-height: 2.6rem; padding-inline: 1.1rem; flex: none; }
/* The manual-copy fallback <label>+<input> starts functionally hidden
   (input[hidden], only revealed by share.js when Web Share/Clipboard both
   fail) but its <label> TEXT was always rendered regardless, reading as
   an orphaned caption next to a control that visually doesn't exist yet.
   :has() lets pure CSS track the same [hidden] state share.js already
   toggles, with no JS/markup change. */
.share-controls label:has(input[hidden]) { display: none; }
.entry-card { min-height: 5.75rem; padding: 1rem 1.25rem; background: linear-gradient(100deg, rgb(17 27 50 / 96%), rgb(8 14 29 / 96%)); }
.entry-list li:nth-child(-n+3) .entry-card { min-height: 6.5rem; border-color: rgb(170 187 229 / 28%); }
.candidate-card { min-height: 5.8rem; background: linear-gradient(100deg, rgb(17 27 50 / 96%), rgb(8 14 29 / 96%)); }
.listening-room-layout { align-items: start; }
.listening-room-page, .listening-room-chat-section { padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--radius-card-lg); background: linear-gradient(150deg, var(--surface-alt), var(--surface)); box-shadow: var(--shadow-card); }
.listening-room-chat-section .listening-room-chat { padding: 0; border: 0; background: transparent; box-shadow: none; }
.form-card, .create-page, .community-page.form-card, .message { border-color: var(--border-strong); background: radial-gradient(25rem 15rem at 100% 0, rgb(128 71 238 / 17%), transparent 64%), linear-gradient(155deg, var(--surface-alt), var(--surface)); }
.site-footer { max-width: var(--content-max); padding-top: 3rem; padding-bottom: 2rem; border-top-color: var(--border); }

@media (max-width: 63.99rem) {
    .site-header { min-height: 4.25rem; }
    .brand-word { font-size: .94rem; }
    .nav-menu nav { width: min(22rem, calc(100vw - 2rem)); max-height: calc(100vh - 5.5rem); padding: .8rem; }
    .nav-menu nav > a { border-bottom: 1px solid rgb(255 255 255 / 4%); border-radius: .45rem; }
    .hero { min-height: auto; }
    .hero h1 { max-width: 13ch; }
}
@media (min-width: 64rem) {
    .desktop-primary { display: flex !important; }
    .nav-menu { display: none; }
    .hero { grid-template-columns: minmax(0, .92fr) minmax(25rem, .82fr); gap: clamp(2rem, 5vw, 6rem); }
    .fandom-hero { grid-template-columns: 1fr; }
    .site-header nav a, .nav-form button { padding-inline: .62rem; }
    .listening-room-layout { grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .75fr); gap: 1.25rem; }
}
@media (max-width: 47.99rem) {
    main { padding-bottom: 3rem; }
    .hero { padding: 2rem 1.25rem; border-radius: 1.15rem; }
    .hero h1 { font-size: clamp(1.4rem, 7.2vw, 2.1rem); }
    .hero.page-heading h1 { font-size: clamp(1.2rem, 6vw, 1.7rem); }
    .hero-copy { line-height: 1.55; }
    .hero-visual { display: none; }
    .hero-actions > * { flex: 1 1 9rem; text-align: center; }
    .create-mode { margin-top: 2rem; }
    .top-rail { margin-inline: calc(var(--page-gutter) * -1); padding-inline: var(--page-gutter); }
    .discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .discovery-card, .post-card { min-height: 12rem; padding: 1rem; }
    .discovery-card .meta { font-size: .76rem; }
    .fandom-hero-badge { display: none; }
    .fandom-nav { margin-inline: calc(var(--page-gutter) * -1); padding-inline: var(--page-gutter); border-inline: 0; border-radius: 0; }
    .now-playing-compact { flex-direction: column; align-items: flex-start; }
    .now-playing-compact .now-playing-frame { width: 100%; }
    .listening-room-chat-message { max-width: 82%; }
}
@media (max-width: 23rem) {
    .site-header { padding-inline: .75rem; }
    .brand-word { font-size: .82rem; }
    .brand-mark { width: 1.7rem; height: 1.7rem; }
    .nav-menu-toggle { padding: .5rem .62rem; }
    .nav-menu-toggle span { display: none; }
    .discovery-grid { grid-template-columns: 1fr; }
    .hero { padding-inline: 1rem; }
}
@media (max-width: 26.875rem) {
    .hero-actions { flex-direction: column; }
    .hero-actions > * { width: 100%; flex-basis: auto; }
    .create-mode input, .create-mode button { width: 100%; min-width: 0; }
    .create-prompt { flex-direction: column; align-items: stretch; text-align: center; }
    .create-prompt .button { width: 100%; }
}


/* ===== Fandom detail V1 — approved Photoshop-direction hero ===== */
.fandom-hero.fandom-hero-v2 {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 18rem;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    border: 0;
    border-radius: 0;
    background: #070b18;
    box-shadow: none;
    overflow: hidden;
}
.fandom-hero.fandom-hero-v2::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    display: block;
    background:
        linear-gradient(90deg,
            rgb(4 7 19 / 96%) 0%,
            rgb(4 7 19 / 94%) 24%,
            rgb(4 7 19 / 86%) 36%,
            rgb(4 7 19 / 68%) 48%,
            rgb(4 7 19 / 44%) 62%,
            rgb(4 7 19 / 22%) 78%,
            rgb(4 7 19 / 8%) 92%,
            transparent 100%),
        linear-gradient(0deg, rgb(4 7 19 / 52%), transparent 58%);
    pointer-events: none;
}
.fandom-hero.fandom-hero-v2::after { display: none; }

.fandom-hero-cover {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 48%;
    filter: brightness(.78) saturate(.9);
    transform: scale(1.015);
}

.fandom-hero-badge { display: none !important; }

.fandom-hero .hero-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: clamp(6rem, 9vw, 8rem) minmax(0, 1fr);
    grid-template-areas:
        "profile meta"
        "profile identity"
        "profile rank"
        "profile badges";
    column-gap: clamp(1.25rem, 2.3vw, 2rem);
    row-gap: .28rem;
    align-items: center;
    width: min(100%, 49rem);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.fandom-hero-profile {
    grid-area: profile;
    align-self: center;
    display: block;
    width: clamp(6rem, 9vw, 8rem);
    height: clamp(6rem, 9vw, 8rem);
    margin: 0;
    border: 2px solid rgb(255 255 255 / 55%);
    border-radius: 50%;
    object-fit: cover;
    background: rgb(8 12 28 / 70%);
    box-shadow: 0 .7rem 2rem rgb(0 0 0 / 38%);
}

/* ADMIN-only direct PROFILE/HERO upload buttons -- MANAGE_FANDOM_IMAGES
   permission gated server-side (the buttons are never rendered in the
   HTML at all for anyone else, see fandom/show.php's $canManageFandomImages
   check), so this is purely presentational. .fandom-hero-profile above is
   completely untouched from before this feature existed; the PROFILE
   upload form is a plain SIBLING of the <img> (not a wrapper around it)
   that shares its grid-area so the two occupy the exact same cell --
   pointer-events:none on the form keeps it from intercepting clicks over
   the image, re-enabled only on the small button itself. */
.fandom-image-upload-form {
    margin: 0;
}
.fandom-image-upload-hero {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 4;
}
.fandom-image-upload-profile {
    grid-area: profile;
    align-self: center;
    position: relative;
    width: clamp(6rem, 9vw, 8rem);
    height: clamp(6rem, 9vw, 8rem);
    pointer-events: none;
}
/* A pre-existing, unrelated rule (".fandom-hero .hero-main > form {
   grid-column: 2 }" below) targets every direct-child <form> of
   .hero-main for a different feature; this form is also a direct child
   (a plain sibling of the profile <img>, not nested in a wrapper), so
   it needs enough specificity here to keep sharing the image's own
   grid-area instead of being pulled into column 2 by that rule. */
.fandom-hero .hero-main > .fandom-image-upload-profile {
    grid-area: profile;
}
.fandom-image-upload-profile .fandom-image-upload-button-profile {
    position: absolute;
    top: -.25rem;
    right: -.25rem;
    z-index: 2;
    pointer-events: auto;
}
.fandom-image-upload-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    font-size: .78rem;
    line-height: 1;
    color: #f5f6fb;
    background: rgb(4 7 19 / 62%);
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 999px;
    backdrop-filter: blur(2px);
    cursor: pointer;
    transition: background .15s ease;
}
.fandom-image-upload-button:hover,
.fandom-image-upload-button:focus-visible {
    background: rgb(4 7 19 / 82%);
}
.fandom-image-upload-button-profile {
    padding: .4rem;
    border-radius: 50%;
}
.fandom-hero .fandom-hero-meta {
    grid-area: meta;
    margin: 0 0 .15rem;
    color: #d9dcef;
    text-shadow: 0 1px 5px rgb(0 0 0 / 75%);
}
.fandom-hero .fandom-identity {
    grid-area: identity;
    max-width: none;
    margin: 0;
    text-shadow: 0 2px 12px rgb(0 0 0 / 75%);
}
.fandom-hero .fandom-identity h1,
.fandom-hero h1 {
    margin: 0;
}
.fandom-hero .fandom-hero-rank {
    grid-area: rank;
    margin-top: .35rem;
    text-shadow: 0 1px 6px rgb(0 0 0 / 70%);
}
.fandom-hero .fandom-hero-badges {
    grid-area: badges;
    margin-top: .15rem;
    text-shadow: 0 1px 5px rgb(0 0 0 / 70%);
}
.fandom-hero .hero-main > .button,
.fandom-hero .hero-main > form {
    grid-column: 2;
}

/* Hero navigation is deliberately outside the hero image. */
.fandom-nav {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: .8rem clamp(1rem, 2.5vw, 2.25rem);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.fandom-nav .subnav {
    margin: 0;
}

@media (max-width: 47.99rem) {
    .fandom-hero.fandom-hero-v2 {
        min-height: 15rem;
        padding: 1.4rem 1.1rem;
    }
    .fandom-hero.fandom-hero-v2::before {
        background:
            linear-gradient(90deg, rgb(4 7 19 / 91%) 0%, rgb(4 7 19 / 66%) 70%, rgb(4 7 19 / 44%) 100%),
            linear-gradient(0deg, rgb(4 7 19 / 65%), transparent);
    }
    .fandom-hero-cover {
        object-position: center;
        filter: brightness(.68) saturate(.85);
    }
    .fandom-hero .hero-main {
        grid-template-columns: 4.75rem minmax(0, 1fr);
        column-gap: 1rem;
        width: 100%;
    }
    .fandom-hero-profile,
    .fandom-image-upload-profile {
        width: 4.75rem;
        height: 4.75rem;
        align-self: start;
    }
    .fandom-nav {
        padding: .65rem 1rem;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .fandom-nav::-webkit-scrollbar { display: none; }
}


/* ===== Community write CTA placement ===== */
.community-feed-heading-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.community-feed-heading-actions > p { margin: 0; }
/* /notices only: this page's h1 sits in the same heading row as the
   ADMIN write-notice button, which the h1's unconstrained default size
   pushed off-screen on narrow viewports. Mirrors .section-heading h2's
   existing compact sizing exactly, scoped by id so it never touches
   /community/posts or /community/liked's own h1 sizing. */
#notices-title { margin: 0; font-size: clamp(.95rem, 2vw, 1.15rem); letter-spacing: -.01em; }
@media (max-width: 47.99rem) {
    #notices-write-action { flex-basis: 100%; margin-top: .5rem; justify-content: flex-end; }
}
.community-write-top {
    min-height: 2.15rem;
    padding: .38rem .8rem;
    border-radius: .65rem;
    font-size: .82rem;
    white-space: nowrap;
}
.community-write-bottom {
    display: flex;
    width: 100%;
    min-height: 3.25rem;
    margin-top: 1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}
@media (max-width: 39.99rem) {
    .community-feed-heading-actions { gap: .5rem; }
    .community-write-top { padding-inline: .65rem; }
}


/* ===== Fandom hero — Photoshop mockup alignment pass ===== */
.fandom-hero.fandom-hero-v2 {
    min-height: 18rem;
    padding: 0 clamp(2.25rem, 4vw, 4rem);
}
.fandom-hero .hero-main {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    grid-template-areas:
        "profile meta"
        "profile identity"
        "profile rank"
        "profile badges";
    column-gap: 1.45rem;
    row-gap: .42rem;
    align-content: center;
    align-items: center;
    width: min(100%, 52rem);
    padding: 0;
    background: transparent;
}
.fandom-hero-profile,
.fandom-image-upload-profile {
    grid-area: profile;
    width: 9rem;
    height: 9rem;
    margin: 0;
    align-self: center;
}
.fandom-hero .fandom-hero-meta {
    grid-area: meta;
    margin: 0 0 .1rem;
    color: #cfd5ee;
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.fandom-hero .fandom-identity {
    grid-area: identity;
    margin: 0;
    max-width: none;
    font-size: clamp(1.85rem, 2.6vw, 2.35rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .01em;
}
.fandom-identity-x {
    margin-inline: .22rem;
    color: #777f9d;
    font-weight: 500;
}
.fandom-rank-cluster {
    grid-area: rank;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .35rem;
}
.fandom-rank-primary {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    gap: .7rem;
}
.fandom-rank-kicker {
    width: max-content;
    margin: 0;
    color: var(--accent-2);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.fandom-rank-number {
    color: var(--accent-2);
    font-size: 2.65rem;
    font-weight: 800;
    line-height: .9;
}
.fandom-rank-secondary {
    display: grid;
    gap: .28rem;
    padding-left: 1rem;
    border-left: 1px solid rgb(255 255 255 / 25%);
}
.fandom-rank-movement {
    font-size: .78rem;
    font-weight: 700;
}
.fandom-rank-power {
    margin: 0;
    font-size: .8rem;
    color: #c7cee8;
}
.fandom-hero .fandom-hero-badges {
    grid-area: badges;
    margin: .2rem 0 0;
}

@media (max-width: 47.99rem) {
    .fandom-hero.fandom-hero-v2 {
        min-height: 15rem;
        padding: 1.35rem 1rem;
    }
    .fandom-hero .hero-main {
        grid-template-columns: 5.75rem minmax(0, 1fr);
        grid-template-areas:
            "profile meta"
            "profile identity"
            "rank rank"
            "badges badges";
        column-gap: 1rem;
        row-gap: .42rem;
        width: 100%;
    }
    .fandom-hero-profile,
    .fandom-image-upload-profile {
        width: 5.75rem;
        height: 5.75rem;
        align-self: start;
    }
    .fandom-hero .fandom-identity {
        font-size: clamp(1.45rem, 7vw, 1.9rem);
    }
    .fandom-rank-cluster {
        margin-top: .6rem;
        gap: .8rem;
        flex-wrap: wrap;
    }
}

.fandom-rank-kicker span {
    display: block;
    white-space: nowrap;
}

/* ===== Fandom hero — spacing refinement ===== */
/* Bring the rank number closer to the two-line label. */
.fandom-rank-primary {
    gap: .28rem;
}

/* Lower the complete text block slightly relative to the profile top edge. */
.fandom-hero .fandom-hero-meta {
    transform: translateY(.45rem);
}
.fandom-hero .fandom-identity {
    transform: translateY(.45rem);
}
.fandom-rank-cluster {
    transform: translateY(.45rem);
}
.fandom-hero .fandom-hero-badges {
    transform: translateY(.45rem);
}

@media (max-width: 47.99rem) {
    .fandom-hero .fandom-hero-meta,
    .fandom-hero .fandom-identity,
    .fandom-rank-cluster,
    .fandom-hero .fandom-hero-badges {
        transform: none;
    }
}


/* ===== Fandom nav spacing ===== */
.fandom-nav {
    margin-bottom: 30px;
}


/* ===== Music Talk layout refinement ===== */
.listening-room-layout {
    align-items: stretch;
}
.listening-room-layout > .listening-room-page,
.listening-room-layout > .listening-room-chat-section {
    height: 100%;
}
.listening-room-page,
.listening-room-chat-section {
    display: flex;
    flex-direction: column;
}
.listening-room-chat-section .listening-room-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.listening-room-chat-list {
    flex: 1 1 auto;
}
.music-talk-all-tracks {
    margin-top: 1.5rem;
}
.music-talk-all-track-list {
    display: grid;
    gap: .45rem;
}
.music-talk-all-track-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .75rem .9rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface);
}
.music-talk-all-track-row.is-current {
    border-color: var(--border-accent);
    background: rgb(139 108 255 / 8%);
}
.music-talk-track-number {
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}
.music-talk-track-copy {
    display: grid;
    gap: .15rem;
    min-width: 0;
}
.music-talk-track-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 47.99rem) {
    .music-talk-all-track-row {
        grid-template-columns: 1.7rem minmax(0, 1fr);
    }
    .music-talk-all-track-row .listening-room-live-badge {
        grid-column: 2;
        justify-self: start;
    }
}


/* ===== Music Talk: full-width player + single-list playlist ===== */

/* Left card: player fills the content width, information moves underneath. */
.now-playing-compact {
    display: block;
    width: 100%;
    margin-bottom: 0;
}
.now-playing-compact .now-playing-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: .9rem;
    overflow: hidden;
    background: #000;
}
.now-playing-compact .now-playing-frame #listening-room-player,
.now-playing-compact .now-playing-frame iframe {
    width: 100%;
    height: 100%;
}
.now-playing-info {
    width: 100%;
    margin-top: 1rem;
}
.now-playing-info .listening-room-join {
    margin: 0 0 .8rem;
}
.now-playing-info .eyebrow {
    margin-bottom: .3rem;
}
.now-playing-info .now-playing-title {
    margin: 0 0 .2rem;
}
.listening-room-next-line {
    margin-top: .55rem;
}

/* Pre-playback start overlay -- centered on top of the player frame,
   shown until the user actually starts playback (join()), then hidden
   entirely (see listening-room.js). No new player/playback logic; this
   only relocates the existing join button visually and adds copy. */
.listening-room-start-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(6, 8, 20, .72);
    text-align: center;
}
.listening-room-start-overlay[hidden] { display: none; }
.listening-room-start-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    max-width: 26rem;
}
.listening-room-start-overlay-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}
.listening-room-start-overlay-description {
    margin: 0;
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.5;
}
.listening-room-start-overlay .listening-room-join {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
}
@media (max-width: 24.99rem) {
    .listening-room-start-overlay { padding: .9rem; }
    .listening-room-start-overlay-title { font-size: 1.02rem; }
    .listening-room-start-overlay-description { font-size: .82rem; }
}

/* Playlist: one continuous container, not one card per track. */
.music-talk-all-tracks {
    margin-top: 1.5rem;
}
.music-talk-all-tracks .section-heading {
    margin-bottom: .8rem !important;
}
.music-talk-all-track-list {
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: linear-gradient(160deg, var(--surface-alt), var(--surface));
}
.music-talk-all-track-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .8rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.music-talk-all-track-row + .music-talk-all-track-row {
    border-top: 1px solid var(--border);
}
.music-talk-all-track-row.is-current {
    border-color: var(--border);
    background: rgb(139 108 255 / 9%);
}
.music-talk-track-number {
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}
.music-talk-track-copy {
    display: grid;
    gap: .15rem;
    min-width: 0;
}
.music-talk-track-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 47.99rem) {
    .music-talk-all-track-row {
        grid-template-columns: 1.8rem minmax(0, 1fr);
        padding: .75rem .8rem;
    }
    .music-talk-all-track-row .listening-room-live-badge {
        grid-column: 2;
        justify-self: start;
    }
}

/* MUSIC TALK P0-3 -- duration / Next Play / hearts line under each track
   title. Wraps naturally at any width (flex + wrap, no nowrap/fixed
   width anywhere) rather than truncating or overflowing on a narrow
   phone screen or a longer locale string (e.g. Japanese/Chinese labels
   running longer than the English original). */
.music-talk-track-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: .15rem;
    column-gap: .5rem;
}
.music-talk-track-meta-part {
    white-space: normal;
    overflow-wrap: anywhere;
}
.music-talk-track-meta-part + .music-talk-track-meta-part::before {
    content: "\00b7";
    margin-right: .5rem;
    color: var(--muted);
}
.music-talk-next-play time {
    font-variant-numeric: tabular-nums;
}
.music-talk-hearts {
    letter-spacing: .05em;
}
@media (max-width: 47.99rem) {
    .music-talk-track-copy strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}


/* ===== Music Talk: right chat card fills the full matched height ===== */
.listening-room-layout {
    align-items: stretch;
}

.listening-room-layout > .listening-room-page,
.listening-room-layout > .listening-room-chat-section {
    height: 100%;
    min-height: 0;
}

.listening-room-chat-section {
    display: flex;
    flex-direction: column;
}

.listening-room-chat-section .listening-room-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.listening-room-chat-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.listening-room-chat-form {
    flex: 0 0 auto;
    margin-top: auto;
}


/* ===== Music Talk: chat height matches the YouTube player frame only ===== */
@media (min-width: 64rem) {
    .listening-room-layout {
        align-items: start;
    }

    .listening-room-layout > .listening-room-page,
    .listening-room-layout > .listening-room-chat-section {
        min-height: 0;
    }

    .listening-room-chat-section {
        align-self: start;
        overflow: hidden;
    }

    .listening-room-chat-section .listening-room-chat {
        height: 600px;
        min-height: 0;
    }

    .listening-room-chat-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .listening-room-chat-form {
        flex: 0 0 auto;
        margin-top: .75rem;
    }
}

@media (max-width: 63.99rem) {
    .listening-room-chat-section {
        height: auto !important;
    }
}


/* ===== Fandom membership + explicit nav action labels ===== */
.fandom-nav-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 2.35rem;
    padding: .55rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.fandom-nav-action:hover { color: var(--text); background: rgb(255 255 255 / 6%); }
.fandom-membership-trigger { color: #fff; border-color: rgb(139 108 255 / 36%); background: rgb(139 108 255 / 12%); }
.fandom-membership-trigger.is-joined { color: var(--success); border-color: rgb(52 211 153 / 32%); background: rgb(52 211 153 / 10%); }
.fandom-nav-icon button[data-share-button] {
    width: auto;
    height: 2.35rem;
    padding: .55rem .9rem;
    gap: .42rem;
    border-radius: var(--radius-button);
}
.fandom-membership-dialog {
    width: min(28rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    color: var(--text);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-elevated);
}
.fandom-membership-dialog::backdrop { background: rgb(0 0 0 / 65%); backdrop-filter: blur(.2rem); }
.fandom-membership-dialog-inner { padding: 1.4rem; }
.fandom-membership-dialog h2 { margin: 0 0 .65rem; font-size: 1.15rem; }
.fandom-membership-dialog p { color: var(--muted); line-height: 1.55; }
.fandom-membership-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.15rem; }
.fandom-membership-dialog-actions .button,
.fandom-membership-dialog-actions .button-secondary { min-height: 2.5rem; padding: .6rem 1rem; }
@media (max-width: 47.99rem) {
    .fandom-nav-action,
    .fandom-nav-icon button[data-share-button] { padding-inline: .75rem; }
}


/* ===== Community post detail — compact continuous layout ===== */
.community-post-detail-shell { margin-top: 0; }
.community-post-detail-surface { padding: 0; overflow: hidden; font-size: .9rem; }
.community-post-detail-surface > .post-detail,
.community-post-detail-surface > .comments {
    margin: 0;
    padding: 1.25rem 1.4rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.community-post-detail-surface > .comments { border-top: 1px solid var(--border); }
.community-post-detail-surface .post-detail > .eyebrow:first-child { display: none; }
.community-post-detail-surface .post-detail h1 { margin: 0 0 .7rem; font-size: clamp(1.12rem, 1.55vw, 1.4rem); line-height: 1.35; }
.community-post-detail-surface .post-body,
.community-post-detail-surface .comment-body { font-size: .88rem; line-height: 1.62; }
.community-post-detail-surface .meta,
.community-post-detail-surface time { font-size: .74rem; }
.community-post-detail-surface .post-author-avatar {
    width: 1.575rem;
    height: 1.575rem;
    font-size: .66rem;
    margin-right: 10px;
    vertical-align: middle;
}
.community-post-detail-surface .share-controls { display: flex; width: auto; margin: .45rem 0 .55rem; }
.community-post-detail-surface .share-controls button[data-share-button] {
    width: auto;
    min-height: 1.85rem;
    padding: .3rem .65rem;
    border-radius: .55rem;
    font-size: .76rem;
}
.community-post-detail-surface .translation-controls { margin: .45rem 0; }
.community-post-detail-surface .translation-controls .inline-form { display: inline-flex; width: auto; }
.community-post-detail-surface .translation-controls button,
.community-post-detail-surface .translation-controls a {
    width: auto;
    min-height: 1.75rem;
    padding: .25rem .55rem;
    font-size: .73rem;
}
.community-post-detail-surface .compact-action-row { display: flex; justify-content: flex-start; gap: .35rem; margin-top: .55rem; }
.community-post-detail-surface .compact-action-row form { display: inline-flex; margin: 0; }
.community-post-detail-surface .icon-count-button,
.community-post-detail-surface .icon-count-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .22rem;
    width: auto;
    min-width: 0;
    min-height: 1.7rem;
    padding: .2rem .48rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .72rem;
}
.community-post-detail-surface .icon-count-button { cursor: pointer; }
.community-post-detail-surface .icon-count-button.is-active { color: var(--accent-2); border-color: var(--border-accent); }
.community-post-detail-surface .icon-count-button .meta-icon,
.community-post-detail-surface .icon-count-static .meta-icon { width: 12px; height: 12px; margin: 0; color: currentColor; }
.community-post-detail-surface .compact-report { display: inline-block; margin-top: .35rem; }
.community-post-detail-surface .compact-report > summary { list-style: none; }
.community-post-detail-surface .compact-report > summary::-webkit-details-marker { display: none; }
.community-post-detail-surface .icon-only-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}
.community-post-detail-surface .icon-only-action .meta-icon { width: 12px; height: 12px; margin: 0; color: currentColor; }
.community-post-detail-surface .comments-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 .65rem;
    width: 1.8rem;
    height: 1.8rem;
    color: var(--text);
}
.community-post-detail-surface .comments-title-icon .meta-icon { width: 16px; height: 16px; margin: 0; color: currentColor; }
.community-post-detail-surface .comment-form { margin-bottom: .75rem; }
.community-post-detail-surface .comment-form label { font-size: .76rem; }
.community-post-detail-surface .comment-form textarea { min-height: 84px; font-size: .86rem; }
.community-post-detail-surface .comment-submit-icon {
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border-radius: 50%;
}
.community-post-detail-surface .comment-submit-icon .meta-icon { width: 14px; height: 14px; margin: 0; }
.community-post-detail-surface .comment {
    margin: 0;
    padding: .85rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.community-post-detail-surface .comment + .comment { border-top: 1px solid var(--border); }
.community-post-detail-surface .comment .translation-controls { margin: .35rem 0; }
.community-post-detail-surface .comment details:not(.compact-report) summary,
.community-post-detail-surface .comment > form button { font-size: .72rem; }
@media (max-width: 47.99rem) {
    .community-post-detail-surface > .post-detail,
    .community-post-detail-surface > .comments { padding: 1rem; }
}


/* ===== Community post detail — screenshot alignment final pass ===== */
.community-post-detail-surface {
    font-size: .86rem;
}
.community-post-detail-surface > .post-detail {
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.45rem 1rem;
}
.community-post-detail-surface .post-detail h1 {
    margin: 0 0 .55rem;
    font-size: clamp(1.15rem, 1.55vw, 1.35rem);
}
.community-post-detail-surface .post-meta-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .7rem;
    min-height: 1.9rem;
}
.community-post-detail-surface .post-author-meta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
}
.community-post-detail-surface .post-author-avatar {
    width: 1.55rem;
    height: 1.55rem;
    margin-right: 2px;
    font-size: .62rem;
}
.community-post-detail-surface .post-inline-tool {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
}
.community-post-detail-surface .post-inline-tool form {
    display: inline-flex;
    margin: 0;
}
.community-post-detail-surface .post-inline-tool button,
.community-post-detail-surface .post-inline-tool a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font: inherit;
    font-size: .73rem;
    text-decoration: none;
}
.community-post-detail-surface .post-inline-tool button:hover,
.community-post-detail-surface .post-inline-tool a:hover { color: var(--text); }
.community-post-detail-surface .post-inline-tool .meta-icon,
.community-post-detail-surface .post-inline-tool svg {
    width: 13px;
    height: 13px;
    margin: 0;
}
.community-post-detail-surface .post-detail-divider {
    height: 1px;
    margin: .65rem 0 .8rem;
    background: var(--border-strong);
}
.community-post-detail-surface .post-body {
    margin: 0;
    font-size: .86rem;
    line-height: 1.65;
}
.community-post-detail-surface .post-footer-actions {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: auto;
    padding-top: 1rem;
}
.community-post-detail-surface .post-like-action {
    margin: 0;
}
.community-post-detail-surface .post-like-action .icon-count-button,
.community-post-detail-surface .post-like-action .icon-count-static {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-size: .76rem;
    color: var(--text);
}
.community-post-detail-surface .post-like-action .meta-icon {
    width: 15px;
    height: 15px;
    color: var(--accent-2);
}
.community-post-detail-surface .post-report-action {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: .74rem;
    list-style: none;
    cursor: pointer;
}
.community-post-detail-surface .post-report-action::-webkit-details-marker { display: none; }
.community-post-detail-surface .post-report-action .meta-icon {
    width: 14px;
    height: 14px;
    margin: 0;
    color: var(--accent-2);
}
.community-post-detail-surface > .comments {
    padding: 1.05rem 1.45rem 1rem;
}
.community-post-detail-surface .comments-title-icon {
    margin: 0 0 .55rem;
    width: auto;
    height: auto;
    justify-content: flex-start;
}
.community-post-detail-surface .comments-title-icon .meta-icon {
    width: 14px;
    height: 14px;
}
.community-post-detail-surface .comment-form {
    margin: 0 0 1.1rem;
}
.community-post-detail-surface .comment-compose-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem;
    gap: .9rem;
    align-items: end;
}
.community-post-detail-surface .comment-compose-row label {
    display: grid;
    gap: .4rem;
    font-size: .74rem;
}
.community-post-detail-surface .comment-compose-row textarea {
    width: 100%;
    min-height: 84px;
    margin: 0;
    font-size: .84rem;
}
.community-post-detail-surface .comment-send-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    width: 3.5rem;
    min-width: 3.5rem;
    min-height: 3.5rem;
    padding: .35rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-size: .58rem;
}
.community-post-detail-surface .comment-send-action .meta-icon {
    width: 20px;
    height: 20px;
    margin: 0;
}
.community-post-detail-surface .comment-list {
    border-top: 1px dashed var(--border-strong);
}
.community-post-detail-surface .comment {
    position: relative;
    padding: .95rem .15rem 2.35rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.community-post-detail-surface .comment + .comment {
    border-top: 1px dashed var(--border-strong);
}
.community-post-detail-surface .comment-meta {
    margin: 0 0 .55rem;
    font-size: .7rem;
}
.community-post-detail-surface .comment-body {
    margin: 0;
    font-size: .84rem;
    line-height: 1.55;
}
.community-post-detail-surface .comment-actions {
    position: absolute;
    right: .2rem;
    bottom: .7rem;
    display: flex;
    align-items: center;
    gap: .85rem;
}
.community-post-detail-surface .comment-actions form {
    display: inline-flex;
    margin: 0;
}
.community-post-detail-surface .comment-action-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font: inherit;
    font-size: .7rem;
    line-height: 1;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
}
.community-post-detail-surface .comment-action-link::-webkit-details-marker { display: none; }
.community-post-detail-surface .comment-action-link:hover { color: var(--text); }
.community-post-detail-surface .comment-action-link.is-active { color: var(--accent-2); }
.community-post-detail-surface .comment-action-link .meta-icon {
    width: 13px;
    height: 13px;
    margin: 0;
}
.community-post-detail-surface .comment-report {
    margin: 0;
}
.community-post-detail-surface .comment-report > form {
    position: absolute;
    right: 0;
    bottom: 1.8rem;
    z-index: 3;
    width: min(18rem, calc(100vw - 3rem));
    display: grid;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid var(--border-strong);
    border-radius: .65rem;
    background: var(--surface-elevated);
    box-shadow: var(--shadow-card);
}
.community-post-detail-surface .comment-owner-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    font-size: .7rem;
}
@media (max-width: 47.99rem) {
    .community-post-detail-surface > .post-detail,
    .community-post-detail-surface > .comments {
        padding-inline: 1rem;
    }
    .community-post-detail-surface .post-meta-toolbar {
        gap: .4rem .55rem;
    }
    .community-post-detail-surface .comment-compose-row {
        grid-template-columns: minmax(0, 1fr) 2.8rem;
        gap: .55rem;
    }
    .community-post-detail-surface .comment-send-action {
        width: 2.8rem;
        min-width: 2.8rem;
    }
    .community-post-detail-surface .comment-actions {
        gap: .55rem;
    }
}


/* ===== Community detail: solid icons + comment author avatar ===== */
.community-post-detail-surface .solid-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: currentColor;
}
.community-post-detail-surface .engagement-count .solid-icon,
.community-post-detail-surface .icon-action-button .solid-icon {
    width: 16px;
    height: 16px;
}
.community-post-detail-surface .icon-action-button {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
}
.community-post-detail-surface .icon-comment-submit {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
}
.community-post-detail-surface .icon-comment-submit .solid-icon {
    width: 18px;
    height: 18px;
}
.community-post-detail-surface .comments-title-compact .solid-icon {
    width: 17px;
    height: 17px;
}
.community-post-detail-surface .comment > .meta {
    display: flex;
    align-items: center;
    gap: 0;
}
.community-post-detail-surface .comment-author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-2), var(--accent), #2e9cff);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 24px;
}


/* ===== Solid icon correction v2 ===== */
.community-post-detail-surface .solid-icon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    margin: 0 !important;
}
.community-post-detail-surface .post-action-link .solid-icon,
.community-post-detail-surface .comment-action-link .solid-icon {
    width: 17px !important;
    height: 17px !important;
}
.community-post-detail-surface .comment-meta {
    display: flex;
    align-items: center;
    gap: .3rem;
}
.community-post-detail-surface .comment-author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-2), var(--accent), #2e9cff);
    color: #fff;
    font-size: .67rem;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 24px;
}


/* ===== Community detail: final icon baseline/alignment normalization ===== */

/* Every utility/action row uses one common vertical center line. */
.community-post-detail-surface .post-meta-actions,
.community-post-detail-surface .post-footer-actions,
.community-post-detail-surface .comment-footer-actions,
.community-post-detail-surface .compact-action-row,
.community-post-detail-surface .post-inline-actions,
.community-post-detail-surface .comment-inline-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: .65rem !important;
    line-height: 1 !important;
}

/* Normalize links, buttons, summaries, forms and count labels themselves. */
.community-post-detail-surface .post-action-link,
.community-post-detail-surface .comment-action-link,
.community-post-detail-surface .engagement-count,
.community-post-detail-surface .icon-action-button,
.community-post-detail-surface .compact-report > summary,
.community-post-detail-surface .post-meta-actions > *,
.community-post-detail-surface .post-footer-actions > *,
.community-post-detail-surface .comment-footer-actions > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Forms/details must not introduce their own baseline/height. */
.community-post-detail-surface .post-footer-actions form,
.community-post-detail-surface .comment-footer-actions form,
.community-post-detail-surface .compact-action-row form,
.community-post-detail-surface .post-footer-actions details,
.community-post-detail-surface .comment-footer-actions details,
.community-post-detail-surface .compact-report {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* All small solid icons share exactly the same box and baseline. */
.community-post-detail-surface .post-action-link .meta-icon,
.community-post-detail-surface .comment-action-link .meta-icon,
.community-post-detail-surface .engagement-count .meta-icon,
.community-post-detail-surface .icon-action-button .meta-icon,
.community-post-detail-surface .compact-report .meta-icon,
.community-post-detail-surface .comments-title-compact .meta-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
}

/* Icon + text controls use the same spacing and text baseline. */
.community-post-detail-surface .post-action-link,
.community-post-detail-surface .comment-action-link,
.community-post-detail-surface .engagement-count {
    gap: .28rem !important;
    min-height: 22px;
    padding: 0 !important;
    font-size: .75rem !important;
    color: var(--muted);
}

/* Like / report icon-only buttons use one common square. */
.community-post-detail-surface .icon-action-button,
.community-post-detail-surface .compact-report > summary.icon-action-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
}

/* The screenshot-style footer controls are text/icon utilities, so avoid
   circular button geometry there if a summary/link is being used inline. */
.community-post-detail-surface .post-footer-actions .compact-report > summary,
.community-post-detail-surface .comment-footer-actions .compact-report > summary {
    width: auto !important;
    min-width: 0 !important;
    height: 22px !important;
    min-height: 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Comment heading icon/count baseline. */
.community-post-detail-surface .comments-title-compact {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    line-height: 1 !important;
}

/* Comment author avatar and metadata also share one center line. */
.community-post-detail-surface .comment-meta {
    display: flex !important;
    align-items: center !important;
    min-height: 24px;
    line-height: 1.2 !important;
}
.community-post-detail-surface .comment-author-avatar {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Composer send icon is centered independently from text baseline. */
.community-post-detail-surface .comment-composer,
.community-post-detail-surface .comment-form-row {
    align-items: center !important;
}
.community-post-detail-surface .icon-comment-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.community-post-detail-surface .icon-comment-submit .meta-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}


/* ===== Locale/translation consistency refinements ===== */
.community-post-detail-surface .translation-controls.is-static,
.community-post-detail-surface .comment-action-link.is-static {
    opacity: .78;
    cursor: default;
}
.community-post-detail-surface .comment-send-action {
    min-width: 54px !important;
    min-height: 54px !important;
    padding: .45rem .5rem !important;
    gap: .2rem;
}
.community-post-detail-surface .comment-send-action .meta-icon {
    width: 20px !important;
    height: 20px !important;
}
.community-post-detail-surface .comment-send-action span {
    font-size: .68rem !important;
    line-height: 1 !important;
    font-weight: 700;
}


/* ===== Locale polish: membership / translate / send ===== */

/* Match Translate visually to Share in the post metadata row. */
.community-post-detail-surface .translation-controls.post-inline-tool,
.community-post-detail-surface .translation-controls.post-inline-tool.is-static,
.community-post-detail-surface .translation-controls.post-inline-tool a,
.community-post-detail-surface .translation-controls.post-inline-tool button,
.community-post-detail-surface .translation-controls.post-inline-tool span {
    font-size: .73rem !important;
    line-height: 1 !important;
}
.community-post-detail-surface .translation-controls.post-inline-tool,
.community-post-detail-surface .translation-controls.post-inline-tool a,
.community-post-detail-surface .translation-controls.post-inline-tool button {
    display: inline-flex !important;
    align-items: center !important;
    gap: .25rem !important;
    min-height: 22px !important;
    padding: 0 !important;
}
.community-post-detail-surface .translation-controls.post-inline-tool .meta-icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
}

/* Make the composer SEND control clearly larger than before. */
.community-post-detail-surface .comment-send-action {
    width: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    padding: .5rem !important;
    gap: .3rem !important;
}
.community-post-detail-surface .comment-send-action .meta-icon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
}
.community-post-detail-surface .comment-send-action span {
    font-size: .75rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}


/* ===== Community lightweight AJAX + modal feedback ===== */
.community-feedback-dialog {
    width: min(420px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    color: var(--text);
    background: var(--surface-elevated);
    box-shadow: 0 22px 70px rgb(0 0 0 / 48%);
}
.community-feedback-dialog::backdrop {
    background: rgb(0 0 0 / 62%);
    backdrop-filter: blur(3px);
}
.community-feedback-dialog-inner {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}
.community-feedback-dialog-message {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
}
.community-feedback-dialog [data-community-feedback-close] {
    justify-self: end;
    min-width: 72px;
    padding: .55rem .9rem;
}
.community-post-detail-surface form[data-community-ajax][data-busy="1"] {
    opacity: .68;
    pointer-events: none;
}


/* ===== Logged-out community actions ===== */
.community-post-detail-surface button[data-login-required] {
    font: inherit;
    cursor: pointer;
}
.community-post-detail-surface .icon-count-button.is-guest-action,
.community-post-detail-surface .comment-action-link.is-guest-action,
.community-post-detail-surface .guest-report-action {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    padding: 0;
}
.community-post-detail-surface button[data-login-required]:hover {
    color: var(--text);
}
.community-feedback-dialog-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .6rem;
}
.community-feedback-dialog-actions [data-community-feedback-login] {
    width: auto;
    min-width: 80px;
    text-decoration: none;
}

/* ===== Community create/edit form: fandom shell ===== */
.community-post-form-page{width:100%;max-width:none;margin:30px 0 3rem}
.community-post-form-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:0 0 1.25rem}
.community-post-form-heading .eyebrow,.community-post-form-heading h1{margin:0}
.community-post-form-heading h1{margin-top:.25rem;font-size:1.35rem}
.community-post-form-card{width:min(100%,1040px);margin:0 auto;padding:1.7rem 1.9rem;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.community-post-form-card form{display:grid;gap:1rem}
.community-post-form-card label{display:grid;gap:.45rem}
.community-post-form-card input[name="title"],.community-post-form-card input[type="url"],.community-post-form-card textarea{width:100%}
.community-post-form-card input[name="title"],.community-post-form-card input[type="url"],.community-post-form-card input[type="file"]{min-height:48px}
.community-post-form-card textarea[name="body"]{min-height:240px;resize:vertical}
.community-post-form-card .translation-save{padding:1rem 1.1rem;border:1px solid var(--border);border-radius:14px}
.community-post-form-card .translation-save label{display:flex;align-items:center;gap:.5rem}
.community-post-form-card form>.button{width:100%;min-height:48px}
@media(max-width:760px){.community-post-form-heading{align-items:flex-start}.community-post-form-card{padding:1.15rem;border-radius:14px}.community-post-form-card textarea[name="body"]{min-height:200px}}


/* ===== Post media sizing / edit-form management ===== */

/* Never visually upscale an attached image above its stored intrinsic width. */
.community-post-detail-surface .image-gallery {
    display: grid;
    justify-items: start;
}
.community-post-detail-surface .image-gallery figure {
    width: auto;
    max-width: 100%;
}
.community-post-detail-surface .image-gallery img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Existing media belongs in create/edit, not the read-only detail view. */
.post-form-existing-media {
    display: grid;
    gap: .65rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
}
.post-form-existing-media h2 {
    margin: 0 0 .25rem;
    font-size: .95rem;
}
.post-form-media-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .55rem 0;
    border-top: 1px solid var(--border);
}
.post-form-media-row:first-of-type { border-top: 0; }
.post-form-media-row img {
    width: auto;
    max-width: 160px;
    max-height: 100px;
    height: auto;
    object-fit: contain;
}
.post-form-media-row a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rights-confirm-label {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: .5rem !important;
}
.rights-confirm-label input { width: auto !important; }

.post-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .7rem;
    margin-top: .25rem;
}
.post-form-actions .button,
.post-form-actions .button-secondary {
    width: auto !important;
    min-width: 110px;
    min-height: 44px;
}

/* Edit/Delete: same visual family, grouped at the right. */
.community-post-detail-surface .post-owner-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
}
.community-post-detail-surface .post-owner-actions form {
    margin: 0;
}
.community-post-detail-surface .post-owner-actions .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 36px;
    padding: .45rem .75rem;
    text-decoration: none;
}

@media (max-width: 760px) {
    .post-form-media-row { align-items: flex-start; }
    .post-form-media-row img { max-width: 110px; }
    .post-form-actions { justify-content: stretch; }
    .post-form-actions .button,
    .post-form-actions .button-secondary { flex: 1 1 0; }
}


/* ===== Post embedded video max width ===== */
.community-post-detail-surface .embeds,
.community-post-detail-surface .post-media .embeds {
    justify-items: start;
}
.community-post-detail-surface .embeds iframe,
.community-post-detail-surface .embeds video,
.community-post-detail-surface .post-media iframe,
.community-post-detail-surface .post-media video {
    display: block;
    width: 100%;
    max-width: 600px !important;
    height: auto;
}
.community-post-detail-surface .embeds iframe {
    aspect-ratio: 16 / 9;
}

/* ===== Post save/translation loading overlay ===== */
.post-save-loading[hidden] { display: none !important; }
.post-save-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(2 5 16 / 72%);
    backdrop-filter: blur(4px);
}
.post-save-loading-card {
    display: grid;
    justify-items: center;
    gap: .75rem;
    width: min(360px, calc(100vw - 2rem));
    padding: 1.5rem 1.35rem;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface-elevated);
    box-shadow: 0 24px 80px rgb(0 0 0 / 46%);
    text-align: center;
}
.post-save-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgb(255 255 255 / 18%);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: post-save-spin .8s linear infinite;
}
.post-save-loading-card strong {
    font-size: .95rem;
}
.post-save-loading-detail {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45;
}
@keyframes post-save-spin { to { transform: rotate(360deg); } }


/* ===== Final community detail/editor consistency ===== */

/* Prevent the global layout flash from appearing above the Hero; JS moves
   its text into the page feedback modal. */
#main-content:has(.community-post-detail-shell) > .flash-success {
    visibility: hidden;
}

/* Header meta: author at left; Share + saved-language switcher at right. */
.community-post-detail-surface .post-meta-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: .8rem !important;
    flex-wrap: wrap;
}
.community-post-detail-surface .post-author-meta {
    margin-right: auto !important;
}
.community-post-detail-surface .post-meta-tools {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
}
.community-post-detail-surface .translation-locale-switcher,
.community-post-detail-surface .comment-translation-switcher {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 22px;
    font-size: .73rem;
    line-height: 1;
    color: var(--muted);
}
.community-post-detail-surface .translation-locale-switcher .meta-icon,
.community-post-detail-surface .comment-translation-switcher .meta-icon {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
}
.community-post-detail-surface .translation-locale-switcher a,
.community-post-detail-surface .comment-translation-switcher a {
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}
.community-post-detail-surface .translation-locale-switcher a:hover,
.community-post-detail-surface .translation-locale-switcher a[aria-current="true"],
.community-post-detail-surface .comment-translation-switcher a:hover,
.community-post-detail-surface .comment-translation-switcher a[aria-current="true"] {
    color: var(--text);
    font-weight: 700;
}
.community-post-detail-surface .translation-locale-divider {
    opacity: .45;
}

/* Post read-page navigation/actions: one right-aligned family. */
.community-post-detail-surface .post-detail-nav-actions,
.community-post-detail-surface .post-detail-page-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
}
.community-post-detail-surface .post-detail-nav-actions {
    margin-top: 1rem;
}
.community-post-detail-surface .post-detail-page-nav {
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--border);
}
.community-post-detail-surface .post-detail-nav-actions form {
    margin: 0;
}
.community-post-detail-surface .post-detail-nav-actions .button,
.community-post-detail-surface .post-detail-nav-actions .button-secondary,
.community-post-detail-surface .post-detail-page-nav .button,
.community-post-detail-surface .post-detail-page-nav .button-secondary {
    width: auto !important;
    min-width: 82px;
    min-height: 36px;
    padding: .45rem .75rem;
}

/* Comment translation target selection below composer. */
.community-post-detail-surface .comment-translation-targets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: .6rem;
    color: var(--muted);
    font-size: .76rem;
}
.community-post-detail-surface .comment-translation-targets > span {
    display: inline-flex;
    align-items: center;
}
.community-post-detail-surface .comment-translation-targets label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
}
.community-post-detail-surface .comment-translation-targets input {
    width: auto;
    margin: 0;
}
.community-post-detail-surface .comment-form.is-submitting {
    opacity: .72;
    pointer-events: none;
}
.community-post-detail-surface .comment-form.is-submitting .comment-send-action .meta-icon {
    animation: post-save-spin .8s linear infinite;
}

/* Comment owner Edit/Delete now share the same visual geometry. */
.community-post-detail-surface .comment-owner-actions {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: .45rem;
    margin-top: .55rem;
}
.community-post-detail-surface .comment-owner-actions > form {
    margin: 0;
}
.community-post-detail-surface .comment-owner-actions summary.button-secondary,
.community-post-detail-surface .comment-owner-actions button.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 68px;
    min-height: 32px;
    padding: .35rem .65rem;
    list-style: none;
    font-size: .76rem;
    cursor: pointer;
}
.community-post-detail-surface .comment-owner-actions summary.button-secondary::-webkit-details-marker {
    display: none;
}
.community-post-detail-surface .comment-edit-control[open] {
    flex: 1 1 100%;
}
.community-post-detail-surface .comment-edit-control[open] > form {
    display: grid;
    gap: .55rem;
    margin-top: .55rem;
}
.community-post-detail-surface .comment-edit-control[open] textarea {
    width: 100%;
    min-height: 90px;
}

/* Existing-media section is now outside the main save form: nested forms
   were invalid HTML and were the reason Edit > Save could stop working. */
.community-post-form-card .post-main-form {
    display: grid;
    gap: 1rem;
}
.community-post-form-card .post-form-existing-media {
    margin-bottom: 1rem;
}

@media (max-width: 700px) {
    .community-post-detail-surface .post-meta-toolbar {
        align-items: flex-start !important;
    }
    .community-post-detail-surface .post-meta-tools {
        flex: 1 0 100%;
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .community-post-detail-surface .post-detail-nav-actions,
    .community-post-detail-surface .post-detail-page-nav {
        justify-content: flex-end;
    }
}

/* ===== Repaired integrated community UI ===== */
.fandom-nav { padding-left: 10px !important; }

.community-feed-card-link { cursor: pointer; }
.community-feed-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.community-feed-author-meta { margin-bottom: .35rem; }
.community-feed-engagement {
    display:flex;align-items:center;gap:.85rem;width:100%;
    font-size:.82rem;color:var(--muted);
}
.community-feed-engagement>span{display:inline-flex;align-items:center;gap:.28rem}

.community-post-detail-surface [data-post-display-title]{
    font-size:clamp(1.12rem,1.4vw,1.38rem)!important;line-height:1.35!important
}
[data-post-display-body],[data-comment-display-body]{white-space:pre-line}

.translation-locale-button{
    border:0;background:transparent;padding:0;color:var(--muted);font:inherit;cursor:pointer
}
.translation-locale-button:hover,.translation-locale-button.is-active,
.translation-locale-button[aria-current="true"]{color:var(--text);font-weight:700}

.comment-actions{display:flex!important;align-items:center!important;gap:.65rem!important;width:100%}
.comment-translation-switcher{margin-right:auto}
.comment-engagement-actions{margin-left:auto}

.community-post-detail-surface .embeds figure,
.community-post-detail-surface .post-video figure{
    width:min(100%,600px)!important;max-width:600px!important;margin:0
}
.community-post-detail-surface .embeds iframe,
.community-post-detail-surface .post-video iframe{
    display:block;width:100%!important;max-width:600px!important;
    aspect-ratio:16/9!important;height:auto!important;border:0
}
.community-feedback-dialog [data-community-feedback-login][hidden]{display:none!important}


/* ===== 2026-09-09 compact controls / feed pagination / media ratios ===== */
@media (min-width: 48rem) {
    .fandom-hero.fandom-hero-v2::before {
        background:
            linear-gradient(90deg,
                rgb(4 7 19 / 97%) 0%,
                rgb(4 7 19 / 96%) 28%,
                rgb(4 7 19 / 92%) 40%,
                rgb(4 7 19 / 82%) 52%,
                rgb(4 7 19 / 64%) 64%,
                rgb(4 7 19 / 42%) 76%,
                rgb(4 7 19 / 18%) 90%,
                transparent 100%),
            linear-gradient(0deg, rgb(4 7 19 / 52%), transparent 58%);
    }
}

.community-post-detail-surface .post-detail-nav-actions .button,
.community-post-detail-surface .post-detail-nav-actions .button-secondary,
.community-post-detail-surface .post-detail-page-nav .button,
.community-post-detail-surface .post-detail-page-nav .button-secondary {
    min-width: 66px !important;
    min-height: 29px !important;
    padding: .34rem .60rem !important;
    font-size: .80em !important;
}

.community-post-detail-surface .comment-action-link,
.community-post-detail-surface .comment-owner-actions summary.button-secondary,
.community-post-detail-surface .comment-owner-actions button.button-secondary,
.community-post-detail-surface .comment-translation-switcher {
    font-size: .80em !important;
}
.community-post-detail-surface .comment-owner-actions summary.button-secondary,
.community-post-detail-surface .comment-owner-actions button.button-secondary {
    min-width: 54px !important;
    min-height: 26px !important;
    padding: .27rem .52rem !important;
}

.community-post-detail-surface .embeds figure,
.community-post-detail-surface .post-video figure {
    width: min(100%, 600px) !important;
    max-width: 600px !important;
}
.community-post-detail-surface .embeds figure.media-ratio-landscape iframe,
.community-post-detail-surface .post-video figure iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
}
.community-post-detail-surface .embeds figure.media-ratio-portrait {
    width: min(100%, 337.5px) !important;
    max-width: 337.5px !important;
}
.community-post-detail-surface .embeds figure.media-ratio-portrait iframe {
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    min-height: 0 !important;
}

.pagination-pages {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .35rem;
}
.pagination-pages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    min-height: 2.15rem;
    padding: .35rem .55rem;
}
.pagination-pages a.is-current,
.pagination-pages a[aria-current="page"] {
    border-color: var(--accent);
    color: var(--text);
    background: rgb(124 58 237 / 18%);
}
.pagination-mobile { display: none; }

@media (max-width: 47.99rem) {
    .fandom-nav { padding-left: 0 !important; }

    .community-feed-heading-actions {
        font-size: 70% !important;
        gap: .35rem !important;
    }
    .community-feed-heading-actions .community-write-top {
        min-height: 0 !important;
        padding: .38rem .58rem !important;
        font-size: 1em !important;
    }

    .pagination-desktop { display: none !important; }
    .pagination-mobile { display: flex !important; }
    .pagination-pages a {
        min-width: 1.95rem;
        min-height: 1.95rem;
        padding: .3rem .45rem;
        font-size: .82rem;
    }
}


/* ===== 2026-09-09 post-view TOP "Back to list" only: 70% ===== */
.community-post-detail-heading > .button-secondary,
.community-post-detail-heading > .button {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: .42rem .72rem !important;
    font-size: 70% !important;
    line-height: 1.2 !important;
}


/* ===== 2026-09-09 community "Write post" button text ===== */
.community-write-top,
.community-write-bottom {
    color: #fff !important;
}
.community-write-top:hover,
.community-write-top:focus,
.community-write-bottom:hover,
.community-write-bottom:focus {
    color: #fff !important;
}


/* ===== 2026-09-09 community Write post buttons: +10% ===== */
.community-write-top,
.community-write-bottom {
    font-size: 110% !important;
}

/* Top button keeps its mobile 70% treatment, then grows 10% => 77% of desktop base. */
@media (max-width: 47.99rem) {
    .community-feed-heading-actions .community-write-top {
        font-size: 1.10em !important;
        padding: .42rem .64rem !important;
    }
}


/* ===== 2026-09-09 POST VIEW: unify ALL buttons at +10% from current =====
   Applies only inside the post-view detail surface/dialog.
   Previous per-button reductions are overridden here so the visible controls
   use one consistent scale. */
.community-post-detail-surface a.button,
.community-post-detail-surface a.button-secondary,
.community-post-detail-surface button.button,
.community-post-detail-surface button.button-secondary,
.community-post-detail-surface button.comment-action-link,
.community-post-detail-surface button.comment-send-action,
.community-post-detail-surface button.translation-locale-button,
.community-post-detail-surface .share-controls button,
.community-post-detail-surface details > summary.comment-action-link,
.community-post-detail-surface details > summary.button-secondary,
.community-post-detail-surface .report-form button,
.community-post-detail-surface .comment-form button,
.community-feedback-dialog button,
.community-feedback-dialog a.button,
.community-feedback-dialog a.button-secondary {
    font-size: 110% !important;
}

/* Standard action-button geometry: 10% larger than the current compact set. */
.community-post-detail-surface .post-detail-heading > .button,
.community-post-detail-surface .post-detail-heading > .button-secondary,
.community-post-detail-surface .post-detail-nav-actions .button,
.community-post-detail-surface .post-detail-nav-actions .button-secondary,
.community-post-detail-surface .post-detail-page-nav .button,
.community-post-detail-surface .post-detail-page-nav .button-secondary,
.community-post-detail-surface .comment-owner-actions summary.button-secondary,
.community-post-detail-surface .comment-owner-actions button.button-secondary {
    transform: none !important;
    min-height: 32px !important;
    padding: .38rem .66rem !important;
}

/* The top Back-to-list button had a separate 70% override; cancel it so it
   follows the same +10% scale as the other post-view buttons. */
.community-post-detail-heading > .button-secondary,
.community-post-detail-heading > .button {
    font-size: 110% !important;
    min-height: 32px !important;
    padding: .38rem .66rem !important;
    line-height: 1.2 !important;
}

/* Keep icon controls proportional to the unified button scale. */
.community-post-detail-surface .comment-action-link .meta-icon,
.community-post-detail-surface .translation-locale-button .meta-icon,
.community-post-detail-surface .share-controls button .meta-icon {
    width: 1rem !important;
    height: 1rem !important;
}


/* ===== 2026-09-09 post-view final button adjustments ===== */

/* Top "Back to list" only: reduce to 80% of its current unified size. */
.community-post-detail-heading > .button-secondary,
.community-post-detail-heading > .button {
    font-size: 88% !important; /* 110% current scale × 80% */
    min-height: 26px !important;
    padding: .30rem .53rem !important;
    line-height: 1.2 !important;
}

/* Bottom Write post button: always white text. */
.community-post-detail-surface .post-detail-page-nav a.button,
.community-post-detail-surface .post-detail-page-nav a.button:visited,
.community-post-detail-surface .post-detail-page-nav a.button:hover,
.community-post-detail-surface .post-detail-page-nav a.button:focus {
    color: #fff !important;
}


/* ===== 2026-09-09 comment controls final sizing/placement ===== */

/* Comment Like / Report: restore original action size. */
.community-post-detail-surface .comment-actions > form .comment-action-link,
.community-post-detail-surface .comment-actions > details > summary.comment-action-link,
.community-post-detail-surface .comment-actions > .comment-action-link {
    font-size: 1em !important;
}
.community-post-detail-surface .comment-actions > form .comment-action-link .meta-icon,
.community-post-detail-surface .comment-actions > details > summary.comment-action-link .meta-icon,
.community-post-detail-surface .comment-actions > .comment-action-link .meta-icon {
    width: 1rem !important;
    height: 1rem !important;
}

/* Saved comment translation languages: directly under each comment body. */
.community-post-detail-surface .comment-content-translations {
    display: flex;
    align-items: center;
    margin-top: .45rem;
    margin-bottom: .45rem;
}
.community-post-detail-surface .comment-content-translations .comment-translation-switcher {
    display: inline-flex;
    align-items: center;
    gap: .30rem;
    margin: 0 !important;
}

/* Mobile translation selectors: restore original size. */
@media (max-width: 47.99rem) {
    .community-post-detail-surface .translation-locale-switcher,
    .community-post-detail-surface .comment-translation-switcher,
    .community-post-detail-surface .translation-locale-button,
    .community-post-detail-surface .comment-translation-switcher .comment-action-link {
        font-size: 1em !important;
    }
    .community-post-detail-surface .translation-locale-switcher .meta-icon,
    .community-post-detail-surface .comment-translation-switcher .meta-icon {
        width: 1rem !important;
        height: 1rem !important;
    }
}


/* ===== 2026-09-09 compact flag translation + AJAX comments ===== */
.community-post-detail-surface .translation-locale-switcher,
.community-post-detail-surface .comment-translation-switcher {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    gap: .18rem !important;
}
.community-post-detail-surface .translation-locale-button,
.community-post-detail-surface .comment-translation-switcher .translation-locale-button {
    width: 1.75rem !important;
    min-width: 1.75rem !important;
    height: 1.65rem !important;
    min-height: 1.65rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1rem !important;
    line-height: 1 !important;
}
.community-post-detail-surface .translation-locale-divider {
    font-size: .72rem;
    opacity: .55;
}

.community-post-detail-surface .comment-global-translation-box {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
    box-sizing: border-box;
    margin: .8rem 0 .45rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border, #29344d);
    border-radius: .65rem;
    background: rgba(255,255,255,.025);
}
.community-post-detail-surface .comment-global-translation-label {
    display: inline-flex;
    align-items: center;
    margin-right: .1rem;
}
.community-post-detail-surface .comment-global-locale-button {
    width: 1.9rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .45rem;
    background: transparent;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.community-post-detail-surface .comment-global-locale-button:hover,
.community-post-detail-surface .comment-global-locale-button.is-active {
    border-color: var(--accent, #8b5cf6);
    background: rgba(139,92,246,.14);
}
.community-post-detail-surface[data-comment-page-busy="1"] [data-comment-list] {
    opacity: .55;
    pointer-events: none;
}

/* Community LIST page: only the upper Write-post button is 80% of current size. */
.community-feed-heading-actions .community-write-top {
    font-size: 80% !important;
    padding: .8em 1.05em !important;
}

/* Keep compact translation controls on one line on mobile too. */
@media (max-width: 47.99rem) {
    .community-post-detail-surface .post-meta-tools {
        max-width: 100%;
    }
    .community-post-detail-surface .translation-locale-switcher,
    .community-post-detail-surface .comment-translation-switcher {
        max-width: 100%;
        flex-wrap: nowrap !important;
    }
    .community-post-detail-surface .translation-locale-button,
    .community-post-detail-surface .comment-translation-switcher .translation-locale-button {
        width: 1.65rem !important;
        min-width: 1.65rem !important;
        height: 1.55rem !important;
        min-height: 1.55rem !important;
        font-size: .95rem !important;
    }
}


/* ===== 2026-09-09 mobile post-header tools layout ===== */
@media (max-width: 47.99rem) {
    .community-post-detail-surface .post-meta-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    /* Author line occupies the first row. */
    .community-post-detail-surface .post-author-meta {
        flex: 1 0 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* Share + language selector move to the next row. */
    .community-post-detail-surface .post-meta-tools {
        display: flex !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .5rem !important;
    }

    /* Share stays left. */
    .community-post-detail-surface .post-meta-tools .share-controls {
        margin-right: auto !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    /* Language flags stay right. */
    .community-post-detail-surface .post-meta-tools .translation-locale-switcher {
        margin-left: auto !important;
        margin-right: 0 !important;
        justify-content: flex-end !important;
        text-align: right !important;
        flex-wrap: nowrap !important;
    }
}


/* ===== 2026-09-09 PC translation size + comment edit translations ===== */

/* On desktop, make the post translation control the same typographic scale
   as the neighboring Share control. */
@media (min-width: 48rem) {
    .community-post-detail-surface .post-meta-tools .share-controls,
    .community-post-detail-surface .post-meta-tools .share-controls button,
    .community-post-detail-surface .post-meta-tools .translation-locale-switcher,
    .community-post-detail-surface .post-meta-tools .translation-locale-button {
        font-size: .82rem !important;
        line-height: 1 !important;
    }
    .community-post-detail-surface .post-meta-tools .translation-locale-button {
        /* TRANSLATION-V1.1 -- was a fixed 1.9rem square box sized for a
           single flag emoji; a real text code ("ZH-CN") no longer fits
           that box, which is the root cause of the oversized/overlapping
           post selector. Auto width + small padding matches the Share
           control's own (also auto-sized) button geometry instead. */
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: .3rem .5rem !important;
    }
}

.community-post-detail-surface .comment-edit-translation-targets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    margin: .5rem 0;
    color: var(--muted);
    font-size: .76rem;
}
.community-post-detail-surface .comment-edit-translation-targets > span {
    display: inline-flex;
    align-items: center;
}
.community-post-detail-surface .comment-edit-translation-targets label {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
}
.community-post-detail-surface .comment-edit-translation-targets input {
    width: auto;
    margin: 0;
}


/* ===== TRANSLATION-V1.1 -- post-header locale codes, Share-tier size =====
   These two blocks used to blow the post selector up to 1.22rem/1.40rem
   with a large fixed box (originally sized to make a single flag emoji
   easy to tap) -- exactly why it read as close to the post title's size
   instead of the neighboring Share control. Reduced to the same .82rem
   utility-text tier as Share, auto width, small padding. Scoped only
   through .post-translation-selector (added to the post-level switcher's
   own <nav>), so the per-comment/"translate all comments" selectors --
   which the user has confirmed already look correct -- are untouched. */
@media (min-width: 48rem) {
    .community-post-detail-surface
    .post-meta-tools
    .post-translation-selector
    > .translation-locale-button {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: .3rem .5rem !important;
        font-size: .82rem !important;
        line-height: 1 !important;
        font-weight: 600 !important;
    }

    .community-post-detail-surface
    .post-meta-tools
    .post-translation-selector
    .translation-locale-divider {
        font-size: .82rem !important;
    }

    .community-post-detail-surface
    .post-meta-tools
    .post-translation-selector
    > .meta-icon {
        width: 14px !important;
        height: 14px !important;
        flex: 0 0 14px !important;
    }
}

@media (min-width: 48rem) {
    .community-post-detail-surface .post-meta-tools
    .post-translation-selector > button.translation-locale-button {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        font-size: .82rem !important;
        line-height: 1 !important;
        padding: .3rem .5rem !important;
        font-weight: 600 !important;
    }
    .community-post-detail-surface .post-meta-tools
    .post-translation-selector > button.translation-locale-button.is-active,
    .community-post-detail-surface .post-meta-tools
    .post-translation-selector > button.translation-locale-button[aria-current="true"] {
        font-weight: 700 !important;
        color: var(--text) !important;
        background: rgba(139, 92, 246, .14);
        border-radius: .3rem;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }
}

/* Shared browser-translation cache: all locale flags remain visible; a
   missing server cache can be filled by supported desktop Chrome. */
.community-post-detail-surface .translation-locale-button:disabled {
    opacity: .55;
    cursor: wait;
}


/* ===== 2026-09-09 single comment translation control ===== */
.community-post-detail-surface .comment-content-translations,
.community-post-detail-surface .comment .comment-translation-switcher {
    display: none !important;
}

.community-post-detail-surface .comment-global-translation-box {
    display: flex !important;
    align-items: center;
    gap: .38rem;
    margin: .85rem 0 .55rem;
}

.community-post-detail-surface .comment-global-locale-button {
    width: 2rem;
    height: 1.85rem;
    font-size: 1.08rem;
}


/* ===== 2026-09-09 comment composer / comment list divider ===== */
.community-post-detail-surface .comment-global-translation-box {
    border-top: 2px solid rgba(148, 163, 184, 0.42);
    padding-top: 16px;
    margin-top: 18px;
}


/* ===== 2026-09-09 centered global comment translation ===== */
.community-post-detail-surface .comment-global-translation-wrap {
    border-top: 2px solid rgba(148, 163, 184, 0.42);
    margin-top: 18px;
    padding-top: 14px;
    text-align: center;
}

.community-post-detail-surface .comment-global-translation-title {
    margin: 0 0 7px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--text, #f8fafc);
}

.community-post-detail-surface .comment-global-translation-wrap .comment-global-translation-box {
    justify-content: center !important;
    border-top: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
}


/* ===== Global user feedback modal ===== */
.global-feedback-dialog {
    width: min(440px, calc(100vw - 32px));
    max-width: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text, #f8fafc);
}
.global-feedback-dialog::backdrop {
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(3px);
}
.global-feedback-dialog-inner {
    background: #121a33;
    border: 1px solid #3a4768;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.global-feedback-dialog-message {
    margin: 0 0 20px;
    line-height: 1.6;
}
.global-feedback-dialog-actions {
    display: flex;
    justify-content: flex-end;
}


/* Global membership-required modal actions */
.global-feedback-dialog-actions {
    gap: 10px;
    align-items: center;
}


/* ===== Login form secondary register action ===== */
.auth-login-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}
.auth-login-actions .button,
.auth-login-actions .button-secondary {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 520px) {
    .auth-login-actions {
        grid-template-columns: 1fr;
    }
}


/* ===== 24h Music Talk membership-gated composer ===== */
.listening-room-chat-gate textarea[readonly] {
    cursor: pointer;
    opacity: .82;
}
.listening-room-chat-gate .button {
    cursor: pointer;
}

/* ===== Music Talk desktop chat height fix ===== */
@media (min-width: 64rem) {
    .listening-room-layout {
        align-items: stretch;
    }

    .listening-room-layout > .listening-room-page,
    .listening-room-layout > .listening-room-chat-section {
        height: auto;
    }

    .listening-room-chat-section {
        display: flex;
        flex-direction: column;
    }

    .listening-room-chat-section .listening-room-chat {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .listening-room-chat-section .listening-room-chat-list {
        flex: 1 1 auto;
        max-height: none;
        min-height: 24rem;
        overflow-y: auto;
    }
}

/* ===== Music Talk desktop chat height fix ===== */
@media (min-width: 64rem) {
    .listening-room-layout {
        align-items: stretch;
    }

    .listening-room-layout > .listening-room-page,
    .listening-room-layout > .listening-room-chat-section {
        height: auto;
    }

    .listening-room-chat-section {
        display: flex;
        flex-direction: column;
    }

    .listening-room-chat-section .listening-room-chat {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .listening-room-chat-section .listening-room-chat-list {
        flex: 1 1 auto;
        max-height: none;
        min-height: 24rem;
        overflow-y: auto;
    }
}

/* ===== Music Talk chat fixed height ===== */

/* PC */
@media (min-width: 64rem) {
    .listening-room-chat-section {
        height: 600px;
    }

    .listening-room-chat-section .listening-room-chat {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    .listening-room-chat-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .listening-room-chat-form {
        flex: 0 0 auto;
    }
}

/* Tablet / Mobile */
@media (max-width: 63.99rem) {
    .listening-room-chat-section {
        height: 420px;
    }

    .listening-room-chat-section .listening-room-chat {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    .listening-room-chat-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .listening-room-chat-form {
        flex: 0 0 auto;
    }
}

/* ===== Music Talk chat final fixed height override ===== */

/* PC */
@media (min-width: 64rem) {
    .listening-room-layout > .listening-room-chat-section {
        height: 600px;
        min-height: 600px;
        max-height: 600px;
        box-sizing: border-box;
    }

    .listening-room-chat-section > .listening-room-chat {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .listening-room-chat-section .listening-room-chat-list {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .listening-room-chat-section .listening-room-chat-form {
        flex: 0 0 auto;
    }
}

/* Mobile / Tablet */
@media (max-width: 63.99rem) {
    .listening-room-layout > .listening-room-chat-section {
        height: 420px;
        min-height: 420px;
        max-height: 420px;
        box-sizing: border-box;
    }

    .listening-room-chat-section > .listening-room-chat {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .listening-room-chat-section .listening-room-chat-list {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .listening-room-chat-section .listening-room-chat-form {
        flex: 0 0 auto;
    }
}

/* ===== Music Talk chat height final ===== */

/* PC */
@media (min-width: 64rem) {
    .listening-room-layout > .listening-room-chat-section {
        height: 750px;
        min-height: 750px;
        max-height: 750px;
    }
}

/* Tablet / Mobile */
@media (max-width: 63.99rem) {
    .listening-room-layout > .listening-room-chat-section {
        height: 560px;
        min-height: 560px;
        max-height: 560px;
    }
}

/* 작은 휴대폰 */
@media (max-width: 30rem) {
    .listening-room-layout > .listening-room-chat-section {
        height: 500px;
        min-height: 500px;
        max-height: 500px;
    }
}

/* Music Talk chat - mobile height adjustment */
@media (max-width: 63.99rem) {
    .listening-room-layout > .listening-room-chat-section {
        height: 600px;
        min-height: 600px;
        max-height: 600px;
    }
}

@media (max-width: 30rem) {
    .listening-room-layout > .listening-room-chat-section {
        height: 540px;
        min-height: 540px;
        max-height: 540px;
    }
}

/* ===== Music Talk chat track context ===== */

.chat-bubble {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chat-track-context {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 600;
    opacity: 0.68;
}

.chat-message-text {
    display: block;
    width: 100%;
}

/* V1 feature heroes: Ranking / Vote / Battle / Awards / 24h Music Talk */
.hero.page-heading.feature-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(18rem, 28vw, 21rem);
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid rgb(150 162 214 / 14%);
    border-radius: 1.35rem;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(100deg, rgb(4 6 19 / 88%) 0%, rgb(4 6 19 / 72%) 42%, rgb(4 6 19 / 38%) 72%, rgb(4 6 19 / 18%) 100%),
        radial-gradient(42rem 24rem at 12% -10%, rgb(119 86 255 / 18%), transparent 62%),
        #090e1d;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 1.25rem 2.75rem rgb(0 0 0 / 24%);
}

.hero.page-heading.feature-hero::before,
.hero.page-heading.feature-hero::after {
    display: none;
}

.hero.page-heading.feature-hero .eyebrow,
.hero.page-heading.feature-hero h1,
.hero.page-heading.feature-hero .hero-copy {
    position: relative;
    z-index: 1;
}

.hero.page-heading.feature-hero .eyebrow {
    margin-bottom: .6rem;
    color: #d9dcf3;
}

.hero.page-heading.feature-hero h1 {
    max-width: 22ch;
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 3.3vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: -.045em;
    text-shadow: 0 2px 12px rgb(0 0 0 / 30%);
}

.hero.page-heading.feature-hero .hero-copy {
    max-width: 38rem;
    margin-top: 1rem;
    color: #d7dced;
    font-size: clamp(.96rem, 1.4vw, 1.08rem);
    line-height: 1.65;
    text-shadow: 0 1px 8px rgb(0 0 0 / 28%);
}

/* Image slots: add one URL at a time after each approved image is uploaded. */
.feature-hero-ranking { }
.feature-hero-vote { }
.feature-hero-battle { }
.feature-hero-awards { }
.feature-hero-music { }

@media (max-width: 40rem) {
    .hero.page-heading.feature-hero {
        min-height: 15rem;
        padding: 1.5rem;
        border-radius: 1rem;
        justify-content: flex-end;
        background-position: center;
    }

    .hero.page-heading.feature-hero h1 {
        font-size: clamp(1.55rem, 8vw, 2.05rem);
    }

    .hero.page-heading.feature-hero .hero-copy {
        margin-top: .75rem;
        font-size: .93rem;
        line-height: 1.55;
    }
}

/* Legal pages: Terms / Privacy */
.legal-page .community-feed-heading {
    margin-bottom: 1.25rem !important;
}

.legal-page .community-feed-heading h1 {
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    line-height: 1.25;
    letter-spacing: -.035em;
}

.legal-page .community-feed-heading .eyebrow {
    margin-bottom: .55rem;
    font-size: .76rem;
}

.legal-document {
    padding: clamp(1.35rem, 2.8vw, 2.25rem);
}

.legal-document > p {
    margin: 0 0 1.25rem;
    font-size: .94rem;
    line-height: 1.75;
}

.legal-section {
    margin-top: 1.7rem;
}

.legal-section:first-of-type {
    margin-top: 0;
}

.legal-section h2 {
    margin: 0 0 .85rem;
    font-size: clamp(1.08rem, 1.6vw, 1.3rem);
    line-height: 1.35;
    letter-spacing: -.025em;
}

.legal-section p {
    margin: 0 0 .72rem;
    font-size: .94rem;
    line-height: 1.75;
}

.legal-section ul,
.legal-section ol {
    margin: .65rem 0 .9rem;
    padding-left: 1.4rem;
}

.legal-section li {
    margin: .28rem 0;
    font-size: .94rem;
    line-height: 1.65;
}

@media (max-width: 40rem) {
    .legal-document {
        padding: 1.1rem;
    }

    .legal-page .community-feed-heading h1 {
        font-size: 1.5rem;
    }

    .legal-section {
        margin-top: 1.45rem;
    }

    .legal-section h2 {
        font-size: 1.08rem;
    }

    .legal-document > p,
    .legal-section p,
    .legal-section li {
        font-size: .9rem;
    }
}

/* Legal document reading width */
.legal-document > * {
    max-width: 70rem;
}

/* V1 feature hero approved backgrounds */
.hero.page-heading.feature-hero-ranking {
    background-image:
        linear-gradient(100deg, rgb(4 6 19 / 55%), rgb(4 6 19 / 38%)),
        url('/assets/images/hero/herobg_ranking.jpg');
}

.hero.page-heading.feature-hero-vote {
    background-image:
        linear-gradient(100deg, rgb(4 6 19 / 55%), rgb(4 6 19 / 38%)),
        url('/assets/images/hero/herobg_vote.jpg');
}

.hero.page-heading.feature-hero-battle {
    background-image:
        linear-gradient(100deg, rgb(4 6 19 / 55%), rgb(4 6 19 / 38%)),
        url('/assets/images/hero/herobg_battle.jpg');
}

.hero.page-heading.feature-hero-awards {
    background-image:
        linear-gradient(100deg, rgb(4 6 19 / 55%), rgb(4 6 19 / 38%)),
        url('/assets/images/hero/herobg_awards.jpg');
}

.hero.page-heading.feature-hero-music {
    background-image:
        linear-gradient(100deg, rgb(4 6 19 / 55%), rgb(4 6 19 / 38%)),
        url('/assets/images/hero/herobg_music.jpg');
}

/* V1 feature hero text spacing */
.hero.page-heading.feature-hero .eyebrow {
    margin-bottom: 15px;
}

.hero.page-heading.feature-hero h1 {
    margin-bottom: 0;
}

.hero.page-heading.feature-hero .hero-copy {
    margin-top: .5rem;
}

/* V1 feature hero compact sizing + text spacing */
.hero.page-heading.feature-hero {
    min-height: clamp(12.6rem, 19.6vw, 14.7rem) !important;
    padding: clamp(1.4rem, 2.8vw, 2.1rem) !important;
}

.hero.page-heading.feature-hero .eyebrow {
    margin: 0 0 15px !important;
}

.hero.page-heading.feature-hero h1 {
    margin: 0 !important;
}

.hero.page-heading.feature-hero .hero-copy {
    margin: .5rem 0 0 !important;
}

@media (max-width: 40rem) {
    .hero.page-heading.feature-hero {
        min-height: 10.5rem !important;
        padding: 1.1rem !important;
    }
}

/* V1 feature hero final compact layout */
.hero.page-heading.feature-hero {
    min-height: 8.8rem !important;
    padding: 1.2rem 2rem !important;

    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
}

.hero.page-heading.feature-hero > .eyebrow {
    margin: 0 0 15px !important;
}

.hero.page-heading.feature-hero > h1 {
    margin: 0 !important;
}

.hero.page-heading.feature-hero > .hero-copy {
    margin: 8px 0 0 !important;
}

@media (max-width: 40rem) {
    .hero.page-heading.feature-hero {
        min-height: 8rem !important;
        padding: 1rem 1.25rem !important;
    }
}

/* V1 feature hero title size */
.hero.page-heading.feature-hero h1 {
    font-size: clamp(1.1rem, 2vw, 1.65rem) !important;
}

/* V1 sub feature hero */
.hero.page-heading.sub-feature-hero {
    position: relative;
    min-height: 7.5rem !important;
    padding: 1rem 1.5rem !important;
    border: 1px solid rgb(150 162 214 / 14%);
    border-radius: 1.1rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    text-align: center;
}

.hero.page-heading.sub-feature-hero h1 {
    margin: 0 !important;
    font-size: clamp(1.05rem, 1.8vw, 1.45rem) !important;
}

.hero.page-heading.sub-feature-hero .hero-copy {
    margin: 6px 0 0 !important;
    max-width: 42rem;
}

.hero.page-heading.sub-feature-hero-vote {
    background-image:
        linear-gradient(90deg, rgb(4 6 19 / 58%), rgb(4 6 19 / 48%), rgb(4 6 19 / 58%)),
        url('/assets/images/hero/herobg_vote.jpg');
}

.hero.page-heading.sub-feature-hero-battle {
    background-image:
        linear-gradient(90deg, rgb(4 6 19 / 58%), rgb(4 6 19 / 48%), rgb(4 6 19 / 58%)),
        url('/assets/images/hero/herobg_battle.jpg');
}

.hero.page-heading.sub-feature-hero-awards {
    background-image:
        linear-gradient(90deg, rgb(4 6 19 / 58%), rgb(4 6 19 / 48%), rgb(4 6 19 / 58%)),
        url('/assets/images/hero/herobg_awards.jpg');
}

@media (max-width: 40rem) {
    .hero.page-heading.sub-feature-hero {
        min-height: 6.5rem !important;
        padding: .85rem 1rem !important;
    }
}

/* V1 sub feature hero content layout */
.sub-feature-back {
    margin: 0 0 .6rem;
    font-size: .9rem;
}

.sub-feature-back a {
    color: var(--muted);
    text-decoration: none;
}

.sub-feature-back a:hover {
    color: #fff;
}

.hero.page-heading.sub-feature-hero .sub-feature-hero-content {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.hero.page-heading.sub-feature-hero .sub-feature-status {
    margin: .45rem 0 0;
}

.hero.page-heading.sub-feature-hero .hero-copy {
    margin: .5rem auto 0 !important;
}

.hero.page-heading.sub-feature-hero .sub-feature-period {
    margin: .45rem 0 0;
}

/* V1 sub hero alignment fix */
.hero.page-heading.sub-feature-hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.hero.page-heading.sub-feature-hero .sub-feature-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 46rem !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.hero.page-heading.sub-feature-hero .sub-feature-hero-content h1,
.hero.page-heading.sub-feature-hero .sub-feature-hero-content p {
    text-align: center !important;
}

/* ===== V1 compact feature cards — 2026-09-11 ======================= */
.v1-card-grid,
.v1-candidate-grid,
.v1-result-grid,
.v1-mission-grid { list-style:none; margin:1.1rem 0; padding:0; display:grid; gap:.85rem; }
.v1-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.v1-event-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.1rem 0; }
.v1-candidate-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.v1-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.v1-mission-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.v1-music-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.85rem; margin:1.1rem 0; }

.v1-fandom-card,.v1-event-card,.v1-candidate-card,.v1-result-card,.v1-mission-card,.v1-music-card {
    position:relative; min-width:0; border:1px solid rgb(150 162 214 / 18%); border-radius:1.05rem;
    background:linear-gradient(145deg,rgb(15 25 47 / 96%),rgb(7 13 27 / 98%));
    box-shadow:inset 0 1px rgb(255 255 255 / 3%); color:var(--text);
}
a.v1-fandom-card,a.v1-event-card,a.v1-music-card { text-decoration:none; }
a.v1-fandom-card:hover,a.v1-event-card:hover,a.v1-music-card:hover { border-color:rgb(142 104 255 / 52%); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.v1-fandom-card { min-height:11.5rem; padding:1.15rem; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"rank profile" "identity identity" "metrics metrics"; align-items:center; gap:.7rem 1rem; }
.v1-rank-badge { display:inline-flex; align-items:center; justify-content:center; width:2.45rem; height:2.45rem; border-radius:50%; font-weight:900; background:rgb(255 255 255 / 7%); border:1px solid var(--border-strong); }
.v1-ranking-item.is-top3 .v1-fandom-card { border-color:rgb(230 190 93 / 28%); }
.v1-ranking-item:nth-child(1) .v1-rank-badge { color:#241605; background:linear-gradient(150deg,var(--gold),#ffd873); border-color:transparent; box-shadow:var(--glow-gold); }
.v1-ranking-item:nth-child(2) .v1-rank-badge { color:#14151f; background:linear-gradient(150deg,#d7dbee,#9aa1c2); border-color:transparent; }
.v1-ranking-item:nth-child(3) .v1-rank-badge { color:#241608; background:linear-gradient(150deg,#d69a63,#a9612f); border-color:transparent; }
.v1-fandom-card > .v1-rank-badge { grid-area:rank; }
.v1-fandom-card > .v1-profile-image { grid-area:profile; justify-self:end; }
.v1-fandom-card > .v1-card-identity { grid-area:identity; }
.v1-fandom-card > .v1-metrics { grid-area:metrics; }
.v1-profile-image { width:4.5rem; height:4.5rem; border-radius:50%; object-fit:cover; display:block; border:2px solid rgb(255 255 255 / 13%); background:var(--surface-elevated); box-shadow:0 .35rem 1rem rgb(0 0 0 / 28%); }
.v1-profile-image.is-large { width:5rem; height:5rem; }
.v1-profile-image.is-xl { width:5.5rem; height:5.5rem; }
.v1-card-identity { display:flex; flex-direction:column; gap:.18rem; min-width:0; }
.v1-card-identity strong,.v1-candidate-copy strong { font-size:1.02rem; line-height:1.3; overflow-wrap:anywhere; }
.v1-metrics { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; border-top:1px solid rgb(255 255 255 / 8%); padding-top:.7rem; }
.v1-metrics > span { display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.v1-metrics b { font-size:.94rem; overflow-wrap:anywhere; }
.v1-metrics small { color:var(--muted); font-size:.72rem; }

.v1-event-card { min-height:12.5rem; padding:1.15rem 1.25rem; display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"icon blank status" "title title title" "desc desc desc" "footer footer footer"; align-content:start; gap:.65rem .8rem; }
.v1-event-icon { grid-area:icon; display:inline-flex; width:2.8rem; height:2.8rem; align-items:center; justify-content:center; border-radius:.8rem; font-size:1.25rem; background:rgb(139 108 255 / 13%); border:1px solid rgb(139 108 255 / 25%); }
.v1-event-card > .status-pill { grid-area:status; justify-self:end; }
.v1-event-card h3 { grid-area:title; margin:.1rem 0 0; font-size:1.12rem; }
.v1-card-description { grid-area:desc; margin:0; color:var(--muted); line-height:1.5; font-size:.88rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.v1-event-footer { grid-area:footer; margin-top:auto; padding-top:.75rem; border-top:1px solid rgb(255 255 255 / 8%); display:flex; align-items:center; gap:.65rem; }
.v1-event-footer strong { font-size:.84rem; }
.v1-card-arrow { margin-left:auto; color:var(--accent-strong); font-weight:900; }

.v1-candidate-card { min-height:13.5rem; padding:1.15rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.65rem; }
.v1-candidate-card.is-selected { border-color:var(--success); box-shadow:0 0 0 1px var(--success) inset; }
.v1-candidate-copy { display:flex; flex-direction:column; align-items:center; gap:.18rem; }
.v1-vote-total { margin-top:.25rem; font-weight:800; font-size:.9rem; }
.v1-candidate-action { margin-top:auto; width:100%; }
.v1-candidate-action form { margin:0; }
.v1-candidate-action .button,.v1-candidate-action .button-secondary { width:100%; justify-content:center; }

.v1-result-card { min-height:7rem; padding:1rem; display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:.75rem; }
.v1-result-card.is-winner { border-color:var(--gold); box-shadow:var(--glow-gold); }
.v1-result-score { margin-left:auto; color:var(--muted); font-size:.86rem; text-align:right; }
.v1-mission-card { min-height:7rem; padding:1rem 1.1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.v1-mission-card .entry-main { align-items:flex-start; flex-direction:column; }
.v1-mission-card .entry-side { grid-column:auto; }

.vs-participants .v1-profile-image.is-xl { width:5.75rem; height:5.75rem; }
.vs-fandom { min-width:10rem; }
.vs-fandom-name { max-width:12rem; font-size:1rem; }

.v1-music-card { min-height:13rem; padding:1.1rem .9rem; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:.55rem; }
.v1-music-card h3 {
    margin:.15rem 0 0;
    font-size:.98rem;
    line-height:1.35;
    /* Mobile hotfix: long fandom names wrap to 2 lines while short ones
       stay on 1, which used to shift every element below (status,
       Enter Music Talk, arrow) up/down per-card. Reserving 2-line height
       and centering the (possibly 1-line) text inside it keeps every
       card's status/CTA row at the same vertical position regardless of
       name length -- no truncation, no forced single line. */
    min-height:calc(.98rem * 1.35 * 2);
    display:flex;
    align-items:center;
}
.v1-music-card .v1-card-arrow { margin:.15rem 0 0; }

@media (max-width:74.99rem) { .v1-music-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:61.99rem) { .v1-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .v1-candidate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .v1-music-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:47.99rem) { .v1-event-grid,.v1-result-grid,.v1-mission-grid { grid-template-columns:1fr; } .v1-music-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:34rem) { .v1-card-grid,.v1-candidate-grid { grid-template-columns:1fr; } .v1-profile-image { width:4.1rem; height:4.1rem; } .v1-profile-image.is-large,.v1-profile-image.is-xl { width:4.7rem; height:4.7rem; } .v1-fandom-card { min-height:10.5rem; } }

/* MUSIC TALK P0-4 -- /music global Most Loved Right Now TOP10. Same
   never-nowrap/never-fixed-width discipline as the Music Talk playlist
   row (P0-3): rank / artist-fandom / song / Next Play must all wrap
   naturally at any width or locale string length, never overflow. */
.most-loved-section { margin: 1.4rem 0; }
.most-loved-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.most-loved-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}
.most-loved-link {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .75rem .9rem;
    text-decoration: none;
    color: inherit;
}
.most-loved-rank {
    flex: 0 0 auto;
    min-width: 1.8rem;
    text-align: center;
    font-weight: 700;
    color: var(--accent-strong);
}
.most-loved-copy {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1 1 auto;
}
.most-loved-artist {
    font-size: .8rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.most-loved-song {
    overflow-wrap: anywhere;
}
.most-loved-meta {
    display: flex;
    flex-wrap: wrap;
    row-gap: .15rem;
    column-gap: .5rem;
}
.most-loved-meta-part {
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 34rem) {
    .most-loved-link { flex-direction: column; gap: .3rem; }
    .most-loved-rank { text-align: left; }
}

/* ===== Ranking design correction v2 — closer to approved visual ===== */
.ranking-page-section { margin-top: 1.1rem; }
.ranking-showcase-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.ranking-showcase-item { min-width: 0; }
.ranking-showcase-card {
    min-height: 13rem;
    padding: 1.25rem 1.3rem;
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1.15rem;
    border: 1px solid rgb(150 162 214 / 24%);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgb(11 24 45 / 98%), rgb(5 14 29 / 98%));
    color: var(--text);
    text-decoration: none;
    box-shadow: inset 0 1px rgb(255 255 255 / 3%);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ranking-showcase-card:hover {
    transform: translateY(-2px);
    border-color: rgb(133 117 255 / 58%);
    box-shadow: 0 .9rem 2rem rgb(0 0 0 / 23%);
}
.ranking-showcase-item.is-top3 .ranking-showcase-card { border-color: rgb(230 190 93 / 32%); }
.ranking-showcase-avatar-wrap {
    position: relative;
    width: 6.25rem;
    height: 6.25rem;
    display: block;
}
.ranking-showcase-avatar {
    width: 6.25rem;
    height: 6.25rem;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgb(181 157 255 / 38%);
    background: var(--surface-elevated);
    box-shadow: 0 .5rem 1.35rem rgb(0 0 0 / 34%);
}
.ranking-showcase-rank {
    position: absolute;
    left: -.45rem;
    top: -.45rem;
    width: 2.55rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgb(10 21 41 / 96%);
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    box-shadow: 0 .2rem .65rem rgb(0 0 0 / 30%);
}
.ranking-showcase-item:nth-child(1) .ranking-showcase-rank {
    color: #2d1b00;
    background: linear-gradient(145deg, #f4b91f, #ffd96d);
    border-color: #ffe399;
}
.ranking-showcase-item:nth-child(2) .ranking-showcase-rank {
    color: #171927;
    background: linear-gradient(145deg, #edf0fb, #aab4d4);
    border-color: #e9edff;
}
.ranking-showcase-item:nth-child(3) .ranking-showcase-rank {
    color: #2b1706;
    background: linear-gradient(145deg, #e69a57, #b96731);
    border-color: #efb477;
}
.ranking-showcase-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ranking-showcase-name {
    max-width: 100%;
    font-size: 1.03rem;
    line-height: 1.35;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.ranking-showcase-type {
    margin-top: .2rem;
    color: var(--muted);
    font-size: .84rem;
}
.ranking-showcase-score {
    margin-top: 1.05rem;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}
.ranking-showcase-movement {
    margin-top: .38rem;
    font-size: .86rem;
    font-weight: 800;
    color: var(--muted);
}
.ranking-showcase-movement.is-up { color: var(--success); }
.ranking-showcase-movement.is-down { color: var(--danger); }
.ranking-showcase-movement.is-new { color: var(--accent-strong); }
.ranking-showcase-card-missing { grid-template-columns: auto 1fr; }
.ranking-showcase-card-missing > .ranking-showcase-rank { position: static; }

@media (max-width: 68rem) {
    .ranking-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 42rem) {
    .ranking-showcase-grid { grid-template-columns: 1fr; }
    .ranking-showcase-card {
        min-height: 10.5rem;
        grid-template-columns: 5.4rem minmax(0, 1fr);
        padding: 1rem;
    }
    .ranking-showcase-avatar-wrap,
    .ranking-showcase-avatar { width: 5.2rem; height: 5.2rem; }
    .ranking-showcase-rank { width: 2.25rem; height: 2.25rem; font-size: .9rem; }
    .ranking-showcase-score { margin-top: .75rem; }
}


/* ===== Ranking member count v4 ===== */
.ranking-showcase-meta-row {
    width: 100%;
    margin-top: .38rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.ranking-showcase-meta-row .ranking-showcase-movement { margin-top: 0; }
.ranking-showcase-members {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== Ranking design v5 — compact information cluster ===== */
.ranking-showcase-card {
    min-height: 12.4rem;
    grid-template-columns: 7.35rem minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1.2rem 1.25rem;
}

.ranking-showcase-avatar-wrap,
.ranking-showcase-avatar {
    width: 7rem;
    height: 7rem;
}

.ranking-showcase-rank {
    left: -.5rem;
    top: -.5rem;
}

.ranking-showcase-name {
    font-size: 1.04rem;
    line-height: 1.32;
}

.ranking-showcase-type {
    margin-top: .18rem;
}

.ranking-showcase-score {
    margin-top: .85rem;
}

.ranking-showcase-meta-row {
    width: auto;
    margin-top: .3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .22rem;
    flex-wrap: nowrap;
}

.ranking-showcase-meta-row .ranking-showcase-movement,
.ranking-showcase-members {
    margin: 0;
    line-height: 1.35;
}

.ranking-showcase-members {
    color: #c8d1e4;
}

@media (max-width: 42rem) {
    .ranking-showcase-card {
        min-height: 10.2rem;
        grid-template-columns: 5.8rem minmax(0, 1fr);
        gap: .95rem;
        padding: 1rem;
    }

    .ranking-showcase-avatar-wrap,
    .ranking-showcase-avatar {
        width: 5.6rem;
        height: 5.6rem;
    }
}

/* ===== Ranking design v6 — final alignment polish ===== */
.ranking-showcase-card {
    min-height: 11.7rem;
    padding: 1.05rem 1.2rem;
}

.ranking-showcase-content {
    align-self: center;
    min-width: 0;
}

.ranking-showcase-name {
    min-height: 2.75rem;
    display: flex;
    align-items: flex-start;
    margin: 0;
    line-height: 1.32;
}

.ranking-showcase-type {
    margin-top: .05rem;
    min-height: 1.35rem;
}

.ranking-showcase-score {
    margin-top: .62rem;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: .42rem;
    align-items: baseline;
}

.ranking-showcase-score strong {
    font-size: 1.05rem;
}

.ranking-showcase-meta-row {
    margin-top: .18rem;
    gap: .12rem;
}

.ranking-showcase-members {
    color: #9ca9c3;
    font-size: .92rem;
}

.ranking-showcase-card:hover {
    transform: translateY(-2px);
    border-color: rgb(175 94 255 / 38%);
    box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
}

.ranking-showcase-card.is-top3:hover {
    border-color: rgb(247 194 72 / 48%);
}

@media (max-width: 42rem) {
    .ranking-showcase-card {
        min-height: 9.8rem;
        padding: .95rem 1rem;
    }

    .ranking-showcase-name {
        min-height: auto;
    }
}


/* ===== Ranking design v7 — country flag + type above identity ===== */
.ranking-showcase-type {
    order: 0;
    display: flex;
    align-items: center;
    gap: .38rem;
    margin: 0 0 .22rem;
    min-height: 1.25rem;
}

.ranking-showcase-country-flag {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1rem;
}

.ranking-showcase-name {
    order: 1;
    min-height: 2.75rem;
}

.ranking-showcase-score {
    order: 2;
    margin-top: .45rem;
}

.ranking-showcase-meta-row {
    order: 3;
}


/* ===== Vote design v1 ===== */
.vote-showcase-section {
    margin-top: 2.8rem;
}

.vote-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vote-showcase-card {
    display: block;
    min-width: 0;
    padding: 1.05rem;
    border: 1px solid #27364f;
    border-radius: 1rem;
    background: linear-gradient(145deg, #0d192d, #0a1425);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 12px 28px rgb(0 0 0 / 12%);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.vote-showcase-card:hover {
    transform: translateY(-2px);
    border-color: rgb(172 88 255 / 45%);
    box-shadow: 0 16px 34px rgb(0 0 0 / 20%);
}

.vote-showcase-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.vote-dday {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: .15rem .55rem;
    border: 1px solid #355078;
    border-radius: 999px;
    background: #13213a;
    color: #d8e6ff;
    font-size: .78rem;
    font-weight: 700;
}

.vote-showcase-body {
    display: grid;
    grid-template-columns: 8.25rem minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.vote-showcase-media {
    min-height: 8.25rem;
    border-radius: .85rem;
    overflow: hidden;
    background: #09111f;
    border: 1px solid #26344c;
}

.vote-showcase-media img {
    width: 100%;
    height: 100%;
    min-height: 8.25rem;
    object-fit: cover;
    display: block;
}

.vote-showcase-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 8.25rem;
    font-size: 2rem;
    background: radial-gradient(circle at 50% 20%, rgb(178 65 255 / 24%), transparent 62%), #0a1324;
}

.vote-showcase-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vote-showcase-copy h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.35;
}

.vote-showcase-description {
    margin: .35rem 0 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vote-showcase-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    margin-top: .7rem;
    color: #b9c7df;
    font-size: .86rem;
}

.vote-showcase-stats strong {
    color: #fff;
}

.vote-showcase-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .8rem;
    margin-top: auto;
    padding-top: .8rem;
}

.vote-showcase-date {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
}

.vote-showcase-date small {
    color: var(--muted);
}

.vote-showcase-date strong {
    font-size: .86rem;
}

.vote-showcase-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.25rem;
    padding: .35rem .75rem;
    border: 1px solid rgb(186 65 255 / 48%);
    border-radius: .65rem;
    background: linear-gradient(135deg, rgb(158 47 255 / 22%), rgb(232 45 166 / 18%));
    color: #f3eaff;
    font-size: .84rem;
    font-weight: 700;
}

.vote-detail-section {
    margin-top: 2.5rem;
}

.vote-detail-heading {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: 1rem;
}

.vote-detail-heading h2 {
    margin: 0;
}

.vote-candidate-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.vote-candidate-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #26364f;
    border-radius: 1rem;
    background: linear-gradient(155deg, #0d192d, #091424);
}

.vote-candidate-card.is-selected {
    border-color: rgb(190 74 255 / 70%);
    box-shadow: 0 0 0 1px rgb(190 74 255 / 16%), 0 12px 28px rgb(0 0 0 / 16%);
}

.vote-candidate-profile {
    width: 6.25rem;
    height: 6.25rem;
    display: block;
    margin: 0 auto .8rem;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #5a66a8;
    background: #111a31;
}

.vote-candidate-info {
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.vote-candidate-name {
    font-size: 1rem;
    line-height: 1.35;
}

.vote-candidate-result {
    margin-top: .85rem;
}

.vote-result-numbers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    font-size: .86rem;
}

.vote-result-bar {
    height: .5rem;
    margin-top: .42rem;
    overflow: hidden;
    border-radius: 999px;
    background: #16243b;
    border: 1px solid #2c3f61;
}

.vote-result-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6b5cff, #c348ff, #f243ae);
}

.vote-candidate-action {
    margin-top: .9rem;
}

.vote-candidate-action form {
    margin: 0;
}

.vote-candidate-button {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.vote-results-pending {
    margin-top: 1rem;
}

@media (max-width: 56rem) {
    .vote-showcase-grid {
        grid-template-columns: 1fr;
    }

    .vote-candidate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .vote-showcase-body {
        grid-template-columns: 5.6rem minmax(0, 1fr);
        gap: .8rem;
    }

    .vote-showcase-media,
    .vote-showcase-media img,
    .vote-showcase-placeholder {
        min-height: 5.6rem;
    }

    .vote-candidate-grid {
        grid-template-columns: 1fr;
    }

    .vote-candidate-profile {
        width: 5.5rem;
        height: 5.5rem;
    }
}


/* ===== Vote design v2 — filters + visual polish ===== */
.vote-filter-tabs {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .2rem 0;
    overflow-x: auto;
}

.vote-filter-tab {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #9ba7bc;
    padding: .55rem .95rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    /* Server-side status filter links (replacing the old inline-JS
       show/hide tabs), styled identically to the prior <button> tabs. */
    text-decoration: none;
    display: inline-block;
}

.vote-filter-tab:hover {
    color: #fff;
}

.vote-filter-tab.is-active {
    color: #fff;
    border-bottom-color: #c34cff;
    background: linear-gradient(180deg, rgb(142 64 255 / 18%), transparent 88%);
    border-radius: .7rem .7rem 0 0;
}

.vote-showcase-card {
    padding: 1rem 1.05rem;
}

.vote-showcase-head {
    margin-bottom: .65rem;
}

.vote-showcase-body {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 1.1rem;
}

.vote-showcase-media,
.vote-showcase-media img,
.vote-showcase-placeholder {
    min-height: 9rem;
}

.vote-showcase-media {
    border-radius: .95rem;
}

.vote-showcase-copy h3 {
    font-size: 1.12rem;
    line-height: 1.32;
}

.vote-showcase-stats {
    margin-top: .78rem;
    padding-top: .6rem;
    border-top: 1px solid rgb(126 145 177 / 14%);
}

.vote-showcase-foot {
    padding-top: .65rem;
}

.vote-showcase-cta {
    min-width: 5.4rem;
    justify-content: center;
}

.vote-candidate-card {
    padding: 1.05rem;
    min-height: 16.5rem;
    display: flex;
    flex-direction: column;
}

.vote-candidate-profile {
    width: 7rem;
    height: 7rem;
    margin-bottom: .7rem;
}

.vote-candidate-name {
    min-height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vote-candidate-result {
    margin-top: .72rem;
}

.vote-candidate-action {
    margin-top: auto;
    padding-top: .8rem;
}

.hero.page-heading.sub-feature-hero-vote .sub-feature-hero-content {
    max-width: 50rem !important;
}

.hero.page-heading.sub-feature-hero-vote .sub-feature-period {
    margin-top: .55rem;
    padding-top: .45rem;
    border-top: 1px solid rgb(255 255 255 / 10%);
}

@media (max-width: 40rem) {
    .vote-showcase-body {
        grid-template-columns: 6.4rem minmax(0, 1fr);
    }

    .vote-showcase-media,
    .vote-showcase-media img,
    .vote-showcase-placeholder {
        min-height: 6.4rem;
    }

    .vote-filter-tab {
        padding-inline: .7rem;
    }

    .vote-candidate-card {
        min-height: 0;
    }
}


/* ===== Vote design v3 — final detail polish ===== */
.vote-detail-back {
    margin: 0 0 .65rem;
    font-size: .88rem;
}

.vote-detail-back a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #aebbd1;
    text-decoration: none;
    transition: color .16s ease, transform .16s ease;
}

.vote-detail-back a:hover {
    color: #fff;
    transform: translateX(-2px);
}

/* The global "main > * + * { margin-top: var(--section-spacing) }" rhythm
   (~3.5rem) applies between the back link and the vote detail hero like
   any other top-level sibling pair, leaving far more gap than intended
   here. Scoped to this exact adjacent pair only -- never touches the
   shared .hero/.page-heading rules or any other page's spacing. */
.vote-detail-back + .sub-feature-hero-vote {
    margin-top: 14px;
}

.vote-detail-heading h2 {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
}

.vote-detail-count {
    color: #9aa8c0;
    font-size: .72em;
    font-weight: 600;
}

.vote-candidate-info {
    gap: .3rem;
}

.vote-candidate-type {
    order: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .35rem;
    min-height: 1.3rem;
}

.vote-candidate-flag {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1rem;
}

.vote-candidate-name {
    order: 1;
    min-height: 2.5rem;
}

.hero.page-heading.sub-feature-hero-vote .eyebrow {
    display: none !important;
}

/* ===== Vote live progress v4 ===== */
/* Candidate heading now owns the back-to-list action. */
.vote-detail-heading {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.vote-detail-heading-back {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #aebbd1;
    text-decoration: none;
    font-size: .88rem;
    white-space: nowrap;
}
.vote-detail-heading-back:hover { color: #fff; }

/* ENDED: the outer track is always 100%; only the gradient fill changes. */
.vote-result-bar {
    width: 100%;
}
.vote-result-bar > span {
    width: var(--vote-fill, 0%) !important;
    max-width: 100%;
}

/* ACTIVE: button/selected state is itself the 100% track. */
.vote-live-control {
    --vote-fill: 0%;
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #795cff;
    border-radius: .8rem;
    background: transparent;
    color: #fff;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    cursor: default;
}
button.vote-live-control {
    appearance: none;
    padding: 0;
}
.vote-live-control.is-action {
    cursor: pointer;
}
.vote-live-control.is-action:hover {
    border-color: #d44cff;
    box-shadow: 0 0 0 1px rgb(201 68 255 / 18%);
}
.vote-live-control.is-selected {
    border-color: #cf4dff;
    box-shadow: 0 0 0 1px rgb(207 77 255 / 18%);
}
.vote-live-control.is-locked {
    opacity: .72;
}
.vote-live-fill {
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    width: var(--vote-fill, 0%);
    max-width: 100%;
    background: linear-gradient(90deg, #6255ff 0%, #9845f6 52%, #e32ab3 100%);
    transition: width .25s ease;
    pointer-events: none;
}
.vote-live-label {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: .65rem .8rem;
    text-align: center;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgb(0 0 0 / 55%);
}
@media (prefers-reduced-motion: reduce) {
    .vote-live-fill { transition: none; }
}
/* ===== Vote progress v5 hard fix ===== */
/* Outer tracks stay full-width and dark. Only child fill owns the gradient. */
.vote-result-bar {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #16243b !important;
}
.vote-result-bar > span,
.vote-result-fill {
    display: block;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    background: linear-gradient(90deg, #6255ff 0%, #9845f6 52%, #e32ab3 100%) !important;
}

.vote-live-control {
    background: transparent !important;
}
.vote-live-fill {
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    max-width: 100%;
    min-width: 0;
    background: linear-gradient(90deg, #6255ff 0%, #9845f6 52%, #e32ab3 100%) !important;
}
/* ===== Vote progress v8 — CSP-safe native progress ===== */
/* No inline style is used. Browser computes value/max, so CSP style-src 'self' is respected. */
.vote-result-progress,
.vote-live-progress {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    overflow: hidden;
    background: #16243b;
}

.vote-result-progress {
    display: block;
    width: 100%;
    height: .5rem;
    margin-top: .42rem;
    border: 1px solid #2c3f61;
    border-radius: 999px;
}

.vote-live-progress {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
}

/* Chromium / Edge / Safari */
.vote-result-progress::-webkit-progress-bar,
.vote-live-progress::-webkit-progress-bar {
    background: #16243b;
}
.vote-result-progress::-webkit-progress-value,
.vote-live-progress::-webkit-progress-value {
    background: linear-gradient(90deg, #6255ff 0%, #9845f6 52%, #e32ab3 100%);
    border-radius: inherit;
}

/* Firefox */
.vote-result-progress::-moz-progress-bar,
.vote-live-progress::-moz-progress-bar {
    background: linear-gradient(90deg, #6255ff 0%, #9845f6 52%, #e32ab3 100%);
    border-radius: inherit;
}

.vote-live-control {
    position: relative;
    isolation: isolate;
    background: #0d192d !important;
}
.vote-live-label {
    position: relative;
    z-index: 1;
}
/* ===== Battle detail v1 ===== */
.battle-detail-section { margin-top: 2.4rem; }

.battle-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.battle-detail-heading h2 { margin: 0; }
.battle-detail-count {
    color: #9aa8c0;
    font-size: .72em;
    font-weight: 600;
}
.battle-detail-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #aebbd1;
    text-decoration: none;
    font-size: .88rem;
    white-space: nowrap;
}
.battle-detail-back:hover { color: #fff; }

.battle-pair-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.battle-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    padding: 1rem;
    border: 1px solid #27364f;
    border-radius: 1rem;
    background: linear-gradient(145deg, #0d192d, #0a1425);
}
.battle-participant-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    color: inherit;
    text-decoration: none;
    text-align: center;
}
.battle-participant-profile {
    width: 6.8rem;
    height: 6.8rem;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #5b68a8;
    background: #111a31;
}
.battle-participant-type,
.battle-standing-type {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #aab8cf;
    font-size: .82rem;
}
.battle-participant-name {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}
.battle-participant-score {
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}
.battle-pair-vs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 1px solid #9c2f6e;
    background: #2b1027;
    color: #ff4aa8;
    font-size: .82rem;
    font-weight: 800;
}

.battle-detail-section .v1-mission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.battle-detail-section .v1-mission-card {
    min-height: 7rem;
    padding: 1rem 1.1rem;
    border: 1px solid #27364f;
    border-radius: 1rem;
    background: #0d192d;
}

.battle-standings-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.battle-standing-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 2.8rem 4.5rem minmax(0, 1fr);
    grid-template-areas:
        "rank image copy"
        "score score score";
    gap: .7rem 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #27364f;
    border-radius: 1rem;
    background: linear-gradient(145deg, #0d192d, #0a1425);
}
.battle-standing-card.is-winner {
    border-color: #d9ad00;
    box-shadow: 0 0 0 1px rgb(217 173 0 / 14%);
}
.battle-standing-rank {
    grid-area: rank;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid #42536f;
    background: #122039;
    font-weight: 800;
}
.battle-standing-card.is-winner .battle-standing-rank {
    border-color: #d9ad00;
    background: #3a2c05;
    color: #ffd84c;
}
.battle-standing-profile {
    grid-area: image;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #5b68a8;
}
.battle-standing-copy {
    grid-area: copy;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.battle-standing-copy strong {
    line-height: 1.3;
}
.battle-standing-score {
    grid-area: score;
    display: grid;
    gap: .4rem;
    color: #dbe6f8;
    font-size: .88rem;
}
.battle-score-progress {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: .48rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: #16243b;
}
.battle-score-progress::-webkit-progress-bar { background: #16243b; }
.battle-score-progress::-webkit-progress-value {
    background: linear-gradient(90deg, #6255ff 0%, #9845f6 52%, #e32ab3 100%);
    border-radius: 999px;
}
.battle-score-progress::-moz-progress-bar {
    background: linear-gradient(90deg, #6255ff 0%, #9845f6 52%, #e32ab3 100%);
    border-radius: 999px;
}

@media (max-width: 64rem) {
    .battle-pair-grid,
    .battle-standings-grid,
    .battle-detail-section .v1-mission-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 40rem) {
    .battle-detail-heading {
        align-items: flex-start;
    }
    .battle-pair {
        grid-template-columns: 1fr;
    }
    .battle-pair-vs {
        margin-inline: auto;
    }
    .battle-participant-profile {
        width: 5.8rem;
        height: 5.8rem;
    }
}
/* ===== Battle list v1 ===== */
.battle-filter-tabs {
    display:flex;
    align-items:center;
    gap:.35rem;
    margin:2rem 0 1rem;
}
.battle-filter-tab {
    padding:.72rem 1rem;
    border-bottom:2px solid transparent;
    color:#aebbd1;
    text-decoration:none;
    font-weight:700;
}
.battle-filter-tab:hover { color:#fff; }
.battle-filter-tab.is-active {
    color:#fff;
    border-bottom-color:#d43cff;
    background:linear-gradient(180deg, rgb(87 34 143 / 28%), transparent);
    border-radius:.75rem .75rem 0 0;
}
.battle-list-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}
.battle-list-card {
    min-width:0;
    padding:1rem;
    border:1px solid #27364f;
    border-radius:1rem;
    background:linear-gradient(145deg,#0d192d,#0a1425);
}
.battle-list-card-top {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:.65rem;
}
.battle-list-card-top h3 { margin:0; font-size:1.05rem; }
.battle-list-card-top h3 a { color:#fff; text-decoration:none; }
.battle-list-matchup {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:.65rem;
    margin:1.1rem 0 .8rem;
}
.battle-list-fandom {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.28rem;
    color:inherit;
    text-align:center;
    text-decoration:none;
}
.battle-list-fandom img {
    width:5.5rem;
    height:5.5rem;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #5b68a8;
}
.battle-list-fandom strong { line-height:1.25; }
.battle-list-type {
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    color:#aab8cf;
    font-size:.76rem;
}
.battle-list-vs {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.65rem;
    height:2.65rem;
    border:1px solid #9c2f6e;
    border-radius:50%;
    background:#2b1027;
    color:#ff4aa8;
    font-size:.8rem;
    font-weight:800;
}
.battle-list-score {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.3rem;
    font-size:.82rem;
    font-weight:700;
}
.battle-list-score > span:last-child { text-align:right; }
.battle-list-track {
    grid-column:1/-1;
    display:flex;
    width:100%;
    height:.5rem;
    overflow:hidden;
    border:1px solid #2c3f61;
    border-radius:999px;
    background:#16243b;
}
.battle-list-fill-left,
.battle-list-fill-right {
    display:block;
    width:var(--battle-pct,0%);
    height:100%;
}
.battle-list-fill-left { background:linear-gradient(90deg,#6255ff,#a53df2); }
.battle-list-fill-right { background:linear-gradient(90deg,#c13be9,#f243ae); }
.battle-list-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-top:1rem;
    padding-top:.85rem;
    border-top:1px solid #22314a;
}
.battle-list-open {
    color:#e2c5ff;
    text-decoration:none;
    font-weight:700;
    white-space:nowrap;
}
@media (max-width:64rem) {
    .battle-list-grid { grid-template-columns:1fr; }
}
@media (max-width:40rem) {
    .battle-filter-tabs { overflow-x:auto; }
    .battle-list-matchup { gap:.35rem; }
    .battle-list-fandom img { width:4.6rem; height:4.6rem; }
}
/* ===== Battle list v2 ===== */
.battle-filter-tabs {
    display:flex;
    align-items:center;
    gap:.35rem;
    margin:2rem 0 1rem;
}
.battle-filter-tab {
    padding:.72rem 1rem;
    border-bottom:2px solid transparent;
    color:#aebbd1;
    text-decoration:none;
    font-weight:700;
}
.battle-filter-tab:hover { color:#fff; }
.battle-filter-tab.is-active {
    color:#fff;
    border-bottom-color:#d43cff;
    background:linear-gradient(180deg, rgb(87 34 143 / 28%), transparent);
    border-radius:.75rem .75rem 0 0;
}
.battle-list-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}
.battle-list-card {
    min-width:0;
    padding:1rem;
    border:1px solid #27364f;
    border-radius:1rem;
    background:linear-gradient(145deg,#0d192d,#0a1425);
}
.battle-list-card-top {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:.65rem;
}
.battle-list-card-top h3 { margin:0; font-size:1.05rem; }
.battle-list-card-top h3 a { color:#fff; text-decoration:none; }
.battle-list-matchup {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:.65rem;
    margin:1.1rem 0 .9rem;
}
.battle-list-fandom {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.28rem;
    color:inherit;
    text-align:center;
    text-decoration:none;
}
.battle-list-fandom img {
    width:5.5rem;
    height:5.5rem;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #5b68a8;
}
.battle-list-fandom strong { line-height:1.25; }
.battle-list-type {
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    color:#aab8cf;
    font-size:.76rem;
}
.battle-list-vs {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.65rem;
    height:2.65rem;
    border:1px solid #9c2f6e;
    border-radius:50%;
    background:#2b1027;
    color:#ff4aa8;
    font-size:.8rem;
    font-weight:800;
}
.battle-list-score-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.8rem;
}
.battle-list-score-side {
    display:grid;
    gap:.35rem;
    font-size:.82rem;
    font-weight:700;
}
.battle-list-score-side.is-right > span { text-align:right; }
.battle-list-progress {
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    height:.48rem;
    border:0;
    border-radius:999px;
    overflow:hidden;
    background:#16243b;
}
.battle-list-progress::-webkit-progress-bar { background:#16243b; }
.battle-list-progress-left::-webkit-progress-value {
    background:linear-gradient(90deg,#6255ff,#a53df2);
    border-radius:999px;
}
.battle-list-progress-right::-webkit-progress-value {
    background:linear-gradient(90deg,#c13be9,#f243ae);
    border-radius:999px;
}
.battle-list-progress-left::-moz-progress-bar {
    background:linear-gradient(90deg,#6255ff,#a53df2);
    border-radius:999px;
}
.battle-list-progress-right::-moz-progress-bar {
    background:linear-gradient(90deg,#c13be9,#f243ae);
    border-radius:999px;
}
.battle-list-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-top:1rem;
    padding-top:.85rem;
    border-top:1px solid #22314a;
}
.battle-list-open {
    color:#e2c5ff;
    text-decoration:none;
    font-weight:700;
    white-space:nowrap;
}
@media (max-width:64rem) {
    .battle-list-grid { grid-template-columns:1fr; }
}
@media (max-width:40rem) {
    .battle-filter-tabs { overflow-x:auto; }
    .battle-list-matchup { gap:.35rem; }
    .battle-list-fandom img { width:4.6rem; height:4.6rem; }
}
/* ===== Battle list v2 ===== */
.battle-filter-tabs {
    display:flex;
    align-items:center;
    gap:.35rem;
    margin:2rem 0 1rem;
}
.battle-filter-tab {
    padding:.72rem 1rem;
    border-bottom:2px solid transparent;
    color:#aebbd1;
    text-decoration:none;
    font-weight:700;
}
.battle-filter-tab:hover { color:#fff; }
.battle-filter-tab.is-active {
    color:#fff;
    border-bottom-color:#d43cff;
    background:linear-gradient(180deg, rgb(87 34 143 / 28%), transparent);
    border-radius:.75rem .75rem 0 0;
}
.battle-list-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}
.battle-list-card {
    min-width:0;
    padding:1rem;
    border:1px solid #27364f;
    border-radius:1rem;
    background:linear-gradient(145deg,#0d192d,#0a1425);
}
.battle-list-card-top {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:.65rem;
}
.battle-list-card-top h3 { margin:0; font-size:1.05rem; }
.battle-list-card-top h3 a { color:#fff; text-decoration:none; }
.battle-list-matchup {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:.65rem;
    margin:1.1rem 0 .9rem;
}
.battle-list-fandom {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.28rem;
    color:inherit;
    text-align:center;
    text-decoration:none;
}
.battle-list-fandom img {
    width:5.5rem;
    height:5.5rem;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #5b68a8;
}
.battle-list-fandom strong { line-height:1.25; }
.battle-list-type {
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    color:#aab8cf;
    font-size:.76rem;
}
.battle-list-vs {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.65rem;
    height:2.65rem;
    border:1px solid #9c2f6e;
    border-radius:50%;
    background:#2b1027;
    color:#ff4aa8;
    font-size:.8rem;
    font-weight:800;
}
.battle-list-score-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.8rem;
}
.battle-list-score-side {
    display:grid;
    gap:.35rem;
    font-size:.82rem;
    font-weight:700;
}
.battle-list-score-side.is-right > span { text-align:right; }
.battle-list-progress {
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    height:.48rem;
    border:0;
    border-radius:999px;
    overflow:hidden;
    background:#16243b;
}
.battle-list-progress::-webkit-progress-bar { background:#16243b; }
.battle-list-progress-left::-webkit-progress-value {
    background:linear-gradient(90deg,#6255ff,#a53df2);
    border-radius:999px;
}
.battle-list-progress-right::-webkit-progress-value {
    background:linear-gradient(90deg,#c13be9,#f243ae);
    border-radius:999px;
}
.battle-list-progress-left::-moz-progress-bar {
    background:linear-gradient(90deg,#6255ff,#a53df2);
    border-radius:999px;
}
.battle-list-progress-right::-moz-progress-bar {
    background:linear-gradient(90deg,#c13be9,#f243ae);
    border-radius:999px;
}
.battle-list-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-top:1rem;
    padding-top:.85rem;
    border-top:1px solid #22314a;
}
.battle-list-open {
    color:#e2c5ff;
    text-decoration:none;
    font-weight:700;
    white-space:nowrap;
}
@media (max-width:64rem) {
    .battle-list-grid { grid-template-columns:1fr; }
}
@media (max-width:40rem) {
    .battle-filter-tabs { overflow-x:auto; }
    .battle-list-matchup { gap:.35rem; }
    .battle-list-fandom img { width:4.6rem; height:4.6rem; }
}

/* ===== Fan Wiki (fan-wiki-*) =========================================
   Namespaced to this feature only -- never touches .discovery-card,
   .hero, .badge etc.'s own rules, only reuses existing design tokens.
   2nd-pass refinement: less placeholder area, compact list-style
   directory/profile cards, subtler gradients, denser section rhythm --
   goal is a page that reads as a finished knowledge service even with
   zero real artwork yet. */

/* -- Hero: tighten the title/description block, no new markup needed
   (page-heading already flattens the card -- just trims its own gaps). -- */
.fan-wiki-hero.hero.page-heading { padding-bottom: 1.1rem; }
.fan-wiki-hero .hero-copy { margin-top: .5rem; }

/* -- Search -- */
.fan-wiki-search { margin: .25rem 0 1.75rem; }
.fan-wiki-search-field {
    display: flex;
    align-items: center;
    gap: .4rem;
    max-width: 40rem;
    padding: .4rem .4rem .4rem 1.2rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fan-wiki-search-field:focus-within {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px rgb(139 108 255 / 22%);
}
.fan-wiki-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    padding: .7rem .2rem;
}
.fan-wiki-search-input:focus { outline: none; }
.fan-wiki-search-input::placeholder { color: var(--muted-2); }
.fan-wiki-search-submit { flex: none; min-height: 2.6rem; padding-inline: 1.2rem; border-radius: var(--radius-pill); }

/* -- Directory: compact row-style card (avatar left, text right) instead
   of a large poster card -- keeps the whole link clickable/accessible,
   only the internal layout changes.
   4th-pass fix: the 3rd pass left row height purely content-driven with
   no explicit contract, so a row containing one long display name (or a
   type+country line long enough to wrap, since it had no nowrap guard)
   grew taller than its neighbors -- read as "inconsistent card height."
   Fixed here with an explicit grid-auto-rows per breakpoint + height:100%
   on every card + a hard line-clamp on all three text lines, so every
   card in the grid is the exact same height regardless of content. -- */
.fan-wiki-directory-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}
@media (min-width: 75rem) { .fan-wiki-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fan-wiki-entity-card.discovery-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    min-height: 0;
    height: 6.75rem;
    box-sizing: border-box;
    overflow: hidden;
}
.fan-wiki-entity-media {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-button);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1;
    color: rgb(245 240 255 / 92%);
    /* Subtler than the old poster gradient -- a dark base tinted with a
       thin diagonal accent wash rather than a full bright violet/pink
       fill, so a whole grid of these does not read as a wall of color. */
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--avatar-a, var(--accent)) 38%, var(--surface-elevated)), color-mix(in srgb, var(--avatar-b, var(--accent-2)) 30%, var(--surface-elevated)));
}
.fan-wiki-entity-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-wiki-entity-text { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .1rem; }
.fan-wiki-entity-type { margin: 0; color: var(--accent-2); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fan-wiki-entity-name {
    margin: 0;
    font-size: .86rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fan-wiki-entity-secondary { margin: 0; color: var(--muted-2); font-size: .7rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fan-wiki-entity-cta { flex: none; color: var(--accent-strong); font-weight: 700; font-size: .95rem; line-height: 1; }
@media (min-width: 48rem) {
    .fan-wiki-entity-media { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
    .fan-wiki-entity-card.discovery-card { padding: .55rem .8rem; gap: .7rem; height: 4.875rem; }
    .fan-wiki-entity-name { font-size: .9rem; -webkit-line-clamp: 1; }
}

/* -- Profile hero -- */
.fan-wiki-profile-hero {
    display: grid;
    gap: 1.1rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card-lg);
    background: linear-gradient(160deg, var(--surface-alt), var(--surface));
}
.fan-wiki-profile-portrait {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 800;
    font-size: 1.5rem;
    color: rgb(245 240 255 / 92%);
    background: linear-gradient(150deg, var(--avatar-a, var(--accent)), var(--avatar-b, var(--accent-2)));
}
.fan-wiki-profile-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-wiki-profile-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
.fan-wiki-profile-type { color: var(--accent-2); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fan-wiki-profile-status { color: var(--muted-2); font-size: .74rem; }
.fan-wiki-profile-content h1 { margin: 0; font-size: clamp(1.6rem, 4.2vw, 2.3rem); letter-spacing: -.02em; line-height: 1.15; }
.fan-wiki-profile-desc { max-width: 56rem; margin: .5rem 0 0; color: var(--muted); line-height: 1.6; font-size: .95rem; }
.fan-wiki-profile-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
@media (min-width: 40rem) {
    .fan-wiki-profile-hero { grid-template-columns: auto 1fr; align-items: start; }
    .fan-wiki-profile-portrait { width: 6.5rem; height: 6.5rem; font-size: 2.3rem; }
}

/* -- Section anchor navigation -- */
.fan-wiki-section-nav { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* -- Overview intro -- */
.fan-wiki-overview-intro { max-width: 60ch; color: var(--text); line-height: 1.65; font-size: 1rem; margin: 0 0 1.25rem; }

/* -- Info grid: slightly stronger label/value contrast -- */
.fan-wiki-info-grid { display: grid; gap: 1rem 1.5rem; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 36rem) { .fan-wiki-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .fan-wiki-info-grid { grid-template-columns: repeat(3, 1fr); } }
.fan-wiki-info-item dt { margin: 0 0 .28rem; color: var(--muted-2); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fan-wiki-info-item dd { margin: 0; color: var(--text); font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.fan-wiki-info-item dd a { color: var(--accent-strong); text-decoration: none; font-weight: 700; }
.fan-wiki-info-item dd a:hover { text-decoration: underline; }

/* -- Names: shorter rows, fixed-width locale chip -- */
.fan-wiki-names-list { display: grid; gap: .4rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
.fan-wiki-names-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem .7rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: rgb(255 255 255 / 2%);
}
.fan-wiki-names-locale {
    flex: none;
    width: 3.2rem;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .15rem .4rem;
    border-radius: .35rem;
    background: rgb(139 108 255 / 12%);
    text-align: center;
}
.fan-wiki-names-value { font-weight: 600; font-size: .92rem; }
.fan-wiki-names-more summary {
    cursor: pointer;
    color: var(--accent-strong);
    font-weight: 700;
    font-size: .86rem;
    list-style: none;
    padding: .3rem 0;
}
.fan-wiki-names-more summary::-webkit-details-marker { display: none; }
.fan-wiki-names-more summary::before { content: '▸ '; }
.fan-wiki-names-more[open] summary::before { content: '▾ '; }
.fan-wiki-names-more[open] summary { margin-bottom: .45rem; }

/* -- Compact empty state (Works/Awards) -- smaller than the shared
   .empty-state default, used only inside fan-wiki-* sections. -- */
.fan-wiki-empty-state { color: var(--muted); text-align: center; padding: 1.1rem 1.25rem; font-size: .9rem; }

/* -- Discography: denser grid, quieter cover, fixed row height.
   4th-pass fix: shrinking only the thumbnail in the 3rd pass left the
   card's own height purely content-driven, so most cards (no track list,
   short title) still had a large empty gap below a short title. A
   release WITH a track list is a genuinely different, longer card (the
   track list is real, wanted content), so that one card type is
   deliberately allowed to grow -- but the common empty-track-list case
   now gets an explicit compact row height instead of drifting to
   whatever the tallest sibling happened to need. -- */
.fan-wiki-discography-grid {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}
@media (min-width: 30rem) { .fan-wiki-discography-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .fan-wiki-discography-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .fan-wiki-discography-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fan-wiki-release-card.discovery-card {
    display: flex;
    flex-direction: column;
    padding: .55rem;
    min-height: 0;
    height: 7.625rem;
    box-sizing: border-box;
    overflow: hidden;
}
/* Track-bearing cards may grow because they contain real additional content.
   The global .discovery-card min-height must never leak back in. */
.fan-wiki-release-card.discovery-card:has(.fan-wiki-track-list) { height: auto; min-height: 0; }
.fan-wiki-release-cover {
    aspect-ratio: 1 / 1;
    width: 3.5rem;
    flex: none;
    margin: 0 0 .4rem;
    border-radius: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    font-size: .72rem;
    line-height: 1;
    color: rgb(245 240 255 / 85%);
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--avatar-a, var(--accent)) 34%, var(--surface-elevated)), color-mix(in srgb, var(--avatar-b, var(--accent-2)) 26%, var(--surface-elevated)));
}
.fan-wiki-release-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-wiki-release-card .eyebrow {
    display: inline-block;
    margin: 0 0 .2rem;
    padding: .08rem .4rem;
    border-radius: var(--radius-pill);
    background: rgb(139 108 255 / 10%);
    font-size: .58rem;
    color: var(--muted);
    font-weight: 700;
}
.fan-wiki-release-card h3 {
    margin: 0;
    font-size: .82rem;
    line-height: 1.2;
    /* Two-line clamp so a long title never pushes the card taller than
       the shared row -- the full title is still in the DOM and in the
       title="" attribute for accessibility/hover. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fan-wiki-release-card .meta { margin: .2rem 0 0; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fan-wiki-release-card .meta:empty { display: none; }
.fan-wiki-track-list { margin: .35rem 0 0; padding-left: .85rem; color: var(--muted); font-size: .72rem; }
.fan-wiki-track-list li { margin: .08rem 0; }

/* -- Works cards -- */
.fan-wiki-work-role { color: var(--muted); }

/* -- Section rhythm: slightly tighter than the default .discovery-section
   gap so four consecutive sections do not each carry a full marketing-
   page-sized gap between them. -- */
.fan-wiki-section { margin-top: 2rem; }
.fan-wiki-section:first-of-type { margin-top: 1.5rem; }

@media (max-width: 22.5rem) {
    .fan-wiki-profile-portrait { width: 3.5rem; height: 3.5rem; font-size: 1.3rem; }
}

/* ===== Fandom search/create (fandom-create-*, fandom-discovery-*) ====
   Namespaced to this page only. Deliberately independent of Fan Wiki's
   own .fan-wiki-* rules (a separate workstream is actively changing that
   file) even though the visual goal -- compact, search-first, dark
   premium -- is similar; nothing here is copied from or shared with it. */

.fandom-create-section { margin-top: 1.5rem; }

/* -- Search: reuses the shared .search-form grid/breakpoint behavior
   (unchanged), only adds a rounded-pill visual treatment on top. -- */
.fandom-create-search-form {
    max-width: 40rem;
    align-items: center;
}
.fandom-create-search-input {
    padding: .8rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.fandom-create-search-input:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px rgb(139 108 255 / 22%);
}
.fandom-create-search-submit { border-radius: var(--radius-pill); min-height: 2.9rem; padding-inline: 1.4rem; }

/* -- Result grid: compact cards, not tall posters. -- */
.fandom-discovery-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-top: 1.25rem; }
@media (min-width: 36rem) { .fandom-discovery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .fandom-discovery-grid { grid-template-columns: repeat(3, 1fr); } }
.fandom-discovery-card { padding: 1rem 1.1rem; }
/* P0-6.6 -- the default /create browse grid (before any search) wraps
   the whole card in a real <a>, unlike the search-results variant's
   inner form/button -- reset link defaults so it reads as a card, not
   underlined blue text, matching every other card-as-link pattern
   already used site-wide (e.g. .v1-music-card). */
.fandom-discovery-card-link { display: block; text-decoration: none; color: inherit; }
.fandom-discovery-card-link:hover { border-color: var(--border-accent); }
.fandom-create-browse-heading { margin: 1.5rem 0 0; font-size: 1.05rem; }
.fandom-create-browse-hint { margin: .75rem 0 0; color: var(--muted); font-size: .85rem; }
.fandom-discovery-type { margin: 0 0 .3rem; color: var(--accent-2); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fandom-discovery-name { margin: 0 0 .5rem; font-size: 1.05rem; }
.fandom-discovery-existing { margin: 0 0 .6rem; }
.fandom-discovery-cta { display: inline-block; min-height: 0; padding: .55rem 1rem; font-size: .88rem; }
.fandom-discovery-create-form {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}
.fandom-discovery-create-form input {
    flex: 1;
    min-width: 8rem;
    padding: .6rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.fandom-discovery-create-form .fandom-discovery-cta { flex: none; }

.fandom-create-prompt-text { margin: 1.5rem 0 0; color: var(--muted); font-weight: 600; }
.fandom-create-login-hint { margin: .5rem 0 0; color: var(--muted-2); font-size: .82rem; }

/* -- Propose-a-new-entity disclosure: collapsed by default so an empty
   search does not present a full registration form as the first thing on
   the page; native <details>, no JS. -- */
.fandom-create-more {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.fandom-create-more summary {
    cursor: pointer;
    list-style: none;
    color: var(--accent-strong);
    font-weight: 700;
    font-size: .95rem;
    padding: .3rem 0;
}
.fandom-create-more summary::-webkit-details-marker { display: none; }
.fandom-create-more summary::before { content: '+ '; }
.fandom-create-more[open] summary::before { content: '− '; }
.fandom-create-more[open] summary { margin-bottom: 1rem; }
.fandom-create-more h3 { margin: 0 0 .5rem; font-size: 1rem; }
.fandom-create-more h4 { margin: 0 0 .4rem; font-size: .92rem; }

@media (min-width: 30rem) {
    .fandom-discovery-create-form { flex-wrap: nowrap; }
}

/* ===== Fandom create UX v3: semantic three-state flow ================= */
.fandom-create-hero {
    max-width: 72rem;
    padding-bottom: 1.25rem;
}
.fandom-create-eyebrow,
.fandom-create-step {
    margin: 0 0 .35rem;
    color: var(--accent-2);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fandom-create-hero h1 { margin-bottom: .65rem; }
.fandom-create-hero .hero-copy { max-width: 42rem; }

.fandom-create-section {
    max-width: 72rem;
    margin-top: .75rem;
}
.fandom-create-search-shell {
    display: grid;
    gap: .8rem;
    padding: 1rem 0 1.15rem;
}
.fandom-create-search-shell h2,
.fandom-create-result-heading h2,
.fandom-create-not-found h2 {
    margin: 0;
    font-size: 1.15rem;
}
.fandom-create-search-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .65rem;
    width: min(100%, 44rem);
    max-width: none;
}
.fandom-create-search-input {
    width: 100%;
    min-width: 0;
    min-height: 3rem;
}
.fandom-create-search-submit { min-width: 5.2rem; }

.fandom-create-guide {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.fandom-create-guide > div {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 4.2rem;
    padding: .8rem .9rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: rgb(255 255 255 / 1.5%);
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
}
.fandom-create-guide strong {
    display: grid;
    place-items: center;
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: rgb(139 108 255 / 16%);
    color: var(--accent-strong);
    font-size: .8rem;
}

.fandom-create-result-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin: 1.25rem 0 .7rem;
}
.fandom-create-result-heading > p {
    max-width: 36rem;
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.45;
    text-align: right;
}
.fandom-discovery-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .75rem;
    margin-top: 0;
}
.fandom-discovery-card {
    min-height: 0 !important;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface);
}
.fandom-discovery-card.is-existing-fandom {
    border-color: rgb(75 210 157 / 30%);
    background: linear-gradient(145deg, rgb(75 210 157 / 4%), var(--surface) 42%);
}
.fandom-discovery-card.is-entity-only {
    border-color: rgb(139 108 255 / 34%);
    background: linear-gradient(145deg, rgb(139 108 255 / 5%), var(--surface) 42%);
}
.fandom-discovery-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: .8rem;
}
.fandom-discovery-type { margin-bottom: .2rem; }
.fandom-discovery-name { margin: 0; font-size: 1.12rem; }
.fandom-discovery-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: .22rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}
.is-existing-fandom .fandom-discovery-status {
    color: #9ce7c8;
    border-color: rgb(75 210 157 / 32%);
    background: rgb(75 210 157 / 8%);
}
.is-entity-only .fandom-discovery-status {
    color: #d5c9ff;
    border-color: rgb(139 108 255 / 34%);
    background: rgb(139 108 255 / 9%);
}
.fandom-discovery-explain {
    margin: .75rem 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.5;
}
.fandom-discovery-existing-name {
    margin: -.1rem 0 .75rem;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
}
.fandom-discovery-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}
.fandom-discovery-actions-secondary { margin-top: .55rem; }
.fandom-discovery-secondary,
.fandom-discovery-cta { min-height: 2.45rem; }
.fandom-inline-link {
    color: var(--accent-strong);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}
.fandom-inline-link:hover { text-decoration: underline; }

.fandom-discovery-create-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .55rem;
    align-items: end;
    margin-top: .75rem;
}
.fandom-discovery-create-form label {
    display: grid;
    gap: .32rem;
    min-width: 0;
    color: var(--muted-2);
    font-size: .72rem;
    font-weight: 700;
}
.fandom-discovery-create-form input {
    width: 100%;
    min-width: 0;
    min-height: 2.6rem;
}
.fandom-create-login-hint { margin: .55rem 0 0; }

.fandom-create-not-found {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: rgb(255 255 255 / 1.5%);
}
.fandom-create-not-found > span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 999px;
    background: rgb(139 108 255 / 14%);
    color: var(--accent-strong);
    font-weight: 900;
}
.fandom-create-not-found p { margin: .3rem 0 0; color: var(--muted); }

.fandom-create-more {
    margin-top: 1.25rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: rgb(255 255 255 / 1.2%);
    overflow: hidden;
}
.fandom-create-more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    color: var(--text);
}
.fandom-create-more summary::before { content: none !important; }
.fandom-create-more summary::after {
    content: '+';
    flex: none;
    color: var(--accent-strong);
    font-size: 1.2rem;
}
.fandom-create-more[open] summary::after { content: '−'; }
.fandom-create-more[open] summary { margin-bottom: 0; border-bottom: 1px solid var(--border); }
.fandom-create-more summary > span { font-weight: 800; }
.fandom-create-more summary small { color: var(--muted); font-size: .78rem; font-weight: 500; }
.fandom-create-new-panel { padding: 1rem; }
.fandom-create-new-intro { max-width: 46rem; margin-bottom: .9rem; }
.fandom-create-new-intro h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.fandom-create-new-intro > p:last-child { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.fandom-create-entity-form {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .8rem;
}
.fandom-create-entity-form > label:not(.confirm) {
    display: grid;
    gap: .35rem;
    min-width: 0;
    color: var(--muted-2);
    font-size: .74rem;
    font-weight: 700;
}
.fandom-create-entity-form input,
.fandom-create-entity-form select {
    width: 100%;
    min-width: 0;
    min-height: 2.7rem;
    padding: .62rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: .55rem;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.fandom-create-entity-form .confirm,
.fandom-create-form-actions { grid-column: 1 / -1; }
.fandom-create-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding-top: .15rem;
}
.fandom-create-form-actions .fandom-create-login-hint { margin: 0; }

@media (max-width: 48rem) {
    .fandom-create-result-heading { align-items: flex-start; flex-direction: column; }
    .fandom-create-result-heading > p { text-align: left; }
    .fandom-discovery-grid { grid-template-columns: 1fr; }
    .fandom-create-guide { grid-template-columns: 1fr; }
}
@media (max-width: 36rem) {
    .fandom-create-search-form { grid-template-columns: 1fr; }
    .fandom-create-search-submit { width: 100%; }
    .fandom-discovery-card-head { flex-direction: column; gap: .5rem; }
    .fandom-discovery-create-form { grid-template-columns: 1fr; }
    .fandom-discovery-create-form .fandom-discovery-cta { width: 100%; }
    .fandom-create-more summary { align-items: flex-start; }
    .fandom-create-more summary small { display: none; }
    .fandom-create-entity-form { grid-template-columns: 1fr; }
    .fandom-create-entity-form .confirm,
    .fandom-create-form-actions { grid-column: auto; }
}
/* ===== /Fandom create UX v3 ========================================== */

/* ===== Fandom create design v4: width, rhythm and control consistency ===== */
.fandom-create-hero,
.fandom-create-section {
    width: min(calc(100% - 2rem), 84rem);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}
.fandom-create-hero {
    display: block;
    padding-top: 2.2rem;
    padding-bottom: 1.25rem;
    text-align: left !important;
}
.fandom-create-hero .fandom-create-eyebrow,
.fandom-create-hero h1,
.fandom-create-hero .hero-copy {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.fandom-create-hero h1 {
    margin-top: .25rem;
    margin-bottom: .65rem;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.12;
}
.fandom-create-hero .hero-copy {
    max-width: 48rem;
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.65;
}

.fandom-create-section {
    margin-top: .25rem;
    padding-bottom: 2rem;
}
.fandom-create-search-shell {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    gap: 1.2rem 1.5rem;
    align-items: end;
    padding: 1rem 0 1.25rem;
}
.fandom-create-search-shell > div {
    min-width: 0;
}
.fandom-create-search-shell h2,
.fandom-create-result-heading h2,
.fandom-create-not-found h2 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}
.fandom-create-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.25rem;
    gap: .7rem;
    width: 100%;
    max-width: none;
    align-items: stretch;
}
.fandom-create-search-input,
.fandom-create-search-submit {
    box-sizing: border-box;
    height: 3.25rem;
    min-height: 3.25rem;
    margin: 0;
}
.fandom-create-search-input {
    width: 100%;
    min-width: 0;
    padding: 0 1rem;
    border-radius: .8rem;
}
.fandom-create-search-submit {
    width: 100%;
    min-width: 0;
    padding: 0 .9rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fandom-create-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .4rem;
}
.fandom-create-guide > div {
    min-height: 4rem;
    padding: .75rem .9rem;
}

.fandom-create-result-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 32rem);
    gap: 1rem 2rem;
    align-items: end;
    margin: 1.1rem 0 .75rem;
}
.fandom-create-result-heading > p {
    max-width: none;
    text-align: right;
}

.fandom-discovery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 31rem), 1fr));
    gap: .9rem;
    width: 100%;
    margin-top: 0;
}
.fandom-discovery-card {
    min-width: 0;
    min-height: 0 !important;
    padding: 1.1rem 1.15rem;
    border-radius: .9rem;
}
.fandom-discovery-card-head {
    align-items: center;
}
.fandom-discovery-explain {
    margin: .7rem 0 .8rem;
    max-width: 55rem;
}
.fandom-discovery-actions,
.fandom-discovery-create-form,
.fandom-create-form-actions {
    align-items: stretch;
}

/* Existing-fandom actions: identical control geometry. */
.fandom-discovery-actions .button,
.fandom-discovery-actions .button-secondary,
.fandom-discovery-create-form input,
.fandom-discovery-create-form button,
.fandom-create-entity-form input,
.fandom-create-entity-form select,
.fandom-create-form-actions .button {
    box-sizing: border-box;
    min-height: 2.9rem;
    height: 2.9rem;
    margin: 0;
}
.fandom-discovery-actions .button,
.fandom-discovery-actions .button-secondary,
.fandom-discovery-create-form button,
.fandom-create-form-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    border-radius: .65rem;
}
.fandom-discovery-actions .button,
.fandom-discovery-actions .button-secondary {
    min-width: 8rem;
}

/* Existing Entity -> create only the fandom. */
.fandom-discovery-create-form {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, auto);
    gap: .65rem;
    margin-top: .75rem;
}
.fandom-discovery-create-form label {
    gap: .35rem;
}
.fandom-discovery-create-form input {
    padding: 0 .8rem;
    border-radius: .65rem;
}
.fandom-discovery-create-form .fandom-discovery-cta {
    min-width: 11rem;
    white-space: nowrap;
}

.fandom-create-not-found,
.fandom-create-more {
    width: 100%;
}
.fandom-create-not-found {
    margin-top: .6rem;
    padding: .95rem 1rem;
}
.fandom-create-more {
    margin-top: 1rem;
    border-radius: .9rem;
}
.fandom-create-more summary {
    min-height: 3.8rem;
    padding: .9rem 1rem;
}
.fandom-create-more summary small {
    max-width: 34rem;
    text-align: right;
}
.fandom-create-new-panel {
    padding: 1.15rem;
}
.fandom-create-new-intro {
    max-width: 52rem;
}

/* New Entity + fandom form: balanced two-column layout using the full container. */
.fandom-create-entity-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1rem;
    width: 100%;
}
.fandom-create-entity-form > label:not(.confirm) {
    gap: .4rem;
}
.fandom-create-entity-form input,
.fandom-create-entity-form select {
    width: 100%;
    min-width: 0;
    padding: 0 .8rem;
    border-radius: .65rem;
}
.fandom-create-form-actions {
    min-height: 3rem;
    padding-top: .25rem;
}
.fandom-create-form-actions .button {
    min-width: 10.5rem;
}

/* Keep long values from pushing the layout sideways. */
.fandom-discovery-name,
.fandom-discovery-existing-name,
.fandom-create-entity-form,
.fandom-create-search-shell,
.fandom-create-result-heading {
    min-width: 0;
}

@media (max-width: 64rem) {
    .fandom-create-search-shell {
        grid-template-columns: 1fr;
        gap: .7rem;
    }
    .fandom-create-result-heading {
        grid-template-columns: 1fr;
        gap: .35rem;
        align-items: start;
    }
    .fandom-create-result-heading > p {
        text-align: left;
    }
}

@media (max-width: 48rem) {
    .fandom-create-hero,
    .fandom-create-section {
        width: min(calc(100% - 1.25rem), 84rem);
    }
    .fandom-create-hero {
        padding-top: 1.25rem;
    }
    .fandom-create-guide {
        grid-template-columns: 1fr;
    }
    .fandom-discovery-grid {
        grid-template-columns: 1fr;
    }
    .fandom-create-entity-form {
        grid-template-columns: 1fr;
    }
    .fandom-create-entity-form .confirm,
    .fandom-create-form-actions {
        grid-column: auto;
    }
}

@media (max-width: 36rem) {
    .fandom-create-search-form {
        grid-template-columns: minmax(0, 1fr) 5.4rem;
        gap: .5rem;
    }
    .fandom-create-search-input,
    .fandom-create-search-submit {
        height: 3rem;
        min-height: 3rem;
    }
    .fandom-discovery-card {
        padding: .95rem;
    }
    .fandom-discovery-card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: .45rem;
    }
    .fandom-discovery-create-form {
        grid-template-columns: 1fr;
    }
    .fandom-discovery-create-form .fandom-discovery-cta,
    .fandom-create-form-actions .button,
    .fandom-discovery-actions .button,
    .fandom-discovery-actions .button-secondary {
        width: 100%;
        min-width: 0;
    }
    .fandom-create-more summary {
        align-items: center;
    }
    .fandom-create-more summary small {
        display: none;
    }
}
/* ===== /Fandom create design v4 ====================================== */


/* ===== FAN INCHART fandom create control alignment v6 =====
   Exact 46px control geometry. Overrides the previous v5 control block. */

.fandom-create-section {
    --fandom-control-h: 46px;
}

/* Search row */
.fandom-create-search-form {
    align-items: center !important;
}
.fandom-create-search-input,
.fandom-create-search-submit {
    box-sizing: border-box !important;
    height: var(--fandom-control-h) !important;
    min-height: var(--fandom-control-h) !important;
    max-height: var(--fandom-control-h) !important;
    margin: 0 !important;
    border-radius: 12px !important;
}
.fandom-create-search-input {
    padding: 0 14px !important;
    line-height: normal !important;
}
.fandom-create-search-submit {
    padding: 0 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 .45rem 1rem rgb(113 53 236 / 18%) !important;
}

/* Existing Entity -> fandom creation */
.fandom-discovery-create-form {
    align-items: end !important;
}
.fandom-discovery-create-form input,
.fandom-discovery-create-form .fandom-discovery-cta {
    box-sizing: border-box !important;
    height: var(--fandom-control-h) !important;
    min-height: var(--fandom-control-h) !important;
    max-height: var(--fandom-control-h) !important;
    margin: 0 !important;
    border-radius: 12px !important;
}
.fandom-discovery-create-form input {
    padding: 0 14px !important;
    line-height: normal !important;
}
.fandom-discovery-create-form .fandom-discovery-cta {
    padding: 0 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 .45rem 1rem rgb(113 53 236 / 18%) !important;
}

/* Existing fandom action buttons */
.fandom-discovery-actions .button,
.fandom-discovery-actions .button-secondary {
    box-sizing: border-box !important;
    height: var(--fandom-control-h) !important;
    min-height: var(--fandom-control-h) !important;
    max-height: var(--fandom-control-h) !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    line-height: 1 !important;
}

/* New Entity + fandom form */
.fandom-create-entity-form input,
.fandom-create-entity-form select,
.fandom-create-form-actions .button,
.fandom-create-form-actions button[type="submit"] {
    box-sizing: border-box !important;
    height: var(--fandom-control-h) !important;
    min-height: var(--fandom-control-h) !important;
    max-height: var(--fandom-control-h) !important;
    margin: 0 !important;
    border-radius: 12px !important;
}
.fandom-create-entity-form input,
.fandom-create-entity-form select {
    padding-block: 0 !important;
    padding-inline: 14px !important;
    line-height: normal !important;
}
.fandom-create-form-actions .button,
.fandom-create-form-actions button[type="submit"] {
    padding: 0 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 .45rem 1rem rgb(113 53 236 / 18%) !important;
}

@media (max-width: 35.99rem) {
    .fandom-create-section { --fandom-control-h: 44px; }
}
/* ===== /FAN INCHART fandom create control alignment v6 ===== */

/* === Fandom create hero background: herobg_fandom.jpg === */
.hero.page-heading.fandom-create-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background:
        linear-gradient(90deg,
            rgba(4, 7, 20, .95) 0%,
            rgba(4, 7, 20, .86) 34%,
            rgba(4, 7, 20, .54) 58%,
            rgba(4, 7, 20, .18) 100%),
        linear-gradient(180deg,
            rgba(5, 7, 20, .05) 0%,
            rgba(5, 7, 20, .10) 55%,
            rgba(5, 7, 20, .48) 100%),
        url('/assets/images/hero/herobg_fandom.jpg') center right / cover no-repeat;
}

.hero.page-heading.fandom-create-hero > * {
    position: relative;
    z-index: 1;
}

.hero.page-heading.fandom-create-hero .hero-copy,
.hero.page-heading.fandom-create-hero .page-heading-copy {
    max-width: 760px;
}

@media (max-width: 767px) {
    .hero.page-heading.fandom-create-hero {
        min-height: 0;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        background:
            linear-gradient(90deg,
                rgba(4, 7, 20, .96) 0%,
                rgba(4, 7, 20, .90) 52%,
                rgba(4, 7, 20, .56) 100%),
            linear-gradient(180deg,
                rgba(5, 7, 20, .06) 0%,
                rgba(5, 7, 20, .20) 58%,
                rgba(5, 7, 20, .60) 100%),
            url('/assets/images/hero/herobg_fandom.jpg') 68% center / cover no-repeat;
    }
}


/* ===== FAN WIKI directory design v2 — 2026-09-14 ====================
   Design only. No functional/search/PHP changes. */
.hero.page-heading.fan-wiki-hero {
    position: relative;
    isolation: isolate;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    min-height: 9rem !important;
    padding: 1.35rem 1.75rem !important;
    border: 1px solid rgb(150 162 214 / 14%) !important;
    border-radius: 1.1rem !important;
    overflow: hidden;
    text-align: left !important;
    background:
        linear-gradient(90deg,
            rgba(4, 7, 20, .96) 0%,
            rgba(4, 7, 20, .88) 34%,
            rgba(4, 7, 20, .58) 60%,
            rgba(4, 7, 20, .20) 100%),
        linear-gradient(180deg,
            rgba(5, 7, 20, .04) 0%,
            rgba(5, 7, 20, .14) 62%,
            rgba(5, 7, 20, .46) 100%),
        url('/assets/images/hero/herobg_wiki.jpg') center right / cover no-repeat !important;
    box-shadow: none !important;
}
.hero.page-heading.fan-wiki-hero::before,
.hero.page-heading.fan-wiki-hero::after { display: none !important; }
.hero.page-heading.fan-wiki-hero > * {
    position: relative;
    z-index: 1;
    text-align: left !important;
}
.hero.page-heading.fan-wiki-hero > .eyebrow {
    margin: 0 0 .45rem !important;
    color: #e5e7f3;
}
.hero.page-heading.fan-wiki-hero > h1 {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem) !important;
    line-height: 1.08 !important;
}
.hero.page-heading.fan-wiki-hero > .hero-copy {
    max-width: 46rem !important;
    margin: .55rem 0 0 !important;
    color: #c2c8dd;
    font-size: clamp(.88rem, 1.25vw, 1rem) !important;
    line-height: 1.55 !important;
}

.fan-wiki-section {
    margin-top: 1.5rem !important;
}
.fan-wiki-section .section-heading {
    margin-bottom: 1rem !important;
}

/* Search input, type, country and submit are four independent controls. */
.fan-wiki-search {
    margin: .15rem 0 1.35rem !important;
}
.fan-wiki-search-field {
    display: grid !important;
    grid-template-columns: minmax(16rem, 1fr) minmax(9.5rem, 11rem) minmax(10.5rem, 13rem) auto;
    align-items: stretch !important;
    gap: .65rem !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.fan-wiki-search-field:focus-within {
    border-color: transparent !important;
    box-shadow: none !important;
}
.fan-wiki-search-input,
.fan-wiki-filter-select {
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding: 0 .95rem !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: .8rem !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    font: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.fan-wiki-search-input:focus,
.fan-wiki-filter-select:focus {
    border-color: var(--border-accent) !important;
    box-shadow: 0 0 0 3px rgb(139 108 255 / 16%) !important;
    background: var(--surface-elevated) !important;
}
.fan-wiki-search-input::placeholder { color: var(--muted-2); }
.fan-wiki-filter-select { cursor: pointer; }
.fan-wiki-search-submit {
    min-width: 5.5rem;
    min-height: 3rem !important;
    height: 3rem;
    padding: 0 1.25rem !important;
    border-radius: .8rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 56rem) {
    .fan-wiki-search-field {
        grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 10rem) minmax(9.5rem, 11rem) auto;
        gap: .5rem !important;
    }
}
@media (max-width: 44rem) {
    .hero.page-heading.fan-wiki-hero {
        min-height: 8.25rem !important;
        padding: 1.2rem 1.25rem !important;
        background:
            linear-gradient(90deg,
                rgba(4, 7, 20, .97) 0%,
                rgba(4, 7, 20, .91) 48%,
                rgba(4, 7, 20, .55) 100%),
            linear-gradient(180deg,
                rgba(5, 7, 20, .06) 0%,
                rgba(5, 7, 20, .22) 62%,
                rgba(5, 7, 20, .58) 100%),
            url('/assets/images/hero/herobg_wiki.jpg') 68% center / cover no-repeat !important;
    }
    .fan-wiki-search-field {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .fan-wiki-search-input,
    .fan-wiki-search-submit {
        grid-column: 1 / -1;
    }
    .fan-wiki-search-input,
    .fan-wiki-filter-select,
    .fan-wiki-search-submit {
        height: 2.85rem;
        min-height: 2.85rem !important;
    }
}
/* ===== /FAN WIKI directory design v2 ================================ */

/* ===== MUSIC TALK discovery polish v1 — 2026-09-14 ================= */
/* Search: scoped to /music only; keeps Claude's GET q behavior intact. */
.v1-music-search-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem !important;
    align-items: center;
    width: 100%;
    max-width: none !important;
    margin: 1.25rem 0 1rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.v1-music-search-form > input[type="search"] {
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding: 0 1rem !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: .8rem !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    font: inherit;
    outline: none;
    box-shadow: inset 0 1px rgb(255 255 255 / 2%);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.v1-music-search-form > input[type="search"]::placeholder { color: var(--muted-2); }
.v1-music-search-form > input[type="search"]:focus {
    border-color: var(--border-accent) !important;
    background: var(--surface-elevated) !important;
    box-shadow: 0 0 0 3px rgb(139 108 255 / 16%) !important;
}
.v1-music-search-form > .button {
    min-width: 5.5rem;
    width: auto !important;
    height: 3rem;
    min-height: 3rem !important;
    padding: 0 1.25rem !important;
    border-radius: .8rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Card state: make playback information read as live room status. */
.v1-music-card .v1-music-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.7rem;
    margin-top: .05rem;
    padding: .28rem .65rem;
    border: 1px solid rgb(139 108 255 / 24%);
    border-radius: 999px;
    background: rgb(139 108 255 / 9%);
    color: var(--accent-strong);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.v1-music-card .v1-music-card-status::before {
    content: "♪";
    margin-right: .35rem;
    font-size: .8rem;
    line-height: 1;
}
.v1-music-card > .meta:not(.v1-music-card-status) {
    color: var(--muted);
    font-size: .76rem;
}
.v1-music-card .v1-card-arrow {
    width: 1.7rem;
    height: 1.7rem;
    margin-top: .05rem;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(139 108 255 / 9%);
    transition: transform .15s ease, background-color .15s ease;
}
a.v1-music-card:hover .v1-card-arrow {
    transform: translateX(.15rem);
    background: rgb(139 108 255 / 16%);
}

@media (max-width: 44rem) {
    .v1-music-search-form {
        gap: .5rem !important;
        margin-top: 1rem !important;
    }
    .v1-music-search-form > input[type="search"],
    .v1-music-search-form > .button {
        height: 2.85rem;
        min-height: 2.85rem !important;
    }
    .v1-music-search-form > .button {
        min-width: 4.75rem;
        padding: 0 1rem !important;
    }
    .v1-music-card .v1-music-card-status {
        padding-inline: .5rem;
        font-size: .7rem;
    }
}

@media (max-width: 28rem) {
    .v1-music-search-form {
        grid-template-columns: 1fr;
    }
    .v1-music-search-form > .button {
        width: 100% !important;
    }
}
/* ===== /MUSIC TALK discovery polish v1 ============================= */


/* ===== MUSIC TALK presence design v1 — 2026-09-14 ================== */
/* Visual-only pass over Claude's Presence markup/behavior. */
.listening-room-chat-section {
    position: relative;
}
.listening-room-participants {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgb(139 108 255 / 7%), transparent 5.5rem), var(--surface);
    box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}
.listening-room-participants-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--border);
}
.listening-room-participants-head > div { min-width: 0; flex: 1; }
.listening-room-participants-head h3 {
    margin: .12rem 0 0;
    font-size: .98rem;
    line-height: 1.25;
}
.listening-room-participants-kicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--accent-strong);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.listening-room-participants-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .55rem;
    border: 1px solid rgb(139 108 255 / 24%);
    border-radius: 999px;
    background: rgb(139 108 255 / 10%);
    color: var(--accent-strong);
    font-size: .78rem;
    font-weight: 800;
}
.listening-room-participant-list {
    display: grid;
    gap: .25rem;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 25rem;
    overflow: auto;
}
.listening-room-participant {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .55rem .5rem;
    border-radius: .75rem;
    font-size: .82rem;
    font-weight: 650;
}
.listening-room-participant:hover { background: rgb(255 255 255 / 3%); }
.listening-room-participant > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.listening-room-participant .avatar-fallback {
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgb(139 108 255 / 24%);
}
.listening-room-participants-close,
.listening-room-participants-mobile-toggle,
.listening-room-participants-scrim { display: none; }

/* MUSIC TALK P0-5 -- discovery card status is now two independent lines
   (participant count / current playback), never the single combined
   pill this replaces. The container keeps one visual "status" box, but
   each line wraps and reads independently -- no nowrap/fixed width, so
   a 1,000+ participant count or a 3+ digit track index never breaks the
   layout, in any of the 4 locales. */
.v1-music-card .v1-music-card-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    max-width: 100%;
    white-space: normal;
    padding: .3rem .65rem;
}
.v1-music-card .v1-music-card-status::before {
    content: none;
}
.v1-music-card-status-line {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}
.v1-music-card-status-dot,
.v1-music-card-status-note {
    flex: 0 0 auto;
    color: var(--accent-strong);
    font-size: .6rem;
}

/* MUSIC TALK P0-5 -- RANKING mode rank badge on a qualifying card. */
.v1-music-card {
    position: relative;
}
.v1-music-card-rank {
    position: absolute;
    top: .55rem;
    left: .55rem;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent-strong);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}

/* MUSIC TALK P0-5 -- RANKING mode TOP3 ticker / RANDOM mode CTA. */
.discovery-top3 {
    margin: 1rem 0 1.4rem;
    padding: .9rem 1rem;
    border: 1px solid rgb(139 108 255 / 24%);
    border-radius: var(--radius-card);
    background: rgb(139 108 255 / 6%);
}
.discovery-top3-title {
    margin: 0 0 .6rem;
    font-size: .95rem;
}
.discovery-top3-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.discovery-top3-item { flex: 1 1 12rem; min-width: 0; }
.discovery-top3-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    border-radius: .7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.discovery-top3-rank {
    flex: 0 0 auto;
    min-width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent-strong);
    color: #fff;
    font-weight: 800;
    font-size: .8rem;
}
.discovery-top3-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}
.discovery-random-cta {
    margin: 1rem 0 1.4rem;
    padding: .9rem 1rem;
    border: 1px dashed rgb(139 108 255 / 32%);
    border-radius: var(--radius-card);
    background: rgb(139 108 255 / 5%);
    color: var(--text);
    overflow-wrap: anywhere;
}
@media (max-width: 34rem) {
    .discovery-top3-list { flex-direction: column; }
    .discovery-top3-item { flex-basis: auto; }
}

@media (max-width: 52rem) {
    .listening-room-participants-mobile-toggle {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        margin-top: .75rem;
        padding: .7rem .85rem;
        border: 1px solid rgb(139 108 255 / 22%);
        border-radius: .85rem;
        background: rgb(139 108 255 / 8%);
        color: var(--text);
        font: inherit;
        font-size: .8rem;
        font-weight: 750;
        cursor: pointer;
    }
    .listening-room-participants-mobile-toggle strong {
        margin-left: auto;
        color: var(--accent-strong);
        font-size: .78rem;
    }
    .listening-room-participants {
        position: fixed;
        z-index: 1002;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: min(72vh, 34rem);
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: 1.15rem 1.15rem 0 0;
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .2s ease, visibility .2s ease;
        box-shadow: 0 -1rem 3rem rgb(0 0 0 / 28%);
    }
    .listening-room-participants.is-open {
        transform: translateY(0);
        visibility: visible;
    }
    .listening-room-participants-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgb(255 255 255 / 6%);
        color: var(--muted);
        font: inherit;
        font-size: 1.25rem;
        cursor: pointer;
    }
    .listening-room-participants-scrim {
        position: fixed;
        z-index: 1001;
        inset: 0;
        background: rgb(0 0 0 / 54%);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }
    html.music-participants-open .listening-room-participants-scrim {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    html.music-participants-open { overflow: hidden; }
    .listening-room-participant-list { max-height: calc(min(72vh, 34rem) - 5.25rem); }
}
/* ===== /MUSIC TALK presence design v1 ============================== */

/* Music Talk chat meta row (date/time + report) -- keeps them on one line
   regardless of message content length, for both PHP-rendered and
   JS-appended messages (same markup, see resources/views/fandom/
   listening-room.php and assets/js/listening-room-chat.js). Functional
   fix only; broader chat visual design remains a separate pass. */
.chat-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .4rem;
    max-width: 100%;
}
.is-mine .chat-meta-row { justify-content: flex-end; }
.chat-meta-row .chat-time { margin: 0; white-space: nowrap; }
.chat-meta-row .listening-room-chat-report { margin: 0; flex: none; white-space: nowrap; }

/* Music Talk reply-to-message -- minimal functional styling only; final
   visual design is a separate pass. Reuses existing tokens/patterns
   (.listening-room-chat-report's transparent/underline treatment). */
.chat-reply-context {
    display: block;
    margin: 0 0 .3rem;
    padding: .3rem .5rem;
    border-left: 2px solid var(--border-strong);
    cursor: pointer;
    font-size: .78rem;
    line-height: 1.3;
}
.chat-reply-author { display: block; color: var(--muted); font-weight: 700; }
.chat-reply-excerpt { display: block; color: var(--muted-2); overflow-wrap: anywhere; }
.chat-reply-deleted { display: block; color: var(--muted-2); font-style: italic; }
.listening-room-chat-reply {
    border: 0;
    background: transparent;
    color: var(--muted-2);
    font-size: .7rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex: none;
    white-space: nowrap;
}
.listening-room-reply-draft {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .4rem;
    padding: .4rem .6rem;
    border-left: 2px solid var(--border-accent, var(--border-strong));
    background: rgb(139 108 255 / 8%);
    font-size: .8rem;
}
.listening-room-reply-draft-label { font-weight: 700; color: var(--muted); flex: none; }
.listening-room-reply-draft-excerpt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-2); }
.listening-room-reply-draft-cancel {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .2rem;
}
.listening-room-chat-message.is-reply-highlight { animation: listening-room-reply-flash 1.8s ease; }
@keyframes listening-room-reply-flash {
    0% { background-color: rgb(139 108 255 / 22%); }
    100% { background-color: transparent; }
}

/* ===== MUSIC TALK final chat/participants visual polish v3 — 2026-09-14 ===== */
/* System join events: no chat bubble, brighter centered label with divider lines. */
.listening-room-chat-message.is-system {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin: .3rem 0;
    padding: .12rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.listening-room-chat-system {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
}
.listening-room-chat-system::before,
.listening-room-chat-system::after {
    content: "";
    flex: 1 1 auto;
    min-width: 1.5rem;
    height: 1px;
    background: var(--border-strong);
    opacity: .75;
}

/* Participant panel: reduce overall typography, keep the live count prominent. */
.listening-room-participants {
    font-size: .78rem;
}
.listening-room-participants-kicker {
    font-size: .58rem;
    letter-spacing: .045em;
}
.listening-room-participants-head h3 {
    font-size: .84rem;
    line-height: 1.2;
}
.listening-room-participant {
    font-size: .74rem;
    line-height: 1.2;
}
.listening-room-participants-count {
    min-width: 2rem;
    height: 2rem;
    padding: 0 .58rem;
    border-color: rgb(139 108 255 / 58%);
    background: rgb(139 108 255 / 22%);
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
    box-shadow: 0 0 0 1px rgb(139 108 255 / 10%), 0 0 1rem rgb(139 108 255 / 12%);
}
.listening-room-participants-mobile-toggle {
    font-size: .74rem;
}
.listening-room-participants-mobile-toggle strong {
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
}

@media (max-width: 32rem) {
    .listening-room-chat-system {
        gap: .45rem;
        font-size: .64rem;
    }
    .listening-room-chat-system::before,
    .listening-room-chat-system::after {
        min-width: .8rem;
    }
}
/* ===== /MUSIC TALK final chat/participants visual polish v3 ===== */


/* ===== MUSIC TALK chat polish v4 — 2026-09-14 ===================== */
/* Restore the prominent Reply action that was unintentionally lost in v3. */
.listening-room-chat-reply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    min-height: 1.35rem;
    padding: .08rem .42rem;
    border: 1px solid rgb(139 92 246 / 56%);
    border-radius: 999px;
    background: rgb(124 58 237 / 18%);
    color: #c9b8ff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.listening-room-chat-reply::before {
    content: "↩";
    font-size: .72rem;
    line-height: 1;
}
.listening-room-chat-reply:hover,
.listening-room-chat-reply:focus-visible {
    border-color: rgb(168 85 247 / 86%);
    background: rgb(124 58 237 / 28%);
    color: #f0ebff;
}

/* Reply draft must occupy no space until an actual reply target is selected. */
.listening-room-reply-draft[hidden] {
    display: none !important;
}

/* Composer: input and Send button use exactly the same visual height. */
.listening-room-chat-form {
    align-items: stretch;
    flex-wrap: nowrap;
}
.listening-room-chat-form textarea,
#listening-room-chat-submit {
    box-sizing: border-box;
    height: 3.65rem;
    min-height: 3.65rem;
}
.listening-room-chat-form textarea {
    resize: none;
}
#listening-room-chat-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding-block: 0;
}

/* Participant avatars: deliberately smaller than the global size-sm avatar. */
.listening-room-participant .avatar-fallback.size-sm {
    width: 1.7rem;
    height: 1.7rem;
    font-size: .64rem;
}

@media (max-width: 32rem) {
    .listening-room-chat-form {
        gap: .45rem;
    }
    .listening-room-chat-form textarea,
    #listening-room-chat-submit {
        height: 3.5rem;
        min-height: 3.5rem;
    }
    #listening-room-chat-submit {
        padding-inline: .9rem;
    }
}
/* ===== /MUSIC TALK chat polish v4 ================================ */

/* Member profile image upload -- minimal functional styling only; final
   visual design is a separate pass. */
.avatar-upload-field {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.avatar-upload-preview { background-size: cover; background-position: center; }
/* Sized to match .button-secondary exactly (same min-height, padding,
   border, radius, weight) so "프로필사진변경" and "프로필사진삭제" read as
   one consistent pair, not two different-looking controls. */
.avatar-upload-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    box-sizing: border-box;
    padding: .8rem 1.35rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    cursor: pointer;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
    background: rgb(7 12 27 / 54%);
}
.avatar-upload-inline-form { display: inline-flex; margin: 0; }
.profile-avatar-upload-form { display: inline-flex; align-items: center; margin: 0; }
@media (max-width: 26rem) {
    .avatar-upload-field { flex-direction: column; align-items: flex-start; }
    .avatar-upload-label, .avatar-upload-inline-form, .profile-avatar-upload-form { width: 100%; }
    .avatar-upload-label { justify-content: center; box-sizing: border-box; }
}
.consent-field { display: flex; flex-direction: column; gap: .4rem; margin: 1rem 0; }
.consent-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    padding: .3rem .5rem;
    font-size: .85rem;
    font-weight: normal;
    color: var(--text);
    cursor: pointer;
    border-radius: var(--radius-button);
}
.consent-checkbox-input {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.consent-row-text { flex: 1 1 auto; line-height: 1.4; }
.consent-row-all {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    font-weight: 600;
    margin-bottom: .15rem;
}
.consent-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    padding: .2rem .4rem;
    border-radius: .3rem;
    margin-right: .3rem;
    vertical-align: middle;
    white-space: nowrap;
}
.consent-badge-required { background: var(--accent); color: var(--bg); }
.consent-badge-optional { background: var(--border-strong); color: var(--text); }
.consent-link { color: var(--accent); text-decoration: underline; white-space: nowrap; }
@media (max-width: 26rem) {
    .consent-row { align-items: flex-start; padding: .4rem .35rem; }
    .consent-checkbox-input { margin-top: .15rem; }
}
/* Legacy alias -- account/index.php's marketing-consent toggle still uses
   this class name and was not part of this UI-only pass. */
.consent-checkbox { display: flex; align-items: center; gap: .65rem; min-height: 44px; font-size: .85rem; font-weight: normal; cursor: pointer; }
.consent-checkbox input[type="checkbox"] { width: 21px; height: 21px; margin: 0; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

/* ===== Launch UI finishing pass — 2026-09-14 ====================== */
/* Registration consent: override generic .form-card label grid so every
   checkbox and its copy form one large, left-aligned touch target. */
.form-card label.consent-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .7rem;
    min-height: 48px;
    padding: .55rem .65rem;
    color: var(--text);
}
.form-card label.consent-row .consent-checkbox-input {
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
}
.form-card label.consent-row .consent-row-text { min-width: 0; }
@media (max-width: 26rem) {
    .form-card label.consent-row { align-items: center; padding: .55rem .35rem; }
    .form-card label.consent-row .consent-checkbox-input { margin: 0; }
}

/* Mobile header: logo left, menu trigger at the right edge. */
@media (max-width: 63.99rem) {
    .site-header .header-start { width: 100%; gap: .75rem; }
    .site-header .nav-menu { margin-left: auto; }
    .nav-menu nav a[aria-current="page"]::after {
        left: .9rem;
        right: auto;
        bottom: .28rem;
        width: 2.25rem;
    }
}

/* Music Talk heading: title + LIVE stay together; online count owns far right. */
.listening-room-chat-section > .section-heading {
    justify-content: flex-start;
    gap: .55rem;
    align-items: center;
}
.listening-room-chat-section > .section-heading .meta { margin-left: auto; }

/* Give the participant surface breathing room below the composer. */
.listening-room-chat-section + .listening-room-participants { margin-top: 1rem; }
@media (max-width: 52rem) {
    .listening-room-participants-mobile-toggle { margin-top: 1rem; }
}

/* Chat-only scrollbar: slim dark rail + restrained violet thumb. */
.listening-room-chat-list {
    scrollbar-width: thin;
    scrollbar-color: rgb(139 92 246 / 65%) rgb(7 11 24 / 78%);
}
.listening-room-chat-list::-webkit-scrollbar { width: 7px; }
.listening-room-chat-list::-webkit-scrollbar-track {
    background: rgb(7 11 24 / 78%);
    border-radius: 999px;
}
.listening-room-chat-list::-webkit-scrollbar-thumb {
    background: rgb(139 92 246 / 58%);
    border-radius: 999px;
    border: 2px solid rgb(7 11 24 / 78%);
}
.listening-room-chat-list::-webkit-scrollbar-thumb:hover { background: rgb(168 85 247 / 82%); }
.listening-room-chat-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Reply is a lightweight text action, not another pill/button. */
.listening-room-chat-reply {
    min-height: 1.4rem;
    padding: .05rem .12rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #b9a4ff;
    box-shadow: none;
}
.listening-room-chat-reply:hover,
.listening-room-chat-reply:focus-visible {
    border: 0;
    background: transparent;
    color: #dfd4ff;
    text-decoration: underline;
}
/* ===== /Launch UI finishing pass =================================== */
/* Correct structural targets for the two-column listening-room markup. */
.listening-room-page > .section-heading {
    justify-content: flex-start;
    gap: .55rem;
    align-items: center;
}
.listening-room-page > .section-heading .meta { margin-left: auto; }
.listening-room-chat-section > .listening-room-participants { margin-top: 1rem; }


/* ===== Account avatar + consent correction — 2026-09-14 ===== */
/* The generic .form-card label rule is grid-based. Account consent rows
   must override it explicitly or the checkbox/badge/text are split into
   separate grid cells. */
.form-card label.consent-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .7rem;
}
.form-card label.consent-row .consent-row-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}
.form-card label.consent-row .consent-badge { margin-right: 0; }

/* ===== /Account avatar + consent correction =================== */

/* ===== FAN INCHART /create compact browse UI v8 ===== */
/* Match the V1 feature hero geometry while retaining the fandom artwork. */
.hero.page-heading.feature-hero.fandom-create-hero {
    min-height: clamp(18rem, 28vw, 21rem);
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid rgb(150 162 214 / 14%);
    border-radius: 1.35rem;
    justify-content: flex-end;
    box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 1.25rem 2.75rem rgb(0 0 0 / 24%);
}

.fandom-create-browse-heading {
    margin: 1.35rem 0 .75rem;
}

/* Browse-only cards are intentionally compact; search-result cards keep their form layout. */
.fandom-create-section .fandom-discovery-grid:has(.fandom-browse-card) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}
.fandom-browse-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    min-height: 5.25rem !important;
    padding: .72rem .8rem !important;
    text-decoration: none;
}
.fandom-browse-avatar {
    width: 3.65rem;
    height: 3.65rem;
    flex: 0 0 3.65rem;
    border-radius: 50%;
    object-fit: cover;
    background: #10172a;
    border: 1px solid rgb(173 184 230 / 18%);
}
.fandom-browse-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.25;
}
.fandom-browse-card .fandom-discovery-type,
.fandom-browse-card .fandom-discovery-name,
.fandom-browse-card .fandom-discovery-existing {
    display: block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fandom-browse-card .fandom-discovery-type {
    margin-bottom: .28rem;
    font-size: .72rem;
}
.fandom-browse-card .fandom-discovery-name {
    font-size: .98rem;
}
.fandom-browse-card .fandom-discovery-existing {
    margin-top: .22rem;
    font-size: .78rem;
}
.fandom-create-browse-hint {
    margin: .7rem 0 .9rem;
}
.fandom-create-more {
    margin-top: .75rem;
}

@media (max-width: 62rem) {
    .fandom-create-section .fandom-discovery-grid:has(.fandom-browse-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 40rem) {
    .hero.page-heading.feature-hero.fandom-create-hero {
        min-height: 15rem;
        padding: 1.5rem;
        border-radius: 1rem;
    }
    .fandom-create-section .fandom-discovery-grid:has(.fandom-browse-card) {
        grid-template-columns: 1fr;
    }
    .fandom-browse-card {
        min-height: 4.85rem !important;
    }
    .fandom-browse-avatar {
        width: 3.35rem;
        height: 3.35rem;
        flex-basis: 3.35rem;
    }
}
/* ===== /FAN INCHART /create compact browse UI v8 ===== */

/* ===== FAN INCHART /create UX polish v9 FIX ===== */

.fandom-create-section .fandom-discovery-grid:has(.fandom-browse-card) {
    gap: .7rem !important;
    row-gap: .7rem !important;
    margin-bottom: 0 !important;
}

.fandom-create-section .fandom-browse-card {
    margin: 0 !important;
}

.fandom-create-browse-hint {
    margin: .55rem 0 .65rem !important;
}

.fandom-create-more {
    margin-top: .55rem !important;
}

.fandom-create-more > .fandom-create-new-panel {
    padding: 1.25rem 1.35rem 1.35rem;
}

.fandom-create-more > .fandom-create-new-panel > h3 {
    margin-top: 0;
    margin-bottom: .8rem;
}

.fandom-discovery-card .fandom-discovery-explain {
    margin: .45rem 0 .75rem;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.55;
}

@media (max-width: 40rem) {
    .fandom-create-more > .fandom-create-new-panel {
        padding: 1rem;
    }
}

/* ===== /FAN INCHART /create UX polish v9 FIX ===== */

/* ===== ADMIN-UX-V1 -- independent Korean-only Admin Console layout =====
   Sidebar + topbar, no public header/footer/nav. Uses the site's existing
   --text/--muted/--border/--surface/--accent tokens so it stays on-theme
   without a second design system. */
.admin-console { margin: 0; background: var(--bg, #0b0b10); color: var(--text); min-height: 100vh; }
.admin-console-shell { display: flex; flex-direction: column; min-height: 100vh; }
.admin-topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky; top: 0; z-index: 20;
}
.admin-topbar-title { font-weight: 800; font-size: 1.05rem; }
.admin-sidebar-toggle {
    display: none;
    margin-left: auto;
    background: none; border: 1px solid var(--border); border-radius: .4rem;
    color: var(--text); font-size: 1.1rem; line-height: 1; padding: .35rem .6rem; cursor: pointer;
}
.admin-topbar-links { margin-left: auto; display: flex; gap: 1rem; }
.admin-topbar-links a { color: var(--muted); text-decoration: none; font-size: .88rem; }
.admin-topbar-links a:hover { color: var(--text); }
.admin-console-body { display: flex; flex: 1; min-height: 0; }
.admin-sidebar {
    flex: 0 0 13rem;
    border-right: 1px solid var(--border);
    background: var(--surface-alt);
    padding: 1rem .75rem;
    overflow-y: auto;
}
.admin-sidebar-group { list-style: none; margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--border); display: grid; gap: .15rem; }
.admin-sidebar-group:last-child { border-bottom: none; margin-bottom: 0; }
.admin-sidebar-group a {
    display: block; padding: .5rem .6rem; border-radius: .4rem;
    color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.admin-sidebar-group a:hover { background: var(--surface); color: var(--text); }
.admin-sidebar-group a.is-current { background: var(--accent, #8b6cff); color: #fff; }
.admin-main { flex: 1; min-width: 0; padding: 1.5rem; }
.admin-stat-grid-compact { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
@media (max-width: 61.99rem) {
    .admin-sidebar-toggle { display: inline-flex; }
    .admin-console-body { position: relative; }
    .admin-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: .5rem 0 1.5rem rgb(0 0 0 / 35%);
        width: 14rem; flex-basis: 14rem;
    }
    .admin-sidebar.is-open { transform: translateX(0); }
    .admin-main { padding: 1rem; }
}

/* ===== TRANSLATION-MGMT-V1 -- Admin translation editor + public empty state ===== */
.admin-success { color: #4ade80; font-weight: 700; }
.admin-error { color: #f87171; font-weight: 700; }
.admin-translation-original-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-translation-original-header h2 { margin: 0; }
.admin-translation-original-header form { margin: 0; }
.translation-original-readonly {
    padding: 1rem 1.15rem; margin: .5rem 0 1rem;
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--surface-alt);
}
.admin-translation-editor { display: grid; gap: 1.25rem; max-width: 44rem; }
.admin-translation-locale-block {
    padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-card);
    display: grid; gap: .65rem;
}
.admin-translation-locale-block h3 { margin: 0; font-size: .95rem; letter-spacing: .04em; color: var(--muted); }
.admin-translation-locale-block textarea { min-height: 6rem; }
.admin-translation-editor-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 47.99rem) {
    .admin-translation-editor { max-width: 100%; }
}
.translation-empty-state { margin: .5rem 0; }

/* ===== TRANSLATION-MGMT-V1 -- compact text-code translation selector =====
   Buttons now render real text codes (KO/EN/JA/ZH-CN) instead of a single
   flag glyph, so the older fixed square width="1.75rem" rules above (sized
   for one emoji character) clip/overlap "ZH-CN" against its neighbor --
   this is the reported "JA와 ZH-CN이 붙어 보이는" bug. Overriding with
   auto width + small horizontal padding fixes that and, per this phase's
   own goal, makes the whole control visually secondary to the post title/
   share button rather than looking like a tab bar. One shared rule for
   all three surfaces (post switcher, per-comment switcher, "translate
   all comments" bar) keeps them visually consistent. */
.community-post-detail-surface .translation-locale-button,
.community-post-detail-surface .comment-translation-switcher .translation-locale-button,
.community-post-detail-surface .comment-global-locale-button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: .1rem .32rem !important;
    font-size: .72rem !important;
    font-weight: 600;
    line-height: 1.2 !important;
    letter-spacing: .01em;
    border-radius: .3rem;
    color: var(--muted);
}
.community-post-detail-surface .translation-locale-button.is-active,
.community-post-detail-surface .translation-locale-button[aria-current="true"],
.community-post-detail-surface .comment-translation-switcher .translation-locale-button.is-active,
.community-post-detail-surface .comment-global-locale-button.is-active {
    color: var(--text);
    font-weight: 700;
    background: rgba(139, 92, 246, .14);
}
.community-post-detail-surface .comment-global-locale-button:hover {
    background: rgba(139, 92, 246, .1);
}
.community-post-detail-surface .translation-locale-switcher,
.community-post-detail-surface .comment-translation-switcher {
    gap: .05rem !important;
}
.community-post-detail-surface .translation-locale-divider {
    margin: 0 .18rem;
    font-size: .68rem;
}
.community-post-detail-surface .translation-switcher-colon,
.community-post-detail-surface .comment-global-translation-label {
    color: var(--muted);
    font-size: .78rem;
}
.community-post-detail-surface .comment-global-translation-box {
    display: inline-flex;
    width: auto;
    padding: .2rem .5rem;
    gap: .3rem;
}
.community-post-detail-surface .comment-global-translation-title {
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: .2rem;
}
@media (max-width: 47.99rem) {
    .community-post-detail-surface .translation-locale-button,
    .community-post-detail-surface .comment-translation-switcher .translation-locale-button,
    .community-post-detail-surface .comment-global-locale-button {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: .22rem .34rem !important;
        font-size: .72rem !important;
        /* Slightly taller tap target than the visual box via padding alone
           (no fixed min-height) so EN/KO/JA/ZH-CN still stay one line and
           never wrap ZH-CN onto its own row at 360-430px. */
    }
}

/* ===== P0 COMMUNITY CRUD SAFETY -- staged attachment removal ===== */
.staged-remove-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .85rem; cursor: pointer; }
.post-form-media-row.is-marked-for-removal { opacity: .5; }
.post-form-media-row.is-marked-for-removal img { filter: grayscale(1); }
.post-form-media-row.is-marked-for-removal a,
.post-form-media-row.is-marked-for-removal span:not(.staged-remove-label *) { text-decoration: line-through; }