@font-face {
    font-family: "Geist";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2) format("woff2-variations");
}

:root {
    --bg:      hsl(220 25% 5%);
    --bg2:     hsl(220 20% 8%);
    --bg3:     hsl(220 18% 10%);
    --border:  hsl(220 18% 14%);
    --text:    hsl(180 10% 92%);
    --muted:   hsl(220 10% 45%);
    --accent:  hsl(172 66% 50%);
    --accent2: hsl(172 66% 65%);
    --green:   hsl(172 66% 50%);
    --red:     hsl(0 72% 51%);
    --code-bg: hsl(220 22% 7%);
    --radius: 10px;
    --shadow: 0 16px 40px hsl(0 0% 0% / .45);
    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-title: hsl(180 12% 96%);
    --text-meta: hsl(220 10% 58%);
    --text-label: hsl(220 8% 72%);
    --ease-ui: .18s ease;
    --focus-ring: 0 0 0 3px hsl(172 66% 50% / .22);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: hsl(220 18% 18%); }
::-webkit-scrollbar-thumb:hover { background: hsl(220 14% 28%); }
* { scrollbar-width: thin; scrollbar-color: hsl(220 18% 18%) var(--bg); }

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus, a:active { text-decoration: none; }

code {
    font-family: var(--font-mono);
    font-size: .92em;
    background: var(--code-bg);
    border: 1px solid var(--border);
    padding: 1px 5px;
}

/* Topbar */
nav.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: hsl(220 25% 5% / .85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
    padding: 12px 0;
}

.brand:hover { text-decoration: none; color: var(--text); }

.brand-mark {
    width: 22px;
    height: 22px;
    background: var(--accent);
    display: grid;
    place-items: center;
    color: hsl(220 25% 5%);
    font-size: 11px;
    font-weight: 800;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.nav-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--bg2);
    border: 1px solid var(--border);
    max-width: 100%;
    overflow-x: auto;
}

.nav-tabs a {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--muted);
    border: none;
    font: 500 12px var(--font-sans);
    letter-spacing: .02em;
    padding: 7px 14px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-tabs a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav-tabs a.active {
    background: var(--accent);
    color: hsl(220 25% 5%);
    font-weight: 600;
}

.sign-out {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    padding: 8px 0;
}

.sign-out:hover { color: var(--text); }

/* Page shell */
.page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 20px 64px;
    min-width: 0;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-head h1 {
    font-size: clamp(22px, 4vw, 28px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 6px 0 4px;
}

.back-link {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .02em;
}

.muted {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Stats */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.stat-grid-sm { max-width: 520px; }

.stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 14px 16px;
    min-width: 0;
}

.stat-val {
    display: block;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.stat-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin-top: 6px;
}

/* Cards & tables */
.card {
    background: var(--bg2);
    border: 1px solid var(--border);
    min-width: 0;
}

.table-card {
    overflow: hidden;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    text-align: left;
    padding: 11px 14px;
    background: var(--bg3);
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tr:hover td { background: hsl(220 18% 10% / .55); }
.data-table tr:last-child td { border-bottom: none; }
.data-table .empty {
    text-align: center;
    color: var(--muted);
    padding: 40px 16px;
    min-width: auto;
}

.cell-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    word-break: break-word;
}

.mono {
    font-family: var(--font-mono);
    font-size: 12px;
    word-break: break-all;
}

.row-actions { white-space: nowrap; }
.row-actions a {
    margin-left: 10px;
    font-size: 12px;
}

.row-actions a:first-child { margin-left: 0; }

.series-link {
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 12px;
    word-break: break-all;
}

.series-cell {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.series-cell-text {
    min-width: 0;
    padding-top: 4px;
}

.data-table .series-col {
    min-width: 260px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.thumb {
    width: 48px;
    height: 68px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--bg3);
    border: 1px solid var(--border);
    display: block;
    box-shadow: 0 2px 8px hsl(220 30% 4% / .35);
}

.thumb-list {
    width: 80px;
    height: 114px;
    border-radius: 10px;
}

.thumb-empty {
    background: linear-gradient(135deg, var(--bg3), var(--bg2));
}

.thumb-lg {
    width: 110px;
    height: 156px;
    border-radius: 10px;
}

.page-head-media {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

.page-head-media .thumb {
    width: 110px;
    height: 156px;
    border-radius: 12px;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid transparent;
}

.badge-pending { background: hsl(45 70% 50% / .12); color: hsl(45 80% 65%); border-color: hsl(45 70% 50% / .25); }
.badge-dl { background: hsl(210 70% 50% / .12); color: hsl(210 80% 70%); border-color: hsl(210 70% 50% / .25); }
.badge-proc { background: hsl(270 50% 55% / .12); color: hsl(270 60% 75%); border-color: hsl(270 50% 55% / .25); }
.badge-up { background: hsl(172 66% 50% / .12); color: var(--accent2); border-color: hsl(172 66% 50% / .25); }
.badge-done { background: hsl(172 66% 50% / .18); color: var(--accent); border-color: hsl(172 66% 50% / .35); }
.badge-skip { background: var(--bg3); color: var(--muted); border-color: var(--border); }
.badge-fail { background: hsl(0 72% 51% / .12); color: hsl(0 80% 70%); border-color: hsl(0 72% 51% / .25); }
.badge-muted { background: var(--bg3); color: var(--muted); border-color: var(--border); }

.tag {
    display: inline-block;
    padding: 2px 8px;
    background: hsl(172 66% 50% / .12);
    border: 1px solid hsl(172 66% 50% / .25);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Filters */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: stretch;
}

.filter-bar input,
.filter-bar select {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    font: 400 13px var(--font-sans);
    min-width: 0;
}

.filter-bar input[type=search] {
    flex: 1 1 180px;
    min-width: 0;
}

.filter-bar select { flex: 0 1 auto; }
.filter-bar input[name=media_id] { flex: 0 1 140px; }

/* Forms */
.form-grid {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.form-section {
    padding: 18px 20px;
    min-width: 0;
}

.form-section h2 {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.form-section.full { grid-column: 1 / -1; }

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    min-width: 0;
}

.field:last-child { margin-bottom: 0; }

.field span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    max-width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    font: 400 13px var(--font-sans);
    min-width: 0;
}

.field textarea {
    resize: vertical;
    min-height: 80px;
    word-break: break-word;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-top: 8px;
    font-size: 13px;
}

.checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text);
}

.help {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0;
    line-height: 1.55;
}

.form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 4px;
}

.code-block {
    background: var(--code-bg);
    border: 1px solid var(--border);
    padding: 14px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    max-height: 360px;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 600 13px var(--font-sans);
    padding: 10px 16px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    background: var(--bg3);
    border-color: var(--muted);
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: hsl(220 25% 5%);
}

.btn-primary:hover {
    background: var(--accent2);
    border-color: var(--accent2);
    color: hsl(220 25% 5%);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
}

.btn-ghost:hover {
    background: var(--bg3);
    border-color: var(--border);
    color: var(--text);
}

.btn-danger {
    background: hsl(0 72% 51% / .12);
    border-color: hsl(0 72% 51% / .35);
    color: hsl(0 80% 72%);
}

.btn-danger:hover {
    background: hsl(0 72% 51% / .2);
    border-color: hsl(0 72% 51% / .5);
}

.btn-block { width: 100%; }

/* Alerts */
.alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    border: 1px solid var(--border);
    line-height: 1.5;
}

.alert-ok {
    background: hsl(172 66% 50% / .08);
    border-color: hsl(172 66% 50% / .25);
    color: var(--accent2);
}

.alert-error {
    background: hsl(0 72% 51% / .08);
    border-color: hsl(0 72% 51% / .25);
    color: hsl(0 80% 72%);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
    font-size: 13px;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.pagination .page-item {
    list-style: none;
}

.pagination .page-link {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.pagination a.page-link:hover {
    background: var(--bg3);
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.pagination .page-item.active .page-link {
    background: hsl(172 66% 50% / .14);
    border-color: var(--accent);
    color: var(--accent);
}

.pagination .page-item.disabled .page-link,
.pagination .page-item.ellipsis .page-link {
    color: var(--muted);
    opacity: .45;
    cursor: default;
}

.ku-number-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 22px 0 8px;
}

@media (max-width: 520px) {
    .ku-number-pagination .pagination {
        gap: 3px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        max-width: 100%;
        padding: 0 2px;
        scrollbar-width: none;
    }

    .ku-number-pagination .pagination::-webkit-scrollbar {
        display: none;
    }

    .pagination .page-link {
        min-width: 30px;
        height: 30px;
        padding: 0 6px;
        font-size: 12px;
    }

    .pagination .page-edge {
        display: none;
    }
}

/* Auth */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 32px 28px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 24px;
}

.auth-brand .brand-mark {
    margin: 0 auto 14px;
}

.auth-brand h1 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 6px;
}

.auth-brand p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: hsl(172 66% 50% / .1);
    border: 1px solid hsl(172 66% 50% / .3);
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 11px;
    margin-bottom: 16px;
}

.auth-card .btn-block { margin-top: 8px; }

/* Footer */
.site-footer {
    margin-top: 28px;
    border-top: 1px solid var(--border);
    background: var(--bg2);
    padding: 28px 20px 24px;
}

.site-footer__inner {
    max-width: 1320px;
    margin: 0 auto;
}

.site-footer__az { margin-bottom: 32px; }

.azlist-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.azlist-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.azlist-desc {
    color: var(--muted);
    font-size: .95rem;
}

.azlist-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.azlist-links a {
    display: block;
    padding: 4px 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--muted);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
}

.azlist-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: hsl(172 66% 50% / .08);
}

.site-footer__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 56px;
    margin-bottom: 28px;
}

.footer-logo {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.footer-socials a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.site-footer__links label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-menu a {
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
}

.footer-menu a:hover { color: var(--accent); }

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

/* Responsive */
@media (max-width: 900px) {
    .field-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    nav.topbar {
        padding: 10px 14px;
    }

    .topbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .nav-tabs {
        flex: 1;
    }

    .page {
        padding: 20px 14px 48px;
    }

    .page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .btn {
        flex: 1;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

    .filter-bar .btn,
    .filter-bar .btn-ghost {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }

    .form-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .data-table {
        min-width: 560px;
    }
}

@media (max-width: 420px) {
    .sign-out { display: none; }

    .nav-tabs a {
        padding: 7px 10px;
        font-size: 11px;
    }

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

/* ============================================================
   Streaming homepage (home2nd-style layout)
   ============================================================ */

.page-wide { max-width: 1320px; }

/* Instant navigation (PJAX) */
.instant-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 980;
    background: hsl(220 14% 18%);
    overflow: hidden;
    pointer-events: none;
}

.instant-nav-bar::after {
    content: "";
    display: block;
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: translateX(-120%);
    animation: instant-nav-slide 0.9s ease infinite;
}

@keyframes instant-nav-slide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

body.instant-nav-loading #app-main {
    opacity: .72;
    pointer-events: none;
    transition: opacity .15s ease;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: hsl(220 25% 5% / .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.site-header .brand { padding: 10px 0; font-size: 13px; }

.site-header .brand-logo {
    height: 38px;
    max-height: 38px;
}

.nav-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.nav-toggle > *,
.nav-toggle span {
    pointer-events: none;
}

.nav-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    transition: transform .2s;
}

.site-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.site-menu a {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 11px;
    white-space: nowrap;
    text-decoration: none;
}

.site-menu a:hover,
.site-menu a.active {
    color: var(--text);
    text-decoration: none;
}

.site-menu a.active { color: var(--accent); }

.header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg3);
    border: 1px solid var(--border);
    padding: 0 12px;
    min-width: 180px;
    max-width: 280px;
    flex: 1;
}

.header-search input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 10px 0;
    font: 400 13px var(--font-sans);
    min-width: 0;
}

.header-search input:focus { outline: none; }

.header-search i { color: var(--muted); font-size: 13px; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lang-switch {
    display: flex;
    border: 1px solid var(--border);
    background: var(--bg2);
    overflow: hidden;
}

.lang-switch button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: 600 11px var(--font-sans);
    padding: 7px 10px;
    cursor: pointer;
}

.lang-switch button.active {
    background: hsl(172 66% 50% / .12);
    border-color: hsl(172 66% 50% / .4);
    color: var(--accent);
}

/* Hero slider */
.hero {
    position: relative;
    height: clamp(320px, 52vh, 520px);
    overflow: hidden;
    margin-bottom: 24px;
}

.hero-track {
    position: relative;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}

.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.hero-slide__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}

.hero-slide__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, hsl(220 25% 5% / .95) 0%, hsl(220 25% 5% / .55) 45%, transparent 75%),
        linear-gradient(0deg, hsl(220 25% 5%) 0%, transparent 40%);
}

.hero-slide__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: 48px;
    overflow: hidden;
}

.hero-slide__info {
    max-width: 560px;
    min-width: 0;
    overflow: hidden;
}

.hero-slide__title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.hero-slide__content .page {
    width: 100%;
    padding: 0 20px;
}

.hero-slide__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.hero-slide__synopsis {
    color: hsl(180 10% 78%);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-nav {
    position: absolute;
    bottom: 18px;
    right: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-arrow {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: hsl(220 20% 8% / .8);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.hero-arrow:hover { border-color: var(--accent); color: var(--accent); }

.hero-dots {
    display: flex;
    gap: 6px;
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.hero-dots button,
.hero-dot {
    width: 8px;
    height: 8px;
    border: 0;
    background: hsl(220 10% 35%);
    cursor: pointer;
    padding: 0;
}

.hero-dots button.active,
.hero-dot.active { background: var(--accent); width: 22px; }

/* Home layout */
.home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

.home-main { min-width: 0; }
.home-sidebar { min-width: 0; position: sticky; top: 74px; }

/* Sections */
.stream-section { margin-bottom: 28px; }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.section-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
}

.section-head h2 {
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--text-title);
}

.section-more {
    font-size: 12px;
    color: var(--text-meta);
    white-space: nowrap;
}

.section-more:hover { color: var(--accent); text-decoration: none; }

.section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.section-tabs button,
.section-tabs [data-tab] {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font: 500 12px var(--font-sans);
    padding: 6px 11px;
    cursor: pointer;
    text-decoration: none;
}

.section-tabs button:hover,
.section-tabs [data-tab]:hover {
    color: var(--text);
    text-decoration: none;
}

.section-tabs button.active,
.section-tabs [data-tab].active {
    background: var(--bg3);
    border-color: var(--border);
    color: var(--accent);
}

.carousel-wrap { position: relative; }

.carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 160px);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-paging {
    display: flex;
    gap: 4px;
}

.carousel-paging button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
}

.carousel-paging button:hover { border-color: var(--accent); color: var(--accent); }

/* Anikoto-style poster grid + ep-status metas */
.ani.items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    min-height: 120px;
    transition: opacity .2s;
}

.ani.items.is-loading {
    opacity: .45;
    pointer-events: none;
}

.ani.items .item { min-width: 0; }

.ani.items .item .info { margin-top: 8px; }

.ani.items .item .info .name {
    display: block;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--text-title);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ani.items .item .info .name:hover {
    color: var(--accent);
    text-decoration: none;
}

/* Default grid: title only (Anikoto hides genre/meta outside list modes) */
.ani.items .item .info .genre,
.ani.items .item .info > .meta {
    display: none;
}

.ani.poster {
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: var(--bg3);
    border: 1px solid var(--border);
}

.ani.poster .adult,
.ani.poster > a .adult {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 16px;
    padding: 0 5px;
    border-radius: 3px;
    background: #e04b59;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
    letter-spacing: .02em;
}

/* Grid cards: top-left so it doesn't clash with poster-actions */
.ani.items .item .ani.poster .adult,
.ani.items .item .ani.poster > a .adult {
    left: 5px;
    right: auto;
}

.ani.poster > a {
    display: block;
    width: 100%;
    padding-bottom: 140%;
    position: relative;
    z-index: 3;
    text-decoration: none;
}

.ani.poster > a img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.ani.poster > a::before {
    content: "";
    background: hsl(220 25% 5% / .55);
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .3s;
}

.ani.poster > a::after {
    width: 46px;
    height: 46px;
    margin-left: -23px;
    margin-top: -23px;
    content: "\f04b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: 3;
    color: #fff;
    font-size: 18px;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .3s;
    text-shadow: 0 2px 8px hsl(220 30% 4% / .6);
}

.ani.poster:hover > a::before,
.ani.poster:hover > a::after,
.ani.poster > a:hover::before,
.ani.poster > a:hover::after,
.ani.poster > a:focus-visible::before,
.ani.poster > a:focus-visible::after {
    opacity: 1;
}

.ani.poster:hover > a img,
.ani.poster > a:hover img { transform: scale(1.04); }

.ani.items .item .poster .meta {
    background: hsl(220 22% 12%);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-meta);
    z-index: 4;
}

.ani.items .item .poster .meta .inner {
    position: relative;
    padding: 0 5px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.ani.items .item .poster .meta .inner .left {
    flex-grow: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.ani.items .item .poster .meta .inner .right {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    padding-left: 6px;
}

/* ep-status badges (Anikoto-style) */
.ep-status {
    padding: 0 3px;
    position: relative;
    height: 16px;
    line-height: 16px;
    margin-right: 4px;
    display: inline-block;
    border-radius: 1.5px;
    vertical-align: 0;
    font-size: 10px;
    flex-shrink: 0;
}

.ep-status > span {
    position: relative;
    z-index: 3;
    font-size: 1em !important;
    line-height: inherit !important;
    font-weight: 600 !important;
}

.ep-status::before {
    position: absolute;
    left: -2.5px;
    top: 0;
    width: calc(100% + 5px);
    height: 16px;
    content: "";
    transform: skewX(345deg);
    border-radius: 1.5px;
}

.ep-status:first-child {
    padding-left: 4px;
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
}

.ep-status:first-child::before {
    left: 7.5px;
    width: calc(100% - 5px);
}

.ep-status.sub,
.ep-status.sub > span { color: rgba(255, 255, 255, .85) !important; }

.ep-status.sub > span::before {
    content: "\f20a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 3px;
    font-size: .85em;
}

.ep-status.sub::before { background: #0084b9; }

.ep-status.dub,
.ep-status.dub > span { color: rgba(255, 255, 255, .85) !important; }

.ep-status.dub > span::before {
    content: "\f130";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 3px;
    font-size: .85em;
}

.ep-status.dub::before { background: #b1495c; }

.ep-status.total,
.ep-status.total > span { color: rgba(255, 255, 255, .65) !important; }

.ep-status.total::before { background: hsl(220 18% 18%); }

.ep-meta-inline .ep-status {
    height: 15px;
    line-height: 15px;
    font-size: 9px;
}

.ep-meta-inline .ep-status::before { height: 15px; }

/* Hero slide meta icons */
.meta.icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: hsl(220 10% 72%);
}

.meta.icons i {
    font-style: normal;
    vertical-align: middle;
    opacity: .85;
    line-height: 1;
}

.meta.icons i.quality {
    font-weight: 700;
    background: hsl(220 10% 72%);
    display: inline-flex;
    align-items: center;
    padding: 3px 5px;
    font-size: 9px;
    color: hsl(220 25% 8%);
    border-radius: 3px;
}

.meta.icons i.rating {
    border: 1px solid hsl(220 10% 72%);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 10px;
}

.meta.icons i.sub { font-size: 14px; color: #0084b9; }
.meta.icons i.dub { font-size: 13px; color: #b1495c; }
.meta.icons i.date { font-size: 12px; color: var(--muted); }

/* legacy alias */
.anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    min-height: 120px;
    transition: opacity .2s;
}

.anime-grid.is-loading {
    opacity: .45;
    pointer-events: none;
}

.stream-section.is-loading .section-paging button {
    pointer-events: none;
    opacity: .5;
}

.section-paging {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.section-paging--bottom {
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
}

.section-paging .page-info,
.archive-paging .page-info {
    display: none;
}

.section-paging button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.section-paging button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.section-paging button.disabled,
.section-paging button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Top tables panel */
.panel-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.panel-tabs [data-tab] {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
}

.panel-tabs [data-tab].active {
    color: var(--accent);
    border-color: var(--border);
    background: var(--bg3);
}

.table-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.table-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.table-row:hover {
    border-color: hsl(172 66% 50% / .35);
    text-decoration: none;
}

.table-poster {
    width: 48px;
    height: 68px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.table-info { min-width: 0; }

.table-title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-meta {
    font-size: 11px;
    color: var(--muted);
}

/* Sidebar rank list */
.rank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.rank-item:hover {
    border-color: hsl(172 66% 50% / .3);
    text-decoration: none;
}

.rank-num {
    width: 22px;
    font: 800 14px var(--font-mono);
    color: var(--muted);
    flex-shrink: 0;
    text-align: center;
}

.rank-item.rank-1 .rank-num { color: var(--accent); }
.rank-item.rank-2 .rank-num { color: hsl(210 80% 70%); }
.rank-item.rank-3 .rank-num { color: hsl(45 80% 65%); }

.rank-poster {
    width: 42px;
    height: 58px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.rank-info { min-width: 0; }

.rank-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.rank-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.rank-meta .ep-status {
    margin-right: 0;
    height: 14px;
    line-height: 14px;
    font-size: 9px;
}

.rank-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-left: 2px;
}

/* Discussion strip */
.discussion-card {
    padding: 14px;
}

.discussion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.discussion-head h3 {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.discussion-head h3 i { color: var(--accent); }

.discussion-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.discussion-item:last-child { border-bottom: 0; }

.discussion-item strong { color: var(--accent2); font-weight: 600; }

.discussion-item .muted { font-size: 11px; margin-top: 4px; }

.home-bookmark-alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
}

.home-bookmark-alert__body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    line-height: 1.45;
    flex: 1;
}

.home-bookmark-alert__body i {
    color: var(--accent);
    margin-top: 2px;
    flex-shrink: 0;
}

.home-bookmark-alert__body span {
    min-width: 0;
}

.home-bookmark-alert__body a {
    color: var(--accent);
    text-decoration: underline;
}

.home-bookmark-alert__close,
.site-notice__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid hsl(172 66% 50% / .22);
    border-radius: 999px;
    background: transparent;
    color: var(--accent2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.home-bookmark-alert__close:hover,
.site-notice__close:hover {
    background: hsl(172 66% 50% / .12);
    border-color: hsl(172 66% 50% / .35);
    color: var(--accent);
}

.share-banner {
    position: relative;
    z-index: 1;
    padding: 10px 14px;
    margin-bottom: 14px;
    isolation: isolate;
}

.share-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.share-banner__info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.share-banner__gif {
    width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    border-radius: calc(var(--radius) - 2px);
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--border);
    background: var(--bg3);
    display: block;
}

.share-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.share-banner__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.25;
}

.share-banner__sub {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.25;
}

.share-banner__buttons {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .share-banner {
        padding: 10px 12px;
    }

    .share-banner__inner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .share-banner__info {
        justify-content: center;
        margin-bottom: 0;
    }

    .share-banner__gif {
        width: 2rem;
        height: 2rem;
    }

    .share-banner__buttons {
        justify-content: center;
    }
}

.share-banner .sharethis-inline-share-buttons,
.share-banner .st-inline-share-buttons,
.share-banner [id^="st-"] {
    position: relative !important;
    z-index: 1 !important;
}

.share-banner .sharethis-inline-share-buttons {
    display: inline-flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    line-height: 0;
    min-height: 0;
}

.share-banner .sharethis-inline-share-buttons .st-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg3) !important;
    box-shadow: none !important;
    overflow: hidden;
    opacity: .9;
    line-height: 0 !important;
    vertical-align: middle !important;
    float: none !important;
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease !important;
}

body.sidebar-open .share-banner,
body.sidebar-open .share-banner .sharethis-inline-share-buttons,
body.sidebar-open .share-banner .sharethis-inline-share-buttons .st-btn,
body.sidebar-open .share-banner .st-inline-share-buttons,
body.sidebar-open .share-banner [id^="st-"] {
    z-index: 0 !important;
}

.share-banner .sharethis-inline-share-buttons .st-btn:hover {
    transform: translateY(-2px);
    border-color: hsl(172 66% 50% / .55) !important;
    background: hsl(172 66% 50% / .14) !important;
    opacity: 1;
}

.share-banner .sharethis-inline-share-buttons .st-btn img {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    filter: grayscale(1) brightness(1.8);
    opacity: .9;
}

.share-banner .sharethis-inline-share-buttons .st-label {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 640px) {
    .share-banner__inner {
        flex-direction: column;
        gap: 8px;
    }

    .share-banner__label {
        font-size: 11px;
    }
}

.home-schedule {
    margin-top: 0;
}

.home-schedule .schedule-block--widget {
    max-width: none;
    margin: 0;
}

@media (max-width: 1024px) {
    .home-layout {
        grid-template-columns: 1fr;
    }

    .home-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    #recent-update .section-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    #recent-update .section-head h2 {
        width: 100%;
        text-align: center;
    }

    #recent-update .section-head-right {
        margin-left: 0;
        justify-content: center;
        width: 100%;
    }

    #recent-update .section-tabs {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .nav-toggle { display: flex; }

    .site-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--bg2);
        border-bottom: 1px solid var(--border);
        padding: 10px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .hero {
        height: clamp(240px, 44vh, 380px);
    }

    .hero-slide__bg {
        background-size: cover;
        background-position: center 22%;
    }

    .hero-slide__shade {
        background:
            linear-gradient(0deg, hsl(220 25% 5% / .9) 0%, hsl(220 25% 5% / .4) 50%, transparent 100%),
            linear-gradient(90deg, hsl(220 25% 5% / .8) 0%, transparent 65%);
    }

    .hero-slide__content { padding-bottom: 56px; }

    .anime-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ── Search popup ── */
.header-search-wrap {
    position: relative;
    flex: 1 1 320px;
    max-width: 520px;
    min-width: 260px;
}

.header-search {
    position: relative;
    width: 100%;
}

.header-search #search-btn,
.header-search .search-close {
    background: none;
    border: 0;
    color: var(--muted);
    padding: 0 8px;
    cursor: pointer;
    min-width: 36px;
    min-height: 36px;
    display: grid;
    place-items: center;
}

.header-search .search-close { display: none; }

.header-icon-btn,
.header-search-toggle,
.search-toggle,
.ku-user-btn--bell,
.ku-user-btn--avatar,
.header-sign-in {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}

.header-icon-btn:hover,
.header-search-toggle:hover,
.search-toggle:hover,
.header-search-toggle[aria-expanded="true"],
.search-toggle[aria-expanded="true"],
.ku-user-btn--bell:hover,
.ku-user-btn--avatar:hover,
.header-sign-in:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: hsl(172 66% 50% / .08);
}

.ku-user-btn--bell {
    position: relative;
}

.ku-user-btn--avatar {
    border-radius: 50%;
    overflow: hidden;
}

.ku-user-btn--avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watch-share.share-banner {
    margin: 12px 0 4px;
}

.search-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px hsl(0 0% 0% / .45);
    z-index: 200;
    max-height: 420px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.search-popup[hidden] { display: none !important; }

.search-popup__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
}

.search-popup__clear {
    background: none;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    font-size: 11px;
}

.search-popup__body {
    overflow-y: auto;
    max-height: 320px;
}

.search-popup__foot {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
}

.search-popup__more {
    font-size: 12px;
    color: var(--accent);
}

.search-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.search-item:hover {
    background: var(--bg3);
    text-decoration: none;
}

.search-item img {
    width: 40px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.search-item__title {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.search-item__meta {
    font-size: 11px;
    color: var(--muted);
}

.search-empty, .search-loading {
    padding: 16px;
    font-size: 13px;
}

#search.search-active .header-search {
    border-color: hsl(172 66% 50% / .4);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 12px;
}

.user-chip img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* ── Modal (login) ── */
.modal[hidden] { display: none !important; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: hsl(0 0% 0% / .65);
}

.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.modal-panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.modal-body { padding: 18px; }

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-form .field span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.modal-form input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}

.modal-switch, .modal-form .help {
    font-size: 13px;
    color: var(--muted);
    margin-top: 14px;
}

.modal-lead {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
}

.modal-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-text-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: 600 12px/1.2 var(--font-sans);
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.modal-text-link:hover {
    color: var(--accent);
}

.modal-alt {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-alt__label {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

.modal-alt__btn {
    background: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-weight: 700;
    min-height: 42px;
}

.modal-alt__btn:hover {
    border-color: hsl(172 66% 50% / .45) !important;
    color: var(--accent) !important;
}

.modal-captcha {
    display: flex;
    justify-content: center;
    margin: 4px 0 2px;
    min-height: 0;
}

.modal-captcha > div {
    transform-origin: center top;
}

#sign .g-recaptcha,
#sign .h-captcha {
    display: inline-block;
}

.checks {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.modal-form .form-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.modal-form .form-remember input[type="hidden"] {
    display: none !important;
}

.modal-form .form-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
}

.modal-form .form-remember label {
    margin: 0;
    cursor: pointer;
    color: var(--text);
}

.modal-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.modal-social .btn-social {
    flex: 1;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    background: var(--bg3);
    color: var(--text) !important;
}

.modal-social .btn-social--google {
    background: hsl(4 75% 48% / .15);
    border-color: hsl(4 75% 48% / .35);
    color: hsl(4 80% 72%) !important;
}

.modal-social .btn-social--facebook {
    background: hsl(221 44% 41% / .15);
    border-color: hsl(221 44% 41% / .35);
    color: hsl(221 60% 72%) !important;
}

.modal-social .btn-social:hover {
    filter: brightness(1.08);
}

body.modal-open { overflow: hidden; }

.btn-block { width: 100%; }

/* ── Schedule page ── */
.page-schedule { padding-top: 8px; }

.schedule-hero {
    text-align: center;
    padding: 28px 18px 20px;
}

.schedule-hero__title {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.schedule-hero__subtitle {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--muted);
}

.schedule-hero__clock {
    display: inline-block;
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-mono);
}

.schedule-section {
    padding: 0 18px 32px !important;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Info / legal pages (Terms, Privacy, DMCA, Contact) */
.ku-info-page {
    padding-top: 12px;
}

.ku-breadcrumb {
    margin-bottom: 18px;
}

.ku-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: var(--muted);
}

.ku-breadcrumb__list li + li::before {
    content: "/";
    margin: 0 10px;
    color: hsl(220 10% 40%);
}

.ku-breadcrumb__list a {
    color: var(--muted);
    text-decoration: none;
    transition: color .15s ease;
}

.ku-breadcrumb__list a:hover {
    color: var(--accent);
}

.ku-breadcrumb__list li[aria-current="page"] {
    color: var(--text-title);
    font-weight: 600;
}

.ku-info-head {
    text-align: center;
    margin-bottom: 22px;
}

.ku-info-head h1 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ku-info-lead {
    margin: 0 auto;
    max-width: 520px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
}

.ku-info-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: clamp(20px, 4vw, 32px);
    max-width: 820px;
    margin: 0 auto;
}

.ku-info-page--contact .ku-info-card {
    max-width: 560px;
}

.ku-prose {
    color: hsl(180 8% 78%);
    font-size: 15px;
    line-height: 1.75;
}

.ku-prose > :first-child {
    margin-top: 0;
}

.ku-prose h1,
.ku-prose h2,
.ku-prose h3,
.ku-prose h4 {
    color: var(--text-title);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 1.5em 0 0.6em;
    line-height: 1.3;
}

.ku-prose h1 { font-size: clamp(1.35rem, 3vw, 1.65rem); }
.ku-prose h2 { font-size: clamp(1.08rem, 2.5vw, 1.28rem); }
.ku-prose h3 { font-size: 1.05rem; }

.ku-prose p {
    margin: 0 0 14px;
}

.ku-prose p:last-child {
    margin-bottom: 0;
}

.ku-prose ul,
.ku-prose ol {
    margin: 0 0 16px;
    padding-left: 1.4em;
}

.ku-prose li + li {
    margin-top: 6px;
}

.ku-prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ku-prose a:hover {
    color: hsl(172 66% 58%);
}

.ku-prose strong,
.ku-prose b {
    color: var(--text-title);
    font-weight: 650;
}

.ku-contact-form .form-group {
    margin-bottom: 14px;
}

.ku-contact-form .form-control {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg3);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ku-contact-form .form-control:focus {
    outline: none;
    border-color: hsl(172 66% 50% / .55);
    box-shadow: 0 0 0 3px hsl(172 66% 50% / .12);
}

.ku-contact-form textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.ku-contact-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.ku-contact-form .form-check-input {
    margin-top: 3px;
    flex-shrink: 0;
}

.ku-contact-form .btn-primary {
    width: 100%;
    margin-top: 6px;
    min-height: 44px;
    position: relative;
}

.ku-contact-form .btn-primary.is-loading {
    opacity: .85;
    pointer-events: none;
}

.ku-contact-form .btn-primary.is-loading::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid hsl(220 25% 5% / .2);
    border-top-color: hsl(220 25% 5%);
    border-radius: 50%;
    animation: ku-spin .65s linear infinite;
}

.ku-form-feedback {
    margin-bottom: 12px;
}

.ku-form-feedback:empty {
    display: none;
}

.ku-contact-form .alert {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
}

.ku-contact-form .alert-success {
    background: hsl(152 60% 40% / .12);
    border: 1px solid hsl(152 60% 40% / .35);
    color: hsl(152 50% 72%);
}

.ku-contact-form .alert-danger {
    background: hsl(0 60% 50% / .12);
    border: 1px solid hsl(0 60% 50% / .35);
    color: hsl(0 55% 72%);
}

@media (max-width: 640px) {
    .ku-info-card {
        padding: 18px 16px;
        border-radius: 10px;
    }

    .ku-prose {
        font-size: 14px;
    }
}

.schedule-block--page { max-width: 920px; margin: 0 auto; }

.schedule-block--page .schedule-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    margin-bottom: 28px;
    justify-content: center;
}

.schedule-block--page .schedule-day {
    min-width: 0;
    width: 100%;
    padding: 12px 8px 10px;
}

.schedule-days {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 22px;
    padding: 4px 2px 8px;
    scrollbar-width: none;
}

.schedule-days::-webkit-scrollbar { display: none; }

.schedule-day {
    flex-shrink: 0;
    min-width: 52px;
    padding: 10px 12px 8px;
    background: hsl(220 14% 12% / .65);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, background .2s, transform .15s;
}

.schedule-day:hover {
    border-color: hsl(172 66% 50% / .35);
    background: hsl(172 66% 50% / .06);
}

.schedule-day.active {
    border-color: var(--accent);
    background: hsl(172 66% 50% / .12);
    box-shadow: 0 0 0 1px hsl(172 66% 50% / .15);
}

.schedule-day__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--muted);
}

.schedule-day.active .schedule-day__label { color: var(--accent); }

.schedule-day.is-past:not(.active) {
    opacity: .55;
}

.schedule-day.is-past:not(.active) .schedule-day__label,
.schedule-day.is-past:not(.active) .schedule-day__date {
    color: var(--muted);
}

.schedule-day__date {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 4px;
}

.schedule-body {
    transition: opacity .2s;
}

.schedule-body.is-loading { opacity: .45; pointer-events: none; }

.schedule-timeline {
    display: flex;
    flex-direction: column;
}

/* Each row: time (left) | timeline (center) | card (right) */
.schedule-entry {
    display: grid;
    grid-template-columns: 96px 28px minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
    margin-bottom: 4px;
}

.schedule-entry__left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-top: 18px;
    text-align: right;
}

.schedule-entry__clock {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    font-family: var(--font-mono);
}

.schedule-entry__clock em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .04em;
}

.schedule-entry__live {
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    color: hsl(0 85% 72%);
    background: hsl(0 72% 42% / .22);
    border: 1px solid hsl(0 72% 48% / .4);
}

.schedule-entry__live.is-aired {
    color: hsl(220 10% 62%);
    background: hsl(220 14% 18% / .9);
    border-color: hsl(220 14% 26%);
}

.schedule-entry__live.is-upnext {
    color: hsl(172 66% 58%);
    background: hsl(172 66% 50% / .14);
    border-color: hsl(172 66% 50% / .38);
}

.schedule-entry.is-next .schedule-entry__node {
    border-color: hsl(172 66% 50% / .75);
    box-shadow: 0 0 0 4px hsl(172 66% 50% / .14), 0 0 10px hsl(172 66% 50% / .22);
}

.schedule-entry.is-next .schedule-entry__card {
    border-color: hsl(172 66% 50% / .35);
    box-shadow: 0 0 0 1px hsl(172 66% 50% / .12);
}

.schedule-entry__track {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 100%;
}

.schedule-entry__track::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: hsl(220 14% 24%);
}

.schedule-entry:first-child .schedule-entry__track::before { top: 22px; }

.schedule-entry:last-child .schedule-entry__track::before { bottom: 20px; }

.schedule-entry__node {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-top: 20px;
    border-radius: 50%;
    background: hsl(220 16% 10%);
    border: 2px solid hsl(220 14% 34%);
    box-shadow: 0 0 0 4px hsl(220 14% 8% / .9);
}

.schedule-entry.is-airing .schedule-entry__node {
    border-color: hsl(0 72% 55%);
    box-shadow: 0 0 0 4px hsl(0 72% 45% / .18), 0 0 10px hsl(0 72% 45% / .35);
}

.schedule-entry.is-passed .schedule-entry__clock {
    color: hsl(220 10% 58%);
}

.schedule-entry.is-passed .schedule-entry__node {
    border-color: hsl(220 14% 28%);
    background: hsl(220 14% 14%);
    box-shadow: 0 0 0 4px hsl(220 14% 8% / .9);
    opacity: .75;
}

.schedule-entry__card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: hsl(220 14% 11% / .95);
    border: 1px solid hsl(220 14% 20%);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color .2s, transform .15s, box-shadow .2s;
}

.schedule-entry__card:hover {
    border-color: hsl(172 66% 50% / .4);
    box-shadow: 0 8px 24px hsl(0 0% 0% / .28);
    text-decoration: none;
    transform: translateY(-1px);
}

.schedule-entry.is-airing .schedule-entry__card {
    border-color: hsl(0 72% 48% / .35);
    box-shadow: inset 3px 0 0 hsl(0 72% 52%);
}

.schedule-entry.is-passed .schedule-entry__card {
    opacity: .78;
    border-color: hsl(220 14% 18%);
    background: hsl(220 14% 9% / .92);
    box-shadow: inset 3px 0 0 hsl(220 14% 24%);
}

.schedule-entry.is-passed .schedule-entry__card:hover {
    opacity: .9;
    border-color: hsl(220 14% 26%);
    transform: none;
}

.schedule-entry.is-passed .schedule-entry__poster {
    filter: grayscale(.45) brightness(.88);
}

.schedule-entry.is-passed .schedule-entry__title,
.schedule-entry.is-passed .schedule-entry__ep,
.schedule-entry.is-passed .schedule-entry__synopsis {
    color: hsl(220 10% 62%);
}

.schedule-entry__poster {
    flex-shrink: 0;
    width: 88px;
    height: 124px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--bg);
    box-shadow: 0 4px 14px hsl(0 0% 0% / .3);
}

.schedule-entry__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.schedule-entry__title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

.schedule-entry__ep {
    font-size: 12px;
    font-weight: 700;
    color: hsl(172 66% 58%);
}

.schedule-entry__synopsis {
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.schedule-entry__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.schedule-entry__tag {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    background: hsl(220 14% 16%);
    border: 1px solid var(--border);
}

.schedule-loading { max-width: 920px; margin: 0 auto; }

.schedule-skeleton-day {
    height: 52px;
    border-radius: 12px;
    margin-bottom: 20px;
    background: linear-gradient(90deg, hsl(220 14% 14%), hsl(220 14% 18%), hsl(220 14% 14%));
    background-size: 200% 100%;
    animation: schedule-shimmer 1.2s ease infinite;
}

.schedule-skeleton-list { display: flex; flex-direction: column; gap: 14px; }

.schedule-skeleton-item {
    height: 118px;
    border-radius: 14px;
    background: linear-gradient(90deg, hsl(220 14% 12%), hsl(220 14% 16%), hsl(220 14% 12%));
    background-size: 200% 100%;
    animation: schedule-shimmer 1.2s ease infinite;
}

@keyframes schedule-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 768px) {
    .schedule-block--page .schedule-days {
        display: flex;
        overflow-x: auto;
        gap: 6px;
    }

    .schedule-block--page .schedule-day {
        min-width: 52px;
        width: auto;
    }
}

@media (max-width: 900px) {
    .page-schedule .schedule-entry {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "time"
            "track"
            "card";
        gap: 0;
        margin-bottom: 22px;
        justify-items: center;
        text-align: center;
    }

    .page-schedule .schedule-entry__left {
        grid-area: time;
        align-items: center;
        text-align: center;
        padding-top: 0;
        width: 100%;
    }

    .page-schedule .schedule-entry__track {
        grid-area: track;
        min-height: 34px;
        width: 100%;
    }

    .page-schedule .schedule-entry__track::before {
        top: 0;
        bottom: 0;
    }

    .page-schedule .schedule-entry__node {
        margin-top: 0;
    }

    .page-schedule .schedule-entry__card {
        grid-area: card;
        width: min(100%, 360px);
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 auto 0;
    }

    .page-schedule .schedule-entry__body {
        align-items: center;
    }

    .page-schedule .schedule-entry__tags {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .schedule-hero { padding: 20px 14px 16px; }

    .schedule-section { padding: 0 12px 24px !important; }

    .page-schedule .schedule-entry__clock { font-size: 13px; }

    .page-schedule .schedule-entry__card {
        flex-direction: column;
        gap: 12px;
        padding: 12px 14px;
    }

    .page-schedule .schedule-entry__poster {
        width: 72px;
        height: 102px;
    }

    .page-schedule .schedule-entry__synopsis { -webkit-line-clamp: 3; }
}

.schedule-block--widget .schedule-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow: hidden;
    transition: max-height .25s;
}

.schedule-block--widget .schedule-body.expand { max-height: 800px; }

.home-schedule.schedule-section {
    padding: 16px 18px !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.schedule-block h2 {
    font-size: 15px;
    font-weight: 700;
}

.schedule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.schedule-now {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-mono);
}

.schedule-item {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.schedule-item:hover { border-color: hsl(172 66% 50% / .3); text-decoration: none; }

.schedule-item.is-passed {
    opacity: .7;
    background: hsl(220 14% 9% / .85);
    border-color: hsl(220 14% 18%);
}

.schedule-item.is-passed:hover {
    opacity: .85;
    border-color: hsl(220 14% 24%);
}

.schedule-item.is-passed img {
    filter: grayscale(.45) brightness(.9);
}

.schedule-item.is-passed .schedule-item__title {
    color: hsl(220 10% 62%);
}

.schedule-item img {
    width: 44px;
    height: 62px;
    object-fit: cover;
}

.schedule-item__title {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.schedule-item__meta {
    font-size: 11px;
    color: var(--muted);
}

.schedule-more {
    margin-top: 10px;
    background: none;
    border: 0;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
}

/* ── Watch page ── */
.watch-page {
    padding-top: 16px;
    padding-bottom: 48px;
    min-width: 0;
    max-width: 100%;
}

.watch-wrap {
    padding-top: 24px;
    min-width: 0;
    max-width: 100%;
}

.watch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, min(360px, 32vw));
    gap: clamp(12px, 2vw, 20px);
    align-items: start;
    min-width: 0;
    max-width: 100%;
}

.watch-side-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    width: 100%;
    max-width: min(360px, 32vw);
}

@media (min-width: 1101px) and (max-width: 1280px) {
    .watch-layout {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    }

    .watch-side-rail {
        max-width: 280px;
    }
}

.watch-primary { min-width: 0; }

/* Player */
.media-wrap {
    position: relative;
    border: 1px solid var(--border);
    background: #000;
    overflow: hidden;
}

.media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    filter: blur(24px) brightness(.35);
    transform: scale(1.08);
    pointer-events: none;
}

.media-inner {
    position: relative;
    z-index: 1;
    padding: 0;
}

#player {
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Old Android WebViews often lack / mishandle aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    #player {
        height: 0;
        padding-bottom: 56.25%;
    }
}

#player iframe,
#player .player-message {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

#player iframe {
    display: block;
    z-index: 1;
    background: #000;
}

.media-wrap.expanded {
    position: fixed;
    inset: 0;
    z-index: 900;
    border: 0;
}

.media-wrap.expanded #player {
    height: 100vh;
    aspect-ratio: auto;
    padding-bottom: 0;
}

/* Mini Player (scroll PiP) */
.watch-player-placeholder.is-active {
    width: 100%;
    margin-bottom: 0;
    border-radius: 10px;
    background: hsl(220 14% 9% / .65);
    border: 1px dashed hsl(220 14% 24%);
    box-sizing: border-box;
}

.media-wrap.is-floating {
    position: fixed;
    z-index: 920;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid hsl(172 66% 50% / .35);
    box-shadow:
        0 18px 50px hsl(0 0% 0% / .55),
        0 0 0 1px hsl(0 0% 100% / .05);
    background: #000;
}

.media-wrap.is-floating .media-inner,
.media-wrap.is-floating #player {
    pointer-events: auto;
}

body.watch-float-interacting .media-wrap.is-floating .media-inner,
body.watch-float-interacting .media-wrap.is-floating #player,
body.watch-float-interacting .media-wrap.is-floating #player iframe {
    pointer-events: none;
}

.media-wrap.is-floating .media-bg {
    display: none;
}

.media-wrap.is-floating .media-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.media-wrap.is-floating #player {
    flex: 1;
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    padding-bottom: 0;
}

.watch-float-chrome {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 36px;
    padding: 0 8px 0 10px;
    background: linear-gradient(180deg, hsl(220 14% 16%), hsl(220 14% 12%));
    border-bottom: 1px solid hsl(220 14% 22%);
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
    position: relative;
    z-index: 25;
}

.media-wrap.is-floating .watch-float-chrome {
    display: flex;
}

.watch-float-chrome:active {
    cursor: grabbing;
}

.watch-float__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.watch-float__grip {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background:
        radial-gradient(circle, hsl(220 10% 55%) 1.5px, transparent 1.6px) 0 0 / 7px 7px;
    opacity: .7;
    flex-shrink: 0;
}

.watch-float__label {
    font-size: 11px;
    font-weight: 700;
    color: hsl(172 66% 58%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watch-float__label i {
    margin-right: 5px;
    opacity: .85;
}

.watch-float__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.watch-float__btn {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: hsl(220 14% 20%);
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: color .15s, background .15s;
}

.watch-float__btn:hover {
    color: #fff;
    background: hsl(220 14% 28%);
}

.watch-float__resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
    cursor: nwse-resize;
    z-index: 30;
    touch-action: none;
}

.watch-float__resize::before {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 12px;
    height: 12px;
    border-right: 2px solid hsl(172 66% 50% / .75);
    border-bottom: 2px solid hsl(172 66% 50% / .75);
    border-radius: 0 0 4px 0;
    pointer-events: none;
}

.watch-float__resize::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 45%, hsl(172 66% 50% / .12) 45%);
    border-radius: 0 0 12px 0;
    pointer-events: none;
}

body.watch-has-float {
    scroll-behavior: auto;
}

.watch-wrap.light-mode #w-player.is-floating {
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (max-width: 640px) {
    .media-wrap.is-floating {
        max-width: calc(100vw - 20px);
    }

    .watch-float__label span {
        display: none;
    }
}

/* Light / theater mode — dim page; keep player visible above the veil */
.watch-light-overlay {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: #000;
    opacity: .88;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.watch-light-overlay[hidden] { display: none !important; }

/* Whole watch shell paints above the veil, but clicks pass through except the player */
body.watch-theater #watch-main.light-mode {
    position: relative;
    z-index: 1901;
    pointer-events: none !important;
}

body.watch-theater #watch-main.light-mode #media-box {
    position: relative;
    z-index: 1901;
    display: flex !important;
    flex-direction: column;
    pointer-events: none !important;
}

body.watch-theater #watch-main.light-mode #w-player,
body.watch-theater #watch-main.light-mode #media-box > .media-wrap {
    position: relative;
    z-index: 1902;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.watch-theater #watch-main.light-mode #light-toggle {
    pointer-events: auto !important;
    position: relative;
    z-index: 1903;
    opacity: 1 !important;
}

body.watch-theater #watch-main.light-mode .watch-primary > *:not(#media-box),
body.watch-theater #watch-main.light-mode .watch-side-rail {
    opacity: .15;
    pointer-events: none !important;
    transition: opacity .25s;
}

body.watch-theater #watch-main.light-mode #media-box .media-controls,
body.watch-theater #watch-main.light-mode #media-box .watch-alert,
body.watch-theater #watch-main.light-mode #media-box .watch-next-ep,
body.watch-theater #watch-main.light-mode #media-box .server-section,
body.watch-theater #watch-main.light-mode #media-box .player-server-host,
body.watch-theater #watch-main.light-mode #media-box > #w-servers,
body.watch-theater #watch-main.light-mode #media-box > .watch-seasons-mount {
    opacity: .15;
    pointer-events: none !important;
}

/* Keep light button usable while its row is dimmed */
body.watch-theater #watch-main.light-mode #media-box .media-controls #light-toggle {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Next episode countdown */
.watch-next-ep {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid hsl(172 66% 50% / .25);
    border-radius: 14px;
    background: linear-gradient(135deg, hsl(172 66% 50% / .08), hsl(220 14% 11% / .95));
    overflow: hidden;
}

.watch-next-ep__pulse {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 50%, hsl(172 66% 50% / .12), transparent 55%);
    pointer-events: none;
}

.watch-next-ep.is-soon {
    border-color: hsl(40 80% 55% / .35);
    background: linear-gradient(135deg, hsl(40 70% 50% / .1), hsl(220 14% 11% / .95));
}

.watch-next-ep.is-live {
    border-color: hsl(0 72% 55% / .4);
    background: linear-gradient(135deg, hsl(0 72% 45% / .12), hsl(220 14% 11% / .95));
}

.watch-next-ep__icon {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: hsl(172 66% 50% / .15);
    color: hsl(172 66% 58%);
    font-size: 16px;
    flex-shrink: 0;
}

.watch-next-ep.is-soon .watch-next-ep__icon {
    background: hsl(40 70% 50% / .15);
    color: hsl(40 85% 62%);
}

.watch-next-ep.is-live .watch-next-ep__icon {
    background: hsl(0 72% 45% / .18);
    color: hsl(0 85% 68%);
    animation: watch-next-pulse 1.4s ease infinite;
}

@keyframes watch-next-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.watch-next-ep__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.watch-next-ep__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.watch-next-ep__ep {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.watch-next-ep__when {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-mono);
}

.watch-countdown {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.count-down__grid {
    display: flex;
    align-items: center;
    gap: 4px;
}

.count-down__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
    padding: 6px 8px;
    border-radius: 10px;
    background: hsl(220 14% 8% / .85);
    border: 1px solid hsl(220 14% 22%);
}

.count-down__unit b {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    font-family: var(--font-mono);
    color: #fff;
}

.count-down__unit small {
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.count-down__colon {
    font-size: 14px;
    font-weight: 700;
    color: hsl(172 66% 50% / .7);
    padding-bottom: 12px;
}

.watch-countdown.is-live .count-down__grid {
    display: none;
}

.watch-countdown.is-live::after {
    content: attr(data-reached);
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: hsl(0 85% 72%);
    background: hsl(0 72% 42% / .22);
    border: 1px solid hsl(0 72% 48% / .4);
}

.watch-next-ep__dismiss {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: hsl(220 14% 16% / .8);
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}

.watch-next-ep__dismiss:hover {
    color: #fff;
    background: hsl(220 14% 22%);
}

@media (max-width: 720px) {
    .watch-next-ep {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        margin-top: 12px;
        padding: 8px 10px;
        border-radius: 10px;
    }

    .watch-next-ep__icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 12px;
    }

    .watch-next-ep__eyebrow {
        font-size: 9px;
    }

    .watch-next-ep__ep {
        font-size: 13px;
    }

    .watch-next-ep__when {
        font-size: 10px;
    }

    .watch-countdown {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .watch-next-ep__dismiss {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 26px;
        height: 26px;
    }

    .count-down__unit {
        min-width: 30px;
        padding: 3px 5px;
        border-radius: 7px;
    }

    .count-down__unit b { font-size: 12px; }
    .count-down__unit small { font-size: 8px; margin-top: 2px; }
    .count-down__colon { font-size: 12px; padding-bottom: 8px; }
}

/* Controls */
.media-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    justify-content: flex-start;
    align-items: center;
}

.media-controls .ctrl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    font: 500 11px var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
}

.media-controls .ctrl:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.media-controls .ctrl.on {
    border-color: var(--accent);
    color: var(--accent);
    background: hsl(172 66% 50% / .08);
}

.media-controls .ctrl:disabled {
    opacity: .35;
    cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
    .media-controls .ctrl.has-hotkey-tip {
        position: relative;
    }

    .media-controls .ctrl.has-hotkey-tip::after {
        content: attr(data-hotkey-tip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%) translateY(4px);
        width: max-content;
        max-width: 240px;
        padding: 7px 10px;
        border-radius: 6px;
        background: hsl(220 18% 12% / .96);
        border: 1px solid var(--border);
        color: var(--text);
        font: 500 11px/1.35 var(--font-sans);
        letter-spacing: .01em;
        white-space: normal;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        z-index: 40;
        box-shadow: 0 8px 24px hsl(0 0% 0% / .35);
        transition: opacity .15s ease, transform .15s ease;
    }

    .media-controls .ctrl.has-hotkey-tip:hover::after,
    .media-controls .ctrl.has-hotkey-tip:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.ctrl-dropdown { position: relative; }

.ctrl-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 140px;
    background: var(--bg2);
    border: 1px solid var(--border);
    z-index: 20;
    margin-top: 4px;
}

.ctrl-menu.open { display: block; }

.ctrl-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: none;
    border: 0;
    color: var(--text);
    font: 400 12px var(--font-sans);
    cursor: pointer;
}

.ctrl-menu button:hover {
    background: var(--bg3);
    color: var(--accent);
}

.watch-alert { margin-bottom: 12px; }

/* Servers */
.server-section { margin-bottom: 16px; }

.server-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 10px;
    font-size: 13px;
}

.server-notice span { color: var(--muted); font-size: 12px; }

.server-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.server-type-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    min-width: 48px;
}

.server-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.server-pill {
    padding: 6px 12px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}

.server-pill:hover { border-color: var(--accent); color: var(--accent); }

.server-pill.active {
    border-color: var(--accent);
    background: hsl(172 66% 50% / .12);
    color: var(--accent);
    font-weight: 600;
}

/* Episodes */
.ep-section { padding: 12px 14px; margin-bottom: 16px; }

.ep-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ep-range-wrap { position: relative; }

.ep-range-btn {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 12px;
    font: 600 12px var(--font-sans);
    cursor: pointer;
}

.ep-range-btn:hover { border-color: var(--accent); }

.ep-range-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 120px;
    background: var(--bg2);
    border: 1px solid var(--border);
    z-index: 15;
    margin-top: 4px;
}

.ep-range-menu.open { display: block; }

.ep-range-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: none;
    border: 0;
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}

.ep-range-opt.active,
.ep-range-opt:hover {
    background: hsl(172 66% 50% / .1);
    color: var(--accent);
}

.ep-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ep-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 4px 8px;
}

.ep-search i { color: var(--muted); font-size: 11px; }

.ep-search input {
    background: none;
    border: 0;
    color: var(--text);
    font: 400 12px var(--font-sans);
    width: 80px;
    outline: none;
}

.ep-lang-filter {
    display: flex;
    gap: 4px;
}

.lang-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
}

.lang-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: hsl(172 66% 50% / .08);
}

.ep-range-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
}

.ep-num-btn {
    display: grid;
    place-items: center;
    min-height: 40px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ep-num-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.ep-num-btn.active {
    border-color: var(--accent);
    background: var(--accent);
    color: hsl(220 25% 5%);
}

.ep-empty { padding: 16px; text-align: center; }

#w-episodes .ep-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 18px;
    min-height: 140px;
    text-align: center;
    color: var(--muted);
}

#w-episodes .ep-empty i {
    font-size: 26px;
    color: var(--accent);
    opacity: .75;
}

#w-episodes .ep-empty p {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--text-title);
}

#w-episodes .ep-empty span {
    font-size: 12px;
    line-height: 1.55;
    max-width: 280px;
}

.watch-episodes-panel--empty #w-episodes .body {
    min-height: auto;
}

.watch-episodes-panel--empty #w-episodes {
    min-height: auto;
}

@media (max-width: 1100px) {
    .watch-episodes-panel--empty #w-episodes .ep-empty {
        min-height: 100px;
        padding: 24px 16px;
    }
}

/* Share */
.share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}

.share-btn:hover { opacity: .85; transform: translateY(-2px); }

.share-btn[data-network="facebook"] { background: #4267b2; }
.share-btn[data-network="twitter"] { background: #000; }
.share-btn[data-network="reddit"] { background: #ff4500; }
.share-btn[data-network="whatsapp"] { background: #25d366; }
.share-btn[data-network="telegram"] { background: #0088cc; }
.share-btn[data-network="copy"] { background: var(--bg3); border: 1px solid var(--border); color: var(--text); }

/* Media info */
.media-info {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.media-info-poster img {
    width: 100%;
    display: block;
    border: 1px solid var(--border);
}

.media-jp {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.media-title {
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
}

.media-title a {
    color: inherit;
    text-decoration: none;
}

.media-title a:hover {
    color: var(--accent);
}

.media-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.mini-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--muted);
}

.mini-badge.accent {
    background: hsl(172 66% 50% / .12);
    border-color: hsl(172 66% 50% / .3);
    color: var(--accent);
}

.dub-sub-total {
    display: flex;
    gap: 6px;
    margin-left: 4px;
}

.ep-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--muted);
}

.ep-badge.sub { color: var(--accent); }
.ep-badge.dub { color: hsl(210 80% 70%); }

.media-synopsis {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 14px;
}

.synopsis-toggle {
    margin-top: 8px;
    padding: 4px 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 11px;
    cursor: pointer;
}

.synopsis-toggle:hover { border-color: var(--accent); color: var(--accent); }

.media-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 16px;
    font-size: 12px;
}

.meta-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 8px;
}

.meta-label { color: var(--muted); }

.meta-value { color: var(--text); }
.meta-value a { color: var(--accent); text-decoration: none; }
.meta-value a:hover { text-decoration: none; }

.media-rating {
    text-align: center;
    padding: 8px;
    min-width: 100px;
}

.media-rating .stars {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 14px;
}

.media-rating .star.empty { color: var(--border); }

.media-rating .score-line {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

/* Watch seasons (sequel/prequel carousel) */
.watch-seasons-mount {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.watch-seasons-mount:empty,
.watch-seasons-mount[hidden],
.watch-seasons-mount.card[hidden] {
    display: none !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.watch-seasons-head {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
}

#w-seasons {
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    touch-action: pan-x;
}

#w-seasons .swiper-pagination {
    display: none;
}

#w-seasons .seasons {
    display: flex;
    gap: 10px;
    padding: 2px 0 6px;
    min-width: min-content;
}

#w-seasons .seasons .season {
    flex: 0 0 132px;
    width: 132px;
}

#w-seasons .seasons .season a {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    min-height: 112px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

#w-seasons .seasons .season a::before {
    position: absolute;
    inset: 0;
    content: "";
    background: hsl(220 25% 5% / .78);
    transition: opacity .18s ease;
}

#w-seasons .seasons .season a::after {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: var(--radius);
    content: "";
    transition: border-color .18s ease;
    pointer-events: none;
}

#w-seasons .seasons .season a .name {
    color: var(--text);
    text-transform: uppercase;
    font-weight: 700;
    min-height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 10px;
    font-size: 11px;
    line-height: 1.35;
    z-index: 1;
    position: relative;
}

#w-seasons .seasons .season a:hover,
#w-seasons .seasons .season.active a {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px hsl(220 25% 2% / .35);
}

#w-seasons .seasons .season a:hover::before,
#w-seasons .seasons .season.active a::before {
    opacity: .55;
}

#w-seasons .seasons .season a:hover::after,
#w-seasons .seasons .season.active a::after {
    border-color: var(--accent);
}

@media (max-width: 768px) {
    .watch-seasons-mount {
        padding: 10px 12px;
    }

    #w-seasons .seasons {
        gap: 8px;
        padding-bottom: 4px;
    }

    #w-seasons .seasons .season {
        flex-basis: 46%;
        width: 46%;
        min-width: 132px;
        max-width: 180px;
    }

    #w-seasons .seasons .season a {
        min-height: 104px;
    }

    #w-seasons .seasons .season a .name {
        font-size: 10px;
        min-height: 68px;
        padding: 0 8px;
    }
}

/* Recommended sidebar */
.watch-side-panel { min-width: 0; }

.reco-section { padding: 14px; }

.reco-heading {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: .02em;
}

.reco-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reco-item {
    display: flex;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

.reco-item:hover .reco-name { color: var(--accent); }

.reco-poster {
    flex-shrink: 0;
    width: 56px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg3);
}

.reco-poster img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}

.reco-detail { min-width: 0; flex: 1; }

.reco-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reco-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.reco-meta .tag {
    font-size: 9px;
    padding: 1px 6px;
}

.reco-ep {
    font-size: 10px;
    color: var(--muted);
}

@media (max-width: 1024px) {
    .media-info {
        grid-template-columns: 120px 1fr;
    }
    .media-rating {
        grid-column: 1 / -1;
        text-align: left;
    }
    .media-rating .stars { justify-content: flex-start; }
}

@media (max-width: 900px) {
    .reco-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 600px) {
    .media-info {
        grid-template-columns: 1fr;
    }
    .media-info-poster {
        max-width: 140px;
    }
    .share-btn span { display: none; }
    .media-controls .ctrl span { display: none; }
}


/* ── Archive ── */
.archive-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
    overflow: visible;
}

.archive-main {
    overflow: visible;
    min-width: 0;
}

.archive-filters {
    padding: 14px;
    position: sticky;
    top: 72px;
}

.archive-filters h3 {
    font-size: 12px;
    margin: 12px 0 8px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.archive-filters h3:first-child { margin-top: 0; }

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    font-size: 11px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
}

.filter-chip:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.archive-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.archive-links a {
    font-size: 13px;
    color: inherit;
    text-decoration: none;
}

.archive-links a:hover { color: var(--accent); }

.archive-main h1 { font-size: 20px; }

/* ── Account ── */
.account-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}

.account-sidebar { padding: 0; overflow: hidden; }

.account-user {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.account-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 10px;
    border: 2px solid var(--border);
}

.account-name { font-weight: 700; font-size: 16px; }

.account-meta {
    list-style: none;
    margin-top: 12px;
    font-size: 12px;
}

.account-meta li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: var(--muted);
}

.account-menu {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.account-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

.account-menu a:hover,
.account-menu a.active {
    background: hsl(172 66% 50% / .08);
    color: var(--accent);
}

.account-logout { color: hsl(0 70% 65%) !important; }

.account-content {
    padding: 20px 22px;
}

.account-content h1 {
    font-size: 20px;
    margin-bottom: 16px;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 480px;
}

.account-form .field span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.account-form input,
.account-form textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}

.account-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.account-list-item img {
    width: 40px;
    height: 56px;
    object-fit: cover;
}

.account-notif {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

@media (max-width: 900px) {
    .archive-layout,
    .account-layout {
        grid-template-columns: 1fr;
    }

    .archive-filters { position: static; }
}

/* ── KuAnime site chrome extras ── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: hsl(220 25% 5% / .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 8px 16px;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.site-header__inner > .header-search-wrap {
    flex: 1 1 320px;
    width: auto;
    max-width: 520px;
    min-width: 260px;
    position: relative;
}

.header-spacer { flex: 1; min-width: 8px; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    overflow: visible;
}

.header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--bg2);
    padding: 0 12px;
    min-height: 40px;
    height: 40px;
    width: 100%;
    border-radius: 20px;
}

.header-search #search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    line-height: 1;
}

.header-search .search-close {
    display: none;
}

.header-search input {
    flex: 1;
    background: none;
    border: 0;
    color: var(--text);
    outline: none;
    font-size: 13px;
    padding: 0;
    min-width: 0;
}

.header-search #search-btn,
.header-search .search-close {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
}

.search-toggle { display: none; }
.lang-switch button {
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--muted);
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
}
.lang-switch button.active {
    background: hsl(172 66% 50% / .1);
    border-color: hsl(172 66% 50% / .4);
    color: var(--accent);
}
.search-popup {
    position: absolute;
    margin-top: 6px;
    width: min(360px, 90vw);
    background: var(--bg2);
    border: 1px solid var(--border);
    z-index: 80;
}
.search-popup__body { max-height: 320px; overflow: auto; }
/* hero-slide rules consolidated above — do not override with display:none */
.site-footer {
    margin-top: 28px;
    border-top: 1px solid var(--border);
    background: var(--bg2);
    padding: 28px 20px 24px;
}
.modal[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.modal-backdrop { position: absolute; inset: 0; background: hsl(0 0% 0% / .7); }
body.modal-open { overflow: hidden; }
.ku-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
    opacity: 0;
    transition: opacity .2s;
    /* Above #sign.modal (1200) and generic .modal so toasts stay visible */
    z-index: 1300;
    pointer-events: none;
    max-width: min(320px, calc(100vw - 24px));
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px hsl(0 0% 0% / .35);
}
.ku-toast.show { opacity: 1; }
.ku-toast.ok { border-color: var(--accent); color: var(--accent); }
.ku-toast.err { border-color: hsl(0 65% 55%); color: hsl(0 65% 68%); }

@media (max-width: 900px) {
    .ku-toast {
        /* Sit above bottom nav so Schedule/Menu stay clickable */
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        left: auto;
        z-index: 1300;
    }
}
.archive-links { display: flex; flex-direction: column; gap: 6px; }
.archive-links a { color: var(--muted); font-size: 12px; text-decoration: none; }
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.account-sidebar.card { padding: 14px; }
.account-menu { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.account-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    border: 1px solid transparent;
}
.account-menu a:hover, .account-menu a.active { border-color: var(--border); color: var(--accent); }

/* A-Z list page */
.az-page .az-main { grid-column: 1 / -1; }
ul.az-filters {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 6px;
}
ul.az-filters a {
    display: block;
    text-align: center;
    padding: 8px 4px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
ul.az-filters a:hover { border-color: var(--accent); color: var(--accent); }
ul.az-filters a.active {
    border-color: var(--accent);
    background: hsl(172 66% 50% / .12);
    color: var(--accent);
}

/* Watch — player server panel */
.player-server-host,
#w-servers {
    margin-top: 12px;
}

#player-server,
.player-server {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    background: var(--bg2);
    border: 1px solid var(--border);
}

#player-server .server-note,
.player-server .server-note {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 18px;
    min-width: 0;
    flex: 0 1 240px;
    max-width: 280px;
    border-right: 1px solid var(--border);
    background: var(--bg3);
}

#player-server .server-note p,
.player-server .server-note p {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

#player-server .server-note b,
.player-server .server-note b {
    color: var(--accent);
    font-weight: 700;
}

#player-server .server-note span,
.player-server .server-note span {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
}

.server-note__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ku-download-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid hsl(172 66% 50% / .35);
    border-radius: 999px;
    background: hsl(172 66% 50% / .1);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.ku-download-toggle:hover,
.ku-download-toggle.is-open {
    background: hsl(172 66% 50% / .18);
    border-color: var(--accent);
}

.ku-download-toggle__chev {
    font-size: 10px;
    transition: transform .2s ease;
}

.ku-download-toggle.is-open .ku-download-toggle__chev {
    transform: rotate(180deg);
}

.ku-download-tray {
    flex: 0 0 100%;
    width: 100%;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, hsl(172 66% 50% / .06), transparent 72%);
    animation: ku-dl-tray-in .22s ease;
}

@keyframes ku-dl-tray-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ku-download-tray__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 14px 16px 16px;
}

.ku-dl-group {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg3);
}

.ku-dl-group__label {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.ku-dl-group__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ku-dl-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.ku-dl-chip:hover {
    border-color: var(--accent);
    background: hsl(172 66% 50% / .14);
    color: var(--accent);
}

#player-server .server-wrap,
.player-server .server-wrap {
    flex: 1;
    padding: 14px 16px;
    text-align: right;
    min-width: 0;
}

#player-server .server-tab,
.player-server .server-tab {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px dashed hsl(220 14% 28% / .65);
}

#player-server .server-tab-btn,
.player-server .server-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px dashed hsl(220 14% 32% / .85);
    border-radius: 999px;
    background: hsl(220 18% 10% / .55);
    color: var(--muted);
    font: 700 10px var(--font-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 11px;
    cursor: pointer;
    opacity: .72;
    box-shadow: none;
    transition: opacity .15s, border-color .15s, color .15s, background .15s, box-shadow .15s;
}

#player-server .server-tab-btn i,
.player-server .server-tab-btn i {
    font-size: 11px;
    opacity: .85;
}

#player-server .server-tab-btn span,
.player-server .server-tab-btn span {
    line-height: 1;
}

#player-server .server-tab-btn:hover,
#player-server .server-tab-btn.active,
.player-server .server-tab-btn:hover,
.player-server .server-tab-btn.active {
    opacity: 1;
    border-style: solid;
    border-color: hsl(172 66% 50% / .55);
    color: var(--accent);
    background: hsl(172 66% 50% / .1);
    box-shadow: inset 0 -2px 0 hsl(172 66% 50% / .75);
}

#player-server .server-items,
.player-server .server-items {
    display: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
}

#player-server .server-items.active,
.player-server .server-items.active {
    display: flex;
}

#player-server .server-video,
.player-server .server-video {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg3);
    color: var(--text);
    font: 600 12px var(--font-sans);
    padding: 8px 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}

#player-server .server-video:hover,
#player-server .server-video.active,
.player-server .server-video:hover,
.player-server .server-video.active {
    border-color: var(--accent);
    background: hsl(172 66% 50% / .18);
    color: var(--accent);
}

@media (max-width: 800px) {
    #player-server,
    .player-server {
        flex-direction: column;
    }

    #player-server .server-note,
    .player-server .server-note {
        max-width: none;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        text-align: center;
        align-items: center;
    }

    #player-server .server-wrap,
    .player-server .server-wrap {
        text-align: center;
        padding: 14px;
    }

    #player-server .server-tab,
    .player-server .server-tab {
        justify-content: center;
    }

    #player-server .server-items.active,
    .player-server .server-items.active {
        justify-content: center;
    }
}

#media-episode { padding: 0; overflow: hidden; }

#w-episodes {
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

#w-episodes .loading,
#player .loading {
    display: block;
    width: 48px;
    height: 48px;
    margin: 24px auto;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ku-spin 0.8s linear infinite;
}

#player {
    position: relative;
    min-height: 220px;
}

#player .loading {
    position: absolute;
    left: calc(50% - 24px);
    top: calc(50% - 24px);
    margin: 0;
}

#player .player-message {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 24px;
    text-align: center;
    line-height: 1.45;
    width: 100%;
    height: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

#player .player-message--servers {
    max-width: none;
}

#player .player-message--servers strong,
#player .player-message--servers span {
    display: block;
    max-width: 420px;
    margin: 0 auto;
}

#player .player-message--servers strong {
    font-size: 16px;
    color: var(--text-title, var(--text));
}

#player .player-message--servers span {
    font-size: 13px;
    color: var(--muted);
}

.player-server.player-server--empty {
    display: block;
    width: 100%;
    margin-top: 12px;
    overflow: hidden;
}

.server-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 22px 20px;
    text-align: center;
    border: 1px dashed hsl(172 66% 50% / .35);
    border-radius: 12px;
    background: hsl(220 14% 10% / .9);
    box-sizing: border-box;
}

.server-empty__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: hsl(172 66% 50% / .12);
    color: var(--accent);
    font-size: 18px;
}

.server-empty__copy {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.server-empty__copy strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: var(--text-title, var(--text));
}

.server-empty__copy p {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

.server-empty__copy p:last-child {
    margin-bottom: 0;
}

#player iframe.is-loading {
    opacity: 0;
    pointer-events: none;
}

#player iframe {
    transition: opacity .15s ease;
}

#w-episodes .loading {
    margin: 48px auto;
}

@keyframes ku-spin {
    to { transform: rotate(360deg); }
}

#w-episodes .head {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg3);
}

#w-episodes .head.ep-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.ep-head-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
}

.ep-head-filters.ep-head-filters--solo,
.ep-head-filters:has(> :only-child) {
    grid-template-columns: 1fr;
}

.ep-head-filters > .ep-dd,
.ep-head-filters > .ep-filter-select {
    width: 100%;
    min-width: 0;
}

.ep-dd {
    position: relative;
    z-index: 1;
}

.ep-dd.is-open {
    z-index: 60;
}

.ep-dd__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    background: none !important;
}

.ep-dd__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: 500 12px var(--font-sans);
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
}

.ep-dd.is-open .ep-dd__btn,
.ep-dd__btn:focus-visible {
    outline: none;
    border-color: var(--accent);
}

.ep-dd__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-dd__chevron {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--muted);
    transition: transform .15s ease;
}

.ep-dd.is-open .ep-dd__chevron {
    transform: rotate(180deg);
}

.ep-dd__menu {
    position: absolute;
    z-index: 70;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 28px hsl(0 0% 0% / .38);
}

.ep-dd__opt {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: 500 12px var(--font-sans);
    text-align: left;
    cursor: pointer;
}

.ep-dd__opt:hover {
    background: hsl(172 66% 50% / .1);
    color: var(--accent);
}

.ep-dd__opt.is-active {
    color: var(--accent);
    background: hsl(172 66% 50% / .12);
}

.ep-head-search {
    width: 100%;
}

.ep-head-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

#w-episodes .head.ep-head {
    overflow: visible;
}

#w-episodes .head .ep-filter-select,
#w-episodes .head .ep-dd__btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    font-size: 12px;
    border-radius: 8px;
    line-height: 1.2;
}

#w-episodes .head .ep-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 0;
}

#w-episodes .head .ep-search input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 12px;
}

#w-episodes .head .ep-search:focus-within {
    border-color: var(--accent);
}

#w-episodes .head .ep-search i {
    color: var(--muted);
    font-size: 12px;
    flex-shrink: 0;
}

.ep-view-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ep-view-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg2);
}

.ep-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ep-view-btn:hover,
.ep-view-btn.active {
    color: var(--accent);
    background: hsl(172 66% 50% / .12);
}

.ep-grid-select {
    width: auto;
    min-width: 72px;
    max-width: 88px;
    padding: 6px 22px 6px 8px;
    font-size: 11px;
}

#w-episodes.ep-grid-4 .body .episodes.number ul.ep-range.is-visible {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#w-episodes.ep-grid-6 .body .episodes.number ul.ep-range.is-visible {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

#w-episodes.ep-grid-8 .body .episodes.number ul.ep-range.is-visible {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

#w-episodes.ep-grid-auto .body .episodes.number ul.ep-range.is-visible {
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
}

#w-episodes .head .filter .dropdown-toggle,
#w-episodes .head .filter .btn {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    padding: 5px 10px;
}

#w-episodes .head .filter.name input {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    padding: 5px 10px;
    min-width: 120px;
}

#w-episodes .head .dropdown-menu {
    background: var(--bg2);
    border: 1px solid var(--border);
}

#w-episodes .head .dropdown-item {
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}

#w-episodes .head .dropdown-item:hover {
    background: hsl(172 66% 50% / .1);
    color: var(--accent);
}

#w-episodes .body {
    position: relative;
    flex-grow: 1;
    margin: 10px;
    min-height: 220px;
}

#w-episodes .body .episodes {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    inset: 0;
}

#w-episodes.ep-mode-number .body,
#w-episodes .ep-mode-number .body {
    min-height: 280px;
}

#w-episodes .body .episodes.number ul.ep-range {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
}

#w-episodes .body .episodes.number ul.ep-range.is-visible {
    display: grid !important;
}

#w-episodes .body .episodes.number ul.ep-range li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
    min-width: 0;
}

#w-episodes .body .episodes.number ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px;
    line-height: 1;
    height: 1.875rem;
    min-height: 1.875rem;
    font-size: 12px;
    text-align: center;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

#w-episodes .body .episodes.number ul li a.filler {
    border-color: hsl(45 40% 22%);
    background: hsl(45 30% 14%);
}

#w-episodes .body .episodes.number ul li a.watched:not(.active):not(.highlight) {
    border-color: hsl(172 28% 20%);
    background: hsl(172 22% 13%);
    color: hsl(172 12% 42%);
}

#w-episodes .body .episodes.number ul li a.watched:not(.active):not(.highlight):hover {
    border-color: var(--accent);
    color: var(--accent);
}

#w-episodes .body .episodes.number ul li a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

#w-episodes .body .episodes.number ul li a.active,
#w-episodes .body .episodes.number ul li a.highlight {
    border-color: var(--accent) !important;
    background: hsl(172 66% 50% / .14) !important;
    color: var(--accent) !important;
}

#w-episodes .body .episodes.name ul.ep-range {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}

#w-episodes .body .episodes.name ul.ep-range.is-visible {
    display: block !important;
}

#w-episodes .body .episodes.name ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#w-episodes .body .episodes.name ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text);
    background: var(--bg3);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all .15s;
}

#w-episodes .body .episodes.name ul li a b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 28px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
}

#w-episodes .body .episodes.name ul li a .d-title {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#w-episodes .body .episodes.name ul li a.watched:not(.active):not(.highlight) {
    border-color: hsl(172 28% 20%);
    background: hsl(172 22% 13%);
    color: var(--muted);
}

#w-episodes .body .episodes.name ul li a.watched:not(.active):not(.highlight) b {
    background: hsl(172 18% 15%);
    border-color: hsl(172 24% 24%);
    color: var(--muted);
}

#w-episodes .body .episodes.name ul li a:hover,
#w-episodes .body .episodes.number ul li a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

#w-episodes .body .episodes.name ul li a.active,
#w-episodes .body .episodes.name ul li a.highlight {
    border-color: var(--accent);
    color: var(--accent);
    background: hsl(172 66% 50% / .12);
    box-shadow: 0 0 0 1px hsl(172 66% 50% / .25);
}

#w-episodes .body .episodes.name ul li a.active b,
#w-episodes .body .episodes.name ul li a.highlight b {
    border-color: var(--accent);
    color: var(--accent);
    background: hsl(172 66% 50% / .14);
}

@media (max-width: 640px) {
    .watch-page.page {
        padding: 8px 10px 24px;
    }

    .watch-wrap {
        padding-top: 6px;
    }

    .media-controls {
        gap: 3px;
        padding: 0 0 2px;
        margin-top: 6px;
        margin-bottom: 2px;
    }

    #media-box > .media-wrap + .media-controls,
    #media-box > .media-wrap + .watch-player-placeholder + .media-controls,
    .watch-layout > .media-wrap + #media-controls,
    .watch-layout > .media-wrap + .watch-player-placeholder + #media-controls {
        margin-top: 6px;
        padding-top: 0;
    }

    .media-controls .ctrl {
        padding: 5px 7px;
        font-size: 10px;
    }

    .player-server-host,
    #w-servers {
        margin-top: 4px;
    }

    #w-episodes .body .episodes.number ul.ep-range.is-visible {
        grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    }

    #w-episodes .head.ep-head {
        gap: 8px;
        padding: 10px;
    }

    #w-episodes .head .ep-dd__btn {
        min-height: 40px;
        font-size: 13px;
    }

    #w-episodes .head .ep-search {
        min-height: 40px;
        padding: 8px 12px;
    }

    #w-episodes .head .ep-search input {
        font-size: 16px;
    }
}

@media (max-width: 900px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   App shell — sidebar + bottom nav
   ============================================================ */
.has-app-shell { --sidebar-w: 220px; --sidebar-w-collapsed: 68px; }

.app-shell {
    display: flex;
    align-items: flex-start;
    min-height: 0;
}

.app-main {
    flex: 1;
    min-width: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: hsl(0 0% 0% / .55);
    z-index: 70;
}

.sidebar-backdrop[hidden] { display: none !important; }

.site-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 58px;
    height: calc(100vh - 58px);
    overflow-y: auto;
    z-index: 55;
}

body:not(.sidebar-ready) .site-sidebar {
    transition: none !important;
}

body.sidebar-ready .site-sidebar {
    transition: transform .2s ease;
}

@media (min-width: 901px) {
    body.sidebar-ready .site-sidebar {
        transition: none;
    }
}

.site-sidebar__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
}

.site-sidebar__title {
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.sidebar-collapse,
.sidebar-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.sidebar-close { display: none; }

.sidebar-collapse:hover,
.sidebar-close:hover { border-color: var(--accent); color: var(--accent); }

.site-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px 16px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}

.sidebar-link i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-link:hover,
.sidebar-link.active {
    color: var(--accent);
    background: hsl(172 66% 50% / .08);
    border-color: hsl(172 66% 50% / .2);
    text-decoration: none;
}

.sidebar-group { position: relative; }

.sidebar-link--toggle {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.sidebar-caret {
    margin-left: auto;
    font-size: 10px;
    opacity: .7;
    transition: transform .2s ease;
}

.sidebar-group.is-open .sidebar-caret { transform: rotate(180deg); }

.sidebar-submenu {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 8px 36px;
    max-height: 220px;
    overflow-y: auto;
}

.sidebar-group.is-open .sidebar-submenu { display: flex; }

.sidebar-sublink {
    display: block;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    border-radius: 6px;
}

.sidebar-sublink:hover {
    color: var(--accent);
    background: hsl(172 66% 50% / .08);
}

.sidebar-sublink--empty {
    cursor: default;
    opacity: .65;
}

@media (min-width: 901px) {
    .sidebar-group:not(.is-open):hover .sidebar-submenu {
        display: flex;
        position: absolute;
        left: calc(100% - 4px);
        top: 0;
        min-width: 180px;
        max-width: 220px;
        max-height: 320px;
        padding: 8px;
        margin: 0;
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 12px 32px hsl(0 0% 0% / .45);
        z-index: 60;
    }

    body.sidebar-collapsed .sidebar-group:not(.is-open):hover .sidebar-submenu {
        left: calc(100% + 6px);
    }

    body:not(.sidebar-collapsed) .sidebar-group.is-open .sidebar-submenu {
        display: flex;
        position: static;
        max-height: 220px;
        padding: 4px 0 8px 36px;
        background: transparent;
        border: 0;
        box-shadow: none;
        min-width: 0;
    }

    body.sidebar-collapsed .sidebar-group.is-open .sidebar-submenu {
        display: flex;
        position: absolute;
        left: calc(100% + 6px);
        top: 0;
        min-width: 180px;
        max-width: 220px;
        max-height: 320px;
        padding: 8px;
        margin: 0;
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 12px 32px hsl(0 0% 0% / .45);
        z-index: 60;
    }

    .sidebar-group:not(.is-open):hover .sidebar-caret { transform: rotate(-90deg); }
}

body.sidebar-collapsed .site-sidebar { width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .site-sidebar__title,
body.sidebar-collapsed .sidebar-link span { display: none; }
body.sidebar-collapsed .sidebar-link { justify-content: center; padding: 10px 8px; }
body.sidebar-collapsed .sidebar-caret { display: none; }
body.sidebar-collapsed .sidebar-collapse i { transform: rotate(180deg); }

.bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 65;
    background: hsl(220 20% 8% / .98);
    border-top: 1px solid var(--border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none !important;
    background: none;
    border: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.bottom-nav__item:hover,
.bottom-nav__item:focus,
.bottom-nav__item:active,
.bottom-nav__item.active {
    text-decoration: none !important;
}

.bottom-nav__item i { font-size: 16px; }
.bottom-nav__item > *,
.bottom-nav__item svg {
    pointer-events: none;
}
.bottom-nav__item:hover,
.bottom-nav__item.active { color: var(--accent); }

/* Archive / page filters */
form.filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: hsl(220 20% 8% / .85);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: visible;
}

form.filters .filter { min-width: 0; overflow: visible; }

form.filters .dropdown { position: relative; overflow: visible; z-index: 1; }

form.filters .dropdown.open { z-index: 45; }

form.filters .filter input[type="text"],
form.filters .filter .form-control {
    width: 100%;
    background: var(--bg3);
    border: 1px solid hsl(220 18% 20%);
    color: var(--text);
    padding: 10px 12px;
    font: 500 13px var(--font-sans);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

form.filters .filter input[type="text"]:focus,
form.filters .filter .form-control:focus {
    outline: none;
    border-color: hsl(172 66% 50% / .45);
    box-shadow: 0 0 0 3px hsl(172 66% 50% / .1);
}

form.filters .dropdown .btn,
form.filters .submit .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    background: var(--bg3);
    border: 1px solid hsl(220 18% 20%);
    color: var(--text);
    padding: 10px 12px;
    font: 500 13px var(--font-sans);
    cursor: pointer;
    border-radius: 10px;
    min-height: 42px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

form.filters .dropdown .btn::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--muted);
    flex-shrink: 0;
    transition: transform .2s ease;
}

form.filters .dropdown.open .btn {
    border-color: hsl(172 66% 50% / .45);
    box-shadow: 0 0 0 3px hsl(172 66% 50% / .08);
}

form.filters .dropdown.open .btn::after {
    transform: rotate(180deg);
    border-top-color: var(--accent);
}

form.filters .dropdown .btn:hover,
form.filters .submit .btn:hover {
    border-color: hsl(172 66% 50% / .35);
    background: hsl(172 66% 50% / .04);
}

form.filters .dropdown .btn .value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    flex: 1;
    min-width: 0;
}

form.filters .dropdown .btn .value.is-set {
    color: var(--accent);
    font-weight: 600;
}

form.filters .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 100%;
    width: max-content;
    max-width: min(calc(100vw - 16px), 260px);
    max-height: none;
    overflow: hidden;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 28px hsl(0 0% 0% / .35);
    z-index: 50;
    padding: 4px;
    list-style: none;
    margin: 0;
}

form.filters .dropdown.open .dropdown-menu { display: block; }

form.filters .dropdown-menu.c2 {
    max-width: min(calc(100vw - 16px), 300px);
}

form.filters .dropdown-menu.c3,
form.filters .dropdown-menu.c4 {
    max-width: min(calc(100vw - 16px), 360px);
}

form.filters .dropdown-menu.menu-scroll {
    max-height: min(280px, calc(100dvh - 140px));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: hsl(172 66% 50% / .35) transparent;
}

form.filters .dropdown-menu.menu-scroll::-webkit-scrollbar {
    width: 6px;
}

form.filters .dropdown-menu.menu-scroll::-webkit-scrollbar-thumb {
    background: hsl(172 66% 50% / .35);
    border-radius: 999px;
}

form.filters .dropdown-menu li {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

form.filters .dropdown-menu li label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    margin: 0;
    color: hsl(180 8% 78%);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 8px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, color .15s ease;
}

form.filters .dropdown-menu li label:hover {
    background: hsl(172 66% 50% / .08);
    color: var(--text);
}

form.filters .dropdown-menu li input:checked + label {
    background: hsl(172 66% 50% / .14);
    color: var(--accent);
    font-weight: 600;
}

form.filters .dropdown-menu li input.exclude:checked + label {
    background: hsl(0 72% 48% / .14);
    color: #e05252;
}

form.filters .dropdown-menu li input[type="checkbox"],
form.filters .dropdown-menu li input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

form.filters .dropdown-menu li input[type="radio"]:checked + label::before,
form.filters .dropdown-menu li input[type="checkbox"]:checked + label::before {
    content: "";
    flex-shrink: 0;
}

form.filters .dropdown-menu li input[type="radio"]:checked + label::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px hsl(172 66% 50% / .2);
}

form.filters .dropdown-menu li input[type="checkbox"]:checked + label::before {
    content: "✓";
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--accent);
    color: hsl(220 25% 5%);
    font-size: 10px;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
    line-height: 1;
}

form.filters .dropdown-menu li input.exclude:checked + label::before {
    content: "✕";
    background: #e05252;
    color: #fff;
    box-shadow: 0 0 0 3px hsl(0 72% 48% / .2);
}

form.filters .dropdown-menu.c2 { display: none; grid-template-columns: 1fr 1fr; gap: 2px; }
form.filters .dropdown.open .dropdown-menu.c2 { display: grid; }
form.filters .dropdown-menu.c3 { display: none; grid-template-columns: repeat(3, 1fr); gap: 2px; }
form.filters .dropdown.open .dropdown-menu.c3 { display: grid; }
form.filters .dropdown-menu.c4,
form.filters .dropdown-menu.genres { display: none; grid-template-columns: repeat(4, 1fr); gap: 2px; }
form.filters .dropdown.open .dropdown-menu.c4,
form.filters .dropdown.open .dropdown-menu.genres { display: grid; }

form.filters .dropdown-menu.c4 ul.genres {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}

form.filters .dropdown-menu.c2 li,
form.filters .dropdown-menu.c3 li,
form.filters .dropdown-menu.c4 li,
form.filters .dropdown-menu.genres li {
    display: flex;
}

form.filters .dropdown-menu.c2 li label,
form.filters .dropdown-menu.c3 li label,
form.filters .dropdown-menu.c4 li label,
form.filters .dropdown-menu.genres li label {
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
}

@media (max-width: 640px) {
    form.filters .dropdown-menu.c3,
    form.filters .dropdown.open .dropdown-menu.c3 {
        grid-template-columns: repeat(2, 1fr);
    }

    form.filters .dropdown-menu.c4,
    form.filters .dropdown.open .dropdown-menu.c4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

form.filters .submit.filter { display: flex; align-items: stretch; }

form.filters .submit .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: hsl(220 25% 5%);
    font-weight: 700;
    justify-content: center;
    border-radius: 10px;
    min-height: 42px;
}

form.filters .submit .btn-primary::after {
    display: none;
}

form.filters .submit .btn-primary i {
    font-size: 12px;
}

.filter-ep-range-menu {
    min-width: 240px;
    padding: 10px 12px !important;
}

.filter-ep-range-fields {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-ep-range-row {
    margin-bottom: 10px;
}

.filter-ep-range-row label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: var(--muted);
}

.filter-ep-range-row .form-control {
    width: 100%;
    min-height: 38px;
}

.filter-ep-range-hint {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.45;
}

/* Watch episode filter selects */
.ku-ep-filters.ep-head {
    /* layout defined in #w-episodes .head.ep-head grid rules */
}

.ku-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 130px;
}

.ku-filter-field--grow { flex: 1; min-width: 160px; }

.ku-filter-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.ku-select,
.ku-input {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    font: 500 13px var(--font-sans);
    width: 100%;
}

.ku-select {
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}

.ku-select:focus,
.ku-input:focus {
    outline: none;
    border-color: var(--accent);
}

.site-header .brand-text { display: inline; }
.nav-toggle { display: none; }

@media (min-width: 901px) {
    .sidebar-close { display: none !important; }
    .sidebar-backdrop { display: none !important; }
    body.sidebar-open .site-sidebar { transform: none; }
    .nav-toggle { display: none !important; }
}

@media (max-width: 900px) {
    body.sidebar-collapsed .site-sidebar {
        width: var(--sidebar-w);
    }

    body.sidebar-collapsed .site-sidebar__title,
    body.sidebar-collapsed .sidebar-link span {
        display: inline;
    }

    body.sidebar-open {
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    body.sidebar-open #site-sidebar {
        touch-action: pan-y;
    }

    .site-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%);
        z-index: 80;
        padding-top: 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.sidebar-open .site-sidebar { transform: translateX(0); }

    body.sidebar-open .site-sidebar {
        z-index: 110;
    }

    body.sidebar-open .bottom-nav {
        visibility: hidden;
        pointer-events: none;
    }

    .sidebar-close { display: grid; }
    .sidebar-collapse { display: none; }

    .bottom-nav { display: grid; }

    .app-main { padding-bottom: 64px; }

    body:not(.search-open) > #search.header-search-wrap {
        display: none !important;
        visibility: hidden;
        pointer-events: none;
    }

    .site-header .brand-logo {
        height: 34px;
        max-height: 34px;
    }

    .site-header .brand {
        padding: 6px 0;
    }

    .header-search-toggle,
    .search-toggle { display: grid; }

    .header-actions > .header-search-wrap,
    .site-header__inner > .header-search-wrap {
        display: none;
    }

    body.search-open .header-search-wrap {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 300;
        width: 100%;
        max-width: none;
        padding: 16px;
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
        background: hsl(220 25% 5% / .78);
        backdrop-filter: blur(6px);
        border: 0;
        box-shadow: none;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    body.search-open { overflow: hidden; }

    html,
    body {
        overscroll-behavior-y: contain;
    }

    body.search-open .header-search-wrap .search-inner {
        width: 100%;
        max-width: 520px;
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: 20px;
        box-shadow: 0 24px 56px hsl(0 0% 0% / .5);
        padding: 14px;
        margin-top: 12vh;
    }

    .header-search {
        min-width: 0;
        max-width: none;
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 0 12px;
        gap: 8px;
        background: var(--bg3);
        border: 1px solid var(--border);
        border-radius: 20px;
        align-items: center;
    }

    .header-search #search-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        line-height: 1;
    }

    .header-search .search-close {
        display: grid;
        order: 1;
        color: var(--text);
    }

    .header-search input {
        order: 2;
        flex: 1;
        font-size: 16px;
        padding: 10px 0;
        min-height: 40px;
        color: var(--text);
        background: transparent;
        -webkit-text-fill-color: var(--text);
    }

    .header-search .search-submit-btn { order: 3; display: grid; }

    body.search-open .header-search-wrap .search-autocomplete {
        position: static;
        margin-top: 10px;
        max-height: min(50vh, 360px);
        box-shadow: none;
        border: 1px solid var(--border);
        background: var(--bg3);
        border-radius: 16px;
    }

    .search-item {
        padding: 12px;
        min-height: 44px;
    }

    .lang-switch { display: none; }

    .site-header .brand-text {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-header__inner {
        gap: 10px;
    }

    .nav-toggle,
    .header-search-toggle,
    .search-toggle,
    .header-actions .btn,
    .user-chip {
        min-width: 40px;
        min-height: 40px;
    }

    .bottom-nav__item {
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav__item:active {
        transform: scale(.96);
    }

    .sidebar-link {
        min-height: 44px;
    }

    form.filters { grid-template-columns: 1fr 1fr; }
    form.filters .filter:first-child,
    form.filters .submit.filter { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
}

/* ── v1.6: search popup, filters, pagination, aitem list ── */

/* ── v1.7: search stack, watch layout, badges, hero, header ── */

.header-search-wrap .search-inner {
    display: block;
    position: relative;
    width: 100%;
}

.header-search-wrap .header-search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex-wrap: nowrap;
}

.header-search-wrap .search-submit-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg2);
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}

.header-search-wrap .search-submit-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.header-search-wrap .search-autocomplete {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
    z-index: 200;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px hsl(0 0% 0% / .45);
    max-height: min(460px, 62vh);
    overflow: auto;
}

.header-search-wrap .search-autocomplete[hidden] {
    display: none !important;
}

.header-search-wrap.search-active .search-autocomplete:not([hidden]) {
    display: block;
}

.aitem-wrapper.mini.sugg .aitem:nth-child(even) {
    background: hsl(220 20% 8% / .35);
}

.aitem-wrapper .sfoot {
    padding: 12px;
    text-align: center;
    border-top: 1px solid var(--border);
}

.aitem-wrapper .more-btn {
    color: var(--muted);
    font-size: 12px;
    text-decoration: none;
}

.aitem-wrapper .more-btn:hover {
    color: var(--accent);
    text-decoration: none;
}


.sidebar-lang {
    margin-top: auto;
    padding: 14px 12px 16px;
    border-top: 1px solid var(--border);
}

.sidebar-lang--head {
    display: none;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    flex: 1;
    min-width: 0;
}

.sidebar-lang--head .sidebar-lang__label {
    display: none;
}

.sidebar-lang--head .lang-switch--sidebar {
    max-width: 120px;
    margin-left: auto;
}

body.sidebar-collapsed .sidebar-lang {
    padding: 10px 6px 12px;
}

body.sidebar-collapsed .sidebar-lang__label {
    display: none;
}

body.sidebar-collapsed .lang-switch--sidebar {
    flex-direction: column;
    gap: 4px;
}

body.sidebar-collapsed .lang-switch--sidebar button {
    padding: 8px 0;
    font-size: 11px;
    line-height: 1;
}

.sidebar-lang__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.lang-switch--sidebar {
    display: flex;
    gap: 6px;
}

.lang-switch--sidebar button {
    flex: 1;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--muted);
    cursor: pointer;
}

.lang-switch--sidebar button.active {
    border-color: hsl(172 66% 50% / .35);
    color: var(--accent);
    background: hsl(172 66% 50% / .1);
}

.site-sidebar {
    display: flex;
    flex-direction: column;
}

.hero-slide__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: hsl(220 20% 8% / .55);
}

.hero-badge.sub { color: var(--accent); border-color: hsl(172 66% 50% / .4); }
.hero-badge.dub { color: hsl(145 60% 55%); border-color: hsl(145 60% 55% / .4); }

.ani.items .item .card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 10px;
}

.ani.items .badge-sub,
.ani.items .badge-dub,
.ani.items .badge-total,
.aitem-wrapper .info .ep-total {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    color: var(--muted);
}

.ani.items .badge-sub,
.aitem-wrapper .info .sub {
    color: var(--accent);
    border-color: hsl(172 66% 50% / .35);
    background: hsl(172 66% 50% / .1);
}

.ani.items .badge-dub,
.aitem-wrapper .info .dub {
    color: hsl(145 60% 55%);
    border-color: hsl(145 60% 55% / .35);
    background: hsl(145 60% 55% / .1);
}

.watch-episodes-panel {
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.watch-episodes-panel .watch-panel-title {
    padding: 12px 14px 0;
    flex-shrink: 0;
}

.watch-episodes-panel #w-episodes {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.watch-episodes-panel #w-episodes .body {
    position: relative;
    margin: 10px 12px 12px;
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 1101px) {
    .watch-episodes-panel #w-episodes {
        flex: 1;
        min-height: 0;
    }

    .watch-episodes-panel #w-episodes .body {
        flex: 1;
        min-height: 280px;
        height: auto;
        max-height: none;
    }
}

.watch-episodes-panel #w-episodes .body .episodes {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.watch-side-rail .reco-section {
    padding: 12px 14px;
}

.watch-order-mount:empty {
    display: none;
}

#watch-order .w-side-section,
.watch-order-mount .w-side-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 12px 14px;
}

#watch-order .w-side-section .head .title,
.watch-order-mount .w-side-section .head .title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

#watch-order .scaff.side.items.md .item,
.watch-order-mount .scaff.side.items.md .item {
    display: block;
    margin-bottom: 10px;
}

#watch-order .flexserieslist,
.watch-order-mount .flexserieslist {
    cursor: pointer;
    opacity: 1;
    transition: background .2s, box-shadow .2s;
    border-radius: 6px;
    padding: 4px;
}

#watch-order .flexserieslist:hover,
.watch-order-mount .flexserieslist:hover {
    background: hsl(172 66% 50% / .06);
}

#watch-order .flexserieslist.is-selected,
.watch-order-mount .flexserieslist.is-selected {
    background: hsl(172 66% 50% / .12);
    box-shadow: inset 0 0 0 1px hsl(172 66% 50% / .35);
}

#watch-order .flexserieslist.has-relation:not(.is-selected),
.watch-order-mount .flexserieslist.has-relation:not(.is-selected) {
    background: hsl(220 20% 100% / .03);
}

#watch-order .flexserieslist .inner,
.watch-order-mount .flexserieslist .inner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

#watch-order .flexserieslist .poster,
.watch-order-mount .flexserieslist .poster {
    width: 52px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}

#watch-order .flexserieslist .poster img,
.watch-order-mount .flexserieslist .poster img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}

#watch-order .flexserieslist .info,
.watch-order-mount .flexserieslist .info {
    min-width: 0;
    flex: 1;
}

#watch-order .serieslabelitem,
.watch-order-mount .serieslabelitem {
    display: none;
    margin-bottom: 5px;
    color: var(--muted);
}

#watch-order .serieslabelitem.rel-chip,
.watch-order-mount .serieslabelitem.rel-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
}

#watch-order .rel-chip--selected,
.watch-order-mount .rel-chip--selected {
    color: hsl(172 70% 18%);
    background: var(--accent);
    border-color: var(--accent);
}

#watch-order .rel-chip--sequel,
.watch-order-mount .rel-chip--sequel {
    color: hsl(145 70% 72%);
    background: hsl(145 45% 28% / .35);
    border-color: hsl(145 45% 45% / .45);
}

#watch-order .rel-chip--prequel,
.watch-order-mount .rel-chip--prequel {
    color: hsl(210 90% 78%);
    background: hsl(210 70% 32% / .35);
    border-color: hsl(210 70% 55% / .45);
}

#watch-order .rel-chip--parent,
.watch-order-mount .rel-chip--parent,
#watch-order .rel-chip--summary,
.watch-order-mount .rel-chip--summary {
    color: hsl(8 80% 78%);
    background: hsl(8 50% 30% / .35);
    border-color: hsl(8 50% 50% / .4);
}

#watch-order .rel-chip--side,
.watch-order-mount .rel-chip--side {
    color: hsl(280 70% 80%);
    background: hsl(280 40% 30% / .35);
    border-color: hsl(280 40% 52% / .4);
}

#watch-order .rel-chip--alt,
.watch-order-mount .rel-chip--alt,
#watch-order .rel-chip--other,
.watch-order-mount .rel-chip--other {
    color: hsl(40 80% 78%);
    background: hsl(40 50% 28% / .35);
    border-color: hsl(40 50% 48% / .4);
}

#watch-order .flexserieslist .name,
.watch-order-mount .flexserieslist .name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    text-decoration: none;
    margin-bottom: 4px;
}

#watch-order .flexserieslist .meta,
.watch-order-mount .flexserieslist .meta {
    font-size: 11px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.watch-comments {
    padding: 14px 16px;
    margin-top: 20px;
    min-width: 0;
    max-width: 100%;
}

.watch-jump-comments {
    margin: 4px 0 12px;
}

.watch-view-comments-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--text);
    font: 600 13px var(--font-sans);
    cursor: pointer;
}

.watch-view-comments-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.watch-view-comments-ep,
.watch-comments-ep {
    color: var(--accent);
    font-weight: 600;
}

.mini-badge.badge-sub { color: var(--accent); }
.mini-badge.badge-dub { color: hsl(145 60% 55%); }

@media (max-width: 1100px) {
    .watch-page.page {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-top: 8px;
        padding-bottom: 28px;
    }

    .watch-wrap {
        padding-top: 8px;
    }

    .watch-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .watch-primary,
    .watch-side-rail {
        display: contents;
    }

    .watch-layout > *,
    .watch-primary > *,
    .watch-side-rail > *,
    #media-box > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .watch-layout #media-box,
    .watch-layout .watch-share,
    .watch-layout .share-row,
    .watch-layout .watch-jump-comments,
    .watch-layout #media-info,
    .watch-layout .watch-comments,
    .watch-layout #comments,
    .watch-layout .watch-episodes-panel,
    .watch-layout .watch-seasons-mount,
    .watch-layout #ani-seasons,
    .watch-layout #watch-order,
    .watch-layout .reco-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #media-box {
        display: contents;
    }

    #media-box > .media-wrap,
    #media-box > .watch-player-placeholder,
    #media-box > #media-controls,
    #media-box > #w-servers,
    #media-box > .watch-next-ep,
    #media-box > #watch-next-ep {
        order: 1;
    }

    #media-box > .media-wrap {
        border-bottom: 0;
        margin-bottom: 0;
    }

    #media-box > .media-controls {
        margin-top: 6px;
        margin-bottom: 12px;
        padding: 0 0 10px;
        border-top: 0;
        border-bottom: 1px solid var(--border);
        background: transparent;
        justify-content: flex-start;
        align-content: flex-start;
    }

    #media-box > #w-servers,
    #media-box > .watch-next-ep,
    #media-box > #watch-next-ep {
        margin-top: 0;
    }

    #media-box > .watch-next-ep,
    #media-box > #watch-next-ep {
        margin-top: 12px;
    }

    .watch-episodes-panel { order: 2; margin-top: 10px; }
    .watch-seasons-mount,
    #ani-seasons { order: 3; margin-top: 10px; }
    .watch-share,
    .share-row { order: 4; margin-top: 10px; }
    .watch-jump-comments { order: 5; margin-top: 10px; }
    #media-info { order: 6; margin-top: 10px; }
    #watch-order { order: 7; margin-top: 10px; }
    .watch-comments,
    #comments { order: 8; margin-top: 10px; }
    .reco-section { order: 9; margin-top: 10px; }

    .watch-side-rail {
        max-width: none;
    }

    #player-server,
    .player-server {
        flex-direction: column;
        max-width: 100%;
    }

    #player-server .server-note,
    .player-server .server-note {
        flex: none;
        width: 100%;
        max-width: none;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        text-align: center;
        align-items: center;
        padding: 10px 12px;
    }

    #player-server .server-wrap,
    .player-server .server-wrap {
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    #player-server .server-tab,
    .player-server .server-tab {
        justify-content: center;
    }

    #player-server .server-items.active,
    .player-server .server-items.active {
        justify-content: center;
    }

    .media-controls {
        gap: 4px;
    }

    .media-controls .ctrl {
        padding: 5px 8px;
    }

    .player-server-host,
    #w-servers {
        margin-top: 0;
    }

    .watch-seasons-mount {
        padding: 10px 12px;
    }

    .media-info {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .media-rating {
        grid-column: 1 / -1;
        text-align: left;
    }

    #w-episodes .body .episodes.number ul.ep-range.is-visible {
        grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    }

    .watch-comments,
    #comments {
        grid-column: 1 / -1;
        margin-left: 0;
        margin-right: 0;
    }

    .watch-episodes-panel #w-episodes .body {
        height: 20rem;
        max-height: 20rem;
    }

    #watch-order .w-side-section,
    .watch-order-mount .w-side-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    #watch-order .body,
    #watch-order .inner,
    .watch-order-mount .body,
    .watch-order-mount .inner {
        max-width: 100%;
        overflow: hidden;
    }

    #watch-order .scaff.side.items.md,
    .watch-order-mount .scaff.side.items.md {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    #watch-order .flexserieslist,
    .watch-order-mount .flexserieslist {
        width: 100%;
        max-width: 100%;
    }

    #watch-order .flexserieslist .name,
    .watch-order-mount .flexserieslist .name {
        display: block !important;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    .reco-section .aitem-wrapper {
        max-width: 100%;
    }

    .reco-section .aitem-wrapper.mini .aitem .title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .comments-mount {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comments-mount > div,
    .comments-mount iframe {
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {
    .site-sidebar__head {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }

    .site-sidebar__title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-sidebar__head .sidebar-close {
        flex-shrink: 0;
        margin-left: auto;
    }

    .sidebar-lang--head {
        display: block;
        order: 3;
        flex: 1 1 100%;
    }

    .sidebar-lang--head .sidebar-lang__label {
        display: block;
        margin-bottom: 6px;
    }

    .sidebar-lang--head .lang-switch--sidebar {
        max-width: none;
        margin-left: 0;
    }

    .sidebar-lang--foot {
        display: none;
    }

    .sidebar-lang {
        padding: 16px 14px 20px;
        background: var(--bg3);
    }

    .lang-switch--sidebar button {
        min-height: 42px;
        font-size: 13px;
    }

    body.search-open .header-search-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 14px;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    body.search-open .header-search-wrap .search-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 520px;
        margin-top: 10vh;
    }

    body.search-open .header-search-wrap .search-autocomplete {
        position: static;
        margin-top: 10px;
        width: 100%;
        max-height: min(55vh, 420px);
        box-shadow: none;
    }
}

.comments-mount {
    min-height: 160px;
}

.comments-fallback {
    padding: 12px 0;
    font-size: 13px;
}

.watch-panel-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
}

.search-loading {
    padding: 14px 12px;
    font-size: 13px;
}

.ku-paginator.section-paging {
    justify-content: center;
    margin-top: 20px;
}

.ku-paginator.section-paging a.page-prev,
.ku-paginator.section-paging a.page-next {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.ku-paginator.section-paging a.page-prev:hover,
.ku-paginator.section-paging a.page-next:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.aitem-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background: var(--bg2);
    overflow: hidden;
}

.aitem-wrapper.mini .aitem {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background .2s;
}

.aitem-wrapper.mini .aitem:last-child {
    border-bottom: 0;
}

.aitem-wrapper.mini .aitem:hover {
    background: var(--bg3);
    text-decoration: none;
}

.aitem-wrapper.mini .aitem .poster {
    flex-shrink: 0;
    width: 4.3rem;
    margin-right: .8rem;
    border-radius: .6rem;
    overflow: hidden;
}

.aitem-wrapper.mini .aitem .poster div {
    position: relative;
    padding: 72% 0;
}

.aitem-wrapper.mini .aitem .poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aitem-wrapper.mini .aitem .detail {
    min-width: 0;
    flex: 1;
}

.aitem-wrapper.mini .aitem .title {
    margin: 0 0 .2rem;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aitem-wrapper.mini .aitem .info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .35rem;
    font-size: .8rem;
}

.aitem-wrapper.mini .aitem .info .sub,
.aitem-wrapper.mini .aitem .info .dub {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    border: 1px solid;
    border-radius: .35rem;
    padding: 0 .35rem;
    height: 1.2rem;
    font-weight: 600;
    font-size: .75rem;
}

.aitem-wrapper.mini .aitem .info .sub {
    color: var(--accent);
    border-color: hsl(172 66% 50% / .45);
    background: hsl(172 66% 50% / .12);
}

.aitem-wrapper.mini .aitem .info .dub {
    color: hsl(145 60% 55%);
    border-color: hsl(145 60% 55% / .45);
    background: hsl(145 60% 55% / .12);
}

.aitem-wrapper.mini .aitem .info .sub i,
.aitem-wrapper.mini .aitem .info .dub i {
    font-size: .7rem;
}

.aitem-wrapper.mini .aitem .info span:not(.sub, .dub) {
    color: var(--muted);
    font-size: .85rem;
}

/* ── v2.0: grid card actions, tooltips, compact lists ── */
.ani.poster .poster-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 6;
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.ani.poster:hover .poster-actions,
.ani.poster:focus-within .poster-actions {
    opacity: 1;
    pointer-events: auto;
}

.card-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: hsl(220 25% 8% / .75);
    color: hsl(220 10% 88%);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s, color .15s, transform .15s;
}

.card-act:hover {
    background: hsl(220 20% 14% / .92);
    color: #fff;
    transform: scale(1.05);
}

.card-act--info.is-tip-loading {
    color: var(--accent);
}

.anime-tooltip-load {
    position: fixed;
    z-index: 1201;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(220 22% 10% / .94);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent);
    font-size: 14px;
    pointer-events: auto;
    opacity: 0;
    transform: scale(.92);
    transition: opacity .15s ease, transform .15s ease;
    box-shadow: 0 8px 24px hsl(0 0% 0% / .35);
}

.anime-tooltip-load.is-visible {
    opacity: 1;
    transform: scale(1);
}

.anime-tooltip {
    position: fixed;
    z-index: 1200;
    width: min(300px, calc(100vw - 20px));
    max-height: min(380px, 65vh);
    overflow: auto;
    background: hsl(220 22% 10% / .96);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 14px 40px hsl(0 0% 0% / .5);
    padding: 12px 14px;
    font-size: 12px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
}

.anime-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.anime-tooltip .title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}

.anime-tooltip .meta {
    margin-bottom: 8px;
}

.anime-tooltip .synopsis {
    color: var(--muted);
    line-height: 1.45;
    margin-bottom: 10px;
}

.anime-tooltip .meta-bl {
    display: grid;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 10px;
}

.anime-tooltip .meta-bl > div span:first-child {
    color: var(--text);
    font-weight: 600;
    margin-right: 4px;
}

.anime-tooltip .actions {
    display: flex;
    gap: 6px;
}

.anime-tooltip .actions .watch {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--accent);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
}

.anime-tooltip .actions .favourite span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.list-popover {
    position: fixed;
    z-index: 1201;
    width: 180px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 36px hsl(0 0% 0% / .45);
    overflow: hidden;
}

.list-popover--sheet {
    width: min(300px, calc(100vw - 32px));
    bottom: max(16px, env(safe-area-inset-bottom));
    border-radius: 14px;
    z-index: 1300;
}

@media (max-width: 560px) {
    #w-episodes .head.ep-head {
        padding: 10px;
        gap: 8px;
    }

    #w-episodes .head .ep-dd__btn {
        min-height: 40px;
        font-size: 13px;
    }

    #w-episodes .head .ep-search {
        min-height: 42px;
        padding: 8px 12px;
        border-radius: 10px;
    }

    #w-episodes .head .ep-search input {
        font-size: 16px;
    }
}

.list-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.list-popover__head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 999px;
    background: var(--bg3);
    color: var(--muted);
    cursor: pointer;
}

.list-popover__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}

.list-popover__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.list-popover__item:hover,
.list-popover__item.active {
    background: var(--bg3);
    color: var(--accent);
}

.list-popover__item.is-remove {
    color: hsl(0 70% 65%);
}

.schedule-empty {
    padding: 12px 4px;
    font-size: 13px;
}

.aitem-wrapper.mini.compact .aitem {
    padding: 8px 10px;
}

.aitem-wrapper.mini.compact .aitem .poster {
    width: 3.2rem;
    margin-right: .65rem;
}

.aitem-wrapper.mini.compact .aitem .poster div {
    padding: 68% 0;
}

.aitem-wrapper.mini.compact .aitem .title {
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 3px;
}

.aitem-wrapper.mini.compact .aitem .info {
    font-size: 10px;
    gap: 6px;
}

.aitem-wrapper.mini.sugg .aitem {
    padding: 8px 10px;
}

.aitem-wrapper.mini.sugg .aitem .poster {
    width: 2.85rem;
    margin-right: .6rem;
}

.aitem-wrapper.mini.sugg .aitem .poster div {
    padding: 68% 0;
}

.aitem-wrapper.mini.sugg .aitem .title {
    font-size: 12px;
    line-height: 1.3;
}

.aitem-wrapper.mini.sugg .aitem .info {
    font-size: 10px;
}

/* ── v2.4: user panel, auth, watch parity ── */
.brand-logo {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
}

.modal-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    justify-content: center;
}

.modal-social .btn-social {
    min-width: 0;
    flex: 1 1 0;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    gap: 8px;
}

.modal-social .btn-social i {
    font-size: 15px;
}

.modal-social .btn-social span {
    font-size: 13px;
    font-weight: 600;
}

/* ── Auth modal (#sign) — keep outside app-main; isolate from shorthand modal rules ── */
#sign.modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    margin: 0;
    background: transparent;
    border: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
}
#sign.modal[hidden] {
    display: none !important;
}
#sign .modal-backdrop {
    position: absolute;
    inset: 0;
    background: hsl(0 0% 0% / .68);
}
#sign .modal-dialog {
    position: relative;
    z-index: 1;
    width: min(400px, calc(100vw - 28px));
    max-width: 400px;
    max-height: min(92vh, 780px);
    margin: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#sign .modal-panel {
    display: block;
    padding: 0 !important;
    margin: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 22px 55px hsl(0 0% 0% / .42);
}
#sign .modal-panel[hidden] {
    display: none !important;
}
#sign .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--border);
}
#sign .modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-title, var(--text));
}
#sign .modal-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
#sign .modal-close:hover {
    background: var(--bg3);
    color: var(--text);
}
#sign .modal-body {
    padding: 18px !important;
}
#sign .modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#sign .modal-form .field {
    display: block;
    margin: 0;
}
#sign .modal-form input[type="text"],
#sign .modal-form input[type="email"],
#sign .modal-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}
#sign .modal-captcha {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}
#sign .modal-captcha > div {
    max-width: 100%;
}
#sign iframe[src*="recaptcha"],
#sign iframe[src*="hcaptcha"] {
    max-width: 100%;
}

@media (max-width: 480px) {
    #sign.modal {
        padding: 12px;
        align-items: center;
        justify-content: center;
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }
    #sign .modal-dialog {
        width: min(400px, calc(100vw - 24px));
        max-height: min(88dvh, calc(100vh - 24px));
        margin: auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    #sign .modal-body {
        padding: 16px 14px 18px !important;
    }
    #sign .modal-form-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    #sign .modal-alt__btn {
        min-height: 44px;
    }
    #sign .modal-captcha {
        transform: scale(.92);
        transform-origin: top center;
        margin-bottom: -6px;
    }
}

.modal-form [type="submit"].is-loading {
    opacity: .7;
    pointer-events: none;
}

.ku-user-panel {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: visible;
}

#user-slot {
    position: relative;
    overflow: visible;
}

.ku-user-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0;
}

.ku-user-btn--bell {
    width: 40px;
    height: 40px;
    position: relative;
    border-radius: 10px;
}

.ku-user-btn--bell.has-unread {
    border-color: var(--accent);
    color: var(--accent);
}

.ku-user-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #041018;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
}

.ku-user-btn--avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.ku-user-btn--avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#user-slot .dropdown {
    position: relative;
    overflow: visible;
}

#user-slot .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 120;
    padding: 6px;
}

#user-slot .dropdown.open .dropdown-menu {
    display: block;
}

.ku-user-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: calc(var(--radius) - 2px);
    color: var(--text);
    text-decoration: none !important;
    font-size: 13px;
}

.ku-user-menu__item:hover {
    background: var(--bg3);
    color: var(--accent);
}

.ku-user-menu__item--staff {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
    color: var(--accent);
}

.ku-user-menu__item--logout {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
    color: hsl(0 70% 68%);
}

.ku-notify-menu {
    width: min(400px, 94vw);
    max-width: calc(100vw - 16px);
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 720px) {
    /* Avoid html/body overflow-x: clip cutting the panel on narrow Android */
    #user-slot .ku-notify-dropdown.open .ku-notify-menu {
        display: block;
        position: fixed;
        top: calc(var(--header-h, 56px) + 6px);
        left: 10px;
        right: 10px;
        width: auto;
        min-width: 0;
        max-width: none;
        z-index: 130;
    }

    #user-slot .ku-user-dropdown.open .ku-user-menu {
        display: block;
        position: fixed;
        top: calc(var(--header-h, 56px) + 6px);
        right: 10px;
        left: auto;
        width: min(260px, calc(100vw - 20px));
        z-index: 130;
    }
}

.ku-notify-menu__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.ku-notify-menu__title {
    font-size: 13px;
    font-weight: 700;
}

.ku-notify-mark {
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 11px;
    cursor: pointer;
}

.ku-notify-menu__body {
    max-height: 320px;
    overflow: auto;
}

.ku-notify-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    color: var(--text);
    text-decoration: none !important;
    border-bottom: 1px solid var(--border);
}

.ku-notify-item:hover {
    background: var(--bg3);
}

.ku-notify-item .poster img {
    width: 42px;
    height: 58px;
    object-fit: cover;
    border-radius: 4px;
}

.ku-notify-item .info {
    flex: 1;
    min-width: 0;
    font-size: 12px;
}

.ku-notify-item .highlight {
    color: var(--accent);
}

.ku-notify-menu__foot {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: var(--accent);
    text-decoration: none !important;
    border-top: 1px solid var(--border);
}

/* ── Continue watching (same grid as Latest Episode + progress bar) ── */
.ku-continue-section {
    margin-bottom: 20px;
}

.ku-continue-grid {
    min-width: 0;
}

.ku-continue-grid .adult {
    position: absolute;
    left: auto;
    right: 5px;
    top: 5px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 16px;
    padding: 0 5px;
    border-radius: 3px;
    background: #e04b59;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
}

.ku-continue-grid .adult::after {
    content: none;
}

.ku-continue-grid .meta.playing {
    height: 28px;
    line-height: 28px;
    background: hsl(220 22% 8% / .94);
}

.ku-continue-grid .meta.playing .inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 600;
    color: hsl(220 10% 82%);
}

.ku-continue-grid .meta.playing .inner .right {
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: hsl(220 10% 72%);
}

.ku-continue-grid .meta.playing .progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    margin: 0;
    z-index: 3;
    background: hsl(220 20% 14%);
}

.ku-continue-grid .meta.playing .progress > span {
    display: block;
    height: 100%;
    background: var(--accent);
    opacity: 1;
    box-shadow: 0 0 8px hsl(172 66% 50% / .45);
}

.ku-continue-grid .playing-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    z-index: 8;
    opacity: 0;
    cursor: pointer;
    transition: opacity .2s, transform .2s;
}

.ku-continue-grid .playing-remove::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: #222;
    line-height: 24px;
    display: block;
    text-align: center;
}

.ku-continue-grid .ani.poster:hover .playing-remove,
.ku-continue-grid .playing-remove:focus-visible {
    opacity: 1;
}

.ku-continue-grid .playing-remove:hover::before {
    color: hsl(0 65% 50%);
}

.account-page-content .ku-continue-grid {
    margin-top: 4px;
}

@media (max-width: 767px) {
    .ku-continue-grid .playing-remove {
        opacity: 1;
    }
}

#player {
    position: relative;
}

.player-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    background: hsl(168 65% 42% / .92);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgb(0 0 0 / .35);
}

.player-play:hover {
    transform: scale(1.05);
}

.player-play[hidden] {
    display: none !important;
}

.ctrl-dropdown.favourite {
    position: relative;
}

.ctrl-dropdown.favourite .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 50;
    padding: 4px;
}

.ctrl-dropdown.favourite.open .dropdown-menu {
    display: block;
}

.ctrl-dropdown.favourite .dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 8px 10px;
    border-radius: calc(var(--radius) - 2px);
    font-size: 12px;
    cursor: pointer;
}

.ctrl-dropdown.favourite .dropdown-item:hover,
.ctrl-dropdown.favourite .dropdown-item.active {
    background: var(--bg3);
    color: var(--accent);
}

.ctrl-dropdown.favourite .dropdown-item.is-remove {
    color: hsl(0 70% 68%);
}

.media-controls .ctrl.check.on {
    color: var(--accent);
}

/* ── v2.6: member area (account pages) ── */
.collapse:not(.show) {
    display: none;
}

.collapse.show {
    display: block;
}

.page-account .page-wide {
    padding: 16px 18px 28px;
}

.account-page-content {
    padding: 16px 18px;
    min-width: 0;
}

.account-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.account-page-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.account-page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ku-member-hint,
.ku-form-hint {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 12px;
}

.ku-member-section { min-width: 0; }

.ku-member-empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--muted);
}

.ku-member-empty i {
    font-size: 28px;
    margin-bottom: 10px;
    opacity: .6;
}

.ku-member-empty p { margin: 0; font-size: 14px; }

.ku-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 18px 0;
}

/* Forms */
.ku-member-form .ku-form-row,
.account-page-content .form-group.row {
    display: grid;
    grid-template-columns: minmax(130px, 200px) 1fr;
    gap: 8px 16px;
    align-items: start;
    margin-bottom: 14px;
}

.ku-form-label,
.account-page-content .col-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding-top: 8px;
}

.ku-form-field,
.account-page-content .col-md-5,
.account-page-content .col-md-9 {
    min-width: 0;
}

.ku-input,
.account-page-content .form-control {
    width: 100%;
    max-width: 100%;
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
}

.ku-input--narrow { max-width: 90px; }

.ku-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.ku-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.ku-radio input { accent-color: var(--accent); }

.ku-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.ku-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ku-switch-ui {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--bg3);
    border: 1px solid var(--border);
    position: relative;
    transition: background .2s, border-color .2s;
}

.ku-switch-ui::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text);
    transition: transform .2s;
}

.ku-switch input:checked + .ku-switch-ui {
    background: hsl(172 66% 50% / .2);
    border-color: var(--accent);
}

.ku-switch input:checked + .ku-switch-ui::after {
    transform: translateX(18px);
    background: var(--accent);
}

.ku-form-actions,
.account-page-content .text-center.mt-4 {
    margin-top: 18px;
    padding-top: 8px;
}

/* Profile */
.ku-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.ku-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--border);
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.ku-profile-avatar-btn {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 0;
}
.ku-profile-avatar-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.ku-profile-avatar-btn__edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 11px;
    transition: border-color var(--ease-ui), color var(--ease-ui), background var(--ease-ui);
}
.ku-profile-avatar-btn:hover .ku-profile-avatar-btn__edit,
.ku-profile-avatar-btn[aria-expanded="true"] .ku-profile-avatar-btn__edit {
    border-color: var(--accent);
    color: var(--accent);
    background: hsl(172 66% 50% / .12);
}
.ku-avatar-open-btn {
    margin-top: 10px;
}

/* Inline avatar studio (not a modal) */
.ku-avatar-studio {
    margin: -6px 0 18px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
}
.ku-avatar-studio:not(.show) { display: none; }
.ku-avatar-studio.show { display: block; }

.ku-avatar-studio__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.ku-avatar-studio__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title, var(--text));
}
.ku-avatar-studio__hint {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.ku-avatar-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin: 0 -2px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.ku-avatar-chip {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--ease-ui), color var(--ease-ui), background var(--ease-ui);
}
.ku-avatar-chip:hover {
    color: var(--text);
    border-color: hsl(220 14% 28%);
}
.ku-avatar-chip.is-active {
    color: var(--accent);
    border-color: hsl(172 66% 50% / .45);
    background: hsl(172 66% 50% / .1);
}

.ku-avatar-panel { display: none; }
.ku-avatar-panel.is-active { display: block; }

.ku-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    max-height: min(42vh, 320px);
    overflow-y: auto;
    padding: 4px 2px 2px;
    -webkit-overflow-scrolling: touch;
}
.ku-avatar-opt {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    background: var(--bg);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--ease-ui), transform var(--ease-ui), box-shadow var(--ease-ui);
}
.ku-avatar-opt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ku-avatar-opt:hover {
    border-color: hsl(220 14% 30%);
    transform: translateY(-1px);
}
.ku-avatar-opt.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px hsl(172 66% 50% / .2);
}
.ku-avatar-opt.is-saving {
    opacity: 0.7;
    pointer-events: none;
}
.ku-avatar-opt.is-selected::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23081a16' d='M6.2 11.4 3.1 8.3l1.1-1.1 2 2 5-5 1.1 1.1z'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.ku-profile-head__body { min-width: 0; }

.ku-profile-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.ku-profile-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    word-break: break-word;
}

.ku-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.ku-profile-badge--ok {
    color: var(--accent);
    background: hsl(172 66% 50% / .1);
    border: 1px solid hsl(172 66% 50% / .25);
}

.ku-profile-badge--pending {
    color: hsl(40 80% 65%);
    background: hsl(40 30% 14% / .5);
    border: 1px solid hsl(40 50% 35% / .35);
}

.ku-profile-verify-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.ku-profile-verify-banner p { margin: 0; }

.ku-profile-section-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.ku-profile-password {
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: hsl(172 66% 50% / .03);
}

.ku-profile-password-toggle { margin-bottom: 0; }

.cm-verify-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    padding: 20px;
    overflow: auto;
    background: rgba(0, 0, 0, .6);
}

.cm-verify-modal[hidden] { display: none; }

.cm-verify-dialog {
    width: min(100%, 520px);
    margin-top: 48px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

.cm-verify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.cm-verify-title { font-weight: 700; font-size: 15px; }

.cm-verify-close {
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    opacity: .8;
    cursor: pointer;
}

.cm-verify-close:hover { opacity: 1; }

.cm-verify-body { padding: 14px 16px 16px; }

body.cm-verify-modal-open { overflow: hidden; }

.btn.btn-primary,
.btn.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
}

.btn.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #041018;
}

.btn.btn-ghost {
    background: var(--bg2);
    color: var(--text);
}

.btn.btn-primary:hover { filter: brightness(1.05); }
.btn.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn.is-loading { opacity: .7; pointer-events: none; }
.btn-sm { padding: 6px 10px; font-size: 12px; }

/* Continue watching member page — film_list-continue grid (see block above) */

/* Watch list */
.ku-folder-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.ku-folder-tab {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    background: var(--bg);
}

.ku-folder-tab:hover,
.ku-folder-tab.active {
    color: var(--accent);
    border-color: hsl(172 66% 50% / .4);
    background: hsl(172 66% 50% / .08);
    text-decoration: none;
}

.ku-watchlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
    min-width: 0;
}

.ku-watchlist-empty {
    grid-column: 1 / -1;
}

.ku-watchlist-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    min-width: 0;
}

.ku-watchlist-item .poster {
    display: block;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg3);
}

.ku-watchlist-item .poster img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}

.ku-watchlist-item .poster .adult {
    position: absolute;
    left: auto;
    right: 4px;
    top: 4px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 15px;
    padding: 0 4px;
    border-radius: 3px;
    background: #e04b59;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.ku-watchlist-item .poster .adult::after {
    content: none;
}

.ku-watchlist-item .info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ku-watchlist-item .name {
    min-width: 0;
}

.ku-watchlist-item__title,
.ku-watchlist-item .name .d-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    text-decoration: none;
}

.ku-watchlist-item__title:hover,
.ku-watchlist-item .name .d-title:hover {
    color: var(--accent);
}

.ku-watchlist-item .detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
}

.ku-watchlist-item .folder-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.ku-watchlist-item .folder-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.ku-watchlist-item .ep {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.ku-watchlist-item .ep span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.ku-watchlist-item .ep .current {
    color: var(--text);
    font-weight: 600;
}

.ku-watchlist-item .watch-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
}

.ku-watchlist-item .watch-status:hover {
    border-color: var(--border);
    background: var(--bg3);
    color: var(--text);
}

.ku-watchlist-item .watch-status.is-watched {
    border-color: hsl(172 66% 50% / .5);
    background: hsl(172 66% 50% / .18);
    color: hsl(172 75% 42%);
}

.ku-watchlist-item .watch-status.is-watched:hover {
    border-color: hsl(172 66% 45%);
    background: hsl(172 66% 50% / .28);
    color: hsl(172 75% 42%);
}

.ku-watchlist-item .next-ep {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: var(--radius);
    background: hsl(40 70% 50% / .12);
    border: 1px solid hsl(40 60% 45% / .25);
    color: hsl(40 85% 65%);
    font-size: 10px;
    font-weight: 600;
    max-width: 100%;
}

.ku-watchlist-item .next-ep:empty {
    display: none;
}

.ku-watchlist-item .next-ep .count-down {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.ku-folder-dd {
    position: relative;
}

.ku-folder-dd .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 140px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 40;
    padding: 4px;
}

.ku-folder-dd.open .dropdown-menu { display: block; }

.ku-folder-dd .dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 8px 10px;
    border-radius: calc(var(--radius) - 2px);
    font-size: 12px;
    cursor: pointer;
}

.ku-folder-dd .dropdown-item:hover,
.ku-folder-dd .dropdown-item.active {
    background: var(--bg3);
    color: var(--accent);
}

/* Notifications list — scaff / noti-item pattern */
.ku-notify-items,
.ku-notif-list.items-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
}

.ku-notify-items .scaff.items,
.ku-notif-list.items-wrap .scaff.items {
    display: flex;
    flex-direction: column;
}

.ku-notify-items .noti-item,
.ku-notif-list.items-wrap .noti-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.ku-notify-items .noti-item:last-child,
.ku-notif-list.items-wrap .noti-item:last-child {
    border-bottom: 0;
}

.ku-notify-items .noti-item:hover,
.ku-notif-list.items-wrap .noti-item:hover {
    background: var(--bg3);
}

.ku-notify-items .noti-item.new,
.ku-notif-list.items-wrap .noti-item.new {
    background: hsl(172 66% 50% / .06);
}

.ku-notify-items .noti-item.old,
.ku-notif-list.items-wrap .noti-item.old {
    opacity: .62;
}

.ku-notify-items .noti-item .poster span,
.ku-notif-list.items-wrap .noti-item .poster span {
    display: block;
    width: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg2);
}

.ku-notify-items .noti-item .poster img,
.ku-notif-list.items-wrap .noti-item .poster img {
    width: 72px;
    height: 102px;
    object-fit: cover;
    display: block;
}

.ku-notify-items .noti-item .info,
.ku-notif-list.items-wrap .noti-item .info {
    flex: 1;
    min-width: 0;
}

.ku-notify-items .noti-item .content .title,
.ku-notif-list.items-wrap .noti-item .content .title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
}

.ku-notify-items .noti-item .content .highlight,
.ku-notif-list.items-wrap .noti-item .content .highlight {
    display: block;
    font-size: 12px;
    color: var(--accent);
}

.ku-notify-items .noti-item time,
.ku-notif-list.items-wrap .noti-item time {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
}

.ku-notify-items .no-result,
.ku-notif-list.items-wrap .no-result {
    padding: 48px 20px;
    text-align: center;
    color: var(--muted);
}

.ku-notify-head {
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.ku-notify-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ku-notify-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
}

a.ku-notify-tab:hover {
    color: var(--text);
    background: var(--bg3);
}

.ku-notify-tab.active {
    background: hsl(172 66% 50% / .12);
    color: var(--accent);
}

.ku-notify-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-size: 10px;
    font-weight: 700;
}

.ku-notify-menu__head {
    flex-wrap: wrap;
    gap: 8px;
}

.ku-notify-bell-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.ku-notify-bell-tabs > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

.ku-notify-bell-tabs > span:hover {
    color: var(--text);
    background: var(--bg3);
}

.ku-notify-bell-tabs > span.active {
    color: var(--accent);
    background: hsl(172 66% 50% / .12);
}

.ku-notify-bell-pane {
    display: none;
}

.ku-notify-bell-pane.active {
    display: block;
}

.ku-notify-mark.d-none,
.d-none {
    display: none !important;
}

.ku-notify-menu {
    width: min(380px, calc(100vw - 20px));
}

.ku-notify-items .noti-system {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    color: inherit;
}

.ku-notify-items .noti-system:last-child {
    border-bottom: 0;
}

.ku-notify-items .noti-system.new {
    background: hsl(172 66% 50% / .06);
}

.ku-notify-items .noti-system.old {
    opacity: 0.72;
}

.ku-notify-items .system-noti-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(172 66% 50% / .16);
    color: var(--accent);
    font-size: 1rem;
}

.ku-notify-items .noti-system[data-category="ban_permanent"] .system-noti-icon,
.ku-notify-items .noti-system[data-category="warn"] .system-noti-icon {
    background: hsl(0 72% 51% / .16);
    color: var(--red);
}

.ku-notify-items .noti-system[data-category="mute"] .system-noti-icon {
    background: hsl(38 92% 50% / .16);
    color: #fbbf24;
}

.ku-notify-items .noti-system[data-category="unban"] .system-noti-icon {
    background: hsl(142 70% 45% / .16);
    color: #4ade80;
}

.ku-notify-items .system-noti-main {
    flex: 1;
    min-width: 0;
}

.ku-notify-items .system-noti-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ku-notify-items .system-noti-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.ku-notify-items .system-noti-badge {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    background: hsl(172 66% 50% / .14);
}

.ku-notify-items .system-noti-body {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.ku-notify-items .system-noti-reason {
    margin: 6px 0 0;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text);
    background: var(--bg3);
}

.ku-notify-items .system-noti-reason span {
    color: var(--muted);
    font-weight: 600;
    margin-right: 4px;
}

.ku-notify-items .system-noti-time {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
}

.ku-notify-items .noti-item.noti-mention .poster span {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.ku-notify-items .noti-item.noti-mention .poster .user-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.ku-notify-items .noti-item .noti-mention-user {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 4px;
}

.ku-notify-items .noti-item .noti-mention-manga {
    display: block;
    font-size: 12px;
    color: var(--accent);
}

/* Related / watch-order collapse */
.rel-collapse-hidden { display: none !important; }

.rel-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--muted);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.rel-collapse-toggle:hover {
    background: var(--bg3);
    border-color: var(--accent);
    color: var(--text);
}

.rel-collapse-toggle .rel-collapse-caret {
    display: inline-block;
    transition: transform .2s ease;
}

.rel-collapse-toggle.is-open .rel-collapse-caret {
    transform: rotate(180deg);
}

/* Notifications list (legacy ku-notif-list grid) */
.ku-notif-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.ku-notif-list__item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    padding: 12px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.ku-notif-list__item:last-child { border-bottom: 0; }
.ku-notif-list__item:hover { background: var(--bg3); }
.ku-notif-list__item.old { opacity: .65; }

.ku-notif-list__poster img {
    width: 52px;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 4px;
}

.ku-notif-list__body { min-width: 0; }

.ku-notif-list__title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}

.ku-notif-list__highlight {
    display: block;
    font-size: 12px;
    color: var(--accent);
    margin-bottom: 4px;
}

.ku-notif-list__body time {
    font-size: 11px;
    color: var(--muted);
}

/* Tabs (MAL import) */
.ku-tabs__nav {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.ku-tabs__btn {
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ku-tabs__btn.active {
    color: var(--accent);
    border-color: var(--border);
    border-bottom-color: var(--bg2);
    background: var(--bg);
}

.ku-tab-pane[hidden] { display: none !important; }

/* AniList sync inside member card */
.anilist-sync-wrapper {
    font-size: 13px;
    min-width: 0;
}

.anilist-sync-wrapper .al-sync-feedback { margin-bottom: 12px; }

.anilist-sync-wrapper .al-sync-info {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    color: var(--muted);
    line-height: 1.55;
}

.anilist-sync-wrapper .al-sync-info p { margin: 0 0 8px; }
.anilist-sync-wrapper .al-sync-info ul { margin: 0; padding-left: 1.2rem; }
.anilist-sync-wrapper .al-sync-info li { margin-bottom: 4px; }

.anilist-sync-wrapper .al-sync-actions {
    text-align: center;
}

.anilist-sync-wrapper .al-sync-warning {
    color: hsl(40 90% 62%);
    margin: 0;
}

.anilist-sync-wrapper .al-sync-connected {
    margin: 0 0 12px;
    color: var(--text);
}

.anilist-sync-wrapper .al-sync-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.anilist-sync-wrapper .al-sync-toggle-row label:last-child {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.anilist-sync-wrapper .al-sync-pct-block {
    max-width: 440px;
    margin: 0 auto 18px;
    text-align: left;
}

.ku-pct-slider {
    width: 100%;
    padding: 14px 14px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, hsl(172 66% 50% / .06), transparent 48%),
        var(--bg);
}

.ku-pct-slider__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ku-pct-slider__copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ku-pct-slider__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.ku-pct-slider__sub {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.ku-pct-slider__badge {
    flex: 0 0 auto;
    min-width: 3.4rem;
    padding: 6px 10px;
    border-radius: 8px;
    background: hsl(172 66% 50% / .14);
    border: 1px solid hsl(172 66% 50% / .35);
    color: var(--accent2);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    letter-spacing: 0.02em;
}

.ku-pct-slider__control {
    padding: 2px 2px 0;
}

.ku-pct-slider__range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
    accent-color: var(--accent);
}

.ku-pct-slider__range:focus-visible {
    outline: none;
}

.ku-pct-slider__range:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--focus-ring), 0 0 0 2px var(--bg), 0 2px 8px hsl(0 0% 0% / .45);
}

.ku-pct-slider__range:focus-visible::-moz-range-thumb {
    box-shadow: var(--focus-ring), 0 0 0 2px var(--bg), 0 2px 8px hsl(0 0% 0% / .45);
}

.ku-pct-slider__range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) var(--ku-pct, 0%),
        var(--bg3) var(--ku-pct, 0%),
        var(--bg3) 100%
    );
}

.ku-pct-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid hsl(180 12% 96%);
    box-shadow: 0 2px 8px hsl(0 0% 0% / .45);
    cursor: grab;
    transition: transform .12s ease;
}

.ku-pct-slider__range:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.08);
}

.ku-pct-slider__range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg3);
}

.ku-pct-slider__range::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
}

.ku-pct-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid hsl(180 12% 96%);
    box-shadow: 0 2px 8px hsl(0 0% 0% / .45);
    cursor: grab;
}

.ku-pct-slider__ends {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.ku-form-field .ku-pct-slider {
    max-width: 420px;
}

.anilist-sync-wrapper .al-sync-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.anilist-sync-wrapper .al-token-expiry,
.anilist-sync-wrapper .al-last-sync {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
}

.anilist-sync-wrapper .al-token-countdown {
    font-weight: 700;
    color: var(--text);
    margin: 4px 0;
}

.anilist-sync-wrapper .al-token-date { font-size: 11px; margin: 0; }

.anilist-sync-wrapper .al-domain-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.anilist-sync-wrapper .al-btn-oauth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: min(100%, 300px);
}

.anilist-sync-wrapper .al-domain-actions__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
}

.anilist-sync-wrapper .al-domain-actions__link:hover { color: var(--accent); }

.anilist-sync-wrapper .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.anilist-sync-wrapper .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #041018;
}

.anilist-sync-wrapper .btn-ghost {
    background: var(--bg2);
    color: var(--text);
}

.ku-alert {
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    border: 1px solid var(--border);
}

.ku-alert--ok { border-color: var(--accent); color: var(--accent); background: hsl(172 66% 50% / .08); }
.ku-alert--info { border-color: hsl(210 60% 50% / .4); color: hsl(210 70% 72%); background: hsl(210 40% 18% / .4); }
.ku-alert--err { border-color: hsl(0 55% 45% / .45); color: hsl(0 65% 68%); background: hsl(0 30% 14% / .5); }

.account-menu a,
.account-menu .account-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

.account-menu .account-menu-short {
    display: none;
}

@media (max-width: 900px) {
    .page-account .page-wide {
        padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
    }

    .page-account .account-layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .page-account .account-sidebar.card {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg2);
        box-sizing: border-box;
        overflow: hidden;
    }

    .page-account .account-user {
        display: none;
    }

    .page-account .account-menu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 10px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }

    .page-account .account-menu .account-menu-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 8px 4px;
        min-height: 58px;
        text-align: center;
        border: 1px solid var(--border);
        background: var(--bg);
        font-size: 10px;
        font-weight: 600;
        line-height: 1.25;
        border-radius: var(--radius);
    }

    .page-account .account-menu .account-menu-link i {
        font-size: 14px;
        opacity: .9;
        margin: 0;
    }

    .page-account .account-menu .account-menu-label {
        display: none;
    }

    .page-account .account-menu .account-menu-short {
        display: block;
    }

    .page-account .account-menu .account-menu-link:hover,
    .page-account .account-menu .account-menu-link.active {
        background: hsl(172 66% 50% / .1);
        border-color: hsl(172 66% 50% / .4);
        color: var(--accent);
    }

    .page-account .account-menu .account-logout {
        grid-column: 1 / -1;
        flex-direction: row;
        min-height: 40px;
        color: hsl(0 70% 65%);
        border-color: hsl(0 40% 35% / .4);
    }

    .page-account .account-menu .account-logout .account-menu-short {
        display: none;
    }

    .page-account .account-menu .account-logout .account-menu-label {
        display: inline;
    }

    .page-account .account-page-content.card {
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg2);
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .page-account .account-page-content {
        padding: 16px 14px 20px;
    }

    .ku-profile-head {
        flex-direction: column;
        text-align: center;
    }

    .ku-profile-meta { word-break: normal; }

    .ku-watchlist-item {
        grid-template-columns: 64px 1fr;
        padding: 8px;
    }

    .ku-watchlist-item .next-ep .count-down {
        max-width: 100px;
    }

    .ku-member-form .ku-form-row,
    .account-page-content .form-group.row {
        grid-template-columns: 1fr;
    }

    .ku-form-label,
    .account-page-content .col-form-label {
        padding-top: 0;
    }
}

@media (max-width: 520px) {
    .ku-watchlist {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .account-page-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   SEO landing page
   ============================================================ */
body.page-landing {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

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

.landing {
    overflow-x: hidden;
}

.landing-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 20px 64px;
    max-width: 680px;
    margin: 0 auto;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    text-decoration: none;
}

.landing-brand img,
.landing-brand .brand-logo {
    max-height: 52px;
    width: auto;
}

.landing-brand__text {
    font: 800 28px/1 var(--font-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
}

.landing-brand__text::first-letter {
    color: var(--accent);
}

.landing-hero__title {
    font: 700 clamp(28px, 5vw, 40px)/1.15 var(--font-sans);
    letter-spacing: -.02em;
    margin-bottom: 28px;
    color: var(--text);
}

.landing-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px 6px 6px 14px;
    gap: 8px;
    margin-bottom: 16px;
}

.landing-search__icon {
    color: var(--muted);
    font-size: 15px;
    flex-shrink: 0;
}

.landing-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: 500 16px var(--font-sans);
    outline: none;
    min-height: 44px;
}

.landing-search input::placeholder {
    color: var(--muted);
}

.landing-search__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--accent);
    color: hsl(220 25% 5%);
    font: 600 13px var(--font-sans);
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.landing-search__filter i {
    font-size: 14px;
}

.landing-search__filter:hover {
    background: var(--accent2);
    color: hsl(220 25% 5%);
    text-decoration: none;
}

.landing-suggest__label {
    color: var(--muted);
    flex-shrink: 0;
}

.landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 560px;
    margin-top: 24px;
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    min-height: 46px;
    text-decoration: none;
}

.landing-btn--outline {
    background: transparent;
    border: 1px solid hsl(220 18% 22%);
    color: var(--text);
}

.landing-btn--outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: hsl(172 66% 50% / .06);
    text-decoration: none;
}

.landing-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    max-width: 560px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.landing-suggest a {
    color: var(--muted);
    text-decoration: none;
}

.landing-suggest a:hover {
    color: var(--accent);
}

.landing-suggest__sep {
    opacity: .45;
}

.landing-section {
    padding: 72px 20px;
    border-top: 1px solid var(--border);
}

.landing-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
    gap: 48px;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
}

.landing-section__inner--reverse .landing-section__copy {
    order: 2;
}

.landing-section__inner--reverse .landing-visual {
    order: 1;
}

.landing-kicker {
    font: 700 11px/1 var(--font-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

.landing-heading {
    font: 700 clamp(24px, 3.5vw, 34px)/1.2 var(--font-sans);
    letter-spacing: -.02em;
    margin-bottom: 20px;
    color: var(--text);
}

.landing-heading em,
.landing-accent {
    font-style: normal;
    color: var(--accent);
}

.landing-prose {
    color: hsl(180 8% 72%);
    font-size: 15px;
    line-height: 1.7;
}

.landing-prose p + p {
    margin-top: 14px;
}

.landing-visual {
    position: relative;
    min-height: 380px;
}

.landing-visual--posters {
    min-height: 420px;
}

.landing-poster {
    position: absolute;
    width: clamp(110px, 18vw, 160px);
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 40px hsl(0 0% 0% / .45);
    border: 1px solid hsl(220 18% 18% / .8);
    transition: transform .25s ease, box-shadow .25s ease;
}

.landing-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.landing-poster:hover {
    transform: rotate(0deg) scale(1.04) !important;
    box-shadow: 0 22px 48px hsl(172 66% 50% / .12);
    z-index: 10 !important;
}

.landing-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid hsl(172 66% 50% / .35);
    pointer-events: none;
}

.landing-ring--1 {
    right: 14%;
    top: 10%;
    width: 28px;
    height: 28px;
}

.landing-ring--2 {
    left: 4%;
    bottom: 14%;
    width: 18px;
    height: 18px;
    border-color: hsl(172 66% 50% / .2);
}

.landing-badge {
    position: absolute;
    right: 0;
    bottom: 18%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: hsl(220 20% 8% / .92);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    z-index: 6;
}

.landing-badge i {
    color: var(--accent);
    font-size: 18px;
}

.landing-badge strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
}

.landing-badge span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.landing-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.landing-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.landing-feature__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 16px;
}

.landing-features h3 {
    font: 700 15px/1.3 var(--font-sans);
    margin-bottom: 4px;
}

.landing-features p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

.landing-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font: 600 14px var(--font-sans);
    color: var(--text);
    text-decoration: none;
}

.landing-link:hover {
    color: var(--accent);
    text-decoration: none;
}

.landing-link i {
    font-size: 12px;
    transition: transform .2s ease;
}

.landing-link:hover i {
    transform: translateX(3px);
}

.landing-visual--collage {
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-collage {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: 4 / 3;
    transform: rotate(-4deg);
}

.landing-collage__item {
    position: absolute;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid hsl(220 18% 16%);
    box-shadow: 0 12px 28px hsl(0 0% 0% / .35);
}

.landing-collage__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.88);
    transition: filter .2s ease;
}

.landing-collage__item:hover img {
    filter: brightness(1);
}

.landing-collage__item--1 { left: 0; top: 8%; width: 42%; height: 38%; transform: rotate(-3deg); z-index: 1; }
.landing-collage__item--2 { left: 34%; top: 0; width: 38%; height: 34%; transform: rotate(4deg); z-index: 3; }
.landing-collage__item--3 { right: 0; top: 14%; width: 36%; height: 32%; transform: rotate(-5deg); z-index: 2; }
.landing-collage__item--4 { left: 6%; bottom: 8%; width: 40%; height: 36%; transform: rotate(5deg); z-index: 4; }
.landing-collage__item--5 { left: 38%; bottom: 4%; width: 34%; height: 34%; transform: rotate(-2deg); z-index: 5; }
.landing-collage__item--6 { right: 4%; bottom: 10%; width: 32%; height: 30%; transform: rotate(6deg); z-index: 2; }
.landing-collage__item--7 { left: 22%; top: 34%; width: 28%; height: 26%; transform: rotate(-6deg); z-index: 6; opacity: .9; }
.landing-collage__item--8 { right: 18%; top: 38%; width: 26%; height: 24%; transform: rotate(3deg); z-index: 1; opacity: .85; }

.landing-footer {
    padding: 28px 20px 40px;
    text-align: center;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 900px) {
    .landing-section__inner,
    .landing-section__inner--reverse {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .landing-section__inner--reverse {
        display: flex;
        flex-direction: column;
    }

    .landing-section__inner--reverse .landing-section__copy {
        order: 1;
    }

    .landing-section__inner--reverse .landing-visual {
        order: 2;
    }

    .landing-visual {
        position: relative;
        min-height: 0;
        max-width: 100%;
        margin: 0 auto;
    }

    .landing-visual--posters {
        min-height: 240px;
        width: min(100%, 360px);
        max-width: 360px;
        margin: 8px auto 0;
    }

    .landing-visual--posters > .landing-poster:nth-child(n + 4) {
        display: none;
    }

    .landing-poster {
        width: 124px;
    }

    .landing-about .landing-visual--posters > .landing-poster:nth-child(1) {
        left: 2% !important;
        top: 18% !important;
        transform: rotate(-11deg) !important;
        z-index: 1 !important;
    }

    .landing-about .landing-visual--posters > .landing-poster:nth-child(2) {
        left: 30% !important;
        top: 2% !important;
        transform: rotate(7deg) !important;
        z-index: 3 !important;
    }

    .landing-about .landing-visual--posters > .landing-poster:nth-child(3) {
        left: 54% !important;
        top: 16% !important;
        transform: rotate(-5deg) !important;
        z-index: 2 !important;
    }

    .landing-why .landing-visual--posters > .landing-poster:nth-child(1) {
        left: 0 !important;
        top: 16% !important;
        transform: rotate(-9deg) !important;
        z-index: 1 !important;
    }

    .landing-why .landing-visual--posters > .landing-poster:nth-child(2) {
        left: 28% !important;
        top: 0 !important;
        transform: rotate(6deg) !important;
        z-index: 3 !important;
    }

    .landing-why .landing-visual--posters > .landing-poster:nth-child(3) {
        left: 54% !important;
        top: 14% !important;
        transform: rotate(-4deg) !important;
        z-index: 2 !important;
    }

    .landing-ring--1 {
        right: 8%;
        top: 8%;
        width: 24px;
        height: 24px;
    }

    .landing-ring--2 {
        left: 6%;
        bottom: 10%;
        width: 16px;
        height: 16px;
    }

    .landing-visual--why .landing-badge {
        right: -2%;
        bottom: 10%;
        transform: scale(0.96);
        transform-origin: bottom right;
    }

    .landing-visual--collage {
        min-height: 320px;
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0 0;
    }

    .landing-collage {
        position: relative;
        width: min(100%, 400px);
        aspect-ratio: 4 / 3;
        transform: rotate(-2deg) scale(1.06);
    }
}

@media (max-width: 600px) {
    body.page-landing {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .landing-hero {
        padding: max(36px, env(safe-area-inset-top)) 16px 44px;
    }

    .landing-brand {
        margin-bottom: 24px;
    }

    .landing-brand img,
    .landing-brand .brand-logo {
        max-height: 44px;
    }

    .landing-brand__text {
        font-size: 24px;
    }

    .landing-hero__title {
        font-size: clamp(24px, 7vw, 32px);
        margin-bottom: 22px;
    }

    .landing-search {
        padding: 4px 4px 4px 12px;
        border-radius: 12px;
        gap: 6px;
    }

    .landing-search input {
        min-height: 42px;
        font-size: 16px;
    }

    .landing-search__filter {
        height: 42px;
        padding: 0 12px;
        font-size: 12px;
    }

    .landing-search__filter span {
        display: none;
    }

    .landing-hero__actions {
        width: 100%;
        max-width: 560px;
        flex-wrap: nowrap;
        gap: 10px;
        margin-top: 20px;
    }

    .landing-hero__actions .landing-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 46px;
        justify-content: center;
        padding: 12px 14px;
        font-size: 13px;
    }

    .landing-suggest {
        font-size: 12px;
        line-height: 1.6;
        padding: 0 4px;
    }

    .landing-section {
        padding: 44px 16px;
    }

    .landing-section__inner,
    .landing-section__inner--reverse {
        gap: 28px;
    }

    .landing-visual--posters {
        min-height: 228px;
        width: min(calc(100vw - 32px), 340px);
        max-width: 340px;
    }

    .landing-poster {
        width: 118px;
    }

    .landing-visual--collage {
        min-height: 300px;
    }

    .landing-collage {
        width: min(calc(100vw - 20px), 380px);
        transform: rotate(-2deg) scale(1.1);
    }

    .landing-heading {
        font-size: clamp(22px, 6.2vw, 28px);
        line-height: 1.25;
    }

    .landing-prose {
        font-size: 14px;
        line-height: 1.65;
    }

    .landing-features {
        gap: 14px;
    }

    .landing-features li {
        gap: 12px;
    }

    .landing-feature__icon {
        width: 40px;
        height: 40px;
    }

    .landing-footer {
        padding: 24px 16px max(32px, env(safe-area-inset-bottom));
        font-size: 11px;
        line-height: 1.5;
    }
}

/* ══════════════════════════════════════════════════════════════
   UX Polish v3.38
   ══════════════════════════════════════════════════════════════ */

/* Unified interaction timing + focus */
.card-act,
.filter-chip,
.sidebar-link,
.bottom-nav__item,
.search-toggle,
form.filters .dropdown .btn,
form.filters .submit .btn,
.section-tabs button,
.ctrl,
.server-tab-btn,
.server-video,
.ku-filter-chip,
.ku-hint__close {
    transition: border-color var(--ease-ui), background var(--ease-ui), color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui), opacity var(--ease-ui);
}

.card-act:focus-visible,
.filter-chip:focus-visible,
.sidebar-link:focus-visible,
.search-toggle:focus-visible,
form.filters .dropdown .btn:focus-visible,
.section-tabs button:focus-visible,
.ctrl:focus-visible,
.server-tab-btn:focus-visible,
.server-video:focus-visible,
.ku-filter-chip:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.card-act:hover {
    transform: scale(1.06);
    background: hsl(172 66% 50% / .18);
    border-color: hsl(172 66% 50% / .45);
}

@media (hover: none) {
    form.filters .dropdown .btn:hover,
    form.filters .submit .btn:hover,
    form.filters .dropdown-menu li label:hover,
    .bottom-nav__item:hover,
    .sidebar-link:hover,
    .ku-filter-chip:hover,
    .card-act:hover {
        transform: none;
    }
}

form.filters .dropdown .btn .value {
    color: var(--text-label);
    font-size: 12px;
}

form.filters .dropdown .btn .value.is-set {
    color: var(--accent);
    font-weight: 650;
}

.archive-main h1,
.media-title {
    color: var(--text-title);
    font-weight: 750;
    letter-spacing: -.02em;
}

.media-meta-grid .meta-label,
.aitem .info span,
.rank-meta {
    color: var(--text-meta);
    font-size: 11px;
}

/* Mobile grid breathing room */
@media (max-width: 640px) {
    .ani.items {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        gap: 16px 12px;
    }

    form.filters {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 12px;
    }

    .ku-active-filters {
        margin-top: 12px;
    }

    .home-layout {
        gap: 18px;
    }
}

/* Skeleton loaders */
.ku-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.ku-skeleton-card {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg3);
}

.ku-skeleton-poster {
    width: 100%;
    padding-bottom: 140%;
    background: linear-gradient(90deg, var(--bg3) 0%, hsl(220 18% 14%) 45%, var(--bg3) 90%);
    background-size: 200% 100%;
    animation: ku-shimmer 1.2s ease-in-out infinite;
}

.ku-skeleton-line {
    height: 10px;
    margin: 10px 8px 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bg3) 0%, hsl(220 18% 14%) 45%, var(--bg3) 90%);
    background-size: 200% 100%;
    animation: ku-shimmer 1.2s ease-in-out infinite;
}

.ku-skeleton-line.short { width: 55%; }

@keyframes ku-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty states */
.ku-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 20px;
    text-align: center;
    border: 1px dashed hsl(220 18% 20%);
    border-radius: 12px;
    background: hsl(220 20% 8% / .55);
    color: var(--text-meta);
}

.ku-empty-state i {
    font-size: 28px;
    color: hsl(172 66% 50% / .55);
}

.ku-empty-state h3 {
    font-size: 15px;
    font-weight: 650;
    color: var(--text-title);
}

.ku-empty-state p {
    font-size: 13px;
    line-height: 1.5;
    max-width: 320px;
}

.ku-empty-state .btn {
    margin-top: 4px;
}

/* Filter bar: collapsible + chips */
.ku-filter-wrap {
    margin-bottom: 14px;
}

.ku-filter-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg3);
    color: var(--text);
    font: 600 13px var(--font-sans);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ku-filter-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: hsl(172 66% 50% / .15);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}

.ku-filter-panel.is-collapsed {
    display: none;
}

.ku-filter-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-meta);
}

.ku-filter-summary strong {
    color: var(--text-title);
    font-weight: 650;
}

.ku-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ku-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid hsl(172 66% 50% / .28);
    background: hsl(172 66% 50% / .08);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.ku-filter-chip:hover {
    background: hsl(172 66% 50% / .14);
    border-color: hsl(172 66% 50% / .45);
}

.ku-filter-chip i {
    font-size: 10px;
    opacity: .75;
}

@media (max-width: 900px) {
    .site-header {
        z-index: 100;
    }

    .bottom-nav {
        z-index: 100;
    }

    .ku-filter-toggle {
        display: inline-flex;
    }

    form.filters {
        margin-bottom: 0;
        grid-template-columns: 1fr 1fr;
    }

    form.filters .filter:first-child,
    form.filters .submit.filter {
        grid-column: 1 / -1;
    }

    .ku-filter-panel:not(.is-open) > form.filters {
        display: none !important;
    }

    .ku-filter-panel:not(.is-open) .dropdown.open .dropdown-menu {
        display: none !important;
    }

    .ku-filter-wrap.has-active-filters .ku-active-filters {
        margin-top: 12px;
    }

    .ku-filter-wrap.has-active-filters .ku-filter-toggle {
        border-color: hsl(172 66% 50% / .35);
    }

    .ku-active-filters {
        margin-top: 12px;
    }
}

/* Search: recent + keyboard nav */
.search-recent {
    padding: 8px 10px 4px;
    border-bottom: 1px solid var(--border);
}

.search-recent__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-meta);
    margin-bottom: 6px;
}

.search-recent__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.search-recent__chip {
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-label);
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 999px;
    cursor: pointer;
}

.search-recent__chip:hover,
.search-recent__chip.is-active {
    border-color: hsl(172 66% 50% / .35);
    color: var(--accent);
    background: hsl(172 66% 50% / .08);
}

.search-item.is-keyboard-active {
    background: hsl(172 66% 50% / .1);
    outline: 1px solid hsl(172 66% 50% / .35);
}

.search-empty {
    padding: 18px 14px;
    text-align: center;
}

.search-empty i {
    display: block;
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--text-meta);
}

/* Watch page clarity */
.player-play-wrap {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    background: hsl(220 25% 5% / .35);
}

.player-play-hint {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: hsl(180 10% 88%);
    text-align: center;
    max-width: 260px;
    line-height: 1.45;
    pointer-events: none;
}

.player-server .server-note b {
    color: var(--text-title);
}

/* Continue watching: stronger progress */
.ku-continue-grid .meta.playing {
    height: 32px;
    line-height: 32px;
    background: linear-gradient(180deg, transparent 0%, hsl(220 22% 6% / .92) 35%);
}

.ku-continue-grid .meta.playing .inner {
    font-size: 11px;
}

.ku-continue-grid .meta.playing .progress {
    height: 5px;
    box-shadow: 0 -1px 0 hsl(220 18% 18%);
}

.ku-continue-grid .meta.playing .progress > span {
    box-shadow: 0 0 10px hsl(172 66% 50% / .55);
}

.ku-continue-grid .item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    pointer-events: none;
    z-index: 5;
}

/* Mobile tooltip sheet */
.anime-tooltip--mobile {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    max-height: 70vh;
    overflow: auto;
    z-index: 1200;
    border-radius: 14px;
    box-shadow: var(--shadow);
    opacity: 1;
    transform: none;
    padding-top: 36px;
}

.anime-tooltip--mobile .ku-tooltip-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: hsl(220 18% 14%);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.anime-tooltip-backdrop {
    position: fixed;
    inset: 0;
    background: hsl(0 0% 0% / .55);
    z-index: 1190;
}

/* Onboarding hints */
.ku-hint {
    position: fixed;
    z-index: 130;
    max-width: 280px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid hsl(172 66% 50% / .35);
    background: hsl(220 22% 9% / .98);
    box-shadow: var(--shadow);
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-label);
}

.ku-hint strong {
    display: block;
    color: var(--text-title);
    font-size: 13px;
    margin-bottom: 4px;
}

.ku-hint__actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.ku-hint__close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--text-meta);
    cursor: pointer;
    font-size: 11px;
}

.ku-hint__cta {
    border: 0;
    background: var(--accent);
    color: hsl(220 25% 5%);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
}

/* Consistent action confirm */
.ku-confirm {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 16px;
    background: hsl(0 0% 0% / .55);
}

.ku-confirm__box {
    width: min(360px, 100%);
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg2);
}

.ku-confirm__box h4 {
    font-size: 15px;
    color: var(--text-title);
    margin-bottom: 6px;
}

.ku-confirm__box p {
    font-size: 13px;
    color: var(--text-meta);
    line-height: 1.45;
}

.ku-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}


/* ══════════════════════════════════════════════════════════════
   Series page (/anime/:slug) v4.21 — KuAnime native layout
   ══════════════════════════════════════════════════════════════ */

.series-page {
    padding-bottom: 48px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
}

.series-intro {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 22px;
    padding: 22px;
    border-radius: 14px;
    border: 1px solid var(--border);
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    background:
        radial-gradient(1200px 280px at 0% 0%, hsl(172 66% 50% / .08), transparent 55%),
        var(--bg2);
}

.series-intro__copy {
    min-width: 0;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.series-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    position: relative;
    z-index: 3;
    overflow: visible;
}

.series-fav {
    position: relative;
    z-index: 4;
    overflow: visible;
}

.series-fav.open,
.series-fav.dropdown.open {
    z-index: 40;
}

.series-fav .dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    max-height: 240px;
    overflow: auto;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg2);
    box-shadow: var(--shadow);
    z-index: 50;
}

.series-page .series-next-ep {
    margin: 0 0 22px;
}

.series-intro__poster {
    position: relative;
    width: 180px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg3);
    box-shadow: 0 18px 36px hsl(0 0% 0% / .35);
}

.series-intro__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.series-score {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    background: hsl(220 25% 6% / .88);
    border: 1px solid hsl(172 66% 50% / .45);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.series-score i { font-size: 11px; }

.series-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
}

.series-crumbs a { color: var(--muted); }
.series-crumbs a:hover { color: var(--accent); }

.series-crumbs__now {
    color: var(--text-label);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.series-title {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    font-weight: 750;
    color: var(--text-title);
    margin: 0 0 6px;
}

.series-native {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 14px;
}

.series-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.series-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    background: var(--bg3);
    border: 1px solid var(--border);
}

.series-pill--accent {
    background: var(--accent);
    color: #071018;
    border-color: transparent;
}

.series-pill--sub {
    background: hsl(140 42% 34%);
    color: #fff;
    border-color: transparent;
}

.series-pill--dub {
    background: hsl(210 68% 42%);
    color: #fff;
    border-color: transparent;
}

.series-pill--warn {
    background: hsl(0 70% 40%);
    color: #fff;
    border-color: transparent;
}

.series-cta__watch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    font-weight: 700;
}

.series-fav .btn,
.series-fav .ctrl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
}

.series-fav .btn:hover,
.series-fav .ctrl:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.series-fav .dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    max-height: 240px;
    overflow: auto;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg2);
    box-shadow: var(--shadow);
    z-index: 50;
}

.series-fav .dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
}

.series-fav .dropdown-item:hover,
.series-fav .dropdown-item.active {
    background: hsl(172 66% 50% / .12);
    color: var(--accent);
}

.series-blurb {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-meta);
    max-width: 62ch;
}

.series-blurb__more {
    margin-top: 6px;
    border: 0;
    background: none;
    color: var(--accent);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.series-facts {
    padding: 18px 20px;
    margin-bottom: 22px;
}

.series-page .series-seasons {
    margin: 0 0 16px;
}

.series-facts__heading {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
}

.series-facts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 18px;
}

.series-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.series-fact__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.series-fact__value {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}

.series-fact__value a { color: var(--text); }
.series-fact__value a:hover { color: var(--accent); }

.series-genres {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.series-genres__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.series-genre {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text) !important;
    font-size: 12px;
    font-weight: 600;
}

.series-genre:hover {
    border-color: var(--accent);
    color: var(--accent) !important;
}

.series-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 22px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.series-main,
.series-rail {
    min-width: 0;
    max-width: 100%;
}

.series-panels {
    margin-bottom: 28px;
    overflow: hidden;
    padding: 0;
    max-width: 100%;
}

.series-panels__tabs {
    display: flex;
    gap: 4px;
    padding: 10px 12px 0;
    border-bottom: 1px solid var(--border);
    background: hsl(220 20% 9%);
}

.series-panels__tabs button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 14px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.series-panels__tabs button:hover { color: var(--text); }

.series-panels__tabs button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.series-panels__body {
    padding: 14px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.series-episodes,
.series-episodes #w-episodes {
    max-width: 100%;
    min-width: 0;
}

.series-episodes #w-episodes { max-height: none; }

.series-related #w-related { margin: 0; }
.series-related .head { display: none; }

.series-reco .ani.items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.series-trending {
    padding: 14px 16px;
    position: sticky;
    top: 72px;
}

@media (max-width: 1100px) {
    .series-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .series-trending { position: static; }
}

@media (max-width: 720px) {
    .series-page {
        padding-bottom: 72px;
    }
    .series-intro {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        padding: 18px 14px;
        gap: 16px;
    }
    .series-intro__poster { width: 150px; }
    .series-intro__copy {
        width: 100%;
        max-width: 100%;
    }
    .series-crumbs { display: none; }
    .series-native { text-align: center; }
    .series-pills,
    .series-cta { justify-content: center; }
    .series-blurb {
        text-align: left;
        max-width: none;
        width: 100%;
    }
    .series-facts {
        padding: 14px;
    }
    .series-facts__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px 12px;
    }
    .series-panels__body {
        padding: 10px;
    }
    .series-reco .ani.items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ── Auth pages (forgot / reset password) ── */
.page-auth {
    min-height: 100vh;
    background:
        radial-gradient(900px 420px at 12% -10%, hsl(172 66% 40% / .16), transparent 55%),
        radial-gradient(700px 380px at 90% 10%, hsl(210 70% 45% / .12), transparent 50%),
        var(--bg);
}

.ku-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 16px 28px;
}

.ku-auth__top {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.ku-auth__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
}

.ku-auth__brand img {
    max-height: 36px;
    width: auto;
    display: block;
}

.ku-auth__brand .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #071512;
    font-weight: 800;
}

.ku-auth__main {
    flex: 1;
    display: grid;
    place-items: center;
}

.ku-auth__card {
    width: min(420px, 100%);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 20px 18px;
    box-shadow: 0 18px 50px hsl(0 0% 0% / .28);
}

.ku-auth__head {
    text-align: center;
    margin-bottom: 18px;
}

.ku-auth__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: hsl(172 66% 50% / .12);
    border: 1px solid hsl(172 66% 50% / .28);
    color: var(--accent);
    font-size: 18px;
}

.ku-auth__title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-title, var(--text));
}

.ku-auth__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

.ku-auth__form {
    margin-top: 4px;
}

.ku-auth__form .field input,
.ku-auth__form input[type="email"],
.ku-auth__form input[type="password"],
.ku-auth__form input[type="text"] {
    width: 100%;
    padding: 11px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    color: var(--text);
    font: 500 14px/1.3 var(--font-sans, inherit);
}

.ku-auth__form .field input:focus,
.ku-auth__form input:focus {
    outline: none;
    border-color: var(--accent);
}

.ku-auth__form .error-message,
.ku-auth__form .help-block {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: hsl(0 75% 65%);
}

.ku-auth__form .btn-block {
    width: 100%;
    margin-top: 4px;
}

.ku-auth__captcha {
    display: flex;
    justify-content: center;
}

.ku-auth__switch {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
}

.ku-auth__switch a {
    color: var(--accent);
    text-decoration: none;
}

.ku-auth__switch a:hover {
    text-decoration: underline;
}

.ku-auth__foot {
    margin-top: 22px;
    text-align: center;
}

.ku-auth__foot a {
    color: var(--muted);
    font-size: 12px;
    text-decoration: none;
}

.ku-auth__foot a:hover {
    color: var(--text);
}

.ku-auth__card .message,
.ku-auth__card .flash-success,
.ku-auth__card .flash-error,
.ku-auth__card .alert {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.ku-auth__card .message-success,
.ku-auth__card .flash-success,
.ku-auth__card .alert-success {
    background: hsl(145 40% 20% / .35);
    border: 1px solid hsl(145 45% 40% / .45);
    color: hsl(145 55% 78%);
}

.ku-auth__card .message-error,
.ku-auth__card .flash-error,
.ku-auth__card .alert-danger,
.ku-auth__card .alert-error {
    background: hsl(0 40% 20% / .35);
    border: 1px solid hsl(0 50% 45% / .45);
    color: hsl(0 70% 78%);
}

@media (max-width: 520px) {
    .ku-auth { padding: 16px 12px 22px; }
    .ku-auth__card { padding: 18px 14px 16px; }
    .ku-auth__title { font-size: 18px; }
}

/* KuAnime native tree comments — matches main_site dark tokens */

#ku-comments,
.ku-cm-mount {
  --ku-cm-bg: var(--bg2, hsl(220 20% 8%));
  --ku-cm-text: var(--text, hsl(180 10% 92%));
  --ku-cm-mute: var(--text-meta, hsl(220 10% 58%));
  --ku-cm-border: var(--border, hsl(220 18% 14%));
  --ku-cm-accent: var(--accent, hsl(172 66% 50%));
  --ku-cm-soft: hsl(220 18% 12%);
  --ku-cm-good: hsl(152 50% 52%);
  --ku-cm-bad: hsl(0 55% 62%);
  --ku-cm-indent: 0.3rem;
  --ku-cm-gutter: 0;
  --ku-cm-line: hsl(220 14% 22%);
  --ku-cm-line-strong: hsl(220 12% 32%);

  position: relative;
  color: var(--ku-cm-text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 120px;
  max-width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
}

#ku-comments.ku-cm-loading::after,
.ku-cm-mount.ku-cm-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(220 20% 6% / 0.28);
  pointer-events: none;
  z-index: 5;
}

/* Shell / header */
.ku-cm-mount .block_area-comment,
.ku-cm-mount .ku-cm {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.ku-cm-mount .cm-rules-note {
  background: var(--ku-cm-soft);
  border: 1px solid var(--ku-cm-border);
  color: var(--ku-cm-mute);
  border-radius: 8px;
  font-size: 12.5px;
}

.ku-cm-mount .sc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ku-cm-border);
}

.ku-cm-mount .sc-h-title {
  font-weight: 650;
  color: var(--ku-cm-text);
  margin-right: auto;
}

.ku-cm-mount .sc-header .btn,
.ku-cm-mount .sc-header .dropdown-item {
  color: var(--ku-cm-text);
}

.ku-cm-mount .dropdown-menu {
  background: var(--ku-cm-bg);
  border: 1px solid var(--ku-cm-border);
  z-index: 40;
}

.ku-cm-mount .dropdown-item:hover,
.ku-cm-mount .dropdown-item.active {
  background: var(--ku-cm-soft);
  color: var(--ku-cm-accent);
}

/* Composer */
.ku-cm-mount .comment-input {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.ku-cm-mount .user-avatar,
.ku-cm-mount .user-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, hsl(172 40% 28%), hsl(220 30% 22%));
}

.ku-cm-mount .ci-form {
  flex: 1;
  min-width: 0;
}

.ku-cm-mount .comment-container {
  display: flex;
  gap: 10px;
  align-items: stretch;
  background: var(--ku-cm-soft);
  border: 1px solid var(--ku-cm-border);
  border-radius: 12px;
  padding: 10px 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ku-cm-mount .comment-container:focus-within {
  border-color: hsl(172 66% 50% / 0.55);
  box-shadow: 0 0 0 3px hsl(172 66% 50% / 0.12);
  background: hsl(220 18% 13%);
}

.ku-cm-mount .cm-composer-grow {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ku-cm-mount .comment-subject,
.ku-cm-mount .cm-input-base,
.ku-cm-mount textarea.comment-subject,
.ku-cm-mount textarea.form-control.comment-subject,
.ku-cm-mount textarea.form-control-textarea,
.ku-cm-mount textarea.cm-input-base,
.ku-cm-mount textarea.emo-on {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 52px;
  height: auto;
  resize: vertical;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ku-cm-text) !important;
  padding: 8px 4px !important;
  outline: none !important;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  -webkit-appearance: none;
  appearance: none;
}

.ku-cm-mount .comment-subject::placeholder,
.ku-cm-mount .cm-input-base::placeholder,
.ku-cm-mount textarea.form-control-textarea::placeholder {
  color: var(--ku-cm-mute);
  opacity: 1;
}

.ku-cm-mount .comment-input.is-reply .comment-subject,
.ku-cm-mount .reply-block .comment-subject,
.ku-cm-mount .cm-edit-composer-wrap .comment-subject {
  min-height: 56px;
}

.ku-cm-mount .cm-fmt-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.ku-cm-mount .cm-fmt-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ku-cm-mute);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 12px;
}

.ku-cm-mount .cm-fmt-btn:hover {
  color: var(--ku-cm-accent);
  border-color: var(--ku-cm-border);
  background: hsl(172 40% 50% / 0.08);
}

.ku-cm-mount .ci-emo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 28px; /* clear format bar row */
  flex-shrink: 0;
}

.ku-cm-mount .cb-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--ku-cm-mute);
  cursor: pointer;
}

.ku-cm-mount .cb-icon:hover {
  color: var(--ku-cm-accent);
  background: hsl(172 40% 50% / 0.1);
}

.ku-cm-mount .ci-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.ku-cm-mount .btn-spoil.active {
  color: hsl(38 90% 55%);
  border-color: hsl(38 90% 55% / 0.45);
}

.ku-cm-mount .ci-b-right .btn-primary,
.ku-cm-mount .comment-form button[type="submit"] {
  background: var(--ku-cm-accent);
  border-color: var(--ku-cm-accent);
  color: hsl(220 30% 8%);
  font-weight: 650;
}

/* Tree nodes */
.ku-cm-mount .ku-cm-list,
.ku-cm-mount .list-comment {
  position: relative;
}

.ku-cm-mount .ku-cm-node,
.ku-cm-mount .cw_l-line {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 12px 0 4px;
  border-top: 0;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ku-cm-mount .ku-cm-roots > .ku-cm-node:first-child,
.ku-cm-mount .cw_list > .cw_l-line:first-child {
  border-top: 0;
}

.ku-cm-mount .ku-cm-node .info,
.ku-cm-mount .cw_l-line .info {
  flex: 1;
  min-width: 0;
}

.ku-cm-mount .ihead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 4px;
}

.ku-cm-mount .user-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--ku-cm-text);
}

.ku-cm-mount .time,
.ku-cm-mount .eps {
  font-size: 12px;
  color: var(--ku-cm-mute);
}

.ku-cm-mount .cm-body {
  color: var(--ku-cm-text);
  word-break: break-word;
}

.ku-cm-mount .ibody.is-spoil .cm-body {
  filter: blur(5px);
  user-select: none;
}

.ku-cm-mount .ibody.is-spoil .show-spoil {
  display: block;
}

.ku-cm-mount .show-spoil {
  display: none;
}

.ku-cm-mount .ibottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  margin-top: 8px;
}

.ku-cm-mount .ib-li .btn,
.ku-cm-mount .cm-btn-vote {
  color: var(--ku-cm-mute);
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ku-cm-mount .ib-li .btn:hover,
.ku-cm-mount .cm-btn-vote:hover {
  color: var(--ku-cm-text);
  background: hsl(220 18% 100% / 0.04);
}

.ku-cm-mount .cm-btn-vote.active[data-type="1"] {
  color: var(--ku-cm-good);
}

.ku-cm-mount .cm-btn-vote.active[data-type="0"] {
  color: var(--ku-cm-bad);
}

.ku-cm-mount .comment-focus {
  box-shadow: inset 3px 0 0 var(--ku-cm-accent);
  background: hsl(172 50% 50% / 0.08);
  border-radius: 6px;
}

.ku-cm-mount .ku-cm-list,
.ku-cm-mount ul.cw_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ku-cm-mount .ku-cm-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nested children + tree gutter line
   Replies already sit inside .info (past the parent avatar). Pull slightly
   left and use a tiny pad so the guide line stays readable without a staircase. */
.ku-cm-mount .ku-cm-children-wrap,
.ku-cm-mount .replies {
  position: relative;
  margin: 0.2rem 0 0;
  margin-left: -0.35rem;
  padding-left: var(--ku-cm-indent);
  max-width: calc(100% + 0.35rem);
  min-width: 0;
  box-sizing: border-box;
}

.ku-cm-mount .ku-cm-children-wrap::before,
.ku-cm-mount .replies::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--ku-cm-line-strong);
  border-radius: 0;
  opacity: 0.85;
}

.ku-cm-mount .ku-cm-children > .ku-cm-node,
.ku-cm-mount .ku-cm-children > .cw_l-line,
.ku-cm-mount .replies > .cw_l-line {
  position: relative;
  border-top: 0;
  padding-top: 7px;
  padding-bottom: 3px;
  gap: 5px;
}

.ku-cm-mount .ku-cm-children > .ku-cm-node + .ku-cm-node,
.ku-cm-mount .ku-cm-children > .cw_l-line + .cw_l-line,
.ku-cm-mount .replies > .cw_l-line + .cw_l-line {
  border-top: 0;
  margin-top: 1px;
  padding-top: 8px;
}

/* Tiny elbow — only if there's room */
.ku-cm-mount .ku-cm-children > .ku-cm-node::before,
.ku-cm-mount .ku-cm-children > .cw_l-line::before,
.ku-cm-mount .replies > .cw_l-line::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ku-cm-indent));
  top: 1rem;
  width: max(0px, calc(var(--ku-cm-indent) - 0.1rem));
  height: 1px;
  background: var(--ku-cm-line-strong);
  opacity: 0.8;
}

.ku-cm-mount .ku-cm-node[data-depth="1"] .user-avatar,
.ku-cm-mount .ku-cm-node[data-depth="1"] .user-avatar-img,
.ku-cm-mount .ku-cm-node[data-depth="2"] .user-avatar,
.ku-cm-mount .ku-cm-node[data-depth="2"] .user-avatar-img,
.ku-cm-mount .replies .user-avatar,
.ku-cm-mount .replies .user-avatar-img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

/* Deeper nest: same slim step (no stacking push) */
.ku-cm-mount .ku-cm-node[data-depth="2"] .ku-cm-children-wrap,
.ku-cm-mount .replies .replies {
  margin-left: -0.2rem;
  padding-left: 0.28rem;
  max-width: calc(100% + 0.2rem);
}

.ku-cm-mount .reply-block,
.ku-cm-mount .comment-input.is-reply {
  margin-left: 0;
  max-width: 100%;
}

/* View More / Open thread text buttons */
.ku-cm-mount .ku-cm-view-more,
.ku-cm-mount .ku-cm-open-thread {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 10px;
  padding: 4px 2px;
  background: none;
  border: 0;
  color: var(--ku-cm-accent);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.ku-cm-mount .ku-cm-view-more:hover,
.ku-cm-mount .ku-cm-open-thread:hover {
  text-decoration: underline;
}

.ku-cm-mount .ku-cm-view-more i,
.ku-cm-mount .ku-cm-open-thread i {
  font-size: 11px;
  opacity: 0.9;
}

.ku-cm-mount .ku-cm-view-more.is-loading,
.ku-cm-mount .ku-cm-open-thread.is-loading,
#cm-view-more.is-loading,
.ku-cm-root-more.is-loading {
  opacity: 0.75;
  pointer-events: none;
  cursor: wait;
}

.ku-cm-mount .ku-cm-view-more.is-loading i,
.ku-cm-mount .ku-cm-open-thread.is-loading i,
#cm-view-more.is-loading i,
.ku-cm-root-more.is-loading i {
  animation: ku-cm-spin 0.75s linear infinite;
}

@keyframes ku-cm-spin {
  to { transform: rotate(360deg); }
}

#cm-view-more,
.ku-cm-root-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-width: 140px;
  margin: 16px auto 4px;
  padding: 8px 18px;
  background: var(--ku-cm-soft);
  border: 1px solid var(--ku-cm-border);
  border-radius: 999px;
  color: var(--ku-cm-text);
  font-weight: 550;
  font-size: 13px;
  cursor: pointer;
}

#cm-view-more:hover,
.ku-cm-root-more:hover {
  border-color: var(--ku-cm-accent);
  color: var(--ku-cm-accent);
}

/* Focus mode */
.ku-cm-focus-bar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  margin-bottom: 8px;
  background: linear-gradient(
    to bottom,
    hsl(220 20% 7% / 0.96) 60%,
    hsl(220 20% 7% / 0)
  );
  backdrop-filter: blur(6px);
}
@media (max-width: 900px) {
  .ku-cm-focus-bar {
    /* Sit below the sticky site header so Back isn't hidden / causing jump. */
    top: 52px;
  }
}

.ku-cm-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(70vw, 280px);
  padding: 6px 12px;
  background: var(--ku-cm-soft);
  border: 1px solid var(--ku-cm-border);
  border-radius: 8px;
  color: var(--ku-cm-text);
  font-weight: 550;
  font-size: 13px;
  cursor: pointer;
}

.ku-cm-back__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ku-cm-back:hover {
  border-color: var(--ku-cm-accent);
  color: var(--ku-cm-accent);
}

.ku-cm-focus-label {
  font-size: 12.5px;
  color: var(--ku-cm-mute);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ku-cm-focus-root {
  border-top: 0 !important;
}

.ku-cm-focus-children {
  margin-left: -0.25rem;
  padding-left: var(--ku-cm-indent);
  max-width: calc(100% + 0.25rem);
}

/* Notices / locked */
.ku-cm-mount .cm-comment-notice,
.ku-cm-mount .cm-thread-locked {
  font-size: 13px;
  color: var(--ku-cm-mute);
}

.ku-cm-mount .ipinned {
  font-size: 12px;
  color: var(--ku-cm-accent);
  margin-bottom: 4px;
}

/* Emoji picker / GIF — high z-index */
emoji-picker.cm-emoji-open,
.cm-gif-panel.cm-gif-open {
  position: fixed !important;
  z-index: 10050 !important;
  display: block !important;
}

emoji-picker:not(.cm-emoji-open) {
  display: none !important;
}

.cm-gif-panel {
  display: none;
  width: min(320px, calc(100vw - 16px));
  max-height: 360px;
  overflow: hidden;
  background: var(--bg2, #12171f);
  border: 1px solid var(--border, #222933);
  border-radius: 10px;
  box-shadow: 0 12px 40px hsl(0 0% 0% / 0.45);
}

.cm-gif-panel.cm-gif-open {
  display: flex;
  flex-direction: column;
}

.cm-gif-head {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--border, #222933);
}

.cm-gif-q {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border, #222933);
  border-radius: 6px;
  color: var(--text, #e8f0ee);
  padding: 6px 8px;
}

.cm-gif-close {
  background: transparent;
  border: 0;
  color: var(--text-meta, #889);
  font-size: 18px;
  cursor: pointer;
}

.cm-gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  overflow: auto;
  max-height: 280px;
}

.cm-gif-tile {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1;
}

.cm-gif-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cm-gif-msg {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-meta, #889);
}

/* Reactions bar (episode/anime scope — above comments list) */
#comments #cm-reactions.cm-reactions,
.watch-comments #cm-reactions.cm-reactions {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
#comments .cm-reactions-skel {
  height: 38px;
  max-width: 520px;
  border-radius: 999px;
  opacity: 0.55;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: kuCmRxShimmer 1.4s linear infinite;
}
@keyframes kuCmRxShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#comments .cm-reactions-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#comments .cm-rx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #e9eef5);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  user-select: none;
}
#comments .cm-rx:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}
#comments .cm-rx.is-active {
  border-color: var(--accent, hsl(142 55% 42%));
  background: color-mix(in srgb, var(--accent, hsl(142 55% 42%)) 18%, transparent);
  color: var(--text, #e9eef5);
}
#comments .cm-rx.is-pending {
  opacity: 0.55;
  cursor: progress;
}
#comments .cm-rx-emoji {
  font-size: 17px;
  line-height: 1;
}
#comments .cm-rx-gif {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 6px;
  display: inline-block;
}
#comments .cm-rx-label {
  font-weight: 500;
}
#comments .cm-rx-count {
  font-variant-numeric: tabular-nums;
  color: var(--muted, #8a97aa);
  font-size: 12px;
  min-width: 8px;
}
#comments .cm-rx.is-active .cm-rx-count {
  color: inherit;
}
#comments .cm-rx.cm-rx-pop {
  animation: kuCmRxPop 220ms ease;
}
@keyframes kuCmRxPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Legacy mount-scoped rules (kept if bar is ever inlined) */
.ku-cm-mount #cm-reactions {
  margin: 0 0 14px;
}

.ku-cm-mount .cm-reactions-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ku-cm-mount .cm-rx {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--ku-cm-border);
  background: var(--ku-cm-soft);
  color: var(--ku-cm-text);
  cursor: pointer;
  font-size: 12px;
}

.ku-cm-mount .cm-rx.is-active {
  border-color: var(--ku-cm-accent);
  color: var(--ku-cm-accent);
}

/* Mobile */
@media (max-width: 640px) {
  #ku-comments,
  .ku-cm-mount {
    --ku-cm-indent: 0.26rem;
    --ku-cm-gutter: 0;
  }

  .ku-cm-mount .ku-cm-children-wrap,
  .ku-cm-mount .replies {
    margin-left: -0.4rem;
    padding-left: 0.26rem;
    max-width: calc(100% + 0.4rem);
  }

  .ku-cm-mount .ku-cm-node[data-depth="2"] .ku-cm-children-wrap,
  .ku-cm-mount .replies .replies {
    margin-left: -0.15rem;
    padding-left: 0.24rem;
    max-width: calc(100% + 0.15rem);
  }

  .ku-cm-mount .user-avatar,
  .ku-cm-mount .user-avatar-img {
    width: 30px;
    height: 30px;
  }

  .ku-cm-mount .ku-cm-node[data-depth="1"] .user-avatar,
  .ku-cm-mount .ku-cm-node[data-depth="1"] .user-avatar-img,
  .ku-cm-mount .ku-cm-node[data-depth="2"] .user-avatar,
  .ku-cm-mount .ku-cm-node[data-depth="2"] .user-avatar-img,
  .ku-cm-mount .replies .user-avatar,
  .ku-cm-mount .replies .user-avatar-img {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .ku-cm-mount .comment-input {
    gap: 8px;
  }

  .ku-cm-mount .comment-input > .user-avatar {
    display: none; /* more room for textarea on narrow screens */
  }

  .ku-cm-mount .comment-container {
    padding: 12px;
    gap: 8px;
    border-radius: 12px;
  }

  .ku-cm-mount .comment-subject,
  .ku-cm-mount .cm-input-base,
  .ku-cm-mount textarea.comment-subject,
  .ku-cm-mount textarea.form-control.comment-subject,
  .ku-cm-mount textarea.form-control-textarea,
  .ku-cm-mount textarea.cm-input-base,
  .ku-cm-mount textarea.emo-on {
    min-height: 72px;
    font-size: 16px !important; /* avoid iOS zoom */
    line-height: 1.5;
    padding: 10px 2px !important;
  }

  .ku-cm-mount .comment-input.is-reply .comment-subject,
  .ku-cm-mount .reply-block .comment-subject {
    min-height: 72px;
  }

  .ku-cm-mount .ci-emo {
    padding-top: 30px;
    gap: 8px;
  }

  .ku-cm-mount .cb-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ku-cm-mount .cm-fmt-btn {
    width: 34px;
    height: 34px;
  }

  .ku-cm-mount .ci-buttons .btn,
  .ku-cm-mount .ci-b-right .btn-primary {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
  }

  .ku-cm-mount .sc-header {
    gap: 8px;
  }

  .ku-cm-focus-bar {
    top: 0;
  }
}

/* KuComments bootstrap-compat — front theme has no Bootstrap */
.ku-cm-mount .ml-1 { margin-left: 0.25rem !important; }
.ku-cm-mount .ml-2 { margin-left: 0.5rem !important; }
.ku-cm-mount .mr-1 { margin-right: 0.25rem !important; }
.ku-cm-mount .mr-2 { margin-right: 0.5rem !important; }
.ku-cm-mount .mt-1 { margin-top: 0.25rem !important; }
.ku-cm-mount .mt-2 { margin-top: 0.5rem !important; }
.ku-cm-mount .mt-3 { margin-top: 0.75rem !important; }
.ku-cm-mount .mb-3 { margin-bottom: 0.75rem !important; }
.ku-cm-mount .my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.ku-cm-mount .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.ku-cm-mount .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.ku-cm-mount .w-100 { width: 100% !important; }
.ku-cm-mount .text-muted { color: var(--ku-cm-mute) !important; }
.ku-cm-mount .text-warning { color: hsl(38 90% 55%) !important; }
.ku-cm-mount .clearfix { clear: both; display: none; }
.ku-cm-mount .link-highlight { color: var(--ku-cm-accent); text-decoration: none; font-weight: 600; }
.ku-cm-mount .link-highlight:hover { text-decoration: underline; }

.ku-cm-mount .alert {
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 10px;
  font-size: 13px;
  border: 1px solid var(--ku-cm-border);
  background: var(--ku-cm-soft);
  color: var(--ku-cm-mute);
}
.ku-cm-mount .alert-info {
  border-color: hsl(172 40% 40% / 0.35);
  background: hsl(172 40% 50% / 0.08);
  color: var(--ku-cm-text);
}
.ku-cm-mount .alert-danger {
  border-color: hsl(0 55% 45% / 0.4);
  background: hsl(0 55% 50% / 0.1);
  color: hsl(0 70% 78%);
}

.ku-cm-mount .form-control,
.ku-cm-mount textarea.form-control,
.ku-cm-mount input.form-control {
  width: 100%;
  background: var(--ku-cm-soft);
  border: 1px solid var(--ku-cm-border);
  border-radius: 8px;
  color: var(--ku-cm-text);
  padding: 8px 10px;
  font: inherit;
  outline: none;
}
.ku-cm-mount .form-control:focus {
  border-color: var(--ku-cm-accent);
  box-shadow: 0 0 0 3px hsl(172 66% 50% / 0.15);
}
/* Composer textarea uses its own chrome via .comment-container */
.ku-cm-mount .comment-container .form-control,
.ku-cm-mount .comment-container textarea.form-control,
.ku-cm-mount .comment-container .form-control:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.ku-cm-mount .sc-h-from,
.ku-cm-mount .sc-h-sort,
.ku-cm-mount .ib-li {
  position: relative;
}

.ku-cm-mount .dropdown-menu {
  display: none;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0;
  right: auto;
  min-width: 170px;
  z-index: 80;
  margin: 0;
  padding: 6px;
  background: var(--ku-cm-bg);
  border: 1px solid var(--ku-cm-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px hsl(0 0% 0% / 0.45);
  list-style: none;
}
.ku-cm-mount .sc-h-sort .dropdown-menu,
.ku-cm-mount .ib-li .dropdown-menu {
  left: auto;
  right: 0;
}
.ku-cm-mount .sc-h-from.open > .dropdown-menu,
.ku-cm-mount .sc-h-sort.open > .dropdown-menu,
.ku-cm-mount .ib-li.open > .dropdown-menu,
.ku-cm-mount .dropdown.open > .dropdown-menu,
.ku-cm-mount .open > .dropdown-menu {
  display: block;
}
.ku-cm-mount .dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ku-cm-text);
  text-decoration: none !important;
  font-size: 13px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.ku-cm-mount .dropdown-item:hover,
.ku-cm-mount .dropdown-item:focus {
  background: var(--ku-cm-soft);
  color: var(--ku-cm-accent);
}
.ku-cm-mount .dropdown-item.active {
  color: var(--ku-cm-accent);
  background: hsl(172 40% 50% / 0.1);
}

.ku-cm-mount .sc-h-from .btn,
.ku-cm-mount .sc-h-sort .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ku-cm-text);
  background: var(--ku-cm-soft);
  border: 1px solid var(--ku-cm-border);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none !important;
}
.ku-cm-mount .sc-h-from .btn:hover,
.ku-cm-mount .sc-h-sort .btn:hover,
.ku-cm-mount .sc-h-from.open > .btn,
.ku-cm-mount .sc-h-sort.open > .btn {
  border-color: var(--ku-cm-accent);
  color: var(--ku-cm-accent);
}

.ku-cm-mount .ibottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
}
.ku-cm-mount .ib-li {
  display: inline-flex;
  align-items: center;
}
.ku-cm-mount .reply-block {
  margin-top: 10px;
  padding-top: 8px;
}
.ku-cm-mount .tag-name {
  display: inline;
  color: var(--ku-cm-accent);
  font-weight: 500;
  font-size: inherit;
  line-height: inherit;
  margin: 0 0.15em 0 0;
  padding: 0;
  background: none;
  border: 0;
  vertical-align: baseline;
}
.ku-cm-mount .cm-body .tag-name.tag-name-mods {
  color: #f5b942;
  background: rgba(245, 185, 66, 0.12);
  border: 1px solid rgba(245, 185, 66, 0.35);
  border-radius: 4px;
  padding: 0 0.25em;
}
.ku-cm-mount .btn-secondary,
.ku-cm-mount .btn-light {
  background: var(--ku-cm-soft);
  border: 1px solid var(--ku-cm-border);
  color: var(--ku-cm-text);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.ku-cm-mount .btn-secondary:hover,
.ku-cm-mount .btn-light:hover {
  border-color: var(--ku-cm-accent);
  color: var(--ku-cm-accent);
}
.ku-cm-mount .ci-b-left,
.ku-cm-mount .ci-b-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ku-cm-mount .preform {
  width: 100%;
}
.ku-cm-mount .cm-composer-as {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ku-cm-mute);
}
.ku-cm-mount .cm-composer-as .link-highlight {
  display: inline;
  margin: 0;
  font-weight: 650;
  color: var(--ku-cm-accent);
}
.ku-cm-mount .comment-input.is-reply .cm-composer-as::before,
.ku-cm-mount .reply-block .cm-composer-as::before {
  content: "Replying to";
  font-weight: 400;
  opacity: 0.85;
}
.ku-cm-mount img.cm-img,
.ku-cm-mount .cm-body img {
  display: block;
  max-width: min(320px, 100%);
  width: auto;
  height: auto;
  border-radius: 8px;
  margin: 8px 0 4px;
  border: 1px solid var(--ku-cm-border);
}
.ku-cm-mount .cm-body a {
  color: var(--ku-cm-accent);
}
.ku-cm-mount .cm-body blockquote {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--ku-cm-accent);
  background: var(--ku-cm-soft);
  color: var(--ku-cm-mute);
}

/* Staff role badges — always Mod */
.ku-cm-mount .ihead > .user-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  color: var(--ku-cm-mute);
}
.ku-cm-mount .ihead > .user-name:hover {
  color: var(--ku-cm-text);
}
.ku-cm-mount .ihead > .user-name.is-staff,
.ku-cm-mount .ihead > .user-name.is-level-a {
  color: hsl(38 70% 68%);
  font-weight: 550;
}
.ku-cm-mount .ihead > .user-name.is-staff:hover {
  color: hsl(38 80% 74%);
}
.ku-cm-mount .cm-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  vertical-align: middle;
  white-space: nowrap;
  pointer-events: none;
}
.ku-cm-mount .cm-role-badge i {
  font-size: 8px;
  opacity: 0.9;
}
.ku-cm-mount .cm-role-badge--mod,
.ku-cm-mount .cm-role-badge--admin {
  color: hsl(172 55% 68%);
  background: hsl(172 40% 40% / 0.14);
  border: 1px solid hsl(172 40% 50% / 0.28);
}
.ku-cm-mount .user-name.is-imported {
  cursor: pointer;
  opacity: 0.95;
  text-decoration: none;
}
.ku-cm-mount .user-name.is-imported:hover {
  text-decoration: underline;
}
.ku-cm-mount .ku-cm-node.is-imported-comment > .user-avatar {
  opacity: 0.92;
  cursor: default;
}
.ku-cm-imported-tip {
  position: fixed;
  z-index: 10050;
  max-width: 240px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: hsl(180 10% 92%);
  background: hsl(220 20% 12%);
  border: 1px solid hsl(220 18% 22%);
  box-shadow: 0 10px 28px hsl(0 0% 0% / 0.45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.ku-cm-imported-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ku-cm-mount .ku-cm-node.is-staff-comment > .user-avatar,
.ku-cm-mount .cw_l-line.is-staff-comment > .user-avatar {
  box-shadow: 0 0 0 1px hsl(38 70% 50% / 0.35);
}
.ku-cm-mount .ku-cm-node.is-staff-comment > .user-avatar .user-avatar-img,
.ku-cm-mount .cw_l-line.is-staff-comment > .user-avatar .user-avatar-img {
  border-radius: 8px;
}


/* Comments: never trap scroll in a nested phone box */
.watch-comments,
#comments,
#ku-comments,
#ku-comments.ku-cm-mount,
#ku-comments .list-comment,
#ku-comments .ku-cm-list,
#ku-comments .cw_list {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
@media (max-width: 1100px) {
  .watch-comments.card {
    padding: 12px 12px 20px;
  }
  #ku-comments {
    min-height: 0;
  }
}

/* KuAnime public profile */
.ku-pub {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}
.ku-pub-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(135deg, hsl(172 40% 18% / 0.35), transparent 42%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  margin-bottom: 18px;
}
.ku-pub-hero--compact .ku-pub-avatar img {
  width: 64px;
  height: 64px;
}
.ku-pub-hero__glow {
  position: absolute;
  inset: -40% auto auto 55%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(172 66% 50% / 0.18), transparent 68%);
  pointer-events: none;
}
.ku-pub-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
}
.ku-pub-avatar {
  flex-shrink: 0;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid hsl(220 18% 22%);
  box-shadow: 0 10px 28px hsl(0 0% 0% / 0.35);
}
.ku-pub-avatar.is-staff {
  border-color: hsl(38 80% 50% / 0.65);
  box-shadow: 0 0 0 3px hsl(38 80% 50% / 0.18), 0 10px 28px hsl(0 0% 0% / 0.35);
}
.ku-pub-avatar img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: var(--bg3);
}
.ku-pub-hero__meta { min-width: 0; flex: 1; }
.ku-pub-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.ku-pub-name {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text-title, var(--text));
  line-height: 1.15;
}
.ku-pub-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ku-pub-chip i { font-size: 10px; }
.ku-pub-chip--mod {
  color: hsl(172 70% 72%);
  background: hsl(172 55% 40% / 0.2);
  border: 1px solid hsl(172 55% 50% / 0.4);
}
.ku-pub-chip--ok {
  color: hsl(152 55% 70%);
  background: hsl(152 45% 40% / 0.18);
  border: 1px solid hsl(152 45% 50% / 0.35);
}
.ku-pub-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.ku-pub-sub span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ku-pub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  gap: 16px;
  align-items: start;
}
.ku-pub-panel {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--bg2);
  overflow: visible;
}
.ku-pub-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.ku-pub-panel__head--wrap {
  flex-wrap: wrap;
}
.ku-pub-panel__head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.ku-pub-more,
.ku-pub-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.ku-pub-more:hover,
.ku-pub-link:hover { text-decoration: underline; }
.ku-pub-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
}
.ku-pub-empty--sm { padding: 28px 16px; }
.ku-pub-empty i {
  font-size: 22px;
  opacity: 0.7;
  color: var(--accent);
}
.ku-pub-empty p { margin: 0; font-size: 14px; }
.ku-pub-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ku-pub-activity__item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.ku-pub-activity__item:last-child { border-bottom: 0; }
.ku-pub-activity__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: hsl(172 40% 50% / 0.12);
  color: var(--accent);
}
.ku-pub-activity__item--comment .ku-pub-activity__icon,
.ku-pub-activity__item--reply .ku-pub-activity__icon {
  background: hsl(220 40% 50% / 0.14);
  color: hsl(200 70% 72%);
}
.ku-pub-activity__time {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.ku-pub-activity__text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.ku-pub-wl {
  display: flex;
  flex-direction: column;
}
.ku-pub-wl__item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.ku-pub-wl__item:last-child { border-bottom: 0; }
.ku-pub-wl__item:hover { background: hsl(220 18% 100% / 0.03); }
.ku-pub-wl__poster {
  flex-shrink: 0;
  width: 56px;
  height: 78px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.ku-pub-wl__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ku-pub-wl__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.ku-pub-wl__title {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ku-pub-wl__item:hover .ku-pub-wl__title { color: var(--accent); }
.ku-pub-wl__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--muted);
}
.ku-pub-wl__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ku-pub-cta {
  display: block;
  margin: 12px 14px 16px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  font-size: 13px;
}
.ku-pub-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ku-pub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ku-pub-tab {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
}
.ku-pub-tab:hover {
  color: var(--text);
  background: var(--bg3);
}
.ku-pub-tab.is-active {
  color: var(--accent);
  background: hsl(172 66% 50% / 0.12);
  border-color: hsl(172 66% 50% / 0.28);
}
.ku-pub-sort { position: relative; }
.ku-pub-sort__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.ku-pub-sort__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  z-index: 40;
  padding: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.ku-pub-sort.open .ku-pub-sort__menu { display: block; }
.ku-pub-sort__menu .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.ku-pub-sort__menu .dropdown-item:hover,
.ku-pub-sort__menu .dropdown-item.is-active {
  background: var(--bg3);
  color: var(--accent);
}
.ku-pub-pager {
  padding: 12px 16px 16px;
}
.ku-pub .ani.items {
  padding: 14px 16px 6px;
}
.ani.poster .wl-badge,
.ani.poster > a .wl-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 6;
  max-width: calc(100% - 12px);
  padding: 3px 7px;
  border-radius: 4px;
  background: hsl(220 25% 8% / 0.82);
  border: 1px solid hsl(172 55% 50% / 0.35);
  color: hsl(172 70% 78%);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.ani.items .item .ani.poster .adult ~ .wl-badge,
.ani.items .item .ani.poster > a .adult ~ .wl-badge {
  top: 26px;
}
.ku-pub-card-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.ku-pub-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ku-pub-card-meta i {
  color: hsl(42 90% 55%);
  font-size: 11px;
}
@media (max-width: 900px) {
  .ku-pub-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ku-pub { padding: 12px 12px 28px; }
  .ku-pub-hero__inner { padding: 16px; gap: 12px; }
  .ku-pub-avatar img { width: 72px; height: 72px; }
  .ku-pub-hero--compact .ku-pub-avatar img { width: 56px; height: 56px; }
  .ku-pub-name { font-size: 22px; }
}

/* ==========================================================================
   320px hardening — absolute-minimum width (older / small phones)
   Guards against horizontal overflow and cramped layouts down to 320px.
   ========================================================================== */
@media (max-width: 360px) {
  /* Horizontal overflow is already clipped by the base `overflow-x: clip`
     on html/body — do NOT use overflow:hidden here (it breaks vertical
     scrolling by turning body into a scroll container). */

  /* Media & tables can't push the layout wider than the viewport. */
  img, video, iframe, canvas, table, pre {
    max-width: 100% !important;
    height: auto;
  }

  /* Long words / pasted URLs (common in comments) must wrap, not overflow. */
  .ku-cm-mount .cm-body,
  .ku-cm-mount .ihead,
  .ku-cm-mount .user-name,
  .cm-body, .comment-subject,
  .ku-pub, .section-head {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Header: allow the search to shrink instead of overflowing. */
  .site-header__inner {
    padding: 6px 8px;
    gap: 6px;
  }
  .site-header__inner > .header-search-wrap {
    min-width: 0;
    flex: 1 1 auto;
  }
  .site-header .brand-text { font-size: 12px; }

  /* Global side gutters trimmed so content isn't squeezed. */
  .page-wide,
  .home-layout,
  .home-main,
  .app-main {
    padding-left: 8px;
    padding-right: 8px;
  }
  .home-layout { gap: 14px; }

  /* Poster / catalog grids: 2 tidy columns instead of overflowing minmax. */
  .ani.items,
  .ani-items,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Section headers wrap their controls. */
  .section-head {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Comment composer: keep it compact and inside the viewport. */
  .ku-cm-mount .comment-container {
    padding: 8px;
    gap: 6px;
  }
  .ku-cm-mount .cb-icon {
    width: 32px;
    height: 32px;
  }
  .ku-cm-mount .ci-buttons {
    gap: 6px;
  }
  .ku-cm-mount .ci-buttons .btn {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* One-time nudge tooltip must fit a 320px screen. */
  .ku-hint {
    max-width: calc(100vw - 20px);
    left: 10px !important;
  }

  /* Tab bars / pill rows scroll instead of overflowing. */
  .nav-tabs,
  .section-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}