/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL CSS — Aridong Collegiate Manhwa Society
   Charte Officielle issue du Mockup :
   • Dark Mode : Fond #121212, Cartes #1E1A1C, Primaire Burgundy #560E1B,
                 Secondaire Beige Sand #D0BBA0, Texte Off-White #F5F5F5
   • Light Mode : Fond #FDFBF7, Cartes #FFFFFF, Titres/Boutons Burgundy #560E1B,
                  Secondaire Beige Sand #D0BBA0, Texte Anthracite #1A1A1A
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Cinzel:wght@400;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Oswald:wght@500;700&display=swap');

/* ── LEMON MILK FONT ────────────────────────────────────────────────────── */
@font-face {
    font-family: 'LemonMilk';
    src: url('../assets/fonts/LEMONMILK-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'LemonMilk';
    src: url('../assets/fonts/LEMONMILK-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'LemonMilk';
    src: url('../assets/fonts/LEMONMILK-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ── LOGO ARIDONG ───────────────────────────────────────────────────────── */
.wm-logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.logo-wm2,
.logo-aridong {
    height: 42px;
    width: auto;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 8px rgba(86, 14, 27, 0.4));
}

.wm-logo:hover .logo-wm2,
.wm-logo:hover .logo-aridong {
    transform: scale(1.06) rotate(-2deg);
    filter: drop-shadow(0 4px 14px rgba(208, 187, 160, 0.6));
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM TOKENS (ARIDONG MOCKUP PALETTE)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DARK MODE (Par défaut & Système sombre) ────────────────────────────── */
:root,
html[data-theme="dark"],
html.dark-mode {
    /* Fond & Surfaces */
    --bg-body:          #121212;
    --bg-main:          #121212;
    --bg-main-rgb:      18, 18, 18;
    --bg-subtle:        #161315;
    --bg-card:          #1E1A1C;
    --bg-card-hover:    #262023;
    --bg-card-solid:    #1E1A1C;
    --bg-input:         #161315;
    --bg-nav:           rgba(18, 18, 18, 0.92);
    --navbar-bg:        rgba(18, 18, 18, 0.92);
    --bg-drawer:        #121212;
    --bg-overlay:       rgba(0, 0, 0, 0.7);
    --bg-dropdown:      #1E1A1C;
    --bg-toast:         #1E1A1C;
    --bg-scrollbar-track: #121212;

    /* Bordures & Ombres */
    --border-card:      rgba(208, 187, 160, 0.16);
    --border-card-hover: rgba(208, 187, 160, 0.4);
    --border-sand:      rgba(208, 187, 160, 0.2);
    --border-sand-strong: rgba(208, 187, 160, 0.5);
    --shadow-card:      0 10px 30px -5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(208, 187, 160, 0.12);
    --shadow-hover:     0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(86, 14, 27, 0.35);

    /* Marque Primaire : Deep Burgundy */
    --primary:          #560E1B;
    --primary-hover:    #801428;
    --primary-glow:     rgba(86, 14, 27, 0.45);
    --primary-text:     #FFFFFF;

    /* Marque Secondaire : Beige Sand */
    --secondary:        #D0BBA0;
    --secondary-hover:  #E4D5C3;
    --secondary-subtle: rgba(208, 187, 160, 0.12);
    --secondary-text:   #000000;
    --accent-sand:      #D0BBA0;
    --accent-sand-hover:#E4D5C3;
    --accent-sand-dark: #A79077;
    --accent-gold:      #D0BBA0;
    --accent-champagne: #D0BBA0;
    --accent-bordeaux:  #560E1B;

    /* Textes */
    --text-main:        #F5F5F5;
    --text-primary:     #F5F5F5;
    --text-muted:       #9E968F;
    --text-sub:         #D0BBA0;
    --text-faint:       #635C57;
    --text-gold:        #D0BBA0;
    --text-dark:        #000000;

    /* Badges & Toggle */
    --badge-bg:         rgba(86, 14, 27, 0.45);
    --toggle-bg:        rgba(30, 26, 28, 0.9);
    --toggle-border:    rgba(208, 187, 160, 0.35);
    --toggle-color:     #D0BBA0;

    /* Aliases pour compatibilité totale des pages */
    --liberty:          #121212;
    --liberty-card:     #1E1A1C;
    --bg-onyx:          #121212;
    --bg-forest-dark:   #121212;
    --bg-burgundy:      #121212;
    --bg-burgundy-card: #1E1A1C;
    --pigment:          #560E1B;
    --lavender:         #D0BBA0;
    --lavender-light:   #E4D5C3;
    --cool-grey:        #9E968F;
}

/* ── LIGHT MODE (Clair, Os & Crème Luxueux) ────────────────────────────── */
html.light-mode,
html[data-theme="light"] {
    /* Fond & Surfaces — Soft bone/cream color to reduce eye strain */
    --bg-body:          #F7F5F0;
    --bg-main:          #F7F5F0;
    --bg-main-rgb:      247, 245, 240;
    --bg-subtle:        #ECE8E0;
    --bg-card:          #FFFFFF;
    --bg-card-hover:    #FAF8F5;
    --bg-card-solid:    #FFFFFF;
    --bg-input:         #ECE8E0;
    --bg-nav:           rgba(247, 245, 240, 0.94);
    --navbar-bg:        rgba(247, 245, 240, 0.94);
    --bg-drawer:        #F7F5F0;
    --bg-overlay:       rgba(24, 21, 20, 0.45);
    --bg-dropdown:      #FFFFFF;
    --bg-toast:         #181514;
    --bg-scrollbar-track: #F7F5F0;

    /* Bordures & Ombres — Subtiles, douces et épurées */
    --border-card:      rgba(86, 14, 27, 0.08);
    --border-card-hover: rgba(86, 14, 27, 0.28);
    --border-sand:      rgba(86, 14, 27, 0.12);
    --border-sand-strong: rgba(86, 14, 27, 0.35);
    --shadow-card:      0 10px 30px -4px rgba(86, 14, 27, 0.05), 0 4px 12px -2px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(86, 14, 27, 0.07);
    --shadow-hover:     0 20px 42px -6px rgba(86, 14, 27, 0.12), 0 6px 18px -3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(86, 14, 27, 0.18);

    /* Marque Primaire : Deep Burgundy Riche et Cohérent */
    --primary:          #560E1B;
    --primary-hover:    #731324;
    --primary-glow:     rgba(86, 14, 27, 0.32);
    --primary-text:     #FFFFFF;

    /* Marque Secondaire & Accents */
    --secondary:        #560E1B;
    --secondary-hover:  #731324;
    --secondary-subtle: rgba(86, 14, 27, 0.07);
    --secondary-text:   #FFFFFF;
    --accent-sand:      #D0BBA0;
    --accent-sand-hover:#C2AB8F;
    --accent-sand-dark: #A79077;
    --accent-gold:      #560E1B;
    --accent-champagne: #560E1B;
    --accent-bordeaux:  #560E1B;

    /* Textes — Typographie ciselée, nette et sans éblouissement */
    --text-main:        #181514;
    --text-primary:     #181514;
    --text-secondary:   #3E3835;
    --text-muted:       #5E5650;
    --text-sub:         #560E1B;
    --text-faint:       #8E857D;
    --text-gold:        #560E1B;
    --text-dark:        #181514;

    /* Badges & Toggle */
    --badge-bg:         rgba(86, 14, 27, 0.08);
    --toggle-bg:        rgba(255, 255, 255, 0.95);
    --toggle-border:    rgba(86, 14, 27, 0.25);
    --toggle-color:     #560E1B;

    /* Aliases pour compatibilité totale des pages */
    --liberty:          #F7F5F0;
    --liberty-card:     #FFFFFF;
    --bg-onyx:          #F7F5F0;
    --bg-forest-dark:   #F7F5F0;
    --bg-burgundy:      #F7F5F0;
    --bg-burgundy-card: #FFFFFF;
    --pigment:          #560E1B;
    --lavender:         #560E1B;
    --lavender-light:   #731324;
    --cool-grey:        #5E5650;
}

/* ── RESET DE BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Transition douce sur changement de thème */
html {
    transition: background-color 0.35s ease, color 0.35s ease;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-body, #121212);
    color: var(--text-primary, #F5F5F5);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Mode sombre ambiance subtile */
body {
    background-image: radial-gradient(ellipse 80% 60% at 50% 15%, rgba(208, 187, 160, 0.03) 0%, transparent 70%);
}

/* Mode clair — ambiance douce et chaude */
html.light-mode body,
html[data-theme="light"] body {
    background: var(--bg-body, #F7F5F0);
    color: var(--text-primary, #181514);
    background-image: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(86, 14, 27, 0.035) 0%, transparent 70%);
}

::selection {
    background: #D0BBA0;
    color: #000000;
}

/* ── SCROLLBAR ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 6px; height: 6px; }
::-webkit-scrollbar-track      { background: var(--bg-scrollbar-track, #121212); }
::-webkit-scrollbar-thumb      { background: rgba(208, 187, 160, 0.4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: #D0BBA0; }

/* ── GLASS NAV — Fenêtre Aridong ────────────────────────────────────── */
.glass {
    background: var(--bg-nav, rgba(18, 18, 18, 0.92));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-card, rgba(208, 187, 160, 0.16));
    transition: background 0.35s ease, border-color 0.35s ease;
}

/* ── MOBILE DRAWER ─────────────────────────────────────────────────────── */
#mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
}
#mobile-drawer.open { pointer-events: all; }


#drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.35s ease;
}
#mobile-drawer.open #drawer-overlay { background: rgba(0, 0, 0, 0.7); }

#drawer-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-drawer, #121212);
    border-top: 1px solid var(--border-sand, rgba(208, 187, 160, 0.3));
    border-radius: 12px 12px 0 0;
    padding: 20px 24px 40px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), background 0.35s ease;
    max-height: 85vh;
    overflow-y: auto;
}
#mobile-drawer.open #drawer-panel { transform: translateY(0); }

/* ── DRAWER LINKS ──────────────────────────────────────────────────────── */
.drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    color: #D0BBA0;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    text-decoration: none;
    border: 1px solid transparent;
}
.drawer-link:hover, .drawer-link.active {
    background: rgba(208, 187, 160, 0.12);
    color: #FFFFFF;
    border-color: rgba(208, 187, 160, 0.3);
}
.drawer-link i { width: 22px; text-align: center; color: #D0BBA0; }

/* ── TYPOGRAPHIE — Titres serif prestige ───────────────────────────────── */
h1, h2, h3,
.font-display,
.serif-title {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    letter-spacing: -0.01em;
    color: var(--text-primary, #FFFFFF);
}

.font-cinzel {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARTES ÉPURÉES MODERNES — Style Aridong (Sans cadre de tableau)
   ══════════════════════════════════════════════════════════════════════════ */

/* Conteneur de carte — .wm-card, .webtoon-card, .wt-card */
.wm-card,
.webtoon-card,
.wt-card {
    position: relative;
    border-radius: 14px;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--bg-card, #1E1A1C);
    border: 1px solid var(--border-card, rgba(208, 187, 160, 0.16));
    box-shadow: var(--shadow-card, 0 10px 30px -5px rgba(0, 0, 0, 0.6));
    cursor: pointer;
    transition:
        transform    0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow   0.35s ease,
        border-color 0.35s ease;
}

/* Hover — Élévation fluide et lueur sobre */
.wm-card:hover,
.webtoon-card:hover,
.wt-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover, 0 20px 40px -10px rgba(0, 0, 0, 0.8));
    border-color: var(--border-card-hover, rgba(208, 187, 160, 0.4));
}

/* Toile / Illustration du Webtoon */
.wm-card img,
.webtoon-card img,
.wt-card img {
    transition: transform 0.5s ease, filter 0.4s ease;
    filter: brightness(0.95);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wm-card:hover img,
.webtoon-card:hover img,
.wt-card:hover img {
    filter: brightness(1.03);
    transform: scale(1.04);
}

/* Préservation et positionnement des badges sur la carte */
.wm-card [class*="badge"],
.wm-card .absolute,
.webtoon-card [class*="badge"],
.webtoon-card .absolute {
    z-index: 5;
}

/* ── BOUTONS BURGUNDY (Action Principale Aridong — #560E1B) ─────────────── */
.btn-primary,
.btn-burgundy,
button.primary {
    background: var(--primary, #560E1B);
    color: #FFFFFF !important;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px var(--primary-glow, rgba(86, 14, 27, 0.4));
}
.btn-primary:hover,
.btn-burgundy:hover,
button.primary:hover {
    background: var(--primary-hover, #801428);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px var(--primary-glow, rgba(86, 14, 27, 0.6));
    color: #FFFFFF !important;
}
.btn-primary:active,
.btn-burgundy:active,
button.primary:active {
    transform: translateY(0);
}

/* ── BOUTONS SECONDAIRES (Beige Sand fond -> Texte Noir #000000) ──────── */
.btn-gold,
.btn-secondary {
    background: #D0BBA0;
    color: #000000 !important;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-gold:hover,
.btn-secondary:hover {
    background: #E4D5C3;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(208, 187, 160, 0.35);
}

.btn-outline-gold {
    background: transparent;
    color: #D0BBA0;
    font-weight: 600;
    border: 1px solid rgba(208, 187, 160, 0.5);
    border-radius: 8px;
    padding: 10px 24px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-outline-gold:hover {
    background: rgba(208, 187, 160, 0.15);
    border-color: #D0BBA0;
    color: #FFFFFF;
}

/* ── ICÔNE CLÉ (remplace le cœur favoris) ──────────────────────────────── */
.icon-favorite::before {
    content: '\f084'; /* fa-key */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}
.icon-favorite.active {
    color: #D0BBA0 !important;
    filter: drop-shadow(0 0 6px rgba(208, 187, 160, 0.6));
}

/* ── ICÔNE BOUGIE (remplace les étoiles de notation) ───────────────────── */
.rating-candle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #D0BBA0;
}
.rating-candle .candle-icon {
    font-size: 0.8em;
    line-height: 1;
    opacity: 0.4;
}
.rating-candle .candle-icon.lit {
    opacity: 1;
    color: #D0BBA0;
    filter: drop-shadow(0 0 4px rgba(208, 187, 160, 0.6));
}

/* ── ANIMATIONS COMMUNES ───────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes candleFlicker {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(208, 187, 160, 0.5)); }
    50%       { opacity: 0.85; filter: drop-shadow(0 0 8px rgba(208, 187, 160, 0.8)); }
}

.animate-fade-in    { animation: fadeIn 0.4s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.4s ease-out forwards; }
.animate-candle     { animation: candleFlicker 2s ease-in-out infinite; }

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

/* ── SKELETON SHIMMER ──────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(86, 14, 27, 0.8) 25%,
        rgba(208, 187, 160, 0.15) 50%,
        rgba(86, 14, 27, 0.8) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s infinite;
    border-radius: 8px;
}
@keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce),
       (prefers-reduced-data: reduce) {
    .skeleton {
        animation: none;
        background: rgba(86, 14, 27, 0.7);
    }
}

/* ── TOAST ─────────────────────────────────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--bg-toast, #560E1B);
    border: 1px solid var(--border-sand, rgba(208, 187, 160, 0.4));
    color: var(--text-primary, #FFFFFF);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s cubic-bezier(.32, .72, 0, 1), opacity 0.3s;
    opacity: 0;
    z-index: 9999;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
#toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ── THEME TOGGLE BUTTON ────────────────────────────────────────────────── */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--toggle-bg, rgba(86, 14, 27, 0.85));
    border: 1px solid var(--toggle-border, rgba(208, 187, 160, 0.4));
    color: var(--toggle-color, #D0BBA0);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
                transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.theme-toggle-btn:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 4px 16px rgba(208, 187, 160, 0.3);
    border-color: var(--toggle-color, #D0BBA0);
}
.theme-toggle-btn:active {
    transform: scale(0.95);
}
/* Anneau animé au survol */
.theme-toggle-btn::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(208,187,160,0.6), rgba(86,14,27,0.3)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.theme-toggle-btn:hover::after {
    opacity: 1;
}

/* ── SCROLL TO TOP ─────────────────────────────────────────────────────── */
#scroll-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(86, 14, 27, 0.92);
    border: 1px solid rgba(208, 187, 160, 0.4);
    color: #D0BBA0;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s, transform 0.25s, background 0.2s, border-color 0.2s;
    z-index: 8000;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
#scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
}
#scroll-top-btn:hover {
    background: rgba(208, 187, 160, 0.18);
    border-color: #D0BBA0;
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(208, 187, 160, 0.25);
}

/* ── DIVIDER ORNEMENTAL ────────────────────────────────────────────────── */
.divider-gold {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(208, 187, 160, 0.2) 20%,
        rgba(208, 187, 160, 0.6) 50%,
        rgba(208, 187, 160, 0.2) 80%,
        transparent 100%
    );
    margin: 2rem 0;
}

/* ── BADGE PRESTIGE ────────────────────────────────────────────────────── */
.badge-gold {
    background: rgba(208, 187, 160, 0.15);
    border: 1px solid rgba(208, 187, 160, 0.4);
    color: #D0BBA0;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── SECTION HEADERS ───────────────────────────────────────────────────── */
.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-title::before {
    content: '';
    display: block;
    width: 3px;
    height: 1.2em;
    background: #D0BBA0;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Overrides globaux pour éléments communs
   ═══════════════════════════════════════════════════════════════════════════ */

/* Navigation & texte de base */
html.light-mode .section-title            { color: var(--text-primary); }
html.light-mode h1, html.light-mode h2,
html.light-mode h3, html.light-mode .font-display,
html.light-mode .serif-title              { color: var(--text-primary); }

/* Drawer links en mode clair */
html.light-mode .drawer-link              { color: var(--text-secondary); }
html.light-mode .drawer-link:hover,
html.light-mode .drawer-link.active       {
    background: rgba(86, 14, 27, 0.08);
    color: #560E1B;
    border-color: rgba(86, 14, 27, 0.2);
}
html.light-mode .drawer-link i           { color: #560E1B; }

/* Toast */
html.light-mode #toast                   {
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* Scroll to top */
html.light-mode #scroll-top-btn {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(86, 14, 27, 0.25);
    color: #560E1B;
}
html.light-mode #scroll-top-btn:hover {
    background: rgba(86, 14, 27, 0.08);
    border-color: #560E1B;
    color: #560E1B;
}

/* Cards — Style épuré, ombres douces et subtiles */
html.light-mode .wm-card,
html.light-mode .webtoon-card,
html.light-mode .wt-card {
    background: #FFFFFF;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 10px 25px -4px rgba(86, 14, 27, 0.05), 0 4px 10px -2px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
html.light-mode .wm-card:hover,
html.light-mode .webtoon-card:hover,
html.light-mode .wt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 35px -6px rgba(86, 14, 27, 0.12), 0 6px 14px -3px rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(86, 14, 27, 0.22) !important;
}

/* Skeleton shimmer clair */
html.light-mode .skeleton {
    background: linear-gradient(
        90deg,
        rgba(238, 234, 227, 0.8) 25%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(238, 234, 227, 0.8) 75%
    );
    background-size: 200% 100%;
}

/* Badge prestige clair */
html.light-mode .badge-gold {
    background: rgba(86, 14, 27, 0.07);
    border-color: rgba(86, 14, 27, 0.25);
    color: #560E1B;
}

/* Divider */
html.light-mode .divider-gold {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(86, 14, 27, 0.08) 20%,
        rgba(86, 14, 27, 0.28) 50%,
        rgba(86, 14, 27, 0.08) 80%,
        transparent 100%
    );
}

/* Bouton outline adaptatif */
html.light-mode .btn-outline-gold {
    color: #560E1B;
    border-color: rgba(86, 14, 27, 0.35);
}
html.light-mode .btn-outline-gold:hover {
    background: rgba(86, 14, 27, 0.08);
    border-color: #560E1B;
    color: #560E1B;
}

/* Textes Tailwind statiques les plus courants */
html.light-mode .text-white,
html[data-theme="light"] .text-white              { color: var(--text-primary, #181514) !important; }
html.light-mode .text-cool-grey,
html[data-theme="light"] .text-cool-grey         { color: var(--text-muted, #5E5650) !important; }

/* Tailwind overrides — Dark & Light */
.bg-liberty          { background-color: var(--bg-body) !important; }
.bg-liberty-card     { background-color: var(--bg-card) !important; }
.bg-forest-dark      { background-color: var(--bg-body) !important; }
.bg-burgundy-card    { background-color: var(--bg-card) !important; }

html.light-mode .bg-liberty,
html[data-theme="light"] .bg-liberty { background-color: var(--bg-body, #F7F5F0) !important; }

html.light-mode .bg-liberty-card,
html[data-theme="light"] .bg-liberty-card {
    background-color: var(--bg-card, #FFFFFF) !important;
    border-color: var(--border-card) !important;
}

html.light-mode .glass,
html[data-theme="light"] .glass {
    background: var(--bg-nav, rgba(247, 245, 240, 0.94)) !important;
    border-bottom: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(86, 14, 27, 0.03);
}

/* Section titles contrast fix in light mode */
html.light-mode .section-title,
html[data-theme="light"] .section-title { color: var(--text-primary, #181514) !important; }
html.light-mode [class*=text-white],
html[data-theme="light"] [class*=text-white] { color: var(--text-primary, #181514) !important; }

/* ── LIGHT MODE : textes beige/sand → anthracite / burgundy ──────────────── */
html.light-mode .text-sand,
html[data-theme="light"] .text-sand           { color: var(--text-primary, #181514) !important; }

html.light-mode .text-gold,
html[data-theme="light"] .text-gold           { color: var(--primary, #560E1B) !important; }

html.light-mode .text-champagne,
html[data-theme="light"] .text-champagne      { color: var(--text-primary, #181514) !important; }

html.light-mode .text-lavender,
html[data-theme="light"] .text-lavender       { color: var(--text-primary, #181514) !important; }

html.light-mode .text-lavender-light,
html[data-theme="light"] .text-lavender-light { color: var(--text-muted, #5E5650) !important; }

html.light-mode .text-bordeaux,
html[data-theme="light"] .text-bordeaux       { color: var(--primary, #560E1B) !important; }

html.light-mode .text-cool-grey,
html[data-theme="light"] .text-cool-grey      { color: var(--text-muted, #5E5650) !important; }

/* Inline color:#D0BBA0 — surcharge globale en mode jour */
html.light-mode [style*="color:#D0BBA0"],
html[data-theme="light"] [style*="color:#D0BBA0"],
html.light-mode [style*="color: #D0BBA0"],
html[data-theme="light"] [style*="color: #D0BBA0"] {
    color: var(--text-primary, #181514) !important;
}

/* Barre décorative verticale : beige → burgundy en mode jour */
html.light-mode span[style*="background:#D0BBA0"],
html[data-theme="light"] span[style*="background:#D0BBA0"] {
    background: var(--primary, #560E1B) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BANNER & LUXURY SECTION TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlays Artistiques Fluides du Hero ──────────────────────────────── */
.hero-overlay-horizontal {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        90deg,
        rgba(18, 18, 18, 1) 0%,
        rgba(18, 18, 18, 0.98) 22%,
        rgba(18, 18, 18, 0.88) 38%,
        rgba(18, 18, 18, 0.58) 54%,
        rgba(18, 18, 18, 0.22) 72%,
        rgba(18, 18, 18, 0.05) 86%,
        transparent 100%
    );
    transition: background 0.4s ease;
}

.hero-overlay-bottom {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        0deg,
        rgba(18, 18, 18, 1) 0%,
        rgba(18, 18, 18, 0.9) 14%,
        rgba(18, 18, 18, 0.5) 30%,
        rgba(18, 18, 18, 0.12) 48%,
        transparent 65%
    );
    transition: background 0.4s ease;
}

.hero-overlay-top {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(18, 18, 18, 0.75) 0%,
        rgba(18, 18, 18, 0.25) 15%,
        transparent 32%
    );
    transition: background 0.4s ease;
}

/* Light Mode — Dégradés artistiques doux et soyeux sur fond crème/os */
html.light-mode .hero-overlay-horizontal,
html[data-theme="light"] .hero-overlay-horizontal {
    background: linear-gradient(
        90deg,
        #F7F5F0 0%,
        rgba(247, 245, 240, 0.98) 22%,
        rgba(247, 245, 240, 0.92) 36%,
        rgba(247, 245, 240, 0.7) 52%,
        rgba(247, 245, 240, 0.35) 68%,
        rgba(247, 245, 240, 0.08) 84%,
        transparent 100%
    ) !important;
}

html.light-mode .hero-overlay-bottom,
html[data-theme="light"] .hero-overlay-bottom {
    background: linear-gradient(
        0deg,
        #F7F5F0 0%,
        rgba(247, 245, 240, 0.94) 14%,
        rgba(247, 245, 240, 0.55) 32%,
        rgba(247, 245, 240, 0.12) 50%,
        transparent 68%
    ) !important;
}

html.light-mode .hero-overlay-top,
html[data-theme="light"] .hero-overlay-top {
    background: linear-gradient(
        180deg,
        rgba(247, 245, 240, 0.8) 0%,
        rgba(247, 245, 240, 0.3) 14%,
        transparent 30%
    ) !important;
}

/* ── Hero Description Box (Boîte de texte semi-translucide ultra-lisible) ── */
#hero-desc-container,
.hero-desc-box {
    position: relative;
    background: rgba(28, 24, 26, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-left: 3.5px solid #D0BBA0;
    border-top: 1px solid rgba(208, 187, 160, 0.12);
    border-right: 1px solid rgba(208, 187, 160, 0.12);
    border-bottom: 1px solid rgba(208, 187, 160, 0.12);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

html.light-mode #hero-desc-container,
html[data-theme="light"] #hero-desc-container,
html.light-mode .hero-desc-box,
html[data-theme="light"] .hero-desc-box {
    background: rgba(238, 235, 229, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-left: 3.5px solid #560E1B !important;
    border-top: 1px solid rgba(86, 14, 27, 0.1) !important;
    border-right: 1px solid rgba(86, 14, 27, 0.1) !important;
    border-bottom: 1px solid rgba(86, 14, 27, 0.1) !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 16px 22px !important;
    box-shadow: 0 6px 24px -4px rgba(86, 14, 27, 0.06), 0 2px 8px -2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

#hero-desc-container p,
.hero-desc-box p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
}

html.light-mode #hero-desc-container p,
html[data-theme="light"] #hero-desc-container p {
    color: #181514 !important;
    font-weight: 500;
}

/* ── Boutons Hero d'action ─────────────────────────────────────────────── */
.hero-read-btn {
    background: linear-gradient(135deg, #5B0E1D 0%, #460A15 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.45);
    border-radius: 10px;
    padding: 14px 34px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(86, 14, 27, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-read-btn:hover {
    background: linear-gradient(135deg, #741325 0%, #5B0E1D 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(86, 14, 27, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #FFFFFF !important;
}
.hero-read-btn:active {
    transform: translateY(0);
}

.hero-add-btn {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(208, 187, 160, 0.08);
    border: 1px solid rgba(208, 187, 160, 0.35);
    color: #D0BBA0;
    backdrop-filter: blur(12px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-add-btn:hover {
    background: rgba(208, 187, 160, 0.18);
    border-color: #D0BBA0;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(208, 187, 160, 0.3);
}

html.light-mode .hero-add-btn,
html[data-theme="light"] .hero-add-btn {
    background: rgba(247, 245, 240, 0.9) !important;
    border: 1px solid rgba(86, 14, 27, 0.22) !important;
    color: #560E1B !important;
    box-shadow: 0 2px 10px rgba(86, 14, 27, 0.06) !important;
}
html.light-mode .hero-add-btn:hover,
html[data-theme="light"] .hero-add-btn:hover {
    background: rgba(86, 14, 27, 0.08) !important;
    border-color: #560E1B !important;
    color: #560E1B !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(86, 14, 27, 0.18) !important;
}

/* ── Menu & Logo Accents en Burgundy ───────────────────────────────────── */
.nav-item-link {
    color: var(--text-muted, #9E968F);
    font-weight: 500;
    transition: color 0.2s ease;
    text-decoration: none;
}
.nav-item-link:hover {
    color: var(--primary, #560E1B) !important;
}
html:not(.light-mode) .nav-item-link:hover {
    color: #FFFFFF !important;
}

.nav-active-link {
    color: #FFFFFF;
    border-bottom: 2px solid #D0BBA0;
    padding-bottom: 4px;
    font-weight: 700;
    text-decoration: none;
}
html.light-mode .nav-active-link,
html[data-theme="light"] .nav-active-link {
    color: #560E1B !important;
    border-bottom-color: #560E1B !important;
}

.nav-ui-badge {
    background: #D0BBA0;
    color: #000000;
    box-shadow: 0 0 12px rgba(208, 187, 160, 0.4);
    text-decoration: none;
}
html.light-mode .nav-ui-badge,
html[data-theme="light"] .nav-ui-badge {
    background: #560E1B !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 12px rgba(86, 14, 27, 0.35) !important;
}

.nav-dot-actus {
    background-color: #D0BBA0;
}
html.light-mode .nav-dot-actus,
html[data-theme="light"] .nav-dot-actus {
    background-color: #560E1B !important;
}

.nav-more-dropdown {
    background: var(--bg-card, #1E1A1C);
    border: 1px solid var(--border-card, rgba(208, 187, 160, 0.25));
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
}
html.light-mode .nav-more-dropdown,
html[data-theme="light"] .nav-more-dropdown {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.12) !important;
    box-shadow: 0 16px 36px -6px rgba(86, 14, 27, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
html.light-mode .nav-more-dropdown a {
    color: #3E3835 !important;
}
html.light-mode .nav-more-dropdown a:hover {
    background: rgba(86, 14, 27, 0.06) !important;
    color: #560E1B !important;
}
html.light-mode .nav-more-dropdown i {
    color: #560E1B !important;
}

/* Logo hover et ombre */
html.light-mode .logo-aridong,
html.light-mode .logo-wm2 {
    filter: drop-shadow(0 2px 10px rgba(86, 14, 27, 0.35)) !important;
}
html.light-mode .wm-logo:hover .logo-aridong,
html.light-mode .wm-logo:hover .logo-wm2 {
    filter: drop-shadow(0 4px 16px rgba(86, 14, 27, 0.55)) !important;
}
html.light-mode .wm-logo span {
    color: #181514 !important;
}

/* ── Section Transitions & Modern Luxury Containers ───────────────────── */
.luxury-section-container {
    background: var(--bg-card, #1E1A1C);
    border: 1px solid var(--border-card, rgba(208, 187, 160, 0.16));
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: var(--shadow-card);
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

html.light-mode .luxury-section-container,
html[data-theme="light"] .luxury-section-container {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 12px 36px -6px rgba(86, 14, 27, 0.05), 0 2px 10px -2px rgba(0, 0, 0, 0.03) !important;
}

/* Carousel scroll buttons */
.carousel-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(208, 187, 160, 0.3);
    color: #D0BBA0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.carousel-nav-btn:hover {
    background: rgba(208, 187, 160, 0.18);
    color: #FFFFFF;
    transform: translateY(-1px);
}
html.light-mode .carousel-nav-btn,
html[data-theme="light"] .carousel-nav-btn {
    background: #F7F5F0 !important;
    border: 1px solid rgba(86, 14, 27, 0.16) !important;
    color: #560E1B !important;
    box-shadow: 0 1px 4px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .carousel-nav-btn:hover,
html[data-theme="light"] .carousel-nav-btn:hover {
    background: #560E1B !important;
    border-color: #560E1B !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(86, 14, 27, 0.28) !important;
    transform: translateY(-1px);
}

/* Barre d'accentuation section */
.section-accent-bar {
    width: 3.5px;
    height: 1.25em;
    background: #D0BBA0;
    border-radius: 2px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}
html.light-mode .section-accent-bar,
html[data-theme="light"] .section-accent-bar {
    background: #560E1B !important;
}

/* Text Shimmer en mode clair : dégradé burgundy riche */
html.light-mode .text-shimmer,
html[data-theme="light"] .text-shimmer {
    background: linear-gradient(135deg, #560E1B 0%, #83152A 50%, #560E1B 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ── Barre de recherche ─────────────────────────────────────────────────── */
.search-bar-input {
    background: var(--bg-input, #161315);
    border: 1px solid var(--border-card, rgba(208, 187, 160, 0.25));
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    color: var(--text-main, #F5F5F5);
    transition: all 0.2s ease;
}
.search-bar-input:focus {
    border-color: var(--primary, #560E1B) !important;
    box-shadow: 0 0 0 3px var(--primary-glow, rgba(86, 14, 27, 0.18)) !important;
}
html.light-mode .search-bar-input,
html[data-theme="light"] .search-bar-input {
    background: var(--bg-input, #ECE8E0) !important;
    border-color: rgba(86, 14, 27, 0.15) !important;
    color: var(--text-main, #181514) !important;
}
html.light-mode .search-bar-input::placeholder,
html[data-theme="light"] .search-bar-input::placeholder {
    color: #8E857D !important;
}

/* En-têtes de sections avec icônes en burgundy */
html.light-mode h2 i[style*="color:#D0BBA0"],
html[data-theme="light"] h2 i[style*="color:#D0BBA0"],
html.light-mode h2 i[style*="color: #D0BBA0"],
html[data-theme="light"] h2 i[style*="color: #D0BBA0"] {
    color: var(--primary, #560E1B) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — COMPREHENSIVE SUBPAGE DESIGN SYSTEM OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Typographie & Textes Généraux en Mode Clair ───────────────────────── */
html.light-mode h1,
html[data-theme="light"] h1,
html.light-mode h2,
html[data-theme="light"] h2,
html.light-mode h3,
html[data-theme="light"] h3,
html.light-mode h4,
html[data-theme="light"] h4 {
    color: #181514 !important;
}

/* Convertir les classes Tailwind text-white en sombre dans le contenu clair */
html.light-mode .text-white:not(.btn-primary):not(.btn-burgundy):not(button.primary):not([class*="badge"]):not(.detail-status-badge):not(.status-badge):not(.status-RELEASING):not(.status-FINISHED):not(.status-CANCELLED):not(.status-HIATUS):not(.active-diff):not(.genre-chip.active):not(.sort-btn.active):not(.tab-btn.active):not(.view-btn.active):not(.top-tab.active):not(.filter-pill.active),
html[data-theme="light"] .text-white:not(.btn-primary):not(.btn-burgundy):not(button.primary):not([class*="badge"]):not(.detail-status-badge):not(.status-badge):not(.status-RELEASING):not(.status-FINISHED):not(.status-CANCELLED):not(.status-HIATUS):not(.active-diff):not(.genre-chip.active):not(.sort-btn.active):not(.tab-btn.active):not(.view-btn.active):not(.top-tab.active):not(.filter-pill.active) {
    color: #181514 !important;
}

/* Remplacer le text-sand fade par un deep burgundy riche ou un anthracite doux */
html.light-mode .text-sand,
html[data-theme="light"] .text-sand,
html.light-mode [class*="text-sand"]:not(.text-sand\/80):not(.text-sand\/60):not(.text-sand\/50) {
    color: #560E1B !important;
}
html.light-mode .text-sand\/80,
html[data-theme="light"] .text-sand\/80,
html.light-mode .text-sand\/60,
html[data-theme="light"] .text-sand\/60 {
    color: #5E5650 !important;
}

html.light-mode .text-cool-grey,
html[data-theme="light"] .text-cool-grey,
html.light-mode .text-gray-400,
html[data-theme="light"] .text-gray-400,
html.light-mode .text-gray-500,
html[data-theme="light"] .text-gray-500,
html.light-mode .text-gray-600,
html[data-theme="light"] .text-gray-600 {
    color: #5E5650 !important;
}

/* ── 1. BIBLIOTHÈQUE / SEARCH (search.html) ────────────────────────────── */
html.light-mode .search-hero,
html[data-theme="light"] .search-hero {
    background: #F7F5F0 !important;
    border-bottom: 1px solid rgba(86, 14, 27, 0.08) !important;
}
html.light-mode .search-hero::before,
html[data-theme="light"] .search-hero::before {
    background-image: radial-gradient(rgba(86, 14, 27, 0.06) 1px, transparent 1px) !important;
}
html.light-mode .search-hero::after,
html[data-theme="light"] .search-hero::after {
    background: linear-gradient(to top, #F7F5F0, transparent) !important;
}

html.light-mode .main-search-input,
html[data-theme="light"] .main-search-input {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(86, 14, 27, 0.22) !important;
    color: #181514 !important;
    box-shadow: 0 8px 30px -4px rgba(86, 14, 27, 0.07), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
html.light-mode .main-search-input::placeholder,
html[data-theme="light"] .main-search-input::placeholder {
    color: #8E857D !important;
}
html.light-mode .main-search-input:focus,
html[data-theme="light"] .main-search-input:focus {
    background: #FFFFFF !important;
    border-color: #560E1B !important;
    box-shadow: 0 0 0 3.5px rgba(86, 14, 27, 0.14), 0 12px 36px rgba(86, 14, 27, 0.1) !important;
}
html.light-mode .search-icon,
html[data-theme="light"] .search-icon {
    color: #560E1B !important;
}
html.light-mode .search-clear,
html[data-theme="light"] .search-clear {
    background: rgba(86, 14, 27, 0.08) !important;
    border: 1px solid rgba(86, 14, 27, 0.18) !important;
    color: #560E1B !important;
}
html.light-mode .search-clear:hover,
html[data-theme="light"] .search-clear:hover {
    background: rgba(86, 14, 27, 0.16) !important;
}

/* Suggestion chips sous la recherche */
html.light-mode .suggestion-chip,
html[data-theme="light"] .suggestion-chip {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.12) !important;
    color: #181514 !important;
    box-shadow: 0 2px 8px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .suggestion-chip:hover,
html[data-theme="light"] .suggestion-chip:hover {
    background: rgba(86, 14, 27, 0.06) !important;
    border-color: #560E1B !important;
    color: #560E1B !important;
}

/* Filter bar & Selects */
html.light-mode .filter-bar,
html[data-theme="light"] .filter-bar {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 10px 30px -4px rgba(86, 14, 27, 0.05) !important;
}
html.light-mode .filter-select,
html[data-theme="light"] .filter-select {
    background-color: #F7F5F0 !important;
    color: #181514 !important;
    border: 1px solid rgba(86, 14, 27, 0.18) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23560E1B'/%3E%3C/svg%3E") !important;
}
html.light-mode .filter-select option,
html[data-theme="light"] .filter-select option {
    background: #FFFFFF !important;
    color: #181514 !important;
}
html.light-mode .filter-select:focus,
html[data-theme="light"] .filter-select:focus,
html.light-mode .filter-select:hover,
html[data-theme="light"] .filter-select:hover {
    border-color: #560E1B !important;
    box-shadow: 0 0 0 2px rgba(86, 14, 27, 0.12) !important;
}

/* Genre chips & Sort buttons */
html.light-mode .genre-chip,
html[data-theme="light"] .genre-chip,
html.light-mode .sort-btn,
html[data-theme="light"] .sort-btn {
    background: #F7F5F0 !important;
    border: 1px solid rgba(86, 14, 27, 0.12) !important;
    color: #5E5650 !important;
}
html.light-mode .genre-chip:hover,
html[data-theme="light"] .genre-chip:hover,
html.light-mode .sort-btn:hover,
html[data-theme="light"] .sort-btn:hover {
    background: #FFFFFF !important;
    border-color: #560E1B !important;
    color: #560E1B !important;
    transform: translateY(-1px);
}
html.light-mode .genre-chip.active,
html[data-theme="light"] .genre-chip.active,
html.light-mode .sort-btn.active,
html[data-theme="light"] .sort-btn.active {
    background: #560E1B !important;
    border-color: #560E1B !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(86, 14, 27, 0.35) !important;
}

/* Result cards (Bibliothèque) */
html.light-mode .result-card,
html[data-theme="light"] .result-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}
html.light-mode .result-card:hover,
html[data-theme="light"] .result-card:hover {
    border-color: rgba(86, 14, 27, 0.28) !important;
    box-shadow: 0 18px 40px -6px rgba(86, 14, 27, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
html.light-mode .result-card .card-title,
html[data-theme="light"] .result-card .card-title {
    color: #181514 !important;
}
html.light-mode .result-card .card-sub,
html[data-theme="light"] .result-card .card-sub {
    color: #5E5650 !important;
}
html.light-mode .result-card .card-genre-tag,
html[data-theme="light"] .result-card .card-genre-tag {
    background: rgba(86, 14, 27, 0.06) !important;
    border: 1px solid rgba(86, 14, 27, 0.12) !important;
    color: #560E1B !important;
}
html.light-mode .card-score-badge,
html[data-theme="light"] .card-score-badge {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(86, 14, 27, 0.16) !important;
    color: #560E1B !important;
    box-shadow: 0 2px 8px rgba(86, 14, 27, 0.08) !important;
}
html.light-mode .stat-chip,
html[data-theme="light"] .stat-chip {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.1) !important;
    color: #5E5650 !important;
}
html.light-mode .stat-chip span,
html[data-theme="light"] .stat-chip span {
    color: #560E1B !important;
}
html.light-mode .view-btn,
html[data-theme="light"] .view-btn {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.14) !important;
    color: #5E5650 !important;
}
html.light-mode .view-btn:hover,
html[data-theme="light"] .view-btn:hover {
    border-color: #560E1B !important;
    color: #560E1B !important;
}
html.light-mode .view-btn.active,
html[data-theme="light"] .view-btn.active {
    background: #560E1B !important;
    border-color: #560E1B !important;
    color: #FFFFFF !important;
}

/* ── 2. LE SALON / COMMUNITY (community.html) ─────────────────────────── */
html.light-mode .post-card,
html[data-theme="light"] .post-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.04), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}
html.light-mode .post-card:hover,
html[data-theme="light"] .post-card:hover {
    border-color: rgba(86, 14, 27, 0.22) !important;
    box-shadow: 0 14px 34px -4px rgba(86, 14, 27, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03) !important;
}
html.light-mode .post-card span.text-white,
html[data-theme="light"] .post-card span.text-white,
html.light-mode .post-card .font-bold.text-white,
html[data-theme="light"] .post-card .font-bold.text-white {
    color: #181514 !important;
}
html.light-mode .post-card p.text-gray-100,
html[data-theme="light"] .post-card p.text-gray-100 {
    color: #181514 !important;
}
html.light-mode .post-card .text-gray-500,
html[data-theme="light"] .post-card .text-gray-500,
html.light-mode .post-card .text-gray-600,
html[data-theme="light"] .post-card .text-gray-600 {
    color: #5E5650 !important;
}

/* Compose Box */
html.light-mode .compose-box,
html[data-theme="light"] .compose-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .compose-textarea,
html[data-theme="light"] .compose-textarea {
    color: #181514 !important;
}
html.light-mode .compose-textarea::placeholder,
html[data-theme="light"] .compose-textarea::placeholder {
    color: #8E857D !important;
}
html.light-mode .compose-box .border-t,
html[data-theme="light"] .compose-box .border-t {
    border-color: rgba(86, 14, 27, 0.08) !important;
}

/* Onglets & Navigation Le Salon */
html.light-mode .tab-btn,
html[data-theme="light"] .tab-btn {
    color: #5E5650 !important;
}
html.light-mode .tab-btn:hover:not(.active),
html[data-theme="light"] .tab-btn:hover:not(.active) {
    color: #181514 !important;
}
html.light-mode .tab-btn.active,
html[data-theme="light"] .tab-btn.active {
    color: #560E1B !important;
    border-bottom-color: #560E1B !important;
    font-weight: 800 !important;
}
html.light-mode .action-btn,
html[data-theme="light"] .action-btn {
    color: #5E5650 !important;
}
html.light-mode .action-btn:hover,
html[data-theme="light"] .action-btn:hover {
    color: #560E1B !important;
    background: rgba(86, 14, 27, 0.06) !important;
}
html.light-mode .action-btn.liked,
html[data-theme="light"] .action-btn.liked,
html.light-mode .action-btn.bookmarked,
html[data-theme="light"] .action-btn.bookmarked {
    color: #560E1B !important;
}

/* Sidebar Le Salon */
html.light-mode .sidebar-link,
html[data-theme="light"] .sidebar-link {
    color: #5E5650 !important;
}
html.light-mode .sidebar-link:hover,
html[data-theme="light"] .sidebar-link:hover {
    background: rgba(86, 14, 27, 0.05) !important;
    color: #181514 !important;
}
html.light-mode .sidebar-link.active,
html[data-theme="light"] .sidebar-link.active {
    background: rgba(86, 14, 27, 0.08) !important;
    color: #560E1B !important;
    border-color: rgba(86, 14, 27, 0.18) !important;
    font-weight: 700 !important;
}
html.light-mode .sidebar-link i,
html[data-theme="light"] .sidebar-link i {
    color: #560E1B !important;
}
html.light-mode aside .bg-liberty-card,
html[data-theme="light"] aside .bg-liberty-card,
html.light-mode .bg-liberty-card,
html[data-theme="light"] .bg-liberty-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode aside h3.text-white,
html[data-theme="light"] aside h3.text-white {
    color: #181514 !important;
}
html.light-mode aside .text-gray-400,
html[data-theme="light"] aside .text-gray-400 {
    color: #5E5650 !important;
}
html.light-mode aside span.font-bold.text-white,
html[data-theme="light"] aside span.font-bold.text-white {
    color: #181514 !important;
}
html.light-mode aside span.font-bold.text-lavender,
html[data-theme="light"] aside span.font-bold.text-lavender {
    color: #560E1B !important;
}

html.light-mode .hashtag,
html[data-theme="light"] .hashtag {
    color: #560E1B !important;
    font-weight: 700 !important;
}
html.light-mode .webtoon-ping,
html[data-theme="light"] .webtoon-ping {
    background: rgba(86, 14, 27, 0.07) !important;
    border: 1px solid rgba(86, 14, 27, 0.18) !important;
    color: #560E1B !important;
}
html.light-mode .webtoon-ping:hover,
html[data-theme="light"] .webtoon-ping:hover {
    background: #560E1B !important;
    color: #FFFFFF !important;
}
html.light-mode .filter-chip,
html[data-theme="light"] .filter-chip {
    background: rgba(86, 14, 27, 0.07) !important;
    border: 1px solid rgba(86, 14, 27, 0.18) !important;
    color: #560E1B !important;
}
html.light-mode .trend-item:hover,
html[data-theme="light"] .trend-item:hover {
    background: rgba(86, 14, 27, 0.05) !important;
}

/* ── 3. NOUVEAUTÉS & GRILLES (new.html, genre.html) ────────────────────── */
html.light-mode #new-container > div,
html[data-theme="light"] #new-container > div,
html.light-mode #genre-container > div,
html[data-theme="light"] #genre-container > div {
    border-color: rgba(86, 14, 27, 0.08) !important;
}
html.light-mode #new-container .wm-card + div,
html[data-theme="light"] #new-container .wm-card + div,
html.light-mode #genre-container .wm-card + div,
html[data-theme="light"] #genre-container .wm-card + div {
    background: #FFFFFF !important;
    border-color: rgba(86, 14, 27, 0.08) !important;
}
html.light-mode #new-container h4,
html[data-theme="light"] #new-container h4,
html.light-mode #genre-container h4,
html[data-theme="light"] #genre-container h4 {
    color: #181514 !important;
}
html.light-mode #new-container h2,
html[data-theme="light"] #new-container h2,
html.light-mode #genre-container h2,
html[data-theme="light"] #genre-container h2 {
    color: #181514 !important;
}
html.light-mode #new-container .h-px,
html[data-theme="light"] #new-container .h-px,
html.light-mode #genre-container .h-px,
html[data-theme="light"] #genre-container .h-px {
    background: rgba(86, 14, 27, 0.1) !important;
}

/* ── 4. QUIZZ (quiz.html) ──────────────────────────────────────────────── */
html.light-mode .quiz-card,
html[data-theme="light"] .quiz-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .quiz-card:hover,
html[data-theme="light"] .quiz-card:hover {
    border-color: rgba(86, 14, 27, 0.22) !important;
    box-shadow: 0 16px 36px -4px rgba(86, 14, 27, 0.08) !important;
}
html.light-mode .diff-btn,
html[data-theme="light"] .diff-btn {
    background: #F7F5F0 !important;
    color: #5E5650 !important;
    border: 1px solid rgba(86, 14, 27, 0.14) !important;
}
html.light-mode .diff-btn:hover,
html[data-theme="light"] .diff-btn:hover {
    border-color: #560E1B !important;
    color: #181514 !important;
}
html.light-mode .diff-btn.active-diff,
html[data-theme="light"] .diff-btn.active-diff {
    background: #560E1B !important;
    color: #FFFFFF !important;
    border-color: #560E1B !important;
    box-shadow: 0 4px 14px rgba(86, 14, 27, 0.35) !important;
}
html.light-mode .oracle-chip,
html[data-theme="light"] .oracle-chip {
    background: #FFFFFF !important;
    color: #560E1B !important;
    border: 1px solid rgba(86, 14, 27, 0.14) !important;
    box-shadow: 0 2px 8px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .oracle-chip:hover,
html[data-theme="light"] .oracle-chip:hover {
    background: #560E1B !important;
    border-color: #560E1B !important;
    color: #FFFFFF !important;
}
html.light-mode #oracle-quiz-input,
html[data-theme="light"] #oracle-quiz-input {
    background: #FFFFFF !important;
    color: #181514 !important;
    border: 1.5px solid rgba(86, 14, 27, 0.2) !important;
}
html.light-mode #oracle-quiz-input::placeholder,
html[data-theme="light"] #oracle-quiz-input::placeholder {
    color: #8E857D !important;
}

/* ── 5. PROFIL / MON ESPACE (profile.html) ────────────────────────────── */
html.light-mode .bento,
html[data-theme="light"] .bento {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .bento:hover,
html[data-theme="light"] .bento:hover {
    border-color: rgba(86, 14, 27, 0.22) !important;
    box-shadow: 0 16px 36px -4px rgba(86, 14, 27, 0.08) !important;
}
html.light-mode #profile-name,
html[data-theme="light"] #profile-name {
    color: #181514 !important;
}
html.light-mode .bento .grid > div,
html[data-theme="light"] .bento .grid > div {
    background: #F7F5F0 !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
}
html.light-mode #stat-total,
html[data-theme="light"] #stat-total,
html.light-mode #stat-chapters,
html[data-theme="light"] #stat-chapters {
    color: #181514 !important;
}
html.light-mode #xp-label,
html[data-theme="light"] #xp-label {
    color: #560E1B !important;
}
html.light-mode #xp-bar,
html[data-theme="light"] #xp-bar {
    background: #560E1B !important;
}
html.light-mode #profile-grade,
html[data-theme="light"] #profile-grade {
    background: rgba(86, 14, 27, 0.08) !important;
    border: 1px solid rgba(86, 14, 27, 0.2) !important;
    color: #560E1B !important;
}
html.light-mode #profile-grade i,
html[data-theme="light"] #profile-grade i {
    color: #560E1B !important;
}
html.light-mode .manga-title,
html[data-theme="light"] .manga-title {
    color: #181514 !important;
}
html.light-mode .manga-thumb,
html[data-theme="light"] .manga-thumb {
    border: 1px solid rgba(86, 14, 27, 0.12) !important;
}
html.light-mode .inp,
html[data-theme="light"] .inp {
    background: #F7F5F0 !important;
    color: #181514 !important;
    border: 1.5px solid rgba(86, 14, 27, 0.18) !important;
}
html.light-mode .inp:focus,
html[data-theme="light"] .inp:focus {
    border-color: #560E1B !important;
    box-shadow: 0 0 0 3px rgba(86, 14, 27, 0.12) !important;
}
html.light-mode .modal-box,
html[data-theme="light"] .modal-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.1) !important;
    color: #181514 !important;
    box-shadow: 0 20px 60px rgba(86, 14, 27, 0.15) !important;
}
html.light-mode .gardien-card,
html[data-theme="light"] .gardien-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
}

/* ── 6. DÉTAILS DU WEBTOON (details.html) ──────────────────────────────── */
html.light-mode .detail-card,
html[data-theme="light"] .detail-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .detail-card-title,
html[data-theme="light"] .detail-card-title {
    color: #560E1B !important;
    border-bottom: 1px solid rgba(86, 14, 27, 0.1) !important;
}
html.light-mode .detail-stat-row,
html[data-theme="light"] .detail-stat-row {
    border-bottom: 1px solid rgba(86, 14, 27, 0.06) !important;
}
html.light-mode .detail-stat-label,
html[data-theme="light"] .detail-stat-label {
    color: #5E5650 !important;
}
html.light-mode .detail-stat-value,
html[data-theme="light"] .detail-stat-value {
    color: #181514 !important;
}
html.light-mode .synopsis-box,
html[data-theme="light"] .synopsis-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    color: #181514 !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .synopsis-box::before,
html[data-theme="light"] .synopsis-box::before {
    color: rgba(86, 14, 27, 0.08) !important;
}
html.light-mode .synopsis-authors,
html[data-theme="light"] .synopsis-authors {
    border-top: 1px solid rgba(86, 14, 27, 0.1) !important;
    color: #5E5650 !important;
}
html.light-mode .synopsis-authors span,
html[data-theme="light"] .synopsis-authors span {
    color: #560E1B !important;
}
html.light-mode .stat-box,
html[data-theme="light"] .stat-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .stat-box-label,
html[data-theme="light"] .stat-box-label {
    color: #560E1B !important;
}
html.light-mode .stat-box-value,
html[data-theme="light"] .stat-box-value {
    color: #181514 !important;
}
html.light-mode .detail-section-title,
html[data-theme="light"] .detail-section-title {
    color: #181514 !important;
    border-bottom: 1px solid rgba(86, 14, 27, 0.1) !important;
}
html.light-mode .detail-section-title i,
html[data-theme="light"] .detail-section-title i {
    color: #560E1B !important;
}
html.light-mode .read-link,
html[data-theme="light"] .read-link {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.1) !important;
}
html.light-mode .read-link:hover,
html[data-theme="light"] .read-link:hover {
    border-color: #560E1B !important;
    background: rgba(86, 14, 27, 0.05) !important;
}
html.light-mode .read-link-name,
html[data-theme="light"] .read-link-name {
    color: #181514 !important;
}
html.light-mode .ep-row,
html[data-theme="light"] .ep-row {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    color: #181514 !important;
}
html.light-mode .ep-row:hover,
html[data-theme="light"] .ep-row:hover {
    background: #FAF8F5 !important;
    border-color: rgba(86, 14, 27, 0.25) !important;
}
html.light-mode .progress-input,
html[data-theme="light"] .progress-input {
    background: #F7F5F0 !important;
    color: #181514 !important;
    border: 1px solid rgba(86, 14, 27, 0.18) !important;
}

/* ── 7. TOP 10 (top10.html) ────────────────────────────────────────────── */
html.light-mode .rank-row,
html[data-theme="light"] .rank-row {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    color: #181514 !important;
    box-shadow: 0 4px 16px rgba(86, 14, 27, 0.03) !important;
}
html.light-mode .rank-row:hover,
html[data-theme="light"] .rank-row:hover {
    background: #FAF8F5 !important;
    border-color: rgba(86, 14, 27, 0.25) !important;
}
html.light-mode .wt-card,
html[data-theme="light"] .wt-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    color: #181514 !important;
    box-shadow: 0 4px 16px rgba(86, 14, 27, 0.03) !important;
}
html.light-mode .wt-card:hover,
html[data-theme="light"] .wt-card:hover {
    background: #FAF8F5 !important;
    border-color: rgba(86, 14, 27, 0.25) !important;
}
html.light-mode .top-tab,
html[data-theme="light"] .top-tab {
    background: #F7F5F0 !important;
    color: #5E5650 !important;
    border: 1px solid rgba(86, 14, 27, 0.14) !important;
}
html.light-mode .top-tab:hover,
html[data-theme="light"] .top-tab:hover {
    color: #181514 !important;
    border-color: #560E1B !important;
}
html.light-mode .top-tab.active,
html[data-theme="light"] .top-tab.active {
    background: #560E1B !important;
    color: #FFFFFF !important;
    border-color: #560E1B !important;
    box-shadow: 0 4px 14px rgba(86, 14, 27, 0.35) !important;
}
html.light-mode .podium-col.p1 .podium-avatar,
html[data-theme="light"] .podium-col.p1 .podium-avatar {
    background: #FFFFFF !important;
    border-color: #560E1B !important;
}
html.light-mode .podium-col.p2 .podium-avatar,
html[data-theme="light"] .podium-col.p2 .podium-avatar,
html.light-mode .podium-col.p3 .podium-avatar,
html[data-theme="light"] .podium-col.p3 .podium-avatar {
    background: #FFFFFF !important;
    border-color: rgba(86, 14, 27, 0.3) !important;
}

/* ── 8. ACTUS & RETOURS (actus.html, webtoons-retour.html) ─────────────── */
html.light-mode .actu-card,
html[data-theme="light"] .actu-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(86, 14, 27, 0.04) !important;
}
html.light-mode .hero-strip,
html[data-theme="light"] .hero-strip {
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(86, 14, 27, 0.08) !important;
}
html.light-mode .filter-pill,
html[data-theme="light"] .filter-pill {
    background: #F7F5F0 !important;
    color: #5E5650 !important;
    border: 1px solid rgba(86, 14, 27, 0.14) !important;
}
html.light-mode .filter-pill:hover,
html[data-theme="light"] .filter-pill:hover {
    color: #181514 !important;
    border-color: #560E1B !important;
}
html.light-mode .filter-pill.active,
html[data-theme="light"] .filter-pill.active {
    background: #560E1B !important;
    color: #FFFFFF !important;
    border-color: #560E1B !important;
}
html.light-mode .nl-box,
html[data-theme="light"] .nl-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
}
html.light-mode .nl-input,
html[data-theme="light"] .nl-input {
    background: #F7F5F0 !important;
    color: #181514 !important;
    border: 1px solid rgba(86, 14, 27, 0.18) !important;
}
html.light-mode .admin-form,
html[data-theme="light"] .admin-form {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
}
html.light-mode .form-input,
html[data-theme="light"] .form-input {
    background: #F7F5F0 !important;
    color: #181514 !important;
    border: 1px solid rgba(86, 14, 27, 0.18) !important;
}
html.light-mode .wt-row,
html[data-theme="light"] .wt-row {
    background: #FFFFFF !important;
}
html.light-mode .wt-row:hover,
html[data-theme="light"] .wt-row:hover {
    background: #FAF8F5 !important;
}
html.light-mode .wt-title,
html[data-theme="light"] .wt-title {
    color: #181514 !important;
}
html.light-mode .wt-sub,
html[data-theme="light"] .wt-sub {
    color: #5E5650 !important;
}
html.light-mode .card-sm,
html[data-theme="light"] .card-sm {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
}

/* ── 9. AUTH (login.html, reset-password.html) ─────────────────────────── */
html.light-mode .auth-card,
html[data-theme="light"] .auth-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(86, 14, 27, 0.08) !important;
    box-shadow: 0 20px 60px -10px rgba(86, 14, 27, 0.12) !important;
}
html.light-mode .field-input,
html[data-theme="light"] .field-input {
    background: #F7F5F0 !important;
    color: #181514 !important;
    border: 1.5px solid rgba(86, 14, 27, 0.18) !important;
}
html.light-mode .field-input:focus,
html[data-theme="light"] .field-input:focus {
    background: #FFFFFF !important;
    border-color: #560E1B !important;
    box-shadow: 0 0 0 3px rgba(86, 14, 27, 0.12) !important;
}
html.light-mode .field-input::placeholder,
html[data-theme="light"] .field-input::placeholder {
    color: #8E857D !important;
}
html.light-mode .field-icon,
html[data-theme="light"] .field-icon {
    color: #560E1B !important;
}
html.light-mode .submit-btn,
html[data-theme="light"] .submit-btn {
    background: #560E1B !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(86, 14, 27, 0.3) !important;
}
html.light-mode .bg-scene,
html[data-theme="light"] .bg-scene {
    filter: blur(12px) brightness(0.9) opacity(0.16) !important;
}