/* ============================================================
   LIFEHAKI — Anime dashboard
   Ported from the LifeHaki Design v1 package (styles.css + detail.css).
   Dark cinematic canvas, red+yellow brand, Bebas/Poppins/Mono type.
   ============================================================ */

:root {
    /* ====================================================================
       Lifehaki Design System tokens (real spec — cool light, shounen brand)
       Imported from the design-system zip: tokens/colors|effects|fonts|… .
       Brand primitives + ramps
       ==================================================================== */
    --gold-500: #fdc949; --gold-700: #c8951f; --gold-600: #e8ad2e;
    --gold-400: #ffd970; --gold-200: #fde9b4; --gold-100: #fef4d6;
    --red-500:  #ca2128; --red-700: #8f1318; --red-600: #a81a20;
    --red-400:  #e0454b; --red-200: #f4c2c1; --red-100: #fbe4e2;

    /* Cool neutral ramp (based on #f5f5f9) */
    --paper-0: #ffffff;  /* raised cards, brightest */
    --paper-1: #f5f5f9;  /* default app background  */
    --paper-2: #ececf1;  /* sunken / inset surfaces */
    --paper-3: #e0e0e8;  /* deeper sunken           */

    /* Ink (cool slate-black) ramp */
    --ink-900: #15171c; --ink-800: #20242b; --ink-700: #353b45;
    --ink-600: #565d68; --ink-500: #767d89; --ink-400: #9aa0ab; --ink-300: #c4c8d0;

    /* Hairlines */
    --line-strong: #d2d3dc; --line: #e3e3ea; --line-soft: #eeeef3;

    /* Semantic */
    --success-500: #2f8f5b; --success-100: #ddf0e3;
    --warning-500: #e8ad2e; --warning-100: #fef4d6;
    --danger-500:  #ca2128; --danger-100:  #fbe4e2;
    --info-500:    #2f6f8f; --info-100:    #dceef4;

    /* Semantic aliases */
    --bg-app: var(--paper-1); --bg-surface: var(--paper-0);
    --bg-sunken: var(--paper-2); --bg-inset: var(--paper-3);
    --text-strong: var(--ink-900); --text-body: var(--ink-800);
    --text-muted: var(--ink-600); --text-faint: var(--ink-500);
    --text-on-red: #fffdf8; --text-on-gold: var(--ink-900);
    --border-card: var(--line); --border-soft: var(--line-soft);
    --accent: var(--red-500); --accent-hover: var(--red-600); --accent-press: var(--red-700);
    --accent-tint: var(--red-100); --accent-on: var(--text-on-red);
    --highlight: var(--gold-500); --highlight-hover: var(--gold-600);
    --highlight-tint: var(--gold-100); --highlight-on: var(--text-on-gold);
    --focus-ring: rgba(202, 33, 40, 0.40);

    /* Radii / borders / shadows / motion */
    --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
    --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
    --bw-hair: 1px; --bw-base: 1.5px; --bw-ink: 2px;
    --shadow-xs: 0 1px 2px rgba(21,23,40,.06);
    --shadow-sm: 0 2px 6px rgba(21,23,40,.08);
    --shadow-md: 0 6px 18px rgba(21,23,40,.10);
    --shadow-lg: 0 16px 40px rgba(21,23,40,.14);
    --shadow-panel: 4px 4px 0 var(--ink-900);
    --shadow-panel-gold: 4px 4px 0 var(--gold-500);
    --shadow-panel-red:  4px 4px 0 var(--red-500);
    --ring: 0 0 0 3px var(--focus-ring);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

    --font-display: 'Fraunces', 'Times New Roman', serif;
    --font-body: 'Urbanist', system-ui, -apple-system, sans-serif;
    --font-eyebrow: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-mono: 'DM Mono', 'SF Mono', ui-monospace, monospace;

    /* ====================================================================
       Legacy token names (used across style.css + lifehaki-design.css)
       remapped to the new light system. Lightness order INVERTS vs dark:
       page is light-gray, cards are white.
       ==================================================================== */
    --red:         var(--red-500);
    --red-soft:    var(--red-100);
    --red-glow:    rgba(202, 33, 40, 0.22);
    --yellow:      var(--gold-500);
    --yellow-soft: var(--gold-100);

    --bg-0:        var(--paper-1);   /* app background */
    --bg-1:        var(--paper-0);   /* cards / feed surface (white) */
    --bg-2:        var(--paper-0);   /* raised card / control surface */
    --bg-3:        var(--paper-2);   /* sunken: tracks, chips, inputs */
    --text:        var(--ink-900);
    --text-2:      var(--ink-600);
    --text-3:      var(--ink-500);
    --border:      var(--line);
    --border-light:var(--line-strong);

    --display:     var(--font-display);
    --body:        var(--font-body);
    --eyebrow:     var(--font-eyebrow);
    --mono:        var(--font-mono);

    --max:        1440px;
    --pad:        80px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--red); color: white; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.display { font-family: var(--display); letter-spacing: 0.02em; line-height: 0.95; text-transform: uppercase; }
.mono { font-family: var(--mono); }

/* ============================================================
   PRIMITIVES — tag-label, pill, score, btn
   ============================================================ */
.tag-label {
    display: inline-flex; align-items: center; gap: 8px;
    font: 500 11px/1 var(--body);
    letter-spacing: 0.18em;
    color: var(--red);
    text-transform: uppercase;
    padding-left: 10px;
    border-left: 2px solid var(--red);
}

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11px/1 var(--body);
    padding: 5px 10px;
    border-radius: 100px;
    color: var(--red);
    background: var(--red-soft);
    border: 1px solid rgba(202,33,40,0.3);
}
.pill-neutral { color: var(--text-2); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.pill-yellow  { color: var(--yellow); background: var(--yellow-soft); border-color: rgba(253,201,73,0.3); }

.score {
    display: inline-flex; align-items: center;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.04em;
    padding: 3px 8px 1px;
    border-radius: 6px;
    background: var(--yellow);
    color: #1A0A00;
    line-height: 1;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: 600 15px/1 var(--body);
    padding: 12px 24px;
    border-radius: 100px;
    transition: all .25s cubic-bezier(.2,.7,.3,1);
    white-space: nowrap;
    border: 1px solid transparent;
}
.btn-primary { background: var(--red); color: white; box-shadow: 0 8px 24px -8px rgba(202,33,40,0.6); }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,0.25); color: white; }
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.55); }

/* ============================================================
   ANIME ART PLACEHOLDERS (cinematic gradients)
   ============================================================ */
.art {
    position: relative;
    overflow: hidden;
    background: var(--bg-2);
    isolation: isolate;
}
.art::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .22;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
}
.art .label {
    position: absolute; top: 10px; left: 12px;
    font: 500 9px/1 var(--mono);
    letter-spacing: .12em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    z-index: 3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.art-sunset { background:
    radial-gradient(ellipse 80% 60% at 50% 100%, oklch(0.25 0.18 25), transparent 60%),
    radial-gradient(circle at 50% 70%, oklch(0.65 0.2 50), transparent 40%),
    linear-gradient(180deg, oklch(0.12 0.04 280) 0%, oklch(0.32 0.18 25) 55%, oklch(0.55 0.22 45) 80%, oklch(0.18 0.08 30) 100%); }
.art-void { background:
    radial-gradient(ellipse 60% 50% at 30% 40%, oklch(0.4 0.25 25), transparent 55%),
    radial-gradient(circle at 80% 80%, oklch(0.25 0.18 25), transparent 50%),
    linear-gradient(135deg, #0a0506 0%, #1a0809 50%, #08020a 100%); }
.art-neon { background:
    radial-gradient(ellipse 70% 80% at 50% 100%, oklch(0.45 0.25 340), transparent 55%),
    radial-gradient(circle at 20% 50%, oklch(0.5 0.22 240), transparent 45%),
    linear-gradient(180deg, oklch(0.1 0.04 280) 0%, oklch(0.18 0.1 290) 60%, oklch(0.35 0.22 320) 100%); }
.art-forest { background:
    radial-gradient(ellipse 60% 70% at 50% 100%, oklch(0.4 0.15 150), transparent 60%),
    radial-gradient(circle at 50% 30%, oklch(0.7 0.18 90), transparent 35%),
    linear-gradient(180deg, oklch(0.15 0.04 200) 0%, oklch(0.25 0.12 160) 60%, oklch(0.1 0.05 150) 100%); }
.art-ocean { background:
    radial-gradient(ellipse 80% 50% at 50% 100%, oklch(0.4 0.18 220), transparent 60%),
    radial-gradient(circle at 70% 30%, oklch(0.85 0.12 80), transparent 30%),
    linear-gradient(180deg, oklch(0.12 0.06 250) 0%, oklch(0.3 0.16 220) 70%, oklch(0.5 0.18 200) 100%); }
.art-gold { background:
    radial-gradient(ellipse 90% 70% at 50% 100%, oklch(0.55 0.18 65), transparent 60%),
    radial-gradient(circle at 50% 40%, oklch(0.8 0.18 85), transparent 35%),
    linear-gradient(180deg, oklch(0.15 0.04 60) 0%, oklch(0.35 0.16 65) 60%, oklch(0.6 0.2 75) 100%); }
.art-blood { background:
    radial-gradient(ellipse 70% 50% at 50% 50%, oklch(0.5 0.28 25), transparent 60%),
    linear-gradient(135deg, #1c0306 0%, #2a0608 40%, #5c0d12 100%); }
.art-frost { background:
    radial-gradient(ellipse 80% 80% at 50% 100%, oklch(0.55 0.12 230), transparent 65%),
    radial-gradient(circle at 30% 40%, oklch(0.85 0.05 220), transparent 40%),
    linear-gradient(180deg, oklch(0.18 0.04 240) 0%, oklch(0.4 0.1 230) 70%, oklch(0.7 0.08 220) 100%); }
.art-violet { background:
    radial-gradient(ellipse 60% 60% at 50% 100%, oklch(0.4 0.25 310), transparent 55%),
    linear-gradient(180deg, oklch(0.1 0.04 280) 0%, oklch(0.3 0.22 320) 60%, oklch(0.5 0.25 340) 100%); }
.art-ember { background:
    radial-gradient(ellipse 70% 70% at 50% 100%, oklch(0.55 0.22 40), transparent 55%),
    radial-gradient(circle at 50% 20%, oklch(0.7 0.18 60), transparent 35%),
    linear-gradient(180deg, oklch(0.12 0.06 30) 0%, oklch(0.3 0.18 35) 70%, oklch(0.55 0.22 50) 100%); }

.art-vignette::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0,0,0,0.7) 90%, rgba(0,0,0,0.92) 100%);
    z-index: 1;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 18px 0;
    background: rgba(13,13,13,0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    gap: 28px;
}
.logo {
    font-family: var(--display);
    font-size: 28px;
    letter-spacing: 0.04em;
    color: var(--text);
    display: inline-flex; align-items: center; gap: 10px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.logo-mark {
    width: 28px; height: 28px;
    background: var(--red);
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transform: rotate(-6deg);
    box-shadow: 0 4px 14px -4px var(--red-glow);
    flex-shrink: 0;
}
.logo-mark::before {
    content: '';
    width: 0; height: 0;
    border-left: 7px solid white;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 2px;
}
.logo .red { color: var(--red); }
.logo-img { height: 36px; max-height: 36px; width: auto; max-width: 180px; object-fit: contain; display: block; }

.nav-links { display: flex; gap: 28px; }
.nav-link {
    font: 500 14px/1 var(--body);
    color: rgba(255,255,255,0.75);
    position: relative;
    padding: 8px 0;
    transition: color .2s;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 2px;
    width: 0; height: 1.5px;
    background: var(--red);
    transition: width .25s ease;
}
.nav-link:hover { color: white; }
.nav-link:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Hamburger — hidden on desktop, shown in the mobile header strip. */
.nav-burger {
    display: none; flex-shrink: 0;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: var(--paper-0, var(--bg-2));
    border: 1px solid var(--line, var(--border));
    border-radius: 10px;
    color: var(--text-strong, var(--text));
    cursor: pointer;
}
.nav-burger:hover { border-color: var(--ink-400, var(--red)); }

.search { display: flex; gap: 8px; }
.search input {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 14px;
    border-radius: 100px;
    font-family: var(--body);
    font-size: 13px;
    width: 200px;
    transition: border-color .15s, width .25s ease;
}
.search input:focus { outline: none; border-color: var(--red); width: 280px; }
.search input::placeholder { color: var(--text-3); }
/* Compact icon submit — search runs on Enter; this is just an affordance.
   The dedicated text "Search" button was removed (FE-fix #2). */
.search-go {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-2);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.search-go:hover { color: white; border-color: var(--red); background: var(--red); }

/* Round icon buttons in the header (mobile search toggle, sign-in, drawer close). */
.nav-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 40px; height: 40px;
    border: 1px solid transparent; border-radius: 10px;
    background: transparent;
    color: var(--text-strong, var(--text));
    cursor: pointer; text-decoration: none;
}
.nav-icon-btn:hover { background: var(--paper-2, var(--bg-2)); }
/* Mobile-only affordances + the drawer are hidden on desktop. */
.nav-search-toggle, .nav-mobile-only, .search-close,
.nav-drawer, .nav-drawer-overlay { display: none; }
body.nav-noscroll { overflow: hidden; }

/* ============================================================
   SECTION CHROME
   ============================================================ */
.section { padding: 60px 0; }
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px;
    margin-bottom: 36px;
    max-width: var(--max);
    margin-left: auto; margin-right: auto;
    padding: 0 var(--pad);
}
.section-head .left { display: flex; flex-direction: column; gap: 10px; }
.section-title {
    font-family: var(--display);
    font-size: clamp(36px, 4.4vw, 56px);
    margin: 0;
    letter-spacing: 0.01em;
    line-height: 1;
}
.section-sub {
    font: 400 14px/1.5 var(--body);
    color: var(--text-2);
    max-width: 520px;
    margin: 0;
}

/* Tabs (sort) */
.sort-nav { display: inline-flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--border); padding: 4px; border-radius: 100px; }
.sort-nav a {
    padding: 8px 18px;
    border-radius: 100px;
    color: var(--text-2);
    font: 500 13px/1 var(--body);
    transition: all .15s;
}
.sort-nav a:hover { color: var(--text); }
.sort-nav a.is-active { background: var(--red); color: white; }

/* ============================================================
   POSTER CARD GRID (home + search)
   ============================================================ */
.grid-section { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.anime-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .25s;
    border: 2px solid transparent;
    background: var(--bg-2);
    list-style: none;
}
.poster a { color: inherit; display: block; height: 100%; }
.poster:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: var(--red);
    box-shadow: 0 24px 50px -20px rgba(0,0,0,0.7), 0 0 32px -10px var(--red-glow);
    z-index: 5;
}
.poster .art,
.poster img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.poster:hover .art,
.poster:hover img { transform: scale(1.05); }

.poster-content {
    position: absolute; inset: auto 0 0 0;
    padding: 14px 14px 12px;
    z-index: 4;
    display: flex; flex-direction: column; gap: 5px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0.95) 100%);
}
.poster-title {
    font: 600 13px/1.25 var(--body);
    margin: 0;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.poster-meta {
    font: 400 10.5px/1 var(--mono);
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
}
.poster-meta .dot { color: var(--red); }
.poster .score {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    font-size: 13px;
    padding: 2px 7px;
}
.poster .rank-badge {
    position: absolute; top: 0; left: 0;
    background: var(--red);
    color: white;
    font-family: var(--display);
    font-size: 14px;
    padding: 5px 9px 3px;
    border-radius: 0 0 10px 0;
    z-index: 4;
    letter-spacing: 0.04em;
}

/* Pager */
.pager {
    display: flex; justify-content: space-between; align-items: center;
    margin: 56px 0 0; color: var(--text-2); gap: 12px;
    font: 500 13px/1 var(--body);
    max-width: var(--max);
    margin-left: auto; margin-right: auto;
    padding: 0 var(--pad);
}
.pager a {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 10px 22px;
    border-radius: 100px;
    color: var(--text);
    transition: all .2s;
}
.pager a:hover { border-color: var(--red); background: var(--bg-1); color: var(--red); }

.empty {
    padding: 80px 30px;
    text-align: center;
    color: var(--text-2);
    background: var(--bg-1);
    border: 1px dashed var(--border);
    border-radius: 14px;
    max-width: 600px;
    margin: 0 auto;
}
.empty code {
    display: inline-block;
    background: var(--bg-0);
    color: var(--yellow);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 13px;
    border: 1px solid var(--border);
    margin-top: 8px;
}

/* ============================================================
   DETAIL HERO
   ============================================================ */
.detail-hero {
    position: relative;
    min-height: 560px;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}
.detail-hero-bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.detail-hero-bg img,
.detail-hero-bg .art {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
}
.detail-hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(13,13,13,0.97) 0%, rgba(13,13,13,0.72) 45%, rgba(13,13,13,0.3) 100%),
        linear-gradient(180deg, rgba(13,13,13,0.6) 0%, transparent 25%, transparent 60%, var(--bg-0) 100%);
    z-index: 1;
    pointer-events: none;
}
.detail-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 64px 64px;
    z-index: 1;
    pointer-events: none;
}
.detail-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--max);
    margin: 0 auto;
    padding: 80px var(--pad) 56px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 60px;
    align-items: end;
}

.dh-crumb {
    font: 400 12px/1.4 var(--body);
    color: var(--text-3);
    margin-bottom: 12px;
}
.dh-crumb a:hover { color: var(--text); }
.dh-crumb .sep { margin: 0 8px; color: #444; }

.dh-studio-year {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    font: 500 12px/1 var(--body);
    color: var(--text-2);
    margin-bottom: 22px;
}
.dh-studio-year .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); }

.dh-title {
    font-family: var(--display);
    font-size: clamp(54px, 6.4vw, 88px);
    line-height: 0.92;
    letter-spacing: 0.005em;
    margin: 0 0 14px;
    text-shadow: 0 4px 32px rgba(0,0,0,0.7);
    text-wrap: balance;
}
.dh-jp {
    font: 400 italic 14px/1.4 var(--body);
    color: #888;
    margin: 0 0 24px;
}

.dh-meta-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.dh-meta-row .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    font: 500 12px/1 var(--body);
    color: var(--text-2);
}
.dh-meta-row .chip.score-chip {
    background: var(--yellow);
    color: #1A0A00;
    border-color: var(--yellow);
    font-family: var(--display);
    font-size: 16px;
    letter-spacing: 0.04em;
}
.dh-meta-row .chip.rank-chip {
    background: var(--red-soft);
    border-color: rgba(202,33,40,0.4);
    color: var(--red);
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.04em;
}
.dh-meta-row .chip.status-chip { color: var(--text); }
.dh-meta-row .chip.status-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: #27AE60; }

.dh-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 24px;
}
.dh-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.dh-poster {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 2 / 3;
    margin-left: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8);
    border: 1px solid var(--border);
    transition: transform .35s ease;
}
.dh-poster:hover { transform: translateY(-4px); }
.dh-poster img,
.dh-poster .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   DETAIL BODY
   ============================================================ */
.detail-cols {
    max-width: var(--max);
    margin: 0 auto;
    padding: 32px var(--pad) 120px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 56px;
    align-items: flex-start;
}
.detail-main {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 64px;
}

/* Sidebar — info panel + Phase 2 stub */
.detail-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
.side-panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
}
.side-panel .panel-title {
    font: 600 11px/1 var(--body);
    color: var(--text-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.info-list { margin: 0; }
.info-list dt {
    color: var(--text-3);
    font: 500 10px/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 14px;
}
.info-list dt:first-child { margin-top: 0; }
.info-list dd {
    margin: 4px 0 0;
    font: 500 14px/1.4 var(--body);
    color: var(--text);
}
.info-list dd a:hover { color: var(--red); }

.phase2-stub {
    background: var(--bg-1);
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    color: var(--text-2);
    font: 400 12px/1.5 var(--body);
}
.phase2-stub strong {
    display: block;
    color: var(--yellow);
    font: 600 11px/1 var(--body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Detail section primitive */
.dsec { display: flex; flex-direction: column; gap: 20px; }
.dsec-head { display: flex; flex-direction: column; gap: 6px; }
.dsec-title {
    font-family: var(--display);
    font-size: 32px;
    margin: 0;
    letter-spacing: 0.01em;
}

/* Synopsis */
.synopsis {
    font: 400 15px/1.75 var(--body);
    color: rgba(255,255,255,0.85);
    max-width: 72ch;
    margin: 0;
    white-space: pre-line;
}

/* Trailer block */
.trailer {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .25s;
    max-width: 720px;
}
.trailer:hover { border-color: var(--red); }
.trailer img, .trailer .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trailer .play-button {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    background: var(--red);
    border-radius: 50%;
    z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 32px rgba(202,33,40,0.5), 0 0 0 12px rgba(202,33,40,0.15);
    transition: transform .25s;
}
.trailer:hover .play-button { transform: translate(-50%, -50%) scale(1.08); }
.trailer .play-button::after {
    content: '';
    width: 0; height: 0;
    border-left: 22px solid white;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 4px;
}

/* Embedded trailer (16:9 iframe) */
.trailer-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #000;
}
.trailer-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Where to watch — manual streaming links (logo or brand-coloured chip) */
.watch-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.watch-link {
    --wl-accent: var(--border-light);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    min-height: 52px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.watch-link:hover {
    border-color: var(--wl-accent);
    background: var(--bg-3);
    transform: translateY(-1px);
}
/* Logo variant — the asset carries the branding, so the chip stays clean */
.watch-link.has-logo { padding: 10px 18px; }
.watch-link-logo {
    height: 26px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    display: block;
}
/* Chip fallback — brand-coloured monogram + service name */
.watch-link-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--wl-accent);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    flex-shrink: 0;
}
.watch-link-name { font-size: .95rem; }

/* Dubbed-in languages (MyDubList, CC BY 4.0) */
.dub-langs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.dub-lang {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    line-height: 1.2;
    transition: border-color .15s ease, background .15s ease;
}
.dub-lang:hover {
    border-color: var(--border-light);
    background: var(--bg-3);
}
.dub-lang-name { font-weight: 600; font-size: .92rem; }
.dub-attribution {
    margin: 14px 0 0;
    font-size: .78rem;
    color: var(--text-2);
}
.dub-attribution a {
    color: var(--text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dub-attribution a:hover { color: var(--text); }

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.gallery-item {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #111;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.gallery-item:hover { transform: translateY(-2px); border-color: var(--red); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Genres list (genres index page) */
.genre-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.genre-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.genre-card:hover { border-color: var(--red); background: rgba(202, 33, 40, 0.06); }
.genre-card-main { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.genre-card .genre-thumb { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.genre-name  { font-weight: 600; }
.genre-count { color: rgba(255, 255, 255, 0.5); font-size: 0.85em; }

/* Linked genre pills behave like buttons */
a.pill { text-decoration: none; cursor: pointer; }
a.pill:hover { border-color: var(--red); color: var(--red); }

/* Characters */
.char-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.char-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s, border-color .25s;
    border: 2px solid transparent;
}
.char-card:hover {
    transform: scale(1.04);
    border-color: var(--red);
    box-shadow: 0 20px 40px -15px rgba(202,33,40,0.4);
    z-index: 2;
}
.char-card img,
.char-card .art {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.char-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.92) 100%);
    z-index: 1;
}
.char-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 12px 14px;
    z-index: 2;
}
.char-info .role {
    font: 500 9px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 4px;
}
.char-info .name {
    font: 600 13px/1.2 var(--body);
    color: var(--text);
    margin: 0;
}

/* Episodes */
.ep-list { display: flex; flex-direction: column; gap: 6px; }
.ep-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .2s;
}
.ep-row:hover { border-color: var(--red); }
.ep-num {
    font-family: var(--display);
    font-size: 24px;
    color: var(--text);
    text-align: center;
    background: var(--bg-2);
    border-radius: 8px;
    padding: 8px 0;
    line-height: 1;
}
.ep-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ep-info .top-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ep-info .title {
    font: 600 14px/1.3 var(--body);
    color: var(--text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 460px;
}
.ep-info .meta {
    font: 400 11px/1 var(--mono);
    color: var(--text-3);
    letter-spacing: 0.06em;
}
.ep-type-badge {
    display: inline-flex; align-items: center;
    font: 500 9px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
}
.ep-type-canon  { background: rgba(39,174,96,0.12);  border: 1px solid rgba(39,174,96,0.35); color: #27AE60; }
.ep-type-filler { background: var(--red-soft);       border: 1px solid rgba(202,33,40,0.35); color: var(--red); }
.ep-type-recap  { background: rgba(161,161,161,0.08);border: 1px solid #333;                color: #888; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-1);
    padding: 40px 0;
    margin-top: 80px;
    color: var(--text-2);
    font: 400 13px/1.6 var(--body);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}
.footer-logo { font-size: 22px; }
.footer-tag {
    margin: 8px 0 0;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text-3);
}
.site-footer a { color: var(--red); font-weight: 500; }
.site-footer a:hover { color: var(--text); }

/* ============================================================
   404
   ============================================================ */
.not-found {
    text-align: center;
    padding: 160px var(--pad) 120px;
    max-width: 600px;
    margin: 0 auto;
}
.not-found .code {
    font-family: var(--display);
    font-size: 160px;
    color: var(--red);
    line-height: 0.9;
    margin: 0;
    text-shadow: 0 0 80px rgba(202,33,40,0.4);
}
.not-found h1 { font-family: var(--display); font-size: 48px; margin: 12px 0 16px; letter-spacing: 0.02em; }
.not-found p { color: var(--text-2); margin: 0 0 28px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    :root { --pad: 40px; }
    .detail-cols { grid-template-columns: 1fr; }
    .detail-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .side-panel, .phase2-stub { flex: 1 1 260px; }
    .char-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
    :root { --pad: 20px; }
    /* Single header strip: logo · search · profile · hamburger. */
    .nav-burger { display: inline-flex; }
    .nav-inner { flex-wrap: nowrap; gap: 10px; }
    .nav-right { margin-left: auto; gap: 4px; justify-content: flex-end; }
    /* Desktop primary menu + account extras live in the drawer on mobile. */
    .nav .nav-links, .nav .nav-desktop-only, .nav .nav-right .nav-link, .nav .user-menu-name { display: none; }
    .nav-search-toggle, .nav-mobile-only { display: inline-flex; }

    /* Search collapses to an icon and expands to an overlay across the bar.
       Visual props live on the .search-open rule so they beat the lower-
       specificity `.search { background: transparent }` in lifehaki-theme.css. */
    .search {
        position: absolute; left: var(--pad); right: var(--pad); top: 50%;
        transform: translateY(-50%); height: 44px; z-index: 8;
        display: none; align-items: center; gap: 4px;
    }
    .nav.search-open .search {
        display: flex; padding: 0 4px 0 12px; border-radius: 12px;
        background: var(--paper-0); border: 1px solid var(--line);
        box-shadow: 0 14px 30px -16px rgba(21,23,40,.4);
    }
    .nav.search-open .search input,
    .nav.search-open .search input:focus {
        flex: 1; min-width: 0; width: auto; height: 100%;
        border: 0; background: transparent; box-shadow: none; padding: 0;
    }
    .nav.search-open .search-go { display: none; }
    .nav.search-open .search-close { display: inline-flex; border: 0; background: transparent; }

    /* Slide-out drawer (from the right) + dimmed overlay. */
    .nav-drawer-overlay {
        display: block; position: fixed; inset: 0; z-index: 110;
        background: rgba(21,23,40,.42);
        opacity: 0; visibility: hidden; transition: opacity .26s ease;
    }
    .nav-drawer-overlay.open { opacity: 1; visibility: visible; }
    .nav-drawer {
        display: flex; position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
        width: min(82vw, 320px); flex-direction: column; gap: 2px;
        padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
        background: var(--paper-0); border-left: 1px solid var(--line);
        transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
        overflow-y: auto;
    }
    .nav-drawer.open { transform: translateX(0); box-shadow: -20px 0 50px rgba(21,23,40,.28); }
    .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .nav-drawer-title { font: 800 13px/1 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--text-3, var(--text-2)); }
    .nav-drawer-nav a, .nav-drawer-acct {
        display: block; padding: 13px 12px; font: 700 17px/1.2 var(--body);
        color: var(--text-strong, var(--text)); text-decoration: none; border-radius: 11px;
    }
    .nav-drawer-nav a:hover, .nav-drawer-acct:hover { background: var(--paper-2, var(--bg-2)); color: var(--accent, var(--red)); }
    .nav-drawer-sep { height: 1px; background: var(--line, var(--border)); margin: 8px 6px; }
    .nav-drawer-signout {
        width: 100%; text-align: left; padding: 13px 12px; font: 700 16px/1 var(--body);
        color: var(--text-2); background: transparent; border: 0; border-radius: 11px; cursor: pointer;
    }
    .nav-drawer-signout:hover { background: var(--paper-2, var(--bg-2)); color: var(--accent, var(--red)); }
    .nav-drawer-cta {
        display: flex; align-items: center; justify-content: center;
        margin-top: 10px; padding: 14px; border-radius: 12px;
        background: var(--accent, var(--red)); color: #fff; font: 700 16px/1 var(--body); text-decoration: none;
    }
    .detail-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .dh-poster { max-width: 220px; margin: 0 auto; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .char-grid { grid-template-columns: repeat(2, 1fr); }
    .ep-row { grid-template-columns: 48px 1fr; }
    .ep-row .ep-actions { display: none; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    /* Browse library — 3 columns on mobile instead of a single stacked column. */
    .anime-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
    .anime-grid { gap: 8px; }
    .anime-grid .poster-title { font-size: 0.78rem; }
    .anime-grid .poster-meta { font-size: 0.68rem; }
}

/* ============================================================
   Admin panel
   ============================================================ */
.admin-body { background: var(--bg-0); color: var(--text-1); }

/* ── Slim top bar (logo + Visit site + Sign out) ────────────── */
.admin-topbar {
    position: sticky; top: 0; z-index: 50;
    border-bottom: 1px solid var(--border);
    background: var(--bg-1);
    padding: 12px 0;
}
.admin-topbar-inner {
    max-width: 100%;
    margin: 0; padding: 0 24px;
    display: flex; align-items: center; gap: 16px;
}
.admin-topbar-inner .logo { font-family: var(--display); font-size: 22px; letter-spacing: 1px; }
.admin-topbar-actions {
    margin-left: auto; display: flex; align-items: center; gap: 14px;
}
.topbar-link {
    color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500;
}
.topbar-link:hover { color: var(--red); }
.admin-logout button { padding: 6px 12px; }

/* ── Left sidebar nav ─────────────────────────────────────── */
.admin-sidebar {
    position: fixed;
    top: 56px; bottom: 0; left: 0;
    width: 220px;
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 18px 0;
    z-index: 40;
}
.admin-sidebar-nav { display: flex; flex-direction: column; gap: 18px; }
.sidebar-group { display: flex; flex-direction: column; }
.sidebar-group-label {
    padding: 0 18px 8px;
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-2); opacity: 0.6;
}
.admin-sidebar-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px;
    color: var(--text-2); text-decoration: none;
    font-size: 14px; font-weight: 500;
    border-left: 2px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.admin-sidebar-nav a .ic { width: 18px; text-align: center; font-size: 13px; opacity: 0.8; }
.admin-sidebar-nav a:hover {
    background: rgba(255,255,255,0.03); color: var(--text-1);
}
.admin-sidebar-nav a.active {
    background: rgba(202, 33, 40, 0.08);
    color: var(--text-1);
    border-left-color: var(--red);
}

.admin-main {
    max-width: var(--max);
    margin: 0 auto;
    padding: 28px var(--pad) 80px;
}
.admin-main.with-sidebar {
    max-width: none;
    margin: 0;
    margin-left: 220px;
    padding: 28px 32px 80px;
}

/* ── Dashboard overview cards ─────────────────────────────── */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.dash-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--text-1);
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color 0.15s, transform 0.15s;
}
.dash-card:hover { border-color: var(--red); transform: translateY(-2px); }
.dash-card .label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-2);
}
.dash-card .value {
    font-family: var(--display); font-size: 36px; line-height: 1; letter-spacing: 0.5px;
    color: var(--text-1);
}
.dash-card .sub { font-size: 12px; color: var(--text-2); }
.dash-card.attention { border-color: rgba(245, 158, 11, 0.5); }
.dash-card.attention .value { color: #f59e0b; }
.dash-card.danger { border-color: rgba(239, 68, 68, 0.5); }
.dash-card.danger .value { color: #ef4444; }

.dash-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 1000px) { .dash-cols { grid-template-columns: 1fr; } }

.dash-panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 22px;
}
.dash-panel h2 {
    font-family: var(--display); font-size: 20px; margin: 0 0 14px;
    letter-spacing: 0.5px;
}
.dash-panel .panel-list { list-style: none; margin: 0; padding: 0; }
.dash-panel .panel-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px;
}
.dash-panel .panel-list li:last-child { border-bottom: none; }
.dash-panel .panel-list .meta { color: var(--text-2); font-family: var(--mono); font-size: 11px; }

/* ── Status pills (filters) ───────────────────────────────── */
.admin-status-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-status-pill {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    text-decoration: none;
    font-size: 12px; font-weight: 500;
}
.admin-status-pill.active { border-color: var(--red); color: var(--text-1); background: rgba(202,33,40,0.08); }
.admin-status-pill:hover { border-color: var(--text-2); color: var(--text-1); }

.row-badge {
    display: inline-block; padding: 2px 8px;
    border-radius: 999px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
    vertical-align: middle;
}
.row-badge.draft   { background: #3a2a0a; color: #f59e0b; }
.row-badge.trashed { background: #3a1414; color: #ef4444; }

.admin-flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.flash {
    padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--border); font-size: 14px;
}
.flash-ok  { border-color: #2c5; background: rgba(34, 197, 94, 0.08); color: #afe6c4; }
.flash-err { border-color: var(--red); background: rgba(202, 33, 40, 0.08); color: #f7b7b9; }

.admin-section { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.admin-head {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.admin-head h1 { font-family: var(--display); font-size: 32px; margin: 4px 0 0; letter-spacing: 0.5px; }
.admin-head .sub { color: var(--text-2); margin-top: 6px; font-size: 14px; }
.admin-head .admin-search { flex: 1; max-width: 360px; margin-left: auto; display: flex; gap: 6px; }
.admin-search input {
    flex: 1; padding: 8px 12px; border-radius: 8px;
    background: var(--bg-0); border: 1px solid var(--border); color: var(--text-1);
}

.btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
.btn-danger-sm {
    padding: 4px 10px; background: transparent; border: 1px solid rgba(202, 33, 40, 0.4);
    color: #f7b7b9; border-radius: 6px; font: 500 12px/1 var(--body); cursor: pointer;
}
.btn-danger-sm:hover { background: rgba(202, 33, 40, 0.15); border-color: var(--red); color: #fff; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.admin-table th { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1px; color: var(--text-2); text-transform: uppercase; }
.admin-table tr:hover { background: rgba(255, 255, 255, 0.02); }
.admin-table .muted { color: var(--text-2); font-size: 12px; text-decoration: none; }
.admin-table .empty { text-align: center; color: var(--text-2); padding: 30px; }
.admin-table th.admin-sort { padding: 0; }
.admin-table th.admin-sort .admin-sort-link {
    display: block; padding: 10px 12px; color: inherit; text-decoration: none;
    font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.admin-table th.admin-sort .admin-sort-link:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.admin-table th.admin-sort-active .admin-sort-link { color: var(--text); }
.admin-table th .admin-sort-arrow { display: inline-block; min-width: 1em; opacity: 0.8; }

/* Admin form */
.admin-form { margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 500; color: var(--text-2); letter-spacing: 0.4px; }
.field > span small { font-weight: 400; opacity: 0.7; }
.field input, .field textarea, .field select {
    padding: 9px 12px; border-radius: 8px;
    background: var(--bg-0); border: 1px solid var(--border); color: var(--text-1);
    font: 400 14px/1.4 var(--body);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field input[type="file"] { padding: 6px; }
.col-span-2 { grid-column: span 2; }
.form-actions { margin-top: 24px; display: flex; justify-content: flex-end; gap: 10px; }

/* Import help */
.import-help { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-2); }
.import-help h2 { font-size: 18px; margin: 0 0 10px; color: var(--text-1); }
.import-help h3 { font-size: 14px; margin: 22px 0 8px; color: var(--text-1); letter-spacing: 0.4px; }
.import-help .small { font-size: 12px; }
.code-sample {
    background: var(--bg-0); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px 16px; font: 400 12px/1.5 var(--mono); overflow-x: auto; color: var(--text-1);
}

/* Login */
.admin-login { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.admin-login-card {
    max-width: 380px; width: 100%;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px;
    padding: 32px;
}
.admin-login-card h1 { font-family: var(--display); font-size: 28px; margin: 0 0 6px; }
.admin-login-card .sub { color: var(--text-2); font-size: 14px; margin-bottom: 20px; }
.admin-login-card form { display: flex; flex-direction: column; gap: 16px; }
.admin-login-card button { width: 100%; }

@media (max-width: 900px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-main.with-sidebar { margin-left: 0; }
}
@media (max-width: 720px) {
    .form-grid { grid-template-columns: 1fr; }
    .col-span-2 { grid-column: span 1; }
    .admin-head { flex-direction: column; align-items: stretch; }
    .admin-head .admin-search { max-width: none; margin: 0; }
}

/* ============================================================
   Auth, user menu, profile, settings (Phase 3)
   ============================================================ */

/* Public flash messages */
.site-flashes {
    max-width: var(--max);
    margin: 12px auto 0;
    padding: 0 var(--pad);
    display: flex; flex-direction: column; gap: 8px;
}

/* Navbar user menu */
.nav-right { display: flex; align-items: center; gap: 12px; }
.user-menu { display: flex; align-items: center; gap: 12px; }
.user-menu-trigger {
    display: flex; align-items: center; gap: 8px;
    color: inherit; text-decoration: none;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    transition: border-color 0.2s ease;
}
.user-menu-trigger:hover { border-color: var(--red); }
.user-menu-trigger img,
.user-menu-trigger .avatar-mini {
    width: 28px; height: 28px;
    border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    object-fit: cover;
    font: 600 12px/1 var(--display);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.user-menu-name { font-size: 14px; font-weight: 500; }
form.inline { display: inline; }

/* Auth shell (login / signup) */
.auth-shell {
    min-height: 65vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px var(--pad);
}
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px;
    padding: 36px;
}
.auth-card h1 { font-family: var(--display); font-size: 32px; margin: 8px 0 4px; letter-spacing: 0.5px; }
.auth-card .auth-sub { color: var(--text-2); font-size: 14px; margin-bottom: 22px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.btn-block { width: 100%; }
.auth-foot { color: var(--text-2); font-size: 13px; margin-top: 20px; text-align: center; }
.auth-foot a { color: var(--text-1); text-decoration: underline; }

/* Profile hero */
.profile-hero {
    position: relative;
    padding: 48px var(--pad) 32px;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 0% 0%, rgba(202, 33, 40, 0.10), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(253, 201, 73, 0.06), transparent 60%),
        var(--bg-0);
}
.profile-hero-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 32px;
    align-items: center;
}
.profile-avatar {
    width: 160px; height: 160px;
    border-radius: 50%; overflow: hidden;
    border: 3px solid rgba(255,255,255,0.08);
    background: var(--bg-1);
    display: flex; align-items: center; justify-content: center;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar .avatar-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font: 700 64px/1 var(--display);
    color: rgba(255,255,255,0.95);
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.profile-avatar-lg { width: 140px; height: 140px; }
.profile-meta .profile-name { font-size: 44px; margin: 6px 0 4px; line-height: 1; }
.profile-handle { color: var(--text-2); margin-bottom: 14px; font-size: 14px; }
.profile-bio { font-size: 16px; max-width: 60ch; margin-bottom: 14px; }
.profile-facts {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 16px;
    color: var(--text-2); font-size: 14px;
}
.profile-facts a { color: var(--text-1); text-decoration: underline; }

.profile-tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.profile-tabs .tab {
    background: transparent; border: none;
    padding: 12px 18px;
    color: var(--text-2);
    font: 500 14px/1 var(--body);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.profile-tabs .tab.is-active { color: var(--text-1); border-bottom-color: var(--red); }
.profile-tabs .tab[disabled] { cursor: not-allowed; opacity: 0.5; }

/* Settings */
.settings-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: start;
}
.settings-aside {
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px;
    padding: 24px; text-align: center;
}
.settings-aside .profile-avatar { margin: 0 auto 12px; }
.settings-form { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }

@media (max-width: 720px) {
    .profile-hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .profile-facts { justify-content: center; }
    .settings-grid { grid-template-columns: 1fr; }
    .user-menu-name { display: none; }
}

/* ============================================================
   Tracking sidebar, favorite button, reviews (Phase 4)
   ============================================================ */
.track-panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}
.track-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.track-form { display: flex; flex-direction: column; gap: 12px; }
.track-form .field span small { font-weight: 400; opacity: 0.7; }
.track-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.track-actions {
    display: flex; gap: 8px; align-items: center; justify-content: space-between;
    margin-top: 6px;
}
.track-actions .btn { flex: 1; }

.fav-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 20px;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.fav-btn:hover { color: var(--yellow, #FDC949); border-color: var(--yellow, #FDC949); }
.fav-btn.is-fav { color: var(--yellow, #FDC949); border-color: var(--yellow, #FDC949); background: rgba(253, 201, 73, 0.08); }

/* Reviews */
.review-form {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 24px;
}
.review-form-head { margin: 0; font-size: 14px; }
.review-form textarea {
    width: 100%;
    background: var(--bg-0); border: 1px solid var(--border);
    color: var(--text-1);
    border-radius: 8px; padding: 12px 14px;
    font: 400 14px/1.55 var(--body);
    resize: vertical;
}
.review-form textarea:focus { outline: none; border-color: var(--red); }
.review-form .checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-2);
}
.review-form-actions {
    display: flex; align-items: center; gap: 10px;
}

.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.review-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 16px;
    align-items: start;
}
.review-author {
    display: flex; align-items: center; gap: 10px;
    color: inherit; text-decoration: none;
    grid-column: 1 / 2;
}
.review-author img, .review-author .avatar-mini {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    object-fit: cover;
    font: 600 13px/1 var(--display);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    flex-shrink: 0;
}
.review-author strong { display: block; font-weight: 600; }
.review-author .muted { font-size: 12px; }
.review-card .score-chip { grid-column: 2 / 3; align-self: start; }
.review-body { grid-column: 1 / -1; margin: 4px 0 0; color: var(--text-1); white-space: pre-line; }
.spoiler-wrap { grid-column: 1 / -1; }
.spoiler-wrap summary {
    cursor: pointer;
    padding: 8px 12px;
    background: rgba(202, 33, 40, 0.08);
    border: 1px dashed var(--red);
    border-radius: 6px;
    font-size: 13px;
    color: #f7b7b9;
}
.spoiler-wrap[open] summary { margin-bottom: 8px; }

/* Profile tabs as links (Phase 4) */
.profile-tabs a.tab {
    background: transparent; border: none;
    padding: 12px 16px;
    color: var(--text-2);
    font: 500 14px/1 var(--body);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 8px;
}
.profile-tabs a.tab:hover { color: var(--text-1); }
.profile-tabs a.tab.is-active { color: var(--text-1); border-bottom-color: var(--red); }
.tab-count {
    font: 500 11px/1 var(--mono);
    padding: 3px 7px; border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text-2);
}
.profile-tabs a.tab.is-active .tab-count { background: rgba(202, 33, 40, 0.18); color: #f7b7b9; }

/* Activity list */
.activity-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.activity-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.activity-poster {
    width: 64px; height: 90px;
    border-radius: 6px; overflow: hidden;
    background: var(--bg-0);
    display: block;
}
.activity-poster img, .activity-poster .art { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-body p { margin: 0; }
.activity-body p:first-child { font-size: 14px; line-height: 1.4; }
.activity-body a { color: inherit; text-decoration: underline; }

/* ============================================================
   CHARACTER PAGE — global character detail at /character/{slug}
   ============================================================ */

.char-hero {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
    padding: 32px 0 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
}
.char-portrait {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.char-portrait img,
.char-portrait .art {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.char-meta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.char-meta .section-title { margin: 6px 0 0; }
.char-kanji {
    font: 400 18px/1.3 var(--body);
    color: var(--text-2);
    margin: 0;
}
.char-aliases {
    font-size: 14px;
    color: var(--text);
    margin: 0;
}
.char-aliases .muted { color: var(--text-2); margin-right: 6px; font-size: 12px; letter-spacing: 0.4px; }

.char-stats {
    list-style: none; padding: 0; margin: 6px 0 0;
    display: flex; flex-wrap: wrap; gap: 24px;
}
.char-stats li { display: flex; flex-direction: column; gap: 2px; }
.char-stats .mono {
    font: 600 22px/1 var(--display);
    color: var(--text);
    letter-spacing: 0.02em;
}
.char-stats .muted {
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-2);
}

.char-tags {
    list-style: none; padding: 0; margin: 4px 0 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.tag-chip {
    display: inline-flex; align-items: center;
    font: 500 12px/1 var(--mono);
    padding: 6px 12px;
    border-radius: 100px;
    color: var(--yellow);
    background: var(--yellow-soft);
    border: 1px solid rgba(253,201,73,0.3);
    transition: border-color .2s, color .2s, background .2s;
}
.tag-chip:hover { background: rgba(253,201,73,0.22); border-color: var(--yellow); color: #fff; }

.char-source { margin: 4px 0 0; font-size: 13px; }
.char-source a { color: var(--text-2); text-decoration: underline; }
.char-source a:hover { color: var(--red); }

.char-about p {
    font: 400 15px/1.7 var(--body);
    color: var(--text);
    margin: 0 0 14px;
    max-width: 78ch;
}
.char-about p:last-child { margin-bottom: 0; }

.char-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.char-gallery a {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .25s, border-color .2s;
}
.char-gallery a:hover { transform: scale(1.03); border-color: var(--red); }
.char-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Appearances grid reuses .poster; the meta strip below the poster */
.poster-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 10px 12px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.92) 60%);
    z-index: 2;
}
.poster-info .title {
    font: 600 13px/1.25 var(--body);
    color: var(--text);
    margin: 0 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.poster-info .meta {
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.12em;
    color: var(--text-2);
    margin: 0;
    text-transform: uppercase;
}
.poster-info .role { color: var(--red); }

/* Voice-actor grid */
.voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.voice-col {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}
.voice-lang {
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.voice-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
    font: 500 14px/1.4 var(--body);
    color: var(--text);
}

/* ============================================================
   CHARACTER RANKING PAGE — /characters/tag/{slug}
   ============================================================ */

.char-rank {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
    counter-reset: rank;
}
.char-rank li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: center;
}
.rank-n {
    font: 600 28px/1 var(--display);
    color: var(--red);
    text-align: center;
    letter-spacing: 0.04em;
}
.rank-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .2s, transform .2s;
}
.rank-card:hover { border-color: var(--red); transform: translateX(4px); }
.rank-card img,
.rank-card .art {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 6px;
    overflow: hidden;
}
.rank-info .name {
    font: 600 15px/1.3 var(--body);
    color: var(--text);
    margin: 0 0 2px;
}
.rank-info .meta {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.1em;
    color: var(--text-2);
    margin: 0;
    text-transform: uppercase;
}

/* ============================================================
   ADMIN extras — for character/tag/merge screens
   ============================================================ */

.admin-head-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-left: auto;
}
.admin-head .admin-head-actions { margin-left: auto; }

/* Inline form rows (e.g. "+ Add tag" on the tags page) */
.admin-form-inline {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 12px;
    align-items: end;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin: 12px 0 24px;
}
.admin-form-inline .form-actions { margin-top: 0; }

/* Inline edit row inside the tag table */
.inline-edit {
    display: flex; gap: 6px; align-items: center;
}
.inline-edit input {
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text);
    font: 400 13px/1.3 var(--body);
    min-width: 0;
}
.inline-edit input:focus { outline: none; border-color: var(--red); }

/* Tag-picker checkbox grid on the character form */
.tag-picker {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px 16px;
    background: var(--bg-1);
}
.tag-picker legend {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    letter-spacing: 0.4px;
    padding: 0 6px;
}
.tag-picker legend a { color: var(--text); text-decoration: underline; }
.tag-checkboxes {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 8px;
}
.tag-check {
    position: relative;
    cursor: pointer;
}
.tag-check input { position: absolute; opacity: 0; pointer-events: none; }
.tag-check span {
    display: inline-flex; align-items: center;
    font: 500 12px/1 var(--mono);
    padding: 7px 12px;
    border-radius: 100px;
    color: var(--text-2);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    transition: all .2s;
}
.tag-check:hover span { border-color: var(--border-light); color: var(--text); }
.tag-check input:checked + span {
    color: var(--yellow);
    background: var(--yellow-soft);
    border-color: rgba(253,201,73,0.4);
}

/* Merge group cards */
.merge-group {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}
.merge-group .admin-table { background: transparent; }
.merge-group .form-actions { margin-top: 12px; }

@media (max-width: 720px) {
    .char-hero { grid-template-columns: 1fr; gap: 20px; }
    .char-portrait { max-width: 240px; }
    .admin-form-inline { grid-template-columns: 1fr; }
    .admin-head-actions { width: 100%; justify-content: flex-start; }
}

/* ── Role badges (profile pages + nav) ───────────────────────────────── */
.role-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.5;
}
.role-super-admin { background: #7c3aed; color: #fff; }
.role-editor      { background: #0ea5e9; color: #fff; }
.role-moderator   { background: #10b981; color: #fff; }
.role-contributor { background: #f59e0b; color: #000; }
.role-critic      { background: #6366f1; color: #fff; }
.role-user        { background: #374151; color: #d1d5db; }

/* ============================================================
   LISTS — Letterboxd/IMDB-style user-curated anime lists
   ============================================================ */

/* explore + owner grid */
.lists-head-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.list-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}
.list-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}
.list-card:hover {
    transform: translateY(-3px);
    border-color: var(--red);
    box-shadow: 0 12px 32px -16px rgba(202,33,40,0.45);
}
.list-card-cover {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-2);
    overflow: hidden;
}
.list-card-body { padding: 16px 18px 20px; }
.list-card-title {
    font: 600 1.08rem/1.3 var(--body);
    margin: 0 0 6px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.list-card-title a { color: var(--text); }
.list-card-title a:hover { color: var(--red); }
.list-card-meta {
    font-size: .72rem;
    color: var(--text-3);
    letter-spacing: .03em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.list-card-meta .dot { color: var(--border-light); margin: 0 4px; }
.list-card-meta a { color: var(--yellow); }
.list-card-desc {
    margin: 0;
    color: var(--text-2);
    font-size: .9rem;
    line-height: 1.45;
}

.list-featured-chip {
    position: absolute;
    top: 12px; left: 12px;
    font: 700 .68rem/1 var(--body);
    letter-spacing: .12em;
    color: #1A0A00;
    background: var(--yellow);
    padding: 6px 10px;
    border-radius: 100px;
    text-transform: uppercase;
}
.list-vis-chip {
    position: absolute;
    top: 12px; right: 12px;
    font: 600 .62rem/1 var(--mono);
    letter-spacing: .14em;
    color: var(--text-2);
    background: rgba(13,13,13,0.7);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-light);
    padding: 6px 9px;
    border-radius: 4px;
}
.list-vis-chip.vis-private  { color: var(--red);    border-color: rgba(202,33,40,0.4); }
.list-vis-chip.vis-unlisted { color: var(--yellow); border-color: rgba(253,201,73,0.4); }

/* Cover collage — 1, 2, 3, or 4 posters */
.list-cover-grid {
    width: 100%; height: 100%;
    display: grid;
    gap: 2px;
    background: var(--bg-2);
}
.list-cover-grid > * {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.list-cover-grid.count-0,
.list-cover-grid.count-1 { grid-template-columns: 1fr; }
.list-cover-grid.count-2 { grid-template-columns: 1fr 1fr; }
.list-cover-grid.count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.list-cover-grid.count-3 > :nth-child(1) { grid-row: 1 / span 2; }
.list-cover-grid.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* hero on the public detail page */
.list-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.list-hero-bg {
    position: absolute; inset: 0;
    z-index: 0;
    opacity: .35;
    filter: blur(28px) saturate(1.1);
    transform: scale(1.1);
}
.list-hero-bg .list-cover-grid { height: 100%; }
.list-hero-fade {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(13,13,13,0.4) 0%, var(--bg-0) 92%),
        radial-gradient(120% 90% at 50% 0%, rgba(202,33,40,0.2), transparent 70%);
}
.list-hero-inner {
    position: relative; z-index: 1;
    max-width: var(--max);
    margin: 0 auto;
    padding: 80px var(--pad) 56px;
}
.list-hero-title {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    margin: 12px 0 18px;
    max-width: 22ch;
}
.list-hero-byline {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px;
    color: var(--text-2);
}
.list-author {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600;
    color: var(--text);
}
.list-author:hover { color: var(--red); }
.list-author img, .list-author .avatar-mini {
    width: 36px; height: 36px;
    border-radius: 100px;
    border: 1px solid var(--border-light);
    object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 13px/1 var(--body);
}
.list-hero-stats { font-size: .72rem; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.list-hero-desc {
    max-width: 70ch;
    color: var(--text-2);
    font-size: 1.02rem;
    line-height: 1.6;
    margin-bottom: 28px;
}
.list-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.list-hero-actions .btn.danger { color: var(--red); border-color: rgba(202,33,40,0.4); }
.list-hero-actions .btn.danger:hover { background: var(--red-soft); }

/* list entries (view + edit) */
.list-entries {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 18px;
}
.le-row {
    display: grid;
    grid-template-columns: auto 120px 1fr;
    gap: 22px;
    align-items: start;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
}
.list-entries.is-unranked .le-row {
    grid-template-columns: 120px 1fr;
}
.le-rank {
    font-size: 3.4rem;
    color: var(--red);
    line-height: 1;
    min-width: 70px;
    text-align: right;
    padding-right: 8px;
    border-right: 2px solid var(--border);
    align-self: stretch;
    display: flex; align-items: center; justify-content: flex-end;
}
.le-poster {
    display: block;
    width: 120px;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.le-poster img,
.le-poster .art {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.le-body { min-width: 0; }
.le-title {
    margin: 4px 0 6px;
    font: 600 1.15rem/1.35 var(--body);
}
.le-title a { color: var(--text); }
.le-title a:hover { color: var(--red); }
.le-meta {
    margin: 0 0 12px;
    font-size: .72rem;
    color: var(--text-3);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.le-note {
    margin: 0;
    padding: 12px 16px;
    border-left: 3px solid var(--yellow);
    background: rgba(253,201,73,0.06);
    color: var(--text);
    font-size: .96rem;
    line-height: 1.55;
    border-radius: 0 8px 8px 0;
}

/* list editor (extends .le-row) */
.list-entries.is-editing .le-row { grid-template-columns: auto 88px 1fr; }
.list-entries.is-editing .le-poster { width: 88px; }
.le-handle {
    cursor: grab;
    color: var(--text-3);
    user-select: none;
    font-size: 1.2rem;
    padding: 6px 4px;
    align-self: stretch;
    display: flex; align-items: center;
}
.le-handle:active { cursor: grabbing; }
.le-ghost { opacity: .35; }
.le-note-input {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-family: var(--body);
    font-size: .95rem;
    line-height: 1.5;
    resize: vertical;
}
.le-note-input:focus { outline: none; border-color: var(--red); }
.le-row-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin: 8px 0 0;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.le-note-status { color: var(--yellow); }
.le-del {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-2);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.le-del:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }

/* search-add box */
.le-search {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
}
.le-search .lf-label {
    display: block;
    font-size: .72rem;
    color: var(--text-2);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.le-search-input { position: relative; }
.le-search-input > input[type="search"] {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    padding: 12px 18px;
    color: var(--text);
    font-family: var(--body);
    font-size: 1rem;
}
.le-search-input > input[type="search"]:focus { outline: none; border-color: var(--red); }
.le-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--bg-1);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 16px 32px -12px rgba(0,0,0,0.6);
    list-style: none;
    padding: 6px;
    margin: 0;
    max-height: 480px;
    overflow-y: auto;
    z-index: 20;
}
.le-search-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
}
.le-search-row:hover { background: var(--bg-2); }
.le-search-row img,
.le-search-poster {
    width: 40px; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: 4px; background: var(--bg-3);
}
.le-search-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.le-search-meta strong {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.le-search-meta .mono {
    font-size: .68rem;
    color: var(--text-3);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.le-search-empty {
    padding: 14px;
    color: var(--text-3);
    font-family: var(--mono);
    font-size: .85rem;
    text-align: center;
}

/* list create/edit form */
.list-form-wrap { max-width: 760px; }
.list-form { display: flex; flex-direction: column; gap: 18px; }
.lf-field { display: flex; flex-direction: column; gap: 8px; }
.lf-label {
    font-size: .72rem;
    color: var(--text-2);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.lf-label .req { color: var(--red); }
.lf-hint { color: var(--text-3); font-size: .72rem; }
.lf-field input[type="text"],
.lf-field textarea,
.lf-field select {
    background: var(--bg-1);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.4;
}
.lf-field input:focus,
.lf-field textarea:focus,
.lf-field select:focus { outline: none; border-color: var(--red); }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lf-half { min-width: 0; }
.lf-toggle {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 14px 16px;
    border-radius: 10px;
}
.lf-toggle input[type="checkbox"] { margin-top: 4px; }
.lf-toggle > span { display: flex; flex-direction: column; gap: 4px; }
.lf-actions { display: flex; gap: 10px; padding-top: 8px; }

/* list comments */
.list-comment-form {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}
.list-comment-form textarea {
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-family: var(--body);
    font-size: .95rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
}
.list-comment-form textarea:focus { outline: none; border-color: var(--red); }
.list-comment-form button { align-self: flex-start; }

.list-comments { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.lc-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.lc-avatar img,
.lc-avatar .avatar-mini {
    width: 40px; height: 40px;
    border-radius: 100px;
    object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-light);
    font: 700 14px/1 var(--body);
}
.lc-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.lc-author { font-weight: 600; color: var(--text); }
.lc-time { font-size: .68rem; color: var(--text-3); letter-spacing: .04em; }
.lc-del {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--text-3);
    font-size: 1.2rem;
    padding: 0 4px;
}
.lc-del:hover { color: var(--red); }
.lc-text { margin: 0; color: var(--text); font-size: .95rem; line-height: 1.55; }

/* "Add to list" popover on the anime detail page */
.add-to-list-wrap { position: relative; display: inline-block; }
.add-to-list-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 280px;
    background: var(--bg-1);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 16px 32px -12px rgba(0,0,0,0.6);
    padding: 10px;
}
.add-to-list-pop ul { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.add-to-list-pop li button {
    width: 100%; text-align: left;
    background: transparent; border: 0;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    font-size: .92rem;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.add-to-list-pop li button:hover:not(:disabled) { background: var(--bg-2); }
.add-to-list-pop li button:disabled { color: var(--text-3); cursor: default; }
.add-to-list-pop .atl-foot {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 8px;
    text-align: center;
}
.add-to-list-pop .atl-foot a { color: var(--red); font-size: .85rem; font-weight: 600; }
.add-to-list-empty { padding: 14px; color: var(--text-3); font-family: var(--mono); font-size: .85rem; text-align: center; }

@media (max-width: 720px) {
    .le-row,
    .list-entries.is-unranked .le-row,
    .list-entries.is-editing .le-row {
        grid-template-columns: 80px 1fr;
        gap: 14px;
    }
    .list-entries.is-editing .le-handle { display: none; }
    .le-rank {
        font-size: 2rem;
        min-width: 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 0 0 6px;
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .le-poster, .list-entries.is-editing .le-poster { width: 80px; }
    .lf-row { grid-template-columns: 1fr; }
    .list-hero-inner { padding: 56px 24px 36px; }
}

/* ============================================================
   LISTS — Magazine layout (/lists) + landing strip
   ============================================================ */

.section-tight { padding-top: 36px; padding-bottom: 36px; }

/* Magazine hero — intro copy left, hero feature right */
.lists-mag-hero {
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(60% 50% at 80% 10%, rgba(202,33,40,0.18), transparent 70%),
        radial-gradient(45% 60% at 10% 90%, rgba(253,201,73,0.10), transparent 70%),
        var(--bg-0);
    padding: 80px 0 60px;
}
.lists-mag-hero-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
}
.lists-mag-intro { max-width: 48ch; }
.lists-mag-title {
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    line-height: 0.92;
    margin: 16px 0 18px;
}
.lists-mag-sub {
    color: var(--text-2);
    font-size: 1.08rem;
    line-height: 1.55;
    margin: 0 0 24px;
}
.lists-mag-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.lists-mag-stats {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 28px;
    font-size: .72rem;
    color: var(--text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.lists-mag-stats strong {
    display: block;
    font-family: var(--display);
    font-size: 2rem;
    letter-spacing: .02em;
    color: var(--text);
    line-height: 1;
    margin-bottom: 6px;
}

/* Hero feature card on the right */
.lists-mag-feature {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--bg-2);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
    box-shadow: 0 24px 60px -28px rgba(0,0,0,0.8);
    display: block;
}
.lists-mag-feature:hover { transform: translateY(-4px); box-shadow: 0 28px 64px -24px rgba(202,33,40,0.4); }
.lmf-collage {
    position: absolute; inset: 0;
    display: grid;
    gap: 3px;
    background: var(--bg-3);
    z-index: 0;
}
.lmf-collage > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.lmf-collage.count-1 { grid-template-columns: 1fr; }
.lmf-collage.count-2 { grid-template-columns: 1fr 1fr; }
.lmf-collage.count-3 { grid-template-columns: 2fr 1fr 1fr; }
.lmf-collage.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lmf-collage.count-5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lmf-collage.count-5 > :nth-child(1) { grid-row: 1 / span 2; }
.lmf-collage.count-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.lmf-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 35%, rgba(13,13,13,0.7) 70%, var(--bg-0) 100%);
    padding: 24px 28px;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
}
.lmf-chip {
    align-self: flex-start;
    font: 700 .72rem/1 var(--body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1A0A00;
    background: var(--yellow);
    padding: 7px 12px;
    border-radius: 100px;
    margin-bottom: 4px;
}
.lmf-title {
    font-size: clamp(1.6rem, 2.8vw, 2.6rem);
    line-height: 1.05;
    margin: 0;
    color: var(--text);
}
.lmf-meta {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 4px 0 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.lmf-meta .dot { color: var(--border-light); }

/* Horizontal rail used by Popular / Recent + the landing strip */
.ls-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
}
.ls-rail > * { scroll-snap-align: start; min-width: 0; }
.ls-rail::-webkit-scrollbar { height: 8px; }
.ls-rail::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 100px; }
.ls-rail::-webkit-scrollbar-thumb:hover { background: var(--red); }

.lh-lists-rail { margin-top: 28px; }

.ls-section-link {
    color: var(--red);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    align-self: flex-end;
    white-space: nowrap;
}
.ls-section-link:hover { color: var(--yellow); }

/* Overlapping poster stack card */
.list-stack-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}
.list-stack-card:hover {
    transform: translateY(-3px);
    border-color: var(--red);
    box-shadow: 0 14px 32px -16px rgba(202,33,40,0.45);
}
.lsc-cover {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--bg-2);
    overflow: hidden;
}
.lsc-body { padding: 14px 16px 18px; }
.lsc-title {
    font: 600 1.02rem/1.3 var(--body);
    margin: 0 0 6px;
}
.lsc-title a { color: var(--text); }
.lsc-title a:hover { color: var(--red); }
.lsc-meta {
    font-size: .68rem;
    color: var(--text-3);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.lsc-meta a { color: var(--yellow); }
.lsc-meta .dot { color: var(--border-light); }

/* The actual overlapping stack — Letterboxd-style */
.ls-stack {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 14px 22px;
    background:
        radial-gradient(60% 80% at 50% 110%, rgba(202,33,40,0.18), transparent 70%),
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
}
.ls-stack-empty { padding: 0; }
.ls-stack-empty .art { width: 100%; height: 100%; }
.ls-stack-poster {
    position: absolute;
    /* compute card width per slot; widest is poster 0 (front-left), each subsequent
       poster offsets right and rotates back a touch */
    --slot: calc(50% - 80px);
    --offset: calc(28px * var(--ls-i));
    top: 14px; bottom: 14px;
    left: calc(var(--slot) - 80px + var(--offset));
    width: 96px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--bg-1);
    background: var(--bg-3);
    box-shadow: 0 10px 22px -10px rgba(0,0,0,0.7);
    transform: rotate(calc(-4deg + (var(--ls-i) * 3deg)));
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
    z-index: calc(10 - var(--ls-i));
}
.list-stack-card:hover .ls-stack-poster {
    transform: rotate(calc(-4deg + (var(--ls-i) * 3deg))) translateY(-4px);
}
.ls-stack-poster img,
.ls-stack-poster .art {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Genre bento — cinematic poster-art tiles */
.ls-genre-bento {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 8px;
}
.ls-genre-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px 18px;
    color: var(--text);
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
    isolation: isolate;
}
.ls-genre-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7) 100%);
    z-index: 0;
}
.ls-genre-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(0,0,0,0.6); }
.ls-genre-name {
    position: relative; z-index: 1;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--text);
}
.ls-genre-count {
    position: relative; z-index: 1;
    font-size: .68rem;
    color: var(--yellow);
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .lists-mag-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .ls-genre-bento { grid-template-columns: repeat(3, 1fr); }
    .ls-rail { grid-template-columns: repeat(2, minmax(260px, 1fr)); grid-auto-columns: minmax(260px, 80vw); }
}
@media (max-width: 720px) {
    .lists-mag-hero { padding: 56px 0 36px; }
    .lists-mag-stats { gap: 16px; flex-wrap: wrap; }
    .lists-mag-stats strong { font-size: 1.5rem; }
    .ls-genre-bento { grid-template-columns: repeat(2, 1fr); }
    .ls-rail { grid-auto-columns: 80vw; grid-template-columns: none; }
}

/* =====================================================================
   Social profile — banner, stat bar, follow, stats dashboard, people.
   Prefix: .pf-*  (see CLAUDE.md "Page routing map" / user_routes.php)
   ===================================================================== */

/* ---- Banner (AniList/Twitter-style cover) ---- */
.profile-hero.has-banner { padding-top: 0; }
.profile-hero.has-banner .profile-hero-inner { margin-top: -56px; }
.profile-banner {
    position: relative;
    width: 100%;
    height: 240px;
    margin: 0 calc(-1 * var(--pad));
    width: calc(100% + 2 * var(--pad));
    overflow: hidden;
}
.profile-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-banner::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.55) 80%, var(--bg-0));
}
.profile-hero.has-banner .profile-avatar {
    position: relative; z-index: 2;
    border-color: var(--bg-0); border-width: 4px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
}
.pf-lock { font-size: 22px; vertical-align: middle; opacity: 0.7; }

/* ---- Instagram-style stat bar ---- */
.pf-statbar {
    list-style: none; display: flex; gap: 28px;
    padding: 0; margin: 0 0 16px;
}
.pf-statbar a {
    display: flex; flex-direction: column; line-height: 1.15;
    color: var(--text); text-decoration: none;
}
.pf-statbar strong { font-size: 22px; font-weight: 700; }
.pf-statbar span { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.pf-statbar a:hover strong { color: var(--red); }

/* ---- Follow button states ---- */
.pf-follow-form { display: inline; margin: 0; }
.pf-following-btn::after { content: ""; }
.pf-following-btn:hover {
    border-color: var(--red); color: var(--red);
}

/* ---- Private profile gate ---- */
.pf-private-gate {
    max-width: 640px; margin: 0 auto; padding: 64px 24px;
    text-align: center; color: var(--text-2);
    border: 1px dashed var(--border); border-radius: 16px;
    background: var(--bg-1);
}
.pf-private-lock { font-size: 48px; margin-bottom: 8px; opacity: 0.8; }
.pf-private-gate h2 { font-size: 26px; margin: 8px 0; color: var(--text); }

/* ---- Stats dashboard ---- */
.pf-stats { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.pf-stats-title { font: 700 28px/1 var(--display); letter-spacing: 0.02em; margin: 0 0 18px; }
.pf-stat-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px;
}
.pf-stat-card {
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 4px;
}
.pf-stat-card strong { font-size: 26px; font-weight: 700; }
.pf-stat-card span { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }

.pf-stats-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px;
}
.pf-stat-block {
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px;
}
.pf-stat-block-wide { grid-column: 1 / -1; }
.pf-stat-block h3 {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-2); margin: 0 0 14px;
}

/* Status distribution bar + legend */
.pf-statusbar {
    display: flex; height: 14px; border-radius: 7px; overflow: hidden;
    background: var(--bg-1); margin-bottom: 14px;
}
.pf-statusbar span { display: block; height: 100%; }
.pf-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pf-legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.pf-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pf-legend strong { margin-left: auto; color: var(--text); }

/* Score histogram */
.pf-histogram {
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px;
    align-items: end; height: 130px;
}
.pf-hbar {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    height: 100%; gap: 6px;
}
.pf-hbar-fill {
    width: 100%; min-height: 2px;
    background: linear-gradient(180deg, var(--red), rgba(202,33,40,0.45));
    border-radius: 4px 4px 0 0; transition: height 0.3s ease;
}
.pf-hbar em { font-style: normal; font-size: 11px; color: var(--text-3); }

/* Top genres */
.pf-genres { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-genres li {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 100px; padding: 6px 12px;
}
.pf-genres a { color: var(--text); text-decoration: none; font-size: 14px; }
.pf-genres a:hover { color: var(--red); }
.pf-genre-count {
    font-size: 12px; font-weight: 700; color: var(--text-2);
    background: rgba(255,255,255,0.05); border-radius: 100px; padding: 1px 8px;
}

/* ---- People lists (followers / following / requests) ---- */
.pf-people { list-style: none; padding: 0 var(--pad); margin: 0 auto; max-width: var(--max); display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pf-requests { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.pf-requests .pf-people { padding: 0; max-width: none; }
.pf-person {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 16px;
}
.pf-person-av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: var(--bg-1); display: flex; }
.pf-person-av img { width: 100%; height: 100%; object-fit: cover; }
.pf-person-av .avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font: 700 22px/1 var(--display); color: #fff; }
.pf-person-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pf-person-name { font-weight: 700; color: var(--text); text-decoration: none; }
.pf-person-name:hover { color: var(--red); }
.pf-person-bio { font-size: 13px; color: var(--text-2); margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-person-actions { display: flex; gap: 8px; flex: none; }
.pf-person-actions form { margin: 0; }
.pf-requests { margin-bottom: 28px; }
.pf-requests h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }

/* ---- Settings privacy toggle ---- */
.pf-toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.pf-toggle input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--red); }
.pf-toggle span { display: flex; flex-direction: column; gap: 3px; }
.pf-toggle small { font-size: 12px; line-height: 1.45; }

@media (max-width: 820px) {
    .pf-stat-cards { grid-template-columns: repeat(2, 1fr); }
    .pf-stats-grid { grid-template-columns: 1fr; }
    .pf-people { grid-template-columns: 1fr; }
    .profile-banner { height: 160px; }
    .pf-statbar { justify-content: center; }
}