/* ============================================================
   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; }

/* ----- 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; }
.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); }
.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: center; 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-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-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;
        padding-bottom: 12px;
        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);}
.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:220px;}
  /* Centered single-column hero — matches the mobile mock. */
  .td-hero-container{padding-top:84px;text-align:center;gap:20px;}
  .td-hero-poster-col{max-width:none;}
  .td-poster{width:138px;margin:0 auto;}
  .td-hero-info{text-align:center;}
  .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 "show more" pagination button */
.td-season-block{display:block;}
.td-ep-more{display:block;width:100%;margin:16px 0 0;padding:12px;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--accent);
  background:var(--bg-surface);border:var(--bw-hair) solid var(--border-card);border-radius:var(--radius-md);
  transition:background .15s,border-color .15s;}
.td-ep-more:hover{background:var(--paper-2);border-color:var(--ink-400);}

/* 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;}
}