/*
Theme Name: H-Donghua
Theme URI: https://h-donghua.xyz/
Author: H-Donghua Team
Author URI: https://h-donghua.xyz/
Description: A dark cinematic WordPress theme for Chinese anime (Donghua) streaming. Features a sleek dark interface with crimson red and gold accents, optimized for anime series browsing, episode tracking, and video streaming.
Version: 5.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: h-donghua
Tags: dark, entertainment, anime, streaming, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   CSS Custom Properties / Design Tokens
   ========================================================================== */

:root {
        /* Background colors */
        --bg-primary: #0a0a14;
        --bg-secondary: #13132a;
        --bg-card: #1a1a35;
        --bg-card-hover: #222245;
        --bg-elevated: #252550;
        --bg-overlay: rgba(10, 10, 20, 0.85);
        --bg-header: rgba(10, 10, 20, 0.88);

        /* Text colors */
        --text-primary: #f0f0f5;
        --text-secondary: #8888a0;
        --text-muted: #5a5a78;
        --text-link: #c8c8e0;

        /* Accent colors */
        --crimson: #e63946;
        --crimson-dark: #b82d38;
        --crimson-light: #ff4d5a;
        --crimson-glow: rgba(230, 57, 70, 0.3);
        --crimson-subtle: rgba(230, 57, 70, 0.12);
        --gold: #d4a574;
        --gold-dark: #b8894e;
        --gold-light: #e8c49a;
        --gold-glow: rgba(212, 165, 116, 0.25);

        /* Border colors */
        --border: rgba(255, 255, 255, 0.08);
        --border-hover: rgba(255, 255, 255, 0.15);
        --border-active: rgba(230, 57, 70, 0.4);

        /* Shadows */
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
        --shadow-crimson: 0 4px 20px rgba(230, 57, 70, 0.25);
        --shadow-gold: 0 4px 20px rgba(212, 165, 116, 0.2);
        --shadow-glow-sm: 0 0 12px rgba(230, 57, 70, 0.15);
        --shadow-glow-md: 0 0 20px rgba(230, 57, 70, 0.25);

        /* Spacing */
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
        --spacing-3xl: 4rem;

        /* Border Radius */
        --radius-sm: 0.375rem;
        --radius-md: 0.625rem;
        --radius-lg: 0.875rem;
        --radius-xl: 1rem;
        --radius-2xl: 1.25rem;
        --radius-full: 9999px;

        /* Glass Effect */
        --glass-bg: rgba(26, 26, 53, 0.65);
        --glass-border: rgba(255, 255, 255, 0.1);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        --glass-blur: blur(16px);

        /* Episode Pill */
        --pill-radius: 0.75rem;
        --pill-hover-scale: 1.08;
        --pill-active-glow: 0 0 16px rgba(230, 57, 70, 0.4);

        /* Mini Player */
        --mini-player-height: 120px;
        --mini-player-width: 214px;

        /* Transitions */
        --transition-fast: 150ms ease;
        --transition-base: 250ms ease;
        --transition-slow: 400ms ease;
        --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

        /* Z-index layers */
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-overlay: 300;
        --z-modal: 400;
        --z-toast: 500;
}

/* ==========================================================================
   Reset / Base Styles
   ========================================================================== */

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

html {
        font-size: 16px;
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
}

body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                sans-serif;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--text-primary);
        background-color: var(--bg-primary);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: clip;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom);
}

body.menu-open {
        overflow: hidden;
        overscroll-behavior: none;
}

@media (min-width: 1024px) {
        body {
                padding-top: env(safe-area-inset-top, 0px);
        }
}

img,
picture,
video,
canvas,
svg {
        display: block;
        max-width: 100%;
}

input,
button,
textarea,
select {
        font: inherit;
        color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
        overflow-wrap: break-word;
}

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

a:hover {
        color: var(--crimson);
}

ul,
ol {
        list-style: none;
}

button {
        cursor: pointer;
        border: none;
        background: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, .h1 {
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--text-primary);
}

h2, .h2 {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: var(--text-primary);
}

h3, .h3 {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--text-primary);
}

h4, .h4 {
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.4;
        color: var(--text-primary);
}

h5, .h5 {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.4;
        color: var(--text-primary);
}

h6, .h6 {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        color: var(--text-primary);
}

.text-crimson { color: var(--crimson); }
.text-gold { color: var(--gold); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.container {
        width: 100%;
        max-width: 80rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
}

@media (min-width: 640px) {
        .container {
                padding-left: var(--spacing-lg);
                padding-right: var(--spacing-lg);
        }
}

@media (min-width: 1024px) {
        .container {
                padding-left: var(--spacing-xl);
                padding-right: var(--spacing-xl);
        }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }
.gap-6 { gap: var(--spacing-xl); }
.gap-8 { gap: var(--spacing-2xl); }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (min-width: 640px) {
        .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
        .sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
        .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
        .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
        .md\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1024px) {
        .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
        .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
        .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1280px) {
        .xl\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
        .xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
        .xl\:grid-cols-7 { grid-template-columns: repeat(7, 1fr); }
}

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.mt-auto { margin-top: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
.line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
.line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

/* ==========================================================================
   Glassmorphism / Modern Card Components
   ========================================================================== */

.hd-glass {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        box-shadow: var(--glass-shadow);
}

.hd-glass-card {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-2xl);
        box-shadow: var(--glass-shadow);
        overflow: hidden;
}

.hd-glass-subtle {
        background: rgba(26, 26, 53, 0.4);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--radius-xl);
}

/* Modern Section Card — wraps each content block */
.hd-modern-section {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-2xl);
        padding: var(--spacing-md);
        overflow: hidden;
}

/* Mini Player — fixed bottom-right when scrolling past player */
.hd-mini-player {
        position: fixed;
        bottom: var(--spacing-lg);
        right: var(--spacing-lg);
        width: 300px;
        height: 168px;
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 45, 85, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        z-index: var(--z-sticky);
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) scale(0.95);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
}

.hd-mini-player.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
}

.hd-mini-player:hover {
        transform: translateY(-5px) scale(1.02);
        border-color: rgba(255, 45, 85, 0.4);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 45, 85, 0.3);
}

.hd-mini-player iframe,
.hd-mini-player video {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.hd-mini-player__close {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 26px;
        height: 26px;
        background: rgba(0, 0, 0, 0.75);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.15);
        cursor: pointer;
        z-index: 2;
        opacity: 0;
        transition: opacity var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.hd-mini-player:hover .hd-mini-player__close {
        opacity: 1;
}

.hd-mini-player__close:hover {
        background: #ff2d55;
        border-color: #ff2d55;
}

@media (max-width: 768px) {
        .hd-mini-player,
        .hd-mini-player.is-visible {
                display: none !important;
                opacity: 0 !important;
                visibility: hidden !important;
                pointer-events: none !important;
        }
}

/* ==========================================================================
   Custom Scrollbar Styles
   ========================================================================== */

::-webkit-scrollbar {
        width: 8px;
        height: 8px;
}

::-webkit-scrollbar-track {
        background: var(--bg-primary);
        border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
        background: var(--bg-elevated);
        border-radius: var(--radius-full);
        border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
}

* {
        scrollbar-width: thin;
        scrollbar-color: var(--bg-elevated) var(--bg-primary);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
        position: relative;
        z-index: var(--z-sticky);
        background: var(--bg-header);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        transition: background var(--transition-base), box-shadow var(--transition-base);
        /* Ensure header spans full width in flex layout */
        width: 100%;
        flex-shrink: 0;
}

.site-header.scrolled {
        background: rgba(10, 10, 20, 0.95);
        box-shadow: var(--shadow-md);
}

/* ── Homepage Transparent Header Overlay ──────────────────────────── */
/* On the homepage, make the header float over the hero slider */
.home .site-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to bottom, rgba(10, 10, 20, 0.7) 0%, transparent 100%);
        border-bottom-color: transparent;
}

.home .site-header.scrolled {
        position: fixed;
        background: rgba(10, 10, 20, 0.95);
        border-bottom-color: var(--border);
        box-shadow: var(--shadow-md);
}

.header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        max-width: 80rem;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
}

@media (min-width: 640px) {
        .header-inner {
                padding: 0 var(--spacing-lg);
        }
}

@media (min-width: 1024px) {
        .header-inner {
                padding: 0 var(--spacing-xl);
                height: 72px;
        }
}

/* Logo */
.site-logo {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        flex-shrink: 0;
}

.site-logo a {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--text-primary);
        font-weight: 800;
        font-size: 1.5rem;
        letter-spacing: -0.02em;
        text-decoration: none;
        transition: opacity var(--transition-fast);
}

.site-logo a:hover {
        opacity: 0.9;
        color: var(--text-primary);
}

.site-logo .logo-icon {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 1.1rem;
        color: #fff;
        box-shadow: var(--shadow-crimson);
}

.site-logo .logo-text-crimson {
        color: var(--crimson);
}

.site-logo .logo-text-gold {
        color: var(--gold);
}

.site-logo .logo-text-white {
        color: #ffffff;
}

/* Navigation */
.main-navigation {
        display: none;
        align-items: center;
}

@media (min-width: 1024px) {
        .main-navigation {
                display: flex;
                align-items: center;
        }
}

.nav-menu {
        display: flex;
        align-items: center;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
}

.nav-menu li {
        position: relative;
}

.nav-menu li a {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 0.5rem 0.875rem;
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        border-radius: var(--radius-md);
        transition: color var(--transition-fast), background-color var(--transition-fast);
        white-space: nowrap;
}

.nav-menu li a:hover,
.nav-menu li.current-menu-item a,
.nav-menu li.current_page_item a {
        color: var(--text-primary);
        background: var(--crimson-subtle);
}

.nav-menu li a:hover {
        color: var(--crimson);
}

.nav-menu li a .nav-icon {
        width: 16px;
        height: 16px;
        opacity: 0.7;
}

.nav-menu li a:hover .nav-icon {
        opacity: 1;
}

/* Header Search */
.header-search {
        display: none;
        position: relative;
}

@media (min-width: 768px) {
        .header-search {
                display: flex;
        }
}

.header-search-form {
        display: flex;
        align-items: center;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        padding: 0.375rem 0.75rem;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
        width: 200px;
}

.header-search-form:focus-within {
        border-color: var(--border-active);
        box-shadow: 0 0 0 3px var(--crimson-glow);
        width: 260px;
}

.header-search-form input[type="search"] {
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-primary);
        font-size: 0.8125rem;
        width: 100%;
        padding: 0.25rem 0.5rem;
}

.header-search-form input[type="search"]::placeholder {
        color: var(--text-muted);
}

.header-search-form button {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        padding: 0;
        flex-shrink: 0;
}

.header-search-form button:hover {
        color: var(--crimson);
}

.header-search-form button svg {
        width: 16px;
        height: 16px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        transition: color var(--transition-fast), background-color var(--transition-fast);
}

@media (min-width: 1024px) {
        .mobile-menu-toggle {
                display: none;
        }
}

.mobile-menu-toggle:hover {
        color: var(--text-primary);
        background: var(--bg-secondary);
}

.mobile-menu-toggle svg {
        width: 24px;
        height: 24px;
}

/* Header Actions */
.header-actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
}

/* ==========================================================================
   Mobile Menu / Sidebar Navigation
   ========================================================================== */

.mobile-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: var(--z-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
}

.mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
}

.mobile-menu-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        max-width: 360px;
        background: var(--bg-primary);
        z-index: var(--z-modal);
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom);
        will-change: transform;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

/* Admin bar offset for mobile menu */
body.admin-bar .mobile-menu-panel {
        top: 32px;
}

@media (max-width: 782px) {
        body.admin-bar .mobile-menu-panel {
                top: 46px;
        }
}

/* Admin bar offset for mobile menu overlay */
body.admin-bar .mobile-menu-overlay {
        top: 32px;
}

@media (max-width: 782px) {
        body.admin-bar .mobile-menu-overlay {
                top: 46px;
        }
}

/* Sticky header offsets for admin-bar removed (not needed since header is relative) */

/* Admin bar offset: only need admin bar height since header is in flow (sticky) */
body.admin-bar {
        padding-top: calc(32px + env(safe-area-inset-top, 0px)) !important;
}

@media (max-width: 782px) {
        body.admin-bar {
                padding-top: calc(46px + env(safe-area-inset-top, 0px)) !important;
        }
}

@media (min-width: 1024px) {
        body.admin-bar {
                padding-top: calc(32px + env(safe-area-inset-top, 0px)) !important;
        }
}

.mobile-menu-panel.active {
        transform: translateX(0);
}

/* ── Search Top Bar ─────────────────────────────────────────────────── */
.mobile-menu-topbar {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 16px 18px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
}

.mobile-topbar-search {
        flex: 1;
        display: flex;
        align-items: center;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 12px 16px;
        gap: 10px;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mobile-topbar-search:focus-within {
        border-color: var(--crimson);
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.topbar-search-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: var(--text-muted);
}

.mobile-topbar-search input[type="search"] {
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-primary);
        font-size: 0.9375rem;
        width: 100%;
}

.mobile-topbar-search input[type="search"]::placeholder {
        color: var(--text-muted);
}

/* Close button */
.mobile-menu-close {
        position: relative;
        z-index: 10;
        pointer-events: auto !important;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        transition: color var(--transition-fast), background-color var(--transition-fast);
        flex-shrink: 0;
        cursor: pointer;
        background: transparent;
        border: none;
}

.mobile-menu-close:hover {
        color: var(--text-primary);
        background: var(--bg-card);
}

.mobile-menu-close:active {
        background: var(--bg-elevated);
        color: var(--crimson);
}

.mobile-menu-close svg {
        width: 22px;
        height: 22px;
}

/* ── Navigation Items ───────────────────────────────────────────────── */
.mobile-menu-nav {
        padding: 12px 14px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
}

.mobile-menu-nav .mobile-nav-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        color: var(--text-secondary);
        font-size: 0.9375rem;
        font-weight: 500;
        border-radius: var(--radius-lg);
        transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
        text-decoration: none;
        min-height: 48px;
        white-space: nowrap;
        position: relative;
}

.mobile-menu-nav .mobile-nav-item:hover {
        color: var(--text-primary);
        background: var(--bg-secondary);
}

.mobile-menu-nav .mobile-nav-item:active {
        transform: scale(0.98);
}

.mobile-menu-nav .mobile-nav-item.active {
        color: var(--text-primary);
        background: var(--crimson-subtle);
}

.mobile-menu-nav .mobile-nav-item.active .nav-icon-wrap {
        background: var(--crimson);
        color: #fff;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

/* Active nav items keep their themed color for better distinction */
.mobile-menu-nav .mobile-nav-item.active .nav-icon-home {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: #fff;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.mobile-menu-nav .mobile-nav-item.active .nav-icon-schedule {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: #fff;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.mobile-menu-nav .mobile-nav-item.active .nav-icon-bookmark {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #fff;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.mobile-menu-nav .mobile-nav-item.active .nav-icon-history {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: #fff;
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.mobile-menu-nav .mobile-nav-item.active .nav-icon-anime {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: #fff;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.mobile-menu-nav .mobile-nav-item.active .nav-icon-azlist {
        background: linear-gradient(135deg, #ec4899, #db2777);
        color: #fff;
        box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

/* Icon wrapper with colored background */
.nav-icon-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        flex-shrink: 0;
        transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        border: 1px solid transparent;
}

.nav-icon-wrap .nav-icon {
        width: 20px;
        height: 20px;
}

.nav-icon-home {
        background: rgba(220, 38, 38, 0.15);
        color: #f87171;
        border-color: rgba(220, 38, 38, 0.2);
}

.nav-icon-anime {
        background: rgba(139, 92, 246, 0.15);
        color: #a78bfa;
        border-color: rgba(139, 92, 246, 0.2);
}

.nav-icon-bookmark {
        background: rgba(245, 158, 11, 0.15);
        color: #fbbf24;
        border-color: rgba(245, 158, 11, 0.2);
}

.nav-icon-history {
        background: rgba(34, 197, 94, 0.15);
        color: #4ade80;
        border-color: rgba(34, 197, 94, 0.2);
}

.nav-icon-schedule {
        background: rgba(59, 130, 246, 0.15);
        color: #60a5fa;
        border-color: rgba(59, 130, 246, 0.2);
}

.nav-icon-azlist {
        background: rgba(236, 72, 153, 0.15);
        color: #f472b6;
        border-color: rgba(236, 72, 153, 0.2);
}

.mobile-menu-nav .mobile-nav-item .nav-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
        letter-spacing: 0.01em;
}

/* Chevron arrow */
.mobile-menu-nav .mobile-nav-item .nav-chevron {
        width: 18px;
        height: 18px;
        color: var(--text-muted);
        flex-shrink: 0;
        opacity: 0.5;
        transition: opacity 0.2s ease, transform 0.2s ease;
}

.mobile-menu-nav .mobile-nav-item:hover .nav-chevron {
        opacity: 0.8;
        transform: translateX(2px);
}

.mobile-menu-nav .mobile-nav-item.active .nav-chevron {
        opacity: 0.9;
        color: var(--crimson);
}

/* Hover effect on icon wrap */
.mobile-menu-nav .mobile-nav-item:hover .nav-icon-home { background: rgba(220, 38, 38, 0.25); border-color: rgba(220, 38, 38, 0.3); }
.mobile-menu-nav .mobile-nav-item:hover .nav-icon-anime { background: rgba(139, 92, 246, 0.25); border-color: rgba(139, 92, 246, 0.3); }
.mobile-menu-nav .mobile-nav-item:hover .nav-icon-bookmark { background: rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.3); }
.mobile-menu-nav .mobile-nav-item:hover .nav-icon-history { background: rgba(34, 197, 94, 0.25); border-color: rgba(34, 197, 94, 0.3); }
.mobile-menu-nav .mobile-nav-item:hover .nav-icon-schedule { background: rgba(59, 130, 246, 0.25); border-color: rgba(59, 130, 246, 0.3); }
.mobile-menu-nav .mobile-nav-item:hover .nav-icon-azlist { background: rgba(236, 72, 153, 0.25); border-color: rgba(236, 72, 153, 0.3); }

/* Remove old mobile-menu-search styles - replaced by topbar search */

/* ==========================================================================
   Hero Banner
   ========================================================================== */

.hero-banner {
        position: relative;
        width: 100%;
        min-height: 500px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
}

@media (min-width: 768px) {
        .hero-banner {
                min-height: 550px;
        }
}

@media (min-width: 1024px) {
        .hero-banner {
                min-height: 600px;
        }
}

.hero-banner-bg {
        position: absolute;
        inset: 0;
        z-index: 1;
}

.hero-banner-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
}

.hero-banner-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(
                to top,
                var(--bg-primary) 0%,
                rgba(10, 10, 20, 0.85) 30%,
                rgba(10, 10, 20, 0.4) 60%,
                rgba(10, 10, 20, 0.2) 100%
        );
}

.hero-banner-gradient-side {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(
                to right,
                rgba(10, 10, 20, 0.9) 0%,
                rgba(10, 10, 20, 0.5) 50%,
                transparent 100%
        );
}

.hero-banner-content {
        position: relative;
        z-index: 3;
        padding: var(--spacing-2xl) var(--spacing-md);
        max-width: 80rem;
        margin: 0 auto;
        width: 100%;
}

@media (min-width: 640px) {
        .hero-banner-content {
                padding: var(--spacing-2xl) var(--spacing-lg);
        }
}

@media (min-width: 1024px) {
        .hero-banner-content {
                padding: var(--spacing-3xl) var(--spacing-xl);
                max-width: 650px;
        }
}

.hero-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 0.25rem 0.75rem;
        background: var(--crimson);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: var(--radius-sm);
        margin-bottom: var(--spacing-md);
}

.hero-title {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1.1;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
        .hero-title {
                font-size: 2.75rem;
        }
}

@media (min-width: 1024px) {
        .hero-title {
                font-size: 3.25rem;
        }
}

.hero-chinese-title {
        font-size: 1rem;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: var(--spacing-md);
        letter-spacing: 0.02em;
}

@media (min-width: 768px) {
        .hero-chinese-title {
                font-size: 1.125rem;
        }
}

.hero-description {
        font-size: 0.9375rem;
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: var(--spacing-lg);
        max-width: 520px;
}

@media (min-width: 768px) {
        .hero-description {
                font-size: 1rem;
        }
}

.hero-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
}

.hero-meta-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.8125rem;
        color: var(--text-secondary);
}

.hero-meta-item svg {
        width: 16px;
        height: 16px;
        color: var(--gold);
}

.hero-actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        flex-wrap: wrap;
}

.hero-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0.75rem 2rem;
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        font-weight: 700;
        font-size: 0.9375rem;
        border-radius: var(--radius-lg);
        text-decoration: none;
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        box-shadow: var(--shadow-crimson);
}

.hero-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(230, 57, 70, 0.4);
        color: #fff;
}

.hero-btn-primary svg {
        width: 20px;
        height: 20px;
}

.hero-btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0.75rem 1.5rem;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        color: var(--text-primary);
        font-weight: 600;
        font-size: 0.9375rem;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-hover);
        text-decoration: none;
        transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hero-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: var(--border-active);
        color: var(--text-primary);
}

.hero-btn-secondary svg {
        width: 20px;
        height: 20px;
}

/* ==========================================================================
   Hero Slider (5-Slide Carousel)
   ========================================================================== */

.hero-slider {
        position: relative;
        width: 100%;
        min-height: 500px;
        overflow: hidden;
}

@media (min-width: 768px) {
        .hero-slider {
                min-height: 550px;
        }
}

@media (min-width: 1024px) {
        .hero-slider {
                min-height: 600px;
        }
}

/* Track: holds all slides stacked */
.hero-slider-track {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: inherit;
}

/* Individual Slide */
.hero-slide {
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-slide.is-active {
        opacity: 1;
        visibility: visible;
        z-index: 2;
}

.hero-slide.is-prev {
        z-index: 1;
}

/* Slide Background */
.hero-slide-bg {
        position: absolute;
        inset: 0;
        z-index: 1;
}

.hero-slide-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
        /* Ensure images auto-adjust and display clearly */
        image-rendering: auto;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        will-change: transform, opacity;
}

/* Slide Overlay (bottom gradient) */
.hero-slide-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(
                to top,
                var(--bg-primary) 0%,
                rgba(10, 10, 20, 0.88) 25%,
                rgba(10, 10, 20, 0.5) 55%,
                rgba(10, 10, 20, 0.15) 100%
        );
}

/* Slide Side Gradient (left-to-right for text readability) */
.hero-slide-gradient-side {
        position: absolute;
        inset: 0;
        z-index: 3;
        background: linear-gradient(
                to right,
                rgba(10, 10, 20, 0.92) 0%,
                rgba(10, 10, 20, 0.55) 45%,
                rgba(10, 10, 20, 0.1) 75%,
                transparent 100%
        );
}

@media (max-width: 767px) {
        .hero-slide-gradient-side {
                background: linear-gradient(
                        to right,
                        rgba(10, 10, 20, 0.8) 0%,
                        rgba(10, 10, 20, 0.4) 50%,
                        rgba(10, 10, 20, 0.2) 100%
                );
        }
}

/* Quality Badge on slide */
.hero-slide-quality {
        position: absolute;
        top: var(--spacing-lg);
        right: var(--spacing-lg);
        z-index: 10;
}

@media (min-width: 1024px) {
        .hero-slide-quality {
                top: var(--spacing-2xl);
                right: var(--spacing-2xl);
        }
}

/* Slide Content Wrapper */
.hero-slide-content-wrapper {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: flex;
        align-items: flex-end;
}

/* Slide Content (text + buttons) */
.hero-slide-content {
        width: 100%;
        max-width: 80rem;
        margin: 0 auto;
        padding: var(--spacing-2xl) var(--spacing-md);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.hero-slide-content.is-active {
        opacity: 1;
        transform: translateY(0);
}

@media (min-width: 640px) {
        .hero-slide-content {
                padding: var(--spacing-2xl) var(--spacing-lg);
        }
}

@media (min-width: 1024px) {
        .hero-slide-content {
                padding: var(--spacing-3xl) var(--spacing-xl);
                max-width: 650px;
        }
}

/* ── Navigation Arrows ──────────────────────────────────────────────── */
.hero-slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 10, 20, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--border);
        border-radius: 50%;
        color: var(--text-primary);
        cursor: pointer;
        transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-base);
        opacity: 0;
}

.hero-slider:hover .hero-slider-arrow {
        opacity: 1;
}

.hero-slider-arrow:hover {
        background: var(--crimson);
        border-color: var(--crimson);
        transform: translateY(-50%) scale(1.08);
}

.hero-slider-arrow svg {
        width: 24px;
        height: 24px;
}

.hero-slider-prev {
        left: var(--spacing-md);
}

.hero-slider-next {
        right: var(--spacing-md);
}

@media (min-width: 640px) {
        .hero-slider-prev {
                left: var(--spacing-lg);
        }
        .hero-slider-next {
                right: var(--spacing-lg);
        }
}

@media (min-width: 1024px) {
        .hero-slider-prev {
                left: var(--spacing-xl);
        }
        .hero-slider-next {
                right: var(--spacing-xl);
        }
}

/* ── Navigation Dots ────────────────────────────────────────────────── */
.hero-slider-dots {
        position: absolute;
        bottom: var(--spacing-lg);
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(10, 10, 20, 0.45);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 6px 10px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 1024px) {
        .hero-slider-dots {
                bottom: var(--spacing-2xl);
                left: auto;
                right: var(--spacing-xl);
                transform: none;
        }
}

.hero-slider-dot {
        width: 8px;
        height: 8px;
        border-radius: var(--radius-full);
        background: rgba(255, 255, 255, 0.25);
        border: none;
        cursor: pointer;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0;
}

.hero-slider-dot:hover {
        background: rgba(255, 255, 255, 0.55);
        transform: scale(1.15);
}

.hero-slider-dot.is-active {
        background: var(--crimson);
        width: 24px;
        box-shadow: 0 0 10px rgba(230, 57, 70, 0.5), 0 0 20px rgba(230, 57, 70, 0.2);
}

/* ── Progress Bar ───────────────────────────────────────────────────── */
.hero-slider-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.08);
        z-index: 10;
        overflow: hidden;
}

.hero-slider-progress-bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--crimson), var(--crimson-light));
        transition: width 0.3s linear;
}

.hero-slider-progress-bar.is-running {
        animation: hd-slider-progress var(--slider-duration, 6s) linear forwards;
}

@keyframes hd-slider-progress {
        from { width: 0%; }
        to   { width: 100%; }
}

/* ── Slide Image Ken Burns Effect ───────────────────────────────────── */
.hero-slide.is-active .hero-slide-bg img {
        animation: hd-ken-burns 8s ease-out forwards;
}

@keyframes hd-ken-burns {
        from {
                transform: scale(1);
        }
        to {
                transform: scale(1.06);
        }
}

/* ── Mobile Touch Hint ──────────────────────────────────────────────── */
@media (max-width: 767px) {
        .hero-slider-arrow {
                width: 36px;
                height: 36px;
                opacity: 0.7;
                background: rgba(10, 10, 20, 0.7);
                border-radius: var(--radius-md);
        }

        .hero-slider-arrow svg {
                width: 18px;
                height: 18px;
        }

        .hero-slider-dots {
                bottom: var(--spacing-md);
        }
}

/* ==========================================================================
   Section Styles
   ========================================================================== */

.content-section {
        padding: var(--spacing-2xl) 0;
}

@media (min-width: 768px) {
        .content-section {
                padding: var(--spacing-3xl) 0;
        }
}

.section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-lg);
        gap: var(--spacing-md);
        min-width: 0;
}

.section-header .section-title {
        flex: 1 1 auto;
        min-width: 0;
}

.section-header .section-view-all {
        flex-shrink: 0;
}

.section-title {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        min-width: 0;
        overflow: hidden;
}

@media (min-width: 768px) {
        .section-title {
                font-size: 1.5rem;
        }
}

.section-title .title-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.75em;
        height: 1.75em;
        flex-shrink: 0;
        background: var(--crimson-subtle);
        border-radius: var(--radius-md);
        color: var(--crimson);
}

.section-title .title-icon svg {
        width: 1em;
        height: 1em;
}

.section-title .title-bar {
        width: 4px;
        height: 1.4em;
        flex-shrink: 0;
        background: var(--crimson);
        border-radius: var(--radius-full);
}

.section-view-all {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--crimson);
        text-decoration: none;
        white-space: nowrap;
        transition: gap var(--transition-fast);
}

.section-view-all:hover {
        gap: var(--spacing-sm);
        color: var(--crimson-light);
}

.section-view-all svg {
        width: 16px;
        height: 16px;
}

/* ==========================================================================
   Anime Card Styles
   ========================================================================== */

.anime-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
}

@media (min-width: 640px) {
        .anime-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: var(--spacing-lg);
        }
}

@media (min-width: 768px) {
        .anime-grid {
                grid-template-columns: repeat(4, 1fr);
        }
}

@media (min-width: 1024px) {
        .anime-grid {
                grid-template-columns: repeat(5, 1fr);
        }
}

@media (min-width: 1280px) {
        .anime-grid {
                grid-template-columns: repeat(6, 1fr);
        }
}

.anime-card {
        position: relative;
        border-radius: var(--radius-2xl);
        overflow: hidden;
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        transition: transform var(--transition-base), box-shadow var(--transition-base);
        cursor: pointer;
}

.anime-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), var(--shadow-glow-sm);
}

.anime-card-thumb {
        position: relative;
        aspect-ratio: 2 / 3;
        overflow: hidden;
}

.anime-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-slow);
}

.anime-card:hover .anime-card-thumb img {
        transform: scale(1.08);
}

.anime-card-thumb-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.1) 50%,
                transparent 100%
        );
        opacity: 0;
        transition: opacity var(--transition-base);
}

.anime-card:hover .anime-card-thumb-overlay {
        opacity: 1;
}

.anime-card-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        width: 48px;
        height: 48px;
        background: var(--crimson);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity var(--transition-base), transform var(--transition-spring);
        box-shadow: var(--shadow-crimson);
}

.anime-card:hover .anime-card-play {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
}

.anime-card-play svg {
        width: 20px;
        height: 20px;
        color: #fff;
        margin-left: 2px;
}

/* Card Badges */
.anime-card-badges {
        position: absolute;
        top: var(--spacing-sm);
        left: var(--spacing-sm);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        z-index: 2;
}

.anime-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-radius: 6px;
        line-height: 1;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
        transition: all 0.3s ease;
}

.anime-badge-ongoing {
        background: linear-gradient(135deg, rgba(230, 57, 70, 0.95), rgba(230, 57, 70, 0.8));
        color: #fff;
        border: 1px solid rgba(230, 57, 70, 0.35);
        box-shadow: 0 3px 8px rgba(230, 57, 70, 0.3);
}

.anime-badge-completed {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(16, 185, 129, 0.8));
        color: #fff;
        border: 1px solid rgba(16, 185, 129, 0.35);
        box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
}

.anime-badge-movie {
        background: linear-gradient(135deg, rgba(212, 163, 115, 0.95), rgba(186, 137, 89, 0.85));
        color: #101015;
        font-weight: 800;
        border: 1px solid rgba(212, 163, 115, 0.4);
        box-shadow: 0 3px 8px rgba(212, 163, 115, 0.35);
}

.anime-badge-ona {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(109, 40, 217, 0.8));
        color: #fff;
        border: 1px solid rgba(139, 92, 246, 0.35);
        box-shadow: 0 3px 8px rgba(139, 92, 246, 0.3);
}

.anime-badge-ova {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(29, 78, 216, 0.8));
        color: #fff;
        border: 1px solid rgba(59, 130, 246, 0.35);
        box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
}

.anime-badge-special {
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.95), rgba(8, 145, 178, 0.8));
        color: #fff;
        border: 1px solid rgba(6, 182, 212, 0.35);
        box-shadow: 0 3px 8px rgba(6, 182, 212, 0.3);
}

.anime-badge-hd {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.1);
}

.anime-badge-sub {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.8));
        color: #101015;
        border: 1px solid rgba(245, 158, 11, 0.35);
        box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
}

/* 4K UHD Quality Badge — premium shimmer effect */
.anime-badge-4k {
        position: relative;
        background: linear-gradient(135deg, #c8a44e 0%, #f5e6a3 30%, #c8a44e 50%, #a07c2a 70%, #f5e6a3 100%);
        background-size: 200% 200%;
        color: #1a0a00;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
        animation: hd-badge-shimmer 3s ease-in-out infinite;
        box-shadow: 0 1px 6px rgba(200, 164, 78, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes hd-badge-shimmer {
        0% { background-position: 200% 0; }
        50% { background-position: 0 200%; }
        100% { background-position: 200% 0; }
}

/* 1080p Quality Badge */
.anime-badge-1080p {
        background: linear-gradient(135deg, #1e40af, #3b82f6);
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.04em;
        box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}

/* 720p Quality Badge */
.anime-badge-720p {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6);
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.04em;
        box-shadow: 0 1px 4px rgba(139, 92, 246, 0.3);
}

/* 480p Quality Badge */
.anime-badge-480p {
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(8px);
        color: var(--text-secondary);
        font-weight: 600;
        letter-spacing: 0.04em;
}

/* Quality badge position on cover (top-right corner) */
.anime-card-quality {
        position: absolute;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        z-index: 3;
}

/* Episode count badge on card */
.anime-card-episode {
        position: absolute;
        bottom: var(--spacing-sm);
        right: var(--spacing-sm);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.125rem;
        padding: 0.125rem 0.5rem;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        border-radius: var(--radius-sm);
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--text-primary);
}

.anime-card-episode svg {
        width: 12px;
        height: 12px;
        color: var(--gold);
}

/* Card Info */
.anime-card-info {
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
}

.anime-card-title {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color var(--transition-fast);
}

.anime-card:hover .anime-card-title {
        color: var(--crimson);
}

.anime-card-genre {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-xs);
}

.anime-card-genre-item {
        font-size: 0.6875rem;
        color: var(--text-muted);
        background: var(--bg-secondary);
        padding: 0.0625rem 0.375rem;
        border-radius: var(--radius-sm);
}

/* Bookmark button on anime cards */
.anime-card .hd-bookmark-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: rgba(10, 10, 20, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: var(--radius-md);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.anime-card:hover .hd-bookmark-btn {
        opacity: 1;
        transform: scale(1);
}

.anime-card .hd-bookmark-btn:hover {
        background: rgba(10, 10, 20, 0.8);
        color: var(--gold);
        border-color: rgba(212, 165, 116, 0.3);
}

.anime-card .hd-bookmark-btn.is-bookmarked {
        opacity: 1;
        transform: scale(1);
        background: var(--gold);
        color: #0a0a14;
        border-color: var(--gold);
}

.anime-card .hd-bookmark-btn.is-bookmarked:hover {
        background: var(--gold-dark);
        border-color: var(--gold-dark);
        color: #0a0a14;
}

.anime-card .hd-bookmark-btn svg {
        width: 16px;
        height: 16px;
}

.anime-card .hd-bookmark-btn.is-bookmarked svg {
        fill: currentColor;
}

/* Rating on card */
.anime-card-rating {
        position: absolute;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.125rem;
        padding: 0.125rem 0.5rem;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--gold);
}

.anime-card-rating svg {
        width: 12px;
        height: 12px;
        fill: var(--gold);
}

/* ==========================================================================
   Horizontal Scroll Container
   ========================================================================== */

.anime-scroll-container {
        display: flex;
        gap: var(--spacing-md);
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--spacing-sm);
        -webkit-overflow-scrolling: touch;
}

.anime-scroll-container::-webkit-scrollbar {
        display: none;
}

.anime-scroll-container .anime-card {
        flex: 0 0 150px;
        min-width: 150px;
}

@media (min-width: 640px) {
        .anime-scroll-container .anime-card {
                flex: 0 0 170px;
                min-width: 170px;
        }
}

@media (min-width: 768px) {
        .anime-scroll-container .anime-card {
                flex: 0 0 185px;
                min-width: 185px;
        }
}

@media (min-width: 1024px) {
        .anime-scroll-container .anime-card {
                flex: 0 0 200px;
                min-width: 200px;
        }
}

/* Scroll navigation arrows */
.scroll-nav-wrapper {
        position: relative;
}

.scroll-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-70%);
        width: 40px;
        height: 40px;
        background: var(--bg-overlay);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-primary);
        z-index: var(--z-dropdown);
        opacity: 0;
        transition: opacity var(--transition-base), background var(--transition-fast);
        cursor: pointer;
}

.scroll-nav-wrapper:hover .scroll-nav-btn {
        opacity: 1;
}

.scroll-nav-btn:hover {
        background: var(--crimson);
        border-color: var(--crimson);
}

.scroll-nav-btn svg {
        width: 20px;
        height: 20px;
}

.scroll-nav-btn.prev {
        left: 0;
}

.scroll-nav-btn.next {
        right: 0;
}

/* ==========================================================================
   Genre Browser
   ========================================================================== */

.genre-browser {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
}

.genre-pill {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 0.5rem 1rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-weight: 500;
        text-decoration: none;
        transition: all var(--transition-fast);
        white-space: nowrap;
}

.genre-pill:hover {
        background: var(--crimson-subtle);
        border-color: var(--crimson);
        color: var(--crimson);
        transform: translateY(-2px);
        box-shadow: var(--shadow-crimson);
}

.genre-pill .genre-count {
        font-size: 0.6875rem;
        color: var(--text-muted);
        background: var(--bg-secondary);
        padding: 0.0625rem 0.375rem;
        border-radius: var(--radius-full);
}

.genre-pill:hover .genre-count {
        background: var(--crimson-subtle);
        color: var(--crimson-light);
}

.genre-section-scroll {
        display: flex;
        gap: var(--spacing-sm);
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: var(--spacing-sm) 0;
        -webkit-overflow-scrolling: touch;
}

/* Genre scroll wrapper — always show nav arrows (smaller pills) */
.genre-scroll-wrapper .scroll-nav-btn {
        opacity: 0.7;
        width: 34px;
        height: 34px;
        transform: translateY(-50%);
        top: 50%;
}

.genre-scroll-wrapper:hover .scroll-nav-btn {
        opacity: 1;
}

.genre-scroll-wrapper .scroll-nav-btn svg {
        width: 16px;
        height: 16px;
}

.genre-section-scroll::-webkit-scrollbar {
        display: none;
}

.genre-section-scroll .genre-pill {
        flex-shrink: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
        margin-top: auto;
}

.footer-main {
        padding: var(--spacing-3xl) 0 var(--spacing-2xl);
}

.footer-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
}

@media (min-width: 640px) {
        .footer-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1024px) {
        .footer-grid {
                grid-template-columns: 2fr 1fr 1fr 1fr;
        }
}

.footer-brand .footer-logo {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
}

.footer-brand .footer-logo a {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--text-primary);
        font-weight: 800;
        font-size: 1.375rem;
        text-decoration: none;
}

.footer-brand .footer-logo .logo-icon {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 0.9375rem;
        color: #fff;
}

.footer-brand .footer-tagline {
        color: var(--text-secondary);
        font-size: 0.875rem;
        line-height: 1.6;
        max-width: 320px;
        margin-bottom: var(--spacing-lg);
}

.footer-heading {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: var(--spacing-lg);
        position: relative;
        padding-bottom: var(--spacing-sm);
}

.footer-heading::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 2px;
        background: var(--crimson);
        border-radius: var(--radius-full);
}

.footer-links {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        list-style: none;
        padding: 0;
        margin: 0;
}

.footer-links li {
        list-style: none;
        padding: 0;
        margin: 0;
}

.footer-links a {
        color: var(--text-secondary);
        font-size: 0.875rem;
        text-decoration: none;
        transition: color var(--transition-fast), padding-left var(--transition-fast);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
}

.footer-links a:hover {
        color: var(--crimson);
        padding-left: 4px;
}

.footer-links a svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
}

/* Social Links */
.footer-social {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
}

.footer-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        transition: all var(--transition-fast);
}

.footer-social a:hover {
        background: var(--crimson-subtle);
        border-color: var(--crimson);
        color: var(--crimson);
        transform: translateY(-3px);
        box-shadow: var(--shadow-crimson);
}

.footer-social a svg {
        width: 18px;
        height: 18px;
}

/* Footer Bottom */
.footer-bottom {
        border-top: 1px solid var(--border);
        padding: var(--spacing-lg) 0;
}

.footer-bottom-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        text-align: center;
}

@media (min-width: 768px) {
        .footer-bottom-inner {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
        }
}

.footer-copyright {
        font-size: 0.8125rem;
        color: var(--text-muted);
}

.footer-copyright a {
        color: var(--crimson);
        text-decoration: none;
}

.footer-copyright a:hover {
        text-decoration: underline;
}

.footer-tagline-bottom {
        font-size: 0.75rem;
        color: var(--text-muted);
}

/* ─── Toast Notifications ─────────────────────────────────────── */
.hd-toast-container {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        pointer-events: none;
}
.hd-toast {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        border-radius: 0.75rem;
        background: var(--bg-elevated);
        border: 1px solid var(--border-primary);
        color: var(--text-primary);
        font-size: 0.875rem;
        line-height: 1.4;
        min-width: 280px;
        max-width: 420px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        transform: translateX(120%);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
        pointer-events: auto;
}
.hd-toast--visible {
        transform: translateX(0);
        opacity: 1;
}
.hd-toast--exiting {
        transform: translateX(120%);
        opacity: 0;
}
.hd-toast__icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
}
.hd-toast__icon--success { color: #10b981; }
.hd-toast__icon--error { color: #ef4444; }
.hd-toast__icon--warning { color: #f59e0b; }
.hd-toast__icon--info { color: #3b82f6; }
.hd-toast__content {
        flex: 1;
        min-width: 0;
}
.hd-toast__message {
        font-weight: 500;
        margin: 0;
}
.hd-toast__description {
        color: var(--text-secondary);
        margin: 0.25rem 0 0;
        font-size: 0.8125rem;
}
.hd-toast__close {
        flex-shrink: 0;
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 0.25rem;
        transition: color 0.2s, background 0.2s;
}
.hd-toast__close:hover {
        color: var(--text-primary);
        background: var(--bg-hover);
}
.hd-toast--success { border-left: 3px solid #10b981; }
.hd-toast--error { border-left: 3px solid #ef4444; }
.hd-toast--warning { border-left: 3px solid #f59e0b; }
.hd-toast--info { border-left: 3px solid #3b82f6; }

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */

.skeleton {
        position: relative;
        overflow: hidden;
        background: var(--bg-card);
        border-radius: var(--radius-md);
}

.skeleton::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.05) 50%,
                transparent 100%
        );
        animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
        0% {
                transform: translateX(-100%);
        }
        100% {
                transform: translateX(100%);
        }
}

.skeleton-card {
        border-radius: var(--radius-lg);
}

.skeleton-thumb {
        aspect-ratio: 2 / 3;
}

.skeleton-text {
        height: 14px;
        border-radius: var(--radius-sm);
        margin-top: var(--spacing-sm);
}

.skeleton-text-short {
        width: 60%;
}

.skeleton-text-medium {
        width: 80%;
}

.skeleton-title {
        height: 16px;
        width: 70%;
        border-radius: var(--radius-sm);
        margin-top: var(--spacing-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: var(--radius-md);
        border: 1px solid transparent;
        transition: all var(--transition-fast);
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
}

.btn-primary {
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        border-color: var(--crimson);
        box-shadow: var(--shadow-crimson);
}

.btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 24px rgba(230, 57, 70, 0.4);
        color: #fff;
}

.btn-secondary {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--border);
}

.btn-secondary:hover {
        background: var(--bg-elevated);
        border-color: var(--border-hover);
}

.btn-gold {
        background: linear-gradient(135deg, var(--gold), var(--gold-dark));
        color: #000;
        border-color: var(--gold);
}

.btn-gold:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-gold);
        color: #000;
}

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

.btn-ghost:hover {
        background: var(--bg-card);
        color: var(--text-primary);
}

.btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
}

.btn-lg {
        padding: 0.875rem 2rem;
        font-size: 1rem;
}

.btn-icon {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: var(--radius-md);
}

.btn-icon svg {
        width: 18px;
        height: 18px;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        padding: var(--spacing-md) 0;
        font-size: 0.8125rem;
        color: var(--text-muted);
}

.breadcrumbs a {
        color: var(--text-secondary);
        text-decoration: none;
        transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
        color: var(--crimson);
}

.breadcrumbs .separator {
        color: var(--text-muted);
        margin: 0 0.125rem;
}

.breadcrumbs .current {
        color: var(--text-primary);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-2xl) 0;
}

.pagination a,
.pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 var(--spacing-sm);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        transition: all var(--transition-fast);
}

.pagination a {
        color: var(--text-secondary);
        background: var(--bg-card);
        border: 1px solid var(--border);
}

.pagination a:hover {
        color: var(--text-primary);
        background: var(--bg-elevated);
        border-color: var(--crimson);
}

.pagination .current {
        color: #fff;
        background: var(--crimson);
        border: 1px solid var(--crimson);
}

.pagination .dots {
        color: var(--text-muted);
        background: transparent;
        border: none;
}

/* ==========================================================================
   Search Results
   ========================================================================== */

.search-results-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
}

@media (min-width: 640px) {
        .search-results-grid {
                grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 768px) {
        .search-results-grid {
                grid-template-columns: repeat(4, 1fr);
        }
}

@media (min-width: 1024px) {
        .search-results-grid {
                grid-template-columns: repeat(5, 1fr);
        }
}

/* ==========================================================================
   Single Anime Page
   ========================================================================== */

.anime-hero {
        position: relative;
        min-height: 400px;
        overflow: hidden;
}

.anime-hero-bg {
        position: absolute;
        inset: 0;
        z-index: 1;
}

.anime-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(20px) brightness(0.3);
        transform: scale(1.1);
}

.anime-hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(to top, var(--bg-primary) 0%, rgba(10, 10, 20, 0.6) 100%);
}

.anime-hero-content {
        position: relative;
        z-index: 3;
        display: flex;
        gap: var(--spacing-xl);
        padding: var(--spacing-3xl) 0;
}

.anime-poster {
        flex-shrink: 0;
        width: 200px;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
}

@media (max-width: 639px) {
        .anime-hero-content {
                flex-direction: column;
                align-items: center;
                text-align: center;
        }

        .anime-poster {
                width: 160px;
        }
}

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

.anime-details {
        flex: 1;
}

.anime-details .anime-title {
        font-size: 1.75rem;
        font-weight: 800;
        margin-bottom: var(--spacing-xs);
}

@media (min-width: 768px) {
        .anime-details .anime-title {
                font-size: 2.25rem;
        }
}

.anime-details .anime-chinese-title {
        color: var(--gold);
        font-size: 1rem;
        margin-bottom: var(--spacing-md);
}

.anime-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
}

.anime-meta-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.875rem;
        color: var(--text-secondary);
}

.anime-meta-item svg {
        width: 16px;
        height: 16px;
        color: var(--gold);
}

.anime-description {
        color: var(--text-secondary);
        font-size: 0.9375rem;
        line-height: 1.7;
        margin-bottom: var(--spacing-lg);
        max-width: 700px;
}

.anime-genres {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   Episode List
   ========================================================================== */

.episode-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
}

@media (min-width: 640px) {
        .episode-list {
                grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 768px) {
        .episode-list {
                grid-template-columns: repeat(4, 1fr);
        }
}

@media (min-width: 1024px) {
        .episode-list {
                grid-template-columns: repeat(6, 1fr);
        }
}

@media (min-width: 1280px) {
        .episode-list {
                grid-template-columns: repeat(8, 1fr);
        }
}

.episode-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.625rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all var(--transition-fast);
}

.episode-item:hover {
        background: var(--crimson-subtle);
        border-color: var(--crimson);
        color: var(--crimson);
}

.episode-item.current {
        background: var(--crimson);
        border-color: var(--crimson);
        color: #fff;
}

.episode-item.watched {
        background: var(--bg-elevated);
        border-color: var(--gold-dark);
        color: var(--gold);
}

/* ==========================================================================
   Widget Areas
   ========================================================================== */

.widget {
        margin-bottom: var(--spacing-xl);
        padding: var(--spacing-lg);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
}

.widget-title {
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
        border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.error-404 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        text-align: center;
        padding: var(--spacing-3xl) var(--spacing-md);
}

.error-404 .error-code {
        font-size: 8rem;
        font-weight: 900;
        color: var(--crimson);
        line-height: 1;
        text-shadow: 0 0 60px var(--crimson-glow);
}

.error-404 .error-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
}

.error-404 .error-message {
        color: var(--text-secondary);
        margin-bottom: var(--spacing-xl);
        max-width: 400px;
}

/* ==========================================================================
   Archive Page
   ========================================================================== */

.archive-header {
        padding: var(--spacing-2xl) 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: var(--spacing-2xl);
}

.archive-title {
        font-size: 1.75rem;
        font-weight: 800;
        color: var(--text-primary);
}

.archive-description {
        color: var(--text-secondary);
        margin-top: var(--spacing-sm);
        font-size: 0.9375rem;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
}

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

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

@keyframes slideInRight {
        from {
                opacity: 0;
                transform: translateX(30px);
        }
        to {
                opacity: 1;
                transform: translateX(0);
        }
}

@keyframes slideInLeft {
        from {
                opacity: 0;
                transform: translateX(-30px);
        }
        to {
                opacity: 1;
                transform: translateX(0);
        }
}

@keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
}

@keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
}

@keyframes glow {
        0%, 100% {
                box-shadow: 0 0 5px var(--crimson-glow);
        }
        50% {
                box-shadow: 0 0 20px var(--crimson-glow), 0 0 40px var(--crimson-glow);
        }
}

.animate-fade-in { animation: fadeIn 0.5s ease-out; }
.animate-fade-in-up { animation: fadeInUp 0.5s ease-out; }
.animate-fade-in-down { animation: fadeInDown 0.5s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.5s ease-out; }
.animate-slide-in-left { animation: slideInLeft 0.5s ease-out; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }

/* ==========================================================================
   Accessibility
   ========================================================================== */

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

:focus-visible {
        outline: 2px solid var(--crimson);
        outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
        }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
        .site-header,
        .site-footer,
        .mobile-menu-overlay,
        .mobile-menu-panel,
        .hd-toast-container {
                display: none !important;
        }

        body {
                background: #fff;
                color: #000;
        }

        .anime-card-thumb-overlay,
        .anime-card-play {
                display: none;
        }
}

/* ==========================================================================
   WordPress Alignment Classes
   ========================================================================== */

.alignleft {
        float: left;
        margin-right: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
}

.alignright {
        float: right;
        margin-left: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
}

.aligncenter {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
}

.alignwide {
        margin-left: -80px;
        margin-right: -80px;
        max-width: 100vw;
}

.alignfull {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        max-width: 100vw;
        width: 100vw;
}

/* ==========================================================================
   WordPress Caption
   ========================================================================== */

.wp-caption {
        max-width: 100%;
        margin-bottom: var(--spacing-lg);
}

.wp-caption-text {
        font-size: 0.8125rem;
        color: var(--text-muted);
        text-align: center;
        padding: var(--spacing-sm) 0;
}

/* ==========================================================================
   WordPress Gallery
   ========================================================================== */

.gallery {
        display: grid;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }

/* ==========================================================================
   Screen Reader Text (WordPress)
   ========================================================================== */

.screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        word-wrap: normal !important;
}

.screen-reader-text:focus {
        background-color: var(--bg-elevated);
        border-radius: 3px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
        clip: auto !important;
        clip-path: none;
        color: var(--text-primary);
        display: block;
        font-size: 0.875rem;
        font-weight: 700;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000;
}

/* ==========================================================================
   H-Donghua Page-Specific Styles (hd- prefix)
   Used by index.php, single-anime.php, and other template files.
   ========================================================================== */

/* Container alias used in templates */
.hd-container {
        width: 100%;
        max-width: 80rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
}

@media (min-width: 640px) {
        .hd-container {
                padding-left: var(--spacing-lg);
                padding-right: var(--spacing-lg);
        }
}

@media (min-width: 1024px) {
        .hd-container {
                padding-left: var(--spacing-xl);
                padding-right: var(--spacing-xl);
        }
}

/* Main content wrapper */
.hd-main {
        flex: 1 0 auto;
        overflow-x: hidden;
}

/* ─── Homepage Hero (hd-hero) ────────────────────────────────────────── */
.hd-hero {
        position: relative;
        width: 100%;
        min-height: 420px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        margin-top: -64px;
}

@media (min-width: 768px) {
        .hd-hero { min-height: 520px; }
}
@media (min-width: 1024px) {
        .hd-hero { min-height: 580px; margin-top: -72px; }
}

.hd-hero__background {
        position: absolute;
        inset: 0;
        z-index: 1;
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
}

.hd-hero__gradient {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(
                to top,
                var(--bg-primary) 0%,
                rgba(10, 10, 20, 0.88) 35%,
                rgba(10, 10, 20, 0.4) 65%,
                rgba(10, 10, 20, 0.15) 100%
        );
}

.hd-hero__content {
        position: relative;
        z-index: 3;
        padding: var(--spacing-2xl) 0;
        width: 100%;
}

.hd-hero__info {
        max-width: 600px;
}

.hd-hero__type {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.6rem;
        background: var(--crimson);
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-radius: var(--radius-sm);
        margin-bottom: var(--spacing-md);
}

.hd-hero__title {
        font-size: 1.75rem;
        font-weight: 800;
        line-height: 1.1;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px) {
        .hd-hero__title { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
        .hd-hero__title { font-size: 3rem; }
}

.hd-hero__chinese-title {
        font-size: 0.9375rem;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: var(--spacing-md);
        letter-spacing: 0.02em;
}

.hd-hero__genres {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-md);
}

.hd-hero__genre-tag {
        display: inline-block;
        padding: 0.2rem 0.6rem;
        background: var(--crimson-subtle);
        border: 1px solid var(--border-active);
        color: var(--crimson-light);
        font-size: 0.6875rem;
        font-weight: 600;
        border-radius: var(--radius-full);
        text-decoration: none;
        transition: background var(--transition-fast), color var(--transition-fast);
}

.hd-hero__genre-tag:hover {
        background: var(--crimson);
        color: #fff;
}

.hd-hero__description {
        font-size: 0.875rem;
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: var(--spacing-lg);
        max-width: 500px;
}

.hd-hero__meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
}

.hd-hero__episodes,
.hd-hero__status {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.8125rem;
        color: var(--text-secondary);
}

.hd-hero__episodes svg {
        width: 16px;
        height: 16px;
        color: var(--gold);
}

.hd-hero__status {
        font-weight: 600;
}

.hd-hero__status--ongoing {
        color: var(--crimson);
}

.hd-hero__status--completed {
        color: #10b981;
}

.hd-hero__pulse {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: var(--crimson);
        border-radius: 50%;
        animation: hd-pulse 1.5s ease-in-out infinite;
}

@keyframes hd-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(0.8); }
}

.hd-hero__actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        flex-wrap: wrap;
}

/* ─── Buttons (hd-btn) ─────────────────────────────────────────────── */
.hd-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-weight: 700;
        border-radius: var(--radius-lg);
        text-decoration: none;
        cursor: pointer;
        border: none;
        transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.hd-btn--primary {
        padding: 0.75rem 2rem;
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        box-shadow: var(--shadow-crimson);
}

.hd-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(230, 57, 70, 0.4);
        color: #fff;
}

.hd-btn--outline {
        padding: 0.75rem 1.5rem;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
        color: var(--text-primary);
        border: 1px solid var(--border-hover);
}

.hd-btn--outline:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: var(--border-active);
        color: var(--text-primary);
}

.hd-btn--lg {
        font-size: 0.9375rem;
}

.hd-btn svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
}

/* ─── Bookmark Button States ──────────────────────────────────────── */
.hd-bookmark-btn.hd-btn--outline {
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.3);
        color: #fbbf24;
        position: relative;
        overflow: hidden;
}

.hd-bookmark-btn.hd-btn--outline::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05));
        opacity: 0;
        transition: opacity var(--transition-fast);
}

.hd-bookmark-btn.hd-btn--outline:hover {
        background: rgba(245, 158, 11, 0.15);
        border-color: rgba(245, 158, 11, 0.5);
        color: #fcd34d;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}

.hd-bookmark-btn.hd-btn--outline:hover::before {
        opacity: 1;
}

.hd-bookmark-btn.hd-btn--outline svg {
        stroke: #fbbf24;
        position: relative;
        z-index: 1;
}

.hd-bookmark-btn.is-bookmarked {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        border-color: #f59e0b !important;
        color: #fff !important;
        box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

.hd-bookmark-btn.is-bookmarked:hover {
        background: linear-gradient(135deg, #d97706, #b45309) !important;
        box-shadow: 0 6px 28px rgba(245, 158, 11, 0.5);
        color: #fff !important;
        transform: translateY(-2px);
}

.hd-bookmark-btn.is-bookmarked svg {
        fill: #fff;
        stroke: #fff;
        position: relative;
        z-index: 1;
}

.hd-bookmark-btn.is-bookmarked::after {
        content: 'ed';
        position: relative;
        z-index: 1;
}

/* ─── Scroll Navigation Buttons ──────────────────────────────────────── */
.scroll-nav-wrapper {
        position: relative;
}

.anime-scroll-container {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        scrollbar-width: thin;
        scrollbar-color: var(--border-hover) transparent;
}

.anime-scroll-container::-webkit-scrollbar {
        height: 4px;
}

.anime-scroll-container::-webkit-scrollbar-track {
        background: transparent;
}

.anime-scroll-container::-webkit-scrollbar-thumb {
        background: var(--border-hover);
        border-radius: 2px;
}

.scroll-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--border-primary);
        background: var(--bg-elevated, rgba(18, 18, 26, 0.95));
        color: var(--text-primary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        backdrop-filter: blur(8px);
}

.scroll-nav-btn:hover {
        background: var(--accent-crimson, #e63946);
        border-color: var(--accent-crimson, #e63946);
        color: #fff;
}

.scroll-nav-btn.prev {
        left: 0;
}

.scroll-nav-btn.next {
        right: 0;
}

.scroll-nav-btn.is-hidden {
        opacity: 0;
        pointer-events: none;
}

/* ─── Bookmark Page Styles ──────────────────────────────────────────── */
.hd-page-bookmark .hd-page-header__title,
.hd-page-history .hd-page-header__title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.75rem;
        font-weight: 800;
        color: var(--text-primary);
}

.hd-page-bookmark .hd-page-header__title svg,
.hd-page-history .hd-page-header__title svg {
        color: var(--accent-crimson, #e63946);
        flex-shrink: 0;
}

.hd-page-bookmark-header,
.hd-page-history-header {
        padding: 2rem 0 1.5rem;
        border-bottom: 1px solid var(--border-primary);
        margin-bottom: 2rem;
}

.hd-page-bookmark-header .hd-container,
.hd-page-history-header .hd-container {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
}

.hd-page-header__count {
        color: var(--text-muted);
        font-size: 0.875rem;
        margin-top: 0.25rem;
}

.hd-bookmark-actions,
.hd-history-actions {
        display: flex;
        gap: 0.5rem;
}

.hd-bookmark-content .hd-no-results,
.hd-history-content .hd-no-results {
        text-align: center;
        padding: 4rem 1rem;
}

.hd-bookmark-content .hd-no-results > svg,
.hd-history-content .hd-no-results > svg {
        color: var(--text-muted);
        opacity: 0.3;
        margin-bottom: 1rem;
}

.hd-bookmark-content .hd-no-results__title,
.hd-history-content .hd-no-results__title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
}

.hd-bookmark-content .hd-no-results__text,
.hd-history-content .hd-no-results__text {
        color: var(--text-muted);
        font-size: 0.875rem;
        max-width: 400px;
        margin: 0 auto 1.5rem;
        line-height: 1.6;
}

.hd-bookmark-loading,
.hd-history-loading {
        text-align: center;
        padding: 4rem 1rem;
        color: var(--text-muted);
}

.hd-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--border-primary);
        border-top-color: var(--accent-crimson, #e63946);
        border-radius: 50%;
        animation: hd-spin 0.8s linear infinite;
        margin: 0 auto 1rem;
}

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

.hd-bookmark-item {
        position: relative;
}

.hd-bookmark-remove {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: none;
        background: rgba(0, 0, 0, 0.7);
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.2s ease;
        z-index: 5;
}

.hd-bookmark-item:hover .hd-bookmark-remove {
        opacity: 1;
}

.hd-bookmark-remove:hover {
        background: #dc2626;
        color: #fff;
}

/* ─── History Page Styles ──────────────────────────────────────────── */
.hd-history-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
}

.hd-history-group {
        margin-bottom: 1.5rem;
}

.hd-history-group-title {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-primary);
}

.hd-history-items {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
}

.hd-history-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem;
        border-radius: 0.5rem;
        background: var(--bg-secondary, #12121a);
        border: 1px solid var(--border-primary);
        transition: all 0.2s ease;
        position: relative;
}

.hd-history-item:hover {
        border-color: var(--border-hover);
        background: var(--bg-elevated, rgba(255, 255, 255, 0.04));
}

.hd-history-item-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex: 1;
        text-decoration: none;
        color: inherit;
        min-width: 0;
}

.hd-history-item-thumb {
        width: 60px;
        height: 40px;
        border-radius: 0.25rem;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
}

.hd-history-item-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.hd-history-item-play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        opacity: 0;
        transition: opacity 0.2s;
}

.hd-history-item:hover .hd-history-item-play {
        opacity: 1;
}

.hd-history-item-info {
        flex: 1;
        min-width: 0;
}

.hd-history-item-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.hd-history-item-episode {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 2px;
}

.hd-history-item-meta {
        display: flex;
        gap: 0.75rem;
        font-size: 0.6875rem;
        color: var(--text-muted);
        margin-top: 4px;
}

.hd-history-item-progress-bar {
        height: 3px;
        background: var(--border-primary);
        border-radius: 1.5px;
        margin-top: 6px;
        overflow: hidden;
}

.hd-history-item-progress-fill {
        height: 100%;
        background: var(--accent-crimson, #e63946);
        border-radius: 1.5px;
        transition: width 0.3s ease;
}

.hd-history-remove {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.2s ease;
        flex-shrink: 0;
}

.hd-history-item:hover .hd-history-remove {
        opacity: 1;
}

.hd-history-remove:hover {
        background: rgba(220, 38, 38, 0.2);
        color: #dc2626;
}

/* ─── Sections (hd-section) ──────────────────────────────────────────── */
.hd-section {
        padding: var(--spacing-2xl) 0;
}

@media (min-width: 768px) {
        .hd-section { padding: var(--spacing-3xl) 0; }
}

/* ─── Section Header (hd-section-header) ───────────────────────────── */
.hd-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-lg);
        gap: var(--spacing-md);
}

.hd-section-header__left {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
}

.hd-section-header__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        background: var(--crimson-subtle);
        color: var(--crimson);
        flex-shrink: 0;
}

.hd-section-icon {
        width: 20px;
        height: 20px;
}

.hd-section-header__title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        line-height: 1.3;
        letter-spacing: -0.01em;
}

.hd-section-header__title svg {
        width: 24px;
        height: 24px;
        color: var(--crimson);
        flex-shrink: 0;
}

@media (min-width: 768px) {
        .hd-section-header__title {
                font-size: 1.5rem;
        }
}

.hd-section-header__right {
        flex-shrink: 0;
}

.hd-section-header__view-all {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--crimson);
        text-decoration: none;
        transition: color var(--transition-fast);
}

.hd-section-header__view-all:hover {
        color: var(--crimson-light);
}

.hd-section-header__view-all svg {
        width: 16px;
        height: 16px;
        transition: transform var(--transition-fast);
}

.hd-section-header__view-all:hover svg {
        transform: translateX(3px);
}

/* ─── Grid (hd-grid) ─────────────────────────────────────────────────── */
.hd-grid {
        display: grid;
        gap: var(--spacing-md);
}

.hd-grid--anime {
        grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
        .hd-grid--anime { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
}
@media (min-width: 768px) {
        .hd-grid--anime { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
        .hd-grid--anime { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1280px) {
        .hd-grid--anime { grid-template-columns: repeat(6, 1fr); }
}

/* ─── Archive Anime Page ─────────────────────────────────────────────── */

/* Archive Header */
.hd-archive-header {
        padding: var(--spacing-lg) 0 var(--spacing-md);
}

.hd-archive-header__info {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        flex-wrap: wrap;
}

.hd-archive-header__title {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text-primary);
        margin: 0;
        line-height: 1.2;
}

.hd-archive-header__title svg {
        width: 28px;
        height: 28px;
        color: var(--crimson);
        flex-shrink: 0;
}

@media (min-width: 768px) {
        .hd-archive-header__title {
                font-size: 1.875rem;
        }
}

.hd-archive-header__count {
        font-size: 0.875rem;
        color: var(--text-muted);
        font-weight: 500;
        margin: 0;
        padding: 0.25rem 0.75rem;
        background: var(--bg-secondary);
        border-radius: var(--radius-full);
}

/* Filter Bar */
.hd-filter-bar {
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: var(--spacing-md) 0;
        position: sticky;
        top: 60px;
        z-index: var(--z-sticky);
        backdrop-filter: blur(12px);
}

.hd-filter-bar__form {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--spacing-sm) var(--spacing-md);
        align-items: end;
}

.hd-filter-bar__group {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
}

.hd-filter-bar__label {
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        white-space: nowrap;
}

.hd-filter-bar__select {
        appearance: none;
        -webkit-appearance: none;
        background: var(--bg-card);
        border: 1px solid var(--border);
        color: var(--text-primary);
        font-size: 0.8125rem;
        font-weight: 500;
        padding: 0.5rem 2rem 0.5rem 0.75rem;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238888a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 12px;
        width: 100%;
}

.hd-filter-bar__select:hover {
        border-color: var(--border-hover);
}

.hd-filter-bar__select:focus {
        outline: none;
        border-color: var(--crimson);
        box-shadow: 0 0 0 2px var(--crimson-subtle);
}

.hd-filter-bar__select option {
        background: var(--bg-card);
        color: var(--text-primary);
}

.hd-filter-bar__actions {
        display: flex;
        gap: var(--spacing-sm);
        flex-shrink: 0;
        align-items: flex-end;
        grid-column: 1 / -1;
}

/* Active Filters */
.hd-active-filters {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
        padding: var(--spacing-sm) 0;
}

.hd-active-filters__label {
        font-size: 0.8125rem;
        color: var(--text-muted);
        font-weight: 500;
}

.hd-active-filter {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.625rem;
        background: var(--crimson-subtle);
        border: 1px solid var(--border-active);
        color: var(--crimson-light);
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: var(--radius-full);
        text-decoration: none;
        transition: background var(--transition-fast), color var(--transition-fast);
}

.hd-active-filter:hover {
        background: var(--crimson);
        color: #fff;
}

.hd-active-filter svg {
        width: 12px;
        height: 12px;
}

/* Archive Grid Section */
.hd-archive-grid {
        padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

/* No Results */
.hd-no-results {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: var(--spacing-3xl) var(--spacing-lg);
        gap: var(--spacing-md);
}

.hd-no-results > svg {
        color: var(--text-muted);
        opacity: 0.5;
}

.hd-no-results__title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
}

.hd-no-results__text {
        font-size: 0.875rem;
        color: var(--text-muted);
        margin: 0;
}

/* Pagination */
.hd-pagination {
        margin-top: var(--spacing-2xl);
        padding-top: var(--spacing-lg);
        border-top: 1px solid var(--border);
}

.hd-pagination ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        list-style: none;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
}

.hd-pagination li {
        display: inline-flex;
}

.hd-pagination a,
.hd-pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--text-secondary);
}

.hd-pagination a:hover {
        background: var(--bg-card-hover);
        color: var(--text-primary);
        border-color: var(--border-hover);
}

.hd-pagination .current {
        background: var(--crimson);
        color: #fff;
        border-color: var(--crimson);
}

.hd-pagination .dots {
        background: transparent;
        border-color: transparent;
        color: var(--text-muted);
}

.hd-pagination .prev a,
.hd-pagination .next a {
        gap: 0.25rem;
        padding: 0 0.75rem;
}

.hd-pagination .prev svg,
.hd-pagination .next svg {
        width: 14px;
        height: 14px;
}

@media (max-width: 639px) {
        .hd-filter-bar__form {
                grid-template-columns: 1fr 1fr;
                gap: var(--spacing-xs) var(--spacing-sm);
        }
        .hd-filter-bar__group {
                min-width: 0;
        }
        .hd-filter-bar__label {
                font-size: 0.625rem;
                letter-spacing: 0.04em;
        }
        .hd-filter-bar__select {
                font-size: 0.75rem;
                padding: 0.4rem 1.75rem 0.4rem 0.5rem;
        }
        .hd-filter-bar__actions {
                grid-column: 1 / -1;
                width: 100%;
        }
        .hd-filter-bar__actions .hd-btn {
                flex: 1;
                justify-content: center;
        }
}

@media (min-width: 640px) and (max-width: 1023px) {
        .hd-filter-bar__form {
                grid-template-columns: repeat(4, 1fr);
        }
}

/* ─── Horizontal Scroll Row (hd-scroll-row) ─────────────────────────── */
.hd-scroll-row {
        overflow: visible;
}

.hd-scroll-row__track {
        display: flex;
        gap: var(--spacing-md);
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--spacing-sm);
        -webkit-overflow-scrolling: touch;
}

.hd-scroll-row__track::-webkit-scrollbar {
        display: none;
}

.hd-scroll-row__track .anime-card {
        flex: 0 0 150px;
        min-width: 150px;
}

@media (min-width: 640px) {
        .hd-scroll-row__track .anime-card { flex: 0 0 170px; min-width: 170px; }
}
@media (min-width: 768px) {
        .hd-scroll-row__track .anime-card { flex: 0 0 185px; min-width: 185px; }
}
@media (min-width: 1024px) {
        .hd-scroll-row__track .anime-card { flex: 0 0 200px; min-width: 200px; }
}

/* ─── Genre Cloud (hd-genre-cloud) ──────────────────────────────────── */
.hd-genre-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
}

.hd-genre-pill {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 0.5rem 1rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-weight: 500;
        text-decoration: none;
        transition: all var(--transition-fast);
        white-space: nowrap;
}

.hd-genre-pill:hover {
        background: var(--crimson-subtle);
        border-color: var(--crimson);
        color: var(--crimson);
        transform: translateY(-2px);
        box-shadow: var(--shadow-crimson);
}

.hd-genre-pill__name {
        /* name text */
}

.hd-genre-pill__count {
        font-size: 0.6875rem;
        color: var(--text-muted);
        background: var(--bg-secondary);
        padding: 0.0625rem 0.375rem;
        border-radius: var(--radius-full);
}

.hd-genre-pill:hover .hd-genre-pill__count {
        background: var(--crimson-subtle);
        color: var(--crimson-light);
}

/* ─── Anime Card Link (anime-card-link) ──────────────────────────────── */
.anime-card-link {
        display: block;
        text-decoration: none;
        color: inherit;
}

.anime-card-link:hover {
        color: inherit;
}

/* ─── Anime Card Chinese Title ─────────────────────────────────────── */
.anime-card-chinese-title {
        font-size: 0.6875rem;
        color: var(--gold);
        font-weight: 400;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

/* ─── Anime Card Thumb Image ──────────────────────────────────────── */
.anime-card-thumb-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-slow);
}

.anime-card:hover .anime-card-thumb-img {
        transform: scale(1.08);
}

/* ─── Breadcrumb (hd-breadcrumb) ────────────────────────────────────── */
.hd-breadcrumb {
        padding: var(--spacing-md) 0;
}

.hd-breadcrumb__list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 0.8125rem;
}

.hd-breadcrumb__item {
        color: var(--text-muted);
}

.hd-breadcrumb__item a {
        color: var(--text-secondary);
        text-decoration: none;
        transition: color var(--transition-fast);
}

.hd-breadcrumb__item a:hover {
        color: var(--crimson);
}

.hd-breadcrumb__item--active {
        color: var(--text-primary);
        font-weight: 600;
}

.hd-breadcrumb__item + .hd-breadcrumb__item::before {
        content: '/';
        margin-right: var(--spacing-xs);
        color: var(--text-muted);
}

/* ─── Single Anime Hero (hd-single-hero) ────────────────────────────── */
.hd-single-hero {
        position: relative;
        min-height: 400px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        background-color: var(--bg-secondary);
}

@media (min-width: 768px) {
        .hd-single-hero { min-height: 480px; }
}

@media (max-width: 767px) {
        .hd-single-hero {
                min-height: auto;
        }

        .hd-single-hero__gradient {
                background: linear-gradient(
                        to top,
                        var(--bg-primary) 0%,
                        rgba(10, 10, 20, 0.95) 40%,
                        rgba(10, 10, 20, 0.8) 70%,
                        rgba(10, 10, 20, 0.6) 100%
                );
        }

        .hd-single-hero__content {
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                gap: var(--spacing-md) !important;
                padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md) !important;
        }

        .hd-single-hero__info {
                width: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                min-width: 0 !important;
        }

        .hd-single-hero__title {
                font-size: 1.5rem !important;
                line-height: 1.25 !important;
                font-weight: 800 !important;
                text-align: center !important;
                margin-bottom: 6px !important;
                color: var(--text-primary) !important;
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        }

        .hd-single-hero__type {
                font-size: 0.625rem !important;
                padding: 0.2rem 0.6rem !important;
                margin-bottom: var(--spacing-xs) !important;
                border-radius: 10px !important;
        }

        .hd-single-hero__chinese-title {
                font-size: 0.875rem !important;
                text-align: center !important;
                margin-bottom: var(--spacing-sm) !important;
                color: var(--gold) !important;
        }

        .hd-single-hero__meta-row {
                justify-content: center !important;
                gap: 12px !important;
                margin-bottom: var(--spacing-md) !important;
                flex-wrap: wrap !important;
        }

        .hd-single-hero__meta-item {
                font-size: 0.75rem !important;
        }

        .hd-single-hero__meta-item svg {
                width: 13px !important;
                height: 13px !important;
        }

        .hd-single-hero__status {
                font-size: 0.75rem !important;
        }

        .hd-single-hero__genres {
                justify-content: center !important;
                gap: 6px !important;
                margin-bottom: var(--spacing-sm) !important;
                flex-wrap: wrap !important;
        }

        .hd-single-hero__genre-tag {
                font-size: 0.625rem !important;
                padding: 0.15rem 0.5rem !important;
        }

        .hd-single-hero__actions {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 10px !important;
                width: 100% !important;
                margin-top: var(--spacing-xs) !important;
                flex-wrap: nowrap !important;
        }

        .hd-single-hero__actions .hd-btn--primary,
        .hd-single-hero__actions .hd-btn--outline,
        .hd-single-hero__actions .hd-bookmark-btn {
                flex: 1 1 50% !important;
                width: 50% !important;
                height: 40px !important;
                min-height: 40px !important;
                padding: 0 12px !important;
                font-size: 0.8125rem !important;
                font-weight: 700 !important;
                border-radius: 20px !important; /* Pill shaped */
                justify-content: center !important;
                align-items: center !important;
                white-space: nowrap !important;
                box-shadow: none !important;
                margin: 0 !important;
        }

        .hd-single-hero__actions .hd-btn--primary {
                background: linear-gradient(135deg, var(--crimson), var(--crimson-dark)) !important;
                border: none !important;
                color: #fff !important;
        }

        .hd-single-hero__actions .hd-btn--outline {
                background: rgba(255, 255, 255, 0.08) !important;
                border: 1px solid rgba(255, 255, 255, 0.12) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
                color: var(--text-primary) !important;
        }

        .hd-single-hero__actions svg {
                width: 14px !important;
                height: 14px !important;
        }
}

.hd-single-hero__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
}

.hd-single-hero__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
}

/* When using fallback featured image (small portrait), apply blur */
.hd-single-hero--blurred-bg .hd-single-hero__bg img {
        filter: blur(20px) brightness(0.4);
        transform: scale(1.15);
}

.hd-single-hero__gradient {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
                to top,
                var(--bg-primary) 0%,
                rgba(10, 10, 20, 0.9) 40%,
                rgba(10, 10, 20, 0.5) 70%,
                rgba(10, 10, 20, 0.3) 100%
        );
}

.hd-single-hero__content {
        position: relative;
        z-index: 2;
        display: flex;
        gap: var(--spacing-xl);
        padding: var(--spacing-2xl) 0;
        width: 100%;
        align-items: flex-end;
}

.hd-single-hero__poster {
        flex-shrink: 0;
        display: block;
}

@media (max-width: 767px) {
        .hd-single-hero__poster {
                width: 130px !important;
                margin: 0 auto var(--spacing-xs) !important;
                flex-shrink: 0 !important;
                position: relative !important;
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
                border-radius: 12px !important;
        }

        .hd-single-hero__image {
                width: 130px !important;
                height: auto !important;
                display: block !important;
                border-radius: 12px !important;
                border: 2px solid rgba(255, 255, 255, 0.1) !important;
        }

        .hd-hero-quality-badge {
                top: 6px !important;
                right: 6px !important;
                padding: 0.15rem 0.45rem !important;
                font-size: 0.55rem !important;
                border-radius: 4px !important;
        }
}

.hd-single-hero__image {
        width: 180px;
        height: auto;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        border: 2px solid var(--border);
}

/* Quality badge on single anime hero poster */
.hd-single-hero__poster {
        position: relative;
}

.hd-hero-quality-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 0.25rem 0.625rem;
        font-size: 0.625rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-radius: var(--radius-sm);
        line-height: 1.4;
}

.hd-hero-quality-badge.hd-hero-quality-4k {
        background: linear-gradient(135deg, #c8a44e 0%, #f5e6a3 30%, #c8a44e 50%, #a07c2a 70%, #f5e6a3 100%);
        background-size: 200% 200%;
        color: #1a0a00;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
        animation: hd-badge-shimmer 3s ease-in-out infinite;
        box-shadow: 0 2px 8px rgba(200, 164, 78, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hd-hero-quality-badge.hd-hero-quality-1080p {
        background: linear-gradient(135deg, #1e40af, #3b82f6);
        color: #fff;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.hd-hero-quality-badge.hd-hero-quality-720p {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6);
        color: #fff;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.hd-hero-quality-badge.hd-hero-quality-480p {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(8px);
        color: var(--text-secondary);
}

.hd-single-hero__info {
        flex: 1;
        min-width: 0;
}

.hd-single-hero__type {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.6rem;
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-radius: var(--pill-radius);
        margin-bottom: var(--spacing-md);
        box-shadow: var(--shadow-glow-sm);
}

.hd-single-hero__title {
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.15;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
        .hd-single-hero__title { font-size: 2.25rem; }
}

.hd-single-hero__chinese-title {
        font-size: 0.9375rem;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: var(--spacing-md);
}

.hd-single-hero__genres {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-md);
}

.hd-single-hero__genre-tag {
        display: inline-block;
        padding: 0.2rem 0.6rem;
        background: var(--crimson-subtle);
        border: 1px solid var(--border-active);
        color: var(--crimson-light);
        font-size: 0.6875rem;
        font-weight: 600;
        border-radius: var(--pill-radius);
        text-decoration: none;
        transition: background var(--transition-fast), color var(--transition-fast);
}

.hd-single-hero__genre-tag:hover {
        background: var(--crimson);
        color: #fff;
}

.hd-single-hero__meta-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
}

.hd-single-hero__status {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.8125rem;
        font-weight: 600;
}

.hd-single-hero__status--ongoing {
        color: var(--crimson);
}

.hd-single-hero__status--completed {
        color: #10b981;
}

.hd-single-hero__meta-item {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.8125rem;
        color: var(--text-secondary);
}

.hd-single-hero__meta-item svg {
        width: 16px;
        height: 16px;
        color: var(--gold);
        flex-shrink: 0;
}

/* Quality meta highlight — gold glow for 4K UHD */
.hd-hero-meta-quality {
        font-weight: 700;
        letter-spacing: 0.03em;
}

.hd-single-layout__main .hd-hero-meta-quality {
        color: var(--gold);
        text-shadow: 0 0 8px var(--gold-glow);
}

.hd-single-hero__actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        flex-wrap: wrap;
}

.hd-single-hero__actions .hd-btn--primary,
.hd-single-hero__actions .hd-btn--outline {
        min-height: 48px;
        padding: 0.75rem 1.75rem;
        font-size: 0.9375rem;
        font-weight: 700;
        border-radius: var(--radius-lg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        position: relative;
        white-space: nowrap;
}

.hd-single-hero__actions .hd-bookmark-btn.hd-btn--outline {
        flex: 0 0 auto;
        min-width: 0;
}

@media (max-width: 480px) {
        /* Keep buttons side-by-side on very small screens for premium pill density */
        .hd-single-hero__actions {
                flex-direction: row !important;
                align-items: center !important;
                flex-wrap: nowrap !important;
        }

        .hd-single-hero__actions .hd-btn--primary,
        .hd-single-hero__actions .hd-btn--outline,
        .hd-single-hero__actions .hd-bookmark-btn {
                width: 50% !important;
                flex: 1 1 50% !important;
        }
}

/* ─── Mobile Single Anime Page Optimizations ────────────────────────── */
@media (max-width: 767px) {
        /* Breadcrumb compact on mobile */
        .hd-breadcrumb {
                padding: var(--spacing-xs) 0;
                font-size: 0.6875rem;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
        }

        .hd-breadcrumb::-webkit-scrollbar {
                display: none;
        }

        .hd-breadcrumb__list {
                font-size: 0.6875rem;
                gap: 2px;
                flex-wrap: nowrap;
        }

        .hd-breadcrumb__item--active {
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 120px;
        }

        /* Episodes compact on mobile */
        .hd-episodes {
                padding: var(--spacing-sm);
                margin-bottom: var(--spacing-lg);
        }

        .hd-episodes__header {
                margin-bottom: var(--spacing-sm);
        }

        .hd-episodes__title {
                font-size: 1rem;
                gap: var(--spacing-xs);
        }

        .hd-episodes__title svg {
                width: 18px;
                height: 18px;
        }

        .hd-episodes__sort {
                padding: 0.25rem 0.5rem;
                font-size: 0.75rem;
        }

        .hd-episodes__list {
                max-height: 350px;
                gap: 4px;
        }

        .hd-episode-item {
                gap: 0.5rem;
                padding: 0.5rem 0.625rem;
                min-height: 44px;
        }

        .hd-episode-item__number {
                width: 32px;
                height: 32px;
                font-size: 0.6875rem;
                border-radius: var(--radius-sm);
        }

        .hd-episode-item__thumbnail {
                width: 56px;
        }

        .hd-episode-item__title {
                font-size: 0.75rem;
        }

        .hd-episode-item__meta {
                gap: 4px;
        }

        .hd-episode-item__duration {
                font-size: 0.625rem;
        }

        .hd-ep-sub-badge {
                font-size: 0.5625rem;
                padding: 1px 6px;
        }

        .hd-episodes__expand-btn {
                padding: 0.5rem 1rem;
                font-size: 0.8125rem;
        }

        /* Synopsis compact on mobile */
        .hd-synopsis {
                margin-bottom: var(--spacing-lg);
        }

        .hd-synopsis__title {
                font-size: 1rem;
                gap: var(--spacing-xs);
                margin-bottom: var(--spacing-sm);
        }

        .hd-synopsis__title svg {
                width: 18px;
                height: 18px;
        }

        /* Section headers compact on mobile */
        .hd-section-header__title {
                font-size: 1rem;
                gap: var(--spacing-xs);
        }

        .hd-section-header__title svg {
                width: 18px;
                height: 18px;
        }
}

/* ─── Single Layout (hd-single-layout) ──────────────────────────────── */
.hd-single-layout {
        display: flex;
        gap: var(--spacing-lg);
        padding: var(--spacing-xl) 0;
}

@media (max-width: 767px) {
        .hd-single-layout {
                flex-direction: column;
                gap: var(--spacing-md);
                padding: var(--spacing-md) 0;
        }
}

.hd-single-layout__main {
        flex: 1;
        min-width: 0;
}

.hd-single-layout__sidebar {
        display: none;
}

@media (min-width: 1024px) {
        .hd-single-layout__sidebar {
                display: block;
                width: 320px;
                flex-shrink: 0;
        }
}

/* ─── Mobile Anime Info Card (shown on small screens) ────────────── */
.hd-mobile-info-card {
        display: none;
}

@media (max-width: 1023px) {
        .hd-mobile-info-card {
                display: block;
                background: var(--glass-bg);
                backdrop-filter: var(--glass-blur);
                -webkit-backdrop-filter: var(--glass-blur);
                border: 1px solid var(--glass-border);
                border-radius: var(--radius-2xl);
                padding: var(--spacing-md);
                margin-bottom: var(--spacing-md);
        }

        .hd-mobile-info-card__grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: var(--spacing-sm);
        }

        .hd-mobile-info-card__item {
                display: flex;
                flex-direction: column;
                gap: 2px;
                padding: var(--spacing-sm);
                background: rgba(255, 255, 255, 0.03);
                border-radius: var(--radius-lg);
                border: 1px solid rgba(255, 255, 255, 0.04);
        }

        .hd-mobile-info-card__label {
                font-size: 0.625rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--text-muted);
        }

        .hd-mobile-info-card__value {
                font-size: 0.8125rem;
                font-weight: 600;
                color: var(--text-primary);
        }

        .hd-mobile-info-card__value--status-ongoing {
                color: var(--crimson);
        }

        .hd-mobile-info-card__value--status-completed {
                color: #10b981;
        }

        .hd-mobile-info-card__value--rating {
                color: var(--gold);
        }
}

/* ─── Anime Sidebar (hd-anime-sidebar) ──────────────────────────────── */
.hd-anime-sidebar {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-2xl);
        overflow: hidden;
        position: sticky;
        top: calc(72px + var(--spacing-lg));
}

.hd-anime-sidebar__thumbnail {
        aspect-ratio: 3 / 4;
        overflow: hidden;
}

.hd-anime-sidebar__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.hd-anime-sidebar__title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-primary);
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
        border-bottom: 1px solid var(--border);
}

.hd-anime-sidebar__details {
        padding: var(--spacing-sm) var(--spacing-md);
}

.hd-anime-sidebar__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.8125rem;
}

.hd-anime-sidebar__row:last-child {
        border-bottom: none;
}

.hd-anime-sidebar__row dt {
        color: var(--text-muted);
        font-weight: 500;
}

.hd-anime-sidebar__row dd {
        color: var(--text-primary);
        font-weight: 600;
        text-align: right;
}

.hd-anime-sidebar__status {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.125rem 0.5rem;
        border-radius: var(--radius-full);
}

.hd-anime-sidebar__status--ongoing {
        background: var(--crimson-subtle);
        color: var(--crimson);
}

.hd-anime-sidebar__status--completed {
        background: rgba(16, 185, 129, 0.15);
        color: #10b981;
}

.hd-anime-sidebar__rating {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--gold);
        font-weight: 700;
}

.hd-anime-sidebar__row--genres {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
}

.hd-anime-sidebar__row--genres dd {
        text-align: left;
        width: 100%;
}

.hd-anime-sidebar__genre-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
}

.hd-anime-sidebar__genre-tag {
        display: inline-block;
        padding: 0.15rem 0.5rem;
        background: var(--crimson-subtle);
        color: var(--crimson-light);
        font-size: 0.6875rem;
        font-weight: 600;
        border-radius: var(--radius-full);
        text-decoration: none;
        transition: background var(--transition-fast), color var(--transition-fast);
}

.hd-anime-sidebar__genre-tag:hover {
        background: var(--crimson);
        color: #fff;
}

.hd-anime-sidebar__share {
        padding: var(--spacing-md);
        border-top: 1px solid var(--border);
}

.hd-anime-sidebar__share-title {
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
}

.hd-anime-sidebar__share-buttons {
        display: flex;
        gap: var(--spacing-sm);
}

.hd-share-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        border: 1px solid var(--border);
        cursor: pointer;
        transition: all var(--transition-fast);
        text-decoration: none;
}

.hd-share-btn:hover {
        background: var(--crimson-subtle);
        border-color: var(--crimson);
        color: var(--crimson);
}

/* ─── Episodes (hd-episodes) ────────────────────────────────────────── */
.hd-episodes {
        margin-bottom: var(--spacing-xl);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-2xl);
        padding: var(--spacing-md);
}

.hd-episodes__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-md);
}

.hd-episodes__title {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
}

.hd-episodes__title svg {
        width: 24px;
        height: 24px;
        color: var(--crimson);
        flex-shrink: 0;
}

.hd-episodes__sort {
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        color: var(--text-primary);
        padding: 0.375rem 0.75rem;
        border-radius: var(--pill-radius);
        font-size: 0.8125rem;
        cursor: pointer;
}

.hd-episodes__list {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        max-height: 500px;
        overflow-y: auto;
        padding-right: var(--spacing-xs);
}

@media (min-width: 640px) {
        .hd-episodes__list {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }
}

.hd-episode-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: 0.75rem 1rem;
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-xl);
        text-decoration: none;
        color: var(--text-primary);
        transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
        min-height: 52px;
}

.hd-episode-item:hover {
        background: var(--bg-card-hover);
        border-color: var(--border-active);
        color: var(--text-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), var(--shadow-glow-sm);
}

.hd-episode-item:active {
        transform: translateY(0);
}

.hd-episode-item__number {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--crimson-subtle), rgba(230, 57, 70, 0.08));
        color: var(--crimson);
        font-size: 0.8125rem;
        font-weight: 700;
        border-radius: var(--pill-radius);
        flex-shrink: 0;
        border: 1px solid rgba(230, 57, 70, 0.15);
}

.hd-episode-item__thumbnail {
        position: relative;
        width: 96px;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-md);
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid var(--border);
}

.hd-episode-item__thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.hd-episode-item__play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        opacity: 0;
        transition: opacity var(--transition-fast);
}

.hd-episode-item:hover .hd-episode-item__play {
        opacity: 1;
}

.hd-episode-item__play svg {
        width: 20px;
        height: 20px;
}

.hd-episode-item__info {
        flex: 1;
        min-width: 0;
}

.hd-episode-item__title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        overflow: hidden;
        overflow-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}

.hd-episode-item__duration {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.6875rem;
        color: var(--text-muted);
        margin-top: 2px;
}

.hd-episode-item__duration svg {
        width: 12px;
        height: 12px;
}

.hd-episode-item__meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
        flex-wrap: wrap;
}

.hd-ep-sub-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.4;
}

/* Episode list mobile adjustments */
@media (max-width: 639px) {
        .hd-episodes {
                padding: var(--spacing-sm);
                border-radius: var(--radius-md);
        }

        .hd-episodes__list {
                max-height: 400px;
        }

        .hd-episode-item {
                gap: 0.625rem;
                padding: 0.625rem 0.75rem;
                min-height: 48px;
                border-radius: var(--radius-md);
        }

        .hd-episode-item__number {
                width: 36px;
                height: 36px;
                font-size: 0.75rem;
        }

        .hd-episode-item__thumbnail {
                width: 72px;
        }

        .hd-episode-item__title {
                font-size: 0.8125rem;
                -webkit-line-clamp: 2;
        }

        .hd-episodes__header {
                flex-direction: row;
                align-items: center;
                gap: var(--spacing-sm);
                flex-wrap: wrap;
        }

        .hd-episodes__sort {
                flex-shrink: 0;
        }
}

/* ─── Show All Episodes Button ─────────────────────────────────────── */
.hd-episodes__show-more {
        display: flex;
        justify-content: center;
        margin-top: var(--spacing-md);
}

.hd-episodes__expand-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.5rem;
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        border-radius: var(--pill-radius);
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
}

.hd-episodes__expand-btn:hover {
        background: var(--bg-card-hover);
        border-color: var(--border-hover);
        color: var(--text-primary);
        transform: translateY(-1px);
}

.hd-episodes__expand-btn:active {
        transform: translateY(0);
}

.hd-episodes__expand-btn svg {
        transition: transform 0.3s ease;
}

.hd-episodes__expand-btn.is-expanded svg {
        transform: rotate(180deg);
}

.hd-episodes__list.is-expanded {
        max-height: none !important;
}

/* ─── Synopsis (hd-synopsis) ────────────────────────────────────────── */
.hd-synopsis {
        margin-bottom: var(--spacing-xl);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-2xl);
        padding: var(--spacing-md);
}

.hd-synopsis__title {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
}

.hd-synopsis__title svg {
        width: 24px;
        height: 24px;
        color: var(--crimson);
        flex-shrink: 0;
}

.hd-synopsis__content {
        font-size: 0.9375rem;
        line-height: 1.75;
        color: var(--text-secondary);
}

.hd-synopsis__content p {
        margin-bottom: var(--spacing-md);
}

.hd-synopsis__content p:last-child {
        margin-bottom: 0;
}

/* ─── Content prose styles for the_content() ────────────────────────── */
.hd-content p {
        margin-bottom: var(--spacing-md);
}

.hd-content p:last-child {
        margin-bottom: 0;
}

.hd-content a {
        color: var(--crimson);
        text-decoration: underline;
}

.hd-content h1, .hd-content h2, .hd-content h3,
.hd-content h4, .hd-content h5, .hd-content h6 {
        color: var(--text-primary);
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-sm);
}

.hd-content img {
        border-radius: var(--radius-md);
        margin: var(--spacing-md) 0;
}

/* ─── Premium Callout Blocks & Alerts (note, warn, tip) ─── */
.hd-content .hd-note,
.hd-content .note,
.hd-content .hd-callout-note {
        background: rgba(59, 130, 246, 0.05) !important;
        border-left: 4px solid #3b82f6 !important;
        padding: 18px 22px !important;
        border-radius: 4px 12px 12px 4px !important;
        margin: 20px 0 !important;
        color: var(--text-secondary) !important;
        font-size: 0.9375rem !important;
        line-height: 1.65 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
        border-top: 1px solid rgba(59, 130, 246, 0.1) !important;
        border-right: 1px solid rgba(59, 130, 246, 0.1) !important;
        border-bottom: 1px solid rgba(59, 130, 246, 0.1) !important;
}
.hd-content .hd-note::before,
.hd-content .note::before,
.hd-content .hd-callout-note::before {
        content: '📝 NOTE';
        display: block;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        color: #3b82f6;
        margin-bottom: 8px;
}

.hd-content .hd-warn,
.hd-content .warn,
.hd-content .warning,
.hd-content .hd-callout-warning {
        background: rgba(245, 158, 11, 0.05) !important;
        border-left: 4px solid #f59e0b !important;
        padding: 18px 22px !important;
        border-radius: 4px 12px 12px 4px !important;
        margin: 20px 0 !important;
        color: var(--text-secondary) !important;
        font-size: 0.9375rem !important;
        line-height: 1.65 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
        border-top: 1px solid rgba(245, 158, 11, 0.1) !important;
        border-right: 1px solid rgba(245, 158, 11, 0.1) !important;
        border-bottom: 1px solid rgba(245, 158, 11, 0.1) !important;
}
.hd-content .hd-warn::before,
.hd-content .warn::before,
.hd-content .warning::before,
.hd-content .hd-callout-warning::before {
        content: '⚠️ WARNING';
        display: block;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        color: #f59e0b;
        margin-bottom: 8px;
}

.hd-content .hd-tip,
.hd-content .tip,
.hd-content .hd-callout-tip {
        background: rgba(16, 185, 129, 0.05) !important;
        border-left: 4px solid #10b981 !important;
        padding: 18px 22px !important;
        border-radius: 4px 12px 12px 4px !important;
        margin: 20px 0 !important;
        color: var(--text-secondary) !important;
        font-size: 0.9375rem !important;
        line-height: 1.65 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
        border-top: 1px solid rgba(16, 185, 129, 0.1) !important;
        border-right: 1px solid rgba(16, 185, 129, 0.1) !important;
        border-bottom: 1px solid rgba(16, 185, 129, 0.1) !important;
}
.hd-content .hd-tip::before,
.hd-content .tip::before,
.hd-content .hd-callout-tip::before {
        content: '💡 PRO TIP';
        display: block;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        color: #10b981;
        margin-bottom: 8px;
}

/* ─── Premium Callout Blockquotes ─── */
.hd-content blockquote {
        position: relative;
        margin: 24px 0;
        padding: 18px 24px;
        background: rgba(255, 255, 255, 0.02) !important;
        border-left: 4px solid var(--crimson) !important;
        border-radius: 0 12px 12px 0 !important;
        font-style: italic !important;
        color: var(--text-primary) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.01) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.01) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.01) !important;
}
.hd-content blockquote p {
        margin: 0 !important;
        line-height: 1.7 !important;
}

/* ─── Premium High-End Responsive Tables ─── */
.hd-content-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 24px 0 !important;
        border-radius: 12px !important;
        border: 1px solid var(--border-primary) !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
        background: rgba(10, 10, 20, 0.4) !important;
}

.hd-content table {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: collapse !important;
        border: none !important;
}

.hd-content th {
        background: rgba(255, 255, 255, 0.03) !important;
        color: var(--text-primary) !important;
        font-weight: 700 !important;
        text-align: left !important;
        padding: 14px 18px !important;
        border-bottom: 1px solid var(--border-primary) !important;
        font-size: 0.8125rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
}

.hd-content td {
        padding: 14px 18px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        color: var(--text-secondary) !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        transition: all 0.2s ease !important;
}

.hd-content tr:last-child td {
        border-bottom: none !important;
}

.hd-content tr:hover td {
        background: rgba(255, 255, 255, 0.015) !important;
        color: var(--text-primary) !important;
}

/* ─── Premium Lists (UL/OL) ─── */
.hd-content ul {
        list-style: none !important;
        padding-left: 0 !important;
        margin: 20px 0 !important;
}

.hd-content ul li {
        position: relative !important;
        padding-left: 24px !important;
        margin-bottom: 10px !important;
        color: var(--text-secondary) !important;
        line-height: 1.65 !important;
        font-size: 0.9375rem !important;
}

.hd-content ul li::before {
        content: '' !important;
        position: absolute !important;
        left: 8px !important;
        top: 10px !important;
        width: 6px !important;
        height: 6px !important;
        background: var(--crimson) !important;
        border-radius: 50% !important;
        box-shadow: 0 0 8px var(--crimson) !important;
}

.hd-content ol {
        counter-reset: hd-counter !important;
        list-style: none !important;
        padding-left: 0 !important;
        margin: 20px 0 !important;
}

.hd-content ol li {
        counter-increment: hd-counter !important;
        position: relative !important;
        padding-left: 28px !important;
        margin-bottom: 10px !important;
        color: var(--text-secondary) !important;
        line-height: 1.65 !important;
        font-size: 0.9375rem !important;
}

.hd-content ol li::before {
        content: counter(hd-counter) !important;
        position: absolute !important;
        left: 0 !important;
        top: 3px !important;
        width: 18px !important;
        height: 18px !important;
        background: rgba(230, 57, 70, 0.1) !important;
        color: var(--crimson) !important;
        font-size: 0.6875rem !important;
        font-weight: 700 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(230, 57, 70, 0.2) !important;
}

/* ─── Premium Drop Caps & Highlight Marks ─── */
.hd-content p.has-drop-cap::first-letter {
        float: left !important;
        font-size: 3.5rem !important;
        line-height: 0.8 !important;
        font-weight: 800 !important;
        margin: 4px 8px 0 0 !important;
        color: var(--crimson) !important;
        text-shadow: 0 0 15px rgba(230, 57, 70, 0.25) !important;
}

.hd-content mark {
        background: rgba(230, 57, 70, 0.15) !important;
        color: #ff4a5a !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        border: 1px solid rgba(230, 57, 70, 0.25) !important;
}

@media (max-width: 767px) {
        .hd-content th, 
        .hd-content td {
                padding: 10px 12px !important;
                font-size: 0.8125rem !important;
        }
}

/* ─── Badge for Post type ────────────────────────────────────────────── */
.anime-badge-post {
        background: var(--text-muted);
        color: #fff;
}

/* ==========================================================================
   Bookmark Page Styles
   ========================================================================== */

.hd-page-bookmark-header,
.hd-page-history-header,
.hd-page-schedule-header,
.hd-page-az-header {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
}

.hd-page-bookmark-header .hd-container,
.hd-page-history-header .hd-container,
.hd-page-schedule-header .hd-container,
.hd-page-az-header .hd-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--spacing-md);
}

.hd-page-header__info {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
}

.hd-page-header__title {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: 1.75rem;
        font-weight: 800;
        color: var(--text-primary);
}

.hd-page-header__title svg {
        color: var(--crimson);
        flex-shrink: 0;
        width: 28px;
        height: 28px;
}

@media (min-width: 768px) {
        .hd-page-header__title {
                font-size: 2rem;
        }

        .hd-page-header__title svg {
                width: 32px;
                height: 32px;
        }
}

.hd-page-header__count {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
}

/* ─── Schedule Page Specific Header ─────────────────────────────────────── */
.hd-page-schedule-header {
        background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
        position: relative;
}

.hd-page-schedule-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--crimson), transparent);
}

/* ─── Schedule page mobile adjustments ──────────────────────────────── */
@media (max-width: 639px) {
        .hd-page-schedule-header {
                padding: var(--spacing-md) 0 var(--spacing-sm);
        }

        .hd-page-header__title {
                font-size: 1.25rem;
        }

        .hd-page-header__title svg {
                width: 22px;
                height: 22px;
        }

        .hd-page-header__count {
                font-size: 0.75rem;
        }
}

.hd-bookmark-actions,
.hd-history-actions {
        display: flex;
        gap: var(--spacing-sm);
}

.hd-bookmark-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-3xl);
        gap: var(--spacing-md);
        color: var(--text-secondary);
}

.hd-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border);
        border-top-color: var(--crimson);
        border-radius: 50%;
        animation: hd-spin 0.8s linear infinite;
}

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

/* Bookmark remove button */
.hd-bookmark-item {
        position: relative;
}

.hd-bookmark-remove {
        position: absolute;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        z-index: 10;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        border-radius: 50%;
        color: var(--text-secondary);
        opacity: 0;
        transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
        cursor: pointer;
}

.anime-card:hover .hd-bookmark-remove {
        opacity: 1;
}

.hd-bookmark-remove:hover {
        background: var(--crimson);
        color: #fff;
}

/* ==========================================================================
   History Page Styles
   ========================================================================== */

.hd-history-content {
        padding: var(--spacing-xl) 0;
}

.hd-history-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
}

.hd-history-group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
}

.hd-history-group-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-primary);
        padding-bottom: var(--spacing-sm);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
}

.hd-history-items {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
}

.hd-history-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        overflow: hidden;
        position: relative;
        transition: background var(--transition-fast);
}

.hd-history-item:hover {
        background: var(--bg-card-hover);
}

.hd-history-item-link {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        flex: 1;
        min-width: 0;
        text-decoration: none;
        color: inherit;
        padding: var(--spacing-sm);
}

.hd-history-item-thumb {
        width: 80px;
        height: 56px;
        flex-shrink: 0;
        border-radius: var(--radius-md);
        overflow: hidden;
        position: relative;
}

.hd-history-item-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.hd-history-item-play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        opacity: 0;
        transition: opacity var(--transition-fast);
}

.hd-history-item:hover .hd-history-item-play {
        opacity: 1;
}

@media (min-width: 768px) {
        .hd-history-item-thumb {
                width: 120px;
                height: 68px;
        }
}

.hd-history-item-info {
        flex: 1;
        min-width: 0;
}

.hd-history-item-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.hd-history-item-episode {
        font-size: 0.8125rem;
        color: var(--text-secondary);
        margin-top: 2px;
}

.hd-history-item-meta {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        margin-top: var(--spacing-xs);
        font-size: 0.75rem;
        color: var(--text-muted);
}

.hd-history-item-meta svg {
        width: 12px;
        height: 12px;
}

.hd-history-item-progress-text {
        color: var(--gold);
}

.hd-history-item-progress-bar {
        height: 3px;
        background: var(--bg-elevated);
        border-radius: var(--radius-full);
        margin-top: var(--spacing-xs);
        overflow: hidden;
}

.hd-history-item-progress-fill {
        height: 100%;
        background: var(--crimson);
        border-radius: var(--radius-full);
        transition: width var(--transition-base);
}

.hd-history-remove {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        border-radius: var(--radius-md);
        opacity: 0;
        transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
        margin-right: var(--spacing-sm);
        flex-shrink: 0;
}

.hd-history-item:hover .hd-history-remove {
        opacity: 1;
}

.hd-history-remove:hover {
        color: var(--crimson);
        background: var(--crimson-subtle);
}

/* ==========================================================================
   Schedule Page Styles
   ========================================================================== */

.hd-schedule-tabs-wrapper {
        position: sticky;
        top: 64px;
        z-index: var(--z-sticky);
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        padding: var(--spacing-sm) 0;
}

@media (min-width: 1024px) {
        .hd-schedule-tabs-wrapper {
                top: 72px;
        }
}

.hd-schedule-tabs {
        display: flex;
        gap: var(--spacing-xs);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
}

.hd-schedule-tabs::-webkit-scrollbar {
        display: none;
}

.hd-schedule-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 0.625rem 1rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        flex-shrink: 0;
        position: relative;
        min-height: 48px;
        min-width: 72px;
        justify-content: center;
        flex: 1;
}

.hd-schedule-tab:hover {
        background: var(--bg-card-hover);
        color: var(--text-primary);
        border-color: var(--border-hover);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hd-schedule-tab:active {
        transform: translateY(0);
        box-shadow: none;
}



.hd-schedule-tab.active {
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        border-color: var(--crimson);
        box-shadow: 0 2px 12px rgba(220, 38, 38, 0.3);
}

.hd-schedule-tab-day {
        font-weight: 600;
}

.hd-schedule-tab-count {
        font-size: 0.6875rem;
        background: var(--crimson-subtle);
        color: var(--crimson);
        padding: 0 6px;
        border-radius: var(--radius-full);
        line-height: 1.5;
        font-weight: 700;
}

.hd-schedule-tab.active .hd-schedule-tab-count {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
}

.hd-schedule-tab-today {
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gold);
}

.hd-schedule-tab.active .hd-schedule-tab-today {
        color: #fff;
}

/* Schedule Panels */
.hd-schedule-panel {
        display: none;
        padding: var(--spacing-xl) 0;
}

.hd-schedule-panel.active {
        display: block;
}

.hd-schedule-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
}

@media (min-width: 640px) {
        .hd-schedule-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1024px) {
        .hd-schedule-grid {
                grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 1280px) {
        .hd-schedule-grid {
                grid-template-columns: repeat(4, 1fr);
        }
}

/* Schedule Card */
.hd-schedule-card {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        overflow: hidden;
        transition: transform var(--transition-base), box-shadow var(--transition-base);
        border: 1px solid var(--border);
}

.hd-schedule-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--border-hover);
}

.hd-schedule-card-link {
        display: flex;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        text-decoration: none;
        color: inherit;
        align-items: flex-start;
}

.hd-schedule-card-thumb {
        width: 80px;
        flex-shrink: 0;
        aspect-ratio: 2 / 3;
        border-radius: var(--radius-md);
        overflow: hidden;
        position: relative;
        align-self: flex-start;
}

.hd-schedule-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.hd-schedule-card-info {
        flex: 1;
        min-width: 0;
}

.hd-schedule-card-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.hd-schedule-card-chinese {
        font-size: 0.8125rem;
        color: var(--gold);
        margin-top: 2px;
}

.hd-schedule-card-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-sm);
        font-size: 0.75rem;
        color: var(--text-secondary);
}

.hd-schedule-card-meta > span {
        display: inline-flex;
        align-items: center;
        gap: 3px;
}

.hd-schedule-card-meta svg {
        width: 12px;
        height: 12px;
}

.hd-schedule-card-rating {
        color: var(--gold) !important;
        font-weight: 600;
}

.hd-schedule-card-time {
        color: var(--crimson-light);
        font-weight: 500;
        white-space: nowrap;
}

.hd-schedule-card-time svg {
        color: var(--crimson);
}

.hd-schedule-card-ep {
        color: var(--text-secondary);
        font-weight: 500;
        white-space: nowrap;
}

.hd-schedule-card-ep svg {
        color: var(--gold);
}

/* Unassigned ongoing */
.hd-schedule-unassigned {
        padding: var(--spacing-2xl) 0;
        border-top: 1px solid var(--border);
}

/* Schedule tab & card mobile adjustments */
@media (max-width: 639px) {
        .hd-schedule-tabs-wrapper {
                padding: var(--spacing-xs) 0;
        }

        .hd-schedule-tab {
                padding: 0.5rem 0.5rem;
                min-width: 48px;
                min-height: 44px;
                font-size: 0.6875rem;
                border-radius: var(--radius-md);
        }

        .hd-schedule-tab-day {
                font-size: 0.625rem;
        }

        .hd-schedule-tab-count {
                font-size: 0.5625rem;
                padding: 0 4px;
        }

        .hd-schedule-tab-today {
                font-size: 0.5rem;
        }

        .hd-schedule-card-link {
                padding: 0.75rem;
        }

        .hd-schedule-card-thumb {
                width: 64px;
        }

        .hd-schedule-card-title {
                font-size: 0.875rem;
        }

        .hd-schedule-card-meta {
                gap: 0.375rem;
        }
}

/* ==========================================================================
   Today's Schedule (Homepage Section)
   ========================================================================== */

.hd-todays-schedule-section {
        padding: var(--spacing-2xl) 0;
}

.hd-todays-schedule-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
        flex-wrap: wrap;
}

.hd-todays-schedule-title-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
}

.hd-todays-schedule-date {
        font-size: 0.8125rem;
        color: var(--text-secondary);
        font-weight: 500;
        padding-left: calc(4px + 18px + 8px + 4px);
}

/* Two-column grid for schedule cards */
.hd-todays-schedule-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
}

@media (min-width: 640px) {
        .hd-todays-schedule-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1024px) {
        .hd-todays-schedule-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

/* Schedule card */
.hd-todays-schedule-card {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        text-decoration: none;
        color: inherit;
        transition: all 0.2s ease;
        position: relative;
}

.hd-todays-schedule-card:hover {
        background: var(--bg-card-hover);
        border-color: var(--border-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
}

/* Clock/time column */
.hd-todays-schedule-time {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: 2px solid var(--border-hover);
        background: var(--bg-elevated);
        color: var(--text-secondary);
        font-size: 0.625rem;
        font-weight: 600;
        transition: all 0.2s ease;
}

.hd-todays-schedule-time svg {
        width: 14px;
        height: 14px;
}

.hd-todays-schedule-card:first-child .hd-todays-schedule-time,
.hd-todays-schedule-card:hover .hd-todays-schedule-time {
        border-color: var(--crimson);
        color: var(--crimson-light);
        background: var(--crimson-subtle);
}

/* Thumbnail */
.hd-todays-schedule-thumb {
        width: 56px;
        flex-shrink: 0;
        aspect-ratio: 2 / 3;
        border-radius: var(--radius-md);
        overflow: hidden;
        position: relative;
}

.hd-todays-schedule-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

/* Info section */
.hd-todays-schedule-info {
        flex: 1;
        min-width: 0;
}

.hd-todays-schedule-name {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
}

.hd-todays-schedule-chinese {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.75rem;
        color: var(--gold);
        margin-top: 2px;
}

.hd-todays-schedule-meta {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-top: 6px;
        font-size: 0.75rem;
        color: var(--text-secondary);
}

.hd-todays-schedule-ep {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: var(--text-secondary);
        font-weight: 500;
}

/* Bottom time navigation bar */
.hd-todays-schedule-times {
        display: flex;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-lg);
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
}

.hd-todays-schedule-times::-webkit-scrollbar {
        display: none;
}

.hd-todays-time-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0.375rem 0.75rem;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        flex-shrink: 0;
}

.hd-todays-time-btn:hover {
        background: var(--bg-card-hover);
        color: var(--text-primary);
        border-color: var(--border-hover);
}

.hd-todays-time-btn.active {
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        border-color: var(--crimson);
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

/* Mobile adjustments */
@media (max-width: 639px) {
        .hd-todays-schedule-card {
                padding: 0.75rem;
                gap: 0.625rem;
        }

        .hd-todays-schedule-time {
                width: 42px;
                height: 42px;
                font-size: 0.5625rem;
        }

        .hd-todays-schedule-time svg {
                width: 12px;
                height: 12px;
        }

        .hd-todays-schedule-thumb {
                width: 48px;
        }

        .hd-todays-schedule-name {
                font-size: 0.8125rem;
        }

        .hd-todays-schedule-chinese {
                font-size: 0.6875rem;
        }

        .hd-todays-schedule-meta {
                gap: 0.25rem;
        }

        .hd-todays-time-btn {
                padding: 0.25rem 0.5rem;
                font-size: 0.6875rem;
        }
}

/* ==========================================================================
   Trending Section (Cover Style Cards)
   ========================================================================== */

.hd-trending-cover-section {
        padding: var(--spacing-2xl) 0;
}

.hd-trending-cover-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        flex-wrap: wrap;
}

.hd-trending-cover-tabs {
        display: flex;
        gap: 6px;
}

.hd-trending-cover-tab {
        padding: 6px 16px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
}

.hd-trending-cover-tab:hover {
        color: var(--text-primary);
        border-color: var(--border-hover);
}

.hd-trending-cover-tab.active {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--border-hover);
}

/* Time filters */
.hd-trending-time-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: var(--spacing-lg);
}

.hd-trending-time-tab {
        padding: 5px 14px;
        border-radius: 20px;
        border: 1px solid transparent;
        background: var(--bg-card);
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
}

.hd-trending-time-tab:hover {
        color: var(--text-primary);
        background: var(--bg-card-hover);
}

.hd-trending-time-tab.active {
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        border-color: var(--crimson);
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

/* Panel visibility */
.hd-trending-panel {
        display: none;
}

.hd-trending-panel.active {
        display: block;
}

/* Cover card grid */
.hd-trending-cover-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
}

@media (min-width: 480px) {
        .hd-trending-cover-grid {
                grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 640px) {
        .hd-trending-cover-grid {
                grid-template-columns: repeat(4, 1fr);
        }
}

@media (min-width: 768px) {
        .hd-trending-cover-grid {
                grid-template-columns: repeat(5, 1fr);
        }
}

@media (min-width: 1024px) {
        .hd-trending-cover-grid {
                grid-template-columns: repeat(6, 1fr);
        }
}

/* Cover card */
.hd-trending-cover-card {
        text-decoration: none;
        color: inherit;
        display: block;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-radius: var(--radius-lg);
}

.hd-trending-cover-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
}

/* Cover thumbnail */
.hd-trending-cover-thumb {
        position: relative;
        aspect-ratio: 2 / 3;
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: var(--bg-card);
}

.hd-trending-cover-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.hd-trending-cover-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
                to bottom,
                transparent 0%,
                transparent 30%,
                rgba(0, 0, 0, 0.3) 55%,
                rgba(0, 0, 0, 0.65) 100%
        );
        pointer-events: none;
}

/* Badges on cover */
.hd-trending-cover-badges-top {
        position: absolute;
        top: 6px;
        left: 6px;
        right: 6px;
        display: flex;
        justify-content: space-between;
        z-index: 2;
}

.hd-trending-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.3px;
        line-height: 1.5;
        text-transform: uppercase;
}

.hd-trending-badge-ep {
        background: var(--crimson);
        color: #fff;
}

.hd-trending-badge-quality {
        background: var(--crimson);
        color: #fff;
}

.hd-trending-badge-status {
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
}

.hd-trending-badge-ongoing {
        background: #2ecc71;
        color: #fff;
}

.hd-trending-badge-completed {
        background: #9b59b6;
        color: #fff;
}

.hd-trending-badge-upcoming {
        background: #3498db;
        color: #fff;
}

.hd-trending-badge-hiatus {
        background: #f1c40f;
        color: #1a1a35;
}

.hd-trending-badge-type {
        position: absolute;
        left: 6px;
        bottom: 6px;
        z-index: 2;
        background: rgba(10, 10, 20, 0.85);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cover info (below poster) */
.hd-trending-cover-info {
        padding: 8px 2px 4px;
}

.hd-trending-cover-title {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
}

.hd-trending-cover-chinese {
        display: block;
        font-size: 0.6875rem;
        color: var(--gold);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

/* Mobile adjustments */
@media (max-width: 479px) {
        .hd-trending-cover-header {
                flex-direction: column;
                align-items: flex-start;
        }

        .hd-trending-badge {
                font-size: 0.5625rem;
                padding: 1px 6px;
        }
}

/* ==========================================================================
   AZ Lists Page Styles
   ========================================================================== */

.hd-az-alphabet {
        position: sticky;
        top: 64px;
        z-index: var(--z-sticky);
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        padding: var(--spacing-md) 0;
}

@media (min-width: 1024px) {
        .hd-az-alphabet {
                top: 72px;
        }
}

.hd-az-alphabet-inner {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        justify-content: center;
        flex-wrap: wrap;
        padding: var(--spacing-xs) 0;
}

.hd-az-alphabet-inner::-webkit-scrollbar {
        display: none;
}

.hd-az-letter {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 50px;
        padding: 2px 6px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        transition: all var(--transition-fast);
        flex-shrink: 0;
        position: relative;
        gap: 1px;
        overflow: visible;
}

.hd-az-letter:hover {
        background: var(--bg-elevated);
        color: var(--text-primary);
        border-color: var(--border-hover);
}

.hd-az-letter.active {
        background: var(--crimson);
        color: #fff;
        border-color: var(--crimson);
}

.hd-az-letter.disabled {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
}

.hd-az-letter-count {
        font-size: 0.625rem;
        background: var(--bg-elevated);
        color: var(--text-muted);
        padding: 0 5px;
        border-radius: var(--radius-full);
        line-height: 1.4;
        font-weight: 700;
        display: inline-block;
        text-align: center;
        min-width: 18px;
        white-space: nowrap;
}

.hd-az-letter.active .hd-az-letter-count {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
}

.hd-az-letter-count--zero {
        opacity: 0.35;
}

.hd-az-letter.disabled .hd-az-letter-count--zero {
        opacity: 0.2;
}

@media (min-width: 640px) {
        .hd-az-letter {
                min-width: 46px;
                height: 54px;
                font-size: 0.9375rem;
        }
        .hd-az-letter-count {
                font-size: 0.6875rem;
                min-width: 20px;
        }
}

@media (min-width: 1024px) {
        .hd-az-letter {
                min-width: 50px;
                height: 58px;
                font-size: 1rem;
        }
        .hd-az-letter-count {
                font-size: 0.75rem;
                min-width: 22px;
        }
}

/* AZ Genre Filter */
.hd-az-genre-filter {
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--border);
}

.hd-az-genre-filter .genre-pill.active {
        background: var(--crimson-subtle);
        border-color: var(--crimson);
        color: var(--crimson);
}

/* AZ Grid */
.hd-az-grid {
        padding: var(--spacing-xl) 0;
}

/* No results compact */
.hd-no-results--compact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-2xl);
        color: var(--text-secondary);
        text-align: center;
}

.hd-no-results--compact > svg {
        opacity: 0.3;
}

/* ==========================================================================
   HD Buttons
   ========================================================================== */

.hd-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: var(--radius-lg);
        border: none;
        cursor: pointer;
        transition: all var(--transition-fast);
        text-decoration: none;
}

.hd-btn--primary {
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        box-shadow: var(--shadow-crimson);
}

.hd-btn--primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(230, 57, 70, 0.35);
        color: #fff;
}

.hd-btn--ghost {
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border);
}

.hd-btn--ghost:hover {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--border-hover);
}

.hd-btn--sm {
        padding: 0.375rem 0.875rem;
        font-size: 0.8125rem;
}

.hd-btn--sm svg {
        width: 14px;
        height: 14px;
}

/* ==========================================================================
   Characters & Voice Actors
   ========================================================================== */

.hd-characters {
        margin-top: var(--spacing-xl);
}

.hd-characters__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--spacing-md);
}

.hd-character-card {
        display: flex;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        transition: border-color var(--transition-fast), background var(--transition-fast);
}

.hd-character-card:hover {
        border-color: var(--border-hover);
        background: var(--bg-card-hover);
}

.hd-character-card__image {
        flex-shrink: 0;
        width: 72px;
        height: 96px;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--bg-secondary);
}

.hd-character-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.hd-character-card__placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
}

.hd-character-card__info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
}

.hd-character-card__name {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.3;
}

.hd-character-card__role {
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--crimson);
        padding: 0.0625rem 0.375rem;
        background: var(--crimson-subtle);
        border-radius: var(--radius-sm);
        align-self: flex-start;
}

.hd-character-card__va-list {
        margin-top: 0.375rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
}

.hd-character-card__va {
        display: flex;
        align-items: center;
        gap: 0.375rem;
}

.hd-character-card__va-img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
}

.hd-character-card__va-name {
        font-size: 0.75rem;
        color: var(--text-secondary);
        font-weight: 500;
}

.hd-character-card__va-lang {
        font-size: 0.625rem;
        color: var(--text-muted);
        background: var(--bg-secondary);
        padding: 0 0.25rem;
        border-radius: var(--radius-sm);
        margin-left: auto;
        flex-shrink: 0;
}

@media (max-width: 639px) {
        .hd-characters__grid {
                grid-template-columns: 1fr;
        }
}

/* ==========================================================================
   Staff
   ========================================================================== */

.hd-staff {
        margin-top: var(--spacing-xl);
}

.hd-staff__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--spacing-md);
}

.hd-staff-card {
        display: flex;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        align-items: center;
        transition: border-color var(--transition-fast), background var(--transition-fast);
}

.hd-staff-card:hover {
        border-color: var(--border-hover);
        background: var(--bg-card-hover);
}

.hd-staff-card__image {
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        overflow: hidden;
        background: var(--bg-secondary);
}

.hd-staff-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.hd-staff-card__placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
}

.hd-staff-card__info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
}

.hd-staff-card__name {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.hd-staff-card__role {
        font-size: 0.6875rem;
        color: var(--text-muted);
        font-weight: 500;
}

@media (max-width: 639px) {
        .hd-staff__grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.hd-reviews {
        margin-top: var(--spacing-xl);
}

.hd-reviews__list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        max-height: 600px;
        overflow-y: auto;
        padding-right: var(--spacing-xs);
}

.hd-reviews__list::-webkit-scrollbar {
        width: 4px;
}

.hd-reviews__list::-webkit-scrollbar-track {
        background: var(--bg-secondary);
        border-radius: 2px;
}

.hd-reviews__list::-webkit-scrollbar-thumb {
        background: var(--bg-elevated);
        border-radius: 2px;
}

.hd-review-card {
        padding: var(--spacing-md);
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
}

.hd-review-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
}

.hd-review-card__author {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        color: var(--text-secondary);
}

.hd-review-card__author-name {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-primary);
}

.hd-review-card__meta {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
}

.hd-review-card__rating {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--gold);
}

.hd-review-card__rating svg {
        width: 14px;
        height: 14px;
}

.hd-review-card__source {
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 0.125rem 0.5rem;
        background: var(--bg-secondary);
        color: var(--text-muted);
        border-radius: var(--radius-full);
}

.hd-review-card__text {
        font-size: 0.8125rem;
        line-height: 1.6;
        color: var(--text-secondary);
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.hd-review-card__date {
        margin-top: var(--spacing-sm);
        font-size: 0.6875rem;
        color: var(--text-muted);
}

/* ==========================================================================
   Related Entries
   ========================================================================== */

.hd-related-entries {
        margin-top: var(--spacing-xl);
}

.hd-related-entries__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--spacing-md);
}

.hd-related-entry-card {
        display: block;
        text-decoration: none;
        color: inherit;
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        overflow: hidden;
        transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hd-related-entry-card:hover {
        border-color: var(--border-hover);
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        color: inherit;
}

.hd-related-entry-card__image {
        position: relative;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        background: var(--bg-secondary);
}

.hd-related-entry-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-slow);
}

.hd-related-entry-card:hover .hd-related-entry-card__image img {
        transform: scale(1.05);
}

.hd-related-entry-card__placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
}

.hd-related-entry-card__info {
        padding: var(--spacing-sm);
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
}

.hd-related-entry-card__title {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.hd-related-entry-card__type {
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 0.0625rem 0.375rem;
        border-radius: var(--radius-sm);
        align-self: flex-start;
}

.hd-related-entry-card__type--sequel { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.hd-related-entry-card__type--prequel { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.hd-related-entry-card__type--side-story { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.hd-related-entry-card__type--alternative { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.hd-related-entry-card__type--spin-off { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.hd-related-entry-card__type--other { background: var(--bg-secondary); color: var(--text-muted); }

@media (max-width: 639px) {
        .hd-related-entries__grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

/* Scroll to Top */
.scroll-to-top {
        position: fixed;
        bottom: var(--spacing-xl);
        right: var(--spacing-xl);
        width: 44px;
        height: 44px;
        background: var(--crimson);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-sticky);
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
        box-shadow: var(--shadow-crimson);
        will-change: transform;
        bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom, 0px));
}

.scroll-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
}

.scroll-to-top:hover {
        background: var(--crimson-light);
        transform: translateY(-3px);
        box-shadow: 0 6px 24px rgba(230, 57, 70, 0.4);
}

.scroll-to-top svg {
        width: 20px;
        height: 20px;
}

@media (max-width: 639px) {
        .scroll-to-top {
                width: 40px;
                height: 40px;
                bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
                right: var(--spacing-md);
        }
}

/* ─── Page Animations ─────────────────────────────────────────── */
.fade-in-section {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-section.is-visible {
        opacity: 1;
        transform: translateY(0);
}
.stagger-item {
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.4s ease, transform 0.4s ease;
}
.stagger-item.is-visible {
        opacity: 1;
        transform: translateY(0);
}

/* ─── Lazy-Load Transitions ───────────────────────────────────── */
img.hd-lazy {
        opacity: 0;
        transition: opacity 0.3s ease;
}
img.hd-lazy--pending {
        opacity: 0;
}
img.hd-lazy--loaded {
        opacity: 1;
}
img.hd-lazy--error {
        opacity: 0.5;
}
.hd-lazy-bg {
        opacity: 0;
        transition: opacity 0.3s ease;
}
.hd-lazy-bg.hd-lazy--loaded {
        opacity: 1;
}

/* ==========================================================================
   1. Shared Layout & Container Classes (hd- prefix)
   ========================================================================== */

.hd-container {
        width: 100%;
        max-width: 80rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
}

@media (min-width: 640px) {
        .hd-container {
                padding-left: var(--spacing-lg);
                padding-right: var(--spacing-lg);
        }
}

@media (min-width: 1024px) {
        .hd-container {
                padding-left: var(--spacing-xl);
                padding-right: var(--spacing-xl);
        }
}

.hd-container--narrow {
        max-width: 60rem;
}

.hd-main {
        flex: 1 1 0%;
        min-height: calc(100vh - 64px - 200px);
}

/* ==========================================================================
   2. Breadcrumb
   ========================================================================== */

.hd-breadcrumb {
        padding: var(--spacing-md) 0;
        margin-bottom: var(--spacing-md);
}

.hd-breadcrumb__list {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        flex-wrap: wrap;
}

.hd-breadcrumb__item {
        display: inline;
        color: var(--text-secondary);
        font-size: 0.8125rem;
}

.hd-breadcrumb__item a {
        color: var(--text-secondary);
        text-decoration: none;
        transition: color var(--transition-fast);
}

.hd-breadcrumb__item a:hover {
        color: var(--crimson);
}

.hd-breadcrumb__item--active {
        color: var(--text-primary);
}

.hd-breadcrumb-sep {
        color: var(--text-muted);
        margin: 0 var(--spacing-xs);
        font-size: 0.75rem;
}

.hd-breadcrumb-current {
        color: var(--text-primary);
        font-weight: 600;
}

/* ==========================================================================
   3. Buttons (hd-btn)
   ========================================================================== */

.hd-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0.5rem 1.25rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: 0.875rem;
        transition: all var(--transition-fast);
        cursor: pointer;
        text-decoration: none;
        border: none;
        line-height: 1.4;
}

.hd-btn--primary {
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        box-shadow: var(--shadow-crimson);
}

.hd-btn--primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 24px rgba(230, 57, 70, 0.4);
        color: #fff;
}

.hd-btn--outline {
        background: transparent;
        border: 1px solid var(--border-hover);
        color: var(--text-primary);
}

.hd-btn--outline:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--border-active);
        color: var(--text-primary);
}

.hd-btn--lg {
        padding: 0.75rem 2rem;
        font-size: 0.9375rem;
}

.hd-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0.5rem 1.25rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: 0.875rem;
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        box-shadow: var(--shadow-crimson);
        transition: all var(--transition-fast);
        cursor: pointer;
        text-decoration: none;
        border: none;
}

.hd-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 24px rgba(230, 57, 70, 0.4);
        color: #fff;
}

.hd-btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0.5rem 1.25rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: 0.875rem;
        background: transparent;
        border: 1px solid var(--border-hover);
        color: var(--text-primary);
        transition: all var(--transition-fast);
        cursor: pointer;
        text-decoration: none;
}

.hd-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--border-active);
        color: var(--text-primary);
}

/* ==========================================================================
   4. Grid (hd-grid)
   ========================================================================== */

.hd-grid {
        display: grid;
}

.hd-grid--anime {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
}

@media (min-width: 640px) {
        .hd-grid--anime {
                grid-template-columns: repeat(3, 1fr);
                gap: var(--spacing-lg);
        }
}

@media (min-width: 768px) {
        .hd-grid--anime {
                grid-template-columns: repeat(4, 1fr);
        }
}

@media (min-width: 1024px) {
        .hd-grid--anime {
                grid-template-columns: repeat(5, 1fr);
        }
}

@media (min-width: 1280px) {
        .hd-grid--anime {
                grid-template-columns: repeat(6, 1fr);
        }
}

/* ==========================================================================
   5. Search Page (search.php)
   ========================================================================== */

.hd-search {
        min-height: 60vh;
}

.hd-search-header {
        background: var(--bg-secondary);
        padding: var(--spacing-3xl) 0;
        border-bottom: 1px solid var(--border);
}

.hd-search-header__title {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-primary);
}

.hd-search-header__title svg {
        width: 28px;
        height: 28px;
        color: var(--crimson);
        flex-shrink: 0;
}

.hd-search-header__count {
        color: var(--text-secondary);
        font-size: 0.9375rem;
        margin-top: var(--spacing-sm);
}

.hd-search-header__form {
        margin-top: var(--spacing-lg);
        max-width: 600px;
}

.hd-search-form {
        width: 100%;
}

.hd-search-form__wrapper {
        display: flex;
        align-items: center;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hd-search-form__wrapper:focus-within {
        border-color: var(--border-active);
        box-shadow: 0 0 0 3px var(--crimson-glow);
}

.hd-search-form__icon {
        color: var(--text-muted);
        flex-shrink: 0;
}

.hd-search-form__icon svg {
        width: 20px;
        height: 20px;
}

.hd-search-form__input {
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-primary);
        flex: 1 1 0%;
        font-size: 1rem;
        padding: var(--spacing-xs) 0;
}

.hd-search-form__input::placeholder {
        color: var(--text-muted);
}

.hd-search-form__submit {
        background: var(--crimson);
        color: #fff;
        padding: var(--spacing-sm) var(--spacing-lg);
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: 0.875rem;
        border: none;
        cursor: pointer;
        transition: background var(--transition-fast);
}

.hd-search-form__submit:hover {
        background: var(--crimson-dark);
}

.hd-search-results {
        padding: var(--spacing-2xl) 0;
}

.hd-search-result-item {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
        transition: border-color var(--transition-fast), background var(--transition-fast);
}

.hd-search-result-item:hover {
        border-color: var(--border-hover);
        background: var(--bg-card-hover);
}

.hd-search-result-item__link {
        display: block;
        text-decoration: none;
}

.hd-search-result-item__title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
        transition: color var(--transition-fast);
}

.hd-search-result-item:hover .hd-search-result-item__title {
        color: var(--crimson);
}

.hd-search-result-item__excerpt {
        font-size: 0.8125rem;
        color: var(--text-secondary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.hd-search-result-item__type {
        display: inline-flex;
        align-items: center;
        font-size: 0.75rem;
        background: var(--bg-secondary);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        margin-top: var(--spacing-sm);
}

/* ==========================================================================
   6. 404 Page (404.php)
   ========================================================================== */

.hd-404 {
        min-height: 70vh;
}

.hd-404__hero {
        padding: var(--spacing-3xl) 0;
        text-align: center;
}

.hd-404__content {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
}

.hd-404__number {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
}

.hd-404__digit {
        font-size: 6rem;
        font-weight: 900;
        color: var(--crimson);
        line-height: 1;
}

.hd-404__digit--center {
        color: var(--gold);
}

.hd-404__digit--center svg {
        width: 120px;
        height: 120px;
}

.hd-404__title {
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
}

.hd-404__subtitle {
        font-size: 1.25rem;
        color: var(--gold);
        font-weight: 600;
        margin-bottom: var(--spacing-md);
}

.hd-404__message {
        color: var(--text-secondary);
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--spacing-xl);
        line-height: 1.6;
}

.hd-404__search {
        margin-bottom: var(--spacing-xl);
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
}

.hd-404__links {
        display: flex;
        justify-content: center;
        gap: var(--spacing-md);
        flex-wrap: wrap;
}

/* ==========================================================================
   7. Episode Player Page (single-episode.php)
   ========================================================================== */

.hd-episode-page {
        padding-top: var(--spacing-md);
}

.hd-episode-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
}

@media (min-width: 1024px) {
        .hd-episode-layout {
                grid-template-columns: 1fr 320px;
                gap: var(--spacing-md);
        }
}

.hd-episode-main {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        min-width: 0;
}

.hd-player-container {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        background: #06060c;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(230, 57, 70, 0.03); /* Subtle crimson glow */
}

.hd-player-skeleton {
        aspect-ratio: 16 / 9;
        background: var(--bg-card);
        display: flex;
        align-items: center;
        justify-content: center;
}

.hd-skeleton-bar {
        width: 60%;
        height: 4px;
        background: var(--bg-elevated);
        border-radius: var(--radius-full);
        animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
}

.hd-player-wrapper {
        aspect-ratio: 16 / 9;
        background: #000;
        position: relative;
}

.hd-player-iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
}

.hd-player-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
}

.hd-player-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        background: rgba(10, 10, 20, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hd-toolbar-left,
.hd-toolbar-right {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
}

.hd-toolbar-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 14px !important;
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        border-radius: 20px !important; /* Premium Pill Shape */
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        gap: 6px !important;
}

.hd-toolbar-btn:hover {
        color: #fff !important;
        background: rgba(230, 57, 70, 0.12) !important;
        border-color: rgba(230, 57, 70, 0.3) !important;
        transform: translateY(-1px) !important;
}

.hd-toolbar-btn.active {
        color: #fff !important;
        background: var(--crimson) !important;
        border-color: var(--crimson) !important;
        box-shadow: 0 0 10px rgba(230, 57, 70, 0.4) !important;
}

.hd-toolbar-btn.active .hd-toolbar-btn-icon {
        color: #fff !important;
}

.hd-toolbar-btn-label {
        display: none;
}

@media (min-width: 768px) {
        .hd-toolbar-btn-label {
                display: inline;
        }
}

.hd-player-placeholder {
        aspect-ratio: 16 / 9;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        gap: var(--spacing-md);
}

.hd-player-placeholder svg {
        width: 48px;
        height: 48px;
        opacity: 0.5;
}

/* ─── Server Selection (Enhanced with Category Highlights) ──────── */
.hd-server-groups {
        padding: 14px 16px;
        background: rgba(10, 10, 20, 0.65);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
}

.hd-server-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.3s ease !important;
}

/* SUB server group accent */
.hd-server-group--sub {
        border-left: 3px solid var(--crimson) !important;
        background: linear-gradient(135deg, rgba(230, 57, 70, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
}

.hd-server-group--sub:hover {
        border-left-color: var(--crimson-light) !important;
        box-shadow: 0 4px 20px rgba(230, 57, 70, 0.03) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.03) !important;
}

/* DUB server group accent */
.hd-server-group--dub {
        border-left: 3px solid var(--crimson) !important;
        background: linear-gradient(135deg, rgba(230, 57, 70, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
}

.hd-server-group--dub:hover {
        border-left-color: var(--crimson-light) !important;
        box-shadow: 0 4px 20px rgba(230, 57, 70, 0.03) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.03) !important;
}

.hd-server-group-label {
        display: inline-flex !important;
        align-items: center !important;
        gap: var(--spacing-xs) !important;
        font-size: 0.6875rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
        width: fit-content !important;
        margin-bottom: 2px !important;
}

/* SUB label styling */
.hd-server-group-label--sub {
        color: #ffb3b8 !important;
        background: rgba(230, 57, 70, 0.12) !important;
        border: 1px solid rgba(230, 57, 70, 0.2) !important;
}

/* DUB label styling */
.hd-server-group-label--dub {
        color: #ffb3b8 !important;
        background: rgba(230, 57, 70, 0.12) !important;
        border: 1px solid rgba(230, 57, 70, 0.2) !important;
}

.hd-server-group-icon {
        display: flex;
        align-items: center;
        justify-content: center;
}

.hd-server-group-icon svg {
        width: 12px;
        height: 12px;
}

.hd-server-group-btns {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
}

.hd-server-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 16px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 20px !important; /* Premium Pill Shape */
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.75) !important;
        cursor: pointer !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        white-space: nowrap !important;
        position: relative !important;
        overflow: hidden !important;
}

.hd-server-btn::before {
        display: none !important; /* Hide outdated left vertical line */
}

.hd-server-btn:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* SUB active state */
.hd-server-btn--sub.active {
        background: linear-gradient(135deg, rgba(230, 57, 70, 0.18), rgba(230, 57, 70, 0.06)) !important;
        border-color: var(--crimson) !important;
        color: #ffb3b8 !important;
        box-shadow: 0 0 12px rgba(230, 57, 70, 0.35) !important;
}

/* DUB active state */
.hd-server-btn--dub.active {
        background: linear-gradient(135deg, rgba(230, 57, 70, 0.18), rgba(230, 57, 70, 0.06)) !important;
        border-color: var(--crimson) !important;
        color: #ffb3b8 !important;
        box-shadow: 0 0 12px rgba(230, 57, 70, 0.35) !important;
}

/* Server indicator icon (small server icon) */
.hd-server-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.5;
        transition: opacity var(--transition-fast);
        flex-shrink: 0;
}

.hd-server-indicator svg {
        width: 10px;
        height: 10px;
}

.hd-server-btn:hover .hd-server-indicator {
        opacity: 0.8;
}

.hd-server-btn--sub.active .hd-server-indicator {
        opacity: 1;
        color: var(--crimson-light);
}

.hd-server-btn--dub.active .hd-server-indicator {
        opacity: 1;
        color: var(--crimson-light);
}

.hd-server-btn-name {
        font-weight: 500;
}

.hd-server-btn-quality {
        font-size: 0.625rem;
        font-weight: 700;
        padding: 0.0625rem 0.375rem;
        border-radius: var(--radius-sm);
        text-transform: uppercase;
        letter-spacing: 0.03em;
}

/* SUB quality badge */
.hd-server-btn-quality--sub {
        background: rgba(230, 57, 70, 0.12) !important;
        color: #ffb3b8 !important;
        border: 1px solid rgba(230, 57, 70, 0.2) !important;
}

/* DUB quality badge */
.hd-server-btn-quality--dub {
        background: rgba(230, 57, 70, 0.12) !important;
        color: #ffb3b8 !important;
        border: 1px solid rgba(230, 57, 70, 0.2) !important;
}

.hd-server-btn--sub.active .hd-server-btn-quality--sub {
        background: rgba(230, 57, 70, 0.2) !important;
        color: #fff !important;
}

.hd-server-btn--dub.active .hd-server-btn-quality--dub {
        background: rgba(230, 57, 70, 0.2) !important;
        color: #fff !important;
}

.hd-server-status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22c55e;
        flex-shrink: 0;
}

/* ─── Download Section (Pill Buttons) ──────────────────────────────── */
.hd-download-section {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: 10px 12px;
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--glass-border);
        flex-wrap: wrap;
}

.hd-download-label {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.6875rem;
        font-weight: 800;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        flex-shrink: 0;
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-sm);
        background: rgba(212, 165, 116, 0.12);
        border: 1px solid rgba(212, 165, 116, 0.2);
}

.hd-download-label svg {
        opacity: 0.8;
}

.hd-download-btns {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
}

.hd-download-pill {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 0.5rem 1rem;
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        border-radius: var(--pill-radius);
        font-size: 0.8125rem;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all var(--transition-fast);
        white-space: nowrap;
}

.hd-download-pill:hover {
        background: var(--crimson-subtle);
        border-color: var(--crimson);
        color: var(--crimson);
}

.hd-download-pill-quality {
        font-size: 0.625rem;
        font-weight: 700;
        background: var(--crimson-subtle);
        color: var(--crimson);
        padding: 0.0625rem 0.375rem;
        border-radius: var(--radius-sm);
}

.hd-download-pill-label {
        font-weight: 500;
}

.hd-download-pill-size {
        font-size: 0.6875rem;
        color: var(--text-muted);
}

/* ─── Episode Grid Section ─────────────────────────────────────────── */
.hd-ep-grid-section {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
        padding: 10px 12px;
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--glass-border);
        flex-wrap: wrap;
}

.hd-ep-grid-label {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.6875rem;
        font-weight: 800;
        color: var(--crimson-light);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        flex-shrink: 0;
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-sm);
        background: var(--crimson-subtle);
        border: 1px solid rgba(230, 57, 70, 0.2);
}

.hd-ep-grid-label svg {
        opacity: 0.8;
}

.hd-ep-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
}

.hd-ep-grid-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 36px;
        padding: 0 0.625rem;
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        border-radius: 10px;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
        overflow: hidden;
}

.hd-ep-grid-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        opacity: 0;
        transition: opacity var(--transition-fast);
        background: radial-gradient(circle at center, rgba(230, 57, 70, 0.15), transparent 70%);
}

.hd-ep-grid-btn:hover {
        background: var(--bg-card-hover);
        color: var(--text-primary);
        border-color: rgba(230, 57, 70, 0.3);
        transform: scale(1.12);
        box-shadow: 0 0 12px rgba(230, 57, 70, 0.2);
}

.hd-ep-grid-btn:hover::after {
        opacity: 0;
}

.hd-ep-grid-btn:active {
        transform: scale(0.96);
}

.hd-ep-grid-active {
        background: var(--crimson);
        border-color: var(--crimson);
        color: #fff;
        box-shadow: 0 0 16px rgba(230, 57, 70, 0.4), 0 0 4px rgba(230, 57, 70, 0.6);
        font-weight: 700;
        animation: ep-glow-pulse 2s ease-in-out infinite;
}

.hd-ep-grid-active:hover {
        background: var(--crimson);
        color: #fff;
        box-shadow: 0 0 24px rgba(230, 57, 70, 0.5);
        transform: scale(1.12);
}

.hd-ep-grid-active::after {
        opacity: 0;
}

@keyframes ep-glow-pulse {
        0%, 100% { box-shadow: 0 0 12px rgba(230, 57, 70, 0.3), 0 0 4px rgba(230, 57, 70, 0.5); }
        50% { box-shadow: 0 0 20px rgba(230, 57, 70, 0.5), 0 0 8px rgba(230, 57, 70, 0.7); }
}

.hd-episode-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        padding: 8px 12px;
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
        border-radius: 14px;
}

.hd-ep-nav-btn {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        border-radius: var(--pill-radius);
        color: var(--text-secondary);
        font-size: 0.8125rem;
        text-decoration: none;
        transition: all var(--transition-fast);
        cursor: pointer;
}

.hd-ep-nav-btn:hover {
        color: var(--text-primary);
        background: var(--bg-card-hover);
}

.hd-ep-nav-disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
}

.hd-ep-anime-link {
        color: var(--crimson);
}

.hd-ep-anime-link:hover {
        color: var(--crimson-light);
}

.hd-episode-info-section {
        padding: 12px 14px;
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        border-radius: 14px;
}

.hd-episode-title {
        font-size: 1.375rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 8px;
        letter-spacing: -0.01em;
}

.hd-watch-progress {
        width: 100%;
        height: 3px;
        background: var(--bg-secondary);
        border-radius: var(--radius-full);
        margin-bottom: 8px;
        overflow: hidden;
}

.hd-watch-progress-bar {
        height: 100%;
        background: var(--crimson);
        border-radius: var(--radius-full);
        transition: width 0.3s ease;
}

.hd-episode-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
}

.hd-ep-meta-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.8rem;
        color: var(--text-secondary);
}

.hd-ep-meta-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
}

.hd-subtitle-badge {
        font-size: 0.6875rem;
        font-weight: 700;
        padding: 0.125rem 0.5rem;
        border-radius: var(--radius-sm);
        text-transform: uppercase;
        letter-spacing: 0.04em;
}

.hd-ep-filler-badge {
        font-size: 0.6875rem;
        font-weight: 700;
        padding: 0.125rem 0.5rem;
        background: rgba(234, 179, 8, 0.2);
        color: #eab308;
        border-radius: var(--radius-sm);
        border: 1px solid rgba(234, 179, 8, 0.3);
}

.hd-episode-description {
        color: var(--text-secondary);
        font-size: 0.9375rem;
        line-height: 1.6;
        margin-top: var(--spacing-md);
}

.hd-episode-description h1,
.hd-episode-description h2,
.hd-episode-description h3,
.hd-episode-description h4,
.hd-episode-description h5,
.hd-episode-description h6 {
        font-size: 1.0625rem !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        margin: var(--spacing-sm) 0 var(--spacing-xs) 0 !important;
        line-height: 1.4 !important;
}

.hd-episode-description p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        color: var(--text-secondary) !important;
        margin: 0 0 var(--spacing-sm) 0 !important;
}

.hd-episode-description strong {
        font-weight: 700 !important;
        color: var(--text-primary) !important;
}

/* Download Section */
.hd-download-section {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        overflow: hidden;
}

/* Episode Sidebar */
.hd-episode-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
        .hd-episode-sidebar {
                position: sticky;
                top: calc(72px + var(--spacing-lg));
                max-height: calc(100vh - 72px - var(--spacing-lg) * 2);
                overflow-y: auto;
                scrollbar-width: thin;
        }
}

.hd-anime-sidebar-card {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 0;
}

/* Poster thumbnail in sidebar — let inline styles control dimensions */
.hd-anime-sidebar-thumb {
        object-fit: cover;
        object-position: center top;
}

/* Generic sidebar card images — exclude poster thumb */
.hd-anime-sidebar-card img:not(.hd-anime-sidebar-thumb) {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
        object-position: center top;
}

.hd-anime-sidebar-card h3 {
        font-size: 0.9375rem;
        font-weight: 600;
        padding: var(--spacing-sm) var(--spacing-md) 0;
}

.hd-anime-sidebar-card h3 a {
        color: var(--text-primary);
        text-decoration: none;
        transition: color var(--transition-fast);
}

.hd-anime-sidebar-card h3 a:hover {
        color: var(--crimson);
}

.hd-chinese-title {
        font-size: 0.875rem;
        color: var(--gold);
        margin-top: var(--spacing-xs);
        padding: 0 var(--spacing-md);
}

.hd-anime-sidebar-meta {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 14px;
        font-size: 0.75rem;
        color: var(--text-secondary);
}

.hd-sidebar-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px 14px;
        border-top: 1px solid var(--glass-border);
}

.hd-sidebar-info-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
}

.hd-sidebar-info-label {
        font-size: 0.625rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
}

.hd-sidebar-info-value {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-primary);
}

.hd-next-ep-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-top: 1px solid var(--glass-border);
        background: rgba(230, 57, 70, 0.04);
        transition: background var(--transition-fast);
}

.hd-next-ep-card:hover {
        background: rgba(230, 57, 70, 0.08);
}

.hd-next-ep-label {
        font-size: 0.625rem;
        font-weight: 700;
        color: var(--crimson);
        text-transform: uppercase;
        letter-spacing: 0.06em;
}

.hd-next-ep-title {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-primary);
}

.hd-next-ep-arrow {
        margin-left: auto;
        color: var(--crimson);
        flex-shrink: 0;
}

.hd-status-badge {
        font-size: 0.6875rem;
        font-weight: 700;
        padding: 0.125rem 0.5rem;
        border-radius: var(--radius-sm);
        text-transform: uppercase;
        letter-spacing: 0.04em;
}

.hd-status-ongoing {
        background: var(--crimson-subtle);
        color: var(--crimson);
}

.hd-status-completed {
        background: rgba(34, 197, 94, 0.12);
        color: #4ade80;
}

/* Episode List Card */
.hd-episode-list-card {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        overflow: hidden;
}

.hd-episode-list-card h3 {
        font-size: 0.9375rem;
        font-weight: 700;
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
}

.hd-episode-list-scroll {
        max-height: 400px;
        overflow-y: auto;
        padding: var(--spacing-xs);
}

.hd-ep-list-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.8125rem;
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        transition: background var(--transition-fast), color var(--transition-fast);
        text-decoration: none;
}

.hd-ep-list-item:hover {
        background: var(--bg-card-hover);
        color: var(--text-primary);
}

.hd-ep-current {
        background: var(--crimson-subtle);
        color: var(--crimson);
        font-weight: 600;
}

.hd-ep-list-num {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-secondary);
        border-radius: var(--radius-sm);
        font-weight: 600;
        font-size: 0.75rem;
        flex-shrink: 0;
}

.hd-ep-current .hd-ep-list-num {
        background: var(--crimson);
        color: #fff;
}

.hd-ep-list-label {
        flex: 1 1 0%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

/* ─── Episode Page Mobile Optimizations ──────────────────────────────── */
@media (max-width: 767px) {
        .hd-episode-page {
                padding-top: var(--spacing-sm);
        }

        .hd-breadcrumb {
                padding: var(--spacing-xs) var(--spacing-sm);
                font-size: 0.6875rem;
        }

        .hd-episode-info-section {
                padding: 8px 10px;
        }

        .hd-episode-title {
                font-size: 1.0625rem;
        }

        .hd-episode-meta {
                flex-wrap: wrap;
                gap: var(--spacing-xs);
        }

        .hd-ep-meta-item {
                font-size: 0.75rem;
        }

        .hd-player-toolbar {
                flex-wrap: nowrap !important;
                justify-content: space-between !important;
                padding: 8px 12px !important;
        }

        .hd-toolbar-btn-label {
                display: none !important;
        }

        .hd-toolbar-btn {
                width: 34px !important;
                height: 34px !important;
                padding: 0 !important;
                border-radius: 50% !important; /* Perfect circular buttons on mobile */
                justify-content: center !important;
                align-items: center !important;
                font-size: 0.75rem !important;
        }

        .hd-episode-nav {
                flex-wrap: wrap;
                gap: var(--spacing-xs);
        }

        .hd-ep-nav-btn {
                flex: 1;
                justify-content: center;
                font-size: 0.75rem;
                padding: 4px 8px;
                min-width: 0;
        }

        .hd-ep-grid-section {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: var(--spacing-sm) !important;
                padding: 12px 14px !important;
        }

        .hd-ep-grid {
                gap: 6px !important;
                width: 100% !important;
                justify-content: flex-start !important;
        }

        .hd-ep-grid-btn {
                min-width: 36px;
                height: 32px;
                font-size: 0.75rem;
                padding: 0 0.375rem;
                border-radius: 8px;
        }

        .hd-download-section {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: var(--spacing-sm) !important;
                padding: 12px 14px !important;
        }

        .hd-download-pill {
                padding: 0.375rem 0.75rem;
                font-size: 0.75rem;
        }

        .hd-server-groups {
                padding: 10px 12px !important;
        }

        .hd-server-group {
                padding: 10px 12px !important;
                gap: 8px !important;
        }

        .hd-server-btn {
                padding: 6px 12px !important;
                font-size: 0.75rem !important;
        }

        /* ─── Sidebar Profile Card (vertical layout with cover banner) ─── */
        .hd-anime-sidebar-card {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                padding: 0 !important;
                text-align: center !important;
                overflow: hidden !important;
                margin: 0 auto !important;
                max-width: 480px !important;
                width: 100% !important;
        }

        .hd-sidebar-info-item {
                align-items: center !important;
                text-align: center !important;
        }

        .hd-anime-sidebar-card img.hd-anime-sidebar-thumb {
                max-width: none;
                max-height: none;
                width: 80px;
                height: 112px;
                object-fit: cover;
                object-position: center top;
                border-radius: 6px;
        }

        .hd-anime-sidebar-card h3 {
                padding: 6px 8px 2px;
                font-size: 0.8125rem;
                text-align: center;
        }

        .hd-anime-sidebar-meta {
                justify-content: center;
                padding: 2px 8px 10px;
        }

        .hd-episode-layout {
                display: flex;
                flex-direction: column;
        }

        .hd-player-container {
                border-radius: var(--radius-md);
        }

        .hd-ep-grid {
                gap: 4px;
        }
}

/* ==========================================================================
   8. Episode Page Modal & Inline Toasts
   ========================================================================== */

.hd-modal-overlay {
        position: fixed;
        inset: 0;
        background: var(--bg-overlay);
        z-index: var(--z-modal);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-md);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-base), visibility var(--transition-base);
}

.hd-modal-overlay.active {
        opacity: 1;
        visibility: visible;
}

.hd-modal-content {
        background: var(--bg-card);
        border-radius: var(--radius-xl);
        max-width: 480px;
        width: 100%;
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border);
}

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

.hd-modal-header h3 {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--text-primary);
}

.hd-modal-close {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        transition: color var(--transition-fast), background-color var(--transition-fast);
        cursor: pointer;
        border: none;
        background: none;
}

.hd-modal-close:hover {
        color: var(--text-primary);
        background: var(--bg-secondary);
}

.hd-modal-close svg {
        width: 20px;
        height: 20px;
}

.hd-modal-body {
        padding: var(--spacing-lg);
}

.hd-modal-desc {
        color: var(--text-secondary);
        font-size: 0.875rem;
        margin-bottom: var(--spacing-md);
        line-height: 1.5;
}

.hd-report-server-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
}

.hd-report-server-card {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: 0.875rem;
        color: var(--text-secondary);
        backdrop-filter: blur(10px);
        user-select: none;
        position: relative;
        overflow: hidden;
        transition: all var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
}

.hd-report-server-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(220, 20, 60, 0.4);
        color: var(--text-primary);
        transform: translateY(-1px);
}

.hd-report-server-card.active {
        background: rgba(220, 20, 60, 0.08);
        border-color: var(--crimson);
        color: #fff;
        box-shadow: 0 0 12px rgba(220, 20, 60, 0.25), inset 0 0 8px rgba(220, 20, 60, 0.15);
}

.hd-report-server-radio-bullet {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid var(--text-muted);
        display: inline-block;
        position: relative;
        transition: all var(--transition-fast) ease;
        flex-shrink: 0;
}

.hd-report-server-card.active .hd-report-server-radio-bullet {
        border-color: var(--crimson);
        background: var(--crimson);
        box-shadow: 0 0 6px var(--crimson);
}

.hd-report-server-card.active .hd-report-server-radio-bullet::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
}

.hd-report-textarea-wrap {
        position: relative;
        margin-top: var(--spacing-md);
}

.hd-report-message {
        width: 100%;
        padding: var(--spacing-md);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-lg);
        color: var(--text-primary);
        font-size: 0.875rem;
        resize: none;
        font-family: inherit;
        box-sizing: border-box;
        min-height: 100px;
        transition: all var(--transition-fast) ease;
}

.hd-report-message::placeholder {
        color: var(--text-muted);
        opacity: 0.6;
}

.hd-report-message:focus {
        outline: none;
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--crimson);
        box-shadow: 0 0 10px rgba(220, 20, 60, 0.15);
}

.hd-char-counter {
        position: absolute;
        bottom: 10px;
        right: 12px;
        font-size: 11px;
        color: var(--text-muted);
        background: rgba(0, 0, 0, 0.4);
        padding: 2px 6px;
        border-radius: 4px;
        pointer-events: none;
        opacity: 0.7;
        transition: opacity var(--transition-fast);
}

.hd-report-message:focus + .hd-char-counter {
        opacity: 1;
}

.hd-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--spacing-sm);
        padding: var(--spacing-lg);
        border-top: 1px solid var(--border);
}

/* Episode Inline Toast */
.hd-toast {
        position: fixed;
        bottom: var(--spacing-xl);
        left: 50%;
        transform: translateX(-50%);
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-md) var(--spacing-lg);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        z-index: var(--z-toast);
        box-shadow: var(--shadow-lg);
        font-size: 0.875rem;
        min-width: 300px;
}

.hd-toast-text {
        flex: 1 1 0%;
        color: var(--text-primary);
}

.hd-toast-actions {
        display: flex;
        gap: var(--spacing-sm);
}

.hd-toast-btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: 0.8125rem;
        font-weight: 600;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--transition-fast);
        border: none;
}

.hd-toast-btn-yes {
        background: var(--crimson);
        color: #fff;
}

.hd-toast-btn-yes:hover {
        opacity: 0.9;
}

.hd-toast-btn-no {
        background: var(--bg-secondary);
        color: var(--text-secondary);
}

.hd-toast-btn-no:hover {
        color: var(--text-primary);
}

/* ==========================================================================
   9. Genre Taxonomy Page (taxonomy-genre.php)
   ========================================================================== */

.hd-taxonomy-genre {
        min-height: 60vh;
}

.hd-genre-header {
        background: var(--bg-secondary);
        padding: var(--spacing-3xl) 0;
        border-bottom: 1px solid var(--border);
}

.hd-genre-header__content {
        display: flex;
        align-items: center;
        gap: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
}

.hd-genre-header__icon {
        width: 64px;
        height: 64px;
        background: var(--crimson-subtle);
        border-radius: var(--radius-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--crimson);
        flex-shrink: 0;
}

.hd-genre-header__icon svg {
        width: 32px;
        height: 32px;
}

.hd-genre-header__info {
        flex: 1 1 0%;
}

.hd-genre-header__title {
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
}

.hd-genre-header__count {
        font-size: 0.875rem;
        color: var(--text-secondary);
}

.hd-genre-header__description {
        color: var(--text-secondary);
        font-size: 0.9375rem;
        margin-top: var(--spacing-sm);
        max-width: 600px;
        line-height: 1.6;
}

.hd-genre-header__siblings {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-sm);
}

.hd-genre-header__siblings-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
}

.hd-genre-pill {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 0.5rem 1rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-weight: 500;
        text-decoration: none;
        transition: all var(--transition-fast);
        white-space: nowrap;
}

.hd-genre-pill:hover {
        background: var(--crimson-subtle);
        border-color: var(--crimson);
        color: var(--crimson);
}

.hd-genre-pill--active {
        background: var(--crimson-subtle);
        border-color: var(--crimson);
        color: var(--crimson);
}

.hd-genre-pill--small {
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
}

.hd-genre-pill__name {
        font-weight: 500;
}

.hd-genre-pill__count {
        font-size: 0.6875rem;
        color: var(--text-muted);
        background: var(--bg-secondary);
        padding: 0.0625rem 0.375rem;
        border-radius: var(--radius-full);
}

.hd-genre-grid {
        padding: var(--spacing-2xl) 0;
}

/* ==========================================================================
   10. Pagination
   ========================================================================== */

.hd-pagination {
        margin-top: var(--spacing-2xl);
        display: flex;
        justify-content: center;
}

.hd-pagination ul {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        list-style: none;
        padding: 0;
        margin: 0;
}

.hd-pagination li {
        display: inline;
}

.hd-pagination a,
.hd-pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 var(--spacing-sm);
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-size: 0.8125rem;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all var(--transition-fast);
}

.hd-pagination a:hover {
        background: var(--bg-card-hover);
        color: var(--text-primary);
        border-color: var(--border-hover);
}

.hd-pagination .current {
        background: var(--crimson);
        border-color: var(--crimson);
        color: #fff;
}

.hd-pagination .dots {
        border: none;
        background: transparent;
}

/* ==========================================================================
   11. No Results
   ========================================================================== */

.hd-no-results {
        text-align: center;
        padding: var(--spacing-3xl) 0;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
}

.hd-no-results > svg {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--spacing-lg);
        color: var(--text-muted);
        width: 64px;
        height: 64px;
}

.hd-no-results__title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
}

.hd-no-results__text {
        color: var(--text-secondary);
        margin-bottom: var(--spacing-lg);
        line-height: 1.6;
}

.hd-no-results__suggestions {
        text-align: left;
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
}

.hd-no-results__suggestions-title {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: var(--spacing-sm);
        color: var(--text-primary);
}

.hd-no-results__suggestions-list {
        list-style: disc;
        padding-left: var(--spacing-lg);
        color: var(--text-secondary);
        font-size: 0.875rem;
}

.hd-no-results__suggestions-list li {
        margin-bottom: var(--spacing-xs);
}

/* ==========================================================================
   12. Section Modifiers (hd-section)
   ========================================================================== */

.hd-section {
        padding: var(--spacing-2xl) 0;
}

.hd-section--popular,
.hd-section--latest,
.hd-section--movies,
.hd-section--completed {
        padding: var(--spacing-2xl) 0;
}

.hd-section--genres,
.hd-section--genres-404,
.hd-section--suggested {
        padding: var(--spacing-2xl) 0;
}

.hd-section--related {
        padding: var(--spacing-2xl) 0;
}

/* ==========================================================================
   13. Page Templates
   ========================================================================== */

.hd-page {
        min-height: 60vh;
}

.hd-page-header {
        background: var(--bg-secondary);
        padding: var(--spacing-2xl) 0;
        border-bottom: 1px solid var(--border);
}

.hd-page-header h1 {
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-primary);
}

.hd-page-header__updated {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: var(--spacing-xs);
}

.hd-page-content {
        padding: var(--spacing-2xl) 0;
        max-width: 48rem;
}

.hd-page-links {
        margin-top: var(--spacing-lg);
}

.hd-page-links__title {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: var(--spacing-sm);
        color: var(--text-primary);
}

.hd-page-links__number {
        color: var(--text-secondary);
        font-size: 0.875rem;
}

/* ==========================================================================
   14. Genre Cloud
   ========================================================================== */

.hd-genre-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
}

/* ==========================================================================
   15. Footer Column
   ========================================================================== */

.footer-column {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
}

.footer-heading {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: var(--spacing-md);
}

.footer-links {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
}

.footer-links a {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--text-secondary);
        font-size: 0.8125rem;
        text-decoration: none;
        transition: color var(--transition-fast);
}

.footer-links a:hover {
        color: var(--text-primary);
}

.footer-links a svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0.5;
        transition: opacity var(--transition-fast);
}

.footer-links a:hover svg {
        opacity: 1;
}

/* ==========================================================================
   16. Single Post Classes (single.php)
   ========================================================================== */

.single-content-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
        .single-content-layout {
                grid-template-columns: 1fr 300px;
        }
}

.single-main {
        min-width: 0;
}

.single-poster {
        width: 100%;
        aspect-ratio: 2 / 3;
        object-fit: cover;
        border-radius: var(--radius-lg);
}

/* ==========================================================================
   17. Scroll-to-top Fix
   ========================================================================== */

.scroll-to-top {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease;
}

.scroll-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        display: flex;
}

/* ==========================================================================
   18. Ads
   ========================================================================== */

/* ─── NEXT-GEN PREMIUM ADVERTISEMENT COMPONENT ────────────────────── */
.hd-ad {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: var(--spacing-lg) var(--spacing-md);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.04) 100%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--radius-lg, 12px);
        margin: var(--spacing-lg) 0;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25),
                    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
        position: relative;
        overflow: hidden;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.hd-ad:hover {
        border-color: rgba(230, 57, 70, 0.25);
        box-shadow: 0 12px 40px 0 rgba(230, 57, 70, 0.1),
                    inset 0 1px 1px 0 rgba(255, 255, 255, 0.08);
}

/* Automatic Elegant Ad Micro-Label */
.hd-ad::before {
        content: 'ADVERTISEMENT / SPONSORED';
        display: block;
        font-size: 0.625rem; /* 10px */
        font-weight: 800;
        letter-spacing: 0.15em;
        color: var(--text-muted, #7c7c8c);
        margin-bottom: 12px;
        text-transform: uppercase;
        opacity: 0.55;
        transition: color 0.3s ease, opacity 0.3s ease;
}

.hd-ad:hover::before {
        opacity: 0.85;
        color: var(--crimson, #e63946);
}

/* Perfect alignment and scaling of inner script embeds, iframes and images */
.hd-ad iframe,
.hd-ad img,
.hd-ad ins,
.hd-ad object,
.hd-ad embed {
        display: block !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: var(--radius-md, 8px) !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Specific Placements Adjustments */
.hd-ad-header {
        max-width: var(--container-width, 1200px);
        width: 100%;
        margin: var(--spacing-md) auto var(--spacing-lg) auto;
        box-sizing: border-box;
}

.hd-ad-before-player {
        margin: 0 0 var(--spacing-lg) 0;
}

.hd-ad-after-player {
        margin: var(--spacing-lg) 0 0 0;
}

@media (max-width: 767px) {
        .hd-ad {
                padding: var(--spacing-md) var(--spacing-sm);
                border-radius: var(--radius-md, 8px);
                margin: var(--spacing-md) 0;
        }
        .hd-ad::before {
                font-size: 0.5625rem; /* 9px */
                margin-bottom: 8px;
        }
}

/* ─── NEXT-GEN PREMIUM VIDEO PRE-ROLL ENGINE ────────────────────────── */
.hd-player-wrapper {
        position: relative; /* Ensure overlay covers it precisely */
}

.hd-preroll-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000; /* Solid black to match standard media player viewports */
	z-index: 100;
	opacity: 1;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	border-radius: inherit; /* Matches player wrapper corners */
	overflow: hidden;
}

.hd-preroll-ad-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* Standard full-size rendering matching the main player stream dimensions */
.hd-preroll-ad-content iframe,
.hd-preroll-ad-content video {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	border: none !important;
	position: absolute;
	top: 0;
	left: 0;
}

.hd-preroll-ad-content img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important; /* Contain is ideal for standard banner/video fallback aspect ratios */
	border-radius: 0 !important;
	border: none !important;
}

.hd-preroll-skip-bar {
        position: absolute;
        top: 20px;
        right: 20px;
        display: none;
        align-items: center;
        gap: 10px;
        z-index: 2147483647 !important;
        pointer-events: auto !important;
        transition: opacity 0.5s ease;
}

.hd-preroll-countdown {
        background: rgba(15, 15, 25, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 8px 18px;
        border-radius: 30px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hd-preroll-skip-btn {
        background: rgba(15, 15, 25, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        color: rgba(255, 255, 255, 0.35);
        padding: 8px 18px;
        border-radius: 30px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        cursor: not-allowed;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-shadow: none;
}

.hd-preroll-skip-btn svg {
        transition: transform 0.3s ease;
}

.hd-preroll-skip-btn.active {
        background: linear-gradient(135deg, var(--crimson, #e63946), var(--crimson-dark, #b51724));
        border-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        cursor: pointer;
        box-shadow: 0 0 20px rgba(230, 57, 70, 0.4);
}

.hd-preroll-skip-btn.active:hover {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 0 25px rgba(230, 57, 70, 0.6);
}

.hd-preroll-skip-btn.active:hover svg {
        transform: translateX(2px);
}

@media (max-width: 767px) {
        .hd-preroll-skip-bar {
                top: 12px;
                right: 12px;
                gap: 8px;
        }
        .hd-preroll-countdown,
        .hd-preroll-skip-btn {
                padding: 6px 14px;
                font-size: 0.6875rem;
        }
        .hd-preroll-ad-content {
                padding: 0;
        }
}

/* ─── NEXT-GEN PREMIUM VIDEO PLAYER POPUP AD ────────────────────────── */
.hd-player-popup-ad {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        background: rgba(15, 15, 25, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-lg, 12px);
        padding: var(--spacing-md, 16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6),
                    inset 0 1px 1px rgba(255, 255, 255, 0.05);
        z-index: 90; /* Sits below preroll overlay (100) but above stream (1) */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        max-width: 90%;
        box-sizing: border-box;
}

.hd-player-popup-ad.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: auto;
}

.hd-player-popup-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
}

/* Perfect fitting for typical banners (e.g. 300x250 medium rectangles) */
.hd-player-popup-content iframe,
.hd-player-popup-content img,
.hd-player-popup-content ins,
.hd-player-popup-content video {
        max-width: 100% !important;
        max-height: 280px !important;
        border-radius: var(--radius-md, 8px) !important;
        display: block !important;
        margin: 0 auto !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

/* Premium circular close button floating over the border edge */
.hd-player-popup-close {
        position: absolute;
        top: -12px;
        right: -12px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--crimson, #e63946), var(--crimson-dark, #b51724));
        border: 2px solid #0c0c0e;
        color: #fff;
        font-size: 1.125rem; /* 18px */
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
        transition: all 0.2s ease;
        line-height: 1;
        padding: 0 0 2px 0; /* Align math multiplication sign perfectly */
        z-index: 95;
}

.hd-player-popup-close:hover {
        transform: scale(1.12);
        box-shadow: 0 4px 16px rgba(230, 57, 70, 0.6);
        background: #e63946;
}

@media (max-width: 767px) {
        .hd-player-popup-ad {
                padding: 12px;
                border-radius: var(--radius-md, 8px);
                max-width: 95%;
        }
        .hd-player-popup-close {
                width: 24px;
                height: 24px;
                top: -10px;
                right: -10px;
                font-size: 0.9375rem; /* 15px */
        }
        .hd-player-popup-content iframe,
        .hd-player-popup-content img,
        .hd-player-popup-content ins,
        .hd-player-popup-content video {
                max-height: 200px !important;
        }
}

/* ==========================================================================
   19. Archive Anime
   ========================================================================== */

.hd-archive-anime {
        min-height: 60vh;
}

/* ==========================================================================
   20. Bookmark & History Page Wrappers
   ========================================================================== */

.hd-page-bookmark,
.hd-page-history,
.hd-page-schedule,
.hd-page-az-lists {
        min-height: 60vh;
}

/* ==========================================================================
   21. Section Header (hd- prefix)
   ========================================================================== */

.hd-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-lg);
        gap: var(--spacing-md);
}

.hd-section-header .hd-section-title {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
}

@media (min-width: 768px) {
        .hd-section-header .hd-section-title {
                font-size: 1.5rem;
        }
}

.hd-section-header .hd-section-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: var(--crimson-subtle);
        border-radius: var(--radius-md);
        color: var(--crimson);
        flex-shrink: 0;
}

.hd-section-header .hd-section-icon svg {
        width: 18px;
        height: 18px;
}

.hd-section-header .hd-section-view-all {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--crimson);
        text-decoration: none;
        white-space: nowrap;
        transition: gap var(--transition-fast), color var(--transition-fast);
}

.hd-section-header .hd-section-view-all:hover {
        gap: var(--spacing-sm);
        color: var(--crimson-light);
}

.hd-section-header .hd-section-view-all svg {
        width: 16px;
        height: 16px;
}

/* ==========================================================================
   Popular Series Tabbed Section
   ========================================================================== */

.hd-tabs {
        display: flex;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-lg);
        border-bottom: 1px solid var(--border);
        padding-bottom: var(--spacing-sm);
}

.hd-tab {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1.25rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-secondary);
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        cursor: pointer;
        transition: all var(--transition-fast);
        white-space: nowrap;
        position: relative;
}

.hd-tab:hover {
        color: var(--text-primary);
        background: var(--crimson-subtle);
}

.hd-tab.active {
        color: var(--crimson);
        background: var(--crimson-subtle);
        border-color: var(--border);
        border-bottom-color: transparent;
}

.hd-tab.active::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--crimson);
        border-radius: var(--radius-full);
}

.hd-tab-panels {
        position: relative;
}

.hd-tab-panel {
        display: none;
}

.hd-tab-panel.active {
        display: block;
}

/* Popular List (ranked items) */
.hd-popular-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
}

@media (min-width: 640px) {
        .hd-popular-list {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1024px) {
        .hd-popular-list {
                grid-template-columns: repeat(2, 1fr);
        }
}

.hd-popular-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-sm);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        text-decoration: none;
        color: var(--text-primary);
        transition: all var(--transition-fast);
        border: 1px solid transparent;
}

.hd-popular-item:hover {
        background: var(--bg-card-hover);
        border-color: var(--border-hover);
        transform: translateX(4px);
        color: var(--text-primary);
}

.hd-popular-rank {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 800;
        color: var(--text-muted);
        background: var(--bg-secondary);
        border-radius: var(--radius-md);
}

.hd-rank-top .hd-popular-rank {
        background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
        color: #fff;
        box-shadow: var(--shadow-crimson);
}

.hd-rank-top:nth-child(1) .hd-popular-rank {
        background: linear-gradient(135deg, var(--gold), var(--gold-dark));
        box-shadow: var(--shadow-gold);
}

.hd-popular-thumb {
        flex-shrink: 0;
        width: 50px;
        border-radius: var(--radius-sm);
        overflow: hidden;
        position: relative;
}

.hd-popular-thumb img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--radius-sm);
}

/* Quality badge inside popular list thumbnail */
.hd-popular-quality {
        position: absolute;
        bottom: 2px;
        left: 2px;
        font-size: 0.4375rem !important;
        padding: 0.0625rem 0.25rem !important;
        letter-spacing: 0.03em;
        line-height: 1.3;
        border-radius: 2px;
}

.hd-popular-info {
        flex: 1;
        min-width: 0;
}

.hd-popular-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color var(--transition-fast);
}

.hd-popular-item:hover .hd-popular-title {
        color: var(--crimson);
}

.hd-popular-chinese {
        font-size: 0.6875rem;
        color: var(--gold);
        display: block;
        margin-top: 2px;
}

.hd-popular-meta {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-top: 4px;
        flex-wrap: wrap;
}

.hd-popular-type,
.hd-popular-eps {
        font-size: 0.6875rem;
        color: var(--text-muted);
        background: var(--bg-secondary);
        padding: 1px 6px;
        border-radius: var(--radius-sm);
}

.hd-popular-rating {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 0.6875rem;
        font-weight: 700;
        color: var(--gold);
}

.hd-popular-rating svg {
        width: 12px;
        height: 12px;
        fill: var(--gold);
}

/* ==========================================================================
   Bookmark Page Styles - Additional
   ========================================================================== */

.hd-bookmark-content {
        padding: var(--spacing-xl) 0;
}

/* Bookmark button styles for cards - base rule */
.hd-bookmark-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-secondary);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--transition-fast);
}

.hd-bookmark-btn:hover {
        color: var(--crimson);
        border-color: var(--crimson);
        background: var(--crimson-subtle);
}

.hd-bookmark-btn svg {
        width: 16px;
        height: 16px;
}

/* ==========================================================================
   Mobile Responsive Fixes (Global)
   ========================================================================== */

@media (max-width: 639px) {
        /* ── Body & Layout ─────────────────────────────────────────────── */
        body {
                font-size: 0.9375rem;
                padding-top: env(safe-area-inset-top, 0px);
        }

        body.menu-open {
                overflow: hidden;
        }

        /* ── Header ────────────────────────────────────────────────────── */
        .header-inner {
                height: 56px;
        }

        .site-header {
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
        }

        .site-logo a {
                font-size: 1.25rem;
        }

        .site-logo .logo-icon {
                width: 30px;
                height: 30px;
                font-size: 0.9375rem;
        }

        /* ── Hero Banner/Slider ────────────────────────────────────────── */
        .hero-banner,
        .hero-slider {
                min-height: 380px;
        }

        .hd-hero {
                margin-top: -56px;
        }

        .hero-title {
                font-size: 1.5rem;
        }

        .hero-chinese-title {
                font-size: 0.875rem;
        }

        .hero-description {
                font-size: 0.8125rem;
                -webkit-line-clamp: 3;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
        }

        .hero-badge {
                font-size: 0.625rem;
                padding: 0.125rem 0.5rem;
        }

        .hero-meta {
                gap: var(--spacing-sm);
        }

        .hero-meta-item {
                font-size: 0.6875rem;
        }

        .hero-actions {
                gap: var(--spacing-sm);
        }

        .hero-btn-primary {
                padding: 0.625rem 1.25rem;
                font-size: 0.8125rem;
        }

        .hero-btn-secondary {
                padding: 0.625rem 1rem;
                font-size: 0.8125rem;
        }

        .hero-slide-content {
                padding: var(--spacing-lg) var(--spacing-md);
        }

        /* ── Content Sections ──────────────────────────────────────────── */
        .content-section {
                padding: var(--spacing-xl) 0;
        }

        .section-title {
                font-size: 1.0625rem;
        }

        /* title-icon & title-bar auto-scale with em — no fixed overrides needed */

        /* ── Anime Cards ───────────────────────────────────────────────── */
        .anime-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--spacing-sm);
        }

        .anime-card-title {
                font-size: 0.75rem;
        }

        .anime-card-info {
                padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
        }

        .anime-card-genre-item {
                font-size: 0.625rem;
        }

        .anime-badge {
                font-size: 0.5625rem;
                padding: 0.0625rem 0.375rem;
        }

        .anime-card-play {
                width: 36px;
                height: 36px;
        }

        .anime-card-play svg {
                width: 14px;
                height: 14px;
        }

        /* ── Genre Pills ───────────────────────────────────────────────── */
        .genre-pill {
                padding: 0.375rem 0.75rem;
                font-size: 0.75rem;
        }

        .genre-pill .genre-count {
                font-size: 0.625rem;
        }

        /* ── Footer ────────────────────────────────────────────────────── */
        .footer-main {
                padding: var(--spacing-xl) 0 var(--spacing-lg);
        }

        .footer-brand .footer-tagline {
                font-size: 0.8125rem;
                max-width: 100%;
        }

        .footer-heading {
                font-size: 0.8125rem;
                margin-bottom: var(--spacing-md);
        }

        .footer-bottom-inner {
                flex-direction: column;
                gap: var(--spacing-sm);
                text-align: center;
        }

        .footer-copyright {
                font-size: 0.75rem;
        }

        .footer-tagline-bottom {
                font-size: 0.6875rem;
        }

        /* ── Pagination ────────────────────────────────────────────────── */
        .hd-pagination ul {
                gap: var(--spacing-xs);
        }

        .hd-pagination a,
        .hd-pagination span {
                padding: 0.375rem 0.625rem;
                font-size: 0.75rem;
                min-width: 32px;
                min-height: 32px;
        }

        /* ── Scroll Navigation Buttons ─────────────────────────────────── */
        .scroll-nav-btn {
                width: 32px;
                height: 32px;
        }

        .scroll-nav-btn svg {
                width: 16px;
                height: 16px;
        }

        /* ── Scroll to Top ─────────────────────────────────────────────── */
        .scroll-to-top {
                width: 40px;
                height: 40px;
                bottom: var(--spacing-md);
                right: var(--spacing-md);
        }

        .scroll-to-top svg {
                width: 18px;
                height: 18px;
        }

        /* ── Toast Notifications ───────────────────────────────────────── */
        .hd-toast-container {
                top: var(--spacing-sm);
                right: var(--spacing-sm);
                left: var(--spacing-sm);
        }

        .hd-toast {
                padding: 0.75rem;
        }

        .hd-toast__message {
                font-size: 0.8125rem;
        }

        /* ── AZ Lists Page ─────────────────────────────────────────────── */
        .hd-page-header__title {
                font-size: 1.25rem;
        }

        .hd-page-header__title svg {
                width: 24px;
                height: 24px;
        }

        .hd-page-header__count {
                font-size: 0.8125rem;
        }

        .hd-az-alphabet-inner {
                justify-content: center;
        }

        /* ── No Results ────────────────────────────────────────────────── */
        .hd-no-results > svg {
                width: 48px;
                height: 48px;
        }

        .hd-no-results__title {
                font-size: 1.25rem;
        }

        .hd-no-results__text {
                font-size: 0.875rem;
        }
}

@media (max-width: 374px) {
        /* Extra small screens */
        .hd-az-letter {
                min-width: 36px;
                height: 44px;
                font-size: 0.75rem;
        }

        .hd-az-letter-count {
                font-size: 0.5625rem;
                min-width: 16px;
        }

        .anime-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
        }

        .hero-title {
                font-size: 1.25rem;
        }

        .hero-actions {
                flex-direction: column;
                align-items: flex-start;
        }

        .hero-btn-primary,
        .hero-btn-secondary {
                width: 100%;
                justify-content: center;
        }
}

/* ==========================================================================
   MOBILE RESPONSIVE OVERRIDES
   Comprehensive mobile-first fixes for all components
   ========================================================================== */

/* ── Extra small screens (≤ 374px) ────────────────────────────────────── */
@media (max-width: 374px) {
        .container,
        .hd-container {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
        }

        .header-inner {
                padding: 0 0.75rem;
                height: 56px;
        }

        .site-logo a {
                font-size: 1.25rem;
        }

        .site-logo .logo-icon {
                width: 30px;
                height: 30px;
                font-size: 0.9375rem;
        }

        .hero-banner,
        .hero-slider {
                min-height: 320px;
        }

        .hero-title {
                font-size: 1.5rem;
        }

        .hero-actions {
                flex-direction: column;
                gap: var(--spacing-sm);
        }

        .hero-btn-primary,
        .hero-btn-secondary {
                width: 100%;
                justify-content: center;
                padding: 0.625rem 1rem;
                font-size: 0.875rem;
        }

        .anime-card-title {
                font-size: 0.75rem;
        }

        .anime-badge {
                font-size: 0.5625rem;
                padding: 0.0625rem 0.375rem;
        }

        .section-title {
                font-size: 1.0625rem;
        }
}

/* ── Small screens / Mobile (≤ 639px) ─────────────────────────────────── */
@media (max-width: 639px) {
        html {
                scroll-behavior: auto; /* Prevents awkward smooth scroll on mobile */
        }

        body {
                -webkit-tap-highlight-color: transparent;
        }

        .container,
        .hd-container {
                padding-left: 0.875rem;
                padding-right: 0.875rem;
        }

        .header-inner {
                height: 56px;
                padding: 0 0.875rem;
        }

        .site-logo a {
                font-size: 1.375rem;
        }

        .site-logo .logo-icon {
                width: 32px;
                height: 32px;
                font-size: 1rem;
        }

        /* Hero adjustments */
        .hero-banner,
        .hero-slider {
                min-height: 380px;
        }

        .hero-banner-content,
        .hero-slide-content {
                padding: var(--spacing-lg) 0.875rem;
        }

        .hero-title {
                font-size: 1.625rem;
        }

        .hero-chinese-title {
                font-size: 0.875rem;
        }

        .hero-description {
                font-size: 0.8125rem;
                -webkit-line-clamp: 3;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
        }

        .hero-meta {
                gap: var(--spacing-sm);
        }

        .hero-meta-item {
                font-size: 0.75rem;
        }

        .hero-actions {
                flex-wrap: wrap;
                gap: var(--spacing-sm);
        }

        .hero-btn-primary {
                padding: 0.625rem 1.5rem;
                font-size: 0.875rem;
        }

        .hero-btn-secondary {
                padding: 0.625rem 1.25rem;
                font-size: 0.875rem;
        }

        /* Content sections */
        .content-section {
                padding: var(--spacing-xl) 0;
        }

        .section-header {
                margin-bottom: var(--spacing-md);
        }

        .section-title {
                font-size: 1.125rem;
        }

        /* title-icon & title-bar auto-scale with em — no fixed overrides needed */

        /* Anime cards mobile */
        .anime-grid {
                gap: var(--spacing-sm);
        }

        .anime-card-info {
                padding: 0.375rem 0.375rem 0.625rem;
        }

        .anime-card-title {
                font-size: 0.75rem;
        }

        .anime-card-genre-item {
                font-size: 0.625rem;
        }

        .anime-badge {
                font-size: 0.5625rem;
                padding: 0.0625rem 0.375rem;
        }

        /* Disable hover transforms on mobile for better performance */
        .anime-card:hover {
                transform: none;
        }

        .anime-card:hover .anime-card-thumb img {
                transform: none;
        }

        /* Touch-friendly card interaction */
        .anime-card:active {
                transform: scale(0.98);
                transition: transform 0.1s ease;
        }

        .anime-card.is-touched .anime-card-thumb-overlay {
                opacity: 1;
        }

        .anime-card.is-touched .anime-card-play {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
        }

        /* Horizontal scroll adjustments */
        .anime-scroll-container .anime-card {
                flex: 0 0 130px;
                min-width: 130px;
        }

        .scroll-nav-btn {
                width: 32px;
                height: 32px;
        }

        .scroll-nav-btn svg {
                width: 16px;
                height: 16px;
        }

        /* Genre pills mobile */
        .genre-pill {
                padding: 0.375rem 0.75rem;
                font-size: 0.75rem;
        }

        .genre-pill .genre-count {
                font-size: 0.625rem;
        }

        /* Hide genre scroll arrows on mobile (touch scroll works) */
        .genre-scroll-wrapper .scroll-nav-btn {
                display: none;
        }

        /* Pagination mobile */
        .pagination {
                gap: var(--spacing-xs);
                padding: var(--spacing-xl) 0;
        }

        .pagination a,
        .pagination span {
                min-width: 36px;
                height: 36px;
                font-size: 0.8125rem;
        }

        /* Episode list mobile */
        .episode-list {
                gap: var(--spacing-xs);
        }

        .episode-item {
                padding: 0.5rem;
                font-size: 0.75rem;
                min-height: 36px;
        }

        /* Footer mobile */
        .footer-main {
                padding: var(--spacing-2xl) 0 var(--spacing-xl);
        }

        .footer-grid {
                gap: var(--spacing-xl);
        }

        .footer-heading {
                font-size: 0.8125rem;
                margin-bottom: var(--spacing-md);
        }

        .footer-heading {
                font-size: 0.8125rem;
                margin-bottom: var(--spacing-md);
                border-bottom: 2px solid rgba(230, 57, 70, 0.2);
                padding-bottom: 6px;
                display: inline-block;
        }

        .footer-links {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 8px !important;
        }

        .footer-links a {
                font-size: 0.8125rem !important;
                padding: 10px 14px !important;
                background: rgba(255, 255, 255, 0.02) !important;
                border: 1px solid rgba(255, 255, 255, 0.05) !important;
                border-radius: 10px !important;
                display: flex !important;
                align-items: center !important;
                gap: 10px !important;
                min-height: unset !important;
                color: var(--text-secondary) !important;
                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
                text-decoration: none !important;
        }

        .footer-links a svg {
                width: 16px !important;
                height: 16px !important;
                flex-shrink: 0 !important;
                opacity: 0.7 !important;
                color: var(--gold) !important;
                transition: all 0.2s ease !important;
        }

        .footer-links a:hover,
        .footer-links a:active {
                background: rgba(230, 57, 70, 0.06) !important;
                border-color: rgba(230, 57, 70, 0.2) !important;
                color: var(--text-primary) !important;
                transform: translateY(-1px) !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        }

        .footer-links a:hover svg,
        .footer-links a:active svg {
                opacity: 1 !important;
                color: var(--crimson) !important;
                transform: scale(1.1) !important;
        }

        .footer-social a {
                width: 44px;
                height: 44px;
        }

        .footer-brand .footer-tagline {
                font-size: 0.8125rem;
        }

        .footer-bottom {
                padding: var(--spacing-md) 0;
        }

        .footer-copyright {
                font-size: 0.75rem;
        }

        .footer-tagline-bottom {
                font-size: 0.6875rem;
        }

        /* Single anime page mobile */
        .anime-hero {
                min-height: 320px;
        }

        .anime-hero-content {
                padding: var(--spacing-xl) 0;
                gap: var(--spacing-lg);
        }

        .anime-poster {
                width: 140px;
        }

        .anime-details .anime-title {
                font-size: 1.5rem;
        }

        .anime-details .anime-chinese-title {
                font-size: 0.875rem;
        }

        .anime-description {
                font-size: 0.875rem;
        }

        .anime-meta-row {
                gap: var(--spacing-sm);
        }

        .anime-meta-item {
                font-size: 0.8125rem;
        }

        /* Breadcrumbs mobile */
        .breadcrumbs {
                font-size: 0.75rem;
                padding: var(--spacing-sm) 0;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
        }

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

        /* Widget mobile */
        .widget {
                padding: var(--spacing-md);
        }

        /* Toast notification mobile */
        .hd-toast-container {
                top: auto;
                bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
                right: 0.75rem;
                left: 0.75rem;
                align-items: stretch;
        }

        .hd-toast {
                min-width: auto;
                max-width: none;
                padding: 0.875rem 1rem;
        }

        /* Search results mobile */
        .search-results-grid {
                gap: var(--spacing-sm);
        }

        /* 404 page mobile */
        .error-404 .error-code {
                font-size: 5rem;
        }

        .error-404 .error-title {
                font-size: 1.25rem;
        }

        /* Archive header mobile */
        .archive-header {
                padding: var(--spacing-xl) 0;
                margin-bottom: var(--spacing-xl);
        }

        .archive-title {
                font-size: 1.375rem;
        }

        /* Main content area padding on mobile */
        .site-main,
        #main-content,
        .hd-main {
                padding-left: 0;
                padding-right: 0;
        }

        /* Prevent horizontal overflow from any element */
        .hd-main,
        .site-main,
        #main-content {
                overflow-x: clip;
        }
}

/* ── Medium mobile (414px - 639px) ────────────────────────────────────── */
@media (min-width: 414px) and (max-width: 639px) {
        .anime-scroll-container .anime-card {
                flex: 0 0 145px;
                min-width: 145px;
        }
}

/* ── Touch device optimizations ───────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
        /* Disable hover-dependent features on touch devices */
        .anime-card:hover {
                transform: none;
                box-shadow: none;
        }

        .anime-card:hover .anime-card-thumb img {
                transform: none;
        }

        .anime-card:hover .anime-card-thumb-overlay {
                opacity: 0;
        }

        .anime-card:hover .anime-card-play {
                opacity: 0;
        }

        .anime-card.is-touched .anime-card-thumb-overlay {
                opacity: 1;
        }

        .anime-card.is-touched .anime-card-play {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
        }

        .anime-card.is-touched:hover {
                transform: none;
        }

        /* Make scroll nav buttons always visible on touch */
        .scroll-nav-btn {
                opacity: 0.6;
        }

        .scroll-nav-wrapper:hover .scroll-nav-btn {
                opacity: 0.6;
        }

        /* Larger touch targets */
        .genre-pill {
                min-height: 44px;
        }

        .section-view-all {
                min-height: 44px;
                display: inline-flex;
                align-items: center;
        }

        .episode-item {
                min-height: 44px;
        }

        /* Footer links need bigger touch targets */
        .footer-links a {
                min-height: 44px;
        }

        .footer-social a {
                width: 44px;
                height: 44px;
        }
}

/* ── Safe area inset support for notched phones ───────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
        body {
                padding-top: env(safe-area-inset-top);
        }

        .mobile-menu-panel {
                padding-right: env(safe-area-inset-right);
                padding-bottom: env(safe-area-inset-bottom);
        }

        .mobile-menu-topbar {
                padding-top: calc(12px + env(safe-area-inset-top));
        }

        .scroll-to-top {
                bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
                right: calc(var(--spacing-xl) + env(safe-area-inset-right));
        }

        .hero-slide-quality {
                top: calc(var(--spacing-lg) + env(safe-area-inset-top));
        }

        .hd-toast-container {
                right: calc(1rem + env(safe-area-inset-right));
        }
}

@supports (padding: env(safe-area-inset-top)) {
        @media (min-width: 1024px) {
                body {
                        padding-top: env(safe-area-inset-top);
                }
        }
}

/* ── Landscape orientation fixes ──────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
        .hero-banner,
        .hero-slider {
                min-height: 280px;
        }

        .header-inner {
                height: 48px;
        }

        /* No body padding-top needed — header is sticky (in flow) */

        .mobile-menu-panel {
                max-width: 320px;
        }
}

/* Landscape admin-bar header offset removed */

/* ── High contrast / forced colors mode ───────────────────────────────── */
@media (forced-colors: active) {
        .anime-badge {
                border: 1px solid ButtonText;
        }

        .anime-card {
                border: 1px solid CanvasText;
        }

        .hero-btn-primary,
        .hero-btn-secondary {
                border: 2px solid ButtonText;
        }
}


/* ─── NEXT-GEN PREMIUM HERO SLIDER MOBILE OVERRIDES ─────────────────── */
@media (max-width: 767px) {
        /* Hide slider arrows on touch screens to reduce clutter and overlapping */
        .hero-slider-arrow {
                display: none !important;
        }

        /* Ensure slide content bottom padding is taller to make space for dots */
        .hero-slide-content {
                padding: var(--spacing-lg) var(--spacing-md) 48px !important;
        }

        /* Prevent button vertical stacking, force sleek 50/50 side-by-side row */
        .hero-actions {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 8px !important;
                width: 100% !important;
                margin-top: 12px !important;
                flex-wrap: nowrap !important;
        }

        /* Highly refined, pill-shaped sleek next-gen buttons */
        .hero-btn-primary,
        .hero-btn-secondary {
                flex: 1 1 50% !important;
                width: 50% !important;
                height: 38px !important;
                padding: 0 10px !important;
                font-size: 0.8125rem !important;
                font-weight: 700 !important;
                border-radius: 20px !important; /* Premium Pill Shape */
                justify-content: center !important;
                align-items: center !important;
                gap: 6px !important;
                box-shadow: none !important;
                white-space: nowrap !important;
                margin: 0 !important;
                text-shadow: none !important;
        }

        .hero-btn-primary {
                background: linear-gradient(135deg, var(--crimson), var(--crimson-dark)) !important;
                border: none !important;
        }

        .hero-btn-secondary {
                background: rgba(255, 255, 255, 0.08) !important;
                border: 1px solid rgba(255, 255, 255, 0.12) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
        }

        /* Slimmer icons */
        .hero-btn-primary svg,
        .hero-btn-secondary svg {
                width: 14px !important;
                height: 14px !important;
        }

        /* Keep slider dots cleanly positioned and separated at the very bottom */
        .hero-slider-dots {
                bottom: 12px !important;
                z-index: 15 !important;
        }

        /* Title size refinements on mobile for premium look */
        .hero-title {
                font-size: 1.25rem !important;
                font-weight: 800 !important;
                line-height: 1.3 !important;
                margin-bottom: 4px !important;
                letter-spacing: -0.02em !important;
        }

        .hero-chinese-title {
                font-size: 0.8125rem !important;
                color: var(--gold) !important;
                margin-bottom: 8px !important;
                font-weight: 500 !important;
        }

        .hero-description {
                font-size: 0.75rem !important;
                line-height: 1.4 !important;
                -webkit-line-clamp: 2 !important;
                margin-bottom: var(--spacing-sm) !important;
                color: rgba(255, 255, 255, 0.7) !important;
        }
}

@media (max-width: 374px) {
        .hero-title {
                font-size: 1.125rem !important;
        }
        .hero-btn-primary,
        .hero-btn-secondary {
                font-size: 0.75rem !important;
                height: 36px !important;
                gap: 4px !important;
        }
}

/* H-Donghua Custom Theme - Generated 2026-05-30T00:50:41.024Z */
:root {
  --crimson: #e63946;
  --gold: #d4a574;
  --bg-primary: #0a0a14;
  --bg-card: #12122a;
  --text-primary: #f0f0f5;
  --text-muted: #8888a0;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --base-font-size: 16px;
  --heading-font-weight: 800;
  --layout-style: wide;
  --sidebar-position: right;
  --card-style: standard;
  --posts-per-page: 12;
  --hero-overlay-opacity: 0.6;
}

/* ─── NEXT-GEN AUTOMATIC PARTNER FEEDS GRID & CARDS ─────────────────── */
.hd-partner-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 30px 0;
	box-sizing: border-box;
}

.hd-partner-card {
	background: rgba(20, 20, 35, 0.55);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 14px;
	overflow: hidden;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hd-partner-card:hover {
	transform: translateY(-5px);
	border-color: rgba(230, 57, 70, 0.35); /* Elegant Crimson glow */
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 
	            0 0 20px rgba(230, 57, 70, 0.08);
}

.hd-partner-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	color: inherit !important;
	height: 100%;
}

.hd-partner-card-thumb {
	position: relative;
	width: 100%;
	height: 210px;
	overflow: hidden;
	background: #07070c;
}

.hd-partner-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hd-partner-card:hover .hd-partner-card-thumb img {
	transform: scale(1.06);
}

.hd-partner-card-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.25);
	background: linear-gradient(135deg, rgba(20,20,35,0.8), rgba(10,10,15,0.9));
	gap: 8px;
}

.hd-partner-card-placeholder span {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.hd-partner-card-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 5;
	background: linear-gradient(135deg, rgba(230, 57, 70, 0.95), rgba(181, 23, 36, 0.85));
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 5px 12px;
	border-radius: 30px;
	box-shadow: 0 4px 12px rgba(230, 57, 70, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.hd-partner-card-info {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.hd-partner-card-meta {
	margin-bottom: 12px;
}

.hd-partner-card-date {
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.75rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hd-partner-card-date svg {
	opacity: 0.6;
}

.hd-partner-card-title {
	color: #ffffff;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 12px 0;
	transition: color 0.3s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--font-heading, inherit);
}

.hd-partner-card:hover .hd-partner-card-title {
	color: var(--crimson, #e63946);
}

.hd-partner-card-excerpt {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.84375rem;
	line-height: 1.6;
	margin: 0 0 20px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hd-partner-card-footer {
	margin-top: auto;
	padding-top: 15px;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.hd-partner-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 7px 16px;
	border-radius: 30px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hd-partner-card-btn svg {
	transition: transform 0.3s ease;
}

.hd-partner-card:hover .hd-partner-card-btn {
	background: linear-gradient(135deg, var(--crimson, #e63946), #b51724);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
}

.hd-partner-card:hover .hd-partner-card-btn svg {
	transform: translate(2px, -2px);
}

/* Responsive Grid Breakpoints */
@media (max-width: 1024px) {
	.hd-partner-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.hd-partner-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.hd-partner-card-thumb {
		height: 180px;
	}
	.hd-partner-card-info {
		padding: 20px;
	}
}

/* ─── PREMIUM PARTNER FEED LAYOUT & CENTERING ─────────────────────────── */
.hd-partner-page-content {
	width: 100%;
	max-width: 100%;
	display: block;
	padding: var(--spacing-xl) 0;
	box-sizing: border-box;
}

.hd-partner-page-content .hd-container {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 80rem;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
	box-sizing: border-box;
}

/* Force perfect centering on the error/offline cards */
.hd-partner-card-error {
	background: rgba(20, 20, 35, 0.45) !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-radius: 14px !important;
	padding: 45px 30px !important;
	text-align: center !important;
	max-width: 580px !important;
	margin: 50px auto !important; /* Force horizontal centering */
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 25px rgba(230, 57, 70, 0.02) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.hd-partner-page-content {
		padding: var(--spacing-md) 0;
	}
	.hd-partner-card-error {
		padding: 30px 20px !important;
		margin: 30px 15px !important;
	}
}

/* ─── NEXT-GEN GLASSMORPHIC DROPDOWN MENU ─────────────────────────── */
.hd-dropdown-menu {
	position: relative;
}

.hd-dropdown-trigger {
	display: flex !important;
	align-items: center;
	gap: 6px !important;
	cursor: pointer;
}

.hd-dropdown-sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: rgba(10, 10, 20, 0.95);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 8px 0;
	margin: 0;
	list-style: none;
	width: 200px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 
	            0 0 20px rgba(250, 250, 255, 0.01);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 999;
}

/* Hover behaviors */
.hd-dropdown-menu:hover .hd-dropdown-sub {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(4px);
}

.hd-dropdown-menu:hover .hd-chevron-icon {
	transform: rotate(180deg);
	color: var(--crimson);
}

/* Submenu items */
.hd-dropdown-sub li {
	width: 100%;
	box-sizing: border-box;
}

.hd-dropdown-sub li a {
	display: flex !important;
	align-items: center;
	gap: 10px !important;
	padding: 10px 16px !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	background: transparent !important;
	transition: all 0.25s ease !important;
	box-sizing: border-box;
	border-radius: 6px;
	margin: 2px 8px;
	width: calc(100% - 16px);
}

.hd-dropdown-sub li a:hover {
	color: #ffffff !important;
	background: rgba(230, 57, 70, 0.12) !important; /* Soft crimson overlay */
}

/* Active sub-item */
.hd-dropdown-sub li.active a {
	color: #ffffff !important;
	background: linear-gradient(135deg, var(--crimson, #e63946), #b51724) !important;
	box-shadow: 0 4px 12px rgba(230, 57, 70, 0.35);
}

.hd-dropdown-sub li.active a .nav-icon {
	color: #ffffff !important;
	opacity: 1 !important;
}

.hd-dropdown-sub .nav-icon {
	width: 15px !important;
	height: 15px !important;
	opacity: 0.7;
	transition: all 0.25s ease;
}

.hd-dropdown-sub li a:hover .nav-icon {
	color: var(--crimson);
	opacity: 1;
}

/* ─── PREMIUM CINEMA LIGHTS-OFF / THEATER MODE DIM OVERLAY ─────────── */
body.hd-lights-off::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(4, 4, 8, 0.93) !important; /* Premium deep dark cinematic dim overlay */
	z-index: 998 !important; /* Float just below player container */
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
	animation: fadeInDimOverlay 0.45s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInDimOverlay {
	to { opacity: 1; }
}

/* Drop header z-index below the dim overlay so it dims out beautifully */
body.hd-lights-off .site-header {
	z-index: 997 !important;
	pointer-events: none !important;
	opacity: 0.25;
	transition: opacity 0.4s ease, z-index 0.4s ease;
}

/* Keep the video player container, toolbar, and server selection perfectly highlighted */
body.hd-lights-off .hd-player-container {
	position: relative;
	z-index: 999 !important; /* Stack above the cinematic overlay */
	box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 
	            0 0 45px rgba(230, 57, 70, 0.08) !important; /* Bold glowing border highlight */
	transition: box-shadow 0.4s ease;
}

body.hd-lights-off .hd-player-toolbar,
body.hd-lights-off .hd-server-selector,
body.hd-lights-off .hd-ep-grid-section,
body.hd-lights-off .hd-episode-nav-top {
	position: relative;
	z-index: 999 !important; /* Elevate crucial playback controls above overlay */
}

/* Ensure breadcrumbs and headers don't bleed through high z-index */
body.hd-lights-off .hd-breadcrumb,
body.hd-lights-off .hd-page-header {
	position: relative;
	z-index: 1 !important;
	opacity: 0.15;
	transition: opacity 0.4s ease;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* ─── Premium Glassmorphic Comments & Discussion System ──────────────────── */
/* ────────────────────────────────────────────────────────────────────────── */

.hd-comments-container {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hd-comments-area {
	color: var(--text-primary);
}

.hd-comments-header {
	margin-bottom: 24px;
}

.hd-comments-title {
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text-primary);
	margin: 0;
}

.hd-comments-title-icon {
	color: var(--crimson, #e63946);
}

/* Comments List */
.hd-comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 40px 0;
}

.hd-comment-list li {
	margin-bottom: 20px;
}

/* Threaded comments connection threads */
.hd-comment-list .children {
	list-style: none;
	padding-left: 28px;
	margin: 16px 0 0 0;
	border-left: 2px solid rgba(230, 57, 70, 0.15); /* Sleek Crimson vertical connection threads */
	position: relative;
}

/* Individual Comment Card */
.hd-comment-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 20px;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	position: relative;
	overflow: hidden;
}

.hd-comment-card:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(230, 57, 70, 0.3);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Comment Header Row */
.hd-comment-header-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.hd-comment-avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease;
}

.hd-comment-card:hover .hd-comment-avatar img {
	transform: scale(1.05);
	border-color: var(--crimson, #e63946);
}

/* Meta Information */
.hd-comment-meta-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hd-comment-author-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.hd-comment-author-name,
.hd-comment-author-name a {
	font-size: 14px;
	font-weight: 700;
	color: #ffffff !important;
	text-decoration: none;
	transition: color 0.2s;
}

.hd-comment-author-name a:hover {
	color: var(--crimson, #e63946) !important;
}

/* Curated Badges for Author and Admin */
.hd-comment-badge {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0.5px;
	display: inline-flex;
	align-items: center;
}

.hd-comment-badge-author {
	background: rgba(230, 57, 70, 0.15);
	color: var(--crimson, #e63946);
	border: 1px solid rgba(230, 57, 70, 0.3);
	box-shadow: 0 0 8px rgba(230, 57, 70, 0.1);
}

.hd-comment-badge-admin {
	background: rgba(212, 163, 115, 0.15);
	color: var(--gold, #d4a574);
	border: 1px solid rgba(212, 163, 115, 0.3);
	box-shadow: 0 0 8px rgba(212, 163, 115, 0.1);
}

.hd-comment-date {
	font-size: 11px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Moderation Note */
.hd-comment-awaiting-moderation {
	font-size: 13px;
	font-style: italic;
	color: var(--gold, #d4a574);
	background: rgba(212, 163, 115, 0.08);
	border-left: 3px solid var(--gold, #d4a574);
	padding: 8px 12px;
	border-radius: 4px;
	margin: 10px 0;
}

/* Comment Text */
.hd-comment-text-content {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-secondary);
	margin-bottom: 12px;
	word-break: break-word;
}

.hd-comment-text-content p {
	margin: 0 0 10px 0;
}

.hd-comment-text-content p:last-child {
	margin-bottom: 0;
}

/* Comment Action / Reply Button */
.hd-comment-actions {
	display: flex;
	justify-content: flex-end;
}

.comment-reply-link {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary) !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 6px 14px;
	border-radius: 20px;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.comment-reply-link:hover {
	color: #ffffff !important;
	background: var(--crimson, #e63946);
	border-color: var(--crimson, #e63946);
	box-shadow: 0 0 10px rgba(230, 57, 70, 0.4);
	transform: translateY(-1px);
}

.comment-reply-link svg {
	transition: transform 0.2s;
}

.comment-reply-link:hover svg {
	transform: translateX(-2px);
}

/* ────────────────────────────────────────────────────────────────────────── */
/* ─── Comment Submission Form ────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────── */

.comment-respond {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 24px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	margin-top: 30px;
}

.comment-reply-title {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 16px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#cancel-comment-reply-link {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted) !important;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 4px 10px;
	border-radius: 12px;
	transition: all 0.2s;
	margin-left: 10px;
}

#cancel-comment-reply-link:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
}

/* Form Groups */
.hd-comment-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.hd-comment-form-group {
	margin-bottom: 12px;
}

.hd-comment-form-comment {
	margin-bottom: 16px;
}

/* Inputs & Textareas */
.hd-comment-form-group input[type="text"],
.hd-comment-form-group input[type="email"],
.hd-comment-form-group textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 12px 14px;
	color: #ffffff;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
	transition: all 0.25s ease;
	outline: none;
}

.hd-comment-form-group textarea {
	resize: none;
	min-height: 100px;
}

.hd-comment-form-group input::placeholder,
.hd-comment-form-group textarea::placeholder {
	color: var(--text-muted);
	opacity: 0.6;
}

.hd-comment-form-group input:focus,
.hd-comment-form-group textarea:focus {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--crimson, #e63946);
	box-shadow: 0 0 10px rgba(230, 57, 70, 0.15);
}

/* Submit Button Override */
.hd-comment-submit {
	padding: 10px 24px;
	border-radius: 20px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s;
}

.hd-comment-submit:hover {
	box-shadow: 0 0 14px rgba(230, 57, 70, 0.4);
	transform: translateY(-1px);
}

/* Empty Notes */
.hd-no-comments {
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
	font-style: italic;
	margin: 20px 0;
}

.logged-in-as {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 14px;
}

.logged-in-as a {
	color: var(--crimson, #e63946) !important;
	text-decoration: none;
}

.logged-in-as a:hover {
	text-decoration: underline;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* ─── Responsive Styles ──────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.hd-comment-list .children {
		padding-left: 14px;
		margin-left: 0;
	}
	.hd-comment-card {
		padding: 14px;
	}
	.hd-comment-avatar img {
		width: 36px;
		height: 36px;
	}
	.hd-comment-form-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.hd-comment-submit {
		width: 100%;
	}
}

/* ==========================================================================
   Advanced Multi-Taxonomy AJAX Filter & Surprise Me Gamified Picker
   ========================================================================== */

/* Page layout and titles */
.hd-page-filter {
	padding-bottom: 60px;
}

.hd-page-filter-header {
	padding: 24px 0 10px;
}

.hd-page-filter-header .hd-page-header__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 2rem;
	font-weight: 800;
	color: #fff;
	margin: 0 0 4px;
}

.hd-page-filter-header .hd-page-header__title svg {
	color: var(--crimson);
}

.hd-page-filter-header .hd-page-header__count {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	transition: opacity 0.2s ease;
}

/* Glassmorphic Controls Panel */
.hd-filter-controls {
	margin-bottom: 36px;
}

.hd-filter-controls-wrap {
	background: rgba(26, 26, 26, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 16px;
	padding: 24px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hd-filter-controls-wrap:hover {
	border-color: rgba(255, 45, 85, 0.2);
	box-shadow: 0 8px 32px 0 rgba(255, 45, 85, 0.05);
}

.hd-filter-select-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	margin-bottom: 24px;
}

.hd-filter-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hd-filter-group label {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.8px;
}

/* Custom Dropdown select menu */
.hd-filter-select {
	width: 100%;
	height: 48px;
	background-color: rgba(18, 18, 18, 0.6);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba%28255, 255, 255, 0.5%29' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: #fff;
	font-size: 0.92rem;
	font-weight: 500;
	padding: 0 40px 0 16px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
}

.hd-filter-select:hover {
	border-color: rgba(255, 255, 255, 0.25);
	background-color: rgba(18, 18, 18, 0.8);
}

.hd-filter-select:focus {
	border-color: var(--crimson);
	box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.25);
	background-color: rgba(18, 18, 18, 0.95);
}

.hd-filter-select option {
	background-color: #1a1a1a;
	color: #fff;
	padding: 12px;
}

/* Controls Action Buttons */
.hd-filter-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding-top: 20px;
}

.hd-filter-btn-reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
	font-weight: 600;
	padding: 10px 20px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.hd-filter-btn-reset:not(:disabled):hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.hd-filter-btn-reset:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.hd-filter-btn-reset svg {
	transition: transform 0.4s ease;
}

.hd-filter-btn-reset:not(:disabled):hover svg {
	transform: rotate(-180deg);
}

/* Surprise Me Button - Glowing gradient with micro animations */
.hd-filter-btn-surprise {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--crimson) 0%, #ff5d7d 100%);
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 12px 24px;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(255, 45, 85, 0.35);
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hd-filter-btn-surprise::before {
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 200%;
	height: 100%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.3) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-25deg);
	transition: 0.75s;
	opacity: 0;
}

.hd-filter-btn-surprise:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 45, 85, 0.5);
	filter: brightness(1.05);
}

.hd-filter-btn-surprise:hover::before {
	left: 125%;
	opacity: 1;
}

.hd-filter-btn-surprise:active {
	transform: translateY(1px);
	box-shadow: 0 2px 10px rgba(255, 45, 85, 0.3);
}

.hd-filter-btn-surprise .hd-surprise-icon {
	font-size: 1.1rem;
	display: inline-block;
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hd-filter-btn-surprise:hover .hd-surprise-icon {
	transform: rotate(20deg) scale(1.15);
}

/* Empty State / No Results found card */
.hd-filter-no-results {
	grid-column: 1 / -1;
	background: rgba(26, 26, 26, 0.3);
	border: 1px dashed rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 60px 24px;
	text-align: center;
	max-width: 500px;
	margin: 40px auto;
}

.hd-no-results-icon {
	font-size: 3.5rem;
	margin-bottom: 20px;
}

.hd-filter-no-results h3 {
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
}

.hd-filter-no-results p {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 24px;
	line-height: 1.6;
}

/* Shimmer Skeletal Loaders */
.hd-skeleton-card {
	background: rgba(26, 26, 26, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

.hd-skeleton-poster {
	position: relative;
	width: 100%;
	aspect-ratio: 2/3;
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
}

.hd-skeleton-poster::after,
.hd-skeleton-title::after,
.hd-skeleton-meta::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: translateX(-100%);
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.04) 20%,
		rgba(255, 255, 255, 0.08) 60%,
		rgba(255, 255, 255, 0) 100%
	);
	animation: hd-shimmer 1.5s infinite;
}

.hd-skeleton-content {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hd-skeleton-title {
	position: relative;
	height: 16px;
	width: 80%;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	overflow: hidden;
}

.hd-skeleton-meta {
	position: relative;
	height: 12px;
	width: 50%;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 4px;
	overflow: hidden;
}

@keyframes hd-shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* 🎲 Surprise Me 3D Shuffler Fullscreen Overlay */
.hd-shuffle-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 1200px;
}

.hd-shuffle-overlay-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 10, 10, 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* Glow effects inside overlay background */
.hd-shuffle-overlay-bg::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(255, 45, 85, 0.15) 0%, rgba(255, 45, 85, 0) 70%);
	pointer-events: none;
}

.hd-shuffle-container {
	position: relative;
	width: 90%;
	max-width: 520px;
	background: rgba(26, 26, 26, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 45, 85, 0.1);
	border-radius: 24px;
	padding: 40px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform: translateZ(0);
	animation: hd-modal-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hd-modal-enter {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.hd-shuffle-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.hd-shuffle-close-btn:hover {
	background: rgba(255, 45, 85, 0.1);
	border-color: rgba(255, 45, 85, 0.3);
	color: var(--crimson);
	transform: rotate(90deg);
}

/* 3D Shuffling Card Deck */
.hd-shuffle-deck-wrap {
	position: relative;
	width: 180px;
	height: 270px;
	margin-bottom: 30px;
	perspective: 1000px;
}

.hd-shuffle-deck {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.hd-shuffle-card {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	transform-origin: center center;
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
	background-size: cover;
	background-position: center;
	border: 2px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.hd-card-back {
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, #2d1b24 0%, #121212 100%);
	position: relative;
}

.hd-card-back::after {
	content: '🎲';
	font-size: 2.8rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-shadow: 0 0 15px rgba(255, 45, 85, 0.5);
}

/* Deck default staggered layout */
.card-1 {
	z-index: 4;
	transform: rotate(-3deg) translateZ(0);
}
.card-2 {
	z-index: 3;
	transform: rotate(2deg) translateZ(-10px) translateX(6px);
}
.card-3 {
	z-index: 2;
	transform: rotate(-1deg) translateZ(-20px) translateY(4px);
}
.card-4 {
	z-index: 1;
	transform: rotate(4deg) translateZ(-30px) translateX(-6px);
}

/* Interactive Shuffling State (CSS Keyframes Animation) */
.hd-shuffle-deck.is-shuffling .card-1 {
	animation: hd-shuffle-c1 1.2s infinite ease-in-out;
}
.hd-shuffle-deck.is-shuffling .card-2 {
	animation: hd-shuffle-c2 1.2s infinite ease-in-out;
}
.hd-shuffle-deck.is-shuffling .card-3 {
	animation: hd-shuffle-c3 1.2s infinite ease-in-out;
}
.hd-shuffle-deck.is-shuffling .card-4 {
	animation: hd-shuffle-c4 1.2s infinite ease-in-out;
}

@keyframes hd-shuffle-c1 {
	0%, 100% {
		transform: rotate(-3deg) translateZ(0);
		z-index: 4;
	}
	25% {
		transform: rotate(-15deg) translateX(-130px) translateY(-10px) translateZ(20px);
		z-index: 4;
	}
	50% {
		transform: rotate(5deg) translateZ(-30px) translateX(4px);
		z-index: 1;
	}
	75% {
		transform: rotate(2deg) translateZ(-20px);
		z-index: 2;
	}
}

@keyframes hd-shuffle-c2 {
	0%, 100% {
		transform: rotate(2deg) translateZ(-10px) translateX(6px);
		z-index: 3;
	}
	25% {
		transform: rotate(-2deg) translateZ(-5px);
		z-index: 3;
	}
	50% {
		transform: rotate(18deg) translateX(130px) translateY(10px) translateZ(20px);
		z-index: 4;
	}
	75% {
		transform: rotate(-5deg) translateZ(-30px);
		z-index: 1;
	}
}

@keyframes hd-shuffle-c3 {
	0%, 100% {
		transform: rotate(-1deg) translateZ(-20px) translateY(4px);
		z-index: 2;
	}
	25% {
		transform: rotate(8deg) translateZ(-30px);
		z-index: 1;
	}
	50% {
		transform: rotate(-3deg) translateZ(-10px);
		z-index: 2;
	}
	75% {
		transform: rotate(-12deg) translateX(-135px) translateY(12px) translateZ(20px);
		z-index: 4;
	}
}

@keyframes hd-shuffle-c4 {
	0%, 100% {
		transform: rotate(4deg) translateZ(-30px) translateX(-6px);
		z-index: 1;
	}
	25% {
		transform: rotate(14deg) translateX(125px) translateY(-12px) translateZ(20px);
		z-index: 4;
	}
	50% {
		transform: rotate(2deg) translateZ(-20px);
		z-index: 3;
	}
	75% {
		transform: rotate(-2deg) translateZ(-10px);
		z-index: 3;
	}
}

/* Card Reveal state when selection is decided */
.hd-shuffle-deck.is-revealing .hd-shuffle-card {
	animation: none !important;
}

.hd-shuffle-deck.is-revealing .card-1 {
	transform: scale(1.15) rotate(0deg) translateZ(50px);
	border-color: var(--gold);
	box-shadow: 0 15px 45px rgba(212, 165, 116, 0.4), 0 0 30px rgba(212, 165, 116, 0.2);
	z-index: 100;
}

.hd-shuffle-deck.is-revealing .card-2,
.hd-shuffle-deck.is-revealing .card-3,
.hd-shuffle-deck.is-revealing .card-4 {
	opacity: 0;
	transform: scale(0.8) translateZ(-100px);
}

/* Information & Results display */
.hd-shuffle-info-box {
	width: 100%;
	text-align: center;
}

.hd-shuffle-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.hd-shuffle-status-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(255, 45, 85, 0.15);
	border-top-color: var(--crimson);
	border-radius: 50%;
	animation: hd-spin 0.8s linear infinite;
}

.hd-shuffle-status-text {
	font-size: 0.95rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 0.5px;
}

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

/* Surprise Me Results Panel Details */
.hd-shuffle-result-display {
	width: 100%;
	animation: hd-fade-up 0.5s ease;
}

@keyframes hd-fade-up {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hd-shuffle-result-card {
	display: flex;
	gap: 20px;
	background: rgba(18, 18, 18, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 16px;
	text-align: left;
	align-items: center;
}

.hd-shuffle-result-poster {
	width: 90px;
	aspect-ratio: 2/3;
	border-radius: 10px;
	object-fit: cover;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);
	border: 1px solid rgba(255,255,255,0.05);
}

.hd-shuffle-result-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hd-shuffle-badge {
	align-self: flex-start;
	background: rgba(212, 165, 116, 0.12);
	color: var(--gold);
	border: 1px solid rgba(212, 165, 116, 0.3);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1.2px;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
}

.hd-shuffle-result-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	margin: 2px 0 4px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hd-shuffle-redirect-desc {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 6px;
}

/* Countdown bar progress indicator */
.hd-shuffle-countdown-bar {
	height: 4px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	width: 100%;
	overflow: hidden;
}

.hd-shuffle-countdown-progress {
	height: 100%;
	width: 0;
	background: var(--gold);
	border-radius: 2px;
}

/* Pulse animation for smart filter link */
.animate-pulse {
	animation: hd-pulse 2s infinite ease-in-out;
}

@keyframes hd-pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.6;
		transform: scale(0.95);
	}
}

/* ==========================================================================
   Responsive Breakpoints for AJAX Filter
   ========================================================================== */

@media (max-width: 1024px) {
	.hd-filter-select-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.hd-filter-select-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	.hd-filter-controls-wrap {
		padding: 18px;
	}
	.hd-filter-btn-surprise {
		width: 100%;
		justify-content: center;
	}
	.hd-filter-btn-reset {
		width: 100%;
		justify-content: center;
	}
	.hd-filter-actions {
		flex-direction: column-reverse;
		gap: 12px;
	}
	.hd-shuffle-container {
		padding: 24px;
		width: 92%;
	}
	.hd-shuffle-result-card {
		padding: 12px;
		gap: 14px;
	}
	.hd-shuffle-result-title {
		font-size: 1.05rem;
	}
}

@media (max-width: 480px) {
	.hd-filter-select-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.hd-page-filter-header .hd-page-header__title {
		font-size: 1.6rem;
	}
	.hd-shuffle-deck-wrap {
		width: 140px;
		height: 210px;
	}
	.hd-card-back::after {
		font-size: 2.2rem;
	}
}

/* ==========================================================================
   Live Airing Countdown Timers Styling
   ========================================================================== */

.hd-card-countdown {
	position: absolute;
	bottom: 8px;
	left: 8px;
	right: 8px;
	background: rgba(10, 10, 20, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 8px;
	padding: 5px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	z-index: 10;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none; /* Let clicks pass through to card link */
}

/* Card hover interactions */
.anime-card:hover .hd-card-countdown,
.hd-schedule-card:hover .hd-card-countdown {
	background: rgba(255, 45, 85, 0.1);
	border-color: rgba(255, 45, 85, 0.35);
	box-shadow: 0 4px 15px rgba(255, 45, 85, 0.15);
	transform: translateY(-2px);
}

.hd-countdown-icon {
	font-size: 0.8rem;
	display: inline-block;
	animation: hd-clock-wiggle 4s infinite ease-in-out;
}

@keyframes hd-clock-wiggle {
	0%, 90%, 100% { transform: rotate(0deg); }
	92.5%, 97.5% { transform: rotate(-15deg); }
	95% { transform: rotate(15deg); }
}

.hd-countdown-text {
	font-size: 0.7rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.anime-card:hover .hd-countdown-text,
.hd-schedule-card:hover .hd-countdown-text {
	color: #fff;
}

/* Glowing active state when episode is currently airing */
.hd-card-countdown.is-airing-now {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.8) 100%);
	border-color: rgba(16, 185, 129, 0.3);
	animation: hd-pulse-green 2s infinite ease-in-out;
}

.hd-card-countdown.is-airing-now .hd-countdown-text {
	color: #fff;
	font-weight: 800;
	letter-spacing: 0.8px;
}

@keyframes hd-pulse-green {
	0%, 100% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(16, 185, 129, 0.4);
		border-color: rgba(16, 185, 129, 0.3);
	}
	50% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 16px rgba(16, 185, 129, 0.7);
		border-color: rgba(16, 185, 129, 0.6);
	}
}

/* Adaptability for schedule card thumbs */
.hd-schedule-card-thumb {
	position: relative;
}

/* Responsive constraints */
@media (max-width: 768px) {
	.hd-card-countdown {
		bottom: 6px;
		left: 6px;
		right: 6px;
		padding: 4px 6px;
		border-radius: 6px;
	}
	.hd-countdown-text {
		font-size: 0.65rem;
		letter-spacing: 0.2px;
	}
}

@media (max-width: 480px) {
	.hd-card-countdown {
		bottom: 4px;
		left: 4px;
		right: 4px;
		padding: 3px 5px;
		gap: 4px;
	}
	.hd-countdown-icon {
		font-size: 0.75rem;
	}
	.hd-countdown-text {
		font-size: 0.6rem;
	}
}

/* Inline styling for schedule cards countdown */
.hd-schedule-card-countdown {
	position: static !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	background: rgba(255, 45, 85, 0.12) !important;
	border: 1px solid rgba(255, 45, 85, 0.2) !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-radius: 4px !important;
	padding: 2px 6px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 4px !important;
	width: auto !important;
	height: auto !important;
	color: #ff5d7d !important;
	vertical-align: middle;
	margin-left: 6px;
}

.hd-schedule-card-countdown .hd-countdown-text {
	font-size: 0.68rem !important;
	color: #ff5d7d !important;
	font-weight: 700;
	letter-spacing: 0.2px !important;
	text-shadow: none !important;
}

.hd-schedule-card-countdown .hd-countdown-icon {
	font-size: 0.75rem !important;
}

/* Airing Now inline active status */
.hd-schedule-card-countdown.is-airing-now {
	background: rgba(16, 185, 129, 0.15) !important;
	border-color: rgba(16, 185, 129, 0.3) !important;
	color: #10b981 !important;
	animation: hd-pulse-green-inline 2s infinite ease-in-out !important;
}

.hd-schedule-card-countdown.is-airing-now .hd-countdown-text {
	color: #10b981 !important;
}

@keyframes hd-pulse-green-inline {
	0%, 100% {
		border-color: rgba(16, 185, 129, 0.3);
		background: rgba(16, 185, 129, 0.15);
	}
	50% {
		border-color: rgba(16, 185, 129, 0.6);
		background: rgba(16, 185, 129, 0.25);
	}
}

/* Adapt for small viewports */
@media (max-width: 480px) {
	.hd-schedule-card-countdown {
		margin-left: 0;
		margin-top: 4px;
		display: flex !important;
		align-self: flex-start;
	}
}

/* ==========================================================================
   Header & Footer Widget Customizations
   ========================================================================== */
.header-widgets-container {
	display: none; /* Collapsed by default on mobile viewports */
	align-items: center;
	gap: var(--spacing-sm);
	margin-left: auto;
	margin-right: var(--spacing-md);
}

@media (min-width: 1024px) {
	.header-widgets-container {
		display: flex;
	}
}

.header-widgets-container .header-widget {
	display: flex;
	align-items: center;
}

.header-widgets-container .header-widget .widget-title {
	display: none; /* Hide widget titles in header to save horizontal space */
}

/* Make sure footer widgets render nicely */
.site-footer .widget {
	margin-bottom: var(--spacing-lg);
}

.site-footer .widget:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Player Announcement & Premium Community Buttons
   ========================================================================== */

.hd-player-announcement {
	margin-bottom: 24px;
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hd-announcement-top {
	background: rgba(19, 19, 42, 0.4);
	border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 16px 20px;
	box-shadow: var(--shadow-sm);
}

.hd-announcement-top:hover {
	border-color: rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.hd-announcement-content {
	color: var(--text-primary, #f0f0f5);
	font-size: 14px;
	line-height: 1.6;
}

.hd-announcement-content p {
	margin: 0 0 10px 0;
}

.hd-announcement-content p:last-child {
	margin-bottom: 0;
}

.hd-announcement-content a {
	color: var(--crimson, #e63946);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.hd-announcement-content a:hover {
	color: var(--crimson-light, #ff4d5a);
	text-decoration: underline;
}

/* Bottom Announcement & Premium Box */
.hd-announcement-bottom {
	margin-top: 24px;
	margin-bottom: 24px;
}

.hd-premium-announcement-box {
	background: rgba(10, 10, 20, 0.5);
	border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
	border-radius: var(--radius-md, 12px);
	padding: 24px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	position: relative;
}

.hd-premium-announcement-box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--crimson, #e63946), transparent);
	opacity: 0.3;
}

.hd-announcement-title {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--text-primary, #f0f0f5);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Pulsing Red Dot */
.hd-pulse-dot {
	width: 8px;
	height: 8px;
	background-color: var(--crimson, #e63946);
	border-radius: 50%;
	display: inline-block;
	position: relative;
	box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7);
	animation: hd-pulse 2s infinite;
}

@keyframes hd-pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 8px rgba(230, 57, 70, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
	}
}

/* Grid layout for buttons */
.hd-premium-buttons-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 768px) {
	.hd-premium-buttons-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Next-Gen Premium Button Core styling */
.hd-premium-btn {
	display: flex;
	align-items: center;
	text-decoration: none;
	padding: 16px 22px;
	border-radius: var(--radius-md, 12px);
	background: rgba(19, 19, 42, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.05);
	color: var(--text-primary, #f0f0f5);
	position: relative;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hd-premium-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 200%;
	height: 100%;
	background: linear-gradient(
		to right,
		transparent,
		rgba(255, 255, 255, 0.03),
		rgba(255, 255, 255, 0.08),
		rgba(255, 255, 255, 0.03),
		transparent
	);
	transform: skewX(-25deg);
	transition: 0.75s;
	opacity: 0;
}

.hd-premium-btn:hover::before {
	left: 125%;
	opacity: 1;
}

/* Button hover generic motion */
.hd-premium-btn:hover {
	transform: translateY(-3px);
	color: #ffffff;
}

.hd-premium-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	margin-right: 16px;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-secondary, #8888a0);
}

.hd-premium-btn-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	text-align: left;
}

.hd-btn-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-secondary, #8888a0);
	margin-bottom: 2px;
	transition: color 0.3s ease;
}

.hd-btn-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary, #f0f0f5);
	transition: color 0.3s ease;
}

.hd-premium-btn-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted, #5a5a78);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hd-premium-btn:hover .hd-premium-btn-arrow {
	color: #ffffff;
	transform: translateX(4px);
}

/* Telegram Specific Customization */
.hd-btn-telegram:hover {
	border-color: rgba(36, 161, 222, 0.4);
	box-shadow: 0 6px 20px rgba(36, 161, 222, 0.15), 0 0 15px rgba(36, 161, 222, 0.05);
	background: rgba(36, 161, 222, 0.08);
}

.hd-btn-telegram:hover .hd-premium-btn-icon {
	background: #24a1de;
	color: #ffffff;
	box-shadow: 0 0 12px rgba(36, 161, 222, 0.5);
}

.hd-btn-telegram:hover .hd-btn-tag {
	color: rgba(36, 161, 222, 0.95);
}

/* Discord Specific Customization */
.hd-btn-discord:hover {
	border-color: rgba(88, 101, 242, 0.4);
	box-shadow: 0 6px 20px rgba(88, 101, 242, 0.15), 0 0 15px rgba(88, 101, 242, 0.05);
	background: rgba(88, 101, 242, 0.08);
}

.hd-btn-discord:hover .hd-premium-btn-icon {
	background: #5865f2;
	color: #ffffff;
	box-shadow: 0 0 12px rgba(88, 101, 242, 0.5);
}

.hd-btn-discord:hover .hd-btn-tag {
	color: rgba(88, 101, 242, 0.95);
}

/* ==========================================================================
   Mobile Performance & GPU Scrolling Optimizations (Buttery Smooth 60FPS)
   ========================================================================== */

@media (max-width: 768px) {
	/* 
	   1. Disable expensive CSS backdrop-filters on mobile devices.
	   Backdrop-filter forces the GPU to copy, blur, and composite screen layers on 
	   every scroll frame, which chokes mid-level mobile devices and causes UI freezes.
	*/
	* {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	/* 
	   2. Override Glassmorphism global tokens for mobile screens.
	   Ensures that elements using the CSS variables fall back to beautiful, fast-rendering 
	   semi-opaque backgrounds instead of transparent blurred panels.
	*/
	:root {
		--glass-blur: none !important;
		--glass-bg: rgba(19, 19, 42, 0.95);
		--glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
	}

	/* 
	   3. Fallback backgrounds for explicit classes that relied on backdrop-filter.
	   Guarantees maximum readability and elegant aesthetics on mobile devices.
	*/
	.hd-glass,
	.hd-glass-card,
	.hd-glass-subtle,
	.anime-card,
	.anime-card-episode,
	.anime-card-rating,
	.anime-badge,
	.anime-badge-hd,
	.anime-badge-480p,
	.site-header,
	.mobile-menu-overlay,
	.hero-slider-arrow,
	.scroll-nav-btn {
		background-color: rgba(22, 22, 46, 0.96) !important;
		border-color: rgba(255, 255, 255, 0.08) !important;
	}

	/* 
	   4. Optimize heavy box-shadows on mobile.
	   Reduces rendering paints during high-speed vertical scrolling.
	*/
	.anime-card,
	.hd-glass-card {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
	}

	/* 
	   5. Force GPU Hardware Acceleration on the main scroll layout.
	   Ensures composition and scroll animations are handled directly by GPU threads.
	*/
	body,
	.site-content {
		-webkit-overflow-scrolling: touch;
		will-change: transform;
		transform: translateZ(0);
	}

	.mobile-menu-panel {
		-webkit-overflow-scrolling: touch;
		will-change: transform;
	}
}

html, body {
        overflow-x: hidden !important;
        width: 100% !important;                         
}

#page, #wrapper, .site {
        overflow-x: hidden !important;
        width: 100% !important;
}