:root {
    --bg: #ffffff;
    --bg-alt: #f6f7fb;
    --text: #1a1d24;
    --muted: #6b7280;
    --border: #e5e7eb;
    --accent: #2956d6;
    --accent-dark: #1e3fa3;
    --badge-bg: #eef2ff;
    --badge-fg: #1e3fa3;
    --tag-bg: #f1f5f9;
    --tag-fg: #334155;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(20,30,60,.06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
                 "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.muted { color: var(--muted); }
.link { color: var(--accent); }

/* Header */
.site-header {
    border-bottom: 1px solid var(--border);
    background: #fff;
    position: sticky; top: 0; z-index: 10;
}
.site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px;
}
.brand {
    font-weight: 700; font-size: 22px;
    color: var(--text); letter-spacing: -.01em;
    line-height: 1;            /* drop the inline line-box so the brand
                                  centers on its glyph midline, not on its
                                  text baseline */
}
.brand-mark span { color: var(--accent); }

/* Desktop nav: explicit flex row so all children (text links, lang
   switcher pill, user button with avatar) vertically center on the
   same midline. Without this the inline children align on the text
   baseline, and the 32px avatar inside .user-btn drags that baseline
   below the brand's center. */
.nav--desktop {
    display: flex;
    align-items: center;
    gap: 18px;
}
.nav a {
    color: var(--text);
    font-weight: 500;
}
.nav a:hover { color: var(--accent); text-decoration: none; }
/* The lang-switcher and user-menu rules each set their own margin-left
   for the legacy block-nav layout. In the new flex nav the gap above
   already handles spacing — zero those margins so we don't get a
   double offset on the right cluster. */
.nav--desktop .lang-switcher,
.nav--desktop .user-menu,
.nav--desktop .btn-nav { margin-left: 0; }

/* ===== Mobile-only top navigation (≤720px) ============================
   On desktop the original .brand + .nav are visible and the mobile bar
   is hidden. Below 720px we hide the desktop pieces and show two
   compact dropdowns (page picker on the left, language + auth on the
   right). The dropdowns reuse the same wire() JS helper as the
   desktop user / language menus, so behaviour stays consistent. */

.nav-mobile { display: none; }   /* default: hidden on desktop */

@media (max-width: 720px) {
    .brand--desktop,
    .nav--desktop { display: none; }
    .nav-mobile {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%;
        gap: 10px;
    }
}

.nav-mobile__group { position: relative; }
.nav-mobile__group--left  { flex: 1; min-width: 0; }
.nav-mobile__group--right { flex-shrink: 0; }

.nav-mobile-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    font: inherit; font-size: 14px; font-weight: 600;
    color: var(--text);
    cursor: pointer;
    max-width: 100%;
    transition: background .12s, border-color .12s;
}
.nav-mobile-btn:hover  { background: #f5f7fb; }
.nav-mobile-btn:active { transform: translateY(1px); }

.nav-mobile-brand { color: var(--accent); }
.nav-mobile-sep   { color: var(--muted, #6a6f80); font-weight: 400; }
.nav-mobile-page {
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 36vw;             /* truncate on very narrow phones */
}
.nav-mobile-caret { color: var(--muted, #6a6f80); font-size: 11px; }

.nav-mobile-btn--user {
    padding: 4px 10px 4px 4px;
    gap: 4px;
}
.nav-mobile-avatar {
    width: 28px; height: 28px;
    border-radius: 999px;
    object-fit: cover;
}
.nav-mobile-user-emoji {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f3f5fb; border-radius: 999px;
    font-size: 14px;
}
.nav-mobile-flag { font-size: 14px; line-height: 1; }

/* Dropdown popovers */
.nav-mobile-menu {
    position: absolute; top: calc(100% + 6px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20,30,60,.12);
    list-style: none; margin: 0; padding: 6px;
    min-width: 220px;
    max-width: 90vw;
    max-height: 70vh; overflow-y: auto;
    z-index: 50;
}
.nav-mobile-menu--left  { left: 0; }
.nav-mobile-menu--right { right: 0; }

.nav-mobile-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.2;
}
.nav-mobile-item:hover { background: #f3f5fb; text-decoration: none; }
.nav-mobile-item.is-active {
    background: #eef2ff;
    color: var(--accent);
    font-weight: 600;
}
.nav-mobile-item-emoji { width: 20px; text-align: center; }
.nav-mobile-item--primary {
    background: var(--accent); color: #fff; font-weight: 600;
}
.nav-mobile-item--primary:hover { background: var(--accent-dark, #1f43a8); color: #fff; }
.nav-mobile-item--danger { color: #b91c1c; }
.nav-mobile-item--danger:hover { background: #fef2f2; color: #b91c1c; }

.nav-mobile-user-row {
    padding: 8px 12px 4px;
    font-size: 13px; color: var(--muted, #6a6f80);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-mobile-sub-label {
    padding: 6px 12px 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #6a6f80);
}
.nav-mobile-sep {
    height: 1px; background: var(--border);
    margin: 6px 4px;
}
.nav-mobile-flag-cell { width: 22px; text-align: center; font-size: 16px; }
.nav-mobile-lang-name { flex: 1; min-width: 0; }
.nav-mobile-check     { color: var(--accent); font-weight: 700; }

/* Hero / landing */
.hero {
    background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--border);
}
.hero h1 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    max-width: 760px;
}
.hero .lede {
    font-size: 18px;
    max-width: 680px;
    color: #2c2f3a;
    margin: 0 0 28px;
}
.cta-row { margin: 0; }

.btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--radius);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); text-decoration: none; }

/* Shared eyebrow used by landing sections */
.landing-eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

/* ===== Landing: About / Mission ===== */
.landing-about {
    padding: 56px 0 36px;
}
.landing-about h2 {
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: -.01em;
    margin: 0 0 14px;
    max-width: 720px;
}
.landing-about p {
    font-size: 17px;
    color: #2c2f3a;
    margin: 0 0 14px;
    max-width: 760px;
    line-height: 1.65;
}

/* ===== Landing: Topics ===== */
.landing-topics {
    padding: 36px 0 56px;
    background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.landing-topics h2 {
    font-size: clamp(22px, 3vw, 30px);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.landing-topics .lede {
    max-width: 720px;
    margin-bottom: 22px;
}
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0; padding: 0;
}
.topic-card {
    display: flex; align-items: center; gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
    transition: border-color .12s, transform .12s, box-shadow .12s;
}
.topic-card:hover {
    border-color: #c7d2fe;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.topic-emoji { font-size: 22px; line-height: 1; }

/* ===== Landing: How it works ===== */
.landing-how {
    padding: 56px 0;
}
.landing-how h2 {
    font-size: clamp(22px, 3vw, 30px);
    margin: 0 0 22px;
    letter-spacing: -.01em;
}
.how-steps {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.how-steps li {
    display: flex; gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 18px;
}
.how-step-num {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
.how-steps strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}
.how-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Landing: Audience (learners + teachers) ===== */
.landing-audience {
    padding: 36px 0 56px;
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.landing-audience h2 {
    font-size: clamp(22px, 3vw, 30px);
    margin: 0 0 22px;
    letter-spacing: -.01em;
}
.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.audience-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 24px;
}
.audience-emoji {
    font-size: 34px;
    display: block;
    margin-bottom: 10px;
}
.audience-card h3 {
    margin: 0 0 8px;
    font-size: 19px;
}
.audience-card p {
    margin: 0;
    color: #2c2f3a;
    font-size: 15px;
    line-height: 1.6;
}

/* ===== Landing: Final CTA ===== */
.landing-final-cta {
    padding: 60px 0;
    text-align: center;
}
.landing-final-cta h2 {
    font-size: clamp(24px, 3.5vw, 34px);
    margin: 0 0 10px;
    letter-spacing: -.015em;
}
.landing-final-cta p {
    color: var(--muted);
    font-size: 16px;
    margin: 0 auto 22px;
    max-width: 520px;
}
.landing-final-cta .cta-row {
    display: flex; gap: 10px; flex-wrap: wrap;
    justify-content: center;
}

/* Secondary button (used in hero + final CTA) */
.btn-secondary {
    background: #fff;
    color: var(--text);
    border: 1.5px solid var(--border);
}
.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* Features */
.features { padding: 48px 0; }
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}
.feature h3 { margin: 0 0 8px; font-size: 18px; }
.feature p  { margin: 0; color: var(--muted); }

/* ===== Logged-in dashboard ===== */
/* Hero — warm welcome + 5-item perks row */
.dash-hero {
    padding: 32px 0 24px;
    background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
    border-bottom: 1px solid #eef0f6;
}
.dash-hero h1 {
    margin: 0 0 8px;
    font-size: 28px; letter-spacing: -.01em;
    color: #1a1f33;
}
.dash-hero .lede {
    margin: 0 0 20px;
    color: var(--muted, #515875);
    font-size: 16px; line-height: 1.5;
    max-width: 720px;
}
.dash-perks {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.dash-perks li {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #e2e5ee;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13.5px; font-weight: 500;
    color: #2a2f44;
    box-shadow: 0 1px 2px rgba(20,30,60,.03);
}
.dash-perk-icon { font-size: 14px; line-height: 1; }

/* Stats — 4-up grid, one real card + 3 blurred placeholders */
.dash-stats { padding: 28px 0 8px; }
.dash-stats-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.dash-stats-head h2 { margin: 0; font-size: 20px; }
.dash-stats-soon {
    font-size: 12px; color: var(--muted, #6a6f80);
    text-transform: uppercase; letter-spacing: .08em;
    background: #f3f5fb; border: 1px solid #e2e5ee;
    border-radius: 999px; padding: 4px 10px;
}
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.dash-stat {
    background: #fff;
    border: 1px solid #e2e5ee;
    border-radius: 14px;
    padding: 16px;
    text-align: left;
    position: relative; overflow: hidden;
}
.dash-stat-emoji {
    font-size: 18px; line-height: 1;
    margin-bottom: 6px;
}
.dash-stat-value {
    font-size: 26px; font-weight: 700; letter-spacing: -.01em;
    color: #1a1f33;
    font-variant-numeric: tabular-nums;
}
.dash-stat-label {
    font-size: 13px; color: var(--muted, #5b6075);
    margin-top: 2px;
}
.dash-stat--blurred .dash-stat-value,
.dash-stat--blurred .dash-stat-emoji {
    filter: blur(6px);
    user-select: none;
    color: #aab0c4;
}
.dash-stat-soon-badge {
    position: absolute; top: 8px; right: 10px;
    font-size: 10px; color: #6a6f80;
    background: rgba(255,255,255,.85);
    border: 1px solid #e2e5ee;
    border-radius: 999px;
    padding: 2px 8px;
    text-transform: uppercase; letter-spacing: .08em;
    font-weight: 600;
    z-index: 1;
}
.dash-stat--blurred { background: linear-gradient(180deg, #fafbff 0%, #f4f6fb 100%); }

/* Feed section — re-uses .cards grid; just adds top padding */
.dash-feed { padding: 28px 0 64px; }

/* Featured / search list */
.featured { padding: 32px 0 64px; }
.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 18px;
}
.section-head h2 { margin: 0; font-size: 22px; }

.page-head {
    padding: 32px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}
.page-head h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.01em; }

/* ===== Discussions / forum ===== */
.disc-page { padding: 24px 0 64px; }
.disc-tabs-bar { margin-top: 14px; max-width: 480px; }
.disc-forum-actions { margin: 16px 0; }

/* ===== /find — deep text search ===== */
.find-page { padding: 24px 0 64px; }

/* Debug pane shown when ?debug_sql=showme is set. Intentionally
   loud so it's hard to leave on by accident. */
.find-debug {
    background: #fff8e1;
    border: 1px solid #f6c945;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 18px;
    font-size: 13px;
}
.find-debug > summary {
    cursor: pointer; font-weight: 700; color: #6b4a00;
    user-select: none;
}
.find-debug-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 10px 0 8px;
}
.find-debug-grid dt {
    font-weight: 600; color: #6b4a00;
}
.find-debug-grid dd { margin: 0; }
.find-debug-grid code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    background: rgba(255,255,255,.65);
    padding: 1px 5px; border-radius: 3px;
}
.find-debug-err { color: #b91c1c; font-weight: 600; }
.find-debug-sql {
    margin: 6px 0 0;
    background: #1a1f33; color: #e9ecf5;
    padding: 12px 14px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; line-height: 1.55;
    white-space: pre;
}

.find-form { margin: 8px 0 20px; }
.find-input-wrap {
    display: flex; align-items: center;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 4px 4px 4px 14px;
    transition: border-color .12s, box-shadow .12s;
}
.find-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(41,86,214,.10);
}
.find-input-icon { font-size: 18px; margin-right: 8px; line-height: 1; }
.find-input-wrap input {
    flex: 1; min-width: 0;
    border: 0; padding: 11px 8px;
    font: inherit; font-size: 16px; background: transparent;
}
.find-input-wrap input:focus { outline: none; }
.find-submit {
    flex-shrink: 0;
    border: 0; background: var(--accent); color: #fff;
    font-weight: 600; font-size: 14px;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
}
.find-submit:hover { background: var(--accent-dark, #1f43a8); }
.find-hint { margin: 8px 4px 0; }

/* "You can try with:" suggestion chips under the form. */
.find-suggest {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px;
    margin: 10px 4px 0;
    font-size: 13.5px;
    color: var(--muted, #5b6075);
}
.find-suggest-label { margin-right: 4px; }
.find-suggest-chip {
    display: inline-flex; align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 13px; font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
.find-suggest-chip:hover {
    background: rgba(41, 86, 214, .08);
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* Tab strip between the search form and the results. Same segmented
   look as the video-page tabs. */
.find-tabs-bar { margin: 8px 0 12px; max-width: 480px; }

/* Highlighted query words inside titles / descriptions / cues. */
mark {
    background: #fff3a3;
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.find-cue-play mark { background: rgba(245,206,55,.55); }

.find-count { margin: 18px 0 12px; font-size: 14px; }
.find-empty { padding: 32px 0; text-align: center; font-size: 15px; }

.find-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }

.find-row {
    display: flex; gap: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    transition: border-color .12s, box-shadow .12s;
}
.find-row:hover { border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(20,30,60,.05); }

.find-thumb {
    position: relative; flex-shrink: 0;
    width: 220px; aspect-ratio: 16/9;
    background: #f3f5fb;
    border-radius: 10px; overflow: hidden;
    display: block;
}
.find-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.find-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: #aab0c4;
}
.find-thumb-duration {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,.78); color: #fff;
    font-size: 11px; font-weight: 600;
    padding: 2px 6px; border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.find-main { flex: 1; min-width: 0; }
.find-row-title { margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.find-row-title a { color: #1a1f33; }
.find-row-title a:hover { color: var(--accent); }
.find-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.find-match-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(41,86,214,.10);
    color: var(--accent);
    border-radius: 999px; padding: 2px 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
.find-match-pill--desc { background: rgba(245,158,11,.14); color: #92400e; }

.find-row-desc {
    margin: 0 0 8px;
    color: var(--muted, #5b6075);
    font-size: 13.5px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.find-cues {
    background: #f7f8fc;
    border: 1px solid #eaedf3;
    border-radius: 10px;
    padding: 8px 10px;
    margin: 4px 0 8px;
}
.find-cues-head {
    margin: 0 0 6px;
    font-size: 12px; font-weight: 700;
    color: var(--muted, #5b6075);
    text-transform: uppercase; letter-spacing: .06em;
}
.find-cue-list { list-style: none; padding: 0; margin: 0; }
.find-cue { margin: 0 0 4px; }
.find-cue:last-child { margin-bottom: 0; }
.find-cue-play {
    width: 100%;
    display: flex; align-items: flex-start; gap: 10px;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background .12s;
}
.find-cue-play:hover { background: rgba(41,86,214,.06); }
.find-cue-time {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 700;
    color: var(--accent);
    background: rgba(41,86,214,.10);
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.4;
}
.find-cue-text {
    flex: 1; min-width: 0;
    font-size: 13.5px; line-height: 1.5;
    color: #2a2f44;
}
.find-cue-more { display: inline-block; margin-top: 4px; font-size: 13px; }
.find-row-cta { margin: 4px 0 0; font-size: 14px; }

@media (max-width: 720px) {
    .find-row { flex-direction: column; gap: 12px; padding: 12px; }
    .find-thumb { width: 100%; }
}

/* ----- "Only in subtitles" two-column rows ----- */
.find-results--subs { gap: 18px; }
.find-row--subs {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.find-subs-left {
    display: flex; flex-direction: column;
    min-width: 0;
}
.find-subs-left .find-thumb {
    width: 100%; margin-bottom: 10px;
}
.find-subs-title {
    margin: 0 0 6px;
    font-size: 15px; font-weight: 600; line-height: 1.3;
    color: #1a1f33;
}
.find-subs-title a { color: inherit; }
.find-subs-title a:hover { color: var(--accent); }
.find-subs-stats {
    margin: 6px 0 6px;
    font-size: 13px; color: var(--muted, #5b6075);
}
.find-subs-stats strong {
    color: var(--accent); font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.find-subs-right {
    min-width: 0;
    background: #f7f8fc;
    border: 1px solid #eaedf3;
    border-radius: 10px;
    padding: 8px 10px;
}
.find-subs-right .find-cue-list { padding: 0; margin: 0; list-style: none; }
.find-subs-right .find-cue { margin: 0 0 2px; }
.find-subs-right .find-cue:last-child { margin-bottom: 0; }
.find-subs-right .find-cue-play {
    padding: 8px 10px;
    border-radius: 6px;
}

@media (max-width: 720px) {
    .find-row--subs { grid-template-columns: 1fr; gap: 12px; }
}

/* ===== /find modal mini-player ===== */
.find-modal {
    position: fixed; inset: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
/* Author rules beat the UA's [hidden]{display:none} rule, so the
   modal's `display: flex` above would otherwise keep it visible even
   when the HTML carries the `hidden` attribute. Re-apply display:none
   for the hidden state with author-level specificity. */
.find-modal[hidden] { display: none; }
.find-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(10,15,30,.65);
    backdrop-filter: blur(2px);
}
.find-modal-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    max-width: 880px; width: 100%;
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    box-shadow: 0 24px 72px rgba(10,15,30,.40);
}
.find-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.find-modal-title {
    margin: 0;
    font-size: 15px; font-weight: 600;
    color: #1a1f33;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.find-modal-close {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 18px; line-height: 1;
    color: var(--muted, #6a6f80);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.find-modal-close:hover { background: #f3f5fb; color: #1a1f33; }
.find-modal-body { background: #000; }
.find-modal-body video {
    display: block; width: 100%;
    max-height: calc(100vh - 180px);
    aspect-ratio: 16/9;
}
.find-modal-foot {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end;
    background: #fafbfd;
}

/* Activity feed (left tab) — recent top-level comments next to a
   thumbnail of the video they're attached to. */
.activity-list {
    list-style: none; padding: 0; margin: 8px 0 32px;
    display: flex; flex-direction: column; gap: 12px;
}
.activity-row {
    display: flex; gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    transition: border-color .12s, box-shadow .12s;
}
.activity-row:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(20,30,60,.05); }
.activity-thumb {
    position: relative;
    flex-shrink: 0;
    width: 140px; aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f5fb;
    display: block;
}
.activity-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-thumb-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 28px; color: #aab0c4;
}
.activity-thumb-kind {
    position: absolute; bottom: 4px; left: 4px;
    background: rgba(0,0,0,.7); color: #fff;
    font-size: 10px; font-weight: 600;
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: .04em;
}
.activity-main { flex: 1; min-width: 0; }
.activity-meta {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
}
.activity-avatar {
    width: 22px; height: 22px;
    border-radius: 999px; object-fit: cover;
    flex-shrink: 0;
}
.activity-avatar--placeholder {
    background: #f3f5fb;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.activity-on  { margin: 0 0 6px; font-size: 13px; }
.activity-on .muted { margin-right: 4px; }
.activity-text {
    font-size: 14px; line-height: 1.5;
    color: #2a2f44;
    word-wrap: break-word;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.activity-text a { color: var(--accent); text-decoration: underline; }
@media (max-width: 540px) {
    .activity-row { flex-direction: column; gap: 10px; }
    .activity-thumb { width: 100%; }
}

.disc-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.disc-head h1 { margin: 0 0 4px; }
.disc-head .btn { flex-shrink: 0; white-space: nowrap; }

.disc-list {
    list-style: none; padding: 0; margin: 8px 0 32px;
    display: flex; flex-direction: column; gap: 8px;
}
.disc-row {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color .12s, box-shadow .12s;
}
.disc-row:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(20,30,60,.06); }
.disc-row-link {
    display: flex; align-items: stretch; gap: 16px;
    padding: 14px 16px;
    color: var(--text);
    text-decoration: none;
}
.disc-row-link:hover { text-decoration: none; }
.disc-row-main { flex: 1; min-width: 0; }
.disc-row-title {
    margin: 0 0 4px;
    font-size: 16px; font-weight: 600;
    color: #1a1f33;
    line-height: 1.3;
}
.disc-row-preview {
    margin: 0 0 6px;
    color: var(--muted, #5b6075);
    font-size: 14px; line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.disc-row-meta {
    margin: 0;
    font-size: 12px; color: var(--muted, #6a6f80);
    display: flex; gap: 6px; flex-wrap: wrap;
}
.disc-row-count {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 60px;
    padding: 0 8px;
    border-left: 1px solid var(--border);
    color: var(--muted, #6a6f80);
}
.disc-row-count-n {
    font-size: 20px; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.disc-row-count-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    margin-top: 2px;
}
@media (max-width: 540px) {
    .disc-row-count { min-width: 50px; padding: 0 4px; }
    .disc-row-count-n { font-size: 18px; }
}

/* Topic view */
.disc-topic { padding: 24px 0 64px; }
.disc-back { margin: 0 0 16px; font-size: 14px; }
.disc-topic-title {
    margin: 8px 0 16px;
    font-size: 26px; letter-spacing: -.01em; line-height: 1.25;
}
.disc-post {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}
.disc-post--op {
    background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 60%);
    border-color: #dde1ec;
    margin-bottom: 28px;
}
.disc-post-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.disc-avatar {
    width: 36px; height: 36px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}
.disc-avatar--placeholder {
    background: #f3f5fb;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.disc-post-meta {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.disc-post-meta strong { font-size: 14px; color: #1a1f33; }
.disc-post-body {
    font-size: 15px; line-height: 1.55;
    color: #2a2f44;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.disc-delete-form { margin: 0; }
.disc-delete-btn { font-size: 12px; color: #b91c1c; }

.disc-replies-title {
    margin: 12px 0 12px;
    font-size: 16px; font-weight: 600;
    color: var(--muted, #5b6075);
    letter-spacing: .01em;
}
.disc-posts {
    list-style: none; padding: 0; margin: 0 0 32px;
}

.disc-reply-form {
    background: #f7f8fc;
    border: 1px solid #eaedf3;
    border-radius: 12px;
    padding: 16px;
    margin-top: 24px;
}
.disc-reply-form h3 {
    margin: 0 0 10px; font-size: 14px;
    color: var(--muted, #5b6075); text-transform: uppercase; letter-spacing: .06em;
}
.disc-reply-form textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit; font-size: 15px; line-height: 1.55;
    resize: vertical;
    min-height: 80px;
}
.disc-reply-form textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41,86,214,.10);
}
.disc-reply-actions {
    margin-top: 10px;
    display: flex; justify-content: flex-end;
}
.disc-reply-anon { margin: 0; text-align: center; }

/* New-topic form */
.disc-new { padding: 24px 0 64px; max-width: 760px; }
.disc-new h1 { margin: 8px 0 6px; font-size: 26px; }
.disc-new .muted { margin: 0 0 20px; }
.disc-new-form input[type="text"],
.disc-new-form textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit; font-size: 15px; line-height: 1.5;
    background: #fff;
}
.disc-new-form input[type="text"]:focus,
.disc-new-form textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41,86,214,.10);
}

/* Video card */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: #c7d2fe;
    text-decoration: none;
}
.card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #e5e7eb;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-thumb-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #dbe3ff, #c7d2fe);
}
.card-duration {
    position: absolute; right: 8px; bottom: 8px;
    background: rgba(0,0,0,.78); color: #fff;
    padding: 2px 8px; border-radius: 4px;
    font-size: 12px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.card-kind {
    position: absolute; left: 8px; top: 8px;
    background: rgba(0, 0, 0, .78); color: #fff;
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
    letter-spacing: .02em;
}
.card-kind--clip {
    background: var(--accent);
    color: #fff;
}
.card-processing {
    position: absolute; left: 8px; top: 8px;
    background: rgba(194, 65, 12, .92); color: #fff;
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .04em;
}
.card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.card-title { margin: 0; font-size: 16px; line-height: 1.35; color: var(--text); }
.card-desc {
    margin: 0; font-size: 14px; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }

/* Badges and tags */
.badge {
    background: var(--badge-bg); color: var(--badge-fg);
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    text-transform: lowercase;
}
.tag {
    background: var(--tag-bg); color: var(--tag-fg);
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px;
}

/* Video page */
.video-page { padding: 24px 0 64px; }
.player-wrap {
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-bottom: 18px;
}
.player-wrap video { width: 100%; height: 100%; display: block; }
.player-wrap--youtube iframe { width: 100%; height: 100%; display: block; border: 0; }

/* CTA shown in place of the player-controls toolbar for anonymous
   visitors — invites them to sign in to unlock subtitle / speed /
   size / color customization. */
.player-cta {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, #f3f7ff 0%, #fff 60%);
    border: 1px solid #dce4f5;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
}
.player-cta__icon  { font-size: 26px; line-height: 1; }
.player-cta__body  { flex: 1; min-width: 0; }
.player-cta__body strong { display: block; font-size: 15px; margin-bottom: 2px; color: #1a1f33; }
.player-cta__body p { margin: 0; color: #515875; font-size: 13.5px; line-height: 1.4; }
.player-cta__actions .btn { white-space: nowrap; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; }
@media (max-width: 540px) {
    .player-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
    .player-cta__actions { width: 100%; }
    .player-cta__actions .btn { display: block; text-align: center; }
}

/* Title bar above the player — title left, layout toggle right.
   Meta strip (badge / duration / source / tags) sits underneath. */
.video-head { margin: 4px 0 18px; }
.video-head-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
}
.video-head h1 {
    margin: 0 0 6px;
    font-size: 26px; letter-spacing: -.01em; line-height: 1.25;
    min-width: 0;          /* allow flex shrink so toggle stays in view */
}
.video-meta {
    display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap;
}

/* Layout toggle: 2-button segmented control — sized for comfortable
   click targets on desktop and tap targets on touch devices. */
.layout-toggle {
    display: inline-flex;
    background: #f3f5fb;
    border: 1px solid #dde1ec;
    border-radius: 12px;
    padding: 4px;
    flex-shrink: 0;
    align-self: flex-start;
}
.layout-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 36px;
    background: transparent;
    border: 0; border-radius: 9px;
    color: var(--muted, #6a6f80);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.layout-btn:hover { color: #1a1f33; background: rgba(255,255,255,.5); }
.layout-btn.is-active {
    background: #fff; color: #1a1f33;
    box-shadow: 0 1px 3px rgba(20,30,60,.10);
}
.layout-btn svg { display: block; width: 20px; height: 20px; }

/* Layout wrapper — stacked (default) is a single column; side splits
   the player and the tabs panel into two columns. The toggle JS sets
   data-layout="side" on this container to switch modes. */
.video-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.video-layout[data-layout="side"] {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
}
.video-layout__player { min-width: 0; }
.video-layout__tabs   { min-width: 0; }

/* In side mode the right pane gets its own vertical scroll so a long
   transcript stays usable next to a sticky-ish player. The player
   column also gets position:sticky on its inner wrap so the video
   follows you down the page. */
@media (min-width: 901px) {
    .video-layout[data-layout="side"] .video-layout__tabs {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        padding-right: 4px;       /* breathing room for scrollbar */
    }
    .video-layout[data-layout="side"] .video-layout__player {
        position: sticky;
        top: 80px;                /* sits under the site header */
    }
}
/* Force stacked on narrow screens regardless of preference — side-by-
   side on a phone defeats the purpose. */
@media (max-width: 900px) {
    .video-layout[data-layout="side"] {
        grid-template-columns: 1fr;
    }
    .layout-toggle { display: none; }
}

/* Backwards-compat shims for any code still referencing .video-grid /
   .video-main / .video-side — empty rules so missing CSS doesn't
   regress, no layout effect. */
.video-grid, .video-main, .video-side { /* deprecated, see .video-layout */ }

/* Single-row player toolbar — Subs + Size + Color + Speed all in line */
.player-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;          /* row-gap (when wrapping) col-gap */
    padding: 10px 14px;
    background: var(--bg-alt);
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.pc-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pc-group--swatches { gap: 6px; }
/* Dual-subs "+ Add" row: same buttons as CC but with a subtle muted
   label so it reads as the second subtitle slot, not a duplicate row. */
.pc-group--dual .pc-label { color: var(--muted, #6a6f80); font-style: italic; }
.pc-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
    user-select: none;
}

/* Compact buttons inside the player-controls bar */
.player-controls .sub-btn,
.player-controls .sub-pref-btn,
.player-controls .speed-btn {
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.2;
}
.player-controls .sub-color-swatch {
    width: 24px; height: 24px;
    padding: 0;
}

/* Size buttons: three "A"s with growing font — visually obvious */
.pref-size-btn {
    width: 34px; height: 28px;
    padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.size-letter         { font-weight: 700; line-height: 1; }
.size-letter--m  { font-size: 12px; }
.size-letter--l  { font-size: 15px; }
.size-letter--xl { font-size: 19px; }

/* Legacy alias kept for older templates (still used elsewhere) */
.sub-controls-label { margin-right: 6px; }
.sub-controls-label--gap { margin-left: 14px; }

.sub-btn,
.sub-pref-btn,
.speed-btn {
    appearance: none;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.sub-btn:hover,
.sub-pref-btn:hover,
.speed-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.sub-btn.is-active,
.sub-pref-btn.is-active,
.speed-btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.sub-btn.is-active:hover,
.sub-pref-btn.is-active:hover,
.speed-btn.is-active:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
}

/* Color swatches: small round chip showing the preview color */
.sub-color-swatch {
    width: 28px; height: 28px;
    padding: 0;
    background: var(--sw, #fff);
    border: 2px solid var(--border);
    border-radius: 50%;
}
.sub-color-swatch:hover { border-color: var(--accent); }
.sub-color-swatch.is-active {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--accent);
    background: var(--sw, #fff);
    color: transparent;
}

/* Custom subtitle overlay rendered by JS on top of the player.
   The native cue display is suppressed (track.mode = 'hidden') so we
   can fully control width, wrapping, font-size and color. */
.player-wrap { position: relative; }
/* Overlay stack: holds two layers of cue lines (primary + optional
   secondary for dual subtitles). The wrapper owns positioning AND the
   size/colour preference classes — both child layers inherit. */
.custom-subs-stack {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    max-width: 80%;
    pointer-events: none;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.custom-subs {
    width: max-content;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.custom-subs:empty { display: none; }   /* empty layers collapse the flex gap */
.custom-subs .cue-line {
    display: inline-block;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    margin: 2px 0;
    white-space: pre-wrap;       /* preserve cue \n + wrap long lines */
    word-break: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}
/* Secondary layer is slightly less prominent so the primary still
   reads as the "main" track when both are on. */
.custom-subs--secondary .cue-line {
    background: rgba(0, 0, 0, 0.58);
    opacity: .95;
}

/* Size & colour preferences. Classes are set on .custom-subs-stack at
   runtime (so both child layers share them), and on the <video> for
   ::cue native rendering. */
.custom-subs-stack.sub-size-medium .cue-line { font-size: 1.05rem; }
.custom-subs-stack.sub-size-big    .cue-line { font-size: 1.45rem; }
.custom-subs-stack.sub-size-xl     .cue-line { font-size: 1.95rem; }

.custom-subs-stack.sub-color-white  .cue-line { color: #ffffff; }
.custom-subs-stack.sub-color-yellow .cue-line { color: #ffe066; }
.custom-subs-stack.sub-color-cyan   .cue-line { color: #7be0ff; }
.custom-subs-stack.sub-color-green  .cue-line { color: #9af59a; }

/* Native ::cue fallback (only visible in fullscreen, where the overlay
   can't render because only the fullscreened element is shown). */
video::cue { background: rgba(0, 0, 0, 0.62); }
video.sub-size-medium::cue { font-size: 1.0em; }
video.sub-size-big::cue    { font-size: 1.4em; }
video.sub-size-xl::cue     { font-size: 1.9em; }
video.sub-color-white::cue  { color: #ffffff; }
video.sub-color-yellow::cue { color: #ffe066; }
video.sub-color-cyan::cue   { color: #7be0ff; }
video.sub-color-green::cue  { color: #9af59a; }

.lede { font-size: 17px; color: #2c2f3a; }
.desc-long { color: #2c2f3a; }
.desc-long p { margin: 0 0 14px; }

.video-side .side-block {
    background: var(--bg-alt);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.video-side h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.video-side .tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===== Auth (login / register) ===== */
.nav-avatar {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
    background: #e5e7eb;
}
.btn-nav { padding: 7px 14px; font-size: 14px; margin-left: 18px; }

/* User dropdown in the nav */
.user-menu { position: relative; margin-left: 18px; display: inline-block; }
.user-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 10px 4px 4px;
    color: var(--text); font: inherit; font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.user-btn:hover { background: var(--bg-alt); border-color: var(--border); }
.user-btn[aria-expanded="true"] { background: var(--bg-alt); border-color: var(--border); }
.user-btn-name {
    max-width: 160px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-caret { color: var(--muted); font-size: 12px; }

.user-dropdown {
    position: absolute; right: 0; top: calc(100% + 6px);
    list-style: none; margin: 0; padding: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(20,30,60,.10), 0 2px 6px rgba(20,30,60,.06);
    min-width: 200px;
    z-index: 100;
}
.user-dropdown li { margin: 0; }
.user-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text); font-size: 14px; font-weight: 500;
    text-decoration: none;
}
.user-item:hover { background: var(--bg-alt); text-decoration: none; }
.user-item--danger { color: #b91c1c; }
.user-item--danger:hover { background: #fef2f2; color: #991b1b; }
.user-item-emoji { font-size: 16px; line-height: 1; }
.user-sep {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}

/* Profile page header */
.profile-card { max-width: 760px; }
.profile-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px;
}
.profile-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; background: #e5e7eb;
}
.profile-head h1 { margin: 0 0 2px; font-size: 24px; letter-spacing: -.01em; }
.profile-head p  { margin: 0; }
.profile-card .onb-form input[type="text"] {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 15px; font-family: inherit;
}
.profile-card .onb-form input[type="text"]:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41, 86, 214, 0.10);
}
.flash-ok {
    background: #d1fae5; color: #065f46;
    padding: 10px 14px; border-radius: 10px;
    margin: 0 0 18px; font-size: 14px;
}

/* ----- Language switcher ----- */
.lang-switcher { position: relative; margin-left: 14px; display: inline-block; }
.lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; font: inherit; font-size: 13px;
}
.lang-btn:hover { background: #f4f5f7; border-color: #c8ccd3; }
.lang-btn .lang-flag { font-size: 16px; line-height: 1; }
.lang-btn .lang-code { font-weight: 700; letter-spacing: .04em; font-size: 12px; }
.lang-btn .lang-caret { font-size: 10px; color: var(--muted); margin-left: 2px; }
.lang-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    list-style: none; margin: 0; padding: 4px;
    background: #fff;
    border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    min-width: 180px;
    z-index: 50;
}
.lang-menu li { margin: 0; }
.lang-option {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 4px;
    color: var(--text); text-decoration: none;
    font-size: 14px;
}
.lang-option .lang-flag { font-size: 18px; }
.lang-option:hover { background: #f4f5f7; text-decoration: none; }
.lang-option.is-active { background: var(--accent-soft, #fff1ea); color: var(--accent, #c2410c); font-weight: 600; }

.auth-wrap {
    min-height: calc(100vh - 60px - 70px); /* minus header & footer */
    display: flex; align-items: center; justify-content: center;
    padding: 32px 20px;
    background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
}
.auth-card {
    width: 100%; max-width: 420px;
    background: #fff; border-radius: 18px;
    box-shadow: 0 4px 14px rgba(20,30,60,.06), 0 32px 64px rgba(20,30,60,.08);
    padding: 38px 32px 32px;
    text-align: center;
}
.auth-emoji { font-size: 44px; margin-bottom: 4px; }
.auth-card h1 { margin: 4px 0 6px; font-size: 26px; letter-spacing: -.01em; }
.auth-card .lede { color: var(--muted); margin: 0 0 22px; font-size: 15px; }

.auth-google {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 12px 16px;
    background: #fff; color: #1f1f1f;
    border: 1px solid #d9d9d9; border-radius: 999px;
    font-weight: 600; font-size: 15px;
    transition: box-shadow .15s, transform .04s;
}
.auth-google:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); text-decoration: none; }
.auth-google:active { transform: translateY(1px); }

.auth-fineprint { color: var(--muted); font-size: 12px; margin-top: 18px; line-height: 1.45; }

/* --- Email / password form on the same card --- */
.auth-form {
    display: flex; flex-direction: column; gap: 12px;
    text-align: left;
    margin: 0 0 16px;
}
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span {
    font-size: 12px; color: var(--muted, #5b6075);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.auth-field input {
    width: 100%; box-sizing: border-box;
    padding: 11px 14px; font-size: 15px;
    background: #fff; color: #181a22;
    border: 1px solid #d9dbe3; border-radius: 10px;
    transition: border-color .12s, box-shadow .12s;
}
.auth-field input:focus {
    outline: none; border-color: #0b67ff;
    box-shadow: 0 0 0 3px rgba(11,103,255,.16);
}

.auth-submit {
    margin-top: 4px;
    width: 100%; padding: 12px 16px;
    background: #0b67ff; color: #fff;
    border: 0; border-radius: 999px;
    font-weight: 600; font-size: 15px; cursor: pointer;
    transition: background .15s, transform .04s, box-shadow .15s;
}
.auth-submit:hover  { background: #0857d9; box-shadow: 0 4px 14px rgba(11,103,255,.25); }
.auth-submit:active { transform: translateY(1px); }

.auth-divider {
    position: relative;
    text-align: center; margin: 16px 0 14px;
    color: var(--muted, #6a6f80); font-size: 12px;
    text-transform: uppercase; letter-spacing: .12em;
}
.auth-divider::before, .auth-divider::after {
    content: ""; position: absolute; top: 50%; width: calc(50% - 28px);
    height: 1px; background: #e3e5ec;
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-divider span    { background: #fff; padding: 0 8px; position: relative; }

.auth-error {
    background: #fff1f1; color: #a02020;
    border: 1px solid #f3c8c8; border-radius: 10px;
    padding: 10px 12px; margin: 0 0 14px;
    font-size: 14px; line-height: 1.4; text-align: left;
}
.auth-info {
    background: #effaef; color: #1e6f3e;
    border: 1px solid #cfe8d2; border-radius: 10px;
    padding: 10px 12px; margin: 0 0 14px;
    font-size: 14px; line-height: 1.4; text-align: left;
}

/* Big OTP-style 4-digit input */
.auth-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 28px !important;
    text-align: center;
    letter-spacing: .35em;
    padding: 12px 14px !important;
}

.auth-resend { margin: 0 0 8px; text-align: center; }
.link-button {
    background: none; border: 0; padding: 0;
    color: #0b67ff; cursor: pointer; font-size: 14px;
    text-decoration: underline;
}
.link-button:hover { color: #0857d9; }

/* ===== Onboarding wizard ===== */
.onb-wrap {
    min-height: calc(100vh - 60px - 70px);
    display: flex; justify-content: center;
    padding: 28px 20px 60px;
    background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
}
.onb-card {
    width: 100%; max-width: 720px;
    background: #fff; border-radius: 18px;
    box-shadow: 0 4px 14px rgba(20,30,60,.06), 0 32px 64px rgba(20,30,60,.08);
    padding: 32px 36px;
}
@media (max-width: 600px) { .onb-card { padding: 24px 20px; } }

.onb-progress {
    display: flex; gap: 8px; justify-content: center;
    margin-bottom: 22px;
}
.onb-dot {
    width: 28px; height: 6px; border-radius: 999px;
    background: #e5e7eb;
    transition: background .15s;
}
.onb-dot.is-done   { background: #c7d2fe; }
.onb-dot.is-active { background: var(--accent); }

.onb-card h1 { margin: 4px 0 8px; font-size: 26px; letter-spacing: -.01em; }
.onb-card .lede { color: var(--muted); margin: 0 0 24px; font-size: 16px; }

.onb-form fieldset { border: none; padding: 0; margin: 0 0 22px; }
.onb-form legend {
    font-weight: 600; font-size: 13px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); margin-bottom: 12px;
    padding: 0;
}

/* Tile grid (role picker) */
.onb-grid { display: grid; gap: 12px; }
.onb-grid-2 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.onb-tile {
    cursor: pointer;
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    text-align: left;
    transition: border-color .12s, transform .04s, background .12s;
    display: flex; flex-direction: column; gap: 4px;
    background: #fff;
}
.onb-tile:hover  { border-color: #c7d2fe; }
.onb-tile:active { transform: translateY(1px); }
.onb-tile input  { position: absolute; opacity: 0; pointer-events: none; }
.onb-tile:has(input:checked) {
    border-color: var(--accent);
    background: #f5f7ff;
    box-shadow: 0 0 0 3px rgba(41, 86, 214, 0.08);
}
.onb-tile-emoji { font-size: 30px; line-height: 1; }
.onb-tile-label { font-weight: 600; font-size: 16px; margin-top: 4px; }
.onb-tile-sub   { color: var(--muted); font-size: 13px; }

/* Pill row (level picker) */
.onb-pillrow {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.onb-pill {
    cursor: pointer;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    flex: 1 1 90px;
    text-align: center;
    background: #fff;
    transition: border-color .12s, background .12s;
}
.onb-pill input { position: absolute; opacity: 0; pointer-events: none; }
.onb-pill:hover { border-color: #c7d2fe; }
.onb-pill:has(input:checked) {
    border-color: var(--accent);
    background: #f5f7ff;
}
.onb-pill-code { display: block; font-weight: 700; font-size: 18px; }
.onb-pill-sub  { display: block; color: var(--muted); font-size: 12px; }

/* Tag chips */
.onb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-tag {
    cursor: pointer;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    background: #fff;
    font-size: 14px;
    color: var(--text);
    transition: border-color .12s, background .12s, color .12s;
    user-select: none;
}
.onb-tag input { position: absolute; opacity: 0; pointer-events: none; }
.onb-tag:hover { border-color: var(--accent); color: var(--accent); }
.onb-tag:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Textarea */
.onb-form textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px; font-family: inherit; line-height: 1.5;
    resize: vertical;
}
.onb-form textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41,86,214,.10);
}

/* ===== Languages-I-master multi-select picker ===== */
.lang-picker { position: relative; }
.lang-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 6px 0 10px;
    min-height: 4px;             /* avoid layout jump when empty */
}
.lang-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent, #2956d6);
    color: #fff;
    padding: 6px 6px 6px 12px;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    line-height: 1;
}
.lang-chip-name { white-space: nowrap; }
.lang-chip-x {
    appearance: none;
    background: rgba(255,255,255,.18);
    color: #fff; border: 0;
    width: 20px; height: 20px;
    border-radius: 999px;
    font-size: 14px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.lang-chip-x:hover { background: rgba(255,255,255,.32); }

.lang-combo { position: relative; }
.lang-search {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px; font-family: inherit;
    background: #fff;
}
.lang-search:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41,86,214,.10);
}
.lang-search:disabled {
    background: #f3f5fb; color: var(--muted, #6a6f80);
    cursor: not-allowed;
}

.lang-dropdown {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(20,30,60,.12);
    z-index: 30;
    max-height: 280px; overflow-y: auto;
    padding: 4px;
}
.lang-dropdown-item {
    appearance: none;
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 9px 12px;
    border-radius: 8px;
    font: inherit; font-size: 14px;
    color: var(--text, #1a1f33);
    text-align: left;
    cursor: pointer;
}
.lang-dropdown-item.is-active,
.lang-dropdown-item:hover {
    background: #f3f5fb;
}
.lang-dropdown-name { flex: 1; min-width: 0; }
.lang-dropdown-code {
    font-size: 11px; font-weight: 600;
    color: var(--muted, #6a6f80);
    background: #eef0f6;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: .04em;
}
.lang-dropdown-empty {
    padding: 10px 12px;
    color: var(--muted, #6a6f80);
    font-size: 13px;
}

.onb-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 8px;
}
.btn-link {
    color: var(--muted); font-weight: 500;
    background: transparent; border: none; padding: 8px 4px;
    cursor: pointer;
}
.btn-link:hover { color: var(--text); text-decoration: none; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== Tabbed panel below the video (Subtitles / Description / Comments / Report)
   Segmented-pill design: a soft-tinted container holds 4 buttons that
   look like a single control. Active tab is a raised white card with
   accent-tinted text; inactive tabs blend into the container. Counts
   are small badge pills appended after the label. Below 540px the
   inactive labels collapse to emoji-only so all 4 still fit on a
   phone. */
.vtabs {
    margin-top: 28px;
}
/* In side-by-side layout the tabs sit in their own column next to the
   player, not below it — drop the section-break margin. */
.video-layout[data-layout="side"] .vtabs {
    margin-top: 0;
}
.vtabs-bar {
    display: flex;
    align-items: stretch;
    gap: 3px;
    margin: 0 0 16px;
    padding: 4px;
    background: #f1f3fa;
    border: 1px solid #e2e6ef;
    border-radius: 12px;
    overflow-x: auto;            /* fallback: scroll horizontally on very narrow */
    -webkit-overflow-scrolling: touch;
}
.vtab {
    appearance: none;
    background: transparent;
    border: 0;
    flex: 1 1 0;                 /* equal-width segments */
    min-width: 0;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    font: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--muted, #6a6f80);
    cursor: pointer;
    border-radius: 8px;
    transition: background .14s, color .14s, box-shadow .14s, transform .04s;
    white-space: nowrap;
    line-height: 1.2;
}
.vtab:hover  { color: var(--text); background: rgba(255,255,255,.55); }
.vtab:active { transform: translateY(1px); }
.vtab.is-active {
    background: #fff;
    color: var(--accent, #2956d6);
    box-shadow:
        0 1px 2px rgba(20,30,60,.08),
        0 1px 1px rgba(20,30,60,.04);
}
.vtab-emoji { font-size: 14px; line-height: 1; }
/* Inactive labels read at ~89% of the active size, so the active
   segment naturally pulls the eye without making the others
   disappear. */
.vtab-label {
    overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
    font-size: 12px;
}
.vtab.is-active .vtab-label { font-size: 13.5px; }
.vtab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 6px;
    background: rgba(20,30,60,.08);
    color: var(--muted, #6a6f80);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.vtab.is-active .vtab-count {
    background: var(--accent-soft, rgba(41,86,214,.12));
    color: var(--accent, #2956d6);
}

/* Tight viewports: keep ALL labels visible (so the user can still
   read where each tab leads), but shrink the inactive ones a touch
   so the active tab keeps visual prominence and the 4 segments fit
   on a single line. */
@media (max-width: 540px) {
    .vtab { padding: 7px 6px; gap: 4px; }
    .vtab .vtab-label { font-size: 11px; }
    .vtab.is-active .vtab-label { font-size: 13px; }
    .vtab-emoji { font-size: 13px; }
    .vtab-count { min-width: 16px; height: 16px; font-size: 10px; padding: 0 5px; }
}
/* Same compaction in the dual-column layout (the tabs share their
   column with a narrow transcript, which has less horizontal room
   than a full-width stacked layout). */
@media (min-width: 901px) {
    .video-layout[data-layout="side"] .vtab { padding: 7px 6px; gap: 4px; }
    .video-layout[data-layout="side"] .vtab .vtab-label { font-size: 11px; }
    .video-layout[data-layout="side"] .vtab.is-active .vtab-label { font-size: 13px; }
}

.vtab-panel { display: none; }
.vtab-panel.is-active { display: block; }
/* Inside the comments tab, drop the partial's own top divider — the tab
   itself is already a section break. */
.vtab-panel #vtab-panel-comments .engagement,
.vtab-panel .engagement {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Language sub-tabs inside the Subtitles tab.
   Pills sit inside a softly-tinted container that mirrors the segmented
   .vtabs-bar above — same border-radius + flat-on-tint feel, but a
   couple shades lighter so the two strips read as a hierarchy rather
   than two equal-weight bars. */
.sub-lang-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: 0 0 10px;
    padding: 4px;
    background: #f7f8fc;
    border: 1px solid #eaedf3;
    border-radius: 10px;
}
.sub-lang-tab {
    appearance: none;
    background: transparent;
    color: var(--muted, #6a6f80);
    border: 1px solid transparent;
    padding: 3px 10px;
    border-radius: 999px;
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    line-height: 1.4;
    transition: border-color .12s, background .12s, color .12s;
}
.sub-lang-tab:hover {
    background: rgba(255, 255, 255, .7);
    color: var(--text, #1a1f33);
}
.sub-lang-tab.is-active {
    background: #fff;
    border-color: rgba(41, 86, 214, .25);
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(20, 30, 60, .06);
}
/* (formerly .sub-lang-ai badge inside language pills — removed
   alongside the per-pill "(AI)" suffix; the AI warning banner is the
   single canonical signal that a track is auto-generated.) */

/* AI-generated subtitle warning banner.
   The whole block is clickable — tap anywhere to dismiss it forever
   (persisted in localStorage). The inline "(Hide)" link at the end of
   the sentence makes the dismiss affordance visible without taking a
   separate row, which is the layout the user pushed back on. */
.ai-warning {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #78350f;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ai-warning:hover  { background: #fde8a8; border-color: #fcd96a; }
.ai-warning:focus  { outline: 2px solid #92400e; outline-offset: 2px; }
.ai-warning__hide {
    display: inline;
    margin-left: 4px;
    color: #92400e;
    font-size: 11px; font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* Discreet helper line above the transcript ("Click a timestamp to
   jump there"). Smaller + lighter than the default .muted so it sits
   quietly under the language pills — it's a tip, not a primary
   instruction. */
.subtitles-hint {
    margin: 0 0 8px;
    font-size: 11px;
    color: #9aa0b0;
    line-height: 1.4;
}

/* Transcript list */
.transcript-list {
    list-style: none;
    margin: 12px 0 0; padding: 0;
    display: none;                  /* hidden by default; .is-active toggles */
    flex-direction: column;
    gap: 6px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
}
.transcript-list.is-active { display: flex; }
.transcript-row {
    display: flex; gap: 12px; align-items: baseline;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .08s;
}
.transcript-row:hover { background: var(--bg-alt); }
.transcript-time {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .08s, color .08s, border-color .08s;
}
.transcript-time:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* Anonymous viewers can't seek the YouTube iframe, so the timestamp
   is rendered as a static label — neutralize the button affordances. */
.transcript-time--static {
    display: inline-block;
    cursor: default;
    color: var(--muted, #5b6075);
    border-color: transparent;
    background: transparent;
}
.transcript-time--static:hover {
    background: transparent;
    color: var(--muted, #5b6075);
    border-color: transparent;
}
.transcript-text {
    flex: 1;
    font-size: 15px; line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.transcript-report-btn {
    appearance: none; background: transparent; border: none;
    color: var(--muted); cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s, color .12s;
}
.transcript-row:hover .transcript-report-btn { opacity: 0.55; }
.transcript-report-btn:hover { color: #b91c1c; opacity: 1; }

/* Report form */
.report-form {
    display: flex; flex-direction: column;
    gap: 14px;
    max-width: 640px;
}
.report-field {
    display: flex; flex-direction: column;
    gap: 6px;
}
.report-label {
    font-size: 13px; font-weight: 600;
    color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.report-form select,
.report-form textarea {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit; font-size: 14px;
    background: #fff;
}
.report-form select:focus,
.report-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41, 86, 214, 0.10);
}
.report-form textarea { resize: vertical; min-height: 80px; }
.report-actions { display: flex; gap: 10px; align-items: center; }
.report-thanks {
    color: #065f46;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    padding: 8px 14px;
    border-radius: 8px;
    margin: 0;
    font-size: 14px;
}

/* ===== Engagement bar at the top: Like + Rate ===== */
/* Sits right under the .player-controls toolbar so reactions are next
   to the playback knobs. Same visual language as the toolbar. */
.engagement-bar {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    align-items: center;
    padding: 8px 14px;
    background: var(--bg-alt);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

/* ===== Comments section (further down the page) ===== */
.engagement {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

/* Like button */
.like-btn {
    display: inline-flex; align-items: center; gap: 8px;
    appearance: none;
    background: #fff;
    color: var(--text);
    border: 1.5px solid var(--border);
    padding: 8px 16px;
    border-radius: 999px;
    font: inherit; font-weight: 500; font-size: 14px;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s, transform .04s;
}
.like-btn:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}
.like-btn:active { transform: translateY(1px); }
.like-btn .like-heart {
    color: #cbd5e1;
    transition: color .12s, transform .12s;
}
.like-btn:hover .like-heart { color: #e74c3c; }
.like-btn.is-liked {
    background: #fff1f1;
    border-color: #e74c3c;
    color: #b91c1c;
}
.like-btn.is-liked .like-heart { color: #e74c3c; }
.like-btn .like-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-left: 2px;
}
.like-btn:disabled { opacity: 0.6; cursor: progress; }

/* Star rating */
.rating-widget {
    display: inline-flex; align-items: center; gap: 12px;
}
.rating-stars {
    display: inline-flex; gap: 2px;
}
.rating-stars .star {
    appearance: none;
    background: transparent; border: none; padding: 0 2px;
    font-size: 22px; line-height: 1;
    color: #cbd5e1;
    cursor: pointer;
    transition: color .08s, transform .08s;
}
.rating-stars .star:hover { transform: scale(1.08); }
.rating-stars .star.is-filled,
.rating-stars .star.is-preview { color: #f5c518; }
.rating-stars:hover .star.is-filled:not(.is-preview) { color: #cbd5e1; }
.rating-summary {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}
.rating-summary strong { font-size: 16px; }

/* Comments */
.comments { margin-top: 8px; }
.comments-title {
    margin: 0 0 14px;
    font-size: 18px;
    letter-spacing: -.005em;
}

.comment-form {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 16px;
}
.comment-form textarea {
    width: 100%;
    min-height: 60px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit; font-size: 14px;
    resize: vertical;
}
.comment-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41, 86, 214, 0.10);
}
.comment-form-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 8px;
}
.comment-form-actions .btn-link {
    background: transparent; border: none; color: var(--muted);
    font: inherit; cursor: pointer; padding: 8px 4px;
}
.comment-form-actions .btn-link:hover { color: var(--text); }
.comment-signin { margin: 8px 0 18px; }

.comment-list,
.comment-replies {
    list-style: none;
    margin: 0; padding: 0;
}
.comment-list { display: flex; flex-direction: column; gap: 14px; }
.comment-replies {
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 12px;
    padding-left: 16px;
    border-left: 2px solid var(--border);
}
.comment {
    display: flex; gap: 10px;
}
.comment-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-alt);
    flex-shrink: 0;
}
.comment-avatar--placeholder {
    display: inline-flex;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
    color: #1e3a8a;
    font-weight: 700;
    font-size: 15px;
}
.comment-body { flex: 1; min-width: 0; }
.comment-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 2px;
}
.comment-author { font-size: 14px; }
.comment-date   { font-variant-numeric: tabular-nums; }
.comment-delete-btn,
.comment-reply-btn {
    appearance: none; background: transparent; border: none;
    padding: 0; margin-left: auto;
    font: inherit; font-size: 12px; color: var(--muted);
    cursor: pointer;
}
.comment-reply-btn { margin-left: 6px; }
.comment-delete-btn:hover { color: #b91c1c; }
.comment-reply-btn:hover  { color: var(--accent); }
.comment-text {
    margin: 0;
    font-size: 14px; line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.comment.is-deleted .comment-text {
    color: var(--muted);
    font-style: italic;
}
.comment-empty { margin: 14px 0; }

/* ===== Toast (re-used by engagement IIFE) ===== */
.toast-stack {
    position: fixed;
    right: 20px; bottom: 20px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 10000;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 6px 20px rgba(20, 30, 60, 0.18);
    transform: translateY(8px);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
    background: #fff;
    color: var(--text);
}
.toast--show { transform: translateY(0); opacity: 1; }
.toast--ok   { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.toast--err  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Footer */
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 60px;
    padding: 24px 0;
    color: var(--muted);
    font-size: 14px;
}

/* ===========================================================================
   Explore page — three tabs (emojis | tags | locations) + filter banner
   =========================================================================== */
.explore-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border, #e5e7eb);
    margin-bottom: 22px;
}
.explore-tab {
    padding: 10px 16px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .12s, border-color .12s;
}
.explore-tab:hover { color: var(--text); text-decoration: none; }
.explore-tab.is-active {
    color: var(--accent, #c2410c);
    border-bottom-color: var(--accent, #c2410c);
}

.explore-grid {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding-bottom: 60px;
}
.explore-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--panel, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: border-color .12s, transform .12s, box-shadow .12s;
}
.explore-chip:hover {
    border-color: var(--accent, #c2410c);
    box-shadow: 0 2px 8px rgba(194, 65, 12, .08);
    transform: translateY(-1px);
    text-decoration: none;
}
.explore-chip .chip-emoji { font-size: 22px; line-height: 1; }
.explore-chip .chip-label { font-weight: 500; }
.explore-chip .chip-type {
    font-size: 11px; color: var(--muted);
    background: #f4f5f7; border-radius: 4px;
    padding: 2px 6px; text-transform: uppercase; letter-spacing: .04em;
}
.explore-chip .chip-count {
    font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums;
    background: #f4f5f7; border-radius: 999px;
    padding: 2px 8px; min-width: 24px; text-align: center;
}
/* Emojis tab: square-tile grid instead of pills. The whole tile is the
   target; emoji is huge, count tucked at the corner. Labels are intentionally
   not rendered (kept only as title= for hover / aria-label for screen readers). */
.explore-grid--emojis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
}
.explore-chip--emoji {
    position: relative;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 1;
    padding: 10px;
    border-radius: 12px;
    gap: 0;
}
.explore-chip--emoji .chip-emoji { font-size: 42px; line-height: 1; }
.explore-chip--emoji .chip-count {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,.05);
    padding: 1px 7px;
    font-size: 11px;
}

/* ===== /search filter sidebar ===== */
.search-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 48px;
}
@media (max-width: 900px) {
    .search-layout { grid-template-columns: 1fr; gap: 16px; }
}

.search-filters { min-width: 0; }
.search-filter-form {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    position: sticky; top: 76px;       /* under the sticky header */
}
.sf-group {
    border: 0; padding: 0;
    margin: 0 0 14px;
}
.sf-group > legend {
    padding: 0;
    margin: 0 0 6px;
    font-size: 12px; font-weight: 700;
    color: var(--muted, #5b6075);
    text-transform: uppercase; letter-spacing: .06em;
}
.sf-group:last-of-type { margin-bottom: 8px; }

.sf-text-wrap {
    display: flex; align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.sf-text-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41,86,214,.10);
}
.sf-text-wrap input {
    flex: 1; min-width: 0;
    border: 0;
    padding: 8px 10px;
    font: inherit; font-size: 14px;
    background: transparent;
}
.sf-text-wrap input:focus { outline: none; }
.sf-apply {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--muted, #6a6f80);
    font-size: 16px; line-height: 1;
    padding: 0 12px;
    cursor: pointer;
}
.sf-apply:hover { color: var(--accent); }

.sf-radio {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13.5px;
    transition: background .12s;
}
.sf-radio:hover { background: #f3f5fb; }
.sf-radio input { accent-color: var(--accent); }
.sf-radio:has(input:checked) {
    background: rgba(41,86,214,.07);
    color: var(--accent);
    font-weight: 600;
}

.sf-select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font: inherit; font-size: 14px;
}
.sf-select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41,86,214,.10);
}

.sf-reset {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted, #6a6f80);
    text-decoration: underline;
}
.sf-reset:hover { color: var(--accent); }

.sf-hint {
    margin-top: 10px;
    padding: 8px 10px;
    background: #fff8e1;
    border: 1px solid #f6c945;
    border-radius: 8px;
    color: #6b4a00;
    line-height: 1.4;
}

.search-results { min-width: 0; }

/* Multi-select checkboxes (length filter). Reuses .sf-radio look so
   the sidebar reads as one consistent control. */
.sf-check {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13.5px;
    transition: background .12s;
}
.sf-check:hover { background: #f3f5fb; }
.sf-check input { accent-color: var(--accent); }
.sf-check:has(input:checked) {
    background: rgba(41,86,214,.07);
    color: var(--accent);
    font-weight: 600;
}
.sf-note { margin: 6px 4px 0; font-style: italic; }

/* Tag autocomplete picker — same vocabulary as the languages picker
   on the onboarding page, scoped to the search sidebar. */
.sf-tagpicker { position: relative; }
.sf-tag-chips {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: 0 0 8px;
}
.sf-tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--accent, #2956d6); color: #fff;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    line-height: 1;
}
.sf-tag-chip-name { white-space: nowrap; }
.sf-tag-chip-x {
    appearance: none;
    background: rgba(255,255,255,.18);
    color: #fff; border: 0;
    width: 18px; height: 18px;
    border-radius: 999px;
    font-size: 13px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.sf-tag-chip-x:hover { background: rgba(255,255,255,.32); }

.sf-tag-combo { position: relative; }
.sf-tag-search {
    width: 100%; box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font: inherit; font-size: 13.5px;
}
.sf-tag-search:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41,86,214,.10);
}
.sf-tag-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20,30,60,.12);
    z-index: 30;
    max-height: 240px; overflow-y: auto;
    padding: 4px;
}
.sf-tag-item {
    width: 100%; text-align: left;
    appearance: none;
    background: transparent; border: 0;
    padding: 7px 10px;
    border-radius: 6px;
    font: inherit; font-size: 13px;
    cursor: pointer;
}
.sf-tag-item.is-active, .sf-tag-item:hover { background: #f3f5fb; }
.sf-tag-empty { padding: 8px 10px; color: var(--muted); font-size: 13px; }

/* Layout toggle row above the results — reuses the player-page
   .layout-toggle / .layout-btn classes but the wrapper variant
   floats right with a small margin below. */
.layout-toggle--cards {
    display: inline-flex;
    margin: 0 0 14px;
    float: right;
}
@media (max-width: 900px) {
    .layout-toggle--cards { float: none; display: inline-flex; margin-bottom: 10px; }
}

/* ── Layout variants for the .cards grid ── */
.cards--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cards--3col {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cards--rows {
    grid-template-columns: 1fr;
    gap: 12px;
}
.cards--rows .card-wrap { width: 100%; }
.cards--rows .card {
    display: flex; flex-direction: row;
    align-items: stretch;
}
.cards--rows .card-thumb {
    width: 220px; flex-shrink: 0;
    border-radius: 10px 0 0 10px;
}
.cards--rows .card-body {
    flex: 1; min-width: 0;
    padding: 12px 14px;
}
@media (max-width: 540px) {
    .cards--2col, .cards--rows {
        grid-template-columns: 1fr;
    }
    .cards--rows .card { flex-direction: column; }
    .cards--rows .card-thumb { width: 100%; border-radius: 10px 10px 0 0; }
}

/* ── Card wrapper + heart favorite button ── */
.card-wrap { position: relative; min-width: 0; }
.card-fav {
    position: absolute;
    top: 8px; right: 8px;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(20,30,60,.18);
    color: #aab0c4;       /* outline-grey when unliked */
    font-size: 16px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 2;
    transition: color .12s, background .12s, transform .08s;
}
.card-fav:hover  { color: #ef4444; background: #fff; }
.card-fav:active { transform: scale(.92); }
.card-fav.is-liked {
    color: #ef4444;       /* red heart when liked */
    background: #fff;
}
.card-fav-icon { display: block; }

/* Highlight inside card titles when search matched something. The
   |highlight filter wraps <mark> around each query word. */
.card-title mark {
    background: #fff3a3;
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

/* /search filter banner */
.search-filter-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 8px 0 4px;
    padding: 8px 12px;
    background: var(--accent-soft, #fff1ea);
    border-radius: 8px;
    font-size: 14px;
}
.search-filter-label { color: var(--muted); }
.search-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
}
.search-filter-chip .chip-emoji { font-size: 18px; line-height: 1; }
.search-filter-clear {
    color: var(--accent, #c2410c); font-weight: 500;
    text-decoration: none;
}
.search-filter-clear:hover { text-decoration: underline; }

/* ===========================================================================
   About page — single warm column with a big emoji
   =========================================================================== */
.about-page {
    padding: 24px 0 60px;
    background:
      radial-gradient(circle at 12% 0%,  rgba(194, 65, 12, .06), transparent 40%),
      radial-gradient(circle at 90% 90%, rgba(56, 161, 105, .05), transparent 45%);
}
.about-container { max-width: 720px; }
.about-hero { text-align: center; padding: 28px 0 18px; }
.about-emoji {
    font-size: clamp(96px, 22vw, 156px);
    line-height: 1;
    margin: 0 auto 14px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.08));
    transition: transform .3s ease;
}
.about-emoji:hover { transform: scale(1.05) rotate(-2deg); }
.about-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    color: var(--accent, #c2410c);
    font-weight: 700;
    margin: 0 0 6px;
}
.about-title {
    font-size: clamp(24px, 3.6vw, 32px);
    line-height: 1.25;
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--text);
}
.about-card {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 16px;
    padding: 32px 32px 28px;
    margin-top: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,.05);
    font-size: 17px;
    line-height: 1.7;
    color: var(--text);
}
.about-card p { margin: 0 0 18px; }
.about-card p:last-of-type { margin-bottom: 0; }
.about-lede {
    font-size: 19px !important;
    font-weight: 500;
    color: var(--accent, #c2410c);
    border-left: 3px solid var(--accent, #c2410c);
    padding-left: 14px;
    margin-bottom: 22px !important;
}
.about-cta-row {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin: 26px 0 18px;
}
.about-signature {
    margin-top: 20px !important;
    color: var(--muted);
    font-style: italic;
    font-size: 15px;
}
@media (max-width: 600px) {
    .about-card { padding: 24px 20px; font-size: 16px; }
    .about-lede { font-size: 17px !important; }
}

/* ===========================================================================
   Expanded footer — link rail above the tagline
   =========================================================================== */
.site-footer-links {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    margin-bottom: 12px;
}
.site-footer-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    padding: 4px 0;
    transition: color .12s;
}
.site-footer-links a:hover {
    color: var(--accent, #c2410c);
    text-decoration: none;
}
.site-footer-tagline {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    opacity: .85;
}