/* ============================================
   YumeSekai - Modern Dark Theme
   ============================================ */

:root {
    --bg-primary: #0b0b12;
    --bg-secondary: #12121c;
    --bg-card: #1a1a28;
    --bg-card-hover: #22223a;
    --bg-glass: rgba(26, 26, 40, 0.75);
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b8;
    --text-muted: #6b6b80;
    --accent: #7c5cfc;
    --accent-hover: #9b7fff;
    --accent-glow: rgba(124, 92, 252, 0.35);
    --danger: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --transition: 0.25s ease;
    --font: 'Inter', system-ui, sans-serif;
    --font-display: 'Poppins', 'Inter', sans-serif;
    --nav-height: 70px;
    --admin-badge: linear-gradient(135deg, #ef4444, #dc2626);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    animation: pageFadeIn 0.35s ease;
}

/* ========== Page transition (fade between PHP page loads) ========== */
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.page-leaving {
    opacity: 0;
    transition: opacity 0.18s ease;
}

/* ========== Reading progress bar (reader.php) ========== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 1200;
    pointer-events: none;
}

.reading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    box-shadow: 0 0 8px var(--accent-glow);
    transition: width 0.12s ease-out;
}

/* Directional slide-out when navigating between chapters in the reader,
   instead of the generic page fade. */
body.reader-leaving-next {
    animation: readerSlideOutLeft 0.22s ease forwards;
}
body.reader-leaving-prev {
    animation: readerSlideOutRight 0.22s ease forwards;
}
@keyframes readerSlideOutLeft {
    to { opacity: 0; transform: translateX(-28px); }
}
@keyframes readerSlideOutRight {
    to { opacity: 0; transform: translateX(28px); }
}

@media (prefers-reduced-motion: reduce) {
    .reading-progress-bar {
        transition: none !important;
    }
    body.reader-leaving-next,
    body.reader-leaving-prev {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none !important;
    }
    body.page-leaving {
        transition: none !important;
    }
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
}

/* ========== Navbar ========== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    overflow: visible; /* allow mascot to hang below the bar */
    transition: background var(--transition), height 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}


.nav-logo,
.logo-icon,
.logo-mascot {
    transition: font-size 0.3s ease, width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .navbar,
    .nav-logo,
    .logo-icon,
    .logo-mascot {
        transition: none !important;
    }
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.25rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--text-primary);
    position: relative;
    overflow: visible;
    z-index: 2;
}

.logo-icon {
    color: var(--accent);
    font-size: 1.5rem;
}

/* YumeSekai mascot: stays mostly inside the navbar, balanced with logo text.
 * Tiny translate keeps a soft “resting on the bar” feel without spilling out. */
.logo-mascot {
    width: 110px;
    height: 72px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
    object-position: center center;
    margin-left: -4px;
    margin-right: 2px;
    transform: translateY(9px);
    position: relative;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-link {
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
    background: rgba(124, 92, 252, 0.12);
}

.nav-link.admin-link {
    color: #f87171;
}

.nav-btn {
    background: var(--accent);
    color: #fff !important;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-sm);
}

.nav-btn:hover {
    background: var(--accent-hover);
}

.nav-btn-outline {
    border: 1px solid var(--border);
    padding: 0.45rem 1rem;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

/* ========== Main ========== */
.main-content {
    padding-top: var(--nav-height);
    min-height: calc(100vh - 200px);
}

/* ========== Flash ========== */
.flash-message {
    max-width: 1400px;
    margin: 1rem auto;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideDown 0.3s ease;
    position: relative;
    overflow: hidden;
}

.flash-success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: #4ade80; }
.flash-error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; }
.flash-info { background: rgba(124, 92, 252, 0.15); border: 1px solid rgba(124, 92, 252, 0.3); color: #a78bfa; }

.flash-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
    opacity: 0.7;
}

/* Countdown bar along the bottom edge, added dynamically by script.js */
.flash-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: 0.55;
    transform-origin: left center;
    animation: flashProgressShrink var(--flash-duration, 5s) linear forwards;
}

@keyframes flashProgressShrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.flash-message.flash-hiding {
    animation: flashFadeOut 0.32s ease forwards;
    pointer-events: none;
}

@keyframes flashFadeOut {
    from { opacity: 1; transform: translateY(0); max-height: 100px; margin-top: 1rem; margin-bottom: 1rem; }
    to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .flash-progress {
        animation: none;
        display: none;
    }
    .flash-message.flash-hiding {
        animation: none !important;
        opacity: 0;
    }
}

/* ========== Hero ========== */
.home-billboard {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin: 0 0 1.5rem;
    border-radius: 0 0 24px 24px;
}
.home-billboard-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    transform: scale(1.04);
    filter: saturate(1.1);
}
.home-billboard-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8,8,14,0.92) 0%, rgba(8,8,14,0.55) 46%, rgba(8,8,14,0.18) 100%),
        linear-gradient(to top, var(--bg-primary) 0%, rgba(8,8,14,0.15) 48%, rgba(8,8,14,0.2) 100%);
}
.home-billboard-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 1.25rem 2.4rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
}
.home-billboard-cover {
    width: 160px;
    height: 230px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
}
.home-billboard-kicker {
    margin: 0 0 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
}
.home-billboard-info h1 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    margin: 0 0 0.65rem;
    line-height: 1.15;
}
.home-billboard-syn {
    max-width: 560px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1.1rem;
}
@media (max-width: 720px) {
    .home-billboard { min-height: 360px; border-radius: 0; }
    .home-billboard-cover { display: none; }
    .home-billboard-content { padding: 2.2rem 1rem 1.6rem; }
}

.hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
}

.hero:hover .hero-bg {
    transform: scale(1.05);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-primary) 0%, rgba(11, 11, 18, 0.7) 40%, rgba(11, 11, 18, 0.3) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
    display: flex;
    gap: 2rem;
    align-items: flex-end;
}

.hero-cover {
    width: 180px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.hero-info h1 {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.hero-alt {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(124, 92, 252, 0.2);
    color: #c4b5fd;
    border: 1px solid rgba(124, 92, 252, 0.3);
}

.badge-status {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

.badge-status.completed {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.hero-synopsis {
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 20px var(--accent-glow);
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--border-hover);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}

.btn-icon {
    padding: 0.5rem;
    border-radius: 50%;
}

/* ========== Section ========== */
.section {
    max-width: 1400px;
    margin: 0 auto 2.5rem;
    padding: 0 1.25rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title span {
    color: var(--accent);
}

/* ========== Carousel ========== */
.carousel-wrap {
    position: relative;
}

.carousel {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none; /* no snap = no stutter on mobile */
    scroll-behavior: auto;  /* smooth causes lag on many mobile browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0 1rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
@media (hover: hover) and (pointer: fine) {
    .carousel {
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
    }
}

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

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

.carousel-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.carousel-btn:active {
    transform: translateY(-50%) scale(0.86);
    transition: transform 0.12s ease;
}

.carousel-btn.prev { left: -10px; }
.carousel-btn.next { right: -10px; }

@media (prefers-reduced-motion: reduce) {
    .carousel {
        scroll-behavior: auto;
    }
}

@media (max-width: 768px) {
    .carousel-btn { display: none; }
}

/* ========== Anime Card ========== */
.anime-card {
    flex: 0 0 168px;
    width: 168px;
    scroll-snap-align: start;
    background: linear-gradient(180deg, rgba(12, 18, 36, 0.95) 0%, rgba(8, 12, 28, 0.98) 100%);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(56, 120, 220, 0.35);
    box-shadow:
        0 0 0 1px rgba(40, 90, 180, 0.12),
        0 4px 18px rgba(0, 40, 120, 0.25),
        inset 0 1px 0 rgba(120, 180, 255, 0.06);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.anime-card:hover {
    transform: translateY(-5px);
    border-color: rgba(80, 150, 255, 0.65);
    box-shadow:
        0 0 0 1px rgba(80, 150, 255, 0.25),
        0 8px 28px rgba(30, 100, 220, 0.35),
        0 0 20px rgba(50, 120, 255, 0.15);
}

.anime-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #0a0e1a;
    cursor: pointer;
    z-index: 1;
    border-radius: 7px 7px 0 0;
    border-bottom: 1px solid rgba(56, 120, 220, 0.2);
    flex-shrink: 0;
}

.anime-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.5s ease, filter 0.6s ease;
    pointer-events: none; /* clicks go to the parent <a> */
    display: block;
    opacity: 0;
    filter: blur(16px);
    transform: scale(1.04);
}

.anime-card-cover img.is-loaded {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.anime-card:hover .anime-card-cover img.is-loaded {
    transform: scale(1.08);
}
.anime-card-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 42%);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
    pointer-events: none;
}
.anime-card-cover::after {
    /* play icon disabled — no ▶ overlay on cards */
    content: none !important;
    display: none !important;
}
.anime-card:hover .anime-card-cover::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .anime-card-cover img {
        transition: opacity 0.3s ease;
        filter: none;
        transform: none;
    }
}

/* Shimmer skeleton placeholder shown on any lazy-loaded image's container
   until the real image has finished loading (class toggled by script.js). */
.lazy-shimmer {
    background-image: linear-gradient(100deg,
        var(--skeleton-base, var(--bg-secondary)) 30%,
        var(--skeleton-shine, var(--bg-card-hover)) 50%,
        var(--skeleton-base, var(--bg-secondary)) 70%) !important;
    background-size: 200% 100% !important;
    animation: lazyShimmerSweep 1.5s ease-in-out infinite;
}

@keyframes lazyShimmerSweep {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lazy-shimmer {
        animation: none !important;
        background-image: none !important;
    }
}

.rating-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: rgba(8, 14, 28, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    line-height: 1.25;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.rating-badge::before {
    content: '★';
    color: #facc15;
    font-size: 0.65rem;
    line-height: 1;
}

.rating-badge-static {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    font-size: 0.82rem !important;
    padding: 0.28rem 0.65rem !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(250, 204, 21, 0.35) !important;
    color: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    gap: 0.25rem !important;
}
.rating-badge-static::before {
    content: '★' !important;
    color: #facc15 !important;
    font-size: 0.78rem !important;
}

.rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 1rem;
}

.rating-stars .star {
    color: rgba(255,255,255,0.2);
}

.rating-stars .star-full,
.rating-stars .star-half {
    color: #facc15;
}

.rating-stars .rating-number {
    margin-left: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.anime-card-body {
    padding: 0.55rem 0.6rem 0.65rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 4.1rem;
    background: transparent;
}

.anime-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    min-height: 2em;
    margin-bottom: 0.35rem;
    color: #f0f4ff;
    text-decoration: none;
    cursor: pointer;
    text-transform: uppercase;
}
.anime-card-title:hover {
    color: #8ec5ff;
}

.anime-card-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    margin-top: auto;
}

/* Meta: ● Chapter 2 ··· 7 jam */
.anime-card-meta-update {
    justify-content: flex-start;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.7rem;
    color: #e8eefc;
    margin-top: auto;
}
.anime-card-meta-update .meta-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f43f5e;
    box-shadow: 0 0 6px rgba(244, 63, 94, 0.6);
}
.anime-card-meta-update .meta-sep {
    color: rgba(140, 170, 220, 0.55);
    letter-spacing: 0.08em;
    font-size: 0.65rem;
}
.anime-card-meta-update .meta-time {
    color: #7eb0ff;
    font-weight: 500;
}

/* ========== Genre chips ========== */
.genre-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.genre-chip {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.genre-chip:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* ========== Grid ========== */
.anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.15rem;
    align-items: stretch;
}

/* Staggered entrance animation — cards fade/slide in as they enter the viewport */
.anime-grid .anime-card,
.carousel .anime-card {
    opacity: 0;
    transform: translateY(18px);
}

.anime-grid .anime-card.is-visible,
.carousel .anime-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .anime-grid .anime-card,
    .carousel .anime-card {
        opacity: 1;
        transform: none;
        transition: none !important;
    }
}

/* ========== Detail Page ========== */
.detail-hero {
    position: relative;
    min-height: 360px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.detail-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: heroKenBurns 22s ease-in-out infinite alternate;
    will-change: transform;
}

/* Slow, continuous zoom/drift so the banner never feels like a static image */
@keyframes heroKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1.5%, -1%); }
}

.detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-primary), rgba(11,11,18,0.85) 50%, rgba(11,11,18,0.4));
}

.detail-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 1.25rem 2rem;
    display: flex;
    gap: 2rem;
    align-items: flex-end;
}

.detail-cover {
    width: 200px;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 0;
    box-shadow: var(--shadow);
    flex-shrink: 0;
    border: 2px solid var(--border);
    opacity: 0;
    animation: heroCoverReveal 0.7s ease 0.05s forwards;
}

/* Cinematic reveal: cover, title, alt title, badges, info line and actions
   fade/slide in one after another instead of appearing all at once. */
@keyframes heroCoverReveal {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroTextReveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.detail-info h1,
.detail-info .hero-alt,
.detail-info .hero-meta,
.detail-info > p,
.detail-actions {
    opacity: 0;
    animation: heroTextReveal 0.6s ease forwards;
}

.detail-info h1        { animation-delay: 0.12s; }
.detail-info .hero-alt { animation-delay: 0.24s; }
.detail-info .hero-meta{ animation-delay: 0.36s; }
.detail-info > p       { animation-delay: 0.48s; }
.detail-actions        { animation-delay: 0.60s; }

@media (prefers-reduced-motion: reduce) {
    .detail-hero-bg,
    .detail-cover,
    .detail-info h1,
    .detail-info .hero-alt,
    .detail-info .hero-meta,
    .detail-info > p,
    .detail-actions {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* Fixed-ratio cover for detail pages (Light Novel, Anime detail) */
.page-cover {
    width: 220px;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    border: 1px solid var(--border);
    flex-shrink: 0;
    align-self: flex-start;
}

.detail-info h1 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    margin-bottom: 0.3rem;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.detail-section {
    max-width: 1400px;
    margin: 0 auto 2rem;
    padding: 0 1.25rem;
}

.detail-section h2 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.synopsis-text {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ========== Episode List ========== */
.episode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.episode-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
}
.episode-thumb {
    width: 76px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #1a1a28;
    position: relative;
}
.episode-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.episode-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.25));
    pointer-events: none;
}
.episode-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.episode-now {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
}

.episode-item:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
}

.episode-num {
    font-weight: 700;
    color: var(--accent);
    min-width: 2.5rem;
}

/* ========== Video Player ========== */
.player-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

.video-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16/9;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    display: block;
}

.player-info {
    margin-top: 1.25rem;
}

.player-info h1 {
    font-size: 1.45rem;
    margin: 0 0 0.25rem;
    line-height: 1.25;
}
.watch-heading {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.watch-heading-cover {
    width: 72px;
    height: 96px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    background: #222;
}
.watch-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}
.watch-ep-line {
    color: var(--text-secondary);
    margin: 0;
}
.watch-ep-desc {
    color: var(--text-muted);
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.55;
}

.player-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0;
}

/* ========== Reader ========== */
.reader-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    overflow-x: hidden;
}

.reader-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.reader-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.reader-content {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--text-primary);
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.reader-content p {
    margin-bottom: 1.25rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.reader-content img,
.reader-content .chapter-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.reader-content.theme-light {
    background: #f5f5f0;
    color: #1a1a1a;
    padding: 2rem;
    border-radius: var(--radius);
}

.reader-content.theme-sepia {
    background: #f4ecd8;
    color: #5b4636;
    padding: 2rem;
    border-radius: var(--radius);
}

.reader-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* ========== Auth forms ========== */
.auth-container {
    max-width: 420px;
    margin: 3rem auto;
    padding: 0 1.25rem;
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
}

.auth-card h1 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.auth-card .subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 1.15rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-control::placeholder {
    color: var(--text-muted);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--accent);
    font-weight: 500;
}

/* ========== Comments ========== */
.comments-section {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 1.25rem;
}

.comment-form textarea {
    width: 100%;
    min-height: 90px;
    margin-bottom: 0.75rem;
}

.comment-sort {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.sort-btn {
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all var(--transition);
}

.sort-btn.active,
.sort-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.comment-item {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(124, 108, 240, 0.28);
    border-radius: 4px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.85rem;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.comment-item::before,
.comment-item::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: rgba(124, 108, 240, 0.65);
    border-style: solid;
    pointer-events: none;
    z-index: 1;
}
.comment-item::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
}
.comment-item::after {
    top: -1px; right: -1px;
    border-width: 2px 2px 0 0;
}
.comment-item .comment-corner-bl,
.comment-item .comment-corner-br {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: rgba(124, 108, 240, 0.65);
    border-style: solid;
    pointer-events: none;
    z-index: 1;
}
.comment-item .comment-corner-bl {
    bottom: -1px; left: -1px;
    border-width: 0 0 2px 2px;
}
.comment-item .comment-corner-br {
    bottom: -1px; right: -1px;
    border-width: 0 2px 2px 0;
}
.comment-item:hover {
    border-color: rgba(124, 108, 240, 0.5);
    box-shadow: 0 4px 18px rgba(124, 108, 240, 0.12);
}

.comment-item.pinned {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.08), var(--bg-card));
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.comment-user {
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-user-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
}

.comment-author-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary, #fff);
    transition: opacity var(--transition);
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
}

.comment-author-link:hover {
    opacity: 0.8;
}

.comment-author-link:hover .comment-user {
    text-decoration: underline;
}

.comment-author-link > .profile-avatar-media,
.comment-author-link > .profile-avatar-fallback {
    /* Must outrank the global profile-avatar 72px !important rules. */
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 0.8rem !important;
    flex: 0 0 28px;
    object-fit: cover;
}

.comment-user-row .supervisor-badge,
.comment-user-row .admin-badge,
.comment-user-row .sysadmin-badge {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .comment-user {
        max-width: 90px;
    }
    .comment-user-row .supervisor-badge {
        font-size: 0.58rem;
        padding: 0.15rem 0.45rem;
    }
}

/* ========== Unlimited badge (replaces raw numbers) ========== */
.unlimited-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    color: var(--accent);
}

.unlimited-badge::before {
    content: '';
}

.unlimited-text {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: 0.2rem;
    text-transform: uppercase;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #ef4444, #f87171 45%, #dc2626);
    color: #fff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45), 0 0 18px rgba(248, 113, 113, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.28);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

/* SysAdmin — radiant gold glow (distinct from CTO platinum-gold shimmer) */
.sysadmin-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.65rem;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff8e1;
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 28%, #fde68a 50%, #fbbf24 72%, #d97706 100%);
    background-size: 200% 100%;
    animation: sysadminGlowPulse 2.4s ease-in-out infinite;
    border: 1px solid rgba(253, 230, 138, 0.7);
    box-shadow:
        0 0 12px rgba(251, 191, 36, 0.55),
        0 0 24px rgba(245, 158, 11, 0.35),
        0 0 40px rgba(217, 119, 6, 0.2),
        inset 0 0 10px rgba(255, 255, 255, 0.15);
    text-shadow: 0 0 10px rgba(255, 248, 225, 0.55);
}

.sysadmin-badge::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 6px;
    background: radial-gradient(ellipse at center, rgba(253, 230, 138, 0.45) 0%, transparent 70%);
    animation: sysadminHalo 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes sysadminGlowPulse {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow:
            0 0 12px rgba(251, 191, 36, 0.5),
            0 0 24px rgba(245, 158, 11, 0.3),
            0 0 36px rgba(217, 119, 6, 0.15),
            inset 0 0 10px rgba(255, 255, 255, 0.12);
    }
    50% {
        background-position: 100% 50%;
        box-shadow:
            0 0 18px rgba(251, 191, 36, 0.75),
            0 0 36px rgba(245, 158, 11, 0.5),
            0 0 56px rgba(217, 119, 6, 0.3),
            inset 0 0 14px rgba(255, 255, 255, 0.22);
    }
}

@keyframes sysadminHalo {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.06); }
}

/* Supervisor Admin — more luxurious: deeper gold/platinum shimmer,
   soft outer glow, refined frame. Premium without being loud. */
.supervisor-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.75rem;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fffdf5;
    background: linear-gradient(120deg,
        #6b6b78 0%, #c5c5d0 15%, #f0e6c0 30%, #f5d77a 45%,
        #ffe9a0 50%, #f5d77a 55%, #f0e6c0 70%, #c5c5d0 85%, #6b6b78 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: supervisorShimmer 3.2s linear infinite;
    border: 1px solid rgba(245, 215, 122, 0.55);
    box-shadow:
        0 0 14px rgba(245, 215, 122, 0.35),
        0 0 28px rgba(200, 180, 120, 0.18),
        inset 0 0 12px rgba(255, 255, 255, 0.06);
    text-shadow: none;
}

.supervisor-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 5px;
    padding: 1.5px;
    background: linear-gradient(120deg, #8a8a98, #f0e6c0, #f5d77a, #ffe9a0, #f5d77a, #f0e6c0, #8a8a98);
    background-size: 240% 100%;
    animation: supervisorShimmer 3.2s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

@keyframes supervisorShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 240% 50%; }
}

.pin-badge {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
}

.comment-body {
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

/* Collapsible comment / reply body — "Lihat selengkapnya" */
.comment-body-collapsible .comment-body-inner.collapsed {
    max-height: 4.8em;
    overflow: hidden;
    position: relative;
}

.comment-body-collapsible .comment-body-inner.collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.8em;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
}

.comment-item.reply-item .comment-body-collapsible .comment-body-inner.collapsed::after {
    background: linear-gradient(to bottom, transparent, var(--bg-secondary, var(--bg-card)));
}

.comment-item.pinned .comment-body-collapsible .comment-body-inner.collapsed::after {
    background: linear-gradient(to bottom, transparent, rgba(18, 16, 30, 0.95));
}

.comment-body-collapsible .comment-body-inner:not(.collapsed) {
    max-height: none;
}

.comment-see-more {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0;
    margin-top: 0.15rem;
    transition: opacity var(--transition);
}

.comment-see-more:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* "New" badge — top-left of anime cover, auto-hides after 4 days */
.badge-new {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25);
    line-height: 1.4;
}

.badge-new-static {
    position: static;
    margin-right: 0.15rem;
    vertical-align: middle;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
}

.like-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: color var(--transition);
}

.like-btn .like-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.like-btn .like-icon svg {
    display: block;
}
.like-btn.liked,
.like-btn:hover {
    color: #3b82f6;
}
.like-btn.liked .like-icon svg {
    transform: scale(1.08);
}

/* Pop/bounce feedback when a like is toggled on */
@keyframes likePopBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.45); }
    55%  { transform: scale(0.85); }
    80%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.like-btn.pop-anim {
    animation: likePopBounce 0.5s cubic-bezier(.17, .89, .32, 1.49);
    transform-origin: center;
}
.like-btn.pop-anim .like-count {
    display: inline-block;
    animation: likePopBounce 0.5s cubic-bezier(.17, .89, .32, 1.49);
}

.comment-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ========== Comment replies ========== */
.reply-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: color var(--transition);
}

.reply-btn:hover {
    color: var(--accent);
}

.reply-count {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Toggle to expand/collapse reply list */
.replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border);
    background: var(--bg-secondary, var(--bg-card));
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.replies-toggle:hover {
    border-color: var(--accent);
    background: rgba(124, 92, 252, 0.12);
}

.replies-toggle .replies-toggle-icon {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.75rem;
}

.replies-toggle[aria-expanded="true"] .replies-toggle-icon {
    transform: rotate(90deg);
}

.replies-toggle[aria-expanded="true"] {
    color: var(--text-secondary);
}

.reply-form {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}

.reply-form textarea {
    min-height: 70px;
}

.reply-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.comment-replies {
    margin-top: 0.9rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment-replies[hidden] {
    display: none !important;
}

/* Deep-link target: temporary highlight when arriving via #comment-<id>
   (CTO Control Center "Lihat Komentar", or a reply notification). */
.comment-item.comment-highlight {
    animation: comment-highlight-pulse 2.6s ease-out;
    border-radius: var(--radius-sm, 8px);
}

@keyframes comment-highlight-pulse {
    0% { box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.55); background: rgba(124, 92, 252, 0.14); }
    70% { box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.25); background: rgba(124, 92, 252, 0.07); }
    100% { box-shadow: 0 0 0 0 rgba(124, 92, 252, 0); background: transparent; }
}

.comment-item.reply-item {
    padding: 0.85rem 1rem;
    margin-bottom: 0;
    background: var(--bg-secondary, var(--bg-card));
}

.comment-item.reply-item .comment-author-link > .profile-avatar-media,
.comment-item.reply-item .comment-author-link > .profile-avatar-fallback {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 0.7rem !important;
    flex: 0 0 24px;
    object-fit: cover;
}

/* ========== Anime type badge (Movie) ========== */
.badge-type-movie {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    letter-spacing: 0.02em;
}

/* ========== Locked profile content (private admin data) ========== */
.locked-content {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}

.locked-content .lock-icon-big {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.locked-content h3 {
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.profile-tab .tab-lock-icon {
    font-size: 0.8rem;
    margin-left: 0.15rem;
    opacity: 0.8;
}

/* ========== Profile ========== */
/* Selalu horizontal: avatar kiri, info kanan (desktop & mobile) */
.profile-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 1.15rem;
    align-items: flex-start; /* avatar sejajar atas dengan nama */
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.15rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    max-width: 100%;
    overflow: hidden;
    text-align: left !important;
}

.profile-header .profile-info,
.profile-header > div.profile-info {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    text-align: left !important;
}

.profile-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.profile-email {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.35;
    margin: 0;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.profile-joined {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0;
}

.profile-hint,
.profile-privacy-note {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0.25rem 0 0;
}

.profile-follow-meta {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin: 0.35rem 0 0;
}

.profile-follow-form {
    margin-top: 0.55rem;
}

.profile-remove-form {
    display: inline;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.avatar-upload-form {
    flex-shrink: 0;
    margin: 0;
}

.profile-avatar-wrap {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}

.profile-avatar-media {
    display: block;
    width: 72px !important;
    height: 72px !important;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-secondary);
}

.profile-avatar-fallback {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
}

.profile-avatar-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: 2px solid var(--bg-card);
    transition: transform var(--transition);
}

.profile-avatar-wrap:hover .profile-avatar-edit {
    transform: scale(1.1);
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
}

.profile-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.profile-tabs::-webkit-scrollbar {
    height: 4px;
}

.profile-tabs::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

.profile-tab {
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-tab.active {
    background: rgba(124, 92, 252, 0.15);
    color: var(--accent);
}

/* ========== Admin ========== */
.admin-layout {
    display: flex;
    min-height: calc(100vh - var(--nav-height));
}

.admin-sidebar {
    width: 240px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    padding: 1.5rem 0;
    flex-shrink: 0;
}

.admin-sidebar a {
    display: block;
    padding: 0.7rem 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all var(--transition);
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: rgba(124, 92, 252, 0.12);
    color: var(--accent);
    border-right: 3px solid var(--accent);
}

.admin-content {
    flex: 1;
    padding: 1.5rem 2rem;
    overflow-x: auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}

.stat-card .number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-card .label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.admin-table th,
.admin-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.admin-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-table tr:hover td {
    background: rgba(124, 92, 252, 0.05);
}

.admin-table img {
    width: 50px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
}

/* ========== Footer ========== */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    margin-top: 3rem;
    padding: 3rem 0 0;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 3rem;
}

.footer-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.75rem;
    max-width: 280px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.footer-col h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.footer-col a {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

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

.footer-bottom {
    margin-top: 2.5rem;
    padding: 1.25rem;
    text-align: center;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Footer logo must not inherit desktop navbar shell rules,
   but keep brand color in sync with the navbar gradient. */
.footer .nav-logo {
    height: auto !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex: 0 0 auto !important;
}
.footer .logo-text {
    font-size: 1.35rem !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    background: linear-gradient(90deg, #fff, #b78aff 72%, #e6b8ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    white-space: nowrap;
}
.footer .logo-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 6px rgba(183, 138, 255, 0.35));
}

/* YumeSekai footer logo: use the same round favicon artwork.
 * Only the footer uses this image; the navbar keeps its existing mascot. */
.footer .footer-logo-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 0 7px rgba(183, 138, 255, 0.38));
}


/* ========== Search ========== */
.search-box {
    max-width: 600px;
    margin: 0 auto 2rem;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 1rem 1.25rem 1rem 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 1rem;
}

.search-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* ========== Empty state ========== */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-state h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
    .hero-content,
    .detail-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero-cover,
    .detail-cover {
        width: 140px;
    }
    .hero-info h1,
    .detail-info h1 {
        font-size: 1.6rem;
    }
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .admin-layout {
        flex-direction: column;
    }
    .admin-sidebar {
        width: 100%;
        display: flex;
        overflow-x: auto;
        padding: 0.5rem;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .admin-sidebar a {
        white-space: nowrap;
        padding: 0.6rem 1rem;
        border-right: none;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        flex-direction: column;
        padding: 1rem;
        gap: 0.25rem;
        border-bottom: 1px solid var(--border);
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
    }
    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .nav-link {
        width: 100%;
        padding: 0.75rem 1rem;
    }
    .anime-card {
        flex: 0 0 130px;
    }
    .hero {
        min-height: 420px;
    }
    /* Profile tetap horizontal di mobile — override hanya ukuran & padding */
    .profile-header {
        flex-direction: row !important;
        text-align: left !important;
        padding: 1rem 0.85rem;
        gap: 0.85rem;
        align-items: flex-start; /* avatar sejajar atas dengan nama */
    }
    .profile-name {
        font-size: 1.15rem !important;
        line-height: 1.3;
    }
    .profile-header .profile-info {
        min-width: 0;
        flex: 1;
        text-align: left !important;
    }
    .profile-avatar-wrap {
        width: 64px;
        height: 64px;
    }
    .profile-avatar-media,
    .profile-avatar-fallback,
    .profile-avatar {
        width: 64px !important;
        height: 64px !important;
        font-size: 1.4rem;
    }
    .profile-avatar-edit {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
    .profile-email {
        font-size: 0.82rem;
    }
    .profile-hint,
    .profile-privacy-note {
        font-size: 0.72rem;
    }
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
        margin-bottom: 1.25rem;
    }
    .stat-card {
        padding: 0.95rem 0.6rem;
    }
    .stat-card .number {
        font-size: 1.45rem;
    }
    .carousel {
        gap: 0.7rem;
        padding-right: 0.25rem;
    }
    .carousel .anime-card {
        flex: 0 0 132px;
        max-width: 132px;
    }
    .anime-card-body {
        padding: 0.55rem 0.55rem 0.7rem;
    }
    .anime-card-title {
        font-size: 0.78rem;
    }
}

@media (max-width: 480px) {
    .anime-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .anime-card {
        flex: 0 0 135px;
        max-width: 100%;
        min-width: 0;
    }
    .hero-actions {
        flex-direction: column;
    }
    .hero-actions .btn,
    .detail-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .profile-tabs {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .profile-tab {
        padding: 0.45rem 0.75rem;
        font-size: 0.88rem;
    }
    .section {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

/* Utility */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }
.hidden { display: none !important; }

/* ================================================================
 * CSS VARIABLES + THEME (Dark / Light / System)
 * ================================================================ */

/* While the theme is switching, fade the color-related properties instead
   of letting every element snap instantly to the new palette. Applied only
   for a short window by script.js so it never interferes with hover/other
   transitions during normal use. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
        box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
}

:root, [data-theme="dark"] {
    --bg-primary: #0b0b14;
    --bg-secondary: #12121f;
    --bg-tertiary: #1a1a2e;
    --bg-card: #1a1a28;
    --bg-card-hover: #22223a;
    --bg-glass: rgba(26, 26, 40, 0.75);
    --card-bg: #161625;
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b8;
    --text-muted: #6b6b80;
    --border: rgba(255, 255, 255, 0.08);
    --border-color: rgba(255,255,255,0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    --accent: #7c5cfc;
    --accent-hover: #9478ff;
    --accent-glow: rgba(124,92,252,0.35);
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --player-bg: #000;
    --control-bg: rgba(0,0,0,0.75);
    --skeleton-base: #1e1e30;
    --skeleton-shine: #2a2a40;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
}

[data-theme="light"] {
    --bg-primary: #f5f5fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ececf5;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f0f8;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --card-bg: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a60;
    --text-muted: #8a8aa0;
    --border: rgba(0,0,0,0.08);
    --border-color: rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.15);
    --accent: #6c4ce0;
    --accent-hover: #5a3cc8;
    --accent-glow: rgba(108,76,224,0.25);
    --player-bg: #000;
    --control-bg: rgba(0,0,0,0.8);
    --skeleton-base: #e8e8f0;
    --skeleton-shine: #f5f5fa;
}

/* Apply theme vars to body */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ================================================================
 * MODERN VIDEO PLAYER
 * ================================================================ */
.player-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
    transition: max-width 0.3s ease;
}
.player-container.player-theater {
    max-width: 100%;
    padding: 0;
}
.player-container.player-theater .video-wrapper {
    border-radius: 0;
}
.player-container.player-theater .player-info,
.player-container.player-theater .player-nav,
.player-container.player-theater .detail-section,
.player-container.player-theater .watch-layout,
.player-container.player-theater .watch-page-glow {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.video-wrapper {
    position: relative;
    width: 100%;
    background: var(--player-bg);
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
}

.av-player {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}
.av-ambient {
    position: absolute;
    inset: -18%;
    background-size: cover;
    background-position: center;
    filter: blur(36px) saturate(1.25);
    opacity: 0.28;
    pointer-events: none;
    z-index: 0;
    transform: scale(1.05);
}
.av-player video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    pointer-events: auto;
}

/* Controls — visibility dikontrol JS via .show-controls (auto-hide 2 detik)
   Saat pause, bar tetap tampil. Saat play + idle, bar hilang. */
.av-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.88));
    padding: 2.4rem 0.9rem 0.65rem;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 10;
    pointer-events: none;
}
.av-player.show-controls .av-controls,
.av-player:not(.playing) .av-controls {
    opacity: 1;
    pointer-events: auto;
}
.av-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem 2.4rem;
    background: linear-gradient(rgba(0,0,0,0.72), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.av-player.show-controls .av-topbar,
.av-player:not(.playing) .av-topbar {
    opacity: 1;
}
.av-topbar-text {
    min-width: 0;
    color: #fff;
}
.av-topbar-text strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.av-topbar-text span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.av-quality-badge {
    flex-shrink: 0;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.45rem;
    border-radius: 6px;
    backdrop-filter: blur(8px);
}
/* Sembunyikan kursor saat idle di fullscreen */
.av-player.hide-cursor,
.av-player.hide-cursor * {
    cursor: none !important;
}

.av-progress-bar {
    position: relative;
    height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 99px;
    cursor: pointer;
    margin-bottom: 0.55rem;
    touch-action: none;
    transition: height 0.15s ease;
}
.av-progress-bar:hover,
.av-progress-bar.is-hover {
    height: 8px;
}
.av-progress-buffered {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,0.34);
    border-radius: 99px;
    width: 0;
}
.av-progress-played {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--accent);
    border-radius: 99px;
    width: 0;
    z-index: 1;
    box-shadow: 0 0 10px rgba(124,92,252,0.45);
}
.av-progress-handle {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    left: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: 0 0 8px rgba(0,0,0,0.45);
}
.av-progress-bar:hover .av-progress-handle,
.av-progress-bar.is-hover .av-progress-handle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.av-scrub-tooltip {
    position: absolute;
    bottom: 16px;
    transform: translateX(-50%);
    background: rgba(15,15,20,0.92);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.22rem 0.45rem;
    border-radius: 6px;
    pointer-events: none;
    z-index: 4;
    border: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
}
.av-preview {
    position: absolute;
    bottom: 18px;
    transform: translateX(-50%);
    width: 168px;
    background: rgba(12,12,18,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.av-preview-shot {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: 140% auto;
    background-position: center;
    background-color: #111;
}
.av-preview-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem 0.42rem;
    color: #fff;
    font-size: 0.75rem;
}
.av-preview-meta strong {
    font-variant-numeric: tabular-nums;
}
.av-preview-meta span {
    color: rgba(255,255,255,0.65);
    font-size: 0.7rem;
}

.av-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
    overflow: visible;
}
.av-controls-left,
.av-controls-right {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}
/* Left group can shrink so right controls (esp. fullscreen) stay visible */
.av-controls-left {
    flex: 1 1 auto;
    overflow: hidden;
}
.av-controls-right {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    max-width: 58%;
}
/* Fullscreen must never be pushed off-screen when quality/resolution is present */
.av-controls-right #avFullscreen {
    flex: 0 0 auto;
    order: 99;
    margin-left: 0.1rem;
}
.av-controls-right #avTheater {
    flex: 0 0 auto;
}
.av-controls-right .av-menu-wrap {
    flex: 0 1 auto;
    min-width: 0;
}
.av-controls-right .av-menu-btn {
    max-width: 4.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 0.3rem 0.4rem;
}
.av-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    line-height: 1;
    flex-shrink: 0;
}
.av-btn:hover {
    background: rgba(255,255,255,0.15);
}
.av-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.av-vol-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.av-volume {
    width: 0;
    opacity: 0;
    height: 4px;
    accent-color: var(--accent);
    cursor: pointer;
    transition: width 0.18s ease, opacity 0.18s ease;
}
.av-vol-wrap:hover .av-volume,
.av-vol-wrap:focus-within .av-volume {
    width: 72px;
    opacity: 1;
}
.av-time {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.88);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    background: transparent;
    border: none;
    padding: 0.2rem 0.15rem;
    cursor: pointer;
    font-family: inherit;
}
.av-time:hover { color: #fff; }
.av-menu-btn {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
}

.av-menu-wrap {
    position: relative;
}
.av-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.4rem;
    background: rgba(20,20,30,0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.35rem;
    min-width: 100px;
    z-index: 20;
    backdrop-filter: blur(8px);
}
.av-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.4rem 0.65rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
}
.av-menu-item:hover,
.av-menu-item.active {
    background: var(--accent);
}

.av-big-play {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    background: rgba(0,0,0,0.55);
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    color: #fff;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
.av-big-play:hover {
    transform: scale(1.08);
    background: rgba(124,92,252,0.7);
}

/* Cluster tengah ala YouTube */
.av-center-controls {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 8vw, 4.5rem);
    z-index: 6;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.av-center-controls .av-big-play,
.av-center-controls .av-center-btn {
    pointer-events: auto;
}
.av-player.playing .av-center-controls,
.av-player.buffering .av-center-controls,
.av-player.av-action-flashing .av-center-controls {
    opacity: 0;
    pointer-events: none;
}
.av-big-play .icon-pause { display: none !important; }
.av-center-btn {
    background: rgba(0,0,0,0.45);
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    transition: transform 0.15s, background 0.15s;
    position: relative;
}
.av-center-btn span {
    position: absolute;
    font-size: 0.62rem;
    font-weight: 700;
    bottom: 8px;
    pointer-events: none;
}
.av-center-btn:hover {
    transform: scale(1.08);
    background: rgba(124,92,252,0.7);
}

/* Spinner buffering — ular melingkar */
.av-spinner {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    z-index: 8;
    pointer-events: none;
    background: transparent;
}
.av-player.buffering .av-spinner,
.av-spinner:not([hidden]) {
    display: flex;
}
.av-player.buffering .av-spinner {
    display: flex !important;
}
.av-spinner-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.22);
    border-top-color: #fff;
    border-right-color: rgba(255,255,255,0.85);
    animation: av-spin 0.75s linear infinite;
    box-shadow: 0 0 18px rgba(0,0,0,0.35);
}
.av-spinner-label {
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
@keyframes av-spin {
    to { transform: rotate(360deg); }
}
.av-btn#avPip.active {
    color: #a78bfa;
}

/* Hold-to-2x indicator (tekan lama seperti YouTube) */
.av-hold-speed {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -6px);
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.av-hold-speed.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.av-hold-speed span {
    display: inline-block;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 0, 0, 0.45);
    box-shadow: none;
    backdrop-filter: none;
}
/* Saat hold-to-2x: sembunyikan kontrol lain, hanya badge 2x */
.av-player.av-holding-speed .av-controls,
.av-player.av-holding-speed .av-center-controls,
.av-player.av-holding-speed .av-center-action,
.av-player.av-holding-speed .av-resume-prompt,
.av-player.av-holding-speed .av-quality-badge,
.av-player.av-holding-speed .av-spinner {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Pop play/pause di tengah seperti YouTube */
.av-center-action {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 88px;
    margin: -44px 0 0 -44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.55);
}
.av-center-action .av-action-play,
.av-center-action .av-action-pause {
    display: none;
}
.av-center-action.is-play .av-action-play,
.av-center-action.is-pause .av-action-pause {
    display: block;
}
.av-center-action.flash {
    display: flex;
    animation: av-action-pop 0.72s ease-out forwards;
}
@keyframes av-action-pop {
    0%   { opacity: 0; transform: scale(0.5); }
    16%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.38); }
}
@media (prefers-reduced-motion: reduce) {
    .av-spinner-ring { animation-duration: 1.6s; }
    .av-center-action.flash { animation-duration: 0.35s; }
}

.av-resume-prompt {
    position: absolute;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15,15,25,0.92);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    z-index: 15;
    text-align: center;
    backdrop-filter: blur(10px);
    max-width: 90%;
}
.av-resume-prompt p {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: 0.95rem;
}
.av-resume-pct {
    opacity: 0.7;
    font-size: 0.85rem;
}
.av-resume-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.av-autonext {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    text-align: center;
    padding: 1.5rem;
    color: #fff;
}
.av-autonext[hidden] {
    display: none !important;
}
.av-autonext-kicker {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    opacity: 0.7;
    margin: 0 0 0.35rem;
}
.av-autonext-title {
    font-size: 1.35rem;
    margin: 0.15rem 0 0.25rem;
    color: #fff;
    font-weight: 800;
}
.av-autonext-ep {
    font-size: 0.95rem;
    margin: 0 0 1rem;
    color: var(--accent-hover, #c4b5fd);
}
.av-autonext-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}
.av-autonext-countdown {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    opacity: 0.7;
}

.av-no-video {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #111;
    color: var(--text-muted);
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

/* Theater body lock */
body.theater-active {
    overflow-x: hidden;
}

/* Episode list active */
.episode-item.active {
    border-color: var(--accent) !important;
    background: rgba(124,92,252,0.12) !important;
}

/* ================================================================
 * SKELETON LOADING
 * ================================================================ */
.skeleton-card {
    background: var(--skeleton-base);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
    animation: skeleton-shine 1.4s infinite;
}
.skeleton-title {
    height: 1rem;
    width: 70%;
    background: var(--skeleton-base);
    border-radius: 4px;
    margin: 0.5rem 0;
}
.skeleton-text {
    height: 0.75rem;
    width: 90%;
    background: var(--skeleton-base);
    border-radius: 4px;
    margin: 0.35rem 0;
}
@keyframes skeleton-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ================================================================
 * THEME TOGGLE
 * ================================================================ */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ================================================================
 * NOTIFICATION BELL
 * ================================================================ */
.nav-notif {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Shake the bell once when the page loads with unread notifications */
@keyframes bellShake {
    0%, 100% { transform: rotate(0deg); }
    15%      { transform: rotate(14deg); }
    30%      { transform: rotate(-12deg); }
    45%      { transform: rotate(9deg); }
    60%      { transform: rotate(-7deg); }
    75%      { transform: rotate(4deg); }
    90%      { transform: rotate(-2deg); }
}
.nav-notif.has-unread {
    transform-origin: 50% 0%;
    animation: bellShake 0.7s ease-in-out 0.4s 2;
}

@media (prefers-reduced-motion: reduce) {
    .nav-notif.has-unread {
        animation: none !important;
    }
}
.nav-notif-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ================================================================
 * RATING UI
 * ================================================================ */
.user-rating-stars {
    display: inline-flex;
    gap: 0.2rem;
    cursor: pointer;
}
.user-rating-stars .star-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: color 0.1s, transform 0.1s;
}
.user-rating-stars .star-btn:hover,
.user-rating-stars .star-btn.active {
    color: #f5c518;
    transform: scale(1.1);
}

/* Pop/bounce feedback when a star is picked */
@keyframes starPopBounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.5) rotate(-8deg); }
    60%  { transform: scale(0.9) rotate(4deg); }
    100% { transform: scale(1.1) rotate(0deg); }
}
.user-rating-stars .star-btn.pop-anim {
    animation: starPopBounce 0.45s cubic-bezier(.17, .89, .32, 1.49);
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .like-btn.pop-anim,
    .like-btn.pop-anim .like-count,
    .user-rating-stars .star-btn.pop-anim {
        animation: none !important;
    }
}
.rating-dist-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    margin: 0.2rem 0;
}
.rating-dist-bar .bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}
.rating-dist-bar .bar-fill {
    height: 100%;
    background: #f5c518;
    border-radius: 4px;
}

/* ================================================================
 * RESPONSIVE PLAYER
 * ================================================================ */
@media (max-width: 768px) {
    .av-volume,
    .av-vol-wrap:hover .av-volume,
    .av-vol-wrap:focus-within .av-volume { display: none; width: 0; opacity: 0; }
    .watch-heading-cover { width: 56px; height: 76px; }
    .av-time { font-size: 0.7rem; min-width: 70px; }
    .av-big-play { width: 64px; height: 64px; }
    .av-big-play svg { width: 40px; height: 40px; }
    .av-center-btn { width: 46px; height: 46px; }
    .av-center-btn svg { width: 22px; height: 22px; }
    .av-center-controls { gap: clamp(0.75rem, 6vw, 2rem); }
    .av-spinner-ring { width: 56px; height: 56px; }
    .player-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .player-nav .btn { width: auto; flex: 1 1 auto; text-align: center; }
    body.watch-page .btn { width: auto; }
    body.watch-page .watch-actions { align-items: center; }
    body.watch-page .watch-actions .btn { width: auto; }
    body.watch-page .watch-upnext-shot { max-height: 148px; }
    body.watch-page .watch-layout { margin-top: 0.75rem; }
}
@media (max-width: 480px) {
    .av-controls-right .av-menu-btn { font-size: 0.68rem; padding: 0.22rem 0.3rem; max-width: 3.4rem; }
    .av-controls-right { gap: 0.1rem; max-width: 62%; }
    .av-controls-left { gap: 0.1rem; }
    /* Theater less useful on phone — free space for quality + fullscreen */
    .av-controls-right #avTheater { display: none !important; }
    .av-controls-right #avHelpBtn { display: none !important; }
    .av-controls-right #avFullscreen {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 0 0 auto !important;
        width: 36px;
        height: 36px;
    }
    .av-time {
        font-size: 0.68rem !important;
        max-width: 7.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media (max-width: 900px) and (pointer: coarse) {
    .av-controls-row { gap: 0.25rem; }
    .av-controls-right {
        flex: 0 0 auto;
        max-width: 60%;
    }
    .av-controls-right #avFullscreen {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        order: 99;
    }
    .av-controls-right #avTheater { display: none !important; }
    .av-controls-right .av-menu-btn {
        max-width: 3.6rem;
        font-size: 0.72rem;
    }
}

/* ===== Mascot responsive (tablet + state scrolled) ===== */

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .logo-mascot {
        width: 96px;
        height: 63px;
        margin-left: -5px;
        margin-right: 1px;
        transform: translateY(6px);
    }
}

/* ================================================================
 * SKIP INDICATOR (double-click / double-tap ±5s)
 * ================================================================ */
.av-skip-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.75);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 25;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.av-skip-indicator.backward { left: 16%; }
.av-skip-indicator.forward  { right: 16%; }
.av-skip-indicator.show {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
@media (max-width: 480px) {
    .av-skip-indicator {
        width: 72px;
        height: 72px;
        font-size: 1.25rem;
    }
}

/* ================================================================
 * PLAYER HUD (volume / seek feedback) & KEYBOARD HELP
 * ================================================================ */
.av-hud {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
}
.av-hud.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.av-hud-icon { font-size: 1.15rem; line-height: 1; }
.av-hud-bar {
    display: inline-block;
    width: 72px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}
.av-hud-bar i {
    display: block;
    height: 100%;
    background: #fff;
    border-radius: 3px;
}
.av-hud-text { min-width: 2.5rem; text-align: right; }

.av-help {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.av-help-panel {
    background: rgba(18, 18, 28, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1.1rem 1.25rem 1.25rem;
    max-width: 420px;
    width: 100%;
    max-height: 90%;
    overflow-y: auto;
    color: #f0f0f5;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.av-help-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
}
.av-help-close {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
}
.av-help-close:hover { color: #fff; }
.av-help-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.45rem 0.85rem;
    align-items: center;
    font-size: 0.88rem;
    color: #c8c8d4;
}
.av-help-grid kbd {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    text-align: center;
    color: #fff;
}
@media (max-width: 480px) {
    .av-help-panel { padding: 0.9rem 1rem; }
    .av-help-grid { font-size: 0.8rem; gap: 0.35rem 0.6rem; }
}

/* ========== Admin Control (Supervisor) ========== */
.admin-control-page { max-width: 1100px; }
.ac-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ac-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    margin: 0 0 0.25rem;
    background: linear-gradient(135deg, #c4b5fd, #a78bfa 40%, #7c5cfc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ac-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.ac-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.ac-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    text-align: center;
}
.ac-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.2;
}
.ac-stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.ac-stat-active .ac-stat-value { color: #34d399; }
.ac-stat-done .ac-stat-value { color: #a78bfa; }
.ac-filters { margin-bottom: 1.25rem; }
.ac-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.ac-filter-tab {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
}
.ac-filter-tab.active {
    background: linear-gradient(135deg, #7c5cfc, #6d28d9);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.ac-search-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ac-search-row .form-control { flex: 1; min-width: 180px; }
.ac-section { margin-bottom: 2rem; }
.ac-section-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.ac-sub-title { font-size: 0.95rem; color: var(--text-muted); margin: 1rem 0 0.5rem; }
.ac-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.ac-admin-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ac-admin-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ac-admin-name-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}
.ac-admin-name {
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}
.ac-admin-name:hover { color: var(--accent); }
.ac-online-dot { font-size: 0.75rem; white-space: nowrap; }
.ac-online-dot.online { color: #34d399; }
.ac-online-dot.offline { color: var(--text-muted); }
.ac-admin-meta { font-size: 0.75rem; color: var(--text-muted); }
.ac-no-task { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.ac-task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.ac-task-list-compact {
    gap: 0.45rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.15rem;
}
.ac-task-item {
    background: rgba(124, 92, 252, 0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
}
.ac-task-list-compact .ac-task-item {
    padding: 0.5rem 0.65rem;
}
.ac-task-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.ac-task-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.4rem;
}
.ac-task-title-row .ac-task-title { margin-bottom: 0.2rem; flex: 1; min-width: 0; }
.ac-task-edit {
    flex-shrink: 0;
    padding: 0.15rem 0.4rem !important;
    font-size: 0.8rem;
    line-height: 1.2;
}
.ac-task-fold { margin: 0.35rem 0 0.5rem; }
.ac-task-fold > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ac-task-fold > summary::-webkit-details-marker { display: none; }
.ac-task-fold > summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s ease;
}
.ac-task-fold[open] > summary::before { content: '▾ '; }
.ac-edit-hint {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(124, 92, 252, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(124, 92, 252, 0.25);
}
.ac-edit-hint a { color: var(--accent); }
.ac-task-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.ac-ep-count { font-size: 0.8rem; color: var(--text-secondary); }
.ac-status-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.status-completed { background: rgba(52, 211, 153, 0.2); color: #34d399; }
.status-progress { background: rgba(124, 92, 252, 0.2); color: #a78bfa; }
.status-stalled { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
.status-overdue { background: rgba(248, 113, 113, 0.2); color: #f87171; }
.status-not-started { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.ac-progress-bar {
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.ac-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c5cfc, #a78bfa);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.ac-progress-fill.done {
    background: linear-gradient(90deg, #34d399, #6ee7b7);
}
.ac-task-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.ac-late { color: #f87171; font-weight: 600; }
.ac-admin-card-actions { margin-top: auto; padding-top: 0.35rem; }
.ac-assign-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}
.ac-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
.ac-date-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}
.ac-date-filter label { font-size: 0.8rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.25rem; }
.ac-activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 480px;
    overflow-y: auto;
}
.ac-activity-item {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}
.ac-activity-time { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.ac-activity-body code {
    font-size: 0.75rem;
    background: rgba(124, 92, 252, 0.15);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: #c4b5fd;
}
.ac-activity-target, .ac-activity-ip {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: 0.35rem;
}
.ac-detail-header { margin-bottom: 1rem; }
.ac-detail-badges { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.35rem; }
.ac-detail-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    font-size: 0.9rem;
}
.ac-detail-info .label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}
@media (max-width: 640px) {
    .ac-activity-item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .ac-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Upload progress (admin episode) ===== */
.upload-progress-wrap {
    margin: 1rem 0 0.25rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.upload-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.upload-progress-meta span:first-child {
    color: var(--text, #e5e7eb);
    font-weight: 500;
}
.upload-progress-meta span:last-child {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.upload-progress-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.upload-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c5cfc, #a78bfa);
    border-radius: 999px;
    transition: width 0.15s ease-out;
}
.upload-progress-fill.done {
    background: linear-gradient(90deg, #34d399, #6ee7b7);
}
.upload-progress-fill.error {
    background: linear-gradient(90deg, #f87171, #fb7185);
}
.upload-progress-detail {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}


/* ================================================================
 * Admin Control — task groups + mobile notif
 * ================================================================ */
.ac-task-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0.75rem 0 0.4rem;
}
.ac-task-group-done {
    margin-top: 1rem;
    opacity: 0.85;
}
.ac-task-list-done .ac-task-item {
    opacity: 0.85;
}
.ac-more-done {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
}
.ac-more-done:hover {
    text-decoration: underline;
}

/* Mobile notification bell (outside hamburger) */
.nav-notif-mobile {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    padding: 0.35rem 0.5rem;
    margin-right: 0.15rem;
    text-decoration: none;
    color: var(--text-primary);
}
.nav-notif-mobile .nav-notif-badge {
    top: 0;
    right: 0;
}

@media (max-width: 768px) {
    .nav-notif-mobile {
        display: inline-flex;
    }
    /* Sembunyikan lonceng di dalam menu drawer agar tidak dobel */
    .nav-links .nav-notif {
        display: none;
    }
}

.nav-right-mobile {
    display: none;
    align-items: center;
    gap: 0.15rem;
}
@media (max-width: 768px) {
    .nav-right-mobile {
        display: flex;
    }
}


/* DirectLink sponsor gate */
.directlink-gate {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 12px;
    background: var(--surface, rgba(255,255,255,.04));
}
.directlink-gate-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent, rgba(255,255,255,.1));
    color: var(--text-primary, #fff);
    font-size: 1.25rem;
}
.directlink-gate-content { flex: 1; min-width: 0; }
.directlink-gate-content strong { display: block; margin-bottom: .2rem; }
.directlink-gate-content p { margin: 0 0 .75rem; color: var(--text-secondary, #aaa); font-size: .88rem; line-height: 1.5; }


@media (max-width: 600px) {
    .directlink-gate { align-items: flex-start; }
    .directlink-gate-icon { width: 36px; height: 36px; flex-basis: 36px; }
}

/* ================================================================
 * CUSTOM THEME BACKGROUND (image / video)
 * ================================================================ */


/* Admin Dashboard — theme custom panel */


/* ================================================================
 * CONTINUE WATCHING — anime folder cards
 * ================================================================ */
.cw-folder-card {
    position: relative;
}
.cw-folder-card .anime-card-cover {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.cw-folder-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}
.cw-progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: rgba(255,255,255,.15);
    z-index: 2;
    border-radius: 999px 999px 0 0;
    overflow: hidden;
}
.cw-progress-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent, #7c5cff), #FFD700);
    box-shadow: 0 0 8px rgba(255, 199, 60, 0.6);
    transition: width 0.4s ease;
}
.cw-resume-link {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--accent, #a78bfa);
    text-decoration: none;
    font-weight: 600;
}
.cw-resume-link:hover { text-decoration: underline; }

/* Overlay panel (folder contents) */
.cw-folder-panel {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
}
.cw-folder-panel[hidden] {
    display: none !important;
}
.cw-folder-panel-inner {
    width: min(420px, 100%);
    max-height: min(80vh, 560px);
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #1a1a22);
    border: 1px solid var(--border-color, rgba(255,255,255,.12));
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
    overflow: hidden;
}
.cw-folder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,.1));
}
.cw-folder-head-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.cw-folder-thumb {
    width: 44px;
    height: 62px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.cw-folder-head strong {
    display: block;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cw-folder-sub {
    font-size: 0.75rem;
    color: var(--text-muted, #999);
    margin-top: 0.15rem;
}
.cw-folder-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.cw-folder-close:hover { background: rgba(255,255,255,.15); }
.cw-folder-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.cw-folder-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted, #999);
    font-size: 0.9rem;
}
.cw-folder-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.7rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}
.cw-folder-item:hover {
    background: rgba(255,255,255,.06);
}
.cw-folder-ep {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent, #a78bfa);
    min-width: 2.6rem;
}
.cw-folder-ep-title {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cw-folder-ep-prog {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--text-muted, #999);
    white-space: nowrap;
}
.cw-mini-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.12);
    overflow: hidden;
}
.cw-mini-bar > span {
    display: block;
    height: 100%;
    background: var(--accent, #7c5cff);
}
.cw-folder-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color, rgba(255,255,255,.1));
}

/* ================================================================
 * FULLSCREEN — fill viewport + mobile landscape (YouTube-like)
 * ================================================================ */
.av-player:fullscreen,
.av-player:-webkit-full-screen,
.av-player.av-fs-active:fullscreen,
.av-player.av-fs-active:-webkit-full-screen {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: #000;
    border-radius: 0 !important;
}

.av-player:fullscreen video,
.av-player:-webkit-full-screen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Controls stay usable in fullscreen */
.av-player:fullscreen .av-controls,
.av-player:-webkit-full-screen .av-controls {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

/*
 * Fallback when Screen Orientation lock is blocked and the phone
 * stays in portrait during fullscreen: rotate the player so the
 * 16:9 video uses the long side of the screen (YouTube-style).
 */
.av-player.av-fs-rotate:fullscreen,
.av-player.av-fs-rotate:-webkit-full-screen {
    /* Fullscreen box is still portrait; we rotate contents */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.av-player.av-fs-rotate:fullscreen video,
.av-player.av-fs-rotate:-webkit-full-screen video {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Swap viewport axes after 90° rotation */
    width: 100vh;
    height: 100vw;
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%) rotate(90deg);
    object-fit: contain;
}

.av-player.av-fs-rotate:fullscreen .av-controls,
.av-player.av-fs-rotate:-webkit-full-screen .av-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: auto;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%) rotate(90deg);
    padding: 1.5rem 0.75rem 0.75rem;
    box-sizing: border-box;
}

.av-player.av-fs-rotate:fullscreen .av-center-controls,
.av-player.av-fs-rotate:-webkit-full-screen .av-center-controls,
.av-player.av-fs-rotate:fullscreen .av-spinner,
.av-player.av-fs-rotate:-webkit-full-screen .av-spinner,
.av-player.av-fs-rotate:fullscreen .av-center-action,
.av-player.av-fs-rotate:-webkit-full-screen .av-center-action {
    transform: rotate(90deg);
}
.av-player.av-fs-rotate:fullscreen .av-big-play,
.av-player.av-fs-rotate:-webkit-full-screen .av-big-play {
    transform: none;
}

.av-player.av-fs-rotate:fullscreen .av-skip-indicator,
.av-player.av-fs-rotate:-webkit-full-screen .av-skip-indicator {
    transform: translateY(-50%) rotate(90deg);
}
.av-player.av-fs-rotate:fullscreen .av-skip-indicator.show,
.av-player.av-fs-rotate:-webkit-full-screen .av-skip-indicator.show {
    transform: translateY(-50%) rotate(90deg) scale(1);
}

/* Prefer landscape lock when supported — no rotate needed */
@media (orientation: landscape) {
    .av-player.av-fs-rotate:fullscreen video,
    .av-player.av-fs-rotate:-webkit-full-screen video {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        height: 100%;
        transform: none;
    }
    .av-player.av-fs-rotate:fullscreen .av-controls,
    .av-player.av-fs-rotate:-webkit-full-screen .av-controls {
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        transform: none;
    }
    .av-player.av-fs-rotate:fullscreen .av-center-controls,
    .av-player.av-fs-rotate:-webkit-full-screen .av-center-controls,
    .av-player.av-fs-rotate:fullscreen .av-spinner,
    .av-player.av-fs-rotate:-webkit-full-screen .av-spinner,
    .av-player.av-fs-rotate:fullscreen .av-center-action,
    .av-player.av-fs-rotate:-webkit-full-screen .av-center-action,
    .av-player.av-fs-rotate:fullscreen .av-big-play,
    .av-player.av-fs-rotate:-webkit-full-screen .av-big-play {
        transform: none;
    }
}

/* ========== Admin task type badge ========== */
.ac-task-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-right: 0.35rem;
    vertical-align: middle;
    background: rgba(212, 175, 55, 0.2);
    color: #d4af37;
    border: 1px solid rgba(212, 175, 55, 0.45);
}
.ac-task-type-badge:first-child {
    /* LN uses slightly different tint via content — keep same class for both */
}

/* ========== Anime card — red + gold border (CSS only, all anime types) ========== */
/*
 * Efek merah-emas adalah identitas visual semua anime card di YumeSekai.
 * Ring dibuat lebih kecil dari versi sebelumnya agar tetap terpotong rapi
 * oleh overflow:hidden milik card dan tidak tampak memanjang pada Movie.
 */
.anime-card {
    isolation: isolate;
    border-color: transparent;
    padding: 2px;
    background: transparent;
    box-sizing: border-box;
}

.anime-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    height: 160%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    background: conic-gradient(
        from 0deg,
        #8B0000,
        #FFD700,
        #C41E3A,
        #FFD700,
        #8B0000
    );
}

/* Border hanya berputar saat kartu di-hover — hemat GPU untuk grid berisi banyak kartu */
.anime-card:hover::before {
    opacity: 0.9;
    animation: anime-card-border-spin 3.5s linear infinite;
}

/* Glow berdenyut lembut di sekeliling kartu saat hover */
.anime-card:hover {
    animation: anime-card-glow-pulse 1.8s ease-in-out infinite;
}

@keyframes anime-card-glow-pulse {
    0%, 100% {
        box-shadow: 0 12px 32px var(--accent-glow), 0 0 16px 1px rgba(255, 199, 60, 0.35);
    }
    50% {
        box-shadow: 0 16px 46px var(--accent-glow), 0 0 28px 4px rgba(255, 120, 60, 0.55);
    }
}

/* Kilau (shimmer) yang menyapu cover sekali setiap kartu di-hover */
.anime-card-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 40%,
        rgba(255, 255, 255, 0.55) 48%,
        rgba(255, 215, 0, 0.65) 50%,
        rgba(255, 255, 255, 0.55) 52%,
        transparent 60%
    );
    background-size: 250% 250%;
    background-position: 150% 150%;
    opacity: 0;
}

.anime-card:hover .anime-card-cover::after {
    animation: anime-card-shimmer 0.9s ease-in-out;
}

@keyframes anime-card-shimmer {
    0% { background-position: 150% 150%; opacity: 0; }
    15% { opacity: 1; }
    100% { background-position: -50% -50%; opacity: 0; }
}

.anime-card > .anime-card-cover,
.anime-card > a.anime-card-cover,
a.anime-card > .anime-card-cover {
    position: relative;
    z-index: 1;
    border-radius: 1px 1px 0 0; /* runcing, selaras dengan kartu */
    background: #111; /* hindari bercak putih */
}

.anime-card > .anime-card-body,
a.anime-card > .anime-card-body {
    position: relative;
    z-index: 1;
    background: var(--bg-card);
    border-radius: 0 0 1px 1px; /* runcing */
}

a.anime-card {
    color: inherit;
    text-decoration: none;
}

@keyframes anime-card-border-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Desktop: ring lebih besar & lebih cerah saat hover */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .anime-card:hover::before {
        width: 175%;
        height: 175%;
        opacity: 0.95;
        animation-duration: 3s;
        background: conic-gradient(
            from 0deg,
            #5C0000 0deg,
            #C41E3A 45deg,
            #FFD700 90deg,
            #B8860B 135deg,
            #8B0000 180deg,
            #FFD700 225deg,
            #DC143C 270deg,
            #DAA520 315deg,
            #5C0000 360deg
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .anime-card::before {
        display: block;
        animation: none !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        transform: none;
        opacity: 0.6;
        background: linear-gradient(
            135deg,
            #8B0000,
            #C41E3A,
            #FFD700,
            #8B0000
        );
    }
    .anime-card:hover {
        animation: none !important;
    }
    .anime-card-cover::after {
        display: none !important;
    }
}

/* ========== Info overlay saat hover (genre + sinopsis singkat) ========== */
.anime-card-hover-info {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.7rem;
    background: linear-gradient(180deg, rgba(10,10,20,0) 0%, rgba(10,10,20,0.6) 45%, rgba(8,8,16,0.94) 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.anime-card:hover .anime-card-hover-info {
    opacity: 1;
    transform: translateY(0);
}

.anime-card-hover-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.hover-genre-chip {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    white-space: nowrap;
    backdrop-filter: blur(2px);
}

.anime-card-hover-synopsis {
    font-size: 0.7rem;
    line-height: 1.4;
    color: rgba(255,255,255,0.85);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.anime-card-hover-cta {
    font-size: 0.7rem;
    font-weight: 700;
    color: #FFD700;
}

/* Sembunyikan overlay di perangkat sentuh (tidak ada hover asli) */
@media (hover: none) {
    .anime-card-hover-info {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anime-card-hover-info {
        transition: opacity 0.2s ease;
        transform: none;
    }
}

/* DirectLink hard lock — video tidak bisa diputar sampai klik (mobile-friendly) */
.video-wrapper:has(.directlink-lock) {
    aspect-ratio: auto;
    min-height: 300px;
    height: auto;
    overflow: visible;
}
.directlink-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 300px;
    height: auto;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0d0d14 70%);
    color: var(--text-primary, #fff);
    text-align: center;
    padding: 1.75rem 1rem;
    box-sizing: border-box;
}
.directlink-lock-inner {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    box-sizing: border-box;
    padding: 0 0.15rem;
}
.directlink-lock-icon {
    font-size: 2.2rem;
    line-height: 1;
}
.directlink-lock-inner strong {
    font-size: 1.15rem;
    font-weight: 700;
}
.directlink-lock-inner p {
    margin: 0;
    color: var(--text-secondary, #aaa);
    font-size: 0.88rem;
    line-height: 1.5;
}
.directlink-lock-hint {
    font-size: 0.78rem !important;
    opacity: 0.75;
}
.directlink-lock a.btn,
.directlink-lock button.btn,
.directlink-lock .btn-lg {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem !important;
    font-size: 0.92rem !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.35;
    overflow: visible !important;
    text-overflow: unset !important;
    height: auto !important;
    min-height: 44px;
}
@media (max-width: 480px) {
    .video-wrapper:has(.directlink-lock),
    .directlink-lock {
        min-height: 260px;
    }
    .directlink-lock {
        padding: 1.35rem 0.85rem;
    }
    .directlink-lock-icon {
        font-size: 1.9rem;
    }
    .directlink-lock-inner strong {
        font-size: 1.05rem;
    }
    .directlink-lock-inner p {
        font-size: 0.82rem;
    }
    .directlink-lock a.btn,
    .directlink-lock button.btn,
    .directlink-lock .btn-lg {
        font-size: 0.88rem !important;
        padding: 0.7rem 0.8rem !important;
    }
}


/* ================================================================
 * WATCH STUDIO — cinematic viewing page
 * ================================================================ */
body.watch-page {
    background: var(--bg-primary, #07070c);
}
.watch-studio {
    position: relative;
    max-width: 1280px;
}
.watch-page-glow {
    position: absolute;
    left: -8%;
    right: -8%;
    top: -80px;
    height: 420px;
    background-size: cover;
    background-position: center;
    filter: blur(48px) saturate(1.15);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom, #000 20%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 85%);
}
.watch-studio > .video-wrapper,
.watch-studio > .watch-layout {
    position: relative;
    z-index: 1;
}
.watch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.15rem;
    margin-top: 1.15rem;
    align-items: start;
}
.watch-actions {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.av-autonext-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.watch-episodes {
    padding: 0;
    margin-top: 0.4rem;
    background: transparent;
    border: none;
}
.watch-ep-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}
.watch-ep-head h2 { margin: 0; border: none; padding: 0; }
.watch-season-pills { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.watch-season-pill {
    min-width: 2.2rem;
    text-align: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
}
.watch-season-pill.active,
.watch-season-pill:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.watch-ep-rail {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.15rem 0.1rem 0.55rem;
    scrollbar-width: thin;
}
.watch-ep-rail .episode-item {
    flex: 0 0 270px;
    scroll-snap-align: start;
}
.watch-comments {
    max-width: none;
    margin: 1.4rem 0 0;
    padding: 1rem 1.05rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.watch-comments h2 {
    margin-bottom: 0.8rem;
}
.watch-login-hint {
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.watch-login-hint a { color: var(--accent); }
.watch-rail {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    position: sticky;
    top: calc(var(--nav-height) + 0.75rem);
}
.watch-upnext {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.watch-upnext:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.watch-upnext-shot {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
}
.watch-upnext-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.watch-upnext-shot span {
    position: absolute;
    left: 0.6rem;
    bottom: 0.55rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
}
.watch-upnext-body { padding: 0.75rem 0.85rem 0.9rem; }
.watch-upnext-body strong { display: block; margin-bottom: 0.2rem; }
.watch-upnext-body p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
}
.watch-upnext.is-end { padding: 0.2rem 0 0.85rem; }
.watch-similar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.8rem 0.8rem 0.7rem;
}
.watch-similar h3 {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.7rem;
}
.watch-similar-item {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 0.35rem;
    border-radius: 10px;
}
.watch-similar-item:hover { background: var(--bg-card-hover); }
.watch-similar-item img {
    width: 42px;
    height: 58px;
    object-fit: cover;
    border-radius: 7px;
    flex-shrink: 0;
    background: #111;
}
.watch-similar-item strong {
    display: block;
    font-size: 0.82rem;
    line-height: 1.25;
}
.watch-similar-item small {
    color: var(--text-muted);
    font-size: 0.72rem;
}
@media (max-width: 980px) {
    .watch-layout { grid-template-columns: 1fr; }
    .watch-rail { position: static; }
}


/* ================================================================
 * MINI PLAYER — tetap putar saat scroll ke komentar
 * ================================================================ */
.av-mini-slot {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 16px;
}
.av-player.av-mini-active {
    position: fixed !important;
    top: auto;
    left: auto;
    right: 1rem;
    bottom: 1rem;
    width: min(380px, calc(100vw - 1.4rem));
    height: auto;
    aspect-ratio: 16 / 9;
    z-index: 120;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
    animation: avMiniIn 0.22s ease-out;
}
@keyframes avMiniIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
.av-player.av-mini-active video {
    width: 100%;
    height: 100%;
}
.av-player.av-mini-active .av-topbar,
.av-player.av-mini-active .av-center-controls,
.av-player.av-mini-active .av-center-action,
.av-player.av-mini-active .av-ambient,
.av-player.av-mini-active .av-quality-badge {
    display: none !important;
}
.av-player.av-mini-active .av-controls {
    opacity: 1 !important;
    pointer-events: auto;
    padding: 1.4rem 0.55rem 0.35rem;
}
.av-player.av-mini-active .av-controls-right .av-menu-wrap,
.av-player.av-mini-active #avTheater,
.av-player.av-mini-active #avHelpBtn,
.av-player.av-mini-active #avNextBtn,
.av-player.av-mini-active .av-vol-wrap {
    display: none;
}
.av-player.av-mini-active .av-time { min-width: 0; font-size: 0.7rem; }
.av-mini-bar {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    right: 0.4rem;
    z-index: 16;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    pointer-events: none;
}
.av-player.av-mini-active .av-mini-bar {
    display: flex !important;
}
.av-mini-back,
.av-mini-close {
    pointer-events: auto;
    border: none;
    cursor: pointer;
    color: #fff;
}
.av-mini-back {
    background: rgba(0,0,0,0.55);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.6rem;
    backdrop-filter: blur(8px);
}
.av-mini-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    font-size: 1.1rem;
    line-height: 1;
}
.av-mini-back:hover,
.av-mini-close:hover { background: rgba(124,92,252,0.85); }
.av-player.av-mini-active:fullscreen,
.av-player.av-mini-active:-webkit-full-screen {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto;
    inset: auto;
}
@media (max-width: 640px) {
    .av-player.av-mini-active {
        right: 0.55rem;
        bottom: 0.55rem;
        width: min(240px, calc(100vw - 1rem));
    }
    .av-mini-back { font-size: 0.64rem; padding: 0.2rem 0.45rem; }
}
@media (prefers-reduced-motion: reduce) {
    .av-player.av-mini-active { animation: none; }
}


/* ================================================================
 * WATCH PAGE MOBILE — cegah tombol/kartu melebar
 * Root cause lama: @media 480px .btn { width:100% } membuat
 * Watch Later / Halaman anime / Episode berikutnya jadi batang full.
 * ================================================================ */
.watch-studio,
.watch-studio * {
    box-sizing: border-box;
}
.watch-studio .btn,
.watch-studio .btn-sm,
.watch-studio .btn-primary,
.watch-studio .btn-secondary {
    width: auto !important;
    max-width: 100%;
}
.watch-studio .player-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}
.watch-studio .player-nav > span:empty {
    display: none !important;
}
.watch-studio .player-nav .btn {
    width: auto !important;
    flex: 0 1 auto !important;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
}
.watch-studio .watch-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
}
.watch-studio .watch-actions .btn {
    width: auto !important;
    flex: 0 1 auto !important;
    padding: 0.4rem 0.7rem !important;
}
.watch-studio .av-autonext-toggle {
    width: auto !important;
    flex: 0 0 auto;
}
.watch-studio .watch-comments .comment-form .btn {
    width: auto !important;
}

@media (max-width: 768px) {
    body.watch-page,
    .watch-studio {
        overflow-x: hidden;
    }
    .watch-page-glow {
        left: 0;
        right: 0;
    }
    .player-container.watch-studio {
        padding: 0.65rem 0.75rem 4.5rem;
        max-width: 100%;
        overflow-x: hidden;
    }
    .watch-studio .player-nav {
        justify-content: flex-start !important;
        margin: 0.85rem 0 !important;
    }
    .ys-ad-socialbar {
        max-width: 42vw !important;
        font-size: 0.62rem !important;
        bottom: 8px !important;
        right: 8px !important;
    }
    .watch-heading {
        gap: 0.7rem;
    }
    .watch-heading-cover {
        width: 48px !important;
        height: 64px !important;
    }
    .watch-studio .player-info h1 {
        font-size: 1.15rem;
    }
    .watch-upnext {
        display: flex !important;
        align-items: center;
        gap: 0;
    }
    .watch-upnext-shot {
        width: 118px;
        min-width: 118px;
        max-height: none !important;
        aspect-ratio: 16 / 9;
        flex-shrink: 0;
    }
    .watch-upnext-body {
        flex: 1;
        min-width: 0;
        padding: 0.55rem 0.7rem !important;
    }
    .watch-upnext.is-end {
        display: block !important;
    }
    .watch-studio .ys-ad-wrap {
        margin: 0.45rem 0;
    }
    .watch-ep-rail .episode-item {
        flex: 0 0 220px;
    }
    .watch-comments {
        padding: 0.8rem;
        margin-top: 1rem;
    }
}


@media (max-width: 768px) {
    .nav-logo {
        gap: 0.2rem;
        font-size: 1.15rem;
    }
    /* logo-mascot size removed — controlled by MASCOT MOBILE block at end of file */
}

/* ================================================================
 * HP / TOUCH LAYOUT LOCK
 * Screenshot terakhir = layout desktop yang ikut ke HP
 * (nav penuh 1 baris + iklan 2 kolom + kartu berikutnya raksasa).
 * Pakai breakpoint lebih lebar + pointer kasar (layar sentuh).
 * ================================================================ */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    .navbar, .nav-container {
        max-width: 100vw;
        min-width: 0;
    }
    .video-wrapper,
    .watch-studio > .video-wrapper,
    .av-player {
        width: 100% !important;
        max-width: 100% !important;
    }
    .player-container,
    .player-container.watch-studio {
        max-width: 100% !important;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
    .watch-layout {
        grid-template-columns: 1fr !important;
    }
    .watch-rail { position: static !important; }
    .watch-upnext {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
    }
    .watch-upnext-shot {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        height: 64px !important;
        aspect-ratio: auto !important;
        max-height: 64px !important;
        flex-shrink: 0;
    }
    .watch-upnext-shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .watch-upnext-body {
        padding: 0.45rem 0.65rem !important;
        flex: 1;
        min-width: 0;
    }
    .watch-studio .player-nav .btn {
        flex: 0 1 auto !important;
        width: auto !important;
    }
}


/* ================================================================
 * YUMESEKAI WATCH COMPATIBILITY SHELL
 * Keep the new Watch Studio features, but use the compact geometry of the
 * previous watch page on phones: centered content, no horizontal expansion,
 * one-column ad flow, and linear content order.
 * ================================================================ */
.watch-studio {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}
.watch-studio > *,
.watch-studio .watch-layout,
.watch-studio .watch-main,
.watch-studio .watch-rail,
.watch-studio .player-info,
.watch-studio .detail-section,
.watch-studio .comments-section {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.watch-studio .watch-page-glow {
    left: 0;
    right: 0;
    max-width: 100%;
}
.watch-studio .video-wrapper {
    border-radius: 12px;
}

@media (max-width: 980px), (hover: none) and (pointer: coarse) {
    body.watch-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }
    .player-container.watch-studio {
        width: 100%;
        max-width: 1200px !important;
        margin-left: auto;
        margin-right: auto;
        padding: 1rem 1.25rem 3rem !important;
        overflow: visible;
    }
    .watch-studio .watch-layout {
        display: block !important;
        width: 100%;
        margin-top: 1rem;
    }
    .watch-studio .watch-main {
        display: block;
        width: 100%;
    }
    /* New sidebar features stay available, but move below comments like the old page. */
    .watch-studio .watch-rail {
        display: flex !important;
        width: 100%;
        position: static !important;
        margin-top: 1rem;
        flex-direction: column;
    }
    .watch-studio .watch-upnext,
    .watch-studio .watch-similar {
        width: 100%;
        max-width: 100%;
    }
    .watch-studio .watch-heading {
        min-width: 0;
    }
    .watch-studio .watch-heading > div:last-child {
        min-width: 0;
    }
    .watch-studio .watch-heading h1,
    .watch-studio .watch-ep-line,
    .watch-studio .watch-ep-desc {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Restore the old compact action/navigation flow. */
    .watch-studio .watch-actions,
    .watch-studio .player-nav {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .watch-studio .watch-actions .btn,
    .watch-studio .player-nav .btn,
    .watch-studio .watch-comments .comment-form .btn {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        white-space: nowrap;
    }
    .watch-studio .av-autonext-toggle {
        width: auto !important;
        flex: 0 1 auto !important;
        white-space: nowrap;
    }

    /* Keep the NEW ad layout: 2 banners per row / 4 rows / 8 banners.
       The row itself is clipped to the content width so ad markup cannot
       create horizontal page overflow on phones. */
    .watch-studio .ys-ad-wrap.ys-ad-dual {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .watch-studio .ys-ad-wrap.ys-ad-dual .ys-ad-slot {
        display: block !important;
        flex: 0 0 calc((100% - 6px) / 2) !important;
        width: calc((100% - 6px) / 2) !important;
        max-width: calc((100% - 6px) / 2) !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .watch-studio .ys-ad-slot iframe,
    .watch-studio .ys-ad-slot ins,
    .watch-studio .ys-ad-slot > div,
    .watch-studio .ys-ad-slot img {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* New episode rail keeps its horizontal scroll, but the page itself never
       inherits the rail's width. */
    .watch-studio .watch-ep-rail {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
    }
    .watch-studio .watch-ep-rail .episode-item {
        flex: 0 0 270px;
        max-width: 270px;
    }
    .watch-studio .watch-comments {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
}

@media (max-width: 640px) {
    .player-container.watch-studio {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .watch-studio .watch-heading-cover {
        width: 56px !important;
        height: 76px !important;
    }
    .watch-studio .watch-actions .btn,
    .watch-studio .player-nav .btn {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }
}

/* ============================================================
   Comics / Manga redesign — Home, Detail, Chapter list, badges
   ============================================================ */

/* Type badges di atas poster — HANYA di dalam .anime-card-cover (jangan di hero-meta) */
.anime-card-cover > .badge-comic,
.anime-card-cover > .badge-type-tv,
.anime-card-cover > .badge-type-movie,
.anime-card-cover > .badge-type-ova,
.anime-card-cover > .badge-type-ona,
.anime-card-cover > .badge-type-special,
.anime-card-cover > .badge,
.anime-card-cover > [class*="badge-type"],
.anime-card-cover > [class*="badge-comic"] {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  border: 1px solid rgba(120, 190, 255, 0.45);
  line-height: 1.15;
  background: linear-gradient(135deg, #2b6fff 0%, #1a4fd4 100%);
  color: #fff;
  box-shadow: 0 1px 4px rgba(20, 80, 200, 0.35);
}
/* Manhwa / Manhua / Manga tetap dibedakan warnanya */
.badge-comic-manga {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border-color: rgba(100, 170, 255, 0.5) !important;
  color: #fff !important;
}
.badge-comic-manhwa {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: rgba(255, 120, 120, 0.45) !important;
  color: #fff !important;
}
.badge-comic-manhua {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
  border-color: rgba(250, 204, 80, 0.5) !important;
  color: #111 !important;
}
.badge-static.badge-comic {
  position: static;
  display: inline-block;
  box-shadow: none;
}

/* Continue Watching type badge — compact footprint */
.badge-continue-type {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  padding: 3px 7px !important;
  border-radius: 3px !important;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: 1px solid rgba(46, 86, 158, 0.95);
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
.continue-progress-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.15);
  z-index: 2;
}
.continue-progress-bar > div {
  height: 100%;
  background: var(--accent, #7c5cfc);
  transition: width 0.2s ease;
}

/* Manga detail hero */
.manga-hero {
  position: relative;
  margin-bottom: 1.5rem;
  overflow: hidden;
  min-height: 320px;
}
.manga-hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--manga-cover);
  background-size: cover;
  background-position: center top;
  filter: blur(28px) saturate(1.2);
  transform: scale(1.1);
  opacity: 0.45;
}
.manga-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,10,18,0.55) 0%,
    rgba(10,10,18,0.75) 50%,
    var(--bg-primary, #0a0a12) 100%
  );
}
[data-theme="light"] .manga-hero-overlay,
body.light .manga-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.75) 50%,
    var(--bg-primary, #f5f5f8) 100%
  );
}
.manga-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 2rem;
  flex-wrap: wrap;
}
.manga-hero-cover {
  flex-shrink: 0;
  width: 200px;
}
.manga-hero-cover img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.manga-hero-info {
  flex: 1;
  min-width: 240px;
  padding-bottom: 0.5rem;
}
.manga-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.manga-hero-badges .badge-comic {
  position: static;
}
.manga-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.manga-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.manga-hero-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.manga-hero-synopsis {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 720px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Chapter toolbar — search + sort */
.chapter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.85rem;
}
.chapter-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
}
.chapter-search-input {
  width: 100%;
  padding: 0.55rem 0.85rem 0.55rem 2.35rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chapter-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.chapter-search-input::placeholder {
  color: var(--text-muted);
}
.chapter-search-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  opacity: 0.7;
  pointer-events: none;
}
.chapter-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.chapter-sort-btn {
  white-space: nowrap;
}

/* Range quick-jump tabs */
.chapter-range-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.chapter-range-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chapter-range-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.chapter-range-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chapter-empty-filter {
  text-align: center;
  color: var(--text-muted);
  padding: 1.5rem 1rem;
  font-size: 0.95rem;
}

/* Chapter pagination */
.chapter-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.25rem;
  padding: 0.5rem 0;
}
.chapter-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
a.chapter-page-btn:hover:not(.active),
.chapter-page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--accent);
  color: var(--text-primary);
}
.chapter-page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}
.chapter-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.chapter-page-prev,
.chapter-page-next {
  min-width: auto;
  padding: 0 0.75rem;
}
.chapter-page-ellipsis {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0 0.2rem;
  user-select: none;
}

/* Chapter list — horizontal compact like episode list */
.manga-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.manga-chapter-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.manga-chapter-item:hover {
  border-color: var(--accent, #7c5cfc);
  background: var(--bg-secondary, rgba(255,255,255,0.03));
}
.manga-chapter-num {
  flex-shrink: 0;
  min-width: 3.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent, #7c5cfc);
}
.manga-chapter-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.manga-chapter-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.manga-chapter-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.manga-chapter-title strong {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manga-chapter-title small {
  color: var(--text-muted);
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .manga-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 2rem;
  }
  .manga-hero-cover img {
    width: 150px;
    height: 225px;
  }
  .manga-hero-badges,
  .manga-hero-genres,
  .manga-hero-meta {
    justify-content: center;
  }
  .manga-hero-synopsis {
    text-align: left;
  }
  .manga-chapter-item {
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
  }
  .manga-chapter-num {
    min-width: 2.8rem;
    font-size: 0.8rem;
  }
  .manga-chapter-thumb {
    width: 48px;
    height: 64px;
  }
  .manga-chapter-title strong {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ===== Comics: Ch Baru + Locked Chapter badges ===== */
.badge-ch-baru {
  display: inline-block;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.35rem;
  vertical-align: middle;
  letter-spacing: 0.02em;
  animation: pulse-baru 1.8s ease-in-out infinite;
}
.badge-ch-baru-card {
  /* Di bawah rating agar tidak bertabrakan */
  position: absolute;
  top: 36px;
  right: 8px;
  left: auto;
  z-index: 4;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  letter-spacing: 0.03em;
  animation: pulse-baru 1.8s ease-in-out infinite;
}
.badge-locked {
  display: inline-block;
  background: rgba(100, 116, 139, 0.35);
  color: #94a3b8;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.manga-chapter-item.is-locked {
  opacity: 0.85;
}
.manga-chapter-item.is-locked:hover {
  opacity: 1;
}
@keyframes pulse-baru {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}

/* ============================================
   DISABLE red + gold border effect on anime cards
   + apply futuristic card panel style
   ============================================ */

.anime-card {
    padding: 0 !important;
    isolation: auto !important;
    background: linear-gradient(180deg, rgba(12, 18, 36, 0.95) 0%, rgba(8, 12, 28, 0.98) 100%) !important;
    border: 1px solid rgba(56, 120, 220, 0.35) !important;
    border-radius: 8px !important;
    box-shadow:
        0 0 0 1px rgba(40, 90, 180, 0.12),
        0 4px 18px rgba(0, 40, 120, 0.25),
        inset 0 1px 0 rgba(120, 180, 255, 0.06) !important;
}

.anime-card::before {
    display: none !important;
    content: none !important;
    animation: none !important;
    background: none !important;
    opacity: 0 !important;
}

.anime-card:hover {
    animation: none !important;
    border-color: rgba(80, 150, 255, 0.65) !important;
    box-shadow:
        0 0 0 1px rgba(80, 150, 255, 0.25),
        0 8px 28px rgba(30, 100, 220, 0.35),
        0 0 20px rgba(50, 120, 255, 0.15) !important;
    transform: translateY(-5px) !important;
}

/* Restore original play-button (▶) instead of the gold shimmer */
.anime-card-cover::after {
    content: '▶' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 42px !important;
    height: 42px !important;
    margin: -21px 0 0 -21px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.62) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    padding-left: 3px !important;
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    z-index: 2 !important;
    pointer-events: none !important;
    /* kill shimmer properties */
    background-size: auto !important;
    background-position: initial !important;
    animation: none !important;
}

.anime-card:hover .anime-card-cover::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

/* Also restore the dark gradient overlay on cover hover */
.anime-card-cover::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 42%) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.anime-card:hover .anime-card-cover::before {
    opacity: 1 !important;
}

/* Cover / body radius selaras panel futuristik */
.anime-card > .anime-card-cover,
.anime-card > a.anime-card-cover,
a.anime-card > .anime-card-cover {
    border-radius: 7px 7px 0 0 !important;
    background: #0a0e1a !important;
}

.anime-card > .anime-card-body,
a.anime-card > .anime-card-body {
    border-radius: 0 0 7px 7px !important;
    background: transparent !important;
}

/* ================================================================
   YUMESEKAI CONTENT CARD — BLUEPRINT MATCH v3
   Based on the supplied card specification.
   Structure: main panel > inset cover > type/rating overlay > title > unit/status.
   ================================================================ */
.anime-card {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-height: 340px !important;
    height: 340px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #071022 !important;
    border: 1px solid rgba(45, 93, 170, 0.88) !important;
    border-radius: 3px !important;
    box-shadow:
        0 0 0 1px rgba(24, 62, 125, 0.22),
        0 7px 20px rgba(0, 10, 35, 0.34),
        inset 0 0 18px rgba(25, 75, 150, 0.08) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.anime-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(72, 130, 225, 0.98) !important;
    box-shadow:
        0 0 0 1px rgba(45, 105, 205, 0.35),
        0 10px 25px rgba(0, 35, 105, 0.34),
        0 0 16px rgba(40, 100, 210, 0.12) !important;
}

.anime-card > .anime-card-cover,
.anime-card > a.anime-card-cover,
a.anime-card > .anime-card-cover {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    margin: 9px 9px 0 !important;
    overflow: hidden !important;
    background: #0a1225 !important;
    border: 1.5px solid var(--cover-edge, rgba(73, 119, 197, 0.85)) !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
    transition: border-color 0.45s ease !important;
}

.anime-card-cover img,
.anime-card-cover img.is-loaded {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Type is a reusable content label: TV / Movie / Manga / Manhwa / Manhua / etc. */
.anime-card-cover > .ys-card-type,
.anime-card-cover > .badge-type-unified,
.anime-card-cover > .badge-comic,
.anime-card-cover > [class*="badge-type"],
.anime-card-cover > [class*="badge-comic"] {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: calc(100% - 52px) !important;
    padding: 3px 7px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(46, 86, 158, 0.85) !important;
    background: rgba(38, 103, 213, 0.92) !important;
    color: #071326 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
    font-size: 0.58rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Distinct colors for content types on card cover */
.anime-card-cover > .badge-type-movie,
.anime-card-cover > .badge-type-unified.badge-type-movie {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #fff !important;
    border-color: rgba(250, 180, 60, 0.65) !important;
}
.anime-card-cover > .badge-type-tv,
.anime-card-cover > .badge-type-unified.badge-type-tv {
    background: rgba(38, 103, 213, 0.92) !important;
    color: #071326 !important;
    border-color: rgba(46, 86, 158, 0.95) !important;
}
.anime-card-cover > .badge-type-ova,
.anime-card-cover > .badge-type-ona,
.anime-card-cover > .badge-type-special {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
    color: #fff !important;
    border-color: rgba(180, 140, 255, 0.5) !important;
}
/* Manga = blue, Manhwa = red, Manhua = gold */
.anime-card-cover > .badge-comic-manga,
.anime-card-cover > .badge-type-manga {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff !important;
    border-color: rgba(100, 170, 255, 0.55) !important;
}
.anime-card-cover > .badge-comic-manhwa,
.anime-card-cover > .badge-type-manhwa {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
    border-color: rgba(255, 120, 120, 0.5) !important;
}
.anime-card-cover > .badge-comic-manhua,
.anime-card-cover > .badge-type-manhua {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    color: #111 !important;
    border-color: rgba(250, 204, 80, 0.55) !important;
}

.anime-card-cover > .badge-type-light-novel,
.anime-card-cover > .badge-type-light_novel,
.anime-card-cover > .badge-type-ln,
.anime-card-cover > .badge-type-unified.badge-type-light-novel {
    background: rgba(16, 185, 129, 0.92) !important;
    color: #fff !important;
    border: 1px solid rgba(80, 220, 170, 0.55) !important;
}

/* Continue Watching type badges reuse same palette */
.anime-card-cover > .badge-continue-type.badge-comic-manga,
.anime-card-cover > .badge-continue-type.is-manga {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(100, 170, 255, 0.55) !important;
}
.anime-card-cover > .badge-continue-type.badge-comic-manhwa,
.anime-card-cover > .badge-continue-type.is-manhwa {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 120, 120, 0.5) !important;
}
.anime-card-cover > .badge-continue-type.badge-comic-manhua,
.anime-card-cover > .badge-continue-type.is-manhua {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    color: #111 !important;
    border: 1px solid rgba(250, 204, 80, 0.55) !important;
}
.anime-card-cover > .badge-continue-type.is-movie {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(250, 180, 60, 0.65) !important;
}
.anime-card-cover > .badge-continue-type.is-anime,
.anime-card-cover > .badge-continue-type.is-tv {
    background: rgba(38, 103, 213, 0.92) !important;
    color: #071326 !important;
    border: 1px solid rgba(46, 86, 158, 0.95) !important;
}
.anime-card-cover > .badge-continue-type.is-ln {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(80, 220, 170, 0.5) !important;
}

.anime-card-cover > .rating-badge {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(8, 14, 28, 0.48) !important;
    color: #f7f9ff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

.anime-card-cover > .rating-badge::before {
    content: '★' !important;
    color: #facc15 !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
}

/* Keep optional New badge from colliding with the type badge. */
.anime-card-cover > .badge-new {
    top: 42px !important;
    left: 8px !important;
    z-index: 5 !important;
}

.anime-card > .anime-card-body,
a.anime-card > .anime-card-body {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 8px 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background: #071022 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

.anime-card-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    min-height: 2.35em !important;
    margin: 0 0 9px !important;
    color: #f5f7ff !important;
    font-size: 0.82rem !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: 0.015em !important;
    text-align: center !important;
    text-transform: none !important;
}

.anime-card-title:hover {
    color: #ffffff !important;
}

.anime-card-meta.ys-card-meta,
.anime-card .ys-card-meta {
    margin-top: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 0.65rem !important;
    color: #eef4ff !important;
}

.ys-card-unit {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #f4f7ff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.ys-card-status {
    flex: 0 0 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 48% !important;
    color: #d9e2f4 !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
}

.ys-card-status.status-completed { color: #d9e2f4 !important; }
.ys-card-status.status-ongoing { color: #d9e2f4 !important; }
.ys-card-status.status-not-airing { color: #9fb0cb !important; }

/* The blueprint has no red/gold animated card frame or gold shimmer. */
.anime-card::before,
.anime-card-cover::before,
.anime-card-cover::after {
    pointer-events: none !important;
}

/* Preserve the existing play affordance but keep it visually subtle. */
.anime-card-cover::after {
    content: '▶' !important;
    width: 32px !important;
    height: 32px !important;
    margin: -16px 0 0 -16px !important;
    border-radius: 50% !important;
    background: rgba(3, 8, 18, 0.55) !important;
    color: #fff !important;
    font-size: 0.75rem !important;
}
@media (max-width: 600px) {
    .anime-card-cover::after {
        width: 26px !important;
        height: 26px !important;
        margin: -13px 0 0 -13px !important;
        font-size: 0.65rem !important;
    }
}

/* Grid cards use the same visual component while allowing the grid to size them. */
.anime-grid .anime-card {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
}

@media (max-width: 900px) {
    .anime-card {
        flex-basis: 160px !important;
        width: 160px !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

@media (max-width: 600px) {
    .anime-card {
        flex-basis: 142px !important;
        width: 142px !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .anime-card > .anime-card-cover,
    .anime-card > a.anime-card-cover,
    a.anime-card > .anime-card-cover {
        margin: 6px 6px 0 !important;
    }
    .anime-card-title { font-size: 0.72rem !important; min-height: 2.2em !important; margin-bottom: 6px !important; }
    .anime-card-cover > .ys-card-type,
    .anime-card-cover > .badge-type-unified,
    .anime-card-cover > .badge-comic,
    .anime-card-cover > [class*="badge-type"],
    .anime-card-cover > [class*="badge-comic"],
    .anime-card-cover > .badge-continue-type {
        top: 5px !important;
        left: 5px !important;
        font-size: 0.52rem !important;
        padding: 2px 5px !important;
        max-width: calc(100% - 44px) !important;
    }
    .anime-card-cover > .rating-badge {
        top: 5px !important;
        right: 5px !important;
        font-size: 0.55rem !important;
        padding: 2px 5px !important;
    }
    .anime-card-cover > .badge-new {
        top: 28px !important;
        left: 5px !important;
        font-size: 0.52rem !important;
        padding: 2px 5px !important;
    }
    .badge-ch-baru-card {
        top: 28px !important;
        right: 5px !important;
        font-size: 0.5rem !important;
        padding: 2px 4px !important;
    }
    .ys-card-unit { font-size: 0.7rem !important; }
    .ys-card-status { font-size: 0.66rem !important; }
}


/* Mobile carousel / card polish */
@media (max-width: 600px) {
    .section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .section-title {
        font-size: 1rem !important;
    }
    .carousel-wrap {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }
    .carousel {
        gap: 0.55rem !important;
        padding: 0 0.35rem 0.35rem !important;
        scroll-padding: 0.35rem;
    }
    .anime-card-body {
        padding: 6px 7px 8px !important;
    }
    .ys-card-unit {
        font-size: 0.62rem !important;
    }
    .ys-card-status {
        font-size: 0.58rem !important;
        max-width: 46% !important;
    }
    .continue-progress-bar {
        height: 2px !important;
    }
}


/* ================================================================
 * LIGHT THEME polish (data-theme="light")
 * ================================================================ */
[data-theme="light"] .anime-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 20px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .anime-card:hover {
    border-color: rgba(108, 76, 224, 0.35) !important;
    box-shadow:
        0 4px 16px rgba(108, 76, 224, 0.12),
        0 8px 24px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-3px) !important;
}
[data-theme="light"] .anime-card-title,
[data-theme="light"] .anime-card .anime-card-title,
[data-theme="light"] a.anime-card-title {
    color: #1a1a2e !important;
}
[data-theme="light"] .anime-card-title:hover {
    color: #6c4ce0 !important;
}
[data-theme="light"] .anime-card-meta,
[data-theme="light"] .ys-card-meta,
[data-theme="light"] .ys-card-unit,
[data-theme="light"] .ys-card-status {
    color: #5a5a72 !important;
}
[data-theme="light"] .anime-card > .anime-card-cover,
[data-theme="light"] .anime-card > a.anime-card-cover,
[data-theme="light"] a.anime-card > .anime-card-cover {
    border: 1.5px solid var(--cover-edge, rgba(15, 23, 42, 0.12)) !important;
    background: #e8e8f0 !important;
}
[data-theme="light"] .section-title {
    color: #1a1a2e !important;
}
[data-theme="light"] .carousel-btn {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #1a1a2e !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1) !important;
}
[data-theme="light"] .carousel-btn:hover {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* Rating on covers — readable on both themes */
[data-theme="light"] .anime-card-cover > .rating-badge,
[data-theme="light"] .rating-badge:not(.rating-badge-static) {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}
[data-theme="light"] .anime-card-cover > .rating-badge::before,
[data-theme="light"] .rating-badge:not(.rating-badge-static)::before {
    content: '★' !important;
    color: #facc15 !important;
}

/* Detail / hero rating (static) — light page */
[data-theme="light"] .rating-badge-static,
[data-theme="light"] .hero-meta .rating-badge {
    position: static !important;
    background: #1e293b !important;
    color: #fff !important;
    border: 1px solid rgba(250, 204, 21, 0.4) !important;
}
[data-theme="light"] .rating-badge-static::before,
[data-theme="light"] .hero-meta .rating-badge::before {
    content: '★' !important;
    color: #facc15 !important;
}

/* Prevent double-star: never show star character twice */
.rating-badge::before {
    content: '★';
}
/* If any leftover text star sneaks in, hide extra via gap only one ::before */

/* Detail hero on light */
[data-theme="light"] .detail-hero h1,
[data-theme="light"] .detail-info h1 {
    color: #1a1a2e !important;
}
[data-theme="light"] .hero-alt {
    color: #5a5a72 !important;
}
[data-theme="light"] .detail-hero .hero-meta .badge,
[data-theme="light"] .hero-meta .badge {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .navbar,
[data-theme="light"] .nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

/* Continue progress bar visible on light cards */
[data-theme="light"] .cw-progress-bar {
    background: rgba(15, 23, 42, 0.12) !important;
}


/* Detail hero readable in light theme */
[data-theme="light"] .detail-hero-overlay {
    background: linear-gradient(
        to top,
        var(--bg-primary) 0%,
        rgba(245, 245, 250, 0.92) 45%,
        rgba(245, 245, 250, 0.55) 100%
    ) !important;
}
[data-theme="light"] .detail-info h1 {
    color: #0f172a !important;
    text-shadow: none !important;
}
[data-theme="light"] .detail-info .hero-alt {
    color: #64748b !important;
}
[data-theme="light"] .detail-info > p {
    color: #64748b !important;
}
[data-theme="light"] .detail-cover {
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.15) !important;
}
/* Synopsis / body sections already use theme vars */

/* Manga / LN detail heroes if same classes */
[data-theme="light"] .manga-hero-overlay {
    background: linear-gradient(to top, var(--bg-primary), rgba(245,245,250,0.9) 50%, rgba(245,245,250,0.5)) !important;
}

.hero-meta .rating-badge,
.detail-info .rating-badge,
.manga-detail .rating-badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.22rem !important;
}
/* Exactly one star via ::before only */
.hero-meta .rating-badge::before,
.detail-info .rating-badge::before {
    content: '★' !important;
    color: #facc15 !important;
    margin: 0 !important;
}

/* Detail hero-meta: type/rating badges MUST stay in normal flow (not absolute) */
.hero-meta .ys-card-type,
.hero-meta .badge-type-unified,
.hero-meta [class*="badge-type"],
.hero-meta .rating-badge,
.hero-meta .badge-comic,
.detail-info .ys-card-type,
.detail-info .badge-type-unified,
.detail-info [class*="badge-type"],
.detail-info .rating-badge,
.manga-hero-badges .ys-card-type,
.manga-hero-badges [class*="badge-type"],
.manga-hero-badges .rating-badge {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: auto !important;
}
.hero-meta .rating-badge::before,
.detail-info .rating-badge::before {
    content: '★' !important;
    color: #facc15 !important;
}

/* Light theme — full card consistency (override dark !important body) */
[data-theme="light"] .anime-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .anime-card > .anime-card-body,
[data-theme="light"] a.anime-card > .anime-card-body {
    background: #ffffff !important;
}
[data-theme="light"] .anime-card-title,
[data-theme="light"] .anime-card .anime-card-title,
[data-theme="light"] a.anime-card-title {
    color: #0f172a !important;
}
[data-theme="light"] .anime-card-title:hover {
    color: #6c4ce0 !important;
}
[data-theme="light"] .anime-card-meta,
[data-theme="light"] .ys-card-meta,
[data-theme="light"] .ys-card-unit,
[data-theme="light"] .ys-card-status,
[data-theme="light"] .anime-card-meta span {
    color: #64748b !important;
}
[data-theme="light"] .anime-card > .anime-card-cover,
[data-theme="light"] .anime-card > a.anime-card-cover,
[data-theme="light"] a.anime-card > .anime-card-cover {
    background: #f1f5f9 !important;
    border-color: var(--cover-edge, rgba(15, 23, 42, 0.12)) !important;
}

/* Hero type badge as pill (same family as genre chips) */
.hero-meta .ys-card-type,
.hero-meta .badge-type-unified,
.detail-info .ys-card-type,
.detail-info .badge-type-unified {
    background: rgba(124, 92, 252, 0.22) !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(124, 92, 252, 0.35) !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    padding: 0.25rem 0.7rem !important;
    box-shadow: none !important;
}
[data-theme="light"] .hero-meta .ys-card-type,
[data-theme="light"] .hero-meta .badge-type-unified,
[data-theme="light"] .detail-info .ys-card-type,
[data-theme="light"] .detail-info .badge-type-unified {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}
[data-theme="light"] .hero-meta .badge,
[data-theme="light"] .detail-info .badge {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}
[data-theme="light"] .badge-status.completed {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}


/* ================================================================
 * Watch page — light theme consistency
 * Player/directlink stays dark; page chrome follows theme.
 * ================================================================ */
[data-theme="light"] body.watch-page {
    background: var(--bg-primary, #f5f5fa) !important;
}
[data-theme="light"] .watch-page-glow {
    opacity: 0.12 !important;
    filter: blur(48px) saturate(1.05) !important;
}
[data-theme="light"] .watch-studio .player-info h1,
[data-theme="light"] .watch-heading,
[data-theme="light"] .watch-kicker,
[data-theme="light"] .watch-ep-line,
[data-theme="light"] .watch-ep-desc {
    color: var(--text-primary, #1a1a2e) !important;
}
[data-theme="light"] .watch-kicker {
    color: var(--accent, #6c4ce0) !important;
}
[data-theme="light"] .watch-ep-line,
[data-theme="light"] .watch-ep-desc {
    color: var(--text-secondary, #4a4a60) !important;
}
[data-theme="light"] .watch-upnext,
[data-theme="light"] .watch-upnext.is-end {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    color: #0f172a !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .watch-upnext-body strong {
    color: #0f172a !important;
}
[data-theme="light"] .watch-upnext-body p {
    color: #64748b !important;
}
[data-theme="light"] .watch-comments {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
[data-theme="light"] .watch-comments h2,
[data-theme="light"] .watch-ep-head h2 {
    color: #0f172a !important;
}
[data-theme="light"] .watch-season-pill {
    background: #ffffff !important;
    color: #475569 !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .watch-season-pill.active,
[data-theme="light"] .watch-season-pill:hover {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}
[data-theme="light"] .watch-studio .player-nav .btn,
[data-theme="light"] .watch-studio .watch-actions .btn-secondary {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .watch-studio .player-nav .btn:disabled {
    opacity: 0.45 !important;
}
/* Related / "Karena kamu menonton" cards in rail */
[data-theme="light"] .watch-rail .anime-card,
[data-theme="light"] .watch-rail .related-card,
[data-theme="light"] .watch-rail a.anime-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}
[data-theme="light"] .watch-rail .anime-card-title,
[data-theme="light"] .watch-rail .anime-card-body {
    background: #ffffff !important;
    color: #0f172a !important;
}
/* Ad placeholder boxes */
[data-theme="light"] .ys-ad-wrap,
[data-theme="light"] .ad-slot,
[data-theme="light"] [class*="ad-placeholder"] {
    border-color: rgba(15, 23, 42, 0.15) !important;
    color: #64748b !important;
}
/* Directlink lock + video player always dark (cinema) */
[data-theme="light"] .video-wrapper,
[data-theme="light"] .directlink-lock,
[data-theme="light"] .av-player {
    background: #0a0a12 !important;
}
[data-theme="light"] .directlink-lock-inner strong {
    color: #f1f5f9 !important;
}
[data-theme="light"] .directlink-lock-inner p,
[data-theme="light"] .directlink-lock-hint {
    color: #94a3b8 !important;
}


/* Card preview video (image + optional muted loop) */
.anime-card-cover .card-cover-img,
.anime-card-cover img.card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.anime-card-cover .card-cover-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    background: #0a0e1a;
}
.anime-card-cover.is-video-playing .card-cover-video {
    opacity: 1;
}
.anime-card-cover.is-video-playing .card-cover-img,
.anime-card-cover.is-video-playing img.card-cover-img {
    opacity: 0;
}


/* Profile card remove (Favorites / Watch Later) */
.anime-card .card-remove-form {
    padding: 0 8px 8px !important;
    margin: 0 !important;
}
.anime-card .card-remove-btn {
    width: 100%;
    font-size: 0.72rem !important;
    padding: 0.35rem 0.5rem !important;
    border-radius: 6px !important;
}


/* CARD PLAY ICON DISABLED — no pause/play overlay on any card */
.anime-card-cover::after,
.anime-card:hover .anime-card-cover::after,
a.anime-card-cover::after,
.anime-card:hover a.anime-card-cover::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    animation: none !important;
}


/* Watch sidebar similar — badges on thumb */
.watch-similar-item .watch-similar-thumb {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 48px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
}
.watch-similar-item .watch-similar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.watch-similar-item .watch-similar-thumb .badge-type-tv,
.watch-similar-item .watch-similar-thumb .badge-type-movie,
.watch-similar-item .watch-similar-thumb [class*="badge-type"],
.watch-similar-item .watch-similar-thumb .ys-card-type {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    font-size: 0.55rem !important;
    padding: 0.1rem 0.28rem !important;
    z-index: 2;
    line-height: 1.2 !important;
}
.watch-similar-item .watch-similar-thumb .rating-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    left: auto !important;
    font-size: 0.55rem !important;
    padding: 0.08rem 0.25rem !important;
    z-index: 2;
}


/* Detail page cover + preview video */
.detail-cover-media,
.manga-hero-cover .detail-cover-media,
.page-cover-wrap .detail-cover-media {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
}
.detail-cover-media .detail-cover-img,
.detail-cover-media img,
.manga-hero-cover .detail-cover-media img,
.page-cover-wrap .detail-cover-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.detail-cover-media .detail-cover-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 1;
    background: #0a0e1a;
}
/* When video is playing, soft-hide still image */
.detail-cover-media.has-preview-video .detail-cover-img {
    opacity: 0;
}
.detail-cover-media.has-preview-video .detail-cover-video {
    opacity: 1;
}
/* Keep sizing of classic detail-cover when wrapped */
.detail-hero .detail-cover-media,
.detail-hero-cover .detail-cover-media {
    width: 100%;
    max-width: 220px;
}
.manga-hero-cover {
    position: relative;
    overflow: hidden;
}
.manga-hero-cover .detail-cover-media,
.manga-hero-cover img,
.manga-hero-cover video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-cover-wrap .detail-cover-media,
.page-cover-wrap img,
.page-cover-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.page-cover-wrap .page-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border: none !important;
    border-radius: 0 !important;
}






/* ================================================================
 * Detail cover: sharp corners + outer corner brackets + video fix
 * ================================================================ */
.detail-cover-media {
    position: relative;
    display: block;
    width: 200px;
    max-width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 0 !important;
    overflow: visible; /* corners outside */
    padding: 8px; /* room for outer brackets */
    box-sizing: content-box;
    --cover-edge: rgba(108, 76, 224, 0.55);
    --cover-edge-soft: rgba(108, 76, 224, 0.3);
    --cover-edge-glow: rgba(108, 76, 224, 0.22);
}
.detail-hero .detail-cover-media,
.detail-hero-cover .detail-cover-media {
    width: 200px;
}
.manga-hero-cover {
    width: 200px;
    flex-shrink: 0;
    overflow: visible !important;
}
.manga-hero-cover > .detail-cover-media {
    width: 200px;
    height: auto;
    aspect-ratio: 2 / 3;
}
.page-cover-wrap {
    overflow: visible !important;
    border-radius: 0 !important;
}
.page-cover-wrap > .detail-cover-media {
    width: 200px;
    height: 300px;
    aspect-ratio: 2 / 3;
    padding: 8px;
}

/* Inner surface: image + video share the same sharp box */
.detail-cover-media .detail-cover-img,
.detail-cover-media img.detail-cover-img,
.detail-cover-media > img {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: cover;
    object-position: top center;
    border-radius: 0 !important;
    border: 2px solid var(--cover-edge, rgba(108, 76, 224, 0.45)) !important;
    display: block;
    z-index: 0;
    background: #0a0e1a;
}
.detail-cover-media .detail-cover-video {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: cover;
    object-position: top center;
    border-radius: 0 !important;
    border: 2px solid var(--cover-edge, rgba(108, 76, 224, 0.45)) !important;
    z-index: 1;
    background: #0a0e1a;
}
/* Video playing: keep poster/image under as fallback, show video on top */
.detail-cover-media.has-preview-video .detail-cover-img {
    opacity: 1; /* keep as fallback if video fails */
    z-index: 0;
}
.detail-cover-media.has-preview-video.is-video-ok .detail-cover-img {
    opacity: 0;
}
.detail-cover-media.has-preview-video.is-video-ok .detail-cover-video {
    opacity: 1;
}
.detail-cover-media.has-cover-edge {
    filter: drop-shadow(0 4px 16px var(--cover-edge-glow));
}

/* Outer corner brackets (outside the cover image) */
.detail-cover-media > .cover-frame-corners {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}
.detail-cover-media .cover-frame-corners .cf {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--cover-edge, #7c6cf0);
    border-style: solid;
    border-width: 0;
}
.detail-cover-media .cover-frame-corners .cf-tl {
    top: 0; left: 0;
    border-top-width: 3px;
    border-left-width: 3px;
}
.detail-cover-media .cover-frame-corners .cf-tr {
    top: 0; right: 0;
    border-top-width: 3px;
    border-right-width: 3px;
}
.detail-cover-media .cover-frame-corners .cf-bl {
    bottom: 0; left: 0;
    border-bottom-width: 3px;
    border-left-width: 3px;
}
.detail-cover-media .cover-frame-corners .cf-br {
    bottom: 0; right: 0;
    border-bottom-width: 3px;
    border-right-width: 3px;
}

/* No frames on list cards */
.anime-card-cover .cover-frame-corners { display: none !important; }



/* List/home cards: dominant-color edge border (no corner frames) */
.anime-card-cover {
    --cover-edge: rgba(56, 120, 220, 0.35);
    --cover-edge-soft: rgba(56, 120, 220, 0.2);
    --cover-edge-glow: rgba(56, 120, 220, 0.15);
    border: 2px solid transparent;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.anime-card-cover.has-cover-edge {
    border-color: var(--cover-edge) !important;
    box-shadow:
        0 0 0 1px var(--cover-edge-soft),
        0 6px 18px var(--cover-edge-glow) !important;
}
.anime-card:hover .anime-card-cover.has-cover-edge {
    box-shadow:
        0 0 0 1px var(--cover-edge),
        0 8px 24px var(--cover-edge-glow) !important;
}


/* Comment section polish */
.comments-section .comment-item,
.manga-comments .comment-item {
    border-radius: 2px;
}
[data-theme="light"] .comment-item {
    border-color: rgba(100, 90, 200, 0.25);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .comment-item::before,
[data-theme="light"] .comment-item::after,
[data-theme="light"] .comment-item .comment-corner-bl,
[data-theme="light"] .comment-item .comment-corner-br {
    border-color: rgba(100, 90, 200, 0.55);
}

/* Rating raters list */
.rating-raters {
    margin-top: 1.25rem;
    max-width: 480px;
    width: 100%;
}
.rating-raters h3 {
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
    color: var(--text-secondary);
}
.rating-raters-scroll {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card, rgba(0,0,0,0.15));
}
.rating-raters-scroll::-webkit-scrollbar {
    width: 6px;
}
.rating-raters-scroll::-webkit-scrollbar-thumb {
    background: rgba(124, 108, 240, 0.45);
    border-radius: 4px;
}
.rating-rater-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    min-height: 44px;
}
.rating-rater-row:last-child { border-bottom: none; }
.rating-rater-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    color: inherit;
    text-decoration: none;
}
.rating-rater-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    background: var(--bg-secondary, #1a1f2e);
}
.rating-rater-avatar .profile-avatar-media,
.rating-rater-avatar .profile-avatar-fallback,
.rating-rater-avatar img,
.rating-rater-avatar video {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.rating-rater-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}
.rating-rater-stars {
    color: #fbbf24;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    margin-left: auto;
    flex-shrink: 0;
}


/* ===== Anti save image (UI layer; DevTools tetap bisa) ===== */
.ys-media-protect,
img.card-cover-img,
img.detail-cover-img,
.detail-cover-media img,
.card-cover-video,
.detail-cover-video,
.av-player video,
.manga-page img,
.chapter-image,
.reader-page img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
}
/* ================================================================
   YUMESEKAI DESKTOP REDESIGN — HOME SHELL
   Reference: dark anime streaming dashboard with mascot/sidebar.
   Scoped to .ys-home-page so existing inner pages remain stable.
   ================================================================ */
.ys-home-page {
    --ys-purple: #8b55ff;
    --ys-purple-2: #c06cff;
    --ys-blue: #3f76ff;
    --ys-panel: #090d20;
    --ys-panel-2: #0d1229;
    background:
        radial-gradient(circle at 82% 0%, rgba(103, 55, 190, .12), transparent 28rem),
        #050711;
}

/* Background on all viewports; height 145px DESKTOP ONLY (was forcing tall home bar on mobile) */
.ys-home-page .navbar {
    background:
        radial-gradient(circle at 18% 35%, rgba(102,44,190,.28), transparent 22rem),
        linear-gradient(180deg, #09051b 0%, #080817 75%, rgba(5,7,17,.98) 100%);
    border-bottom: 1px solid rgba(139,85,255,.45);
    box-shadow: 0 10px 35px rgba(0,0,0,.38);
}
@media (min-width: 769px) {
    .ys-home-page .navbar {
        height: 145px;
    }
}
/* Desktop-only home navbar geometry — MUST NOT apply on mobile (was leaking 400px mascot to home only) */
@media (min-width: 769px) {
    .ys-home-page .nav-container { max-width: 1500px; padding: 0 1.35rem; position: relative; align-items: flex-start; }
    .ys-home-page .nav-logo { position: relative; height: 100%; align-items: flex-start; padding-top: 18px; gap: .45rem; min-width: 330px; }
    .ys-home-page .logo-mascot { width: 400px; height: 262px; margin-left: -100px; margin-top: -101px; transform: none; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 0 12px rgba(158,83,255,.35)); }
    .ys-home-page .logo-text { font-size: 2.2rem; line-height: 1; margin-top: 16px; background: linear-gradient(90deg,#fff,#b78aff 72%,#e6b8ff); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; }
}
/* Mobile home: keep gradient text only, size/position controlled by MASCOT MOBILE block */
@media (max-width: 768px) {
    .ys-home-page .logo-text {
        background: linear-gradient(90deg,#fff,#b78aff 72%,#e6b8ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        white-space: nowrap;
    }
}
.ys-desktop-brand-links { position:absolute; top: 62px; left: 42%; display:flex; gap:1rem; color:#b8aee0; font-size:.72rem; }
.ys-desktop-brand-links a:hover { color:#fff; }
.ys-desktop-search { position:absolute; left: 36%; bottom: 9px; width:min(560px,42vw); height:38px; display:flex; align-items:center; gap:.35rem; padding:0 .65rem; border:1px solid rgba(131,104,255,.65); border-radius:999px; background:rgba(4,7,20,.8); box-shadow:0 0 18px rgba(112,65,255,.13); }
.ys-desktop-search input { flex:1; min-width:0; background:none; border:0; outline:0; color:#fff; font-size:.76rem; }
.ys-desktop-search input::placeholder { color:#7f86a7; }
.ys-search-icon { color:#fff; font-size:1.3rem; line-height:1; }
.ys-desktop-search kbd { color:#a7acc8; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); border-radius:4px; padding:1px 4px; font-size:.62rem; }
.ys-desktop-actions { position:absolute; right:64px; top:34px; display:flex; align-items:center; gap:.65rem; }
.ys-top-icon { position:relative; width:36px; height:36px; display:grid; place-items:center; color:#f1edff; font-size:1.55rem; border-radius:50%; }
.ys-top-icon:hover { color:#c68cff; background:rgba(139,85,255,.12); }
.ys-top-icon b { position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border-radius:99px; background:#ff4264; color:#fff; font-size:.58rem; border:2px solid #0a0718; }
.ys-top-login { color:#d5caff; font-size:.8rem; }
.ys-home-page .hamburger { display:flex; }
/* Desktop-only: hide horizontal links (hamburger drawer handles them).
   On mobile the V1.29/V1.33 drawer needs .nav-links visible. */
@media (min-width: 769px) {
    .ys-home-page .nav-links { display:none; }
    .ys-home-page .nav-right-mobile { position:absolute; right:1rem; top:32px; display:flex; gap:.35rem; }
    .ys-home-page .nav-right-mobile .nav-notif-mobile { display:none; }
}

.ys-home-page .main-content { padding-top: 145px; max-width:none; }
.ys-home-shell { max-width:1500px; margin:0 auto; padding:16px 14px 40px; display:grid; grid-template-columns:170px minmax(0,1fr); gap:14px; }
.ys-sidebar { min-width:0; position:relative; }
.ys-side-nav { padding:4px 0; }
.ys-side-nav a { min-height:43px; display:flex; align-items:center; gap:.75rem; padding:.65rem .8rem; color:#d2d6ea; border-radius:8px; font-size:.78rem; transition:.2s ease; }
.ys-side-nav a span { width:22px; text-align:center; color:#c5c9e5; font-size:1.05rem; }
.ys-side-nav a b { margin-left:auto; color:#a9aed0; font-size:1.15rem; font-weight:400; }
.ys-side-nav a:hover { color:#fff; background:rgba(112,75,255,.12); }
.ys-side-nav a.is-active { color:#e9dcff; background:linear-gradient(90deg,rgba(124,67,255,.55),rgba(90,49,196,.26)); box-shadow:inset 0 0 0 1px rgba(160,116,255,.18); }
.ys-side-nav a.is-active span { color:#e4bdff; }
.ys-side-divider { height:1px; margin:12px 8px; background:linear-gradient(90deg,transparent,rgba(124,92,252,.35),transparent); }
.ys-side-mascot { position:sticky; top:165px; margin:135px 8px 0; min-height:252px; padding:30px 10px 14px; overflow:hidden; text-align:center; border:1px solid rgba(139,85,255,.65); border-radius:10px; background:radial-gradient(circle at 50% 20%,rgba(114,54,224,.22),transparent 45%),linear-gradient(180deg,#100d2b,#080a19); box-shadow:0 0 22px rgba(94,47,190,.12); }
.ys-side-mascot img { width:118px; height:142px; object-fit:contain; object-position:center top; margin:-14px auto 2px; filter:drop-shadow(0 0 9px rgba(173,97,255,.3)); }
.ys-side-mascot strong { display:block; font-size:.78rem; line-height:1.45; color:#eeeaff; }
.ys-side-mascot strong em { color:#c47cff; font-style:normal; }
.ys-side-mascot p { color:#a8acc4; font-size:.65rem; line-height:1.5; margin-top:.5rem; }
.ys-side-stars { position:absolute; top:7px; left:0; right:0; color:#b76cff; font-size:.72rem; opacity:.8; }
.ys-home-content { min-width:0; overflow:hidden; }

.ys-home-hero { height:230px; position:relative; overflow:hidden; border:1px solid rgba(103,87,255,.65); border-radius:10px; background:radial-gradient(circle at 80% 45%,rgba(92,54,183,.55),transparent 35%),linear-gradient(105deg,#0d1024,#17133c 55%,#0a0b19); box-shadow:0 0 25px rgba(89,55,202,.12); }
.ys-home-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,9,23,.96) 0%,rgba(8,9,23,.72) 40%,rgba(8,9,23,.08) 100%); z-index:1; }
.ys-hero-glow { position:absolute; width:260px; height:260px; right:110px; top:-100px; border-radius:50%; background:rgba(136,76,255,.3); filter:blur(60px); }
.ys-hero-copy { position:relative; z-index:3; padding:45px 30px; max-width:54%; }
.ys-hero-kicker { font-size:.75rem; font-weight:700; color:#e9e4ff; letter-spacing:.04em; }
.ys-hero-copy h1 { font-family:var(--font-display); font-size:2.45rem; line-height:1; margin:.25rem 0 .5rem; color:#fff; }
.ys-hero-copy h1 span { display:block; color:#aa5cff; text-shadow:0 0 16px rgba(170,92,255,.35); }
.ys-hero-copy p { color:#e1e0ed; font-size:.76rem; line-height:1.55; max-width:360px; }
.ys-hero-btn { display:inline-flex; align-items:center; gap:.5rem; margin-top:.8rem; padding:.55rem 1.15rem; border-radius:999px; background:linear-gradient(90deg,#a44cff,#7b44ee); color:#fff; font-size:.72rem; font-weight:700; box-shadow:0 5px 20px rgba(126,59,255,.35); }
.ys-hero-btn:hover { transform:translateY(-1px); }
.ys-hero-art { position:absolute; z-index:2; right:4%; top:0; bottom:0; width:52%; }
.ys-hero-art img { position:absolute; right:0; bottom:-30px; width:min(440px,100%); height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 0 22px rgba(126,72,255,.28)); }
.ys-hero-moon { position:absolute; width:155px; height:155px; border-radius:50%; right:18%; top:22px; background:radial-gradient(circle at 35% 35%,#d6c8ff,#7250aa 55%,#312253 75%); box-shadow:0 0 35px rgba(177,122,255,.28); opacity:.8; }
.ys-hero-dots { position:absolute; z-index:4; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:9px; }
.ys-hero-dots i { width:8px; height:8px; border-radius:50%; background:#5571ad; border:1px solid rgba(255,255,255,.18); }
.ys-hero-dots i.active { background:#c169ff; box-shadow:0 0 8px rgba(193,105,255,.7); }
.ys-hero-arrow { position:absolute; z-index:4; bottom:10px; width:31px; height:31px; border:1px solid rgba(177,153,255,.5); border-radius:50%; background:rgba(5,7,20,.58); color:#fff; font-size:1.2rem; cursor:pointer; }
.ys-hero-arrow.left { right:57px; } .ys-hero-arrow.right { right:15px; }

.ys-home-content .section { max-width:none; padding:0 4px; margin:18px 0 0; }
.ys-home-content .section-header { margin-bottom:8px; }
.ys-home-content .section-title { font-size:1rem; color:#eeeef7; }
.ys-home-content .section-title span { color:#b85cff; }
.ys-home-content .section-header .btn { font-size:.66rem; padding:.25rem .5rem; background:none; border:0; color:#b06aff; }
.ys-home-content .carousel { gap:9px; padding:2px 2px 8px; }
.ys-home-content .anime-card { flex-basis:132px; width:132px; border-radius:6px; border-color:rgba(60,112,230,.65); box-shadow:0 0 0 1px rgba(83,86,180,.12),0 6px 18px rgba(0,0,0,.28); background:linear-gradient(180deg,#0c1530,#071021); }
.ys-home-content .anime-card:hover { transform:translateY(-3px); border-color:#7664ff; box-shadow:0 0 16px rgba(98,83,255,.2); }
.ys-home-content .anime-card-cover { aspect-ratio: 2/3; }
.ys-home-content .anime-card-body { padding:.48rem .52rem .58rem; }
.ys-home-content .anime-card-title { font-size:.72rem; line-height:1.25; min-height:2.5em; }
.ys-home-content .anime-card-meta { font-size:.62rem; }
.ys-home-content .carousel-btn { width:30px; height:30px; font-size:1rem; background:#11162e; }
.ys-home-page .footer { margin-top:0; }

@media (max-width: 1000px) and (min-width: 769px) {
    .ys-home-shell { grid-template-columns:150px minmax(0,1fr); }
    .ys-home-page .logo-mascot { width:220px; }
    .ys-home-page .nav-logo { min-width:270px; }
    .ys-desktop-search { left:34%; width:42vw; }
    .ys-desktop-brand-links { left:43%; }
}

@media (max-width: 768px) {
    /* height/offset locked to 64px by later rules — do not set 70px here (caused home vs other pages mismatch) */
    .ys-home-page .nav-container { align-items:center; }
    .ys-home-page .nav-logo { min-width:0; padding:0; align-items:center; }
    /* logo-mascot size removed — controlled by MASCOT MOBILE block at end of file */
    .ys-home-page .logo-text { font-size:1.25rem; margin:0; }
    .ys-desktop-brand-links,.ys-desktop-search,.ys-desktop-actions { display:none; }
    .ys-home-page .nav-right-mobile { top:15px; right:10px; }
    .ys-home-page .nav-right-mobile .nav-notif-mobile { display:block; }
    .ys-home-shell { display:block; padding:0 0 25px; }
    .ys-sidebar { display:none; }
    .ys-home-content { overflow:visible; }
    .ys-home-hero { height:300px; border-radius:0; border-left:0; border-right:0; }
    .ys-hero-copy { max-width:70%; padding:50px 18px 20px; }
    .ys-hero-copy h1 { font-size:2rem; }
    .ys-hero-art { width:48%; right:-5%; }
    .ys-hero-art img { opacity:.8; }
    .ys-home-content .section { padding:0 .75rem; }
}


/* ================================================================
   YUMESEKAI DESKTOP REDESIGN V1.1 — OVERLAP / LAYOUT FIXES
   Keep the redesign isolated to the homepage. Inner pages keep the
   original navigation so they do not receive duplicate desktop controls.
   ================================================================ */
@media (min-width: 769px) {
    /* The hero copy in v1 was too tall for the 230px banner and clipped the CTA. */
    .ys-home-page .ys-home-hero {
        height: 250px;
    }
    .ys-home-page .ys-hero-copy {
        padding: 34px 30px 30px;
    }
    .ys-home-page .ys-hero-copy h1 {
        font-size: 2.35rem;
    }
    .ys-home-page .ys-hero-copy p {
        max-width: 390px;
    }
    .ys-home-page .ys-hero-art img {
        bottom: -22px;
    }

    /* Keep the homepage shell below its fixed header. */
    .ys-home-page .main-content {
        padding-top: 145px;
    }

    /* Inner pages: the normal navbar is only 70px tall. */
    body:not(.ys-home-page) .main-content {
        padding-top: var(--nav-height);
    }

    /* Prevent long legacy nav rows from colliding with the logo. */
    body:not(.ys-home-page) .nav-container {
        gap: .5rem;
    }
    body:not(.ys-home-page) .nav-logo {
        flex: 0 0 auto;
        min-width: 0;
    }
    body:not(.ys-home-page) .nav-links {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body:not(.ys-home-page) .nav-links::-webkit-scrollbar { display:none; }
    body:not(.ys-home-page) .nav-link {
        white-space: nowrap;
    }
}

@media (min-width: 769px) and (max-width: 1250px) {
    body:not(.ys-home-page) .nav-links .admin-link,
    body:not(.ys-home-page) .nav-links .nav-btn,
    body:not(.ys-home-page) .nav-links .nav-btn-outline {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Mobile is intentionally not redesigned yet; only prevent overflow. */
    body:not(.ys-home-page) .nav-links {
        max-width: calc(100vw - 120px);
    }
    .ys-home-page .ys-home-hero {
        height: 300px;
    }
}

/* ================================================================
   YUMESEKAI HOME V1.2 — NAVIGATION / HEADER POLISH
   Keep the original YumeSekai information architecture.
   No Donghua menu is introduced here.
   ================================================================ */
@media (min-width: 769px) {
    .ys-home-page .navbar {
        height: 145px;
    }

    .ys-home-page .nav-logo {
        min-width: 340px;
    }

    .ys-home-page .logo-mascot {
        width: 400px;
        height: 262px;
    }

    .ys-desktop-brand-links {
        left: 43%;
        top: 58px;
        gap: 1.15rem;
        font-size: .78rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .ys-desktop-brand-links a {
        color: #bdb5df;
        padding: .15rem .05rem;
    }

    .ys-desktop-brand-links a:hover {
        color: #ffffff;
    }

    .ys-desktop-search {
        left: 36.5%;
        bottom: 9px;
        width: min(570px, 42vw);
    }

    .ys-desktop-actions {
        right: 62px;
        top: 31px;
    }

    .ys-home-page .nav-right-mobile {
        right: 13px;
        top: 31px;
    }

    .ys-home-page .ys-home-shell {
        grid-template-columns: 176px minmax(0, 1fr);
        gap: 16px;
        padding-top: 18px;
    }

    .ys-home-page .ys-side-nav a {
        min-height: 42px;
        font-size: .79rem;
    }

    .ys-home-page .ys-side-mascot {
        margin-top: 128px;
    }

    .ys-home-page .ys-home-hero {
        height: 252px;
    }

    .ys-home-page .ys-hero-copy {
        padding: 35px 31px 31px;
        max-width: 53%;
    }

    .ys-home-page .ys-hero-copy p {
        max-width: 405px;
    }

    .ys-home-page .ys-hero-art {
        width: 50%;
        right: 3%;
    }

    .ys-home-page .ys-hero-art img {
        width: min(455px, 100%);
        bottom: -24px;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .ys-home-page .nav-logo {
        min-width: 400px;
    }
    .ys-home-page .logo-mascot {
        width: 262px;
    }
    .ys-home-page .logo-text {
        font-size: 1.8rem;
    }
    .ys-desktop-brand-links {
        left: 42%;
        gap: .7rem;
        font-size: .7rem;
    }
    .ys-desktop-search {
        left: 35%;
        width: 43vw;
    }
    .ys-home-page .ys-home-shell {
        grid-template-columns: 155px minmax(0,1fr);
    }
}


/* ================================================================
   YUMESEKAI HOME V1.3 — COMPACT CONTENT CARDS
   Desktop only: make Home card rows denser while leaving all
   inner-page card layouts and mobile behavior untouched.
   ================================================================ */
@media (min-width: 1201px) {
    .ys-home-content .section {
        margin-top: 17px;
    }

    .ys-home-content .section-header {
        margin-bottom: 7px;
    }

    .ys-home-content .section-title {
        font-size: 1.03rem;
        font-weight: 700;
        letter-spacing: .005em;
    }

    .ys-home-content .carousel {
        gap: 9px;
        padding: 2px 4px 9px;
    }

    /* 6–7 cards comfortably visible on the desktop content area. */
    .ys-home-content .anime-card {
        flex: 0 0 174px !important;
        width: 174px !important;
        min-height: 0 !important;
        height: 310px !important;
        border-radius: 6px !important;
        border-color: rgba(65, 112, 205, .72) !important;
        box-shadow:
            0 0 0 1px rgba(83, 86, 180, .10),
            0 5px 16px rgba(0, 0, 0, .28) !important;
    }

    .ys-home-content .anime-card:hover {
        transform: translateY(-3px) !important;
        border-color: rgba(135, 101, 255, .92) !important;
        box-shadow:
            0 0 0 1px rgba(135, 101, 255, .22),
            0 8px 22px rgba(62, 39, 150, .25) !important;
    }

    .ys-home-content .anime-card > .anime-card-cover,
    .ys-home-content .anime-card > a.anime-card-cover {
        margin: 7px 7px 0 !important;
        border-radius: 4px !important;
        aspect-ratio: 2 / 3 !important;
    }

    .ys-home-content .anime-card > .anime-card-body,
    .ys-home-content a.anime-card > .anime-card-body {
        padding: 7px 8px 8px !important;
    }

    .ys-home-content .anime-card-title {
        font-size: .76rem !important;
        line-height: 1.24 !important;
        min-height: 2.48em !important;
        margin-bottom: 6px !important;
    }

    .ys-home-content .anime-card-meta.ys-card-meta,
    .ys-home-content .anime-card .anime-card-meta {
        font-size: .61rem !important;
    }

    .ys-home-content .ys-card-unit {
        font-size: .67rem !important;
    }

    .ys-home-content .ys-card-status {
        font-size: .61rem !important;
    }

    .ys-home-content .anime-card-cover > .badge-continue-type,
    .ys-home-content .anime-card-cover > .badge-comic,
    .ys-home-content .anime-card-cover > [class*="badge-type"] {
        top: 5px !important;
        left: 5px !important;
        padding: 2px 6px !important;
        font-size: .53rem !important;
        border-radius: 3px !important;
    }

    .ys-home-content .anime-card-cover > .rating-badge {
        top: 5px !important;
        right: 5px !important;
        padding: 2px 5px !important;
        font-size: .56rem !important;
    }

    .ys-home-content .anime-card-cover > .badge-new {
        top: 35px !important;
        left: 6px !important;
    }

    .ys-home-content .continue-progress-bar {
        height: 3px !important;
    }

    .ys-home-content .carousel-btn {
        width: 31px !important;
        height: 31px !important;
        font-size: 1rem !important;
        background: rgba(13, 17, 40, .94) !important;
        border-color: rgba(117, 101, 205, .48) !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .35) !important;
    }

    .ys-home-content .carousel-btn.prev { left: -7px; }
    .ys-home-content .carousel-btn.next { right: -7px; }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .ys-home-content .anime-card {
        flex-basis: 158px !important;
        width: 158px !important;
        height: 286px !important;
    }

    .ys-home-content .anime-card > .anime-card-cover,
    .ys-home-content .anime-card > a.anime-card-cover {
        margin: 6px 6px 0 !important;
    }

    .ys-home-content .anime-card-title {
        font-size: .71rem !important;
    }
}

/* ================================================================
   YUMESEKAI HOME V1.4 — HOME SECTION POLISH
   Keep the v1.3 card dimensions locked; polish section rhythm,
   headers, carousel rails, and genre explorer for the desktop Home.
   ================================================================ */
@media (min-width: 1201px) {
    .ys-home-content > .ys-home-hero + .section {
        margin-top: 15px !important;
        padding-top: 0 !important;
    }

    .ys-home-content .section {
        margin-top: 22px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .ys-home-content .section-header {
        min-height: 30px;
        margin-bottom: 9px;
        padding: 0 2px;
    }

    .ys-home-content .section-title {
        position: relative;
        gap: .48rem;
        font-size: 1.02rem !important;
        line-height: 1.2;
        letter-spacing: .01em;
    }

    .ys-home-content .section-title::after {
        content: "";
        display: block;
        width: 34px;
        height: 2px;
        margin-left: 4px;
        border-radius: 99px;
        background: linear-gradient(90deg, rgba(180,91,255,.9), rgba(91,109,255,0));
    }

    .ys-home-content .section-header .btn {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        padding: .22rem .55rem !important;
        border: 1px solid rgba(127,91,231,.28) !important;
        border-radius: 6px;
        background: rgba(78,55,142,.10) !important;
        color: #b98cff !important;
        transition: .18s ease;
    }

    .ys-home-content .section-header .btn:hover {
        color: #eee8ff !important;
        border-color: rgba(153,112,255,.55) !important;
        background: rgba(102,65,191,.18) !important;
        transform: translateY(-1px);
    }

    .ys-home-content .carousel-wrap {
        padding: 0 1px;
    }

    .ys-home-content .carousel {
        gap: 10px;
        padding: 1px 3px 11px;
        scrollbar-width: none;
    }

    .ys-home-content .carousel::-webkit-scrollbar {
        display: none;
    }

    .ys-home-content .carousel-btn {
        opacity: .92;
        transition: .18s ease;
    }

    .ys-home-content .carousel-btn:hover {
        opacity: 1;
        border-color: rgba(165,128,255,.72) !important;
        background: #171b3b !important;
        box-shadow: 0 0 16px rgba(110,75,220,.24), 0 5px 14px rgba(0,0,0,.38) !important;
    }

    /* Give Continue Watching a slightly stronger dashboard treatment. */
    .ys-home-content > .section:first-of-type .section-title span {
        text-shadow: 0 0 10px rgba(187,93,255,.5);
    }

    .ys-home-content .continue-card {
        border-color: rgba(91,118,218,.78) !important;
    }

    /* Genre explorer: compact chips instead of a tall generic block. */
    .ys-home-content .genre-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
        padding: 2px 3px 4px;
    }

    .ys-home-content .genre-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: .4rem .55rem;
        border-radius: 7px;
        border-color: rgba(91,96,160,.34);
        background: linear-gradient(180deg, rgba(25,28,58,.78), rgba(11,14,31,.9));
        color: #bfc4dc;
        font-size: .69rem;
        line-height: 1.1;
        text-align: center;
    }

    .ys-home-content .genre-chip:hover {
        border-color: rgba(143,104,255,.7);
        background: linear-gradient(180deg, rgba(77,48,142,.45), rgba(25,20,57,.92));
        color: #f2edff;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(62,38,137,.22);
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .ys-home-content .genre-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }
}

/* v1.5 functional desktop controls */
.ys-home-page .ys-profile-menu { position:relative; }
.ys-home-page .ys-profile-trigger { display:flex; align-items:center; gap:.42rem; height:40px; padding:3px 7px 3px 4px; border:1px solid rgba(139,85,255,.32); border-radius:999px; background:rgba(12,10,30,.65); color:#eeeaff; cursor:pointer; }
.ys-home-page .ys-profile-trigger:hover { border-color:rgba(183,111,255,.7); background:rgba(139,85,255,.12); }
.ys-home-page .ys-profile-trigger .profile-avatar-media, .ys-home-page .ys-profile-trigger .profile-avatar-fallback { width:32px !important; height:32px !important; border-radius:50%; object-fit:cover; display:block; }
.ys-home-page .ys-profile-trigger .profile-avatar-fallback, .ys-home-page .ys-profile-trigger .ys-profile-fallback { display:grid; place-items:center; background:linear-gradient(135deg,#8b55ff,#c06cff); color:#fff; font-weight:800; }
.ys-profile-name { max-width:105px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; }
.ys-profile-chevron { color:#aaa3c5; font-size:.9rem; line-height:1; }
.ys-profile-dropdown { position:absolute; right:0; top:calc(100% + 9px); width:220px; padding:8px; z-index:80; border:1px solid rgba(139,85,255,.5); border-radius:12px; background:linear-gradient(180deg,#15112e,#090b1c); box-shadow:0 18px 45px rgba(0,0,0,.5),0 0 25px rgba(103,55,190,.16); }
.ys-profile-dropdown[hidden] { display:none; }
.ys-profile-dropdown-head { display:flex; align-items:center; gap:.65rem; padding:7px; margin-bottom:5px; border-radius:9px; background:rgba(255,255,255,.035); }
.ys-profile-dropdown-head .profile-avatar-media, .ys-profile-dropdown-head .profile-avatar-fallback { width:44px !important; height:44px !important; border-radius:50%; object-fit:cover; display:block; }
.ys-profile-dropdown-head .profile-avatar-fallback { display:grid; place-items:center; background:linear-gradient(135deg,#8b55ff,#c06cff); color:#fff; font-weight:800; }
.ys-profile-dropdown-head strong { display:block; color:#fff; font-size:.75rem; }
.ys-profile-dropdown-head small { display:block; margin-top:2px; color:#8f91ae; font-size:.6rem; }
.ys-profile-dropdown a { display:flex; align-items:center; min-height:34px; padding:0 9px; border-radius:7px; color:#d9d7e8; font-size:.68rem; }
.ys-profile-dropdown a:hover { background:rgba(139,85,255,.14); color:#fff; }
.ys-profile-dropdown a.danger { color:#ff8fa5; }
.ys-profile-dropdown-divider { height:1px; margin:6px 4px; background:rgba(255,255,255,.08); }
.ys-home-page .ys-nav-menu-home-open { position:absolute; right:0; top:50px; width:210px; display:flex !important; flex-direction:column; gap:2px; padding:8px; z-index:75; border:1px solid rgba(139,85,255,.45); border-radius:11px; background:linear-gradient(180deg,#15112e,#090b1c); box-shadow:0 18px 45px rgba(0,0,0,.48); }
.ys-home-page .ys-nav-menu-home-open .nav-link { display:flex; padding:.6rem .7rem; border-radius:7px; color:#ddd9ef; font-size:.7rem; }
.ys-home-page .ys-nav-menu-home-open .nav-link:hover { background:rgba(139,85,255,.14); color:#fff; }
.ys-home-page .ys-nav-menu-home-open .theme-toggle { margin:4px 0 0; }
.ys-home-page .nav-right-mobile { z-index:76; }
.ys-home-page .ys-hero-slide { position:absolute; inset:0; z-index:2; opacity:0; visibility:hidden; transform:translateX(16px); transition:opacity .35s ease, transform .35s ease, visibility .35s ease; }
.ys-home-page .ys-hero-slide.is-active { opacity:1; visibility:visible; transform:translateX(0); }
.ys-home-page .ys-hero-slide .ys-hero-copy, .ys-home-page .ys-hero-slide .ys-hero-art { z-index:2; }
.ys-home-page .ys-hero-slide .ys-hero-copy, .ys-home-page .ys-hero-slide .ys-hero-art { pointer-events:none; }
.ys-home-page .ys-hero-slide.is-active .ys-hero-btn { pointer-events:auto; }
.ys-home-page .ys-hero-dots { gap:7px; }
.ys-home-page .ys-hero-dots button { width:8px; height:8px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:#5571ad; cursor:pointer; }
.ys-home-page .ys-hero-dots button.active { background:#c169ff; box-shadow:0 0 8px rgba(193,105,255,.7); }
@media (max-width: 1000px) and (min-width: 769px) {
  .ys-home-page .ys-profile-name { display:none; }
}

/* Mascot admin */
@media (max-width: 760px) {
    .admin-content > div[style*="grid-template-columns:minmax(260px,420px)"] { grid-template-columns: 1fr !important; }
}

/* v1.8 — Admin-customizable navbar and Home Hero artwork */
.ys-home-page .navbar.has-custom-navbar-bg,
.ys-home-page .navbar.has-custom-navbar-bg::before {
    background-image: var(--ys-navbar-bg) !important;
}
.ys-home-page .navbar.has-custom-navbar-bg {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.ys-home-page .navbar.has-custom-navbar-bg::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(5,4,18,.88),rgba(10,7,28,.66),rgba(5,4,18,.86));
    opacity:1;
    pointer-events:none;
}
.ys-home-page .navbar.has-custom-navbar-bg .nav-container { position:relative; z-index:2; }
.ys-home-page .ys-hero-slide::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--ys-hero-bg, none);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    z-index:-1;
    transition:opacity .35s ease;
}
.ys-home-page .ys-hero-slide[data-hero-image]:not([data-hero-image=""])::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(7,8,20,.88) 0%,rgba(7,8,20,.64) 43%,rgba(7,8,20,.18) 100%);
    z-index:-1;
}
.ys-home-page .ys-hero-slide.has-custom-art::before { opacity:1; }
.ys-home-page .ys-hero-slide.has-custom-art .ys-hero-moon { opacity:.28; }
.ys-home-page .ys-hero-slide.has-custom-art::before { z-index:0; opacity:1; }
.ys-home-page .ys-hero-slide.has-custom-art::after { z-index:1 !important; }
.ys-home-page .ys-hero-slide.has-custom-art .ys-hero-copy,
.ys-home-page .ys-hero-slide.has-custom-art .ys-hero-art { position:relative; z-index:3; }

/* v1.9 — Custom artwork framing controls */
.ys-home-page .navbar.has-custom-navbar-bg {
    background-position: var(--ys-navbar-pos, 50% 50%) !important;
}
.ys-home-page .navbar.has-custom-navbar-bg::before {
    background-image: linear-gradient(90deg,
        rgba(5,4,18,var(--ys-navbar-overlay,.68)),
        rgba(10,7,28,calc(var(--ys-navbar-overlay,.68) * .78)),
        rgba(5,4,18,calc(var(--ys-navbar-overlay,.68) * .9))) !important;
}
.ys-home-page .ys-hero-slide::before {
    background-position: var(--ys-hero-pos, 50% 50%);
}
.ys-home-page .ys-hero-slide.has-custom-art::after {
    background: linear-gradient(90deg,
        rgba(7,8,20,var(--ys-hero-overlay,.68)) 0%,
        rgba(7,8,20,calc(var(--ys-hero-overlay,.68) * .72)) 43%,
        rgba(7,8,20,calc(var(--ys-hero-overlay,.68) * .18)) 100%);
}
.theme-settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.theme-settings-grid label { display:flex; flex-direction:column; gap:5px; color:var(--text-secondary); font-size:.7rem; }
.theme-settings-grid input[type="range"] { width:100%; accent-color:#9d5cff; }
.theme-settings-grid output { color:#c9b9ff; font-size:.68rem; }
@media (max-width:760px) { .theme-settings-grid { grid-template-columns:1fr; } }

/* v1.10 — Asset framing fix: the saved X/Y and overlay settings are now parsed
   correctly and reflected in admin previews. Navbar artwork also applies on
   inner pages, not only the Home shell. */
.navbar.has-custom-navbar-bg {
    position: relative;
    background-image: var(--ys-navbar-bg) !important;
    background-size: cover !important;
    background-position: var(--ys-navbar-pos, 50% 50%) !important;
    background-repeat: no-repeat !important;
}
.navbar.has-custom-navbar-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: linear-gradient(90deg,
        rgba(5,4,18,var(--ys-navbar-overlay,.68)),
        rgba(10,7,28,calc(var(--ys-navbar-overlay,.68) * .78)),
        rgba(5,4,18,calc(var(--ys-navbar-overlay,.68) * .9)));
}
.navbar.has-custom-navbar-bg .nav-container { position: relative; z-index: 2; }
.theme-live-preview {
    position: relative;
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 10px;
    background-image: var(--preview-bg);
    background-size: cover;
    background-position: var(--preview-pos, 50% 50%);
    background-repeat: no-repeat;
    border: 1px solid rgba(255,255,255,.08);
}
.theme-live-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(7,8,20,var(--preview-overlay,.68)),
        rgba(7,8,20,calc(var(--preview-overlay,.68) * .55)),
        rgba(7,8,20,calc(var(--preview-overlay,.68) * .12)));
}
.hero-preview { height: 130px; }

/* ========== v1.11 Anime desktop page ========== */
.ys-anime-list-page .main-content {
    max-width: none;
    padding: 0;
    background:
        radial-gradient(circle at 76% 8%, rgba(139, 92, 246, .10), transparent 30%),
        linear-gradient(180deg, #080914 0%, #0a0b13 100%);
}
.ys-inner-shell {
    min-height: calc(100vh - 70px);
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 0;
}
.ys-inner-sidebar {
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    border-right: 1px solid rgba(132, 92, 246, .14);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(12, 13, 27, .98), rgba(8, 9, 19, .98));
    padding: 20px 10px 16px;
}
.ys-inner-sidebar .ys-side-nav { gap: 3px; }
.ys-inner-sidebar .ys-side-nav a { padding: 9px 11px; font-size: .78rem; }
.ys-inner-side-mascot { margin-top: auto; padding-top: 12px; }
.ys-inner-side-mascot img { max-height: 105px; }
.ys-anime-page {
    min-width: 0;
    padding: 34px clamp(22px, 3.2vw, 48px) 56px;
}
.ys-anime-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(145, 105, 255, .14);
}
.ys-page-kicker {
    display: block;
    color: #9868ff;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .18em;
    margin-bottom: 5px;
}
.ys-anime-heading h1 {
    margin: 0;
    color: #f3efff;
    font-size: clamp(1.65rem, 2.3vw, 2.25rem);
    line-height: 1.1;
    font-weight: 800;
}
.ys-anime-heading h1 span { color: #a968ff; margin-right: 4px; }
.ys-anime-heading p { margin: 8px 0 0; color: #8f91a8; font-size: .84rem; }
.ys-anime-search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid rgba(153, 91, 255, .36);
    background: rgba(104, 54, 188, .13);
    color: #cbaaff;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
}
.ys-anime-search-btn:hover { background: rgba(129, 74, 230, .24); border-color: #955bff; transform: translateY(-1px); }
.ys-anime-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 180px));
    gap: 10px;
    margin: 20px 0 18px;
}
.ys-anime-stats > div {
    min-height: 66px;
    padding: 11px 14px;
    border: 1px solid rgba(117, 86, 195, .16);
    border-radius: 9px;
    background: rgba(17, 17, 31, .72);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ys-anime-stats strong { color: #f5f1ff; font-size: 1.18rem; line-height: 1; }
.ys-anime-stats span { color: #777b96; font-size: .67rem; margin-top: 5px; }
.ys-anime-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}
.ys-anime-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.ys-anime-filter {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 11px;
    border-radius: 7px;
    border: 1px solid rgba(123, 91, 194, .2);
    background: rgba(20, 20, 34, .7);
    color: #888ba2;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 700;
    transition: .2s ease;
}
.ys-anime-filter:hover { color: #d8c5ff; border-color: rgba(157, 94, 255, .5); }
.ys-anime-filter.active { color: #fff; background: linear-gradient(135deg, #8150e8, #a45cff); border-color: transparent; box-shadow: 0 5px 18px rgba(125, 69, 235, .2); }
.ys-anime-result-count { color: #64677e; font-size: .7rem; white-space: nowrap; }
.ys-anime-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 15px;
}
.ys-anime-grid .anime-card { width: auto; min-width: 0; }
.ys-anime-empty { margin-top: 30px; border: 1px dashed rgba(150, 106, 245, .22); background: rgba(18, 18, 31, .6); }

@media (min-width: 1500px) {
    .ys-anime-grid { grid-template-columns: repeat(auto-fill, minmax(174px, 1fr)); gap: 17px; }
}
@media (max-width: 900px) {
    .ys-inner-shell { display: block; }
    .ys-inner-sidebar { display: none; }
    .ys-anime-page { padding: 24px 16px 42px; }
}
@media (max-width: 560px) {
    .ys-anime-heading { align-items: flex-start; flex-direction: column; }
    .ys-anime-stats { grid-template-columns: repeat(3, 1fr); }
    .ys-anime-stats > div { padding: 10px; }
    .ys-anime-toolbar { align-items: flex-start; flex-direction: column; }
    .ys-anime-result-count { display: none; }
    .ys-anime-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}


/* v1.14 — Anime uses left sidebar on desktop; mobile keeps drawer + hamburger. */
@media (min-width: 769px) {
    .ys-anime-page .nav-links { display: none !important; }
    .ys-anime-page .nav-container { gap: 12px; }
    .ys-anime-page .nav-right-mobile { display: flex; margin-left: auto; }
    .ys-anime-page .nav-notif-mobile { display: block; }
    .ys-anime-page .hamburger { display: flex; }
}
/* On mobile (≤768px) anime shares the global drawer — do NOT hide .nav-links here. */

/* Anime keeps the permanent left navigation; it is never hidden on desktop. */
@media (min-width: 901px) {
  .ys-anime-page .ys-library-shell { display: grid; grid-template-columns: 176px minmax(0,1fr); gap: 14px; }
  .ys-anime-page .ys-inner-sidebar { display: block; }
}


/* ================================================================
   YUMESEKAI V1.15 — GLOBAL DESKTOP SHELL
   The Home navbar is now the single desktop navbar for every page.
   Internal pages keep their left sidebar as the primary navigation;
   the old horizontal navigation is available only through the hamburger.
   Mobile layout is intentionally left unchanged for the later redesign.
   ================================================================ */
@media (min-width: 769px) {
    .navbar {
        height: 145px;
        background:
            radial-gradient(circle at 18% 35%, rgba(102,44,190,.28), transparent 22rem),
            linear-gradient(180deg, #09051b 0%, #080817 75%, rgba(5,7,17,.98) 100%);
        border-bottom: 1px solid rgba(139,85,255,.45);
        box-shadow: 0 10px 35px rgba(0,0,0,.38);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    .navbar .nav-container {
        max-width: 1500px;
        padding: 0 1.35rem;
        position: relative;
        align-items: flex-start;
    }
    .navbar .nav-logo {
        position: relative;
        height: 145px;
        align-items: flex-start;
        padding-top: 18px;
        gap: .45rem;
        min-width: 340px;
        flex: 0 0 auto;
    }
    .navbar .logo-mascot {
        width: 400px;
        height: 262px;
        margin-left: -100px;
        margin-top: -101px;
        transform: none;
        object-fit: contain;
        object-position: bottom center;
        filter: drop-shadow(0 0 12px rgba(158,83,255,.35));
    }
    .navbar .nav-logo .logo-text {
        font-size: 2.2rem;
        line-height: 1;
        margin-top: 50px;
        margin-left: -70px;
        background: linear-gradient(90deg,#fff,#b78aff 72%,#e6b8ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        white-space: nowrap;
    }
    .nav-links { display: none !important; }
    .ys-desktop-search {
        position: absolute;
        left: 36%;
        bottom: 9px;
        width: min(560px, 42vw);
        height: 38px;
        display: flex;
        align-items: center;
        gap: .35rem;
        padding: 0 .65rem;
        border: 1px solid rgba(131,104,255,.65);
        border-radius: 999px;
        background: rgba(4,7,20,.8);
        box-shadow: 0 0 18px rgba(112,65,255,.13);
        z-index: 3;
    }
    .ys-desktop-actions {
        position: absolute;
        right: 64px;
        top: 34px;
        display: flex;
        align-items: center;
        gap: .65rem;
        z-index: 4;
    }
    .nav-right-mobile {
        position: absolute;
        right: 1rem;
        top: 32px;
        display: flex;
        gap: .35rem;
        z-index: 5;
    }
    .nav-right-mobile .nav-notif-mobile { display: none; }
    .hamburger { display: flex; }
    .main-content { padding-top: 145px; }
    body:not(.ys-home-page) .main-content { padding-top: 145px; }
    /* neutralized anime-only 145px — use global compact navbar */
    /* .ys-anime-page .navbar.has-custom-navbar-bg { min-height: 145px; height: 145px; } */
    .ys-anime-page .nav-right-mobile { display: flex; margin-left: 0; }
}


/* v1.15 — Desktop hamburger drawer is shared by Home and all internal pages. */
@media (min-width: 769px) {
    .ys-nav-menu-home-open {
        position: absolute;
        right: 0;
        top: 50px;
        width: 230px;
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        padding: 8px;
        z-index: 75;
        border: 1px solid rgba(139,85,255,.45);
        border-radius: 11px;
        background: linear-gradient(180deg,#15112e,#090b1c);
        box-shadow: 0 18px 45px rgba(0,0,0,.48);
    }
    .ys-nav-menu-home-open .nav-link {
        display: flex;
        padding: .6rem .7rem;
        border-radius: 7px;
        color: #ddd9ef;
        font-size: .7rem;
        white-space: nowrap;
    }
    .ys-nav-menu-home-open .nav-link:hover {
        background: rgba(139,85,255,.14);
        color: #fff;
    }
    .ys-nav-menu-home-open .theme-toggle { margin: 4px 0 0; }
}


/* ================================================================
   V1.16 — GLOBAL NAVBAR EDGE + PROFILE FIX
   The desktop navbar must use the full viewport. Custom artwork is
   painted by the navbar itself (not the centered nav-container), and
   the profile control is scoped globally so inner pages cannot inherit
   the large profile-avatar component styles.
   ================================================================ */
@media (min-width: 769px) {
    .navbar {
        width: 100vw;
        max-width: none;
        margin: 0;
        left: 0;
        right: 0;
        top: 0;
        box-sizing: border-box;
    }

    .navbar.has-custom-navbar-bg {
        background-image: var(--ys-navbar-bg) !important;
        background-size: cover !important;
        background-position: var(--ys-navbar-pos, 50% 50%) !important;
        background-repeat: no-repeat !important;
        background-color: #09051b !important;
    }

    .navbar.has-custom-navbar-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(90deg,
            rgba(5,4,18,var(--ys-navbar-overlay,.68)),
            rgba(10,7,28,calc(var(--ys-navbar-overlay,.68) * .78)),
            rgba(5,4,18,calc(var(--ys-navbar-overlay,.68) * .9)));
    }

    .navbar.has-custom-navbar-bg .nav-container {
        position: relative;
        z-index: 2;
    }

    /* Keep the profile compact and circular on every desktop page. */
    .ys-profile-menu {
        position: relative;
        display: block;
    }
    .ys-profile-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .42rem;
        height: 40px;
        min-width: 40px;
        padding: 3px 7px 3px 4px;
        border: 1px solid rgba(139,85,255,.32);
        border-radius: 999px;
        background: rgba(12,10,30,.65);
        color: #eeeaff;
        cursor: pointer;
    }
    .ys-profile-trigger:hover {
        border-color: rgba(183,111,255,.7);
        background: rgba(139,85,255,.12);
    }
    .ys-profile-trigger .profile-avatar-media,
    .ys-profile-trigger .profile-avatar-fallback,
    .ys-profile-trigger .ys-profile-fallback {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        border-radius: 50% !important;
        object-fit: cover;
        display: block;
        overflow: hidden;
    }
    .ys-profile-trigger .profile-avatar-fallback,
    .ys-profile-trigger .ys-profile-fallback {
        display: grid;
        place-items: center;
        background: linear-gradient(135deg,#8b55ff,#c06cff);
        color: #fff;
        font-weight: 800;
    }
    .ys-profile-name {
        max-width: 105px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .7rem;
    }
    .ys-profile-chevron { color:#aaa3c5; font-size:.9rem; line-height:1; }

    .ys-profile-dropdown {
        position: absolute;
        right: 0;
        top: calc(100% + 9px);
        width: 220px;
        padding: 8px;
        z-index: 1100;
        border: 1px solid rgba(139,85,255,.5);
        border-radius: 12px;
        background: linear-gradient(180deg,#15112e,#090b1c);
        box-shadow: 0 18px 45px rgba(0,0,0,.5),0 0 25px rgba(103,55,190,.16);
    }
    .ys-profile-dropdown[hidden] { display:none; }
    .ys-profile-dropdown-head { display:flex; align-items:center; gap:.65rem; padding:7px; margin-bottom:5px; border-radius:9px; background:rgba(255,255,255,.035); }
    .ys-profile-dropdown-head .profile-avatar-media,
    .ys-profile-dropdown-head .profile-avatar-fallback {
        width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important;
        border-radius:50% !important; object-fit:cover; display:block; overflow:hidden;
    }
}/* V1.17 — Stable navbar: no scroll-compression + no custom-navbar seam
   The desktop navbar is fixed at the same 145px height at all scroll positions.
   Internal pages start immediately below it; the small visual gap is controlled
   by the page content padding rather than an accidental second navbar spacer. */
@media (min-width: 769px) {
    .navbar {
        top: 0 !important;
        height: 145px !important;
        min-height: 145px !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 8px 28px rgba(0,0,0,.24);
    }
    .navbar.has-custom-navbar-bg {
        background: var(--ys-navbar-bg) center center / cover no-repeat !important;
    }
    .navbar.has-custom-navbar-bg::before {
        inset: 0 !important;
        border-radius: 0 !important;
    }
    /* Fixed navbar has no flow height, so reserve exactly one navbar height. */
    body:not(.ys-home-page) .main-content,
    .ys-home-page .main-content {
        padding-top: 145px !important;
        margin-top: 0 !important;
    }
    /* Internal pages: only a small breathing room below the navbar. */
    body.ys-anime-page .ys-library-shell {
        margin-top: 0 !important;
    }
    body.ys-anime-page .ys-anime-page {
        padding-top: 18px !important;
    }
}



/* V1.18 — Desktop navbar occupies real layout space.
   This removes the black seam/double 145px gap that appeared when a
   custom navbar background was active. The navbar stays pinned with
   position: sticky while remaining part of normal document flow. */
@media (min-width: 769px) {
    .navbar,
    .navbar.has-custom-navbar-bg {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 145px !important;
        min-height: 145px !important;
        margin: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 1000 !important;
    }

    /* Navbar itself reserves the 145px; main content must not reserve it again. */
    .main-content,
    body:not(.ys-home-page) .main-content,
    .ys-home-page .main-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .navbar.has-custom-navbar-bg {
        background-image: var(--ys-navbar-bg) !important;
        background-size: cover !important;
        background-position: var(--ys-navbar-pos, 50% 50%) !important;
        background-repeat: no-repeat !important;
    }

    .navbar.has-custom-navbar-bg::before {
        inset: 0 !important;
    }

    /* Internal sidebar follows the global 145px navbar. */
    .ys-inner-sidebar {
        top: 145px !important;
        height: calc(100vh - 145px) !important;
    }

    /* Home sidebar and content naturally start immediately below navbar. */
    .ys-home-shell {
        margin-top: 0 !important;
    }

    /* Detail heroes/list pages begin directly after the navbar. */
    .detail-hero,
    .ys-library-shell,
    .ys-anime-page {
        margin-top: 0 !important;
    }
}

/* ================================================================
   YUMESEKAI V1.19 — GENRE DESKTOP
   Uses the locked global navbar/sidebar shell from v1.18.
   ================================================================ */
.ys-genre-page .ys-library-shell {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 14px;
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 24px 24px 48px;
    box-sizing: border-box;
}
.ys-genre-page .ys-inner-sidebar { display:block; }
.ys-genre-page .ys-library-content { min-width:0; }
.ys-genre-library-page { padding: 18px 0 0 !important; }
.ys-genre-heading {
    padding: 8px 2px 22px;
    border-bottom: 1px solid rgba(139,85,255,.18);
    margin-bottom: 24px;
}
.ys-genre-kicker {
    display:block;
    margin-bottom:7px;
    color:#a66cff;
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.16em;
}
.ys-genre-heading h1 {
    margin:0;
    display:flex;
    align-items:center;
    gap:10px;
    color:#f5f1ff;
    font-size:2rem;
    line-height:1.15;
    letter-spacing:-.03em;
}
.ys-genre-heading h1 > span { color:#a75bff; font-size:1.25rem; }
.ys-genre-heading p { margin:9px 0 0; color:#8589a2; font-size:.82rem; }
.ys-genre-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:12px;
}
.ys-genre-card {
    position:relative;
    min-height:104px;
    padding:17px 42px 16px 17px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    overflow:hidden;
    border:1px solid rgba(120,91,190,.22);
    border-radius:12px;
    background:
      radial-gradient(circle at 90% 10%,rgba(136,72,255,.13),transparent 45%),
      linear-gradient(145deg,rgba(20,18,39,.95),rgba(11,13,28,.98));
    color:#eeeaff;
    text-decoration:none;
    box-shadow:0 8px 22px rgba(0,0,0,.13);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.ys-genre-card:hover {
    transform:translateY(-3px);
    border-color:rgba(164,93,255,.62);
    background:
      radial-gradient(circle at 90% 10%,rgba(151,76,255,.22),transparent 48%),
      linear-gradient(145deg,rgba(27,21,51,.98),rgba(12,13,30,.98));
    box-shadow:0 12px 28px rgba(101,49,190,.18),0 0 18px rgba(139,85,255,.1);
}
.ys-genre-card-icon {
    position:absolute;
    top:14px;
    right:16px;
    color:#9d5cff;
    font-size:.75rem;
}
.ys-genre-card-name { font-size:.95rem; font-weight:750; color:#f2effb; }
.ys-genre-card-count { color:#747991; font-size:.68rem; }
.ys-genre-card-arrow { position:absolute; right:15px; bottom:14px; color:#7e829a; font-size:.78rem; transition:transform .2s ease,color .2s ease; }
.ys-genre-card:hover .ys-genre-card-arrow { color:#c095ff; transform:translateX(3px); }
.ys-genre-empty { margin-top:20px; }

@media (min-width:1500px) {
    .ys-genre-page .ys-library-shell { padding-left:30px; padding-right:30px; }
    .ys-genre-grid { grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:14px; }
}
@media (max-width:900px) {
    .ys-genre-page .ys-library-shell { display:block; padding:20px 16px 40px; }
    .ys-genre-page .ys-inner-sidebar { display:none; }
    .ys-genre-library-page { padding-top:4px !important; }
}
@media (max-width:560px) {
    .ys-genre-heading h1 { font-size:1.55rem; }
    .ys-genre-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .ys-genre-card { min-height:92px; padding:14px 35px 14px 14px; }
    .ys-genre-card-name { font-size:.82rem; }
}

/* ================================================================
   YUMESEKAI V1.20 — LIGHT NOVEL DESKTOP
   Follows the locked global navbar/sidebar shell from v1.18/v1.19.
   ================================================================ */
.ys-ln-page .ys-library-shell {
    display:grid;
    grid-template-columns:176px minmax(0,1fr);
    gap:14px;
    width:min(100%,1440px);
    margin:0 auto;
    padding:24px 24px 48px;
    box-sizing:border-box;
}
.ys-ln-page .ys-inner-sidebar { display:block; }
.ys-ln-page .ys-library-content { min-width:0; }
.ys-ln-library-page { padding:18px 0 0 !important; }
.ys-ln-heading {
    padding:8px 2px 22px;
    border-bottom:1px solid rgba(139,85,255,.18);
    margin-bottom:24px;
}
.ys-ln-kicker {
    display:block;
    margin-bottom:7px;
    color:#a66cff;
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.16em;
}
.ys-ln-heading h1 {
    margin:0;
    display:flex;
    align-items:center;
    gap:10px;
    color:#f5f1ff;
    font-size:2rem;
    line-height:1.1;
    font-weight:800;
}
.ys-ln-heading h1 span { color:#a968ff; }
.ys-ln-heading p { margin:9px 0 0; color:#8589a2; font-size:.82rem; }
.ys-ln-grid { margin-top:0; }
.ys-ln-grid .anime-card { min-width:0; }

.ys-ln-detail-shell { align-items:start; }
.ys-ln-detail-page { padding:18px 0 40px !important; }
.ys-ln-detail-hero {
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:28px;
    align-items:start;
    padding:8px 2px 28px;
    border-bottom:1px solid rgba(139,85,255,.18);
}
.ys-ln-cover {
    width:220px !important;
    height:330px !important;
    flex-shrink:0;
    border-radius:10px !important;
    border:1px solid rgba(151,106,255,.28) !important;
    background:#0b0d1b;
    box-shadow:0 18px 40px rgba(44,20,96,.22);
}
.ys-ln-cover img,
.ys-ln-cover video { width:100%; height:100%; object-fit:cover; display:block; }
.ys-ln-detail-copy { min-width:0; padding-top:8px; }
.ys-ln-detail-copy h1 {
    margin:0;
    color:#f5f1ff;
    font-size:clamp(1.7rem,2.5vw,2.45rem);
    line-height:1.1;
    font-weight:800;
}
.ys-ln-based { margin:10px 0 0; color:#8f91a8; font-size:.86rem; }
.ys-ln-based a { color:#b17bff; }
.ys-ln-author { margin:9px 0; color:#8f91a8; font-size:.8rem; }
.ys-ln-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:10px 0 12px; }
.ys-ln-chips .badge { background:rgba(108,65,196,.12); border:1px solid rgba(147,96,255,.22); }
.ys-ln-synopsis { max-width:820px; margin-top:16px; color:#a7a9ba; line-height:1.7; }
.ys-ln-actions { margin-top:18px; display:flex; flex-wrap:wrap; gap:.5rem; }
.ys-ln-actions form { margin:0; }
.ys-ln-volume-heading { padding:28px 2px 14px; }
.ys-ln-volume-heading h2 { margin:0; color:#f3efff; font-size:1.25rem; }
.ys-ln-volume {
    margin-bottom:12px;
    padding:16px;
    border:1px solid rgba(117,86,195,.16);
    border-radius:10px;
    background:rgba(17,17,31,.62);
}
.ys-ln-volume h3 { margin:0 0 12px; color:#e9e4f8; font-size:.95rem; }
.ys-ln-muted { margin:0; color:#777b96; font-size:.82rem; }

@media (max-width: 980px) {
    .ys-ln-page .ys-library-shell { padding-left:18px; padding-right:18px; }
    .ys-ln-detail-hero { grid-template-columns:180px minmax(0,1fr); gap:20px; }
    .ys-ln-cover { width:180px !important; height:270px !important; }
}
@media (max-width: 760px) {
    .ys-ln-page .ys-library-shell { display:block; padding:14px 14px 32px; }
    .ys-ln-page .ys-inner-sidebar { display:none; }
    .ys-ln-detail-hero { grid-template-columns:1fr; }
    .ys-ln-cover { width:min(190px,100%) !important; height:285px !important; margin:0 auto; }
    .ys-ln-detail-copy { padding-top:0; }
    .ys-ln-heading h1 { font-size:1.55rem; }
    .ys-ln-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
}

/* ================================================================
   YUMESEKAI V1.21 — INTERNAL LIBRARY CONTENT VISIBILITY FIX
   Fixes Genre / Light Novel collapsing or appearing behind the
   custom navbar when the custom navbar background is enabled.
   ================================================================ */
@media (min-width: 769px) {
    body.ys-genre-page .main-content,
    body.ys-ln-page .main-content {
        position: relative !important;
        z-index: 2 !important;
        display: block !important;
        min-height: calc(100vh - 145px) !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        overflow: visible !important;
    }

    body.ys-genre-page .ys-library-shell,
    body.ys-ln-page .ys-library-shell {
        position: relative !important;
        z-index: 2 !important;
        display: grid !important;
        align-items: start !important;
        min-height: calc(100vh - 145px) !important;
        margin-top: 0 !important;
        overflow: visible !important;
    }

    body.ys-genre-page .ys-library-content,
    body.ys-ln-page .ys-library-content {
        position: relative !important;
        z-index: 3 !important;
        display: block !important;
        visibility: visible !important;
        min-height: 320px !important;
        overflow: visible !important;
    }

    /* Do not let the generic card entrance animation leave library cards
       invisible if an observer is delayed or unavailable. */
    body.ys-genre-page .anime-grid .anime-card,
    body.ys-ln-page .anime-grid .anime-card {
        opacity: 1 !important;
        transform: none !important;
    }

    body.ys-genre-page .ys-genre-library-page,
    body.ys-ln-page .ys-ln-library-page {
        position: relative !important;
        z-index: 3 !important;
        visibility: visible !important;
    }

    /* Keep the mascot inside the library column and prevent the footer from
       visually overtaking a short/collapsed content area. */
    body.ys-genre-page .ys-side-mascot,
    body.ys-ln-page .ys-side-mascot {
        z-index: 2 !important;
    }

    body.ys-genre-page .footer,
    body.ys-ln-page .footer {
        position: relative !important;
        z-index: 4 !important;
        clear: both !important;
    }
}

/* ================================================================
   YUMESEKAI V1.22 — GLOBAL DESKTOP FLOW RESET
   The custom navbar must never change the document flow differently
   from the default navbar.  One 145px header, one content start.
   This final override intentionally normalizes the older v1.15-v1.21
   navbar rules instead of stacking another layout mode on top of them.
   ================================================================ */
@media (min-width: 769px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* One and only one desktop navbar model: fixed viewport header. */
    .navbar,
    .navbar.has-custom-navbar-bg {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 145px !important;
        min-height: 145px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        border-radius: 0 !important;
        z-index: 1000 !important;
        overflow: visible !important;
    }

    .navbar.has-custom-navbar-bg {
        background-image: var(--ys-navbar-bg) !important;
        background-size: cover !important;
        background-position: var(--ys-navbar-pos, 50% 50%) !important;
        background-repeat: no-repeat !important;
        background-color: #09051b !important;
    }

    .navbar.has-custom-navbar-bg::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        border-radius: 0 !important;
        background: linear-gradient(90deg,
            rgba(5,4,18,var(--ys-navbar-overlay,.68)),
            rgba(10,7,28,calc(var(--ys-navbar-overlay,.68) * .78)),
            rgba(5,4,18,calc(var(--ys-navbar-overlay,.68) * .9))) !important;
    }

    .navbar .nav-container {
        position: relative !important;
        z-index: 2 !important;
        height: 145px !important;
        min-height: 145px !important;
        box-sizing: border-box !important;
    }

    /* Exactly 145px of document space below the fixed navbar. */
    .main-content,
    body:not(.ys-home-page) .main-content,
    .ys-home-page .main-content {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        min-height: calc(100vh - 145px) !important;
        margin: 0 !important;
        padding-top: 145px !important;
        overflow: visible !important;
    }

    /* Never add another top offset to the internal desktop shells. */
    body.ys-anime-page .ys-library-shell,
    body.ys-genre-page .ys-library-shell,
    body.ys-ln-page .ys-library-shell {
        position: relative !important;
        z-index: 1 !important;
        display: grid !important;
        grid-template-columns: 176px minmax(0, 1fr) !important;
        gap: 14px !important;
        box-sizing: border-box !important;
        width: min(100%, 1440px) !important;
        min-height: calc(100vh - 145px) !important;
        margin: 0 auto !important;
        padding: 24px 24px 48px !important;
        overflow: visible !important;
    }

    body.ys-anime-page .ys-library-content,
    body.ys-genre-page .ys-library-content,
    body.ys-ln-page .ys-library-content {
        position: relative !important;
        z-index: 2 !important;
        display: block !important;
        min-width: 0 !important;
        min-height: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    /* Internal sidebar starts exactly below the 145px header. */
    body.ys-anime-page .ys-inner-sidebar,
    body.ys-genre-page .ys-inner-sidebar,
    body.ys-ln-page .ys-inner-sidebar {
        position: sticky !important;
        top: 145px !important;
        height: calc(100vh - 145px) !important;
        min-height: calc(100vh - 145px) !important;
        box-sizing: border-box !important;
        align-self: start !important;
        overflow: visible !important;
    }

    /* Do not let the generic entrance animation hide library cards. */
    body.ys-anime-page .anime-grid .anime-card,
    body.ys-genre-page .anime-grid .anime-card,
    body.ys-ln-page .anime-grid .anime-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Internal sidebar mascot stays in the sidebar instead of pushing
       the page height down by the old 135px margin. */
    body.ys-anime-page .ys-side-mascot,
    body.ys-genre-page .ys-side-mascot,
    body.ys-ln-page .ys-side-mascot {
        margin-top: 24px !important;
    }

    /* Footer must follow the actual content, never overlap it. */
    body.ys-anime-page .footer,
    body.ys-genre-page .footer,
    body.ys-ln-page .footer {
        position: relative !important;
        z-index: 2 !important;
        margin-top: 0 !important;
        clear: both !important;
    }
}

/* ================================================================
   YUMESEKAI V1.23 — KOMIK DESKTOP
   Uses the locked global navbar/sidebar shell from v1.22.
   ================================================================ */
@media (min-width: 769px) {
    body.ys-manga-page .ys-library-shell {
        display: grid !important;
        grid-template-columns: 176px minmax(0, 1fr) !important;
        gap: 14px !important;
        width: min(100%, 1440px) !important;
        margin: 0 auto !important;
        padding: 24px 24px 48px !important;
        box-sizing: border-box !important;
        min-height: calc(100vh - 145px) !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
    }
    body.ys-manga-page .ys-inner-sidebar {
        display: block !important;
        position: sticky !important;
        top: 145px !important;
        height: calc(100vh - 145px) !important;
        min-height: calc(100vh - 145px) !important;
        align-self: start !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    body.ys-manga-page .ys-library-content {
        min-width: 0 !important;
        min-height: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    body.ys-manga-page .ys-side-mascot { margin-top: 24px !important; }
    body.ys-manga-page .anime-grid .anime-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

.ys-manga-library-page { padding: 18px 0 0 !important; }
.ys-manga-heading {
    padding: 8px 2px 22px;
    border-bottom: 1px solid rgba(139,85,255,.18);
    margin-bottom: 18px;
}
.ys-manga-kicker {
    display: block;
    margin-bottom: 7px;
    color: #a66cff;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .16em;
}
.ys-manga-heading h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f5f1ff;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -.03em;
}
.ys-manga-heading h1 > span { color: #a75bff; font-size: 1.25rem; }
.ys-manga-heading p { margin: 9px 0 0; color: #8589a2; font-size: .82rem; }
.ys-manga-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.ys-manga-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(120,91,190,.28);
    border-radius: 8px;
    background: rgba(16,15,31,.8);
    color: #aeb0c4;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 700;
    transition: .2s ease;
}
.ys-manga-filter:hover { color: #f2effb; border-color: rgba(164,93,255,.62); transform: translateY(-1px); }
.ys-manga-filter.is-active {
    color: #fff;
    border-color: rgba(157,92,255,.9);
    background: linear-gradient(135deg,#7d42e9,#9d52ff);
    box-shadow: 0 7px 18px rgba(126,66,233,.2);
}
.ys-manga-grid { margin-top: 0; }
.ys-manga-grid .anime-card { min-width: 0; }

@media (max-width: 900px) {
    body.ys-manga-page .ys-library-shell { display: block !important; padding: 20px 16px 40px !important; }
    body.ys-manga-page .ys-inner-sidebar { display: none !important; }
    .ys-manga-library-page { padding-top: 4px !important; }
}
@media (max-width: 560px) {
    .ys-manga-heading h1 { font-size: 1.55rem; }
    .ys-manga-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .ys-manga-filter { min-height: 31px; padding: 0 11px; font-size: .7rem; }
}

/* ================================================================
   YUMESEKAI V1.24 — SEARCH DESKTOP
   Uses the locked global desktop shell from v1.22/v1.23.
   ================================================================ */
body.ys-search-page .ys-search-shell {
    display:grid;
    grid-template-columns:176px minmax(0,1fr);
    gap:14px;
    width:min(100%,1440px);
    min-height:calc(100vh - 145px);
    margin:0 auto;
    padding:24px 24px 48px;
    box-sizing:border-box;
    position:relative;
    z-index:1;
    overflow:visible;
}
body.ys-search-page .ys-inner-sidebar {
    display:block;
    position:sticky;
    top:145px;
    height:calc(100vh - 145px);
    min-height:calc(100vh - 145px);
    align-self:start;
    box-sizing:border-box;
    overflow:visible;
}
body.ys-search-page .ys-library-content {
    min-width:0;
    min-height:0;
    position:relative;
    z-index:2;
    visibility:visible;
    opacity:1;
    overflow:visible;
}
.ys-search-library-page { padding:18px 0 0 !important; }
.ys-search-heading {
    padding:8px 2px 22px;
    border-bottom:1px solid rgba(139,85,255,.18);
    margin-bottom:20px;
}
.ys-search-kicker {
    display:block;
    margin-bottom:7px;
    color:#a66cff;
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.16em;
}
.ys-search-heading h1 {
    margin:0;
    display:flex;
    align-items:center;
    gap:10px;
    color:#f5f1ff;
    font-size:2rem;
    line-height:1.1;
    font-weight:800;
}
.ys-search-heading h1 span { color:#a968ff; }
.ys-search-heading p { margin:9px 0 0; color:#8589a2; font-size:.82rem; }
.ys-search-panel {
    background:rgba(17,17,31,.72);
    border:1px solid rgba(117,86,195,.2);
    border-radius:12px;
    padding:16px;
    margin-bottom:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.ys-search-panel .form-control {
    background:rgba(5,7,18,.82);
    border-color:rgba(132,99,204,.28);
}
.ys-search-panel .btn { border-radius:8px; }
body.ys-search-page .anime-grid .anime-card {
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
}
body.ys-search-page .ys-side-mascot { margin-top:12px; }

@media (max-width: 900px) {
    body.ys-search-page .ys-search-shell {
        display:block;
        min-height:0;
        padding:14px 14px 32px;
    }
    body.ys-search-page .ys-inner-sidebar {
        position:static;
        height:auto;
        min-height:0;
        margin-bottom:14px;
    }
    .ys-search-library-page { padding-top:4px !important; }
}

/* YUMESEKAI V1.25 — FORUM DESKTOP */
.ys-forum-page .ys-forum-shell{display:grid;grid-template-columns:176px minmax(0,1fr);gap:14px;width:min(100%,1440px);margin:0 auto;padding:24px 24px 48px;box-sizing:border-box}
.ys-forum-page .ys-inner-sidebar{display:block}.ys-forum-page .ys-library-content{min-width:0}.ys-forum-library-page{padding:18px 0 0!important;max-width:none!important}
.ys-forum-heading{padding:8px 2px 22px;border-bottom:1px solid rgba(139,85,255,.18);margin-bottom:24px}.ys-forum-kicker{display:block;margin-bottom:7px;color:#a66cff;font-size:.67rem;font-weight:800;letter-spacing:.16em}.ys-forum-heading h1{margin:0;display:flex;align-items:center;gap:10px;color:#f5f1ff;font-size:2rem;line-height:1.15;letter-spacing:-.03em}.ys-forum-heading h1>span{color:#a75bff;font-size:1.2rem}.ys-forum-heading p{margin:9px 0 0;color:#8589a2;font-size:.82rem}.ys-forum-breadcrumb{margin:0 0 12px}.ys-forum-breadcrumb a{color:#8f91a8;font-size:.78rem;text-decoration:none}.ys-forum-breadcrumb a:hover{color:#bd8cff}
.ys-forum-category-list{display:grid;gap:10px;margin-bottom:30px}.ys-forum-category-card{display:flex;justify-content:space-between;align-items:center;gap:18px;min-width:0;padding:16px 18px;text-decoration:none;color:inherit;border:1px solid rgba(117,86,195,.18);border-radius:12px;background:linear-gradient(145deg,rgba(20,18,39,.9),rgba(11,13,28,.96));transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}.ys-forum-category-card:hover{transform:translateY(-2px);border-color:rgba(164,93,255,.58);box-shadow:0 12px 28px rgba(101,49,190,.14),0 0 18px rgba(139,85,255,.08)}.ys-forum-category-card>div:first-child{min-width:0;flex:1}.ys-forum-category-card>div:first-child>div:first-child{color:#f0edfa!important;font-size:1rem!important}.ys-forum-category-card>div:first-child>div:last-child{color:#7f839a!important}.ys-forum-category-stats{display:flex;gap:18px;font-size:.72rem;color:#777b96;white-space:nowrap}.ys-forum-category-stats strong{color:#b8b1cc}.ys-forum-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.ys-forum-section-head h2{margin:0;color:#eeeaff;font-size:1.08rem}.ys-forum-section-head a{color:#a96cff;font-size:.75rem;font-weight:700;text-decoration:none}.ys-forum-section-head a:hover{color:#d0b0ff}.ys-forum-thread-list{display:flex;flex-direction:column;gap:7px}.ys-forum-thread-row{display:block;padding:13px 15px;text-decoration:none;color:inherit;border:1px solid rgba(117,86,195,.15);border-radius:10px;background:rgba(16,16,31,.72);transition:border-color .2s,background .2s,transform .2s}.ys-forum-thread-row:hover{transform:translateX(2px);border-color:rgba(157,91,255,.45);background:rgba(25,20,45,.82)}.ys-forum-thread-row>div:first-child{color:#eeeaf8;font-size:.88rem;font-weight:650;line-height:1.4}.ys-forum-thread-row>div:last-child{color:#777b96!important;font-size:.7rem!important;margin-top:5px!important}.ys-forum-notice{margin-bottom:18px;padding:11px 13px;background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.22);border-radius:10px;font-size:.78rem;color:#a9aabb}.ys-forum-notice strong{color:#eee8f7}.ys-forum-create{margin-bottom:20px;padding:0;border:1px solid rgba(117,86,195,.2);border-radius:12px;background:rgba(17,17,31,.72);overflow:hidden}.ys-forum-create summary{cursor:pointer;padding:13px 15px;color:#eeeaff;font-size:.82rem;font-weight:700;list-style:none}.ys-forum-create summary::-webkit-details-marker{display:none}.ys-forum-create summary::after{content:'+';float:right;color:#a96cff;font-size:1rem}.ys-forum-create[open] summary::after{content:'−'}.ys-forum-create-form{display:flex;flex-direction:column;gap:10px;padding:0 15px 15px}.ys-forum-login-note{margin-bottom:18px;padding:11px 13px;border:1px solid rgba(117,86,195,.16);border-radius:10px;background:rgba(17,17,31,.58);color:#7f839a;font-size:.78rem}.ys-forum-login-note a{color:#b17bff;text-decoration:none;font-weight:700}.ys-forum-thread-heading{padding:0 2px 4px}.ys-forum-thread-heading h1{margin:0;color:#f5f1ff;font-size:1.55rem;line-height:1.25;letter-spacing:-.02em}.ys-forum-thread-meta{color:#777b96;font-size:.72rem;margin:8px 0 18px}.ys-forum-admin-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.ys-forum-post-list{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}.ys-forum-post{padding:15px;border:1px solid rgba(117,86,195,.16);border-radius:12px;background:rgba(17,17,31,.72);position:relative}.ys-forum-post-head{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.ys-forum-post-user{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.ys-forum-post-user a{color:#f0edf8!important;text-decoration:none;font-size:.82rem}.ys-forum-post-head>form{margin-left:auto}.ys-forum-post-content{color:#aeb0bf;line-height:1.7;white-space:pre-wrap;font-size:.84rem}.ys-forum-reply-box{padding:15px;border:1px solid rgba(117,86,195,.2);border-radius:12px;background:rgba(17,17,31,.76)}.ys-forum-reply-btn{margin-top:10px}.ys-forum-new-card{max-width:820px!important;margin:0 auto}.ys-forum-new-form{display:grid;gap:14px;padding:2px}.ys-forum-new-form label{display:grid;gap:7px;color:#c5c2d0;font-size:.78rem;font-weight:650}.ys-forum-new-form .form-control{width:100%;box-sizing:border-box}.ys-forum-new-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:2px}
@media (min-width:1500px){.ys-forum-page .ys-forum-shell{padding-left:30px;padding-right:30px}}@media (max-width:900px){.ys-forum-page .ys-forum-shell{display:block;padding:20px 16px 40px}.ys-forum-page .ys-inner-sidebar{display:none}.ys-forum-library-page{padding-top:4px!important}}@media (max-width:560px){.ys-forum-heading h1{font-size:1.55rem}.ys-forum-category-card{align-items:flex-start;flex-direction:column;gap:9px}.ys-forum-category-stats{gap:12px}.ys-forum-section-head{align-items:flex-start}.ys-forum-thread-heading h1{font-size:1.25rem}.ys-forum-post{padding:12px}.ys-forum-new-actions{justify-content:stretch}.ys-forum-new-actions .btn{flex:1;text-align:center}}

/* YUMESEKAI V1.26 — ACTIVITY DESKTOP */
body.ys-activity-page .ys-activity-shell{display:grid;grid-template-columns:176px minmax(0,1fr);gap:14px;width:min(100%,1440px);min-height:calc(100vh - 145px);margin:0 auto;padding:24px 24px 48px;box-sizing:border-box;position:relative;z-index:1;overflow:visible}
body.ys-activity-page .ys-inner-sidebar{display:block;position:sticky;top:145px;height:calc(100vh - 145px);min-height:calc(100vh - 145px);align-self:start;box-sizing:border-box;overflow:visible}
body.ys-activity-page .ys-library-content{min-width:0;min-height:0;position:relative;z-index:2;visibility:visible;opacity:1;overflow:visible}
.ys-activity-library-page{padding:18px 0 0!important;max-width:900px!important;margin:0 auto}
.ys-activity-heading{padding:8px 2px 22px;border-bottom:1px solid rgba(139,85,255,.18);margin-bottom:20px}.ys-activity-kicker{display:block;margin-bottom:7px;color:#a66cff;font-size:.67rem;font-weight:800;letter-spacing:.16em}.ys-activity-heading h1{margin:0;display:flex;align-items:center;gap:10px;color:#f5f1ff;font-size:2rem;line-height:1.1;font-weight:800;letter-spacing:-.03em}.ys-activity-heading h1 span{color:#a75bff;font-size:1.2rem}.ys-activity-heading p{margin:9px 0 0;color:#8589a2;font-size:.82rem}
.ys-activity-list{display:flex;flex-direction:column;gap:8px}.ys-activity-card{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1px solid rgba(117,86,195,.16);border-radius:12px;background:linear-gradient(145deg,rgba(20,18,39,.84),rgba(11,13,28,.92));transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.ys-activity-card:hover{transform:translateX(2px);border-color:rgba(164,93,255,.45);background:linear-gradient(145deg,rgba(25,21,46,.92),rgba(12,14,31,.96));box-shadow:0 10px 24px rgba(101,49,190,.1)}.ys-activity-avatar{display:block;flex:0 0 42px;width:42px;height:42px;border-radius:50%;overflow:hidden}.ys-activity-avatar img{display:block;width:42px;height:42px;object-fit:cover}.ys-activity-body{min-width:0;flex:1;padding-top:1px}.ys-activity-message{color:#b8b5c5;font-size:.84rem;line-height:1.55}.ys-activity-user{color:#f0edf8;font-weight:750;text-decoration:none;margin-right:5px}.ys-activity-user:hover{color:#c493ff}.ys-activity-text{color:#aaa8b9;text-decoration:none}.ys-activity-text:hover{color:#d4b9ff}.ys-activity-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;color:#73778e;font-size:.69rem}.ys-activity-type{padding:2px 7px;border-radius:999px;border:1px solid rgba(139,85,255,.16);background:rgba(104,60,175,.08);color:#9187aa;font-size:.62rem;font-weight:650}.ys-activity-empty{padding:58px 20px;text-align:center;border:1px solid rgba(117,86,195,.17);border-radius:14px;background:linear-gradient(145deg,rgba(18,17,34,.82),rgba(10,12,26,.94))}.ys-activity-empty-icon{width:54px;height:54px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(157,91,255,.25);background:rgba(120,67,205,.08);color:#a96cff;font-size:1.25rem}.ys-activity-empty h2{margin:0;color:#eeeaf8;font-size:1.05rem}.ys-activity-empty p{margin:7px 0 18px;color:#777b96;font-size:.78rem}.ys-activity-empty .btn{border-radius:8px}.ys-activity-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px}.ys-activity-pagination a,.ys-activity-pagination span,.ys-activity-pagination strong{min-height:32px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:8px;font-size:.72rem;text-decoration:none}.ys-activity-pagination a{color:#c8b5e8;border:1px solid rgba(117,86,195,.2);background:rgba(17,17,31,.72);transition:.18s}.ys-activity-pagination a:hover{color:#fff;border-color:rgba(164,93,255,.55);background:rgba(43,27,70,.72)}.ys-activity-pagination strong{color:#eeeaff;border:1px solid rgba(157,91,255,.28);background:rgba(104,60,175,.12);font-weight:700}.ys-activity-pagination .is-disabled{color:#4f5265;border:1px solid rgba(117,86,195,.08);background:rgba(17,17,31,.35)}
body.ys-activity-page .ys-side-mascot{margin-top:12px}
/* v1.26.1 — Activity avatar: override global 72px avatar rules so the 42px feed avatar stays perfectly circular. */
body.ys-activity-page .ys-activity-avatar .profile-avatar-media,
body.ys-activity-page .ys-activity-avatar .profile-avatar-fallback,
body.ys-activity-page .ys-activity-avatar img,
body.ys-activity-page .ys-activity-avatar video{
    width:42px !important;
    height:42px !important;
    min-width:42px;
    min-height:42px;
    max-width:42px;
    max-height:42px;
    flex:0 0 42px;
    display:block;
    border-radius:50% !important;
    object-fit:cover;
    box-sizing:border-box;
}
body.ys-activity-page .ys-activity-avatar .profile-avatar-fallback{
    display:grid;
    place-items:center;
    overflow:hidden;
}
@media (min-width:1500px){body.ys-activity-page .ys-activity-shell{padding-left:30px;padding-right:30px}}
@media (max-width:900px){body.ys-activity-page .ys-activity-shell{display:block;min-height:0;padding:14px 14px 32px}body.ys-activity-page .ys-inner-sidebar{position:static;height:auto;min-height:0;margin-bottom:14px}.ys-activity-library-page{padding-top:4px!important}}
@media (max-width:560px){.ys-activity-heading h1{font-size:1.55rem}.ys-activity-card{padding:12px}.ys-activity-message{font-size:.79rem}.ys-activity-pagination{gap:6px}.ys-activity-pagination a,.ys-activity-pagination span,.ys-activity-pagination strong{padding:0 8px;font-size:.66rem}}


/* ================================================================
   YUMESEKAI V1.27 — FAVORITES DESKTOP
   Dedicated desktop collection view for profile.php?tab=favorites.
   Existing favorite forms/data/actions remain unchanged.
   ================================================================ */
body.ys-favorites-page .ys-favorites-profile-section {
    width: min(100%, 1440px);
    max-width: none;
    margin: 0 auto 2.5rem;
    padding: 24px 24px 48px !important;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 14px;
    position: relative;
    z-index: 1;
}
body.ys-favorites-page .ys-favorites-sidebar {
    display: block;
    position: sticky;
    top: 145px;
    height: calc(100vh - 145px);
    min-height: calc(100vh - 145px);
    align-self: start;
    box-sizing: border-box;
    overflow: visible;
}
body.ys-favorites-page .ys-favorites-content {
    min-width: 0;
    position: relative;
    z-index: 2;
    padding: 18px 0 0;
}
body.ys-favorites-page .ys-favorites-content > .profile-header,
body.ys-favorites-page .ys-favorites-content > .profile-tabs {
    display: none;
}
body.ys-favorites-page .ys-favorites-heading {
    padding: 8px 2px 20px;
    border-bottom: 1px solid rgba(139,85,255,.18);
    margin-bottom: 20px;
    position: relative;
}
body.ys-favorites-page .ys-favorites-kicker {
    display: block;
    margin-bottom: 7px;
    color: #a66cff;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .16em;
}
body.ys-favorites-page .ys-favorites-heading h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f5f1ff;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -.03em;
}
body.ys-favorites-page .ys-favorites-heading h1 > span {
    color: #a75bff;
    font-size: 1.3rem;
}
body.ys-favorites-page .ys-favorites-heading p {
    margin: 9px 0 0;
    color: #8589a2;
    font-size: .82rem;
}
body.ys-favorites-page .ys-favorites-count {
    position: absolute;
    right: 2px;
    bottom: 20px;
    color: #aaa4bd;
    font-size: .72rem;
    font-weight: 700;
    padding: 6px 10px;
    border: 1px solid rgba(139,85,255,.22);
    border-radius: 999px;
    background: rgba(17,15,32,.72);
}
body.ys-favorites-page .ys-favorites-content > .section-title {
    display: none;
}
body.ys-favorites-page .ys-favorites-content .anime-grid {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px;
}
body.ys-favorites-page .ys-favorites-content .anime-grid .anime-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0;
    background: linear-gradient(180deg, rgba(18,16,35,.96), rgba(10,11,24,.98));
    border-color: rgba(117,86,195,.24);
}
body.ys-favorites-page .ys-favorites-content .anime-grid .anime-card:hover {
    border-color: rgba(164,93,255,.62);
    box-shadow: 0 10px 28px rgba(101,49,190,.16), 0 0 20px rgba(139,85,255,.08);
}
body.ys-favorites-page .ys-favorites-content .card-remove-form {
    padding: 8px;
    margin: 0;
    background: rgba(7,8,18,.76);
    border-top: 1px solid rgba(117,86,195,.14);
}
body.ys-favorites-page .ys-favorites-content .card-remove-btn {
    width: 100%;
    min-height: 30px;
    border-radius: 7px;
    font-size: .7rem;
}
body.ys-favorites-page .ys-favorites-content .empty-state {
    margin: 10px 0 0;
    padding: 40px 20px;
    border: 1px dashed rgba(117,86,195,.28);
    border-radius: 12px;
    background: rgba(17,17,31,.58);
    color: #8589a2;
    text-align: center;
}
body.ys-favorites-page .ys-side-mascot { margin-top: 12px; }

@media (min-width: 1500px) {
    body.ys-favorites-page .ys-favorites-profile-section {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}
@media (max-width: 900px) {
    body.ys-favorites-page .ys-favorites-profile-section {
        display: block;
        min-height: 0;
        padding: 14px 14px 32px !important;
    }
    body.ys-favorites-page .ys-favorites-sidebar {
        position: static;
        height: auto;
        min-height: 0;
        margin-bottom: 14px;
    }
    body.ys-favorites-page .ys-favorites-content {
        padding-top: 4px;
    }
}
@media (max-width: 560px) {
    body.ys-favorites-page .ys-favorites-heading h1 { font-size: 1.55rem; }
    body.ys-favorites-page .ys-favorites-count {
        position: static;
        display: inline-block;
        margin-top: 12px;
    }
    body.ys-favorites-page .ys-favorites-content .anime-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }
}

/* ================================================================
   YUMESEKAI V1.28 — FULL DESKTOP AUDIT & POLISH
   Visual-only normalization. Existing PHP/data/actions remain unchanged.
   ================================================================ */
@media (min-width: 901px) {
    /* Keep every desktop page inside the same readable visual rhythm. */
    body:not(.ys-home-page) .main-content {
        min-width: 0;
        overflow-x: clip;
    }

    /* Profile tabs/pages use the same desktop density as the new library pages. */
    body.ys-profile-page > .section {
        width: min(100%, 1180px);
        margin: 0 auto 2.5rem;
        padding: 28px 28px 52px !important;
        box-sizing: border-box;
    }

    body.ys-profile-page .profile-header {
        margin-bottom: 14px;
        padding: 18px;
        border-color: rgba(117,86,195,.22);
        background: linear-gradient(145deg, rgba(18,17,35,.94), rgba(10,11,24,.96));
        box-shadow: 0 10px 28px rgba(0,0,0,.12);
    }

    body.ys-profile-page .profile-avatar-wrap,
    body.ys-profile-page .profile-avatar-media,
    body.ys-profile-page .profile-avatar-fallback {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px;
        min-height: 78px;
        border-radius: 50% !important;
        object-fit: cover;
        box-sizing: border-box;
    }

    body.ys-profile-page .profile-avatar-edit {
        right: -2px;
        bottom: -2px;
    }

    body.ys-profile-page .profile-name {
        font-size: 1.45rem;
    }

    body.ys-profile-page .profile-tabs {
        gap: 5px;
        margin-bottom: 22px;
        padding: 0 0 7px;
        border-bottom-color: rgba(139,85,255,.18);
    }

    body.ys-profile-page .profile-tab {
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid transparent;
        border-radius: 8px;
        font-size: .74rem;
        transition: .18s ease;
    }

    body.ys-profile-page .profile-tab:hover {
        color: #eee9ff;
        background: rgba(139,85,255,.08);
        border-color: rgba(139,85,255,.16);
    }

    body.ys-profile-page .profile-tab.active {
        color: #fff;
        background: linear-gradient(135deg, rgba(112,67,214,.72), rgba(132,73,229,.62));
        border-color: rgba(164,93,255,.42);
        box-shadow: 0 5px 16px rgba(101,49,190,.12);
    }

    body.ys-profile-page .section-title {
        color: #f1edfb;
        font-weight: 750;
        letter-spacing: -.01em;
    }

    body.ys-profile-page .empty-state {
        border: 1px dashed rgba(117,86,195,.28);
        border-radius: 12px;
        background: rgba(17,17,31,.58);
        color: #8589a2;
    }

    /* Prevent avatar media from inheriting rectangular dimensions on profile sub-tabs. */
    body.ys-profile-page .profile-avatar-media,
    body.ys-profile-page .profile-avatar-fallback,
    body.ys-profile-page .profile-avatar {
        overflow: hidden;
        flex: 0 0 78px;
    }
}

@media (min-width: 1500px) {
    body.ys-profile-page > .section {
        padding-left: 34px !important;
        padding-right: 34px !important;
    }
}

@media (max-width: 900px) {
    body.ys-profile-page > .section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Consistent keyboard focus treatment across the redesigned desktop shell. */
@media (min-width: 901px) {
    .navbar a:focus-visible,
    .navbar button:focus-visible,
    .ys-inner-sidebar a:focus-visible,
    .ys-side-nav a:focus-visible,
    .profile-tab:focus-visible,
    .btn:focus-visible {
        outline: 2px solid rgba(181,130,255,.9);
        outline-offset: 2px;
    }
}

/* ================================================================
   YUMESEKAI V1.29 — MOBILE FOUNDATION
   True mobile shell: compact topbar, drawer navigation, bottom quick nav,
   responsive cards and no horizontal overflow. Desktop rules untouched.
   ================================================================ */
@media (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    body { padding-bottom: 62px; }

    /* Compact global mobile topbar */
    .navbar,
    .ys-home-page .navbar,
    .navbar.has-custom-navbar-bg {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 64px !important;
        min-height: 64px !important;
        z-index: 1100;
        border-bottom: 1px solid rgba(139,85,255,.38);
        box-shadow: 0 8px 24px rgba(0,0,0,.34);
    }
    .nav-container,
    .ys-home-page .nav-container {
        height: 64px !important;
        min-height: 64px;
        padding: 0 10px !important;
        align-items: center !important;
        gap: 6px;
        max-width: none;
    }
    .nav-logo,
    .ys-home-page .nav-logo {
        height: 64px !important;
        min-width: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        gap: 2px;
        flex: 1 1 auto;
    }
    /* logo-mascot size removed — controlled by MASCOT MOBILE block at end of file */
    .nav-logo .logo-text,
    .ys-home-page .logo-text {
        font-size: 1.08rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        white-space: nowrap;
    }
    .ys-desktop-brand-links,
    .ys-desktop-search,
    .ys-desktop-actions { display: none !important; }

    .nav-right-mobile,
    .ys-home-page .nav-right-mobile {
        position: static !important;
        display: flex !important;
        align-items: center;
        gap: 2px;
        margin-left: auto;
        z-index: 1105;
    }
    .nav-right-mobile .nav-notif-mobile,
    .ys-home-page .nav-right-mobile .nav-notif-mobile {
        display: grid !important;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        color: #eeeaff;
        font-size: 1.15rem;
        text-decoration: none;
    }
    .nav-right-mobile .nav-notif-mobile:hover { background: rgba(139,85,255,.12); }
    .hamburger,
    .ys-home-page .hamburger {
        display: flex !important;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px;
        border-radius: 10px;
        z-index: 1106;
    }
    .hamburger:hover { background: rgba(139,85,255,.12); }
    .hamburger span { width: 22px; height: 2px; }

    /* Mobile drawer: existing original IA, no new categories. */
    .nav-links,
    body:not(.ys-home-page) .nav-links,
    .ys-home-page .nav-links {
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: auto !important;
        width: min(310px, 86vw) !important;
        height: calc(100vh - 64px) !important;
        max-height: none !important;
        padding: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: linear-gradient(180deg, #12102a 0%, #080a18 100%) !important;
        border: 1px solid rgba(139,85,255,.28);
        border-left: 0;
        border-top: 0;
        border-radius: 0 14px 14px 0;
        box-shadow: 18px 0 42px rgba(0,0,0,.48);
        transform: translateX(-105%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform .22s ease, opacity .18s ease !important;
        z-index: 1095 !important;
    }
    .nav-links.open,
    .ys-home-page .nav-links.open,
    .nav-links.ys-nav-menu-home-open {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .nav-links::before {
        content: 'NAVIGASI YUMESEKAI';
        display: block;
        color: #a66cff;
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .15em;
        padding: 3px 8px 10px;
    }
    .nav-link {
        width: 100% !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 12px !important;
        border-radius: 9px;
        font-size: .8rem;
        white-space: nowrap;
    }
    .nav-link.active { background: rgba(139,85,255,.14); }
    .nav-links .theme-toggle,
    .nav-links .nav-btn,
    .nav-links .nav-btn-outline {
        width: 100%;
        min-height: 44px;
        margin-top: 3px;
    }

    .ys-mobile-drawer-backdrop {
        position: fixed;
        inset: 64px 0 0;
        background: rgba(0,0,0,.5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 1090;
    }
    .ys-mobile-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
    body.ys-mobile-drawer-open { overflow: hidden; }

    /* Main content begins immediately below the compact topbar. */
    .main-content,
    .ys-home-page .main-content,
    body:not(.ys-home-page) .main-content {
        padding-top: 64px !important;
        min-height: calc(100vh - 64px);
    }

    /* Fixed bottom quick navigation */
    .ys-mobile-bottom-nav {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        height: 54px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0,1fr));
        gap: 3px;
        padding: 4px;
        border: 1px solid rgba(139,85,255,.28);
        border-radius: 15px;
        background: rgba(10,10,24,.94);
        box-shadow: 0 10px 35px rgba(0,0,0,.5), 0 0 22px rgba(105,53,210,.08);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        z-index: 1080;
    }
    .ys-mobile-bottom-nav a {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: 10px;
        color: #8589a2;
        text-decoration: none;
        font-size: .56rem;
        font-weight: 700;
    }
    .ys-mobile-bottom-nav a span:first-child { font-size: 1rem; line-height: 1; }
    .ys-mobile-bottom-nav a.is-active { color: #d7b8ff; background: rgba(139,85,255,.14); }
    .ys-mobile-bottom-nav a:active { transform: scale(.97); }

    /* Generic page shells */
    .ys-home-shell,
    body.ys-anime-page .ys-library-shell,
    body.ys-genre-page .ys-library-shell,
    body.ys-ln-page .ys-library-shell,
    body.ys-manga-page .ys-library-shell,
    body.ys-search-page .ys-search-shell,
    body.ys-forum-page .ys-forum-shell,
    body.ys-activity-page .ys-activity-shell,
    body.ys-favorites-page .ys-favorites-profile-section {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 12px 10px 28px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .ys-sidebar,
    .ys-inner-sidebar,
    body.ys-favorites-page .ys-favorites-sidebar { display: none !important; }
    .ys-home-content,
    .ys-library-content,
    .ys-search-library-page,
    .ys-forum-library-page,
    .ys-activity-library-page,
    body.ys-favorites-page .ys-favorites-content { width: 100%; min-width: 0; padding-top: 0 !important; }

    /* Home */
    .ys-home-hero { height: 300px !important; border-radius: 12px !important; margin: 0; }
    .ys-home-hero::before { background: linear-gradient(90deg, rgba(8,9,23,.96), rgba(8,9,23,.62) 58%, rgba(8,9,23,.12)); }
    .ys-hero-copy { max-width: 76% !important; padding: 42px 18px 20px !important; }
    .ys-hero-copy h1 { font-size: 2rem !important; }
    .ys-hero-copy p { font-size: .7rem !important; max-width: 250px; }
    .ys-hero-btn { min-height: 40px; padding: .55rem .9rem; }
    .ys-hero-art { width: 55% !important; right: -12% !important; }
    .ys-hero-art img { opacity: .72; }
    .ys-hero-arrow { width: 30px; height: 30px; bottom: 10px; }
    .ys-hero-arrow.left { right: 52px; }
    .ys-hero-arrow.right { right: 12px; }
    .ys-home-content .section { margin-top: 18px; padding: 0 2px; }
    .ys-home-content .section-header { gap: 8px; }
    .ys-home-content .section-title { font-size: .9rem; }
    .ys-home-content .carousel { gap: 8px; overflow-x: auto; scrollbar-width: none; }
    .ys-home-content .carousel::-webkit-scrollbar { display:none; }
    .ys-home-content .anime-card { flex: 0 0 122px; width:122px; }

    /* Cards / grids */
    .anime-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 9px !important;
    }
    .anime-card { min-width: 0 !important; border-radius: 8px; }
    .anime-card-body { padding: .48rem .5rem .58rem; }
    .anime-card-title { font-size: .68rem; }
    .anime-card-meta { font-size: .6rem; }
    .rating-badge { top: 5px; right: 5px; font-size: .6rem; }

    /* Common headings/toolbars/forms */
    .ys-anime-heading,
    .ys-genre-heading,
    .ys-ln-heading,
    .ys-manga-heading,
    .ys-search-heading,
    .ys-forum-heading,
    .ys-activity-heading,
    body.ys-favorites-page .ys-favorites-heading {
        padding: 5px 0 16px !important;
        margin-bottom: 15px !important;
    }
    .ys-anime-heading h1,
    .ys-genre-heading h1,
    .ys-ln-heading h1,
    .ys-manga-heading h1,
    .ys-search-heading h1,
    .ys-forum-heading h1,
    .ys-activity-heading h1,
    body.ys-favorites-page .ys-favorites-heading h1 { font-size: 1.45rem !important; }
    .ys-anime-heading p,
    .ys-genre-heading p,
    .ys-ln-heading p,
    .ys-manga-heading p,
    .ys-search-heading p,
    .ys-forum-heading p { font-size: .72rem !important; }
    .ys-anime-toolbar,
    .ys-search-panel { gap: 8px; }
    .ys-anime-toolbar .form-control,
    .ys-search-panel .form-control,
    .form-control, select.form-control, textarea.form-control { min-height: 42px; font-size: .8rem; }
    .btn { min-height: 40px; }

    /* Genre / manga / forum compact layouts */
    .ys-genre-grid,
    .ys-manga-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
    .ys-genre-card { min-height: 90px; padding: 13px 34px 13px 13px; }
    .ys-genre-card-name { font-size: .8rem; }
    .ys-forum-category-card { padding: 13px; }
    .ys-forum-category-stats { gap: 10px; font-size: .64rem; }
    .ys-forum-thread-row { padding: 12px; }
    .ys-forum-post { padding: 12px !important; }
    .ys-forum-post-header { gap: 8px; }

    /* Light novel details */
    .ys-ln-detail-hero { grid-template-columns: 1fr !important; gap: 16px; padding-top: 0; }
    .ys-ln-cover { width: min(190px, 62vw) !important; height: auto !important; aspect-ratio: 2/3; margin: 0 auto; }
    .ys-ln-detail-copy h1 { font-size: 1.55rem; }

    /* Profile */
    body.ys-profile-page > .section { width:100%; margin:0; padding:14px 10px 30px !important; }
    body.ys-profile-page .profile-header { padding:14px !important; border-radius:12px; }
    body.ys-profile-page .profile-avatar-wrap,
    body.ys-profile-page .profile-avatar-media,
    body.ys-profile-page .profile-avatar-fallback { width:64px !important; height:64px !important; min-width:64px; min-height:64px; flex-basis:64px !important; }
    body.ys-profile-page .profile-name { font-size:1.15rem; }
    body.ys-profile-page .profile-tabs { overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
    body.ys-profile-page .profile-tabs::-webkit-scrollbar { display:none; }
    body.ys-profile-page .profile-tab { flex:0 0 auto; min-height:38px; }

    /* Favorites */
    body.ys-favorites-page .ys-favorites-count { position:static !important; display:inline-block; margin-top:10px; }

    /* Accessibility / touch */
    a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 380px) {
    /* logo-mascot size removed — controlled by MASCOT MOBILE block at end of file */
    .nav-logo .logo-text, .ys-home-page .logo-text { font-size: .98rem !important; }
    .ys-home-content .anime-card { flex-basis: 114px; width:114px; }
    .anime-card-title { font-size: .64rem; }
    .ys-mobile-bottom-nav a { font-size: .52rem; }
}


/* ================================================================
   YUMESEKAI V1.30 — MOBILE/TABLET HOTFIX
   Unifies conflicting mobile rules, caps oversized desktop mascot on
   touch devices, and stabilizes navbar + bottom spacing.
   ================================================================ */

/* --- True phones (≤768px): one compact shell, kill older conflicts --- */
@media (max-width: 768px) {
    .navbar,
    .ys-home-page .navbar,
    .navbar.has-custom-navbar-bg,
    body.ys-anime-page .navbar,
    body.ys-genre-page .navbar {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }

    .nav-container,
    .ys-home-page .nav-container,
    .navbar .nav-container {
        height: 64px !important;
        min-height: 64px !important;
        align-items: center !important;
        padding: 0 10px !important;
    }

    .nav-logo,
    .ys-home-page .nav-logo,
    .navbar .nav-logo {
        height: 64px !important;
        min-height: 64px !important;
        min-width: 0 !important;
        max-width: calc(100% - 100px) !important;
        padding: 0 !important;
        align-items: center !important;
        gap: 2px !important;
        overflow: visible !important; /* was hidden — clipped oversized mascot */
    }

    /* logo-mascot size removed — controlled by MASCOT MOBILE block at end of file */

    .nav-logo .logo-text,
    .ys-home-page .logo-text,
    .navbar .nav-logo .logo-text {
        font-size: 1.05rem !important;
        margin: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 42vw !important;
    }

    .main-content,
    .ys-home-page .main-content,
    body:not(.ys-home-page) .main-content {
        padding-top: 64px !important;
        min-height: calc(100vh - 64px) !important;
    }

    /* Hide desktop-only chrome */
    .ys-desktop-brand-links,
    .ys-desktop-search,
    .ys-desktop-actions {
        display: none !important;
    }

    /* Sidebar belongs to desktop; hide on phone */
    .ys-sidebar,
    .ys-inner-sidebar,
    body.ys-favorites-page .ys-favorites-sidebar {
        display: none !important;
    }

    /* Bottom nav: only if markup exists; keep safe from desktop rules */
    .ys-mobile-bottom-nav {
        display: grid !important;
        z-index: 1080 !important;
    }

    /* Footer brand stays compact */
    .footer .nav-logo {
        height: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }
    .footer .logo-text {
        max-width: none !important;
        font-size: 1.2rem !important;
    }

    /* Prevent horizontal page scroll from large mascot / cards */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* --- Tablets ONLY (769–1024). Removed (pointer:coarse)+(max-width:1024)
   which was matching ALL touch phones and forcing mascot 96×72 on HP. --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .navbar,
    .ys-home-page .navbar,
    .navbar.has-custom-navbar-bg {
        height: 78px !important;
        min-height: 78px !important;
    }

    .navbar .nav-container,
    .ys-home-page .nav-container {
        height: 78px !important;
        min-height: 78px !important;
        align-items: center !important;
    }

    .navbar .nav-logo,
    .ys-home-page .nav-logo {
        height: 78px !important;
        min-height: 78px !important;
        min-width: 0 !important;
        max-width: 280px !important;
        padding-top: 0 !important;
        align-items: center !important;
    }

    .navbar .logo-mascot,
    .ys-home-page .logo-mascot {
        width: 96px !important;
        height: 72px !important;
        max-width: 96px !important;
        max-height: 72px !important;
        margin-left: -12px !important;
        margin-top: 0 !important;
        transform: none !important;
        object-position: center !important;
    }

    .navbar .nav-logo .logo-text,
    .ys-home-page .logo-text {
        font-size: 1.35rem !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }

    .main-content,
    .ys-home-page .main-content,
    body:not(.ys-home-page) .main-content {
        padding-top: 78px !important;
    }

    /* Desktop search can stay, but shrink so it doesn't collide */
    .ys-desktop-search {
        left: 42% !important;
        width: min(360px, 38vw) !important;
        bottom: 12px !important;
    }
    .ys-desktop-brand-links {
        display: none !important;
    }
}

/* Very small phones — logo-text only; mascot size controlled by MASCOT MOBILE block */
@media (max-width: 380px) {
    .nav-logo .logo-text,
    .ys-home-page .logo-text,
    .navbar .nav-logo .logo-text {
        font-size: .92rem !important;
        max-width: 36vw !important;
    }
}


/* ================================================================
   YUMESEKAI V1.31 — COMPACT DESKTOP NAVBAR
   Reduce oversized 145px header to 96px so content is less crowded.
   Mascot scales down to fit the shorter bar.
   ================================================================ */
@media (min-width: 1025px) {
    .navbar,
    .ys-home-page .navbar,
    .navbar.has-custom-navbar-bg,
    body.ys-anime-page .navbar.has-custom-navbar-bg {
        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;
    }

    .navbar .nav-container,
    .ys-home-page .nav-container {
        height: 96px !important;
        min-height: 96px !important;
        align-items: center !important;
    }

    .navbar .nav-logo,
    .ys-home-page .nav-logo {
        height: 96px !important;
        min-height: 96px !important;
        min-width: 260px !important;
        padding-top: 0 !important;
        align-items: center !important;
    }

    .navbar .logo-mascot,
    .ys-home-page .logo-mascot {
        width: 150px !important;
        height: 96px !important;
        max-height: 96px !important;
        margin-left: -24px !important;
        margin-top: 0 !important;
        transform: none !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }

    .navbar .nav-logo .logo-text,
    .ys-home-page .logo-text {
        font-size: 1.65rem !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        line-height: 1 !important;
    }

    /* Content starts below the shorter bar */
    .main-content,
    .ys-home-page .main-content,
    body:not(.ys-home-page) .main-content {
        padding-top: 96px !important;
        min-height: calc(100vh - 96px) !important;
    }

    /* Sticky sidebars track the new header height */
    body.ys-anime-page .ys-inner-sidebar,
    body.ys-genre-page .ys-inner-sidebar,
    body.ys-ln-page .ys-inner-sidebar,
    body.ys-manga-page .ys-inner-sidebar,
    body.ys-search-page .ys-inner-sidebar,
    body.ys-forum-page .ys-inner-sidebar,
    body.ys-activity-page .ys-inner-sidebar,
    body.ys-favorites-page .ys-favorites-sidebar {
        top: 96px !important;
        height: calc(100vh - 96px) !important;
        min-height: calc(100vh - 96px) !important;
    }

    body.ys-anime-page .ys-library-shell,
    body.ys-genre-page .ys-library-shell,
    body.ys-ln-page .ys-library-shell,
    body.ys-manga-page .ys-library-shell,
    body.ys-search-page .ys-search-shell,
    body.ys-activity-page .ys-activity-shell,
    body.ys-favorites-page .ys-favorites-profile-section {
        min-height: calc(100vh - 96px) !important;
    }

    /* Reposition desktop search + brand links for 96px bar */
    .ys-desktop-search {
        bottom: 10px !important;
    }
    .ys-desktop-brand-links {
        top: 18px !important;
    }
    .ys-desktop-actions {
        top: 22px !important;
    }
}


/* ================================================================
   YUMESEKAI V1.32 — MASCOT FORCE OVERRIDE
   Highest priority control for navbar mascot size & position.
   Edit ONLY this block to change mascot on desktop.
   ================================================================ */
@media (min-width: 1025px) {
    /* Navbar height — all pages including anime */
    body .navbar,
    body.ys-home-page .navbar,
    body.ys-anime-page .navbar,
    body.ys-anime-page .navbar.has-custom-navbar-bg,
    body .navbar.has-custom-navbar-bg {
        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;
    }

    body .navbar .nav-container,
    body.ys-home-page .nav-container,
    body.ys-anime-page .nav-container {
        height: 96px !important;
        min-height: 96px !important;
        align-items: center !important;
    }

    body .navbar .nav-logo,
    body.ys-home-page .nav-logo,
    body.ys-anime-page .nav-logo {
        height: 96px !important;
        min-height: 96px !important;
        min-width: 260px !important;
        padding-top: 0 !important;
        align-items: center !important;
    }

    /* Mascot — all pages */
    body .navbar .logo-mascot,
    body.ys-home-page .navbar .logo-mascot,
    body.ys-home-page .logo-mascot,
    body.ys-anime-page .navbar .logo-mascot,
    body.ys-anime-page .logo-mascot,
    body .logo-mascot {
        width: 250px !important;
        height: 164px !important;
        max-width: 300px !important;
        max-height: 196px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin-left: -50px !important;
        margin-right: 4px !important;
        margin-top: -25.5px !important;
        margin-bottom: 0 !important;
        transform: none !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        flex: 0 0 auto !important;
    }

    /* Text — all pages */
    body .navbar .nav-logo .logo-text,
    body.ys-home-page .navbar .nav-logo .logo-text,
    body.ys-home-page .logo-text,
    body.ys-anime-page .navbar .nav-logo .logo-text,
    body.ys-anime-page .logo-text {
        font-size: 1.55rem !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        line-height: 1 !important;
    }

    /* Content offset */
    body .main-content,
    body.ys-home-page .main-content,
    body.ys-anime-page .main-content,
    body:not(.ys-home-page) .main-content {
        padding-top: 96px !important;
    }
}


/* ================================================================
   YUMESEKAI V1.33 — ANIME LIBRARY SYNC
   Make anime.php match Genre / Light Novel / Komik library layout:
   same shell, heading, kicker, grid rhythm. Overrides old v1.11
   anime-only styles that made the page look different.
   ================================================================ */

/* Shell — same as genre / ln / manga */
body.ys-anime-page .ys-library-shell {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 14px;
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 24px 24px 48px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: visible;
}
body.ys-anime-page .ys-inner-sidebar {
    display: block;
    position: sticky;
    top: 96px;
    height: calc(100vh - 96px);
    min-height: calc(100vh - 96px);
    align-self: start;
    box-sizing: border-box;
    overflow: visible;
}
body.ys-anime-page .ys-library-content {
    min-width: 0;
    min-height: 0;
    position: relative;
    z-index: 2;
    visibility: visible;
    opacity: 1;
    overflow: visible;
}

/* Kill old v1.11 anime page padding/background that desynced the look */
body.ys-anime-page .ys-anime-page,
body.ys-anime-page .ys-anime-library-page,
body.ys-anime-page .section.ys-anime-library-page {
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 0 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Heading — match .ys-manga-heading / .ys-ln-heading / .ys-genre-heading */
body.ys-anime-page .ys-anime-page-heading,
body.ys-anime-page .ys-anime-heading {
    display: block !important;
    padding: 8px 2px 22px !important;
    border-bottom: 1px solid rgba(139, 85, 255, .18) !important;
    margin: 0 0 18px !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}
body.ys-anime-page .ys-anime-kicker,
body.ys-anime-page .ys-page-kicker {
    display: block !important;
    margin-bottom: 7px !important;
    color: #a66cff !important;
    font-size: .67rem !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
}
body.ys-anime-page .ys-anime-page-heading h1,
body.ys-anime-page .ys-anime-heading h1 {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #f5f1ff !important;
    font-size: 2rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
}
body.ys-anime-page .ys-anime-page-heading h1 span,
body.ys-anime-page .ys-anime-heading h1 span {
    color: #a75bff !important;
    font-size: 1.25rem !important;
    margin-right: 0 !important;
}
body.ys-anime-page .ys-anime-page-heading p,
body.ys-anime-page .ys-anime-heading p {
    margin: 9px 0 0 !important;
    color: #8589a2 !important;
    font-size: .82rem !important;
}

/* Hide old anime-only stats/search chrome if it looks out of place */
body.ys-anime-page .ys-anime-stats,
body.ys-anime-page .ys-anime-search-btn {
    /* keep if present in markup, but tone to match library density */
}

/* Toolbar / filters — match manga filter chips */
body.ys-anime-page .ys-anime-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
    align-items: center !important;
}
body.ys-anime-page .ys-anime-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
body.ys-anime-page .ys-anime-filter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(120, 91, 190, .28) !important;
    border-radius: 8px !important;
    background: rgba(16, 15, 31, .8) !important;
    color: #aeb0c4 !important;
    text-decoration: none !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    transition: .2s ease !important;
}
body.ys-anime-page .ys-anime-filter:hover {
    color: #f2effb !important;
    border-color: rgba(164, 93, 255, .62) !important;
    transform: translateY(-1px) !important;
}
body.ys-anime-page .ys-anime-filter.active,
body.ys-anime-page .ys-anime-filter.is-active {
    color: #fff !important;
    border-color: rgba(157, 92, 255, .9) !important;
    background: linear-gradient(135deg, #7d42e9, #9d52ff) !important;
    box-shadow: 0 7px 18px rgba(126, 66, 233, .2) !important;
}

/* Grid — same density as other libraries (match ys-anime-grid / manga size) */
body.ys-anime-page .anime-grid,
body.ys-anime-page .ys-anime-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
    gap: 15px !important;
    margin-top: 0 !important;
}
body.ys-anime-page .anime-grid .anime-card,
body.ys-anime-page .ys-anime-grid .anime-card {
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

body.ys-anime-page .ys-side-mascot {
    margin-top: 24px !important;
}

@media (min-width: 1500px) {
    body.ys-anime-page .ys-library-shell {
        padding-left: 30px;
        padding-right: 30px;
    }
    body.ys-anime-page .anime-grid,
    body.ys-anime-page .ys-anime-grid {
        grid-template-columns: repeat(auto-fill, minmax(174px, 1fr)) !important;
        gap: 17px !important;
    }
}

@media (max-width: 900px) {
    body.ys-anime-page .ys-library-shell {
        display: block !important;
        padding: 20px 16px 40px !important;
        width: 100% !important;
    }
    body.ys-anime-page .ys-inner-sidebar {
        display: none !important;
    }
    body.ys-anime-page .ys-anime-library-page {
        padding-top: 4px !important;
    }
    body.ys-anime-page .ys-anime-page-heading h1,
    body.ys-anime-page .ys-anime-heading h1 {
        font-size: 1.55rem !important;
    }
    body.ys-anime-page .anime-grid,
    body.ys-anime-page .ys-anime-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
}


/* ================================================================
   YUMESEKAI V1.33 — MOBILE / NAVBAR / ANIME SYNC
   Unifies remaining conflicts between layered version rules so
   phones (≤768px) share one compact shell across all pages.
   ================================================================ */

/* --- Phone shell: force one navbar height + content offset --- */
@media (max-width: 768px) {
    /* Navbar height locked for every page class */
    .navbar,
    .ys-home-page .navbar,
    .navbar.has-custom-navbar-bg,
    body.ys-anime-page .navbar,
    body.ys-anime-page .navbar.has-custom-navbar-bg,
    body.ys-manga-page .navbar,
    body.ys-genre-page .navbar,
    body.ys-ln-page .navbar,
    body.ys-search-page .navbar,
    body.ys-forum-page .navbar,
    body.ys-activity-page .navbar,
    body.ys-favorites-page .navbar,
    body.ys-profile-page .navbar {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }

    .nav-container,
    .ys-home-page .nav-container,
    body.ys-anime-page .nav-container {
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 10px !important;
        align-items: center !important;
    }

    /* Content offset matches 64px bar */
    .main-content,
    .ys-home-page .main-content,
    body.ys-anime-page .main-content,
    body.ys-manga-page .main-content,
    body.ys-genre-page .main-content,
    body.ys-ln-page .main-content,
    body:not(.ys-home-page) .main-content {
        padding-top: 64px !important;
        min-height: calc(100vh - 64px) !important;
    }

    /* Room for fixed bottom quick-nav */
    body {
        padding-bottom: 70px !important;
    }

    /* Drawer must be visible on ALL pages when .open (including anime) */
    body.ys-anime-page .nav-links,
    body.ys-manga-page .nav-links,
    body.ys-genre-page .nav-links,
    body.ys-ln-page .nav-links,
    body.ys-home-page .nav-links,
    .nav-links {
        display: flex !important;
    }

    /* Hamburger + right cluster always available on phone */
    .hamburger,
    body.ys-anime-page .hamburger,
    body.ys-manga-page .hamburger,
    body.ys-genre-page .hamburger,
    body.ys-ln-page .hamburger,
    body.ys-home-page .hamburger {
        display: flex !important;
    }

    .nav-right-mobile,
    body.ys-anime-page .nav-right-mobile,
    body.ys-manga-page .nav-right-mobile,
    body.ys-home-page .nav-right-mobile {
        display: flex !important;
        position: static !important;
        margin-left: auto !important;
    }

    .nav-notif-mobile,
    body.ys-anime-page .nav-notif-mobile {
        display: grid !important;
    }

    /* Hide desktop-only chrome everywhere on phone */
    .ys-desktop-brand-links,
    .ys-desktop-search,
    .ys-desktop-actions {
        display: none !important;
    }

    /* Sidebars are desktop-only */
    .ys-sidebar,
    .ys-inner-sidebar,
    body.ys-anime-page .ys-inner-sidebar,
    body.ys-manga-page .ys-inner-sidebar,
    body.ys-genre-page .ys-inner-sidebar,
    body.ys-ln-page .ys-inner-sidebar,
    body.ys-favorites-page .ys-favorites-sidebar {
        display: none !important;
    }

    /* Library shells: full-width single column, consistent padding */
    .ys-home-shell,
    body.ys-anime-page .ys-library-shell,
    body.ys-manga-page .ys-library-shell,
    body.ys-genre-page .ys-library-shell,
    body.ys-ln-page .ys-library-shell,
    body.ys-search-page .ys-search-shell,
    body.ys-forum-page .ys-forum-shell,
    body.ys-activity-page .ys-activity-shell,
    body.ys-favorites-page .ys-favorites-profile-section {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 12px 10px 28px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        grid-template-columns: none !important;
    }

    /* Unified card grid density on phone (2 columns) */
    .anime-grid,
    .ys-anime-grid,
    .ys-manga-grid,
    .ys-ln-grid,
    body.ys-anime-page .anime-grid,
    body.ys-anime-page .ys-anime-grid,
    body.ys-manga-page .anime-grid,
    body.ys-manga-page .ys-manga-grid,
    body.ys-ln-page .anime-grid,
    body.ys-genre-page .anime-grid,
    body.ys-favorites-page .anime-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .anime-grid .anime-card,
    .ys-anime-grid .anime-card,
    .ys-manga-grid .anime-card,
    body.ys-anime-page .anime-grid .anime-card,
    body.ys-anime-page .ys-anime-grid .anime-card,
    body.ys-manga-page .anime-grid .anime-card {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Home carousel cards stay horizontal-scroll, consistent size */
    .ys-home-content .anime-card,
    .carousel .anime-card {
        flex: 0 0 122px !important;
        width: 122px !important;
        max-width: 122px !important;
    }

    /* Bottom nav always above content */
    .ys-mobile-bottom-nav {
        display: grid !important;
        z-index: 1080 !important;
    }

    /* Kill horizontal overflow from large desktop mascot / absolute elements */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* Very small phones: slightly tighter cards */
@media (max-width: 380px) {
    .ys-home-content .anime-card,
    .carousel .anime-card {
        flex: 0 0 108px !important;
        width: 108px !important;
        max-width: 108px !important;
    }
    .anime-card-title {
        font-size: 0.68rem !important;
    }
}


/* ================================================================
   YUMESEKAI V1.34 — MOBILE PERFORMANCE + UI CLEANUP
   Reduces GPU-heavy effects that cause lag on phones, removes
   Social Bar collision with bottom nav, softens page transitions.
   ================================================================ */

@media (max-width: 768px) {
    /* Kill expensive blur on chrome — major mobile lag source */
    .navbar,
    .ys-home-page .navbar,
    .navbar.has-custom-navbar-bg {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .ys-mobile-bottom-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(10, 10, 24, 0.97) !important;
    }
    .ys-mobile-drawer-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.55) !important;
    }
    .nav-links,
    body:not(.ys-home-page) .nav-links,
    .ys-home-page .nav-links {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Faster page leave — less black-screen feel on slow phones */
    body.page-leaving {
        transition: opacity 0.08s linear !important;
    }

    /* Skip staggered card entrance (looks laggy when scrolling fast) */
    .anime-grid .anime-card,
    .carousel .anime-card,
    .ys-anime-grid .anime-card,
    .ys-manga-grid .anime-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
    .anime-grid .anime-card.is-visible,
    .carousel .anime-card.is-visible {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Lighter cover image reveal (no heavy blur-up on GPU) */
    .anime-card-cover img {
        filter: none !important;
        transform: none !important;
        transition: opacity 0.2s ease !important;
    }
    .anime-card-cover img.is-loaded {
        filter: none !important;
        transform: none !important;
    }
    .anime-card:hover .anime-card-cover img.is-loaded {
        transform: none !important;
    }
    .lazy-shimmer {
        animation: none !important;
        background-image: none !important;
        background-color: #12121e !important;
    }

    /* Social bar (if real ad code exists) sits ABOVE bottom nav */
    .ys-ad-socialbar,
    .ys-ad-placeholder.ys-ad-socialbar {
        bottom: 72px !important;
        right: 10px !important;
        z-index: 1070 !important;
        max-width: 40vw !important;
    }

    /* Footer needs extra space so last cards aren't under bottom nav */
    .footer {
        padding-bottom: 80px !important;
    }
}

/* Prefer reduced motion: strip remaining transitions globally */
@media (prefers-reduced-motion: reduce) {
    .anime-card,
    .anime-card-cover img,
    .nav-links,
    .ys-mobile-bottom-nav,
    body.page-leaving {
        transition: none !important;
        animation: none !important;
    }
}


/* ================================================================
   YUMESEKAI V1.35 — NAVBAR UNITY + HOME HAMBURGER + ANIME PARITY
   1) Same purple navbar look on every page (not only Home)
   2) Home hamburger reliably clickable on mobile
   3) Anime library page matches Komik / Light Novel density
   ================================================================ */

/* --- Shared purple navbar chrome (all pages) --- */
.navbar,
.ys-home-page .navbar,
body.ys-anime-page .navbar,
body.ys-manga-page .navbar,
body.ys-genre-page .navbar,
body.ys-ln-page .navbar,
body.ys-search-page .navbar,
body.ys-forum-page .navbar,
body.ys-activity-page .navbar,
body.ys-favorites-page .navbar,
body.ys-profile-page .navbar {
    background:
        radial-gradient(circle at 18% 35%, rgba(102, 44, 190, .28), transparent 22rem),
        linear-gradient(180deg, #09051b 0%, #080817 75%, rgba(5, 7, 17, .98) 100%) !important;
    border-bottom: 1px solid rgba(139, 85, 255, .45) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .34) !important;
}

/* Mobile: keep compact 64px but same color language */
@media (max-width: 768px) {
    .navbar,
    .ys-home-page .navbar,
    body.ys-anime-page .navbar,
    body.ys-manga-page .navbar,
    body.ys-genre-page .navbar,
    body.ys-ln-page .navbar,
    body.ys-search-page .navbar,
    body.ys-forum-page .navbar,
    body.ys-activity-page .navbar,
    body.ys-favorites-page .navbar,
    body.ys-profile-page .navbar,
    .navbar.has-custom-navbar-bg,
    body.ys-anime-page .navbar.has-custom-navbar-bg {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        background:
            radial-gradient(circle at 12% 40%, rgba(102, 44, 190, .32), transparent 14rem),
            linear-gradient(180deg, #0c0820 0%, #080817 100%) !important;
        border-bottom: 1px solid rgba(139, 85, 255, .42) !important;
    }

    /* Home hamburger MUST receive taps */
    .ys-home-page .nav-right-mobile,
    .nav-right-mobile {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        z-index: 1200 !important;
        pointer-events: auto !important;
    }
    .ys-home-page .hamburger,
    .hamburger {
        display: flex !important;
        position: relative !important;
        z-index: 1201 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }
    /* Nothing on the logo strip may steal taps from the right cluster */
    .ys-home-page .nav-logo,
    .nav-logo {
        pointer-events: auto !important;
        max-width: calc(100% - 100px) !important;
    }
    .ys-home-page .logo-mascot,
    .logo-mascot {
        pointer-events: none !important;
    }
    /* Desktop-only chrome stays gone */
    .ys-desktop-brand-links,
    .ys-desktop-search,
    .ys-desktop-actions {
        display: none !important;
        pointer-events: none !important;
    }

    /* Drawer on Home uses same open class as other pages */
    .ys-home-page .nav-links {
        display: flex !important;
    }
    .ys-home-page .nav-links.open {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* --- Anime page: force identical library shell to manga/ln --- */
@media (max-width: 768px) {
    body.ys-anime-page .ys-anime-page-heading,
    body.ys-anime-page .ys-anime-heading,
    body.ys-manga-page .ys-manga-heading,
    body.ys-ln-page .ys-ln-heading {
        padding: 6px 2px 16px !important;
        margin-bottom: 14px !important;
        border-bottom: 1px solid rgba(139, 85, 255, .18) !important;
    }
    body.ys-anime-page .ys-anime-page-heading h1,
    body.ys-anime-page .ys-anime-heading h1,
    body.ys-manga-page .ys-manga-heading h1,
    body.ys-ln-page .ys-ln-heading h1 {
        font-size: 1.55rem !important;
        line-height: 1.15 !important;
        letter-spacing: -.03em !important;
    }
    body.ys-anime-page .ys-anime-page-heading p,
    body.ys-anime-page .ys-anime-heading p,
    body.ys-manga-page .ys-manga-heading p,
    body.ys-ln-page .ys-ln-heading p {
        font-size: .78rem !important;
        color: #8589a2 !important;
    }
    body.ys-anime-page .ys-anime-kicker,
    body.ys-manga-page .ys-manga-kicker,
    body.ys-ln-page .ys-ln-kicker {
        font-size: .64rem !important;
        letter-spacing: .16em !important;
        color: #a66cff !important;
    }

    /* Same 2-col card density */
    body.ys-anime-page .anime-grid,
    body.ys-anime-page .ys-anime-grid,
    body.ys-manga-page .anime-grid,
    body.ys-manga-page .ys-manga-grid,
    body.ys-ln-page .anime-grid,
    body.ys-ln-page .ys-ln-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    body.ys-anime-page .anime-card,
    body.ys-manga-page .anime-card,
    body.ys-ln-page .anime-card {
        border-radius: 8px !important;
    }
}


/* ================================================================
   YUMESEKAI V1.36 — ANIME = KOMIK PARITY (filters + edge padding)
   ================================================================ */

/* Anime type chips — mirror .ys-manga-filter exactly */
.ys-anime-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.ys-anime-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(120, 91, 190, .28);
    border-radius: 8px;
    background: rgba(16, 15, 31, .8);
    color: #aeb0c4;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 700;
    transition: .2s ease;
}
.ys-anime-filter:hover {
    color: #f2effb;
    border-color: rgba(164, 93, 255, .62);
    transform: translateY(-1px);
}
.ys-anime-filter.is-active,
.ys-anime-filter.active {
    color: #fff;
    border-color: rgba(157, 92, 255, .9);
    background: linear-gradient(135deg, #7d42e9, #9d52ff);
    box-shadow: 0 7px 18px rgba(126, 66, 233, .2);
}

/* Kill extra side padding that made Anime feel "inset" vs Komik */
@media (max-width: 900px) {
    body.ys-anime-page .ys-library-shell,
    body.ys-manga-page .ys-library-shell,
    body.ys-ln-page .ys-library-shell {
        padding: 12px 10px 28px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.ys-anime-page .ys-library-content,
    body.ys-manga-page .ys-library-content,
    body.ys-ln-page .ys-library-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.ys-anime-page .ys-anime-library-page,
    body.ys-anime-page .section.ys-anime-library-page,
    body.ys-manga-page .ys-manga-library-page,
    body.ys-ln-page .ys-ln-library-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 4px !important;
    }
    /* Old anime-only page padding */
    .ys-anime-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 560px) {
    .ys-anime-filter,
    .ys-manga-filter {
        min-height: 31px;
        padding: 0 11px;
        font-size: .7rem;
    }
    .ys-anime-toolbar,
    .ys-manga-toolbar {
        gap: 6px;
        margin-bottom: 14px;
    }
}


/* ================================================================
   YUMESEKAI FIX — hamburger all pages + horizontal anime filters
   + reliable mobile drawer (no lag / no page-specific hide)
   ================================================================ */

/* Anime type filters: always horizontal (match manga chips) */
.ys-anime-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}
.ys-anime-filter {
    display: inline-flex !important;
    flex: 0 0 auto !important;
}

@media (max-width: 560px) {
    /* Override the old column rule that stacked Semua / Anime / Movie */
    .ys-anime-toolbar {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
}

/* Mobile drawer: single consistent rule for EVERY page (including anime) */
@media (max-width: 768px) {
    /* Kill any leftover vertical-slide drawer (causes lag with translateX) */
    .nav-links {
        transform: translateX(-105%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: auto !important;
        width: min(310px, 86vw) !important;
        height: calc(100vh - 64px) !important;
        max-height: none !important;
        z-index: 1095 !important;
        transition: transform .22s ease, opacity .18s ease !important;
    }
    .nav-links.open,
    .ys-home-page .nav-links.open,
    body.ys-anime-page .nav-links.open,
    body.ys-manga-page .nav-links.open,
    body.ys-genre-page .nav-links.open,
    body.ys-ln-page .nav-links.open,
    body.ys-search-page .nav-links.open,
    body.ys-forum-page .nav-links.open,
    .nav-links.ys-nav-menu-home-open {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Hamburger always visible & tappable on all pages */
    .hamburger,
    body.ys-anime-page .hamburger,
    body.ys-manga-page .hamburger,
    body.ys-genre-page .hamburger,
    body.ys-ln-page .hamburger,
    body.ys-home-page .hamburger,
    body.ys-search-page .hamburger,
    body.ys-forum-page .hamburger {
        display: flex !important;
        pointer-events: auto !important;
        z-index: 1106 !important;
    }

    .nav-right-mobile {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        z-index: 1106 !important;
    }

    /* Never hide nav-links on mobile (desktop rules stay scoped to min-width) */
    body.ys-anime-page .nav-links,
    body.ys-manga-page .nav-links,
    body.ys-genre-page .nav-links,
    body.ys-ln-page .nav-links,
    body.ys-home-page .nav-links {
        display: flex !important;
    }
}

/* Hero banner: allow direct swipe / drag */
.ys-home-hero[data-hero-carousel] {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}
.ys-home-hero[data-hero-carousel]:active {
    cursor: grabbing;
}
/* Keep CTA clickable */
.ys-home-hero .ys-hero-btn {
    pointer-events: auto;
    cursor: pointer;
}


/* ================================================================
   YUMESEKAI FIX — card borders: blue → purple (site accent)
   Outer panel border was blue; dominant-color edge stays dynamic.
   Applies to anime / manga / light novel list cards + detail covers.
   ================================================================ */

/* --- List cards: outer panel (the "second" border) --- */
.anime-card {
    border-color: rgba(139, 85, 255, 0.55) !important;
    background: linear-gradient(180deg, rgba(14, 12, 28, 0.96) 0%, rgba(8, 8, 20, 0.98) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(90, 50, 180, 0.18),
        0 6px 20px rgba(20, 8, 50, 0.32),
        inset 0 1px 0 rgba(180, 140, 255, 0.06) !important;
}
.anime-card:hover {
    border-color: rgba(164, 93, 255, 0.92) !important;
    box-shadow:
        0 0 0 1px rgba(139, 85, 255, 0.35),
        0 10px 28px rgba(60, 20, 140, 0.38),
        0 0 18px rgba(124, 92, 252, 0.18) !important;
}

/* Blueprint v3 overrides that forced blue */
.anime-card {
    border: 1px solid rgba(139, 85, 255, 0.55) !important;
}
.anime-card:hover {
    border-color: rgba(164, 93, 255, 0.95) !important;
    box-shadow:
        0 0 0 1px rgba(139, 85, 255, 0.32),
        0 10px 25px rgba(40, 15, 90, 0.36),
        0 0 16px rgba(124, 92, 252, 0.14) !important;
}

/* --- List cards: inset cover edge (dominant color; purple fallback) --- */
.anime-card-cover {
    --cover-edge: rgba(139, 85, 255, 0.7);
    --cover-edge-soft: rgba(139, 85, 255, 0.35);
    --cover-edge-glow: rgba(124, 92, 252, 0.22);
}
.anime-card > .anime-card-cover,
.anime-card > a.anime-card-cover,
a.anime-card > .anime-card-cover {
    border: 1.5px solid var(--cover-edge, rgba(139, 85, 255, 0.75)) !important;
    background: #0c0a18 !important;
    transition: border-color 0.45s ease !important;
}
.anime-card-cover.has-cover-edge {
    border-color: var(--cover-edge) !important;
    box-shadow:
        0 0 0 1px var(--cover-edge-soft),
        0 6px 18px var(--cover-edge-glow) !important;
}
.anime-card:hover .anime-card-cover.has-cover-edge {
    box-shadow:
        0 0 0 1px var(--cover-edge),
        0 8px 24px var(--cover-edge-glow) !important;
}

/* Older base rules that still used blue */
.anime-card {
    /* keep size/layout from earlier rules; only color chrome above */
}
.anime-card-cover {
    border-bottom-color: rgba(139, 85, 255, 0.22) !important;
}

/* --- Detail covers: keep dominant edge, ensure purple fallback + frames --- */
.detail-cover-media {
    --cover-edge: rgba(139, 85, 255, 0.65);
    --cover-edge-soft: rgba(139, 85, 255, 0.35);
    --cover-edge-glow: rgba(124, 92, 252, 0.28);
}
.detail-cover-media .detail-cover-img,
.detail-cover-media img.detail-cover-img,
.detail-cover-media > img,
.detail-cover-media .detail-cover-video {
    border: 2px solid var(--cover-edge, rgba(139, 85, 255, 0.55)) !important;
}
.detail-cover-media .cover-frame-corners .cf {
    border-color: var(--cover-edge, #9b7fff) !important;
}
.detail-cover-media.has-cover-edge {
    filter: drop-shadow(0 4px 18px var(--cover-edge-glow, rgba(124, 92, 252, 0.28)));
}

/* Classic .detail-cover / .page-cover if still used without media wrapper */
.detail-cover,
.page-cover {
    border-color: var(--cover-edge, rgba(139, 85, 255, 0.45)) !important;
}
.manga-hero-cover,
.page-cover-wrap {
    --cover-edge: rgba(139, 85, 255, 0.65);
    --cover-edge-soft: rgba(139, 85, 255, 0.35);
    --cover-edge-glow: rgba(124, 92, 252, 0.28);
}

/* Light theme: outer card stays neutral/purple-tinted, not blue */
[data-theme="light"] .anime-card,
body.light .anime-card {
    border-color: rgba(108, 76, 224, 0.28) !important;
    box-shadow:
        0 0 0 1px rgba(108, 76, 224, 0.08),
        0 6px 18px rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .anime-card:hover,
body.light .anime-card:hover {
    border-color: rgba(108, 76, 224, 0.5) !important;
    box-shadow:
        0 4px 16px rgba(108, 76, 224, 0.14),
        0 8px 24px rgba(15, 23, 42, 0.08) !important;
}


/* ================================================================
   YUMESEKAI FIX — unify card borders desktop (PC) + mobile (HP)
   Same structure both:
     1) Outer panel = purple (site accent)
     2) Cover edge  = dominant color (or purple fallback)
   Detail: corner L-frames on PC and HP.
   ================================================================ */

/* Outer panel — identical purple on all viewports */
.anime-card,
.carousel .anime-card,
.anime-grid .anime-card,
.ys-anime-grid .anime-card,
.ys-manga-grid .anime-card,
.ys-home-content .anime-card {
    border: 1px solid rgba(139, 85, 255, 0.58) !important;
    background: linear-gradient(180deg, rgba(14, 12, 28, 0.97) 0%, rgba(8, 8, 20, 0.99) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(90, 50, 180, 0.16),
        0 6px 18px rgba(20, 8, 50, 0.3),
        inset 0 1px 0 rgba(180, 140, 255, 0.05) !important;
}
.anime-card:hover,
.carousel .anime-card:hover,
.anime-grid .anime-card:hover {
    border-color: rgba(164, 93, 255, 0.95) !important;
    box-shadow:
        0 0 0 1px rgba(139, 85, 255, 0.35),
        0 10px 26px rgba(50, 20, 120, 0.36),
        0 0 16px rgba(124, 92, 252, 0.16) !important;
}

/* Inset cover edge — same on PC & HP (dominant via JS, purple fallback) */
.anime-card > .anime-card-cover,
.anime-card > a.anime-card-cover,
a.anime-card > .anime-card-cover {
    margin: 8px 8px 0 !important;
    border: 1.5px solid var(--cover-edge, rgba(139, 85, 255, 0.72)) !important;
    border-radius: 2px !important;
    background: #0c0a18 !important;
    box-sizing: border-box !important;
}
.anime-card-cover {
    --cover-edge: rgba(139, 85, 255, 0.72);
    --cover-edge-soft: rgba(139, 85, 255, 0.35);
    --cover-edge-glow: rgba(124, 92, 252, 0.22);
}
.anime-card-cover.has-cover-edge {
    border-color: var(--cover-edge) !important;
    box-shadow:
        0 0 0 1px var(--cover-edge-soft),
        0 4px 14px var(--cover-edge-glow) !important;
}

/* Mobile: keep same double-border structure (don't collapse margin) */
@media (max-width: 768px) {
    .anime-card > .anime-card-cover,
    .anime-card > a.anime-card-cover,
    a.anime-card > .anime-card-cover {
        margin: 6px 6px 0 !important;
        border: 1.5px solid var(--cover-edge, rgba(139, 85, 255, 0.72)) !important;
    }
    .anime-card,
    .carousel .anime-card,
    .ys-home-content .anime-card {
        border: 1px solid rgba(139, 85, 255, 0.58) !important;
    }
}

/* Detail cover + corner frames — PC & HP */
.detail-cover-media {
    --cover-edge: rgba(139, 85, 255, 0.7);
    --cover-edge-soft: rgba(139, 85, 255, 0.38);
    --cover-edge-glow: rgba(124, 92, 252, 0.28);
}
.detail-cover-media .detail-cover-img,
.detail-cover-media img.detail-cover-img,
.detail-cover-media > img,
.detail-cover-media .detail-cover-video {
    border: 2px solid var(--cover-edge, rgba(139, 85, 255, 0.6)) !important;
}
.detail-cover-media .cover-frame-corners .cf {
    border-color: var(--cover-edge, #9b7fff) !important;
}

/* Corner frames visible on mobile detail too */
@media (max-width: 768px) {
    .detail-cover-media {
        padding: 8px !important;
        overflow: visible !important;
    }
    .detail-cover-media > .cover-frame-corners {
        display: block !important;
    }
    .detail-cover-media .cover-frame-corners .cf {
        width: 16px;
        height: 16px;
        border-width: 0;
        border-style: solid;
        border-color: var(--cover-edge, #9b7fff) !important;
    }
    .detail-cover-media .cover-frame-corners .cf-tl {
        border-top-width: 2.5px;
        border-left-width: 2.5px;
    }
    .detail-cover-media .cover-frame-corners .cf-tr {
        border-top-width: 2.5px;
        border-right-width: 2.5px;
    }
    .detail-cover-media .cover-frame-corners .cf-bl {
        border-bottom-width: 2.5px;
        border-left-width: 2.5px;
    }
    .detail-cover-media .cover-frame-corners .cf-br {
        border-bottom-width: 2.5px;
        border-right-width: 2.5px;
    }
    .manga-hero-cover,
    .page-cover-wrap {
        overflow: visible !important;
    }
}


/* ================================================================
   YUMESEKAI FIX — light mode full pass + list-card edge color
   Dark purple !important overrides above were crushing light theme.
   ================================================================ */

/* List covers: make dominant-color edge clearly visible when sampled */
.anime-card-cover.has-cover-edge,
.anime-card > .anime-card-cover.has-cover-edge,
.anime-card > a.anime-card-cover.has-cover-edge,
a.anime-card > .anime-card-cover.has-cover-edge {
    border-color: var(--cover-edge) !important;
    box-shadow:
        0 0 0 1px var(--cover-edge-soft, transparent),
        0 4px 14px var(--cover-edge-glow, transparent) !important;
}

/* ---------- LIGHT THEME (after all dark card overrides) ---------- */
[data-theme="light"] .anime-card,
[data-theme="light"] .carousel .anime-card,
[data-theme="light"] .anime-grid .anime-card,
[data-theme="light"] .ys-anime-grid .anime-card,
[data-theme="light"] .ys-manga-grid .anime-card,
[data-theme="light"] .ys-home-content .anime-card,
body.light .anime-card {
    background: #ffffff !important;
    border: 1px solid rgba(108, 76, 224, 0.22) !important;
    box-shadow:
        0 0 0 1px rgba(108, 76, 224, 0.06),
        0 4px 14px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .anime-card:hover,
body.light .anime-card:hover {
    border-color: rgba(108, 76, 224, 0.5) !important;
    box-shadow:
        0 0 0 1px rgba(108, 76, 224, 0.18),
        0 8px 22px rgba(108, 76, 224, 0.12) !important;
}

[data-theme="light"] .anime-card > .anime-card-cover,
[data-theme="light"] .anime-card > a.anime-card-cover,
[data-theme="light"] a.anime-card > .anime-card-cover,
body.light .anime-card > .anime-card-cover {
    background: #f0f0f6 !important;
    border: 1.5px solid var(--cover-edge, rgba(108, 76, 224, 0.35)) !important;
}
[data-theme="light"] .anime-card-cover {
    --cover-edge: rgba(108, 76, 224, 0.4);
    --cover-edge-soft: rgba(108, 76, 224, 0.2);
    --cover-edge-glow: rgba(108, 76, 224, 0.12);
}
[data-theme="light"] .anime-card-cover.has-cover-edge {
    border-color: var(--cover-edge) !important;
}

[data-theme="light"] .anime-card > .anime-card-body,
[data-theme="light"] a.anime-card > .anime-card-body,
body.light .anime-card > .anime-card-body {
    background: transparent !important;
}
[data-theme="light"] .anime-card-title,
[data-theme="light"] a.anime-card-title,
body.light .anime-card-title {
    color: #1a1a2e !important;
}
[data-theme="light"] .anime-card-title:hover,
body.light .anime-card-title:hover {
    color: #6c4ce0 !important;
}
[data-theme="light"] .anime-card-meta,
[data-theme="light"] .ys-card-meta,
[data-theme="light"] .ys-card-unit,
[data-theme="light"] .ys-card-status,
body.light .anime-card-meta {
    color: #5a5a72 !important;
}

/* Section titles / home chrome */
[data-theme="light"] .section-title,
[data-theme="light"] .ys-section-title,
[data-theme="light"] h2.section-title,
body.light .section-title {
    color: #1a1a2e !important;
}
[data-theme="light"] body,
body.light {
    background: var(--bg-primary, #f5f5fa) !important;
    color: var(--text-primary, #1a1a2e) !important;
}

/* Navbar / drawer / bottom nav */
[data-theme="light"] .navbar,
[data-theme="light"] .ys-home-page .navbar,
body.light .navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .nav-brand,
[data-theme="light"] .navbar .logo-text,
body.light .nav-brand {
    color: #1a1a2e !important;
}
[data-theme="light"] .ys-mobile-bottom-nav,
body.light .ys-mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.97) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .ys-mobile-bottom-nav a,
[data-theme="light"] .ys-mobile-bottom-nav span,
body.light .ys-mobile-bottom-nav a {
    color: #5a5a72 !important;
}
[data-theme="light"] .ys-mobile-bottom-nav a.active,
[data-theme="light"] .ys-mobile-bottom-nav a.is-active,
body.light .ys-mobile-bottom-nav a.active {
    color: #6c4ce0 !important;
}
[data-theme="light"] .ys-mobile-drawer,
[data-theme="light"] .nav-links,
body.light .ys-mobile-drawer {
    background: #ffffff !important;
    color: #1a1a2e !important;
}
[data-theme="light"] .ys-mobile-drawer a,
[data-theme="light"] .nav-links a,
body.light .ys-mobile-drawer a {
    color: #1a1a2e !important;
}
[data-theme="light"] .ys-mobile-drawer a:hover,
[data-theme="light"] .ys-mobile-drawer a.active,
body.light .ys-mobile-drawer a.active {
    background: rgba(108, 76, 224, 0.1) !important;
    color: #6c4ce0 !important;
}

/* Search input */
[data-theme="light"] .search-box input,
[data-theme="light"] .nav-search input,
[data-theme="light"] input[type="search"],
body.light .search-box input {
    background: #f0f0f6 !important;
    color: #1a1a2e !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}

/* Continue watching / recommendation cards meta */
[data-theme="light"] .continue-card,
[data-theme="light"] .cw-card,
body.light .continue-card {
    background: #ffffff !important;
    border-color: rgba(108, 76, 224, 0.18) !important;
}

/* Detail hero text on light (when overlay is light) */
[data-theme="light"] .detail-info h1,
[data-theme="light"] .detail-hero h1,
body.light .detail-info h1 {
    color: #1a1a2e !important;
}
[data-theme="light"] .detail-info .hero-alt,
[data-theme="light"] .hero-alt,
body.light .hero-alt {
    color: #5a5a72 !important;
}
[data-theme="light"] .detail-info > p,
[data-theme="light"] .synopsis,
body.light .detail-info > p {
    color: #3a3a50 !important;
}

/* Detail cover edge on light */
[data-theme="light"] .detail-cover-media {
    --cover-edge: rgba(108, 76, 224, 0.55);
    --cover-edge-soft: rgba(108, 76, 224, 0.28);
    --cover-edge-glow: rgba(108, 76, 224, 0.16);
}
[data-theme="light"] .detail-cover-media .detail-cover-img,
[data-theme="light"] .detail-cover-media > img,
[data-theme="light"] .detail-cover-media .detail-cover-video {
    border-color: var(--cover-edge, rgba(108, 76, 224, 0.45)) !important;
}
[data-theme="light"] .detail-cover-media .cover-frame-corners .cf {
    border-color: var(--cover-edge, #6c4ce0) !important;
}

/* Footer / misc */
[data-theme="light"] .footer,
body.light .footer {
    background: #ececf5 !important;
    color: #5a5a72 !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Carousel buttons */
[data-theme="light"] .carousel-btn,
body.light .carousel-btn {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #1a1a2e !important;
}

/* Welcome / sidebar cards on home */
[data-theme="light"] .ys-welcome-card,
[data-theme="light"] .home-side-card,
body.light .ys-welcome-card {
    background: #ffffff !important;
    border-color: rgba(108, 76, 224, 0.18) !important;
    color: #1a1a2e !important;
}

/* Filter chips / tabs */
[data-theme="light"] .filter-chip,
[data-theme="light"] .ys-filter-chip,
[data-theme="light"] .genre-chip,
body.light .filter-chip {
    background: #f0f0f6 !important;
    color: #3a3a50 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
[data-theme="light"] .filter-chip.active,
[data-theme="light"] .filter-chip.is-active,
body.light .filter-chip.active {
    background: rgba(108, 76, 224, 0.12) !important;
    color: #6c4ce0 !important;
    border-color: rgba(108, 76, 224, 0.35) !important;
}


/* ================================================================
   YUMESEKAI SYNC — light mode: sidebar + navbar + library pages
   Desktop & mobile. Fixes dark chrome on Anime/Genre/LN/Komik
   while content is light.
   ================================================================ */

/* --- Sidebar (home + internal) --- */
[data-theme="light"] .ys-sidebar,
[data-theme="light"] .ys-inner-sidebar,
body.light .ys-sidebar,
body.light .ys-inner-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f7f5fc 100%) !important;
    border-right: 1px solid rgba(108, 76, 224, 0.12) !important;
    box-shadow: none !important;
}
[data-theme="light"] .ys-side-nav a,
body.light .ys-side-nav a {
    color: #3a3a50 !important;
}
[data-theme="light"] .ys-side-nav a span,
[data-theme="light"] .ys-side-nav a b,
body.light .ys-side-nav a span {
    color: #6a6a80 !important;
}
[data-theme="light"] .ys-side-nav a:hover,
body.light .ys-side-nav a:hover {
    color: #6c4ce0 !important;
    background: rgba(108, 76, 224, 0.08) !important;
}
[data-theme="light"] .ys-side-nav a.is-active,
[data-theme="light"] .ys-side-nav a.active,
body.light .ys-side-nav a.is-active {
    color: #5a3cc8 !important;
    background: linear-gradient(90deg, rgba(108, 76, 224, 0.18), rgba(108, 76, 224, 0.06)) !important;
    box-shadow: inset 0 0 0 1px rgba(108, 76, 224, 0.2) !important;
}
[data-theme="light"] .ys-side-nav a.is-active span,
body.light .ys-side-nav a.is-active span {
    color: #6c4ce0 !important;
}
[data-theme="light"] .ys-side-divider,
body.light .ys-side-divider {
    background: linear-gradient(90deg, transparent, rgba(108, 76, 224, 0.25), transparent) !important;
}
[data-theme="light"] .ys-side-mascot,
body.light .ys-side-mascot {
    background: linear-gradient(180deg, #f3f0ff, #ebe6fa) !important;
    border: 1px solid rgba(108, 76, 224, 0.28) !important;
    box-shadow: 0 4px 16px rgba(108, 76, 224, 0.08) !important;
}
[data-theme="light"] .ys-side-mascot strong,
body.light .ys-side-mascot strong {
    color: #1a1a2e !important;
}
[data-theme="light"] .ys-side-mascot strong em,
body.light .ys-side-mascot strong em {
    color: #6c4ce0 !important;
}
[data-theme="light"] .ys-side-mascot p,
body.light .ys-side-mascot p {
    color: #5a5a72 !important;
}
[data-theme="light"] .ys-side-stars,
body.light .ys-side-stars {
    color: #9b7cff !important;
}

/* --- Navbar: all pages in light mode (override custom/dark backgrounds) --- */
[data-theme="light"] .navbar,
[data-theme="light"] .ys-home-page .navbar,
[data-theme="light"] .navbar.has-custom-navbar-bg,
[data-theme="light"] body:not(.ys-home-page) .navbar,
body.light .navbar,
body.light .navbar.has-custom-navbar-bg {
    background: rgba(255, 255, 255, 0.95) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: blur(12px) !important;
}
[data-theme="light"] .navbar.has-custom-navbar-bg::before,
body.light .navbar.has-custom-navbar-bg::before {
    opacity: 0 !important;
    background: none !important;
}
[data-theme="light"] .nav-logo,
[data-theme="light"] .logo-text,
[data-theme="light"] .navbar .logo-text,
body.light .logo-text {
    color: #1a1a2e !important;
    background: none !important;
    -webkit-text-fill-color: #1a1a2e !important;
}
[data-theme="light"] .ys-desktop-brand-links a,
body.light .ys-desktop-brand-links a {
    color: #5a5a72 !important;
}
[data-theme="light"] .ys-desktop-brand-links a:hover,
body.light .ys-desktop-brand-links a:hover {
    color: #6c4ce0 !important;
}
[data-theme="light"] .ys-desktop-search,
body.light .ys-desktop-search {
    background: #f0f0f6 !important;
    border-color: rgba(108, 76, 224, 0.25) !important;
    box-shadow: none !important;
}
[data-theme="light"] .ys-desktop-search input,
body.light .ys-desktop-search input {
    color: #1a1a2e !important;
}
[data-theme="light"] .ys-desktop-search input::placeholder,
body.light .ys-desktop-search input::placeholder {
    color: #8a8aa0 !important;
}
[data-theme="light"] .ys-search-icon,
[data-theme="light"] .ys-top-icon,
body.light .ys-top-icon {
    color: #3a3a50 !important;
}
[data-theme="light"] .ys-top-icon:hover,
body.light .ys-top-icon:hover {
    color: #6c4ce0 !important;
    background: rgba(108, 76, 224, 0.1) !important;
}
[data-theme="light"] .ys-top-login,
body.light .ys-top-login {
    color: #5a5a72 !important;
}
[data-theme="light"] .hamburger span,
[data-theme="light"] .hamburger,
body.light .hamburger span {
    background: #1a1a2e !important;
    color: #1a1a2e !important;
}

/* --- Library page headings (Anime / Genre / LN / Komik) --- */
[data-theme="light"] .ys-anime-heading h1,
[data-theme="light"] .ys-genre-heading h1,
[data-theme="light"] .ys-ln-heading h1,
[data-theme="light"] .ys-library-heading h1,
[data-theme="light"] .ys-anime-heading h1 span,
body.light .ys-anime-heading h1 {
    color: #1a1a2e !important;
}
[data-theme="light"] .ys-anime-heading p,
[data-theme="light"] .ys-genre-heading p,
[data-theme="light"] .ys-ln-heading p,
body.light .ys-anime-heading p {
    color: #5a5a72 !important;
}
[data-theme="light"] .ys-page-kicker,
body.light .ys-page-kicker {
    color: #6c4ce0 !important;
}
[data-theme="light"] .ys-anime-heading,
body.light .ys-anime-heading {
    border-bottom-color: rgba(108, 76, 224, 0.12) !important;
}

/* Filter chips already handled; reinforce on library */
[data-theme="light"] .ys-anime-toolbar .filter-chip,
[data-theme="light"] .ys-filter-bar .filter-chip,
[data-theme="light"] .ys-anime-filters button,
body.light .ys-anime-toolbar .filter-chip {
    background: #f0f0f6 !important;
    color: #3a3a50 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
[data-theme="light"] .ys-anime-toolbar .filter-chip.active,
[data-theme="light"] .ys-anime-toolbar .filter-chip.is-active,
body.light .ys-anime-toolbar .filter-chip.active {
    background: rgba(108, 76, 224, 0.14) !important;
    color: #5a3cc8 !important;
    border-color: rgba(108, 76, 224, 0.35) !important;
}

/* Library shell / content area */
[data-theme="light"] .ys-library-content,
[data-theme="light"] .ys-anime-page,
[data-theme="light"] .ys-genre-page,
[data-theme="light"] .ys-ln-page,
body.light .ys-library-content {
    background: transparent !important;
    color: #1a1a2e !important;
}

/* User dropdown / profile menu on light */
[data-theme="light"] .user-menu,
[data-theme="light"] .nav-dropdown,
[data-theme="light"] .profile-dropdown,
[data-theme="light"] .ys-user-dropdown,
body.light .user-menu {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12) !important;
    color: #1a1a2e !important;
}
[data-theme="light"] .user-menu a,
[data-theme="light"] .nav-dropdown a,
body.light .user-menu a {
    color: #1a1a2e !important;
}
[data-theme="light"] .user-menu a:hover,
body.light .user-menu a:hover {
    background: rgba(108, 76, 224, 0.08) !important;
    color: #6c4ce0 !important;
}

/* Watch page light polish */
[data-theme="light"] .watch-sidebar,
[data-theme="light"] .watch-rail,
body.light .watch-sidebar {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .watch-rail .anime-card-title,
body.light .watch-rail .anime-card-title {
    color: #1a1a2e !important;
}

/* Detail page buttons on light */
[data-theme="light"] .btn-outline,
[data-theme="light"] .detail-actions .btn,
body.light .btn-outline {
    border-color: rgba(108, 76, 224, 0.3) !important;
    color: #5a3cc8 !important;
    background: #fff !important;
}


/* Home page shell must not force dark bg in light mode */
[data-theme="light"] .ys-home-page,
[data-theme="light"] body.ys-home-page,
body.light.ys-home-page {
    background: var(--bg-primary, #f5f5fa) !important;
}

/* Manga library page uses same sidebar */
[data-theme="light"] body.ys-manga-page .ys-inner-sidebar,
[data-theme="light"] .ys-manga-page .ys-inner-sidebar,
body.light .ys-manga-page .ys-inner-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f7f5fc 100%) !important;
    border-right: 1px solid rgba(108, 76, 224, 0.12) !important;
}

/* Ensure main content text readable on library pages in light */
[data-theme="light"] .ys-library-content h1,
[data-theme="light"] .ys-library-content h2,
[data-theme="light"] .ys-library-content .section-title,
body.light .ys-library-content h1 {
    color: #1a1a2e !important;
}

/* Search kbd chip */
[data-theme="light"] .ys-desktop-search kbd,
body.light .ys-desktop-search kbd {
    color: #6a6a80 !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    background: rgba(15, 23, 42, 0.04) !important;
}

/* Mobile drawer already patched; reinforce hamburger bars for light on all pages */
[data-theme="light"] .hamburger,
body.light .hamburger {
    border-color: rgba(15, 23, 42, 0.15) !important;
}
[data-theme="light"] .hamburger span,
body.light .hamburger span {
    background-color: #1a1a2e !important;
}


/* ================================================================
   YUMESEKAI FIX — desktop hamburger works on Anime/Genre/LN/etc.
   Root causes:
   1) .ys-anime-page .nav-links { display:none !important } beats
      .ys-nav-menu-home-open { display:flex !important } (higher specificity)
   2) light-mode rule painted entire .hamburger button black
   ================================================================ */

/* Desktop: when hamburger opens the menu, ALWAYS show it (all pages) */
@media (min-width: 769px) {
    .nav-links.ys-nav-menu-home-open,
    body.ys-anime-page .nav-links.ys-nav-menu-home-open,
    body.ys-manga-page .nav-links.ys-nav-menu-home-open,
    body.ys-genre-page .nav-links.ys-nav-menu-home-open,
    body.ys-ln-page .nav-links.ys-nav-menu-home-open,
    body.ys-home-page .nav-links.ys-nav-menu-home-open,
    body.ys-search-page .nav-links.ys-nav-menu-home-open,
    body.ys-forum-page .nav-links.ys-nav-menu-home-open,
    .ys-anime-page .nav-links.ys-nav-menu-home-open,
    .ys-genre-page .nav-links.ys-nav-menu-home-open,
    .ys-ln-page .nav-links.ys-nav-menu-home-open,
    .ys-manga-page .nav-links.ys-nav-menu-home-open {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        right: 0 !important;
        top: 50px !important;
        width: 230px !important;
        gap: 2px !important;
        padding: 8px !important;
        z-index: 1200 !important;
        border: 1px solid rgba(139, 85, 255, 0.45) !important;
        border-radius: 11px !important;
        background: linear-gradient(180deg, #15112e, #090b1c) !important;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.48) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .nav-links.ys-nav-menu-home-open .nav-link,
    body.ys-anime-page .nav-links.ys-nav-menu-home-open .nav-link {
        display: flex !important;
        padding: 0.6rem 0.7rem !important;
        border-radius: 7px !important;
        color: #ddd9ef !important;
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }
    .nav-links.ys-nav-menu-home-open .nav-link:hover {
        background: rgba(139, 85, 255, 0.14) !important;
        color: #fff !important;
    }

    /* Hamburger always clickable on desktop */
    .hamburger,
    body.ys-anime-page .hamburger,
    body.ys-genre-page .hamburger,
    body.ys-ln-page .hamburger,
    body.ys-manga-page .hamburger,
    body.ys-home-page .hamburger,
    .nav-right-mobile .hamburger {
        display: flex !important;
        position: relative !important;
        z-index: 1300 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
        padding: 8px !important;
        min-width: 36px;
        min-height: 36px;
        align-items: center;
        justify-content: center;
    }
    .hamburger span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: var(--text-primary, #e8e6f0) !important;
    }
}

/* Light mode: only the bars are dark — NOT the whole button */
[data-theme="light"] .hamburger,
body.light .hamburger {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 8px !important;
}
[data-theme="light"] .hamburger span,
body.light .hamburger span {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
}

/* Light mode desktop dropdown menu */
[data-theme="light"] .nav-links.ys-nav-menu-home-open,
[data-theme="light"] body.ys-anime-page .nav-links.ys-nav-menu-home-open,
body.light .nav-links.ys-nav-menu-home-open {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
}
[data-theme="light"] .nav-links.ys-nav-menu-home-open .nav-link,
body.light .nav-links.ys-nav-menu-home-open .nav-link {
    color: #1a1a2e !important;
}
[data-theme="light"] .nav-links.ys-nav-menu-home-open .nav-link:hover,
body.light .nav-links.ys-nav-menu-home-open .nav-link:hover {
    background: rgba(108, 76, 224, 0.1) !important;
    color: #6c4ce0 !important;
}

/* Genre cards — readable in light mode (soft dark cards ok, ensure contrast) */
[data-theme="light"] .ys-genre-card,
body.light .ys-genre-card {
    background: linear-gradient(145deg, #2a2150, #1a1435) !important;
    border: 1px solid rgba(139, 85, 255, 0.25) !important;
}


/* ================================================================
   YUMESEKAI — light dropdown + genre cards (desktop/tablet/mobile)
   ================================================================ */

/* --- Hamburger dropdown: force light on ALL pages including Home --- */
[data-theme="light"] .ys-nav-menu-home-open,
[data-theme="light"] .nav-links.ys-nav-menu-home-open,
[data-theme="light"] .ys-home-page .ys-nav-menu-home-open,
[data-theme="light"] .ys-home-page .nav-links.ys-nav-menu-home-open,
[data-theme="light"] body.ys-home-page .nav-links.ys-nav-menu-home-open,
[data-theme="light"] body.ys-anime-page .nav-links.ys-nav-menu-home-open,
[data-theme="light"] body.ys-genre-page .nav-links.ys-nav-menu-home-open,
[data-theme="light"] body.ys-ln-page .nav-links.ys-nav-menu-home-open,
[data-theme="light"] body.ys-manga-page .nav-links.ys-nav-menu-home-open,
body.light .ys-nav-menu-home-open,
body.light .nav-links.ys-nav-menu-home-open,
body.light.ys-home-page .nav-links.ys-nav-menu-home-open {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12) !important;
    color: #1a1a2e !important;
}

[data-theme="light"] .ys-nav-menu-home-open .nav-link,
[data-theme="light"] .nav-links.ys-nav-menu-home-open .nav-link,
[data-theme="light"] .ys-home-page .ys-nav-menu-home-open .nav-link,
[data-theme="light"] .ys-home-page .nav-links.ys-nav-menu-home-open .nav-link,
[data-theme="light"] body.ys-home-page .nav-links.ys-nav-menu-home-open .nav-link,
body.light .ys-nav-menu-home-open .nav-link,
body.light .nav-links.ys-nav-menu-home-open .nav-link {
    color: #1a1a2e !important;
    background: transparent !important;
}

[data-theme="light"] .ys-nav-menu-home-open .nav-link:hover,
[data-theme="light"] .nav-links.ys-nav-menu-home-open .nav-link:hover,
[data-theme="light"] .ys-home-page .ys-nav-menu-home-open .nav-link:hover,
[data-theme="light"] .ys-home-page .nav-links.ys-nav-menu-home-open .nav-link:hover,
body.light .ys-nav-menu-home-open .nav-link:hover {
    background: rgba(108, 76, 224, 0.1) !important;
    color: #6c4ce0 !important;
}

[data-theme="light"] .ys-nav-menu-home-open .theme-toggle,
[data-theme="light"] .nav-links.ys-nav-menu-home-open .theme-toggle,
body.light .ys-nav-menu-home-open .theme-toggle {
    color: #1a1a2e !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    background: #f5f5fa !important;
}

/* Mobile drawer also light when theme is light */
[data-theme="light"] .nav-links.open,
[data-theme="light"] body.ys-mobile-drawer-open .nav-links,
[data-theme="light"] .ys-home-page .nav-links.open,
body.light .nav-links.open {
    background: #ffffff !important;
    background-image: none !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #1a1a2e !important;
}
[data-theme="light"] .nav-links.open .nav-link,
[data-theme="light"] .nav-links.open a,
body.light .nav-links.open .nav-link {
    color: #1a1a2e !important;
}
[data-theme="light"] .nav-links.open .nav-link:hover,
body.light .nav-links.open .nav-link:hover {
    background: rgba(108, 76, 224, 0.08) !important;
    color: #6c4ce0 !important;
}
[data-theme="light"] .ys-mobile-drawer-backdrop.is-open,
body.light .ys-mobile-drawer-backdrop.is-open {
    background: rgba(15, 23, 42, 0.35) !important;
}

/* --- Genre cards: light-friendly purple soft cards --- */
[data-theme="light"] .ys-genre-card,
body.light .ys-genre-card {
    background:
        radial-gradient(circle at 90% 10%, rgba(139, 85, 255, 0.12), transparent 45%),
        linear-gradient(145deg, #ffffff, #f3f0ff) !important;
    border: 1px solid rgba(108, 76, 224, 0.18) !important;
    color: #1a1a2e !important;
    box-shadow: 0 4px 14px rgba(108, 76, 224, 0.06) !important;
}
[data-theme="light"] .ys-genre-card:hover,
body.light .ys-genre-card:hover {
    background:
        radial-gradient(circle at 90% 10%, rgba(139, 85, 255, 0.2), transparent 48%),
        linear-gradient(145deg, #faf8ff, #ebe4ff) !important;
    border-color: rgba(108, 76, 224, 0.4) !important;
    box-shadow: 0 8px 22px rgba(108, 76, 224, 0.12) !important;
    transform: translateY(-3px);
}
[data-theme="light"] .ys-genre-card-name,
body.light .ys-genre-card-name {
    color: #1a1a2e !important;
}
[data-theme="light"] .ys-genre-card-count,
body.light .ys-genre-card-count {
    color: #6a6a80 !important;
}
[data-theme="light"] .ys-genre-card-icon,
body.light .ys-genre-card-icon {
    color: #8b55ff !important;
}
[data-theme="light"] .ys-genre-card-arrow,
body.light .ys-genre-card-arrow {
    color: #8a8aa0 !important;
}
[data-theme="light"] .ys-genre-card:hover .ys-genre-card-arrow,
body.light .ys-genre-card:hover .ys-genre-card-arrow {
    color: #6c4ce0 !important;
}

/* Genre heading in light mode */
[data-theme="light"] .ys-genre-heading h1,
body.light .ys-genre-heading h1 {
    color: #1a1a2e !important;
}
[data-theme="light"] .ys-genre-heading p,
body.light .ys-genre-heading p {
    color: #5a5a72 !important;
}
[data-theme="light"] .ys-genre-kicker,
body.light .ys-genre-kicker {
    color: #6c4ce0 !important;
}
[data-theme="light"] .ys-genre-heading,
body.light .ys-genre-heading {
    border-bottom-color: rgba(108, 76, 224, 0.12) !important;
}

/* Tablet (769–1024): same light dropdown + genre treatment */
@media (min-width: 769px) and (max-width: 1024px) {
    [data-theme="light"] .nav-links.ys-nav-menu-home-open,
    [data-theme="light"] .ys-home-page .nav-links.ys-nav-menu-home-open,
    body.light .nav-links.ys-nav-menu-home-open {
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.1) !important;
    }
    [data-theme="light"] .ys-genre-card,
    body.light .ys-genre-card {
        background: linear-gradient(145deg, #ffffff, #f3f0ff) !important;
        border-color: rgba(108, 76, 224, 0.18) !important;
        color: #1a1a2e !important;
    }
}

/* Mobile genre grid denser */
@media (max-width: 768px) {
    [data-theme="light"] .ys-genre-card,
    body.light .ys-genre-card {
        background: linear-gradient(145deg, #ffffff, #f5f2ff) !important;
        border: 1px solid rgba(108, 76, 224, 0.16) !important;
        color: #1a1a2e !important;
        min-height: 88px;
    }
    [data-theme="light"] .ys-genre-card-name,
    body.light .ys-genre-card-name {
        color: #1a1a2e !important;
        font-size: 0.85rem !important;
    }
}


/* ================================================================
   Explore by Genre — tablet + mobile (match desktop chip grid)
   ================================================================ */

/* Tablet: 4 columns, same chip style as desktop */
@media (min-width: 769px) and (max-width: 1200px) {
    .ys-home-content .genre-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 2px 2px 4px !important;
    }
    .ys-home-content .genre-chip {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 36px !important;
        padding: .42rem .5rem !important;
        border-radius: 8px !important;
        border: 1px solid rgba(91, 96, 160, 0.34) !important;
        background: linear-gradient(180deg, rgba(25, 28, 58, 0.78), rgba(11, 14, 31, 0.9)) !important;
        color: #bfc4dc !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ys-home-content .genre-chip:hover {
        border-color: rgba(143, 104, 255, 0.7) !important;
        background: linear-gradient(180deg, rgba(77, 48, 142, 0.45), rgba(25, 20, 57, 0.92)) !important;
        color: #f2edff !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(62, 38, 137, 0.22);
    }
}

/* Mobile / HP: 3 columns (2 on very small) */
@media (max-width: 768px) {
    .ys-home-content .section .section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px;
        margin-bottom: 10px !important;
        padding: 0 2px !important;
    }
    .ys-home-content .genre-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 0 2px 6px !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .ys-home-content .genre-chip {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        padding: 0.4rem 0.35rem !important;
        border-radius: 8px !important;
        border: 1px solid rgba(91, 96, 160, 0.34) !important;
        background: linear-gradient(180deg, rgba(25, 28, 58, 0.85), rgba(11, 14, 31, 0.95)) !important;
        color: #c8cce0 !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ys-home-content .genre-chip:hover,
    .ys-home-content .genre-chip:active {
        border-color: rgba(143, 104, 255, 0.65) !important;
        background: linear-gradient(180deg, rgba(77, 48, 142, 0.5), rgba(25, 20, 57, 0.95)) !important;
        color: #f2edff !important;
    }
}

@media (max-width: 380px) {
    .ys-home-content .genre-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .ys-home-content .genre-chip {
        min-height: 36px !important;
        font-size: 0.65rem !important;
    }
}

/* Light mode chips on home (all breakpoints) */
[data-theme="light"] .ys-home-content .genre-chip,
body.light .ys-home-content .genre-chip {
    background: linear-gradient(180deg, #ffffff, #f3f0ff) !important;
    border: 1px solid rgba(108, 76, 224, 0.2) !important;
    color: #1a1a2e !important;
}
[data-theme="light"] .ys-home-content .genre-chip:hover,
[data-theme="light"] .ys-home-content .genre-chip:active,
body.light .ys-home-content .genre-chip:hover {
    background: linear-gradient(180deg, #f5f0ff, #ebe4ff) !important;
    border-color: rgba(108, 76, 224, 0.45) !important;
    color: #6c4ce0 !important;
    box-shadow: 0 4px 12px rgba(108, 76, 224, 0.12);
}


/* ================================================================
   Home hero: hide mascot + decorative moon/orbs
   ================================================================ */
.ys-home-hero .ys-hero-art,
.ys-home-page .ys-hero-art,
.ys-hero-art {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.ys-home-hero .ys-hero-moon,
.ys-home-page .ys-hero-moon,
.ys-hero-moon {
    display: none !important;
    visibility: hidden !important;
}

/* Give copy more room now that art is gone */
.ys-home-hero .ys-hero-copy,
.ys-home-page .ys-hero-copy {
    max-width: min(640px, 92%) !important;
}
@media (max-width: 768px) {
    .ys-home-hero .ys-hero-copy,
    .ys-home-page .ys-hero-copy {
        max-width: 100% !important;
        padding-right: 16px !important;
    }
}

/* Also hide the soft purple glow orb behind the mascot area */
.ys-home-hero .ys-hero-glow,
.ys-home-page .ys-hero-glow,
.ys-hero-glow {
    display: none !important;
}


/* ================================================================
   MASCOT MOBILE — single source of truth
   Edit ONLY this block to change mascot size/position on phones.
   Covers: Home, Search, list pages, Profile, PLUS:
     - body.watch-page          (halaman video / tonton anime)
     - body (tanpa class page)  (detail anime, manga reader, LN reader)
   Desktop (V1.32 FORCE OVERRIDE, min-width 1025px) is NOT touched.
   ================================================================ */
@media (max-width: 768px) {
    /* Same navbar shell — every page including watch + pages without bodyClass */
    body .navbar,
    body.watch-page .navbar,
    body.ys-home-page .navbar,
    body.ys-anime-page .navbar,
    body.ys-manga-page .navbar,
    body.ys-genre-page .navbar,
    body.ys-ln-page .navbar,
    body.ys-search-page .navbar,
    body.ys-forum-page .navbar,
    body.ys-activity-page .navbar,
    body.ys-favorites-page .navbar,
    body.ys-profile-page .navbar,
    .navbar.has-custom-navbar-bg,
    body.watch-page .navbar.has-custom-navbar-bg,
    body.ys-anime-page .navbar.has-custom-navbar-bg {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        overflow: visible !important;
    }

    body .nav-container,
    body.watch-page .nav-container,
    body .navbar .nav-container {
        height: 64px !important;
        min-height: 64px !important;
        align-items: center !important;
        padding-top: 0 !important;
    }

    body .nav-logo,
    body .navbar .nav-logo,
    body.watch-page .nav-logo,
    body.watch-page .navbar .nav-logo {
        height: 64px !important;
        min-height: 64px !important;
        min-width: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        align-items: center !important;
        overflow: visible !important;
    }

    /* ------------------------------------------------------------
     * MASCOT MOBILE — SINGLE SOURCE OF TRUTH (satu-satunya blok mascot HP)
     * Ubah ukuran HANYA lewat 5 variabel di :root di bawah ini.
     * Satu rule, specificity tetap, nilai dari var() -> tidak bisa
     * "kalah" antar halaman, dengan atau tanpa $bodyClass.
     *   margin: atas | kanan | bawah | kiri
     * ------------------------------------------------------------ */
    :root {
        --ys-mascot-w: 150px;
        --ys-mascot-h: 96px;
        --ys-mascot-mt: -8px;
        --ys-mascot-ml: -40px;
        --ys-mascot-mr: 2px;
    }

    html body img.logo-mascot,
    html body .navbar .nav-logo img.logo-mascot {
        width: var(--ys-mascot-w) !important;
        height: var(--ys-mascot-h) !important;
        max-width: var(--ys-mascot-w) !important;
        max-height: var(--ys-mascot-h) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: var(--ys-mascot-mt) var(--ys-mascot-mr) 0 var(--ys-mascot-ml) !important;
        transform: none !important;
        translate: none !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        filter: none !important;
        flex: 0 0 auto !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }


    /* Also lock home nav-logo geometry that previously used desktop flex-start + padding */
    html body.ys-home-page .nav-logo,
    html body.ys-home-page .navbar .nav-logo {
        height: 64px !important;
        min-height: 64px !important;
        min-width: 0 !important;
        max-width: calc(100% - 100px) !important;
        padding: 0 !important;
        padding-top: 0 !important;
        align-items: center !important;
        overflow: visible !important;
    }
}

/* HP sangat kecil (<=340px): mascot dikecilkan supaya teks "YumeSekai" tidak terpotong.
   Hanya variabel yang diubah, berlaku sama untuk SEMUA halaman. */
@media (max-width: 340px) {
    :root { --ys-mascot-w: 110px; --ys-mascot-h: 70px; }
}

/* OPSIONAL — HP sangat kecil (<=380px). Aktifkan HANYA jika mau mascot lebih kecil
   untuk SEMUA halaman. Cukup ubah variabel; JANGAN menambah selector baru:
@media (max-width: 380px) {
    :root { --ys-mascot-w: 120px; --ys-mascot-h: 78px; }
}
*/

/* ================================================================
   DESKTOP (>=1025px) — POSISI TEKS "YumeSekai": SATU SUMBER untuk semua halaman
   (home, detail anime, watch, reader, dll). Ubah HANYA 2 variabel di bawah.
   Nilai bawaan 0px = sama persis dengan tampilan V1.32 sekarang.
     margin-left : negatif = geser KIRI,  positif = geser KANAN
     margin-top  : negatif = naik,        positif = turun
   Jangan edit margin .logo-text di rule V1.32 / .ys-home-page (akan kalah).
   ================================================================ */
@media (min-width: 1025px) {
    :root {
        --ys-logotext-ml: -38px;
        --ys-logotext-mt: 0px;
    }
    /* .logo-text diulang = specificity (0,4,2): menang atas rule V1.32 yang menyebut
       body.ys-home-page / body.ys-anime-page (0,4,1) */
    html body .navbar .nav-logo .logo-text.logo-text {
        margin-left: var(--ys-logotext-ml) !important;
        margin-top: var(--ys-logotext-mt) !important;
    }
}

/* ================================================================
   MOBILE (<=768px) — UKURAN & POSISI TEKS "YumeSekai": SATU SUMBER untuk semua halaman
   Ubah HANYA variabel di bawah ini. Nilai bawaan = sama dengan tampilan sekarang.
     font-size   : besar/kecil teks
     margin-left : negatif = geser KIRI, positif = geser KANAN
     margin-top  : negatif = naik,       positif = turun
   ================================================================ */
@media (max-width: 768px) {
    :root {
        --ys-logotext-m-fs: 1.05rem;
        --ys-logotext-m-ml: -28px;
        --ys-logotext-m-mt: 10px;
    }
    html body .navbar .nav-logo .logo-text.logo-text {
        font-size: var(--ys-logotext-m-fs) !important;
        margin-left: var(--ys-logotext-m-ml) !important;
        margin-top: var(--ys-logotext-m-mt) !important;
    }
}
/* HP kecil (<=380px): hanya ubah variabel ukuran teks */
@media (max-width: 380px) {
    :root { --ys-logotext-m-fs: .92rem; }
}

/* ================================================================
   MOBILE (<=768px) — WARNA TEKS "YumeSekai" SAMA DI SEMUA HALAMAN
   Sebelumnya gradient hanya dipasang lewat `.ys-home-page .logo-text`,
   jadi di halaman lain teks mengikuti warna default (putih polos).
   Sekarang gradient yang sama dipakai untuk semua halaman (tema gelap).
   Tema terang tetap memakai warna gelap dari rule [data-theme="light"].
   ================================================================ */
@media (max-width: 768px) {
    html:not([data-theme="light"]) body:not(.light) .navbar .nav-logo .logo-text.logo-text {
        background: linear-gradient(90deg, #fff, #b78aff 72%, #e6b8ff) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
}

/* ================================================================
   MOBILE (<=768px) — HAMBURGER DRAWER BISA DIBUKA DI SEMUA HALAMAN
   Akar masalah: rule penyembunyi
       body:not(.ys-home-page) .nav-links   (specificity 0,2,1, !important)
   mengalahkan `.nav-links.open` (0,2,0). Rule pembuka yang lebih kuat hanya
   ada untuk .ys-home-page dan body.ys-{anime,manga,genre,ln,search,forum}-page,
   sehingga Favorit, Profil, Detail Anime (id), Watch, Reader & halaman lain
   tidak pernah menampilkan drawer walau class `open` sudah terpasang.
   Selector di bawah (0,3,3) menang atas semuanya tanpa bergantung class body.
   ================================================================ */
@media (max-width: 768px) {
    html body .navbar .nav-links.open,
    html body .navbar .nav-links.ys-nav-menu-home-open {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
}

/* ================================================================
   MOBILE PERFORMANCE — kurangi beban GPU/CPU di HP
   - backdrop-filter dibuat per elemen & dihitung ulang tiap scroll. Rating badge
     ada di SETIAP kartu anime, jadi puluhan layer blur aktif sekaligus. Navbar
     dan bottom-nav juga fixed (blur dihitung ulang setiap frame saat scroll).
     Background navbar/bottom-nav/drawer sudah hampir opaque, jadi blur tidak
     terlihat dan aman dibuang.
   - Animasi infinite pada hero detail (Ken Burns, will-change: transform pada
     layer layar penuh) dan shimmer skeleton (animasi background-position =
     repaint tiap frame) dimatikan di HP.
   ================================================================ */
@media (max-width: 768px), (pointer: coarse) {
    .navbar,
    .navbar.has-custom-navbar-bg,
    .nav-links,
    .ys-home-page .nav-links,
    .ys-mobile-bottom-nav,
    .ys-mobile-drawer-backdrop,
    .rating-badge,
    .rating-badge-static,
    .anime-card-cover > .rating-badge,
    .hover-genre-chip,
    .cw-folder-badge {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    /* tanpa blur, naikkan sedikit opasitas badge supaya teks tetap terbaca di atas cover terang */
    .rating-badge,
    .anime-card-cover > .rating-badge {
        background: rgba(8, 14, 28, 0.74);
    }
    .detail-hero-bg {
        animation: none !important;
        will-change: auto !important;
    }
    .lazy-shimmer {
        animation: none !important;
    }
}

/* ==========================================================================
 * FIX — Navbar custom (gambar dari admin/theme) tampil di SEMUA halaman
 * pada layar <= 768px. Sebelumnya blok "kunci navbar" mobile menimpa
 * background dengan gradasi polos sehingga gambar hanya muncul di Home.
 * Blok ini sengaja diletakkan paling bawah. Mode terang tetap putih karena
 * aturan [data-theme="light"] memakai specificity lebih tinggi.
 * ========================================================================== */
@media (max-width: 768px) {
    body .navbar.has-custom-navbar-bg,
    body.ys-anime-page .navbar.has-custom-navbar-bg,
    body.ys-home-page .navbar.has-custom-navbar-bg {
        background-image: var(--ys-navbar-bg) !important;
        background-size: cover !important;
        background-position: var(--ys-navbar-pos, 50% 50%) !important;
        background-repeat: no-repeat !important;
    }
    body .navbar.has-custom-navbar-bg::before,
    body.ys-anime-page .navbar.has-custom-navbar-bg::before,
    body.ys-home-page .navbar.has-custom-navbar-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(90deg,
            rgba(5,4,18,var(--ys-navbar-overlay,.68)),
            rgba(10,7,28,calc(var(--ys-navbar-overlay,.68) * .78)),
            rgba(5,4,18,calc(var(--ys-navbar-overlay,.68) * .9))) !important;
    }
    body .navbar.has-custom-navbar-bg .nav-container {
        position: relative;
        z-index: 2;
    }
}