/* ============================================================
   LIFEHAKI — Design v2 additions (landing + detail redesign)
   Loaded after style.css; overrides where needed.
   ============================================================ */

/* ---------- shared utilities ---------- */
.btn-lg { padding: 18px 36px; font-size: 16px; }
.btn-block { display: inline-flex; width: 100%; }

/* ============================================================
   LANDING — HERO
   ============================================================ */
.lh-hero {
    position: relative;
    padding: 140px 0 80px;
    overflow: hidden;
}
.lh-hero-bg {
    position: absolute; inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 60% at 20% 80%, rgba(202,33,40,0.32), transparent 60%),
        radial-gradient(ellipse 40% 50% at 90% 20%, rgba(253,201,73,0.08), transparent 60%),
        linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 60%, #050505 100%);
}
.lh-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent 70%);
    z-index: 0;
}
.lh-hero-inner {
    position: relative; z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 56px;
}
.lh-hero-text { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 880px; }
.lh-hero-headline {
    font-family: var(--display);
    font-size: clamp(48px, 7vw, 104px);
    line-height: 0.92;
    letter-spacing: 0.005em;
    margin: 0;
    text-wrap: balance;
    text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
.lh-hero-headline .accent { position: relative; color: var(--red); }
.lh-hero-headline .accent::after {
    content: '';
    position: absolute;
    left: -4px; right: -4px; bottom: 8px;
    height: 6px;
    background: var(--yellow);
    z-index: -1;
    opacity: 0.4;
}
.lh-hero-sub {
    font: 400 18px/1.6 var(--body);
    color: #C0C0C0;
    max-width: 580px;
    margin: 0;
}
.lh-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.lh-hero-social {
    display: flex; align-items: center; gap: 14px;
    font: 400 13px/1 var(--body);
    color: var(--text-2);
    flex-wrap: wrap; justify-content: center;
}
.lh-hero-social strong { color: white; font-weight: 600; margin: 0 4px; }
.lh-avatars { display: flex; }
.lh-av {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--bg-0);
    margin-right: -8px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 11px/1 var(--body);
    color: white;
}
.lh-hero-social .stars { color: var(--yellow); letter-spacing: 2px; font-size: 13px; }

.lh-hero-poster-wrap {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    border-radius: 24px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
    box-shadow:
        0 0 0 1px var(--border),
        0 50px 120px -30px rgba(202,33,40,0.35),
        0 30px 80px -30px rgba(0,0,0,0.7);
}
.lh-hero-poster-wrap::before {
    content: '';
    position: absolute; inset: -60px;
    background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(202,33,40,0.18), transparent 60%);
    z-index: -1; pointer-events: none;
}
.lh-hero-poster-tag {
    position: absolute;
    top: -22px; left: 18px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--text-3);
    text-transform: uppercase;
}
.lh-hero-poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #161616;
}
.lh-hero-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-hero-poster-meta {
    position: absolute; bottom: 16px; left: 16px; right: 16px;
    display: flex; align-items: center; gap: 12px;
    z-index: 2;
}
.lh-hero-poster-meta h3 {
    font: 600 16px/1.2 var(--body);
    margin: 0;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.lh-hero-poster::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
}

.lh-hero-sparkle {
    position: absolute;
    font-family: var(--display);
    color: var(--yellow);
    font-size: 28px;
    filter: drop-shadow(0 0 16px rgba(253,201,73,0.55));
    z-index: 4;
    animation: lh-float 4s ease-in-out infinite;
}
.lh-hero-sparkle.s1 { top: -16px; right: 24px; }
.lh-hero-sparkle.s2 { bottom: -16px; left: 40px; animation-delay: 1.5s; font-size: 18px; }
@keyframes lh-float {
    0%, 100% { transform: translateY(0) rotate(0); opacity: 1; }
    50% { transform: translateY(-12px) rotate(8deg); opacity: 0.7; }
}

.lh-hero-meta {
    margin-top: 56px;
    display: flex; gap: 40px; align-items: center; justify-content: center;
    font: 500 11px/1 var(--body);
    color: var(--text-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 2;
    position: relative;
    flex-wrap: wrap;
}
.lh-hero-meta .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red);
    display: inline-block; margin-right: 8px;
    box-shadow: 0 0 12px var(--red);
    animation: lh-blink 1.8s infinite;
}
@keyframes lh-blink {
    0%, 60%, 100% { opacity: 1; } 70%, 90% { opacity: 0.3; }
}

/* ============================================================
   LANDING — SECTIONS
   ============================================================ */
.lh-section { padding: 100px 0; position: relative; }
.lh-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.lh-section-head-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 56px;
}
.lh-section-title {
    font-family: var(--display);
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 0.98;
    letter-spacing: 0.01em;
    margin: 8px 0 8px;
}
.lh-section-sub {
    font: 400 16px/1.5 var(--body);
    color: var(--text-2);
    max-width: 520px;
    margin: 0;
}
.lh-section-head-center .lh-section-sub { text-align: center; }
.lh-section-link {
    color: var(--red);
    font: 500 14px/1 var(--body);
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap .2s;
}
.lh-section-link:hover { gap: 10px; }

/* ============================================================
   LANDING — MARQUEES & TRENDING POSTERS
   ============================================================ */
.lh-marquee {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.lh-marquee-row {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 12px 0;
    animation: lh-marq 75s linear infinite;
}
.lh-marquee-row.reverse { animation: lh-marq-rev 86s linear infinite; }
.lh-marquee:hover .lh-marquee-row { animation-play-state: paused; }
@keyframes lh-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lh-marq-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.lh-trending-row { animation-duration: 90s; }

.lh-poster {
    position: relative;
    width: 168px;
    flex-shrink: 0;
    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);
    display: block;
    color: inherit;
}
.lh-poster:hover {
    transform: translateY(-8px) scale(1.04);
    border-color: var(--red);
    box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6), 0 0 32px -10px var(--red-glow);
    z-index: 5;
}
.lh-poster img,
.lh-poster .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.lh-poster:hover img, .lh-poster:hover .art { transform: scale(1.06); }
.lh-poster .score {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    font-size: 14px; padding: 2px 6px;
}
.lh-poster .rank-badge {
    position: absolute; top: 0; left: 0; z-index: 4;
    background: var(--red); color: white;
    font-family: var(--display);
    font-size: 15px;
    padding: 6px 9px 4px;
    border-radius: 0 0 10px 0;
}
.lh-poster-content {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 12px 12px 10px;
    z-index: 3;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 70%);
}
.lh-poster-content h4 {
    font: 600 13px/1.25 var(--body);
    margin: 0 0 4px;
    color: white;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lh-poster-meta {
    font: 400 10.5px/1 var(--mono);
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

/* ============================================================
   LANDING — FEATURES
   ============================================================ */
.lh-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.lh-feature {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px 32px;
    position: relative;
    transition: all .3s;
    overflow: hidden;
}
.lh-feature::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(202,33,40,0.12), transparent 50%);
    opacity: 0;
    transition: opacity .3s;
}
.lh-feature:hover {
    border-color: var(--red);
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--red), 0 20px 50px -20px var(--red-glow);
}
.lh-feature:hover::before { opacity: 1; }
.lh-feature-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(202,33,40,0.18), rgba(202,33,40,0.04));
    border: 1px solid rgba(202,33,40,0.3);
    color: var(--red);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    position: relative; z-index: 1;
}
.lh-feature.yellow .lh-feature-icon {
    background: linear-gradient(135deg, rgba(253,201,73,0.18), rgba(253,201,73,0.04));
    border-color: rgba(253,201,73,0.3);
    color: var(--yellow);
}
.lh-feature-num {
    position: absolute; top: 22px; right: 26px;
    font-family: var(--display);
    font-size: 64px; line-height: 1;
    color: rgba(255,255,255,0.05);
    z-index: 0;
}
.lh-feature h3 { font: 600 20px/1.25 var(--body); margin: 0 0 10px; position: relative; z-index: 1; }
.lh-feature p { font: 400 15px/1.55 var(--body); color: var(--text-2); margin: 0; position: relative; z-index: 1; }

/* ============================================================
   LANDING — STATS
   ============================================================ */
.lh-stats {
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(202,33,40,0.18), transparent 60%),
        linear-gradient(135deg, #1A0608 0%, #0D0D0D 70%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}
.lh-stats::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 75%);
}
.lh-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
    position: relative;
}
.lh-stats-grid .lh-stat { position: relative; }
.lh-stats-grid .lh-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -16px; top: 20%; bottom: 20%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--border), transparent);
}
.lh-stat-num {
    font-family: var(--display);
    font-size: clamp(48px, 5.5vw, 80px);
    line-height: 1;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #fff 30%, #888 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lh-stat-label {
    font: 400 13px/1.2 var(--body);
    color: var(--yellow);
    letter-spacing: 0.04em;
}

/* ============================================================
   LANDING — GENRES BENTO
   ============================================================ */
.lh-genre-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 140px;
    gap: 14px;
}
.lh-genre-tile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .35s, box-shadow .35s, border-color .25s;
    border: 2px solid transparent;
    display: block;
    color: inherit;
}
.lh-genre-tile .art { position: absolute; inset: 0; transition: transform .6s; }
/* Admin-managed genre thumbnail — fills the tile behind the dark overlay. */
.lh-genre-tile .lh-genre-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.lh-genre-tile:hover .lh-genre-thumb { transform: scale(1.08); }
.lh-genre-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    transition: background .3s;
    z-index: 1;
}
.lh-genre-tile:hover { transform: scale(1.02); border-color: var(--red); box-shadow: 0 20px 60px -20px var(--red-glow); }
.lh-genre-tile:hover::after { background: rgba(0,0,0,0.3); }
.lh-genre-tile:hover .art { transform: scale(1.08); }
.lh-genre-content {
    position: absolute; bottom: 0; left: 0;
    padding: 18px 20px;
    z-index: 2;
}
.lh-genre-content h3 {
    font-family: var(--display);
    font-size: 32px;
    margin: 0 0 4px;
    letter-spacing: 0.02em;
    line-height: 0.95;
}
.lh-genre-content .count {
    font: 400 12px/1 var(--body);
    color: rgba(255,255,255,0.7);
}
.lh-genre-grid .gt-1 { grid-column: span 5; grid-row: span 2; }
.lh-genre-grid .gt-2 { grid-column: span 4; grid-row: span 1; }
.lh-genre-grid .gt-3 { grid-column: span 3; grid-row: span 2; }
.lh-genre-grid .gt-4 { grid-column: span 4; grid-row: span 1; }
.lh-genre-grid .gt-5 { grid-column: span 3; grid-row: span 1; }
.lh-genre-grid .gt-6 { grid-column: span 3; grid-row: span 2; }
.lh-genre-grid .gt-7 { grid-column: span 6; grid-row: span 1; }
.lh-genre-grid .gt-8 { grid-column: span 3; grid-row: span 1; }

/* ============================================================
   LANDING — REVIEW MARQUEE CARDS
   ============================================================ */
.lh-review-card {
    width: 320px;
    flex-shrink: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    display: flex; flex-direction: column;
    gap: 12px;
    transition: border-color .25s;
}
.lh-review-card:hover { border-color: rgba(202,33,40,0.5); }
.lh-review-card .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lh-review-card .show {
    font: 600 14px/1.2 var(--body);
    color: var(--text);
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lh-review-card .show:hover { color: var(--red); }
.lh-review-card .body {
    font: 400 13px/1.5 var(--body);
    color: #C8C8C8;
    font-style: italic;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lh-review-card .who {
    display: flex; align-items: center; gap: 8px;
    font: 400 12px/1 var(--body);
    color: var(--text-2);
}
.lh-review-card .who .av {
    width: 24px; height: 24px;
    border-radius: 50%;
    font: 600 10px/1 var(--body);
    color: white;
    display: inline-flex; align-items: center; justify-content: center;
}
.lh-review-card .stars { color: var(--yellow); font-size: 12px; }

/* ============================================================
   LANDING — IMPORT CARDS
   ============================================================ */
.lh-import-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.lh-import-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px 28px;
    text-align: center;
    transition: all .3s;
}
.lh-import-card:hover { border-color: var(--red); transform: translateY(-4px); }
.lh-import-logo {
    width: 56px; height: 56px;
    border-radius: 14px;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display);
    font-size: 26px;
    color: white;
}
.lh-import-card h4 { font: 600 16px/1.2 var(--body); margin: 0 0 14px; }
.lh-import-progress {
    height: 4px;
    background: var(--bg-3);
    border-radius: 100px;
    overflow: hidden;
    margin: 14px 0 8px;
}
.lh-import-progress span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--red), var(--yellow));
    animation: lh-prog 4s ease-in-out infinite;
}
@keyframes lh-prog { 0% { width: 0%; } 60% { width: 78%; } 100% { width: 100%; } }
.lh-import-card .meta {
    font: 400 11px/1 var(--body);
    color: var(--text-2);
    letter-spacing: 0.06em;
}
.lh-import-note {
    text-align: center;
    font: 400 14px/1 var(--body);
    color: var(--text-2);
    margin-top: 32px;
}

/* ============================================================
   LANDING — FINAL CTA
   ============================================================ */
.lh-final-cta {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    text-align: center;
    border-top: 1px solid var(--border);
}
.lh-final-cta-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 60% 60% at 30% 30%, rgba(202,33,40,0.35), transparent 50%),
        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(253,201,73,0.12), transparent 50%),
        linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
}
.lh-final-cta-bg::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black, transparent 80%);
}
.lh-final-cta-inner { position: relative; z-index: 2; }
.lh-final-headline {
    font-family: var(--display);
    font-size: clamp(44px, 6vw, 84px);
    line-height: 0.95;
    letter-spacing: 0.02em;
    max-width: 900px;
    margin: 18px auto 22px;
}
.lh-final-headline .y { color: var(--yellow); }
.lh-final-sub {
    font: 400 18px/1.5 var(--body);
    color: var(--text-2);
    max-width: 580px;
    margin: 0 auto 36px;
}
.lh-final-cta .btn-primary { animation: lh-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes lh-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(202,33,40,0.5); }
    50% { box-shadow: 0 0 0 16px rgba(202,33,40,0); }
}

/* ============================================================
   FOOTER — Replaces .site-footer with .lh-footer (richer 4-col)
   ============================================================ */
.site-footer { display: none; }
.lh-footer {
    background: var(--bg-0);
    padding: 72px 0 0;
    border-top: 1px solid var(--border);
    color: var(--text-2);
    margin-top: 80px;
}
.lh-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
}
.lh-footer-brand .logo { margin-bottom: 14px; }
/* Footer logo image — allow a slightly larger mark than the header but keep it
   clamped so a high-resolution upload can never overflow the footer column. */
.lh-footer-brand .logo-img { height: 44px; max-height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.lh-footer-tag { font: 400 14px/1.5 var(--body); color: var(--text-2); max-width: 280px; margin: 0 0 20px; }
.lh-footer-social { display: flex; gap: 10px; }
.lh-footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6);
    transition: all .2s;
}
.lh-footer-social a:hover { color: var(--red); border-color: var(--red); }
.lh-footer h5 {
    font: 500 11px/1 var(--body);
    letter-spacing: 0.18em;
    color: var(--text);
    text-transform: uppercase;
    margin: 0 0 16px;
}
.lh-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lh-footer ul a { font: 400 14px/1 var(--body); color: var(--text-2); transition: color .2s; }
.lh-footer ul a:hover { color: white; }
.lh-footer-bottom {
    border-top: 1px solid var(--border);
    padding: 20px 0;
    text-align: center;
    font: 400 12px/1.4 var(--body);
    color: #555;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
}

/* ============================================================
   DETAIL — Hero strip
   ============================================================ */
.dh-strip {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px var(--pad);
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font: 500 13px/1 var(--body);
    color: var(--text-2);
}
.dh-strip .group { display: inline-flex; align-items: center; gap: 8px; }
.dh-strip strong { color: var(--text); font-weight: 600; }
.dh-strip .star { color: var(--yellow); font-size: 14px; }
.dh-strip .divide { width: 1px; height: 14px; background: var(--border); }

/* Restyle dh-actions to allow icon square */
.dh-actions .icon-square {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all .2s;
}
.dh-actions .icon-square:hover { border-color: var(--red); color: var(--red); }
.dh-actions .icon-square.active { color: var(--yellow); border-color: var(--yellow); background: rgba(253,201,73,0.08); }

/* ============================================================
   DETAIL — Tracking sidebar (overrides .track-panel)
   ============================================================ */
.tracking-sidebar {
    display: flex; flex-direction: column; gap: 18px;
    position: sticky; top: 90px;
}
.tracking-panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
}
.tracking-panel .panel-title {
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.16em;
    color: #777;
    margin: 0 0 18px;
}
.tp-status {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 22px;
}
.tp-status .tp-btn {
    font: 500 12px/1.2 var(--body);
    padding: 9px 8px;
    border-radius: 8px;
    background: var(--bg-3);
    color: var(--text-2);
    border: 1px solid transparent;
    transition: all .18s;
    cursor: pointer;
}
.tp-status .tp-btn:hover { color: var(--text); }
.tp-status .tp-btn.active {
    background: var(--red-soft);
    color: var(--red);
    border-color: rgba(202,33,40,0.4);
    font-weight: 600;
}
.tp-section { margin-bottom: 20px; }
.tp-section:last-child { margin-bottom: 0; }
.tp-label {
    font: 400 11px/1 var(--body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 8px;
}
.tp-counter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tp-counter-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--bg-3);
    color: white;
    font: 600 16px/1 var(--body);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
    border: 1px solid var(--border);
    cursor: pointer;
}
.tp-counter-btn:hover { background: var(--red); border-color: var(--red); }
.tp-counter-display {
    flex: 1;
    text-align: center;
    font-family: var(--display);
    font-size: 28px;
    letter-spacing: 0.02em;
    line-height: 1;
}
.tp-counter-display .of { color: #666; font-size: 18px; margin-left: 4px; }
.tp-progress { height: 6px; background: var(--bg-3); border-radius: 100px; overflow: hidden; }
.tp-progress span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--red), var(--yellow));
    border-radius: 100px;
    transition: width .4s cubic-bezier(.2,.7,.3,1);
}
.tp-progress-meta {
    display: flex; justify-content: space-between;
    margin-top: 6px;
    font: 400 11px/1 var(--body);
    color: #777;
}
.tp-stars { display: flex; gap: 4px; }
.tp-star {
    width: 28px; height: 28px;
    font-size: 22px;
    color: #333;
    transition: all .15s;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.tp-star.filled { color: var(--yellow); filter: drop-shadow(0 0 6px rgba(253,201,73,0.4)); }
.tp-star:hover { transform: scale(1.15); }
.tp-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-date-field {
    padding: 8px 10px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.tp-date-field span { font-size: 10px; color: #777; letter-spacing: 0.06em; text-transform: uppercase; }
.tp-date-field input {
    background: transparent;
    border: 0;
    color: var(--text);
    font: 400 12px/1.2 var(--body);
    padding: 0;
    color-scheme: dark;
}
.tp-date-field input:focus { outline: none; }
.tp-notes {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    font: 400 13px/1.4 var(--body);
    color: var(--text);
    box-sizing: border-box;
}
.tp-notes:focus { outline: none; border-color: var(--red); }
.tp-save {
    width: 100%;
    padding: 12px 16px;
    background: var(--red);
    color: white;
    font: 600 13px/1 var(--body);
    border-radius: 8px;
    margin-top: 18px;
    transition: filter .2s;
    cursor: pointer;
    border: 0;
}
.tp-save:hover { filter: brightness(1.1); }
.tp-remove {
    width: 100%;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(202, 33, 40, 0.4);
    color: #f7b7b9;
    font: 500 12px/1 var(--body);
    border-radius: 8px;
    margin-top: 8px;
    cursor: pointer;
}
.tp-remove:hover { background: rgba(202, 33, 40, 0.1); color: #fff; border-color: var(--red); }

/* ============================================================
   DETAIL — facts grid, score panel
   ============================================================ */
.detail-facts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.detail-facts .fact {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color .15s;
}
.detail-facts .fact:hover { border-color: var(--border-light); }
.detail-facts .fact .label {
    font: 400 10px/1 var(--body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
}
.detail-facts .fact .value {
    font: 600 14px/1.3 var(--body);
    color: var(--text);
}

.score-panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 1fr;
    gap: 32px;
}
.score-panel .sp-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-big {
    font-family: var(--display);
    font-size: 72px;
    line-height: 1;
    color: var(--text);
}
.sp-big .of { color: #444; font-size: 24px; margin-left: 4px; }
.sp-rating-meta { font: 400 13px/1.4 var(--body); color: var(--text-2); margin: 8px 0 0; }
.sp-rank-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--red);
    color: white;
    border-radius: 100px;
    font: 600 11px/1 var(--body);
    letter-spacing: 0.04em;
    margin-top: 12px;
    width: max-content;
}
.sp-hist { display: flex; flex-direction: column-reverse; gap: 4px; }
.sp-bar-row {
    display: grid;
    grid-template-columns: 28px 1fr 40px;
    gap: 10px;
    align-items: center;
    font: 500 11px/1 var(--body);
    color: var(--text-2);
}
.sp-bar-row .bar {
    height: 7px;
    background: var(--bg-3);
    border-radius: 100px;
    overflow: hidden;
}
.sp-bar-row .bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--red), var(--yellow));
    border-radius: 100px;
}
.sp-bar-row .count { color: #777; font-size: 11px; text-align: right; }
.sp-divider { height: 1px; background: var(--border); margin: 12px 0; }
.sp-friends-score {
    font-family: var(--display);
    font-size: 40px;
    color: var(--yellow);
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(253,201,73,0.25));
}
.sp-ext-row {
    display: flex; justify-content: space-between; align-items: center;
    font: 500 13px/1 var(--body);
    color: var(--text);
    padding: 6px 0;
}
.sp-ext-row .src { color: var(--text-2); }

/* ============================================================
   DETAIL — gallery strip (compact)
   ============================================================ */
.gallery-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.gallery-strip .gallery-item {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all .2s;
    display: block;
    background: var(--bg-2);
}
.gallery-strip .gallery-item:hover { border-color: var(--red); transform: scale(1.03); }

/* ============================================================
   DETAIL — episodes (redesign overrides)
   ============================================================ */
.detail-main .ep-row {
    grid-template-columns: 56px 1fr auto;
    transition: all .2s;
    position: relative;
}
.detail-main .ep-row.watched { opacity: 0.6; }
.detail-main .ep-row.watched .ep-num { background: var(--red-soft); color: var(--red); }
.detail-main .ep-num {
    font-family: var(--display);
    font-size: 16px;
    letter-spacing: 0.02em;
    color: var(--text-2);
    background: var(--bg-3);
    padding: 6px 0 4px;
    border-radius: 8px;
    text-align: center;
    line-height: 1;
}
.ep-watched-toggle {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--border);
    color: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .2s;
    flex-shrink: 0;
    font: 700 14px/1 var(--body);
}
.ep-watched-toggle.on {
    background: var(--red);
    border-color: var(--red);
    color: white;
    transform: scale(1.05);
}

/* ============================================================
   DETAIL — reviews redesign (overrides .review-card etc.)
   ============================================================ */
.review-featured {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}
.review-featured .featured-tag {
    position: absolute;
    top: 22px; right: 22px;
    background: var(--red);
    color: white;
    font: 700 10px/1 var(--body);
    letter-spacing: 0.1em;
    padding: 5px 9px;
    border-radius: 100px;
}
.rev-user { display: flex; align-items: center; gap: 12px; }
.rev-user .av {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 14px/1 var(--body);
    color: white;
    object-fit: cover;
}
.rev-user .who { display: flex; flex-direction: column; gap: 2px; }
.rev-user .name { font: 600 14px/1 var(--body); color: var(--text); }
.rev-user .date { font: 400 12px/1 var(--body); color: var(--text-3); }
.rev-stars { color: var(--yellow); font-size: 16px; letter-spacing: 2px; }
.rev-body-large {
    font: 400 16px/1.75 var(--body);
    color: #C8C8C8;
    margin: 0;
}
.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.review-compact {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.review-compact .rev-body {
    font: 400 14px/1.65 var(--body);
    color: #C8C8C8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-composer {
    background: var(--bg-1);
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
}
.review-composer textarea {
    width: 100%;
    resize: vertical;
    min-height: 80px;
    padding: 12px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    font: 400 14px/1.5 var(--body);
    color: var(--text);
    box-sizing: border-box;
}
.review-composer textarea:focus { outline: none; border-color: var(--red); }
.review-composer .actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.review-composer .actions button[type="submit"] {
    background: var(--red);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font: 600 13px/1 var(--body);
    cursor: pointer;
    border: 0;
    transition: filter .15s;
}
.review-composer .actions button[type="submit"]:hover { filter: brightness(1.1); }
.review-composer .spoiler-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font: 400 12px/1.2 var(--body);
    color: var(--text-2);
}

/* ============================================================
   DETAIL — meta-expand
   ============================================================ */
.meta-expand {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
}
.meta-expand summary {
    list-style: none;
    cursor: pointer;
    font: 600 14px/1 var(--body);
    color: var(--text);
    display: flex; align-items: center; gap: 10px;
}
.meta-expand summary::-webkit-details-marker { display: none; }
.meta-expand summary::before {
    content: '+';
    color: var(--red);
    font-size: 22px;
    line-height: 1;
}
.meta-expand[open] summary::before { content: '–'; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
    .lh-features { grid-template-columns: repeat(2, 1fr); }
    .lh-genre-grid { grid-template-columns: repeat(8, 1fr); grid-auto-rows: 130px; }
    .lh-genre-grid .gt-1 { grid-column: span 4; }
    .lh-genre-grid .gt-2, .lh-genre-grid .gt-4, .lh-genre-grid .gt-7 { grid-column: span 4; }
    .lh-genre-grid .gt-3, .lh-genre-grid .gt-6 { grid-column: span 4; }
    .lh-genre-grid .gt-5, .lh-genre-grid .gt-8 { grid-column: span 4; }
    .lh-footer-grid { grid-template-columns: 1fr 1fr; }
    .detail-facts { grid-template-columns: repeat(3, 1fr); }
    .score-panel { grid-template-columns: 1fr; gap: 24px; }
    .gallery-strip { grid-template-columns: repeat(3, 1fr); }
    .review-grid { grid-template-columns: 1fr; }
    .tracking-sidebar { position: static; }
}
@media (max-width: 768px) {
    .lh-hero { padding: 100px 0 60px; }
    .lh-hero-inner { gap: 40px; }
    .lh-hero-meta { flex-direction: column; gap: 14px; }
    .lh-section { padding: 70px 0; }
    .lh-features { grid-template-columns: 1fr; }
    .lh-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
    .lh-stats-grid .lh-stat::after { display: none; }
    .lh-genre-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
    .lh-genre-grid > * { grid-column: span 1 !important; grid-row: span 1 !important; }
    .lh-import-grid { grid-template-columns: 1fr; }
    .lh-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .lh-footer-bottom { flex-direction: column; text-align: center; }
    .lh-poster { width: 138px; }
    .lh-section-head { flex-direction: column; align-items: flex-start; }
    .dh-strip { gap: 12px; font-size: 12px; padding: 12px var(--pad); }
    .dh-strip .divide { display: none; }
    .detail-facts { grid-template-columns: 1fr 1fr; }
    .gallery-strip { grid-template-columns: repeat(2, 1fr); }
    .lh-hero-poster-wrap { max-width: 100%; }
}
@media (max-width: 480px) {
    .lh-footer-grid { grid-template-columns: 1fr; }
    .lh-hero-headline { font-size: 40px; }
}

/* ============================================================
 * Review management system (RMS)
 * ============================================================ */

.rms-section { position: relative; }
.rms-tabs { display: flex; gap: 4px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.rms-tab { padding: 6px 14px; border-radius: 999px; font: 600 13px var(--mono); color: var(--text-2); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.15s, background 0.15s; }
.rms-tab:hover { color: var(--text); }
.rms-tab.active { background: var(--red); color: #fff; }

/* Composer */
.rms-composer { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-1); }
.rms-composer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; row-gap: 6px; }
.rms-composer-label { font: 600 13px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.rms-composer textarea { width: 100%; resize: vertical; min-height: 90px; background: var(--bg-0); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text); font: 15px/1.55 var(--body); }
.rms-composer textarea:focus { outline: none; border-color: var(--red); }
.rms-composer .actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.rms-composer button[type="submit"] { background: var(--red); color: #fff; border: 0; padding: 8px 18px; border-radius: 999px; font: 600 13px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.rms-composer .spoiler-toggle { font: 13px var(--body); color: var(--text-2); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.rms-meta { margin-left: auto; font: 12px var(--mono); color: var(--text-3); }

/* Half-star picker */
/* Review rating picker — mirrors the .tp-star design but with half-star granularity */
.rms-rating-picker { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.rms-stars { display: flex; gap: 4px; }

.rms-star-pair {
    position: relative;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s;
}
.rms-star-pair:hover { transform: scale(1.15); }

.rms-star-bg,
.rms-star-fill {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1;
    pointer-events: none;
    user-select: none;
}
/* Calmer empty state — dark with a touch of opacity so an unrated picker doesn't feel "loud" */
.rms-star-bg   { color: #2e2e2e; opacity: 0.7; }
.rms-star-fill {
    color: var(--yellow);
    clip-path: inset(0 100% 0 0);                /* fully hidden by default */
    transition: clip-path .12s ease, filter .12s ease;
}
.rms-star-pair.half .rms-star-fill {
    clip-path: inset(0 50% 0 0);                  /* show left half */
    filter: drop-shadow(0 0 6px rgba(253, 201, 73, 0.45));
}
.rms-star-pair.full .rms-star-fill {
    clip-path: inset(0 0 0 0);                    /* show full star */
    filter: drop-shadow(0 0 6px rgba(253, 201, 73, 0.45));
}

.rms-star-half {
    position: absolute; top: 0; bottom: 0;
    width: 50%;
    background: transparent; border: 0; padding: 0;
    cursor: pointer; z-index: 2;
}
.rms-star-half.left  { left: 0; }
.rms-star-half.right { right: 0; }
.rms-star-half:focus-visible {
    outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px;
}

.rms-rating-label { font: 600 13px var(--mono); color: var(--text-2); min-width: 70px; }

/* Display stars */
.rev-stars-row { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.rev-star { color: var(--border); }
.rev-star.full { color: var(--yellow, #f5b500); }
.rev-star.half { background: linear-gradient(90deg, var(--yellow, #f5b500) 50%, var(--border) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rev-stars-num { font: 600 12px var(--mono); color: var(--text-2); margin-left: 4px; }

/* Review card */
.rms-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.rms-card { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-1); position: relative; }
.rms-card.is-pinned { border-color: var(--red); margin-top: 20px; }
.rms-pinned-flag { position: absolute; top: -10px; left: 16px; background: var(--red); color: #fff; padding: 3px 10px; border-radius: 999px; font: 600 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }

.rms-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rms-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; object-fit: cover; }
.rms-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rms-byline { font: 14px var(--body); color: var(--text-2); }
.rms-byline .rms-author { color: var(--text); font-weight: 600; text-decoration: none; margin: 0 4px; }
.rms-byline .rms-author:hover { color: var(--red); }
.rms-byline-sub { font: 12px var(--mono); color: var(--text-3); margin-top: 2px; }
.rms-edited { color: var(--text-2); font-style: italic; }

.rms-staff-tag { display: inline-block; margin-left: 6px; background: var(--red); color: #fff; padding: 2px 8px; border-radius: 999px; font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }

.rms-rating-display { margin-left: auto; flex-shrink: 0; }

.rms-body { font: 15px/1.6 var(--body); color: var(--text); white-space: pre-wrap; word-wrap: break-word; }

/* Spoiler veil */
.rms-spoiler { position: relative; }
.rms-spoiler-tag { display: inline-block; background: rgba(229, 38, 38, 0.12); color: var(--red); border: 1px solid var(--red); padding: 2px 8px; border-radius: 4px; font: 600 11px var(--mono); letter-spacing: 0.06em; margin-bottom: 8px; }
.rms-spoiler-veil { position: relative; }
.rms-spoiler-veil .rms-body-hidden { filter: blur(6px) brightness(0.85); user-select: none; pointer-events: none; transition: filter 0.2s; }
.rms-spoiler-veil.revealed .rms-body-hidden { filter: none; user-select: text; pointer-events: auto; }
.rms-spoiler-reveal { position: absolute; inset: 0; margin: auto; max-width: 220px; max-height: 40px; background: var(--bg-0); color: var(--text); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font: 600 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; z-index: 2; }
.rms-spoiler-veil.revealed .rms-spoiler-reveal { display: none; }

/* Actions bar */
.rms-actions { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.rms-act { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; padding: 6px 10px; border-radius: 999px; cursor: pointer; color: var(--text-2); font: 600 12px var(--mono); letter-spacing: 0.04em; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.rms-act:hover { background: var(--bg-2); color: var(--text); }
.rms-act.on { color: var(--red); border-color: var(--red); }
.rms-act .ico { font-size: 14px; display: inline-flex; line-height: 1; transition: color .2s, transform .2s; }

/* Spacer that pushes the secondary actions (report/pin/edit/delete) to the right */
.rms-act-spacer { flex: 1 1 auto; }

/* --- Like (heart) --- */
.rms-act-like .ico-heart { color: var(--text-3); }
.rms-act-like:hover .ico-heart { color: #ff7a9a; transform: scale(1.1); }
.rms-act-like.on { color: #ff3b6b; border-color: rgba(255, 59, 107, 0.5); background: rgba(255, 59, 107, 0.08); }
.rms-act-like.on .ico-heart { color: #ff3b6b; }
.rms-act-like.on .ico-heart.animate { animation: rms-heart-pop .45s cubic-bezier(.34, 1.56, .64, 1); }

/* --- Dislike (broken heart) --- */
.rms-act-dislike.on { color: var(--text-3); border-color: var(--text-3); background: rgba(120, 120, 120, 0.08); }
.rms-act-dislike .ico-heart-broken { filter: grayscale(0.4); }
.rms-act-dislike:hover .ico-heart-broken { transform: scale(1.1); filter: none; }
.rms-act-dislike.on .ico-heart-broken { filter: none; }
.rms-act-dislike.on .ico-heart-broken.animate { animation: rms-heart-break .55s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes rms-heart-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.5); }
    55%  { transform: scale(0.85); }
    80%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@keyframes rms-heart-break {
    0%   { transform: scale(1) rotate(0); }
    25%  { transform: scale(1.25) rotate(-10deg); }
    50%  { transform: scale(0.9) rotate(8deg); }
    75%  { transform: scale(1.08) rotate(-4deg); }
    100% { transform: scale(1) rotate(0); }
}

/* --- Inline always-visible secondary actions --- */
.rms-act-report,
.rms-act-pin,
.rms-act-edit,
.rms-act-delete {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rms-act-report:hover { color: #ffa257; border-color: rgba(255, 162, 87, 0.4); }
.rms-act-pin.on,
.rms-act-pin:hover { color: var(--yellow); border-color: rgba(253, 201, 73, 0.5); }
.rms-act-edit:hover { color: var(--text); border-color: var(--border); }
.rms-act-delete.rms-danger { color: var(--red); }
.rms-act-delete.rms-danger:hover { background: rgba(255, 59, 92, 0.1); border-color: var(--red); }

/* Comments */
.rms-comments { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 12px; }
.rms-comment { display: flex; gap: 10px; align-items: flex-start; }
.rms-comment.rms-reply { margin-left: 36px; margin-top: 8px; }
.rms-c-av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.rms-c-body { flex: 1; min-width: 0; }
.rms-c-head { font: 13px var(--body); color: var(--text-2); }
.rms-c-head strong { color: var(--text); }
.rms-c-when { color: var(--text-3); font: 11px var(--mono); }
.rms-c-text { margin: 4px 0 0; font: 14px/1.5 var(--body); color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
.rms-c-reply { background: transparent; border: 0; padding: 4px 0; cursor: pointer; color: var(--text-3); font: 600 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.rms-c-reply:hover { color: var(--red); }
.rms-comment-form { display: flex; flex-direction: column; gap: 8px; }
.rms-comment-form textarea { width: 100%; resize: vertical; min-height: 60px; background: var(--bg-0); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font: 14px/1.5 var(--body); }
.rms-comment-form textarea:focus { outline: none; border-color: var(--red); }
.rms-cf-actions { display: flex; align-items: center; gap: 12px; }
.rms-cf-actions button { background: var(--red); color: #fff; border: 0; padding: 6px 14px; border-radius: 999px; cursor: pointer; font: 600 12px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.rms-replying-to { font: 12px var(--mono); color: var(--text-3); }
.rms-c-signed-out { font: 13px var(--body); color: var(--text-2); text-align: center; padding: 8px; }
.rms-c-signed-out a { color: var(--red); }

@media (max-width: 768px) {
    .rms-tabs { width: 100%; justify-content: space-between; }
    .rms-card-head { flex-wrap: wrap; }
    .rms-rating-display { flex-basis: 100%; margin-left: 0; margin-top: 4px; }
    .rms-rating-picker { margin-left: 0; width: 100%; }
    .rms-comment.rms-reply { margin-left: 20px; }
}

/* ============================================================
   CHARACTER RANKING SYSTEM
   ============================================================ */

.rk-container { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
.rk-narrow    { max-width: 820px; }
.rk-section   { padding: 56px 0; }
.rk-h1        { font: 700 36px/1.1 var(--display); margin: 0 0 24px; }
.rk-h2        { font: 700 24px/1.2 var(--display); margin: 0; }
.rk-muted     { color: var(--text-2); font: 400 13px/1.5 var(--body); }
.rk-link      { color: var(--red); font: 600 13px/1 var(--body); text-decoration: none; }
.rk-link:hover{ text-decoration: underline; }
.rk-eyebrow   { display: inline-block; font: 600 11px/1 var(--body); letter-spacing: 0.18em;
                text-transform: uppercase; color: var(--yellow); }
.rk-pill      { display: inline-block; padding: 4px 10px; border-radius: 999px;
                background: var(--yellow); color: #1a1a1a; font: 700 11px/1 var(--body);
                letter-spacing: 0.06em; text-transform: uppercase; }
.rk-empty     { color: var(--text-2); padding: 32px 0; text-align: center; }
.rk-divider   { border: 0; border-top: 1px solid var(--border); margin: 48px 0; }
.rk-section-head { display: flex; align-items: baseline; justify-content: space-between;
                   gap: 16px; margin-bottom: 24px; }

/* ----- Rankings home hero ----- */
.rk-home-hero { position: relative; padding: 120px 0 80px; overflow: hidden; min-height: 480px;
                display: flex; align-items: center; }
.rk-home-hero-bg { position: absolute; inset: 0; z-index: 0;
                   background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(202,33,40,0.35), transparent 60%),
                               linear-gradient(180deg, #0a0a0a 0%, #050505 100%); }
.rk-home-hero-img { position: absolute; inset: 0; width: 100%; height: 100%;
                    object-fit: cover; opacity: 0.35; filter: blur(2px) saturate(1.2); }
.rk-home-hero-fade { position: absolute; inset: 0;
                     background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(5,5,5,0.92) 100%); }
.rk-home-hero-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto;
                      padding: 0 var(--pad); text-align: center;
                      display: flex; flex-direction: column; align-items: center; gap: 22px; }
.rk-home-headline { font: 800 clamp(44px, 7vw, 88px)/0.95 var(--display); margin: 0;
                    letter-spacing: -0.01em; text-wrap: balance; }
.rk-home-headline .accent { color: var(--red); position: relative; }
.rk-home-headline .accent::after { content: ''; position: absolute; left: -4px; right: -4px;
                                   bottom: 6px; height: 6px; background: var(--yellow);
                                   opacity: 0.45; z-index: -1; }
.rk-home-sub { color: var(--text-2); font: 400 18px/1.6 var(--body); max-width: 600px; margin: 0; }
.rk-home-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* The rankings hero is a hard-coded DARK panel, so it cannot borrow the global
   light-theme button variants (.btn-ghost fills white and .btn alone inherits
   the dark body text colour — both vanish here). These two are on-dark. */
.rk-cta-primary {
    background: var(--red); color: #fff; border-color: var(--red);
    box-shadow: 0 10px 30px -12px rgba(202, 33, 40, 0.85);
}
.rk-cta-primary:hover { background: #e0353c; border-color: #e0353c; transform: translateY(-2px); }
.rk-cta-ghost {
    background: rgba(255, 255, 255, 0.06); color: #fff;
    border-color: rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rk-cta-ghost:hover {
    background: #fff; color: #101014; border-color: #fff; transform: translateY(-2px);
}
.rk-cta-primary:focus-visible, .rk-cta-ghost:focus-visible {
    outline: 2px solid var(--yellow); outline-offset: 3px;
}

/* ----- Author's unpublished rankings (WordPress-style drafts panel) ----- */
.rk-draft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rk-draft-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    border: 1px solid var(--border); border-left: 3px solid var(--yellow);
    border-radius: 12px; background: var(--bg-2);
}
.rk-draft-thumb { width: 72px; height: 44px; flex: 0 0 auto; border-radius: 8px;
                  object-fit: cover; background: var(--bg-3); }
.rk-draft-main  { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rk-draft-main strong { font: 700 15px/1.3 var(--body); overflow-wrap: anywhere; }
.rk-draft-badge {
    align-self: flex-start; padding: 2px 8px; border-radius: 999px;
    background: var(--yellow); color: #1a1a1a;
    font: 700 10px/1.6 var(--body); letter-spacing: 0.08em; text-transform: uppercase;
}
.rk-draft-actions { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
.rk-draft-del { margin: 0; }
.rk-draft-del-btn {
    background: transparent; color: var(--red);
    border: 1px solid var(--red-200, rgba(202, 33, 40, 0.35));
}
.rk-draft-del-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
@media (max-width: 640px) {
    .rk-draft-row { flex-wrap: wrap; }
    .rk-draft-actions { width: 100%; }
    .rk-draft-actions .btn { flex: 1; }
    .rk-draft-del { flex: 1; display: flex; }
    .rk-draft-del .btn { width: 100%; }
}

/* Draft preview banner on /rankings/{slug} (owner-only view). */
.rk-draft-bar {
    position: relative; z-index: 30; padding: 10px 18px; text-align: center;
    background: var(--yellow); color: #1a1a1a; font: 600 13px/1.4 var(--body);
}
.rk-draft-bar a { text-decoration: underline; margin-left: 8px; }

/* ----- Editor's pick feature card ----- */
.rk-feature-card { display: block; position: relative; min-height: 320px;
                   border-radius: 18px; overflow: hidden; text-decoration: none; color: white;
                   background-size: cover; background-position: center;
                   border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.rk-feature-fade { position: absolute; inset: 0;
                   background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%); }
.rk-feature-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px;
                   display: flex; flex-direction: column; gap: 10px; }
.rk-feature-title { font: 800 36px/1.05 var(--display); margin: 0; }
.rk-feature-sub   { color: rgba(255,255,255,0.78); font: 400 16px/1.5 var(--body); margin: 0; }

/* ----- Top characters rail ----- */
.rk-char-rail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px;
                scrollbar-width: thin; }
.rk-char-chip { flex: 0 0 180px; display: block; text-decoration: none; color: var(--text);
                background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px;
                overflow: hidden; transition: transform .15s, border-color .15s; }
.rk-char-chip:hover { transform: translateY(-2px); border-color: var(--red); }
.rk-char-chip img, .rk-char-chip-art { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.rk-char-chip-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.rk-char-chip-meta strong { font: 600 14px/1.2 var(--body); }
.rk-char-chip-meta span   { color: var(--yellow); font: 600 11px/1 var(--body);
                            letter-spacing: 0.08em; text-transform: uppercase; }

/* ----- Cards grid ----- */
.rk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.rk-card { position: relative; min-height: 220px; border-radius: 14px; overflow: hidden;
           text-decoration: none; color: white;
           background-color: var(--bg-1); background-size: cover; background-position: center;
           border: 1px solid var(--border); transition: transform .15s, border-color .15s; }
.rk-card:hover { transform: translateY(-3px); border-color: var(--red); }
.rk-card-fade { position: absolute; inset: 0;
                background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.9) 100%); }
.rk-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px;
                display: flex; flex-direction: column; gap: 6px; }
.rk-card-title { font: 700 20px/1.2 var(--display); margin: 0; }
.rk-card-sub   { color: rgba(255,255,255,0.78); font: 400 13px/1.4 var(--body); margin: 0; }
.rk-card-stats { color: rgba(255,255,255,0.65); font: 500 11px/1 var(--body);
                 display: flex; gap: 6px; margin-top: 4px;
                 letter-spacing: 0.04em; text-transform: uppercase; }

/* ============================================================
   RANKING DETAIL — FULL HERO
   ============================================================ */
.rk-hero { position: relative; min-height: 560px; padding: 120px 0 80px; overflow: hidden;
           display: flex; align-items: center; }
.rk-hero-bg  { position: absolute; inset: 0; z-index: 0; background: #0a0a0a; }
.rk-hero-img { position: absolute; inset: 0; width: 100%; height: 100%;
               object-fit: cover; opacity: 0.55; }
.rk-hero-glow { position: absolute; inset: 0;
                background: radial-gradient(ellipse 55% 60% at 50% 100%,
                            color-mix(in srgb, var(--accent, var(--red)) 45%, transparent),
                            transparent 65%); }
.rk-hero-fade { position: absolute; inset: 0;
                background:
                  linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(5,5,5,0.7) 60%, #050505 100%),
                  linear-gradient(90deg, rgba(5,5,5,0.6) 0%, rgba(5,5,5,0) 50%, rgba(5,5,5,0.6) 100%); }
.rk-hero-inner { position: relative; z-index: 2; max-width: 980px; margin: 0 auto;
                 padding: 0 var(--pad); display: flex; flex-direction: column;
                 align-items: center; text-align: center; gap: 22px; }
.rk-hero-title { font: 800 clamp(40px, 7vw, 88px)/0.95 var(--display); margin: 0;
                 text-shadow: 0 4px 30px rgba(0,0,0,0.7); text-wrap: balance; }
.rk-hero-tagline { font: 400 italic 22px/1.4 var(--display); color: rgba(255,255,255,0.92);
                   max-width: 700px; margin: 0;
                   border-left: 3px solid var(--accent, var(--red)); padding-left: 16px; }
.rk-hero-desc   { color: var(--text-2); font: 400 15px/1.6 var(--body); max-width: 640px; margin: 0; }
.rk-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

/* ============================================================
   RANKING LIST ROWS
   ============================================================ */
.rk-list { list-style: none; padding: 0; margin: 0;
           display: flex; flex-direction: column; gap: 12px; }
.rk-row { display: grid; grid-template-columns: 56px 72px 96px 1fr; gap: 18px;
          align-items: center; padding: 18px; background: var(--bg-1);
          border: 1px solid var(--border); border-radius: 14px;
          transition: border-color .15s, background .15s; }
.rk-row:hover { border-color: var(--border-light); }
.rk-row.is-pulse { border-color: var(--red); background: rgba(202,33,40,0.06); }
.rk-row-rank { font: 800 28px/1 var(--display); color: var(--text-2); text-align: center; }
.rk-row:nth-child(1) .rk-row-rank { color: var(--yellow); font-size: 36px; }
.rk-row:nth-child(2) .rk-row-rank { color: #d4d4d4; }
.rk-row:nth-child(3) .rk-row-rank { color: #b97333; }

.rk-row-vote { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rk-vote { background: transparent; border: 1px solid var(--border); color: var(--text-2);
           width: 36px; height: 28px; border-radius: 8px; cursor: pointer;
           font: 700 14px/1 var(--body); transition: all .12s; }
.rk-vote:hover:not(:disabled) { border-color: var(--text); color: var(--text); }
.rk-vote-up.is-on   { background: var(--red); border-color: var(--red); color: white;
                      box-shadow: 0 0 14px rgba(202,33,40,0.4); }
.rk-vote-down.is-on { background: #444; border-color: #555; color: white; }
.rk-vote:disabled   { cursor: not-allowed; opacity: 0.4; }
.rk-vote-score { font: 700 14px/1 var(--display); color: white; min-width: 36px; text-align: center; }

.rk-row-art img, .rk-row-art .art { width: 96px; aspect-ratio: 3/4; object-fit: cover;
                                    border-radius: 8px; display: block; }
.rk-row-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rk-row-name { color: white; font: 700 18px/1.2 var(--display); text-decoration: none; }
.rk-row-name:hover { color: var(--red); }
.rk-row-from { color: var(--text-2); font: 400 12px/1.4 var(--body); }
.rk-row-blurb { color: var(--text-2); font: 400 14px/1.5 var(--body); margin: 4px 0 0; }
.rk-row-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px;
              overflow: hidden; margin-top: 6px; }
.rk-row-bar-fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--yellow));
                   transition: width .25s ease-out; }
.rk-row-stats { display: flex; gap: 12px; color: var(--text-2);
                font: 500 11px/1 var(--body); letter-spacing: 0.06em;
                text-transform: uppercase; margin-top: 4px; flex-wrap: wrap; }
.rk-signin-nudge { text-align: center; margin-top: 18px; }

@media (max-width: 720px) {
    .rk-row { grid-template-columns: 36px 56px 64px 1fr; padding: 12px; gap: 12px; }
    .rk-row-rank { font-size: 20px; }
    .rk-row-art img, .rk-row-art .art { width: 64px; }
    .rk-row-name { font-size: 16px; }
    .rk-vote { width: 32px; height: 26px; }
}

/* ============================================================
   COMMENTS
   ============================================================ */
.rk-comment-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.rk-comment-form textarea { width: 100%; resize: vertical; min-height: 80px;
                            background: var(--bg-1); border: 1px solid var(--border);
                            border-radius: 10px; padding: 12px 14px; color: var(--text);
                            font: 14px/1.5 var(--body); }
.rk-comment-form textarea:focus { outline: none; border-color: var(--red); }
.rk-comment-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.rk-comments { list-style: none; padding: 0; margin: 24px 0 0;
               display: flex; flex-direction: column; gap: 14px; }
.rk-comment { padding: 14px 16px; background: var(--bg-1); border: 1px solid var(--border);
              border-radius: 10px; }
.rk-comment-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rk-comment-head a { color: var(--text); text-decoration: none; }
.rk-comment-head a:hover { color: var(--red); }
.rk-comment-body { margin: 8px 0 0; color: var(--text); font: 14px/1.55 var(--body);
                   white-space: pre-wrap; word-wrap: break-word; }
.rk-comment-del { background: transparent; border: 0; cursor: pointer; color: var(--text-2);
                  font: 700 16px/1 var(--body); padding: 0 4px; margin-left: auto; }
.rk-comment-del:hover { color: var(--red); }

/* ============================================================
   FORM (create/edit)
   ============================================================ */
.rk-form { display: flex; flex-direction: column; gap: 18px; }
.rk-field { display: flex; flex-direction: column; gap: 6px; }
.rk-field > span { font: 600 12px/1 var(--body); color: var(--text-2);
                   letter-spacing: 0.06em; text-transform: uppercase; }
.rk-field input, .rk-field textarea, .rk-field select {
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; color: var(--text); font: 14px/1.5 var(--body); width: 100%;
}
.rk-field input:focus, .rk-field textarea:focus, .rk-field select:focus {
    outline: none; border-color: var(--red);
}
.rk-field-inline { flex-direction: row; align-items: center; gap: 12px; }
.rk-field-inline > span { width: auto; flex: 1; }
.rk-field-inline input[type=color] { width: 56px; height: 36px; padding: 2px; cursor: pointer; }
.rk-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 18px;
               display: flex; flex-direction: column; gap: 14px; }
.rk-fieldset legend { padding: 0 8px; color: var(--yellow);
                      font: 600 11px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.rk-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.rk-form-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.btn-danger { background: #6b1313; color: white; border-color: #6b1313; }
.btn-danger:hover { background: #8b1818; }
.rk-danger { margin-top: 32px; }

.rk-add-char { position: relative; margin: 14px 0; }
.rk-add-char input { width: 100%; background: var(--bg-1); border: 1px solid var(--border);
                     border-radius: 10px; padding: 12px 14px; color: var(--text); font: 14px var(--body); }
.rk-char-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px;
                   max-height: 360px; overflow-y: auto; }
.rk-char-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
                  background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px;
                  cursor: pointer; text-align: left; color: var(--text); font: 14px var(--body); }
/* Two-line result: character name over the anime it belongs to, so two
   same-named characters are tellable apart at a glance. */
.rk-res-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-res-name { font-weight: 600; overflow-wrap: anywhere; }
.rk-res-meta { color: var(--text-2); font-size: 12px; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.rk-res-meta:empty { display: none; }
.rk-char-result:hover { border-color: var(--red); }
.rk-char-result img, .rk-char-art { width: 36px; height: 48px; object-fit: cover;
                                    border-radius: 4px; background: var(--bg-2); }

.rk-edit-entries { list-style: none; padding: 0; margin: 14px 0;
                   display: flex; flex-direction: column; gap: 8px; }
.rk-edit-entries li { display: grid; grid-template-columns: 56px 1fr auto;
                      gap: 12px; align-items: start; padding: 10px;
                      background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; }
.rk-edit-entries img, .rk-edit-entries .art { width: 56px; aspect-ratio: 3/4;
                                               object-fit: cover; border-radius: 6px; }
.rk-entry-main { min-width: 0; }
.rk-entry-blurb { width: 100%; margin-top: 8px; resize: vertical;
                  padding: 8px 10px; border-radius: 8px;
                  background: var(--bg-2); border: 1px solid var(--border);
                  color: var(--text-1); font: 500 13px/1.45 var(--body); }
.rk-entry-blurb-foot { margin-top: 4px; font-size: 11px; }
.rk-row-del { background: transparent; border: 1px solid var(--border); color: var(--text-2);
              padding: 6px 12px; border-radius: 8px; cursor: pointer;
              font: 600 12px var(--body); }
.rk-row-del:hover { color: white; border-color: var(--red); }

/* ---------- Ranking comments v2: avatars, likes, replies ---------- */
.rk-comments .rk-comment {
    display: grid; grid-template-columns: 40px 1fr; gap: 12px;
    padding: 12px 14px; align-items: flex-start;
}
.rk-comment-thread { list-style: none; padding: 0; margin: 0;
                     background: var(--bg-1); border: 1px solid var(--border);
                     border-radius: 10px; overflow: hidden; }
.rk-comments-inner { list-style: none; padding: 0; margin: 0; }
.rk-comments-inner .rk-comment { background: transparent; border: 0; border-radius: 0; }
.rk-comments-inner .rk-comment + .rk-comment { border-top: 1px solid var(--border); }
.rk-comment-reply { padding-left: 40px !important; background: rgba(255,255,255,0.015) !important; }
.rk-comment-reply::before { content: '↳'; color: var(--text-2); margin-right: 4px;
                            grid-column: 1; align-self: center; }

.rk-comment-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
                 background: var(--bg-2); display: flex; align-items: center; justify-content: center;
                 flex: 0 0 40px; }
.rk-comment-av img { width: 100%; height: 100%; object-fit: cover; }
.rk-av-fallback { color: white; font: 700 16px/1 var(--display); }
.rk-comment-av-me { width: 40px; height: 40px; }

.rk-comment-main { min-width: 0; }
.rk-comment-actions { display: flex; gap: 14px; margin-top: 6px; align-items: center; }
.rk-c-like, .rk-c-reply { background: transparent; border: 0; color: var(--text-2);
                          cursor: pointer; font: 600 12px var(--body);
                          letter-spacing: 0.06em; text-transform: uppercase;
                          padding: 4px 6px; border-radius: 6px;
                          display: inline-flex; align-items: center; gap: 6px; }
.rk-c-like:hover, .rk-c-reply:hover { color: white; background: rgba(255,255,255,0.05); }
.rk-c-like.is-on { color: var(--red); }
.rk-c-like.is-on .rk-c-like-icon { text-shadow: 0 0 10px var(--red); }
.rk-c-like:disabled { cursor: not-allowed; opacity: 0.45; }
.rk-c-like-icon { font-size: 14px; }
.rk-c-like-count { font-variant-numeric: tabular-nums; }

.rk-comment-form-row { display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.rk-comment-form-main { display: flex; flex-direction: column; gap: 8px; }
.rk-reply-banner { padding: 6px 10px; background: rgba(202,33,40,0.08);
                   border-left: 3px solid var(--red); border-radius: 4px;
                   font: 400 12px/1.4 var(--body); color: var(--text-2);
                   display: flex; gap: 8px; align-items: center; }
.rk-reply-banner strong { color: white; font-weight: 600; }
.rk-reply-banner .rk-link { margin-left: auto; font-size: 11px; background: none; border: 0; cursor: pointer; }

.rk-field-hint { display: block; margin-top: 4px; }
.rk-entry-tally { margin: 10px 0 0; font-weight: 600; }
.rk-entry-tally.is-short { color: var(--yellow); }
.rk-field-hint code { background: var(--bg-2); padding: 2px 6px; border-radius: 4px;
                      font: 12px var(--mono, monospace); }

/* ---------- Admin: rankings table additions ---------- */
.row-badge.featured { background: rgba(253,201,73,0.15); color: var(--yellow); }
.admin-row-actions  { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-row-actions form { margin: 0; }

/* ============================================================
   Character page (templates/character.php)
   Ported from the v2 design. Class prefix: .ch-*
   ============================================================ */

/* HERO ------------------------------------------------------- */
.ch-hero {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 80px;
    isolation: isolate;
}
.ch-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 70% 60% at 20% 100%, rgba(202,33,40,0.32), transparent 55%),
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(253,201,73,0.06), transparent 60%),
        linear-gradient(135deg, #0D0D0D 0%, #1A1206 30%, #0D0D0D 60%, #1A0608 100%);
}
.ch-hero-grid {
    position: absolute; inset: 0; z-index: 1;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent 70%);
    pointer-events: none;
}
.ch-hero-bottom-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
    background: linear-gradient(180deg, transparent, var(--bg-0));
    z-index: 1;
    pointer-events: none;
}
.ch-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
}

/* Zone A — portrait */
.ch-portrait-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ch-portrait {
    position: relative;
    width: 240px;
    height: 340px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        -10px 0 50px -8px rgba(202,33,40,0.32),
        0 30px 60px -20px rgba(0,0,0,0.7),
        inset 0 0 0 1px rgba(255,255,255,0.04);
}
.ch-portrait img,
.ch-portrait .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-portrait::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(13,13,13,0.65) 90%, var(--bg-0));
    z-index: 3;
    pointer-events: none;
}
.ch-fav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 100px;
    background: var(--red);
    color: white;
    font: 600 13px/1 var(--body);
    box-shadow: 0 8px 22px -10px var(--red-glow);
}

/* Zone B — identity */
.ch-id-col { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
.ch-crumb {
    font: 400 12px/1.4 var(--body);
    color: var(--text-3);
    margin: 0 0 14px;
}
.ch-crumb a { transition: color .15s; }
.ch-crumb a:hover { color: var(--text); }
.ch-crumb .sep { margin: 0 8px; color: #333; }

.ch-series-tag {
    display: inline-flex; align-items: center;
    gap: 6px;
    font: 600 11px/1 var(--body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 100px;
    background: var(--red-soft);
    border: 1px solid rgba(202,33,40,0.4);
    color: var(--red);
    width: max-content;
    margin-bottom: 18px;
    transition: background .2s;
}
.ch-series-tag:hover { background: rgba(202,33,40,0.22); }

.ch-name {
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 84px);
    line-height: 0.9;
    letter-spacing: 0.005em;
    margin: 0 0 10px;
    text-shadow: 0 3px 40px rgba(0,0,0,0.6);
    text-wrap: balance;
    text-transform: uppercase;
}
.ch-name-jp {
    font: 400 16px/1.4 var(--body);
    letter-spacing: 0.08em;
    color: #777;
    margin: 0 0 6px;
}
.ch-aka {
    font: italic 400 14px/1.4 var(--body);
    color: var(--text-2);
    margin: 0 0 22px;
}

.ch-archetype-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: var(--bg-2);
    border: 1px solid var(--red);
    border-radius: 10px;
    font-family: var(--display);
    font-size: 17px;
    letter-spacing: 0.06em;
    color: white;
    width: max-content;
    margin-bottom: 22px;
    box-shadow: 0 0 0 1px rgba(202,33,40,0.18), 0 10px 30px -10px var(--red-glow);
    text-transform: uppercase;
    transition: transform .2s;
}
.ch-archetype-badge:hover { transform: translateY(-1px); }
.ch-archetype-badge::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 2px;
    background: var(--red);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.ch-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 22px;
}
.ch-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 100px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    font: 500 12px/1 var(--body);
    color: var(--text-2);
}
.ch-chip strong { color: var(--text); font-weight: 600; }
.ch-chip-icon { color: #666; font-size: 10px; letter-spacing: .1em; }

.ch-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ch-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 100px;
    background: var(--red);
    color: white;
    font: 600 14px/1 var(--body);
    transition: filter .2s, transform .2s;
    box-shadow: 0 8px 24px -8px rgba(202,33,40,0.6);
}
.ch-fav-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ch-fav-btn.faved { animation: ch-fav-pulse 0.55s ease-out; }
@keyframes ch-fav-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.ch-list-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px;
    border-radius: 100px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: white;
    font: 600 14px/1 var(--body);
    transition: border-color .2s, color .2s;
}
.ch-list-btn:hover { border-color: var(--red); color: var(--red); }

/* Zone C — community card */
.ch-stats-card {
    background: rgba(20,20,20,0.85);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ch-stats-title {
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: #555;
    margin: 0;
}
.ch-divider { height: 1px; background: var(--border); }
.ch-stats-fav { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ch-stats-fav .num {
    font-family: var(--display);
    font-size: 44px;
    letter-spacing: 0.01em;
    color: var(--yellow);
    line-height: 1;
    filter: drop-shadow(0 0 16px rgba(253,201,73,0.25));
}
.ch-stats-fav .lbl { font: 400 12px/1.3 var(--body); color: var(--text-2); }
.ch-cross { font: 400 12px/1.5 var(--body); color: #888; }
.ch-cross strong { color: var(--text); font-weight: 600; }

/* VA strip */
.ch-va-strip {
    position: relative; z-index: 3;
    background: rgba(20,20,20,0.95);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    padding: 14px var(--pad);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    font: 500 13px/1 var(--body);
    color: var(--text-2);
}
.ch-va-strip .lbl { color: #555; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }
.ch-va-strip .va-name strong { color: white; font-weight: 600; }
.ch-va-strip .va-name span { color: var(--text-2); }
.ch-va-strip .divider { width: 1px; height: 16px; background: var(--border); }
.ch-va-avatar {
    width: 30px; height: 30px;
    border-radius: 50%; overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.ch-va-avatar img,
.ch-va-avatar .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-va-also { display: flex; align-items: center; gap: 8px; }
.ch-va-also-thumbs { display: flex; }
.ch-va-also-thumbs > * {
    width: 26px; height: 26px;
    border-radius: 50%; overflow: hidden;
    border: 2px solid var(--bg-2);
    margin-right: -8px;
    position: relative;
    transition: transform .2s, z-index 0s .2s;
    background: var(--bg-3);
}
.ch-va-also-thumbs > *:hover { transform: scale(1.15); z-index: 2; transition: transform .2s; }
.ch-va-also-thumbs img,
.ch-va-also-thumbs .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* BODY ------------------------------------------------------- */
.ch-body {
    max-width: 1180px;
    margin: 0 auto;
    /* Top padding gives the first body section breathing room
       below the hero / VA strip — flex `gap` only spaces siblings,
       not the leading edge, so without this the first section
       (often Voice cast, when there's no About/Gallery above it)
       collapses against the hero. */
    padding: 64px var(--pad) 120px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Spoiler banner */
.ch-spoiler-banner {
    /* ch-body now provides 64px of top padding; the banner sits flush
       to it so we don't need its own margin-top anymore. */
    padding: 18px 24px;
    border-radius: 14px;
    background: rgba(253,201,73,0.06);
    border: 1px solid rgba(253,201,73,0.28);
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 18px;
    align-items: center;
    transition: background .25s, border-color .25s;
}
.ch-spoiler-banner.unlocked {
    background: rgba(52,209,124,0.06);
    border-color: rgba(52,209,124,0.28);
}
.ch-spoiler-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--yellow);
    background: rgba(253,201,73,0.12);
    flex-shrink: 0;
}
.ch-spoiler-banner.unlocked .ch-spoiler-icon { color: #34D17C; background: rgba(52,209,124,0.12); }
.ch-spoiler-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ch-spoiler-text .title { font: 600 14.5px/1.3 var(--body); color: white; }
.ch-spoiler-text .sub { font: 400 13px/1.5 var(--body); color: var(--text-2); }
.ch-spoiler-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ch-spoiler-toggle {
    padding: 9px 16px;
    font: 600 13px/1 var(--body);
    border-radius: 100px;
    color: var(--yellow);
    background: rgba(253,201,73,0.12);
    border: 1px solid rgba(253,201,73,0.35);
    transition: background .2s;
}
.ch-spoiler-toggle:hover { background: rgba(253,201,73,0.22); }
.ch-spoiler-banner.unlocked .ch-spoiler-toggle {
    color: #34D17C;
    background: rgba(52,209,124,0.12);
    border-color: rgba(52,209,124,0.35);
}

/* Spoiler blur utility */
.spoiler-content {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    transition: filter .4s ease;
}
.spoiler-content.revealed {
    filter: none;
    pointer-events: all;
    user-select: auto;
}

/* Section chrome */
.ch-section { display: flex; flex-direction: column; gap: 26px; }
.ch-sec-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
}
.ch-sec-head .left { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ch-sec-title {
    font-family: var(--display);
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1;
    letter-spacing: 0.01em;
    margin: 0;
    text-transform: uppercase;
}
.ch-sec-sub {
    font: 400 14px/1.5 var(--body);
    color: var(--text-2);
    margin: 0;
}

/* Biography */
.ch-bio {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 56px;
    align-items: start;
}
.ch-bio-text {
    font: 400 16px/1.85 var(--body);
    color: #C8C8C8;
    max-width: 680px;
    margin: 0 0 18px;
}
.ch-bio-extra {
    margin-top: 18px;
    padding: 18px 22px;
    border-radius: 0 12px 12px 0;
    border-left: 3px solid var(--yellow);
    background: rgba(253,201,73,0.04);
    display: flex; flex-direction: column; gap: 10px;
}
.ch-bio-extra-head {
    display: flex; align-items: center; gap: 8px;
    font: 600 11px/1 var(--body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yellow);
}
.ch-bio-extra-body {
    font: 400 15px/1.75 var(--body);
    color: #B8B8B8;
    margin: 0;
}
.ch-bio-side {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex; flex-direction: column; gap: 14px;
    position: sticky;
    top: 96px;
}
.ch-bio-side h4 {
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.16em;
    color: #555;
    margin: 0;
    text-transform: uppercase;
}
.ch-bio-side dl {
    margin: 0;
    display: grid;
    grid-template-columns: 90px 1fr;
    row-gap: 10px;
    column-gap: 12px;
    font: 400 13px/1.4 var(--body);
}
.ch-bio-side dt { color: var(--text-2); }
.ch-bio-side dd { margin: 0; color: white; font-weight: 500; }

/* Gallery */
.ch-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 14px;
    scroll-snap-type: x mandatory;
}
.ch-gallery-card {
    position: relative;
    aspect-ratio: 200 / 280;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: transform .25s, border-color .25s, box-shadow .25s;
    scroll-snap-align: start;
    display: block;
    background: var(--bg-2);
}
.ch-gallery-card img,
.ch-gallery-card .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ch-gallery-card:hover { transform: scale(1.04); border-color: var(--red); box-shadow: 0 24px 40px -20px rgba(202,33,40,0.4); }
.ch-gallery-card:hover img,
.ch-gallery-card:hover .art { transform: scale(1.08); }

/* Tags cloud */
.ch-tags-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-tag {
    display: inline-flex; align-items: center;
    font: 500 12px/1 var(--body);
    padding: 7px 13px;
    border-radius: 100px;
    background: var(--red-soft);
    border: 1px solid rgba(202,33,40,0.3);
    color: var(--red);
    transition: background .2s, transform .2s;
}
.ch-tag:hover { background: rgba(202,33,40,0.25); transform: translateY(-1px); }

/* Voice cast grid */
.ch-va-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.ch-va-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 12px;
}
.ch-va-card-lang {
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--yellow);
    text-transform: uppercase;
    margin: 0;
}
.ch-va-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ch-va-card-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ch-va-card-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-3);
    position: relative;
}
.ch-va-card-avatar img,
.ch-va-card-avatar .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-va-card-name {
    font: 500 14px/1.3 var(--body);
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-va-card-name a { transition: color .2s; }
.ch-va-card-name a:hover { color: var(--red); }

/* Appearances */
.ch-appearances {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}
.ch-appearance-card {
    display: flex; flex-direction: column; gap: 10px;
    transition: transform .25s;
}
.ch-appearance-card:hover { transform: translateY(-4px); }
.ch-appearance-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid transparent;
    transition: border-color .25s, box-shadow .25s;
}
.ch-appearance-card:hover .ch-appearance-poster {
    border-color: var(--red);
    box-shadow: 0 24px 40px -20px rgba(202,33,40,0.45);
}
.ch-appearance-poster img,
.ch-appearance-poster .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-appearance-role {
    position: absolute; top: 8px; left: 8px;
    font: 600 10px/1 var(--body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--red);
    color: white;
    padding: 5px 8px;
    border-radius: 100px;
    z-index: 2;
}
.ch-appearance-title {
    font: 600 13.5px/1.3 var(--body);
    margin: 0;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-appearance-meta {
    font: 400 11px/1 var(--body);
    color: var(--text-3);
    margin: 0;
}

/* Also Love */
.ch-alsolove {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 18px;
}
.ch-alsolove-card {
    display: flex; flex-direction: column; gap: 8px;
    text-align: center;
    transition: transform .25s;
}
.ch-alsolove-card:hover { transform: translateY(-4px); }
.ch-alsolove-portrait {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-2);
    border: 2px solid var(--border);
    transition: border-color .25s, box-shadow .25s;
}
.ch-alsolove-card:hover .ch-alsolove-portrait {
    border-color: var(--red);
    box-shadow: 0 14px 30px -10px rgba(202,33,40,0.45);
}
.ch-alsolove-portrait img,
.ch-alsolove-portrait .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-alsolove-name {
    font: 600 13.5px/1.3 var(--body);
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-alsolove-meta { font: 400 11px/1 var(--body); color: var(--text-3); }

/* Responsive */
@media (max-width: 1199px) {
    .ch-hero-inner { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
    .ch-stats-card { grid-column: 1 / -1; }
    .ch-bio { grid-template-columns: 1fr; gap: 32px; }
    .ch-bio-side { position: static; }
}
@media (max-width: 768px) {
    .ch-hero { padding-top: 32px; padding-bottom: 48px; }
    .ch-hero-inner { grid-template-columns: 1fr; gap: 28px; padding: 0 24px; }
    .ch-portrait { width: 200px; height: 280px; }
    .ch-name { font-size: clamp(40px, 11vw, 64px); }
    .ch-body { padding: 0 24px 80px; gap: 56px; }
    .ch-va-strip { padding: 12px 20px; gap: 12px; }
    .ch-spoiler-banner { grid-template-columns: 1fr; }
    .ch-spoiler-actions { justify-content: flex-start; }
}

/* Character page — favorite button states */
.ch-fav-btn.is-faved {
    background: linear-gradient(135deg, #b51b22, var(--red));
    box-shadow: 0 0 0 1px rgba(202,33,40,0.6), 0 12px 30px -8px rgba(202,33,40,0.6);
}
.ch-fav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 8px;
    margin-left: 4px;
    border-radius: 100px;
    background: rgba(0,0,0,0.28);
    font: 600 12px/1 var(--body);
    color: rgba(255,255,255,0.92);
}

/* Character page — Quotes widget */
.ch-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.ch-quote {
    margin: 0;
    padding: 22px 24px 18px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red);
    border-radius: 0 12px 12px 0;
    display: flex; flex-direction: column; gap: 10px;
    position: relative;
}
.ch-quote::before {
    content: '“';
    position: absolute;
    top: -8px; left: 14px;
    font-family: var(--display);
    font-size: 56px;
    line-height: 1;
    color: rgba(202,33,40,0.35);
    pointer-events: none;
}
.ch-quote-body {
    margin: 0;
    font: italic 400 15.5px/1.6 var(--body);
    color: #DCDCDC;
}
.ch-quote-source {
    font: 600 11px/1 var(--body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* Admin character form — Gallery & Quotes sub-sections */
.admin-subform {
    margin-top: 26px;
    padding: 20px 22px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.admin-subform legend {
    padding: 0 8px;
    font: 600 13px/1 var(--body);
    color: var(--text);
    letter-spacing: 0.04em;
}
.admin-subform legend small { font-weight: 400; }
.admin-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.admin-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.admin-row-stack { flex-direction: column; align-items: stretch; }
.admin-row input[type="url"],
.admin-row input[type="text"],
.admin-row textarea {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    font-family: var(--body);
    font-size: 13px;
}
.admin-row textarea { resize: vertical; min-height: 56px; }
.admin-row-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.admin-row-meta input[type="text"] { flex: 1; min-width: 160px; }
.admin-row-del,
.admin-row-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 500 12px/1 var(--body);
    color: var(--text-2);
    user-select: none;
    cursor: pointer;
}
.admin-row-del input,
.admin-row-flag input { margin: 0; }
.admin-row-add {
    align-self: flex-start;
}

/* Character page — Report incorrect data
   Mirrors the small <details> widget in templates/detail.php so the
   moderator-flagging affordance feels the same on both pages. */
.ch-report {
    max-width: 520px;
    margin: -24px auto 0;
}
.ch-report > details > summary {
    list-style: none;
    cursor: pointer;
    font: 500 12px/1 var(--body);
    color: var(--text-3);
    padding: 6px 0;
    text-align: center;
    transition: color .2s;
}
.ch-report > details > summary::-webkit-details-marker { display: none; }
.ch-report > details > summary:hover { color: var(--text-2); }
.ch-report > details[open] > summary { color: var(--text-2); margin-bottom: 12px; }
.ch-report-form {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.ch-report-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: 400 13.5px/1.5 var(--body);
    resize: vertical;
}
.ch-report-form textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(202,33,40,0.18);
}
.ch-report-form button { align-self: flex-end; }

/* ============================================================
   Ad / promo widget — marquee of sponsored products (.aw-*)
   Rendered by templates/partials/ad_widget.php; one per page.
   ============================================================ */
.aw-widget { margin: 40px 0; }
.aw-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.aw-eyebrow {
    font: 600 11px/1 var(--mono, 'JetBrains Mono', monospace);
    letter-spacing: .12em; color: var(--red); text-transform: uppercase;
}
.aw-title { font: 700 20px/1.2 var(--display, inherit); color: var(--text-1); margin: 0; }

.aw-marquee {
    position: relative; overflow: hidden;
    border: 1px solid var(--border); border-radius: 16px;
    background: var(--bg-2); padding: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.aw-track { display: flex; gap: 14px; width: max-content; }
.aw-track-static { width: 100%; flex-wrap: wrap; }
.aw-track-animated { animation: aw-scroll 36s linear infinite; }
.aw-marquee:hover .aw-track-animated { animation-play-state: paused; }
@keyframes aw-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.aw-card {
    flex: 0 0 auto; width: 220px;
    display: flex; gap: 12px; align-items: center;
    background: var(--bg-0, #0a0a0a); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px; text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.aw-card:hover {
    border-color: var(--red); transform: translateY(-2px);
    box-shadow: 0 16px 40px -20px var(--red-glow, rgba(202,33,40,0.5));
}
.aw-card-img {
    flex: 0 0 64px; width: 64px; height: 64px;
    border-radius: 8px; overflow: hidden; background: #060606;
}
.aw-card-img img { width: 100%; height: 100%; object-fit: cover; }
.aw-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-card-name {
    font: 600 14px/1.3 var(--body, inherit); color: var(--text-1);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aw-card-price { font: 700 13px/1 var(--mono, monospace); color: var(--text-2); }
.aw-card-cta { font: 600 11px/1 var(--mono, monospace); color: var(--red); margin-top: 3px; letter-spacing: .02em; }

@media (max-width: 640px) {
    .aw-title { font-size: 17px; }
    /* Drop the auto-scroll on mobile; let users swipe the strip instead. */
    .aw-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
    .aw-track-animated { animation: none; width: max-content; }
    .aw-card { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
    .aw-track-animated { animation: none; }
    .aw-marquee { overflow-x: auto; }
}

/* ===========================================================================
   Headless blog (templates/blog/*). Classes existed in markup but had NO
   styles, so every child of <section class="section"> went full-bleed and the
   raw WordPress post HTML overflowed the viewport. Each top-level block here
   re-creates the site's standard width container (max-width var(--max) +
   horizontal var(--pad)); the article body additionally clamps all embedded
   media so wide WP images/tables/iframes can never exceed the column.
   =========================================================================== */

/* --- shared width containers (the actual overflow fix) ------------------- */
.blog-grid,
.blog-article,
.blog-comments,
.blog-article + .blog-comments,
.breadcrumbs,
.pagination {
    max-width: var(--max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
    box-sizing: border-box;
}
/* The reading column (article + its comments) is intentionally narrower. */
.blog-article,
.blog-comments,
.breadcrumbs { max-width: 820px; }

/* --- breadcrumbs --------------------------------------------------------- */
.breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 28px; margin-bottom: 8px;
    font: 500 13px/1.4 var(--body); color: var(--text-3);
}
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs__current {
    color: var(--text-3);
    max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- index grid + cards -------------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}
.blog-card {
    display: flex; flex-direction: column;
    background: var(--bg-1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(21, 23, 40, .08);
    transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease;
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(21, 23, 40, .16);
}
.blog-card__cover {
    display: block; position: relative;
    aspect-ratio: 16 / 9; background: var(--bg-2); overflow: hidden;
}
.blog-card__cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .3s ease;
}
.blog-card:hover .blog-card__cover img { transform: scale(1.04); }
.blog-card__cover-fallback { display: block; width: 100%; height: 100%; }
.blog-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.blog-card__title { margin: 0; font: 600 18px/1.3 var(--body); }
.blog-card__title a {
    color: var(--text); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__title a:hover { color: var(--accent, var(--red)); }
.blog-card__excerpt {
    margin: 0; color: var(--text-2); font: 400 14px/1.6 var(--body);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__meta {
    margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font: 500 12px/1 var(--mono); color: var(--text-3); letter-spacing: .02em;
}
.blog-card__author { color: var(--text-2); }
.blog-card__dot { opacity: .5; }

/* --- single article ------------------------------------------------------ */
.blog-article { margin-top: 8px; }
.blog-article__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.blog-article__title {
    margin: 0; color: var(--text);
    font: 700 clamp(28px, 4.6vw, 44px)/1.15 var(--body);
    letter-spacing: -0.01em; overflow-wrap: break-word;
}
.blog-article__byline { display: flex; align-items: center; gap: 12px; }
.blog-article__avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--border); flex: 0 0 auto;
}
.blog-article__byline strong { display: block; color: var(--text); font: 600 15px var(--body); }
.blog-article__date { color: var(--text-3); font: 500 13px var(--mono); }
.blog-article__cover {
    margin: 4px 0 0; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border); background: var(--bg-2);
}
.blog-article__cover img { width: 100%; height: auto; display: block; }

/* --- article BODY: typography + media clamping (core overflow guard) ----- */
.blog-article__body {
    color: var(--text, #1a1a1a);
    font: 400 17px/1.8 var(--body);
    overflow-wrap: break-word; word-break: break-word;
}
.blog-article__body > * { margin: 0 0 1.25em; }
.blog-article__body img,
.blog-article__body video,
.blog-article__body iframe,
.blog-article__body embed,
.blog-article__body object {
    max-width: 100%; height: auto; display: block;
    margin: 1.6em auto; border-radius: 12px;
}
.blog-article__body figure { max-width: 100%; margin: 1.6em 0; }
.blog-article__body figure img { margin: 0 auto; }
.blog-article__body figcaption {
    margin-top: 8px; text-align: center; color: var(--text-3);
    font: 400 13px/1.5 var(--body);
}
.blog-article__body h2 { font: 700 clamp(22px, 3vw, 30px)/1.25 var(--body); margin: 1.8em 0 .6em; color: var(--text); }
.blog-article__body h3 { font: 700 clamp(19px, 2.4vw, 24px)/1.3 var(--body); margin: 1.6em 0 .5em; color: var(--text); }
.blog-article__body h4 { font: 600 18px/1.4 var(--body); margin: 1.4em 0 .5em; color: var(--text); }
.blog-article__body p { margin: 0 0 1.25em; }
.blog-article__body a { color: var(--accent, var(--red)); text-decoration: underline; text-underline-offset: 2px; }
.blog-article__body a:hover { opacity: .85; }
.blog-article__body ul,
.blog-article__body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.blog-article__body li { margin: .4em 0; }
.blog-article__body blockquote {
    margin: 1.6em 0; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--accent, var(--red));
    color: var(--text-2); font-style: italic;
}
.blog-article__body hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.blog-article__body code {
    font: 500 .9em var(--mono); background: var(--bg-2);
    padding: 2px 6px; border-radius: 6px; overflow-wrap: break-word;
}
.blog-article__body pre {
    max-width: 100%; overflow-x: auto; background: var(--bg-2);
    border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px;
}
.blog-article__body pre code { background: none; padding: 0; }
/* Tables can be arbitrarily wide → scroll inside the column instead of overflowing. */
.blog-article__body .table-wrap,
.blog-article__body table { display: block; max-width: 100%; overflow-x: auto; }
.blog-article__body table {
    border-collapse: collapse; width: 100%; font-size: 15px;
    border: 1px solid var(--border);
}
.blog-article__body th,
.blog-article__body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.blog-article__body th { background: var(--bg-2); color: var(--text); }

/* --- tags ---------------------------------------------------------------- */
.blog-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.tag-pill {
    display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--border);
    color: var(--text-2); font: 500 13px var(--body); text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.tag-pill:hover { border-color: var(--accent, var(--red)); color: var(--text); }

/* --- comments ------------------------------------------------------------ */
.blog-comments { margin-top: 8px; padding-top: 32px; padding-bottom: 80px; }
.blog-comments > h2 { font: 700 24px/1.2 var(--body); margin: 0 0 20px; color: var(--text); }
.blog-comments__form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.blog-comments__form textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px;
    color: var(--text); font: 400 15px/1.6 var(--body); padding: 14px 16px;
}
.blog-comments__form textarea:focus { outline: none; border-color: var(--accent, var(--red)); }
.blog-comments__form .btn { align-self: flex-start; }
.blog-comments__signin,
.blog-comments__empty { color: var(--text-2); font: 400 15px var(--body); }
.blog-comments__signin a { color: var(--accent, var(--red)); }
.blog-comments__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.comment {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 18px;
}
.comment__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.comment__head strong { color: var(--text); font: 600 14px var(--body); }
.comment__head time { color: var(--text-3); font: 500 12px var(--mono); }
.comment__body { margin: 0; color: var(--text-2); font: 400 15px/1.6 var(--body); overflow-wrap: break-word; }
.comment__replies { list-style: none; margin: 14px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.comment--reply { background: var(--bg-2); }

/* --- pagination ---------------------------------------------------------- */
.pagination {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    margin-top: 48px; padding-bottom: 20px;
}
.pagination a {
    color: var(--text); text-decoration: none; font: 600 14px var(--body);
    padding: 9px 18px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-1); transition: border-color .15s ease, background .15s ease;
}
.pagination a:hover { border-color: var(--border-light); background: var(--bg-2); }
.pagination__status { color: var(--text-3); font: 500 13px var(--mono); }

@media (max-width: 768px) {
    .blog-grid { gap: 20px; }
    .blog-article__body { font-size: 16px; }
    .blog-comments { padding-bottom: 56px; }
}

/* ===========================================================================
   Blog authors — byline link, in-post author card, dedicated author page.
   =========================================================================== */
.blog-article__author-link { color: inherit; text-decoration: none; }
.blog-article__author-link:hover { color: var(--accent, var(--red)); }
.blog-article__byline a { display: inline-flex; }

/* --- in-post author card (sibling of .blog-article) ---------------------- */
.author-card {
    max-width: 820px;
    margin: 36px auto 0;
    padding: 22px 24px;
    box-sizing: border-box;
    display: flex; gap: 20px; align-items: flex-start;
    background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--border);
    border-radius: 16px;
}
.author-card__avatar {
    flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
    overflow: hidden; background: var(--bg-2);
    border: 1px solid var(--border-light);
    display: grid; place-items: center; text-decoration: none;
}
.author-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-card__initials,
.author-hero__initials {
    font: 700 24px var(--display); letter-spacing: .04em;
    color: var(--text-2);
}
.author-card__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.author-card__kicker {
    font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-3);
}
.author-card__name { margin: 0; font: 700 20px/1.2 var(--body); }
.author-card__name a { color: var(--text); text-decoration: none; }
.author-card__name a:hover { color: var(--accent, var(--red)); }
.author-card__bio { margin: 2px 0 0; color: var(--text-2); font: 400 14.5px/1.6 var(--body); }
.author-card__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.author-card__more,
.author-card__site {
    font: 600 13px var(--body); text-decoration: none;
    color: var(--accent, var(--red));
}
.author-card__site { color: var(--text-2); }
.author-card__more:hover,
.author-card__site:hover { opacity: .8; }

/* --- dedicated author page hero ------------------------------------------ */
.author-hero {
    max-width: 820px;
    margin: 8px auto 0;
    padding: 28px var(--pad) 0;
    box-sizing: border-box;
    display: flex; gap: 26px; align-items: center;
}
.author-hero__avatar {
    flex: 0 0 auto; width: 110px; height: 110px; border-radius: 50%;
    overflow: hidden; background: var(--bg-2);
    border: 2px solid var(--border-light);
    display: grid; place-items: center;
}
.author-hero__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-hero__initials { font-size: 40px; }
.author-hero__meta { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.author-hero__name {
    margin: 0; color: var(--text);
    font: 700 clamp(28px, 4vw, 40px)/1.1 var(--body); letter-spacing: -0.01em;
}
.author-hero__bio { margin: 0; color: var(--text-2); font: 400 15.5px/1.65 var(--body); max-width: 60ch; }
.author-hero__stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 4px;
    font: 500 14px var(--body); color: var(--text-3);
}
.author-hero__stats strong { color: var(--text); }
.author-hero__site { color: var(--accent, var(--red)); text-decoration: none; }
.author-hero__site:hover { opacity: .8; }
.author-posts { padding-top: 36px; }

@media (max-width: 600px) {
    .author-card { flex-direction: column; align-items: stretch; gap: 14px; }
    .author-hero { flex-direction: column; text-align: center; gap: 16px; }
    .author-hero__avatar { width: 92px; height: 92px; }
    .author-hero__bio { max-width: none; }
    .author-hero__stats { justify-content: center; }
}

/* ===========================================================================
   Recent-articles widget (templates/blog/_widget.php) — home + detail pages.
   Fixed 3-up grid so the few recent cards span evenly (the index page's
   auto-fill grid would leave 3 items unstretched on wide screens).
   =========================================================================== */
.blog-widget { border-top: 1px solid var(--border); }
.blog-widget .section-head { align-items: flex-end; }
.blog-widget__all { flex: 0 0 auto; white-space: nowrap; }
.blog-widget__grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
    .blog-widget__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    /* horizontal peek carousel — next card pokes in so it reads as swipeable */
    .blog-widget__grid {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* overflow-x:auto clips on all four sides, which sliced the card's
           hover shadow into a box. Bleed the scroller out and pad it back in
           by the same amount so the cards stay put and the shadow has room. */
        margin: -18px -10px 0;
        padding: 18px 10px 30px;
        scrollbar-width: none;
    }
    .blog-widget__grid::-webkit-scrollbar { display: none; }
    .blog-widget__grid .blog-card { flex: 0 0 82%; scroll-snap-align: start; }
    .blog-widget__all { align-self: flex-start; }
}

/* =============================================================
   Watch Order (Anime Franchises)
   Public detail/home reuse the rk-* primitives; these wo-* rules
   cover the family detail steps, the hero, and the detail-page box.
   ============================================================= */

/* --- Family detail hero --- */
.wo-hero { position: relative; overflow: hidden; padding: 0; }
.wo-hero-bg { position: absolute; inset: 0; z-index: 0; }
.wo-hero-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1); }
.wo-hero-fade {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.85) 60%, var(--bg-1) 100%);
}
.wo-hero-inner { position: relative; z-index: 1; padding: 80px 0 48px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.wo-hero-title { font: 800 clamp(28px, 5vw, 48px)/1.05 var(--display, var(--body)); margin: 4px 0 0; color: #fff; }
.wo-hero-tagline { font: 400 17px/1.5 var(--body); color: var(--text-2); max-width: 640px; margin: 0; }

.wo-progress { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; margin-top: 8px; }
.wo-progress-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.wo-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s; }
.wo-progress-label { font: 600 13px/1 var(--body); color: var(--text-2); white-space: nowrap; }

.wo-desc { font: 400 16px/1.65 var(--body); color: var(--text-2); margin: 0 0 28px; }

/* --- Ordered steps --- */
.wo-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: wo; }
.wo-step { display: grid; grid-template-columns: 36px 92px 1fr; gap: 16px; align-items: start; padding: 16px; border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 14px; background: var(--bg-2); }
.wo-step.done { border-color: color-mix(in srgb, var(--accent) 50%, var(--line, rgba(255,255,255,.1))); }
.wo-step-num { font: 800 20px/1 var(--display, var(--body)); color: var(--text-2); text-align: center; padding-top: 6px; }
.wo-step-poster { position: relative; display: block; width: 92px; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; }
.wo-step-poster img, .wo-step-poster .art { width: 100%; height: 100%; object-fit: cover; display: block; }
.wo-step-check { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 14px/24px var(--body); text-align: center; }
.wo-step-body { min-width: 0; }
.wo-step-label { display: inline-block; font: 700 11px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 4px 8px; border-radius: 999px; margin-bottom: 6px; }
.wo-step-title { display: block; font: 700 18px/1.25 var(--body); color: #fff; text-decoration: none; }
.wo-step-title:hover { text-decoration: underline; }
.wo-step-meta { font: 400 13px/1.4 var(--body); color: var(--text-2); margin-top: 2px; }
.wo-step-note { font: 400 14px/1.5 var(--body); color: var(--text-2); margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--line, rgba(255,255,255,.12)); }

/* --- Edit screen: per-entry label/note + drag handle --- */
.wo-edit-entries { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wo-edit-entries li { display: grid; grid-template-columns: 22px 54px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 10px; background: var(--bg-2); }
.wo-edit-entries li img, .wo-edit-entries li .art { width: 54px; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px; }
.wo-drag { cursor: grab; color: var(--text-2); font-size: 18px; user-select: none; text-align: center; }
.wo-edit-meta { min-width: 0; }
.wo-edit-fields { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.wo-edit-fields .wo-label { flex: 0 0 140px; }
.wo-edit-fields .wo-note { flex: 1; min-width: 160px; }
.wo-edit-fields input { background: var(--bg-1); border: 1px solid var(--line, rgba(255,255,255,.12)); color: var(--text-1, #eee); border-radius: 6px; padding: 6px 8px; font: 400 13px/1 var(--body); }

/* --- Detail-page Watch Order box (sidebar) --- */
.wo-box .wo-box-name { display: block; font: 700 16px/1.3 var(--body); color: #fff; text-decoration: none; margin-bottom: 4px; }
.wo-box .wo-box-name:hover { text-decoration: underline; }
.wo-box-pos { font: 400 13px/1.45 var(--body); color: var(--text-2); margin: 0 0 12px; }
.wo-box-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wo-box-list li { display: flex; align-items: baseline; gap: 8px; font: 400 13px/1.4 var(--body); }
.wo-box-list li.current { font-weight: 700; }
.wo-box-list li.current .wo-box-title { color: #fff; }
.wo-box-num { flex: 0 0 18px; color: var(--text-2); font-weight: 700; font-size: 12px; }
.wo-box-title { color: var(--text-2); text-decoration: none; }
a.wo-box-title:hover { color: #fff; text-decoration: underline; }
.wo-box-label { font: 700 10px/1 var(--body); text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); border: 1px solid var(--line, rgba(255,255,255,.15)); padding: 2px 5px; border-radius: 999px; }
.wo-box-cta { display: inline-block; font: 600 13px/1 var(--body); color: var(--accent, #CA2128); text-decoration: none; margin-top: 4px; }
.wo-box-cta:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .wo-step { grid-template-columns: 28px 72px 1fr; gap: 12px; }
    .wo-step-poster { width: 72px; }
}

/* ==========================================================================
   Upcoming Episodes Schedule (/schedule) — sc-* prefix
   ========================================================================== */
.sc-wrap { max-width: var(--max, 1440px); margin: 0 auto; padding: 48px var(--pad, 80px) 96px; }
.sc-head { margin-bottom: 32px; }
.sc-eyebrow { font: 700 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.sc-h1 { font-family: var(--display); font-size: clamp(40px, 6vw, 76px); line-height: .95; margin: 10px 0 6px; }
.sc-sub { font: 400 16px/1.5 var(--body); color: var(--text-2); margin: 0 0 22px; }
.sc-sub strong { color: var(--text); font-weight: 600; }

.sc-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-tab {
    font: 600 14px/1 var(--body); color: var(--text-2); text-decoration: none;
    padding: 10px 18px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-1); transition: .15s;
}
.sc-tab:hover { color: var(--text); border-color: var(--border-light); }
.sc-tab.active { color: #fff; background: var(--red); border-color: var(--red); }

/* Weekly 7-column grid */
.sc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.sc-day {
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px;
    padding: 12px; min-height: 140px; display: flex; flex-direction: column;
}
.sc-day.is-today { border-color: var(--red); box-shadow: 0 0 0 1px var(--red-glow), 0 8px 30px var(--red-soft); }
.sc-day-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sc-day-name { font: 700 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.sc-day.is-today .sc-day-name { color: var(--red); }
.sc-day-date { font: 500 11px/1 var(--mono); color: var(--text-3); }
.sc-day-cards { display: flex; flex-direction: column; gap: 10px; }
.sc-day-empty { font: 400 12px/1.4 var(--body); color: var(--text-3); margin: 4px 0 0; }

/* Episode card */
.sc-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sc-card-cover { position: relative; display: block; aspect-ratio: 16/10; background: var(--bg-3); }
.sc-card-cover img, .sc-card-cover .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-card-ep {
    position: absolute; left: 6px; top: 6px; z-index: 2;
    font: 700 11px/1 var(--mono); color: #fff; background: rgba(0,0,0,.72);
    padding: 4px 7px; border-radius: 6px; backdrop-filter: blur(2px);
}
.sc-card-body { padding: 9px 10px 11px; }
.sc-card-title { display: block; font: 600 13px/1.25 var(--body); color: var(--text); text-decoration: none; }
.sc-card-title:hover { color: var(--red); }
.sc-card-eptitle { font: 400 11px/1.3 var(--body); color: var(--text-2); margin-top: 2px; }
.sc-card-time { font: 500 11px/1 var(--mono); color: var(--text-3); margin-top: 6px; }
.sc-countdown { font: 700 13px/1 var(--mono); color: var(--text); margin-top: 3px; }
.sc-countdown.is-live { color: var(--red); animation: sc-pulse 1.6s ease-in-out infinite; }
@keyframes sc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.sc-banner { font: 600 10px/1.3 var(--body); margin-top: 7px; padding: 4px 7px; border-radius: 5px; }
.sc-banner-delay { color: var(--yellow); background: var(--yellow-soft); border: 1px solid rgba(253,201,73,.3); }
.sc-banner-note { color: var(--text-2); background: var(--bg-3); }

/* Empty states */
.sc-empty, .sc-empty-state { color: var(--text-2); font: 400 15px/1.6 var(--body); }
.sc-empty-state { text-align: center; padding: 56px 20px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; }
.sc-empty-state p { margin: 0 0 16px; }

/* Upcoming Season poster grid */
.sc-season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.sc-season-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.sc-season-cover { position: relative; aspect-ratio: 2/3; background: var(--bg-3); }
.sc-season-cover img, .sc-season-cover .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-season-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sc-season-title { font: 600 14px/1.3 var(--body); margin: 0; }
.sc-season-meta { font: 500 12px/1 var(--mono); color: var(--text-3); }
.sc-season-body .btn { margin-top: auto; }
.sc-track.is-tracked { color: var(--yellow); border-color: rgba(253,201,73,.35); }

@media (max-width: 1000px) {
    .sc-wrap { padding: 32px 20px 72px; }
    .sc-week { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .sc-week { grid-template-columns: 1fr; }
}
.sc-season-title a { color: var(--text); text-decoration: none; }
.sc-season-title a:hover { color: var(--red); }

/* =====================================================================
   Character page — Section 1: Abilities & Combat Style  (.ab-*)
   Section 2: Personality Profile  (.pp-*)
   Both follow the existing .ch-section rhythm. Tokens: --red #CA2128,
   --yellow #FDC949, --bg-1 #141414, --bg-2 #1A1A1A, --border #2A2A2A,
   --display Bebas Neue, --body Poppins.
   ===================================================================== */

/* ---- Section 1: Abilities ------------------------------------------ */
.ab-tier-badge {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #3A0A0C;
    border: 1px solid rgba(202,33,40,0.5);
    white-space: nowrap;
}
.ab-tier-label  { font-family: var(--display); font-size: 16px; letter-spacing: 0.04em; color: var(--yellow); }
.ab-tier-sep    { color: rgba(253,201,73,0.5); }
.ab-tier-caption{ font-family: var(--display); font-size: 16px; letter-spacing: 0.04em; color: var(--yellow); }

.ab-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.ab-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
    display: flex; flex-direction: column; gap: 12px;
}
/* Primary ability — large card spanning the full top row */
.ab-card--primary {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
    padding: 28px;
    background: linear-gradient(135deg, #1A0608 0%, #141414 100%);
    border: 1px solid rgba(202,33,40,0.4);
}
.ab-card--primary .ab-card-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: 1; }

/* CSS-drawn ODM-gear emblem: two crossed bars + a circular hub */
.ab-emblem {
    position: relative;
    flex: 0 0 96px;
    width: 96px; height: 96px;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 50%, rgba(202,33,40,0.18), rgba(0,0,0,0.4));
    border: 1px solid rgba(202,33,40,0.35);
    display: grid; place-items: center;
}
.ab-emblem-bar {
    position: absolute; top: 50%; left: 50%;
    width: 64px; height: 6px; margin: -3px 0 0 -32px;
    border-radius: 100px;
    background: linear-gradient(90deg, #CA2128, #7A1418);
    box-shadow: 0 0 10px rgba(202,33,40,0.5);
}
.ab-emblem-bar:nth-child(1) { transform: rotate(45deg); }
.ab-emblem-bar:nth-child(2) { transform: rotate(-45deg); }
.ab-emblem-hub {
    position: relative; z-index: 1;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #141414;
    border: 3px solid var(--red);
    box-shadow: 0 0 14px rgba(202,33,40,0.6), inset 0 0 6px rgba(0,0,0,0.8);
}

.ab-name      { font-family: var(--display); font-size: 22px; line-height: 1.05; letter-spacing: 0.01em; color: #fff; margin: 0; text-transform: uppercase; }
.ab-name--lg  { font-size: 28px; }

.ab-pill {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    font: 600 11px/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase;
    padding: 6px 11px; border-radius: 100px;
}
.ab-pill--red     { color: #FF8A8F; background: rgba(202,33,40,0.18); border: 1px solid rgba(202,33,40,0.45); }
.ab-pill--orange  { color: #FFB37A; background: rgba(214,108,32,0.16); border: 1px solid rgba(214,108,32,0.5); }
.ab-pill--yellow  { color: var(--yellow); background: rgba(253,201,73,0.14); border: 1px solid rgba(253,201,73,0.4); }
.ab-pill--neutral { color: var(--text-2); background: rgba(255,255,255,0.05); border: 1px solid var(--border); }

.ab-desc { font: 400 14px/1.8 var(--body); color: #C0C0C0; margin: 0; }
.ab-card--primary .ab-desc { color: #C0C0C0; }

/* Power-level bar */
.ab-power { margin-top: 4px; display: flex; flex-direction: column; gap: 7px; }
.ab-power-head { display: flex; align-items: baseline; justify-content: space-between; }
.ab-power-label { font: 600 10px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.ab-power-score { font-family: var(--display); font-size: 18px; color: var(--yellow); letter-spacing: 0.02em; }
.ab-power-track { height: 8px; border-radius: 100px; background: #2A2A2A; overflow: hidden; }
.ab-power-fill  { height: 100%; border-radius: 100px; background: linear-gradient(90deg, #CA2128, #FDC949); }

/* Per-card spoiler gate */
.ab-spoiler { margin-top: 2px; }
.ab-spoiler-gate {
    display: inline-flex; align-items: center; gap: 8px;
    width: 100%;
    font: 500 12px/1.4 var(--body); text-align: left;
    color: var(--yellow);
    background: rgba(253,201,73,0.06);
    border: 1px dashed rgba(253,201,73,0.4);
    border-radius: 10px; padding: 10px 13px; cursor: pointer;
    transition: background .2s, border-color .2s;
}
.ab-spoiler-gate:hover { background: rgba(253,201,73,0.1); }
.ab-spoiler-warn { font-size: 13px; }
.ab-spoiler-cta { text-decoration: underline; text-underline-offset: 2px; }
.ab-spoiler-body {
    margin: 0; max-height: 0; overflow: hidden; opacity: 0;
    font: 400 14px/1.7 var(--body); color: #C0C0C0;
    transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
}
.ab-spoiler.revealed .ab-spoiler-body { max-height: 400px; opacity: 1; margin-top: 12px; }

/* ---- Section 2: Personality Profile -------------------------------- */
.pp-card {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
    background: #141414;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
}
.pp-identity { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pp-divider  { height: 1px; background: var(--border); }
.pp-block    { display: flex; flex-direction: column; gap: 4px; }
.pp-block-kicker { font: 600 10px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: #555; margin-bottom: 2px; }
.pp-block-sub    { font: 400 14px/1.3 var(--body); color: var(--text-2); }

/* MBTI */
.pp-mbti-type  { font-family: var(--display); font-size: 64px; line-height: 0.92; color: #fff; letter-spacing: 0.02em; }
.pp-mbti-label { font: italic 400 16px/1.3 var(--body); color: var(--text-2); }
.pp-mbti-meta  { font: 400 12px/1.4 var(--body); color: #555; margin-top: 2px; }
.pp-mbti-bar {
    display: flex; gap: 3px; margin-top: 12px;
    height: 8px; border-radius: 100px; overflow: hidden; background: #2A2A2A;
}
.pp-mbti-seg { height: 100%; }
.pp-mbti-seg--0 { background: var(--red); }
.pp-mbti-seg--1 { background: #8A6D3B; }
.pp-mbti-seg--2 { background: #3A3A3A; }
.pp-mbti-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font: 500 11px/1 var(--body); color: var(--text-2); }
.pp-mbti-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pp-mbti-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Enneagram / archetype / zodiac */
.pp-enneagram-type   { font-family: var(--display); font-size: 28px; line-height: 1; color: #fff; letter-spacing: 0.02em; }
.pp-archetype-primary{ font-family: var(--display); font-size: 24px; line-height: 1.05; color: #fff; letter-spacing: 0.02em; }
.pp-archetype-secondary { font-family: var(--display); font-size: 20px; line-height: 1.05; color: var(--red); letter-spacing: 0.02em; }
.pp-zodiac { font: 500 14px/1.4 var(--body); color: var(--text-2); }

/* Personality hashtag tags */
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tag {
    display: inline-flex; align-items: center;
    font: 500 12px/1 var(--body);
    padding: 7px 12px; border-radius: 100px;
    background: var(--red-soft);
    border: 1px solid rgba(202,33,40,0.3);
    color: #FF8A8F;
}

/* Trait axes (right column) */
.pp-traits { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pp-traits-head { display: flex; flex-direction: column; gap: 3px; }
.pp-traits-title { font-family: var(--display); font-size: 16px; letter-spacing: 0.1em; color: #555; text-transform: uppercase; }
.pp-traits-sub   { font: 400 12px/1 var(--body); color: #555; }
.pp-axes { display: flex; flex-direction: column; gap: 18px; }
.pp-axis { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.pp-axis-label   { font: 500 12px/1.2 var(--body); color: var(--text-2); }
.pp-axis-label--l { text-align: right; }
.pp-axis-label--r { text-align: left; }
.pp-axis-bar {
    position: relative;
    width: 200px; max-width: 100%;
    height: 8px; border-radius: 100px; background: #2A2A2A;
}
.pp-axis-fill {
    position: absolute; left: 0; top: 0; height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #CA2128, #FDC949);
}
.pp-axis-dot {
    position: absolute; top: 50%;
    width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #CA2128;
    border: 2px solid #fff;
    box-shadow: 0 0 10px 2px rgba(202,33,40,0.7);
}
.pp-vote-link {
    align-self: flex-start;
    background: none; border: none; padding: 0; cursor: pointer;
    font: 500 13px/1 var(--body); color: var(--red);
    transition: color .2s;
}
.pp-vote-link:hover { color: #FF8A8F; }

@media (max-width: 860px) {
    .ab-grid { grid-template-columns: 1fr; }
    .ab-card--primary { flex-direction: column; }
    .ab-emblem { flex-basis: auto; }
    .pp-card { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
    .pp-axis-bar { width: 160px; }
}

/* ============================================================================
   TITLE DETAIL PAGE — exact reproduction of the Lifehaki "anime detail" UI kit
   (ui_kits/anime). Cool-light tokens already match the design system. Component
   classes (lh-btn/lh-badge/lh-tag/lh-tab/lh-iconbtn) mirror the DS primitives;
   td-* classes mirror the kit layout (hero, tabs, panels, person grids).
   ============================================================================ */
:root { --td-nav-h: 60px; --td-max: 1080px; --td-pad: 32px; }

/* ── DS component primitives ─────────────────────────────────────────────── */
.lh-btn{font-family:var(--font-body);font-weight:700;border:var(--bw-base) solid transparent;
  border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;line-height:1;white-space:nowrap;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),
  box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);}
.lh-btn:active{transform:translateY(1px) scale(.98)}
.lh-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.lh-btn--sm{font-size:13px;padding:8px 14px}
.lh-btn--md{font-size:15px;padding:11px 20px}
.lh-btn--lg{font-size:17px;padding:14px 26px}
.lh-btn--full{width:100%}
.lh-btn--primary{background:var(--accent);color:var(--accent-on)}
.lh-btn--primary:hover:not([disabled]){background:var(--accent-hover)}
.lh-btn--gold{background:var(--highlight);color:var(--highlight-on)}
.lh-btn--gold:hover:not([disabled]){background:var(--highlight-hover)}
.lh-btn--secondary{background:var(--bg-surface);color:var(--text-strong);border-color:var(--ink-900)}
.lh-btn--secondary:hover:not([disabled]){background:var(--paper-2)}
.lh-btn--ghost{background:transparent;color:var(--text-body)}
.lh-btn--ghost:hover:not([disabled]){background:var(--paper-2)}

.lh-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-eyebrow);
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:12px;line-height:1;
  padding:5px 10px;border-radius:var(--radius-pill);border:var(--bw-hair) solid transparent;}
.lh-badge--red{background:var(--red-500);color:#fffdf8}
.lh-badge--gold{background:var(--gold-500);color:var(--ink-900)}
.lh-badge--soft-red{background:var(--red-100);color:var(--red-600)}
.lh-badge--success{background:var(--success-100);color:var(--success-500)}
.lh-badge--outline{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.lh-badge--live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:lh-pulse 1.4s var(--ease-out) infinite}
@keyframes lh-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.lh-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:13px;
  font-weight:500;color:var(--text-muted);background:transparent;border:var(--bw-hair) solid transparent;
  padding:4px 8px;border-radius:var(--radius-pill);line-height:1;text-decoration:none;cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);}
.lh-tag:hover{color:var(--text-strong)}

.lh-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:var(--bw-base) solid transparent;
  border-radius:var(--radius-pill);cursor:pointer;background:transparent;color:var(--text-muted);
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),
  color var(--dur-fast) var(--ease-out);}
.lh-iconbtn:active{transform:scale(.9)}
.lh-iconbtn--sm{width:32px;height:32px}
.lh-iconbtn--md{width:40px;height:40px}
.lh-iconbtn--ghost:hover{background:var(--paper-2);color:var(--text-strong)}
.lh-iconbtn--like:hover{background:var(--red-100);color:var(--red-500)}
.lh-iconbtn--like[aria-pressed="true"]{color:var(--red-500)}

.lh-tab{appearance:none;background:none;border:none;cursor:pointer;font-family:var(--font-body);
  font-weight:700;font-size:15px;color:var(--text-muted);padding:12px 16px;position:relative;
  white-space:nowrap;transition:color var(--dur-fast) var(--ease-out);}
.lh-tab:hover{color:var(--text-strong)}
.lh-tab--active{color:var(--accent)}
.lh-tab--active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1.5px;height:3px;
  background:var(--accent);border-radius:var(--radius-pill);}
.lh-tab__count{font-family:var(--font-mono);font-size:12px;opacity:.7;margin-left:6px}

/* ── Page shell ──────────────────────────────────────────────────────────── */
/* Hero band is white (bg-surface); the tabbed content area below sits on the
   page paper (#f5f5f9 / bg-app). */
.td{background:var(--bg-app);}
.td-topbar,.td-hero{background:var(--bg-surface);}
.td-topbar{border-bottom:var(--bw-hair) solid var(--border-card);}
.td-topbar-inner{max-width:var(--td-max);margin:0 auto;padding:10px var(--td-pad);
  font-family:var(--font-mono);font-size:13px;color:var(--text-faint);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.td-topbar-inner a{color:var(--text-faint);text-decoration:none}
.td-topbar-inner a:hover{color:var(--text-strong)}
.td-crumb-sep{color:var(--ink-300)}
.td-crumb-now{color:var(--text-strong);font-weight:500}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.td-hero{position:relative;background:var(--bg-surface);}
.td-hero-backdrop{position:absolute;top:0;left:0;right:0;height:340px;overflow:hidden;z-index:0;}
.td-hero-backdrop img,.td-hero-backdrop .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.td-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(21,23,28,.30) 0%,rgba(21,23,28,.05) 40%,var(--bg-surface) 100%);}
.td-hero-container{position:relative;z-index:2;max-width:var(--td-max);margin:0 auto;
  padding:180px var(--td-pad) 0;display:grid;grid-template-columns:232px 1fr;gap:36px;align-items:start;}
.td-hero-poster-col{display:flex;flex-direction:column;gap:12px;}
.td-poster{position:relative;width:100%;aspect-ratio:2/3;border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--paper-2);}
.td-poster img,.td-poster .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.td-hero-info{padding-top:56px;min-width:0;}
.td-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.td-title{margin:0;font-family:var(--font-display);font-weight:900;font-size:46px;line-height:1.02;
  letter-spacing:-0.02em;color:var(--ink-900);}
.td-jp{margin:8px 0 0;font-family:var(--font-mono);font-size:14px;color:var(--text-faint);}
.td-tagline{margin:16px 0 0;font:500 18px/1.5 var(--font-display);font-style:italic;
  color:var(--text-body);max-width:560px;}
.td-tags{display:flex;flex-wrap:wrap;gap:4px;margin:16px 0 0 -8px;}

.td-score-row{display:flex;align-items:center;gap:24px;margin:22px 0 0;flex-wrap:wrap;}
.td-score-block{display:flex;flex-direction:column;gap:8px;}
.td-eyebrow{font-family:var(--font-eyebrow);text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;font-size:12px;color:var(--text-muted);}
.td-star-line{display:inline-flex;align-items:center;gap:8px;}
.td-stars{display:inline-flex;gap:2px;}
.td-star{position:relative;display:inline-block;line-height:0;}
.td-star svg{display:block;}
/* Partial-fill overlay: keep the SVG at full size and CLIP it (overflow) to the
   percentage width — not flex-shrink it, which made the half star render tiny. */
.td-star-fill{position:absolute;top:0;left:0;overflow:hidden;line-height:0;}
.td-star-fill svg{display:block;}
.td-star-val{font-family:var(--font-mono);font-size:16px;font-weight:500;color:var(--text-strong);}
.td-star-count{font-family:var(--font-mono);font-size:14px;color:var(--text-faint);}
a.td-star-count{text-decoration:none;}
a.td-star-count:hover{color:var(--text-strong);text-decoration:underline;}
.td-score-divider{width:1px;align-self:stretch;background:var(--border-card);}
.td-gauge-block{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;}
.td-gauge-svg{position:relative;display:inline-flex;}
.td-gauge-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;line-height:1;}
.td-gauge-c strong{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink-900);}
.td-gauge-c small{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);}

.td-actions{display:flex;align-items:center;gap:10px;margin:24px 0 0;}
.td-inline-form{display:inline-flex;margin:0;}
.lh-iconbtn--like.is-on{color:var(--red-500);}

/* Stat strip */
.td-statstrip{max-width:var(--td-max);margin:32px auto 0;padding:0 var(--td-pad);}
.td-statstrip-inner{display:flex;gap:40px;flex-wrap:wrap;padding:20px 0;
  border-top:var(--bw-hair) solid var(--border-card);border-bottom:var(--bw-hair) solid var(--border-card);}
.td-stat{display:inline-flex;flex-direction:column;gap:3px;}
.td-stat-label{font-family:var(--font-eyebrow);text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;font-size:11px;color:var(--text-faint);white-space:nowrap;}
.td-stat-value{font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--text-strong);line-height:1.2;}
.td-watch-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 0 4px;}
.td-watch-label{font-family:var(--font-eyebrow);text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;font-size:12px;color:var(--text-muted);}
.td-watch-logos{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
/* Brand-logo chips: logo only, no padding/box, so each renders at its native
   look. The text fallback (no logo) keeps a small bordered chip. */
.td-watch-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-md);
  background:var(--paper-0);border:var(--bw-hair) solid var(--border-card);text-decoration:none;
  color:var(--text-strong);transition:border-color .15s,box-shadow .15s,transform .15s;}
.td-watch-chip:hover{border-color:var(--ink-400);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.td-watch-chip.has-logo{padding:0;background:none;border:none;transition:transform .15s,opacity .15s;}
.td-watch-chip.has-logo:hover{box-shadow:none;transform:translateY(-1px);opacity:.85;}
.td-watch-logo{height:26px;width:auto;display:block;}
.td-watch-mark{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font:800 12px/1 var(--font-display);color:#fff;background:var(--wl-accent,var(--accent));}
.td-watch-name{font:600 13px/1 var(--font-body);}

/* ── Sticky tabs ─────────────────────────────────────────────────────────── */
.td-tabsbar{position:sticky;top:var(--td-nav-h);z-index:30;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:var(--bw-base) solid var(--line);}
.td-tabs-inner{max-width:var(--td-max);margin:0 auto;padding:0 var(--td-pad);display:flex;gap:4px;flex-wrap:wrap;}

/* ── Main + panels ───────────────────────────────────────────────────────── */
.td-main{max-width:var(--td-max);margin:0 auto;padding:36px var(--td-pad) 64px;}
.td-panel[hidden]{display:none;}
.td-overview{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;}
.td-ov-main{min-width:0;display:flex;flex-direction:column;gap:36px;}
.td-ov-side{display:flex;flex-direction:column;gap:16px;position:sticky;
  top:calc(var(--td-nav-h) + 64px);}
.td-block{display:flex;flex-direction:column;gap:16px;}

/* SectionHeader */
.td-section{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:var(--bw-hair) solid var(--border-card);}
.td-section--wide{margin-bottom:18px;}
.td-section-l{display:flex;flex-direction:column;gap:2px;min-width:0;}
.td-section-eyebrow{font-family:var(--font-eyebrow);text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;font-size:13px;color:var(--accent);}
.td-section-row{display:flex;align-items:baseline;gap:10px;}
.td-section-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:26px;
  color:var(--ink-900);letter-spacing:-0.01em;}
.td-section-count{font-family:var(--font-mono);font-size:14px;color:var(--text-faint);}

.td-synopsis{margin:0;font:400 17px/1.7 var(--font-body);color:var(--text-body);text-wrap:pretty;}
.td-trailer{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-md);
  overflow:hidden;background:var(--paper-2);}
.td-trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.td-trailers{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.td-trailer-cell{margin:0;display:flex;flex-direction:column;gap:8px;}
.td-trailer-cap{font:600 14px/1.3 var(--font-body);color:var(--text-muted);}
.td-spoiler-note{font-weight:400;color:var(--text-muted);}
.td-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.td-gallery-item{aspect-ratio:16/10;border-radius:var(--radius-md);overflow:hidden;background:var(--paper-2);
  border:var(--bw-hair) solid var(--border-card);}
.td-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;}
.td-expand summary{font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--text-strong);cursor:pointer;}

/* Rating breakdown */
.td-rating{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center;}
.td-rating-big{display:flex;flex-direction:column;gap:8px;}
.td-rating-num{font-family:var(--font-display);font-weight:900;font-size:48px;line-height:1;color:var(--ink-900);}
.td-rating-num span{font-family:var(--font-mono);font-size:16px;color:var(--text-faint);font-weight:400;margin-left:4px;}
.td-rating-meta{margin:0;font-family:var(--font-mono);font-size:13px;color:var(--text-faint);}
.td-rating-hist{display:flex;flex-direction:column;gap:8px;}
.td-hist-row{display:grid;grid-template-columns:36px 1fr 40px;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;color:var(--text-muted);}
.td-hist-bar{height:8px;background:var(--paper-2);border-radius:var(--radius-pill);overflow:hidden;}
.td-hist-bar span{display:block;height:100%;background:var(--gold-500);border-radius:var(--radius-pill);}
.td-hist-v{text-align:right;color:var(--text-faint);}

/* Critic */
.td-critic-head{display:flex;align-items:center;gap:16px;}
.td-critic-list{display:flex;flex-direction:column;gap:12px;}
.td-critic-card{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:14px 16px;
  border:var(--bw-hair) solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-surface);}
.td-critic-score{font-family:var(--font-display);font-weight:800;font-size:26px;text-align:center;line-height:1;}
.td-critic-score span{display:block;font-size:10px;opacity:.6;font-weight:500;font-family:var(--font-mono);}
.td-critic-by{font-size:13px;color:var(--text-muted);}
.td-critic-by a{color:var(--accent);text-decoration:none;}
.td-critic-body p{margin:6px 0;font-size:14px;line-height:1.5;color:var(--text-body);}
.td-critic-link{font-family:var(--font-mono);font-size:12px;color:var(--accent);text-decoration:none;}

/* Studios */
.td-studios{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;}
.td-studio-role-name{margin:0 0 6px;font-family:var(--font-eyebrow);text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;font-size:12px;color:var(--text-faint);}
.td-studios ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.td-studios a{color:var(--text-strong);text-decoration:none;font-size:14px;font-weight:600;}
.td-studios a:hover{color:var(--accent);}

/* Side cards (white, to read on the #f5f5f9 content area) */
.td-card{background:var(--bg-surface);border:var(--bw-hair) solid var(--border-card);
  border-radius:var(--radius-lg);padding:18px 20px;}
.td-card-head{margin:0 0 12px;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink-900);}
.td-card-note{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--text-muted);}
.td-card-cta{display:flex;flex-direction:column;gap:8px;}
.td-card-attr{margin:12px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
.td-card-attr a{color:var(--text-muted);}
.td-info{margin:0;display:flex;flex-direction:column;}
.td-info-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:var(--bw-hair) solid var(--border-soft);}
.td-info-row:last-child{border-bottom:none;}
.td-info dt{font-family:var(--font-eyebrow);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:12px;color:var(--text-faint);margin:0;}
.td-info dd{margin:0;font-size:14px;font-weight:600;color:var(--text-strong);text-align:right;}
.td-report{margin-top:12px;}
.td-report summary{font-size:13px;color:var(--text-faint);cursor:pointer;}
.td-report textarea{width:100%;box-sizing:border-box;min-height:70px;margin:8px 0;padding:8px;
  background:var(--bg-surface);border:var(--bw-hair) solid var(--border-card);border-radius:var(--radius-sm);
  color:var(--text-body);font-size:13px;resize:vertical;font-family:var(--font-body);}
.td-dubs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.td-dubs li{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text-strong);
  background:var(--paper-2);padding:5px 10px;border-radius:var(--radius-pill);}
.td-wo-cta{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:13px;
  color:var(--accent);text-decoration:none;}
.td-wo-cta:hover{text-decoration:underline;}

/* Watch order — vertical timeline (numbered franchise steps) */
.td-wo-sub{margin:4px 0 0;font-size:14px;color:var(--text-muted);}
.td-wol{list-style:none;margin:0;padding:0;max-width:640px;display:flex;flex-direction:column;}
.td-wol-step{display:grid;grid-template-columns:30px 1fr;gap:14px;}
.td-wol-rail{display:flex;flex-direction:column;align-items:center;}
.td-wol-num{flex:none;width:30px;height:30px;border-radius:var(--radius-pill);display:flex;
  align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:500;font-size:13px;
  background:var(--gold-500);color:var(--ink-900);}
.td-wol-step.current .td-wol-num{background:var(--accent);color:var(--accent-on);box-shadow:var(--shadow-sm);}
.td-wol-line{flex:1;width:2px;background:var(--border-card);margin:6px 0;}
.td-wol-card{display:flex;gap:12px;padding-bottom:26px;text-decoration:none;color:inherit;}
.td-wol-step:last-child .td-wol-card{padding-bottom:0;}
a.td-wol-card:hover .td-wol-title{color:var(--accent);}
.td-wol-step.current .td-wol-card{background:var(--red-100);border:var(--bw-hair) solid var(--red-200);
  border-radius:var(--radius-md);margin:-6px -10px 20px;padding:10px;}
.td-wol-poster{position:relative;flex:none;width:58px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow-xs);}
.td-wol-poster.is-here{border:2px solid var(--accent);}
.td-wol-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.td-wol-poster-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);
  font-size:10px;color:var(--text-faint);}
.td-wol-body{display:flex;flex-direction:column;gap:5px;padding-top:1px;min-width:0;}
.td-wol-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.td-wol-year{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
.td-wol-title{margin:0;font:700 15px/1.2 var(--font-display);color:var(--ink-900);}
.td-wol-note{margin:0;font:400 13px/1.5 var(--font-body);color:var(--text-muted);text-wrap:pretty;}

/* Episodes panel */
.td-ep-progress{max-width:420px;margin:0 0 24px;}
.td-ep-progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;
  font:600 13px var(--font-body);color:var(--text-body);}
.td-mono{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);}
.td-progressbar{height:8px;background:var(--paper-2);border-radius:var(--radius-pill);overflow:hidden;}
.td-progressbar span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill);}
.td-season-tabs{display:flex;gap:4px;border-bottom:var(--bw-hair) solid var(--border-card);
  margin-bottom:8px;flex-wrap:wrap;}
.td-season-tab{background:none;border:none;color:var(--text-muted);padding:10px 16px;cursor:pointer;
  font:600 14px var(--font-body);border-bottom:2px solid transparent;margin-bottom:-1px;
  display:inline-flex;align-items:center;gap:8px;}
.td-season-tab:hover{color:var(--text-strong);}
.td-season-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.td-season-cnt{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);background:var(--paper-2);
  padding:2px 8px;border-radius:var(--radius-pill);}
.td-eplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.td-ep{display:flex;align-items:center;gap:16px;padding:12px 0;
  border-bottom:var(--bw-hair) solid var(--border-card);}
.td-ep-num{font-family:var(--font-mono);font-size:14px;color:var(--text-faint);width:32px;flex:none;text-align:center;}
.td-ep-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.td-ep-title{font:700 15px var(--font-body);color:var(--text-strong);}
.td-ep-sub{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);}
.td-ep-watched{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:12px;
  color:var(--success-500);flex:none;}
.td-ep.watched .td-ep-num{color:var(--success-500);}
.ep-countdown{font-family:var(--font-mono);color:var(--accent);}

/* People grids (characters / staff) */
.td-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;}
.td-person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;text-decoration:none;}
.td-person-media{width:100%;aspect-ratio:3/4;border-radius:var(--radius-md);overflow:hidden;
  background:var(--paper-2);border:var(--bw-hair) solid var(--border-card);display:flex;align-items:center;
  justify-content:center;transition:border-color .15s,transform .2s;}
.td-person:hover .td-person-media{border-color:var(--ink-400);transform:translateY(-2px);}
.td-person-media img{width:100%;height:100%;object-fit:cover;display:block;}
.td-person-initials{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--ink-300);}
.td-person-name{font:700 14px var(--font-body);color:var(--text-strong);line-height:1.25;}
.td-person-role{font-size:13px;color:var(--text-muted);}
.td-person-sub{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);}

/* Community (reviews) — match the DS ReviewCard aesthetic */
.td-community{margin-top:48px;}
.td-community .rms-tabs{display:flex;gap:4px;}
.td-community .rms-composer{margin:20px 0 28px;padding:18px;background:var(--paper-1);
  border:var(--bw-hair) solid var(--border-card);border-radius:var(--radius-lg);}
.td-community .rms-list{display:flex;flex-direction:column;gap:16px;margin-top:20px;}
.td-community .rms-card{background:var(--bg-surface);border:var(--bw-hair) solid var(--border-card);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:20px;}
.td-signed-out{color:var(--text-muted);font-size:15px;}
.td-signed-out a{color:var(--accent);}

/* Blogs */
.td-blogs-wrap{margin-top:48px;padding-bottom:48px;}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .td-hero-container{grid-template-columns:1fr;gap:28px;padding-top:120px;}
  .td-hero-poster-col{max-width:200px;}
  .td-hero-info{padding-top:0;}
  .td-overview{grid-template-columns:1fr;}
  .td-ov-side{position:static;}
  .td-rating{grid-template-columns:1fr;gap:20px;}
  .td-statstrip-inner{gap:24px;}
  .td-tabsbar{top:0;}
}
@media (max-width:560px){
  :root{--td-pad:10px;}   /* tight 10px content gutter — matches the mobile mock */
  .td-title{font-size:30px;}
  .td-hero-backdrop{height:180px;}
  /* Centered single-column hero — matches the mobile mock.
     The stack is kept under ~500px so the H1 and the "Add to list" CTA both
     land inside the first screen: the backdrop reveal above the poster (was
     84px of padding), the poster itself (was 138px wide = 207 tall) and the
     column gap are all trimmed. */
  .td-hero-container{padding-top:40px;text-align:center;gap:16px;}
  .td-hero-poster-col{max-width:none;}
  .td-poster{width:112px;margin:0 auto;}
  /* …and the CTA is hoisted above the tag/score rows. Flex order, not a DOM
     change, because the desktop layout wants the original reading order. */
  .td-hero-info{text-align:center;display:flex;flex-direction:column;}
  .td-badges{order:1;margin-bottom:8px;}
  .td-title{order:2;}
  .td-jp{order:3;}
  .td-tagline{order:4;}
  .td-actions{order:5;}
  .td-score-row{order:6;}
  .td-tags{order:7;}
  .td-badges,.td-tags,.td-score-row,.td-actions{justify-content:center;}
  .td-tags{margin-left:0;}
  .td-tagline{margin-left:auto;margin-right:auto;}
  /* Stat strip as a 3-up label/value grid. */
  .td-statstrip-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px 12px;}
  /* Tabs scroll horizontally instead of wrapping. */
  .td-tabs-inner{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .td-tabs-inner::-webkit-scrollbar{display:none;}

  /* Smaller section titles + 12px body copy (mock mobile scale). */
  .td-section-title{font-size:20px;}
  .td-synopsis{font-size:12px;line-height:1.7;}
  .td-info dd{font-size:12px;}
  .td-dubs li{font-size:12px;}
  .td-card-note{font-size:12px;}

  /* "Sign in to track" → dark card with side-by-side buttons. */
  .td-card--signin{background:var(--ink-900);border-color:var(--ink-900);}
  .td-card--signin .td-card-head{color:#fff;}
  .td-card--signin .td-card-note{color:rgba(255,255,255,.7);}
  .td-card--signin .td-card-cta{flex-direction:row-reverse;}
  .td-card--signin .lh-btn--ghost{color:#fff;}
  .td-card--signin .lh-btn--ghost:hover{background:rgba(255,255,255,.1);}

  /* Trailers + blog become horizontal scroll-snap sliders (peek next card). */
  .td-trailers{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--td-pad));padding:0 var(--td-pad) 4px;scrollbar-width:none;}
  .td-trailers::-webkit-scrollbar{display:none;}
  .td-trailer-cell{flex:0 0 76%;scroll-snap-align:start;}
  /* Keep the head left-aligned when it stacks into a column (else flex-end = right). */
  .td-blogs-wrap .section-head{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* ── Refinements (round 2) ───────────────────────────────────────────────── */
/* Dub-data info tooltip (click the ⓘ to reveal attribution) */
.td-card-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.td-info-tip{position:relative;}
.td-info-tip summary{list-style:none;cursor:pointer;color:var(--text-faint);display:inline-flex;
  align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-pill);
  transition:color .15s,background .15s;}
.td-info-tip summary::-webkit-details-marker{display:none;}
.td-info-tip summary:hover{color:var(--text-strong);background:var(--paper-2);}
.td-info-tip[open] summary{color:var(--accent);}
.td-info-tip-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:5;width:220px;
  background:var(--ink-900);color:var(--paper-0);font-size:12px;line-height:1.5;
  padding:10px 12px;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);}
.td-info-tip-pop a{color:var(--gold-400);}

/* Staff credits — IMDb-style collapsible departments */
.td-credits{display:flex;flex-direction:column;gap:8px;}
.td-dept{border:var(--bw-hair) solid var(--border-card);border-radius:var(--radius-md);
  background:var(--bg-surface);overflow:hidden;}
.td-dept-head{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 18px;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink-900);}
.td-dept-head::-webkit-details-marker{display:none;}
.td-dept-head::after{content:"▸";color:var(--text-faint);font-size:13px;transition:transform .15s;}
.td-dept[open] .td-dept-head::after{transform:rotate(90deg);}
.td-dept-name{flex:1;min-width:0;}
.td-dept-count{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);font-weight:400;
  background:var(--paper-2);padding:2px 9px;border-radius:var(--radius-pill);}
.td-dept .td-people{padding:6px 18px 20px;}

/* Episode / character pagination — real ?ep= / ?ch= links (crawlable, noindexed) */
.td-season-block{display:block;}
.td-pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0 0;
  transition:opacity .15s;}
.td-pager a{text-decoration:none;font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--accent);
  padding:10px 16px;background:var(--bg-surface);border:var(--bw-hair) solid var(--border-card);
  border-radius:var(--radius-md);transition:background .15s,border-color .15s;}
.td-pager a:hover{background:var(--paper-2);border-color:var(--ink-400);}
.td-pager-side{flex:1 0 auto;min-width:104px;}
.td-pager-next{text-align:right;}
.td-pager-nums{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.td-pager-num{min-width:40px;padding:9px 8px;text-align:center;font-family:var(--font-mono);font-size:13px;}
.td-pager-num.is-current{display:inline-block;min-width:40px;padding:10px 8px;text-align:center;
  font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--paper);background:var(--accent);
  border:var(--bw-hair) solid var(--accent);border-radius:var(--radius-md);}
.td-pager-gap{color:var(--text-faint);padding:0 2px;}
.td-pager-at{flex-basis:100%;text-align:center;font-family:var(--font-mono);font-size:12px;
  color:var(--text-faint);letter-spacing:.04em;}
@media (max-width:640px){.td-pager-side{min-width:0;flex:0 0 auto;}}

/* Review action icons (DS heart + comment SVG; broken-heart emoji kept) */
.td-community .rms-act .ico{display:inline-flex;align-items:center;line-height:0;}
.td-community .rms-act .ico svg{display:block;}
.td-community .rms-act-like.on .ico svg path{fill:currentColor;}

/* ============================================================================
   Title page — round 3: drop section eyebrows, pair the hero CTAs, harden the
   mobile tab strip + character grid, and align the blog widget to the page.
   ============================================================================ */

/* Remove the small kicker/eyebrow above every section + the score row. */
.td-section-eyebrow,.td-eyebrow{display:none;}

/* Hero CTAs (Add to list + Watch trailer) share one row. */
.td-actions{flex-wrap:wrap;}

/* Blog widget sits inside .td-main, so strip the generic .section chrome
   (its own max-width/padding caused the gutter mismatch) and use the page
   section type scale instead of the 36px+ landing headline. */
.td-blogs-wrap .section{padding:0;}
.td-blogs-wrap .section-head{max-width:none;margin:0 0 24px;padding:0;
  display:flex;justify-content:space-between;text-align:left;}
.td-blogs-wrap .section-head .left{align-items:flex-start;text-align:left;}
.td-blogs-wrap .section-title{font-family:var(--font-display);font-size:30px;line-height:1.1;
  letter-spacing:-0.01em;color:var(--ink-900);}

@media (max-width:560px){
  /* Two equal-width pills with a bigger tap target (matches the mock). */
  .td-actions{gap:10px;}
  .td-actions>.lh-btn,.td-actions>.add-to-list-wrap{flex:1 1 0;min-width:0;}
  .td-actions>.add-to-list-wrap>.lh-btn{width:100%;}
  .td-actions .lh-btn{font-size:16px;padding:14px 16px;}
  .td-inline-form{flex:0 0 auto;}

  /* Tabs: fixed strip, tabs keep their size and scroll horizontally. */
  .td-tabs-inner .lh-tab{flex:0 0 auto;}

  /* Characters & staff: compact 4-up grid. */
  .td-people{grid-template-columns:repeat(4,1fr);gap:10px;}
  .td-panel[data-panel="characters"] .td-person-name{font-size:11px;}
  .td-panel[data-panel="characters"] .td-person-role,
  .td-panel[data-panel="characters"] .td-person-sub{font-size:10px;}

  /* Blog headline down to the page scale; sub a touch smaller. */
  .td-blogs-wrap .section-title{font-size:22px;}
  .td-blogs-wrap .section-sub{font-size:13px;}
}

/* ============================================================
   TOUCH TAP TARGETS  (WCAG 2.5.5 / Apple HIG: 44×44 minimum)
   ============================================================
   Controls sized for a mouse measure 26–40px tall, which is a miss on a
   phone. Gated behind `pointer: coarse` so the desktop design is untouched —
   the problem is thumbs, not cursors.

   The `html` prefix is load-bearing: the per-page sheets (lifehaki-ranking.css,
   lifehaki-blog.css …) load AFTER this file and match at the same specificity,
   so an unprefixed rule here would lose to them. One extra element in the
   selector outranks them without !important. Add new offenders HERE rather
   than starting a fourth copy of this block in a component sheet.
   ------------------------------------------------------------ */
@media (pointer: coarse) {
    /* Ranking votes — 36×32 (detail rows) and 32×26 (legacy board) before. The
       icon keeps its size; the button grows around it. */
    html .rk-vote,
    html body.lh-rank-detail .rk-vote,
    html body.lh-rank-detail .rk-row .rk-vote {
        width: 44px; height: 44px;
    }
    html .rh-up { min-height: 44px; height: auto; }

    /* Blog byline + comment actions. bd-c-like/reply carried no padding at all
       (a 13px text row); min-height gives them a box without moving the label,
       which stays vertically centred. */
    html body.lh-blog-detail .bd-save,
    html body.lh-blog-detail .bd-share { width: 44px; height: 44px; }
    html body.lh-blog-detail .bd-like { min-height: 44px; padding: 9px 18px; }
    html body.lh-blog-detail .bd-c-like,
    html body.lh-blog-detail .bd-c-reply { min-height: 44px; padding: 0 2px; }

    /* Breadcrumb links. The bar's own vertical padding comes off so a 44px
       link row costs ~6px of viewport, not 20 — /title/{slug} needs that
       height for the hero above the fold. */
    html .td-topbar-inner { padding-top: 0; padding-bottom: 0; }
    html .td-topbar-inner a,
    html body.lh-blog-detail .bd-crumbs a,
    html .breadcrumbs a,
    html .ch-crumb a,
    html .lh-ds-character .lc-crumb a,
    html .gd-crumb {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 44px; min-width: 44px;
    }
    /* min-width pads short crumbs ("Blog") out to 44; the tightened gap keeps
       the row the same overall width it was. */
    html body.lh-blog-detail .bd-crumbs,
    html .breadcrumbs { gap: 2px; }
}