/* ================================================================
   MOVIEVIBES.NET — LIGHT THEME STYLESHEET  v3
   ─────────────────────────────────────────────────────────────
   KEY FIX in v3:
   "html[data-theme=light] .lang-tab { background:#fff }" has
   specificity (0,2,1) which silently overrides the dark theme's
   ".lang-tab.active { background: gradient }" at (0,2,0).
   Every active state is now explicitly re-declared at (0,3,1)
   to win the cascade and restore the pink/purple gradient fill.

   PALETTE (Dribbble-inspired clean light mode)
   ─────────────────────────────────────────────────────────────
   Page bg          #F9F8FF   barely-there lavender tint
   Card bg          #FFFFFF   pure white
   Heading text     #111827   near-black charcoal
   Body text        #374151   dark slate gray
   Secondary text   #6B7280   medium gray
   Muted / meta     #9CA3AF   light gray (placeholder, captions)
   Brand accent     #7C3AED   purple  — interactive elements only
   Accent hover     #6D28D9   deeper purple on hover
   Active gradient  #c026d3 → #a855f7  (unchanged from dark)
   ─────────────────────────────────────────────────────────────
   All rules scoped to html[data-theme="light"].
   Load this file AFTER style.css.
================================================================ */


/* ════════════════════════════════════════════════════════════
   ①  ACTIVE-STATE RESTORE  — must come first so later
       component rules don't accidentally re-hide the gradient
════════════════════════════════════════════════════════════ */

/* Tabs & buttons — restore pink/purple gradient fill */
html[data-theme="light"] .lang-tab.active,
html[data-theme="light"] .subcat-tab.active,
html[data-theme="light"] .filter-btn-compact.active,
html[data-theme="light"] .menu-btn.active,
html[data-theme="light"] .header-subcat-tab.active {
    background: linear-gradient(135deg, #c026d3, #a855f7);
    border-color: #d946ef;
    color: #ffffff;
    box-shadow: 0 3px 16px rgba(192, 38, 211, .45);
}

/* Month navigator active */
html[data-theme="light"] .month-nav-bar.month-active {
    background: linear-gradient(135deg, #c026d3, #a855f7);
    border-color: #d946ef;
    box-shadow: 0 3px 16px rgba(192, 38, 211, .45);
}
html[data-theme="light"] .month-nav-bar.month-active .month-nav-btn,
html[data-theme="light"] .month-nav-bar.month-active .month-display {
    color: #ffffff;
}
html[data-theme="light"] .month-nav-bar.month-active .month-nav-btn:hover {
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
}


/* ════════════════════════════════════════════════════════════
   ②  BASE
════════════════════════════════════════════════════════════ */

html[data-theme="light"] body {
    background: #F9F8FF;
    color: #111827;
}

html[data-theme="light"] body::before {
    background: linear-gradient(160deg, #F9F8FF 0%, #F3F0FF 55%, #EDE9FE 100%);
}

/* ── LOADER ── */
html[data-theme="light"] .loader {
    background: linear-gradient(160deg, #F9F8FF 0%, #F3F0FF 55%, #EDE9FE 100%);
}
html[data-theme="light"] .loader p {
    color: #7C3AED !important;
}
html[data-theme="light"] .loader-spinner {
    border-color: rgba(124, 58, 237, .2);
    border-top-color: #7C3AED;
}


/* ════════════════════════════════════════════════════════════
   ③  HEADER
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .header-new {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F3FF 55%, #EDE9FE 100%);
    box-shadow: 0 2px 16px rgba(109, 40, 217, .1), 0 1px 0 rgba(109, 40, 217, .08);
}

/* Site title gradient text inherits from dark theme — looks great, keep it */
html[data-theme="light"] .site-tagline {
    color: #6B7280;
}

/* Header subcat tabs — inactive */
html[data-theme="light"] .header-subcat-tab {
    background: rgba(255, 255, 255, .75);
    border-color: rgba(139, 92, 246, .22);
    color: #4B5563;
}
html[data-theme="light"] .header-subcat-tab:hover {
    background: #FFFFFF;
    border-color: rgba(139, 92, 246, .42);
    color: #111827;
    box-shadow: 0 2px 8px rgba(124, 58, 237, .1);
}
/* active: already handled in block ① */

/* Search box */
html[data-theme="light"] .search-box-header {
    background: #FFFFFF;
    border-color: rgba(139, 92, 246, .22);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
html[data-theme="light"] .search-box-header:focus-within {
    border-color: rgba(124, 58, 237, .55);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
}
html[data-theme="light"] .search-input-header {
    color: #111827;
}
html[data-theme="light"] .search-input-header::placeholder {
    color: #9CA3AF;
}
html[data-theme="light"] .clear-search-header {
    background: rgba(0, 0, 0, .06);
    color: #6B7280;
}
html[data-theme="light"] .clear-search-header:hover {
    background: rgba(0, 0, 0, .11);
    color: #111827;
}

/* Hamburger menu button */
html[data-theme="light"] .hamburger-btn {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(139, 92, 246, .22);
    color: #7C3AED;
}
html[data-theme="light"] .hamburger-btn:hover {
    background: #FFFFFF;
    border-color: rgba(139, 92, 246, .45);
}


/* ════════════════════════════════════════════════════════════
   ④  SIDE NAV DRAWER
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .side-nav {
    background: linear-gradient(180deg, #FAFAFA 0%, #F5F3FF 100%);
    border-right-color: rgba(139, 92, 246, .14);
    box-shadow: 6px 0 40px rgba(0, 0, 0, .1);
}
html[data-theme="light"] .sn-header {
    background: rgba(139, 92, 246, .07);
    border-bottom-color: rgba(139, 92, 246, .1);
}
html[data-theme="light"] .sn-logo-text h2 {
    color: #111827;
}
html[data-theme="light"] .sn-logo-text p {
    color: #7C3AED;
}
html[data-theme="light"] .sn-close {
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .09);
    color: #6B7280;
}
html[data-theme="light"] .sn-close:hover {
    background: rgba(0, 0, 0, .09);
    color: #111827;
}
/* Section labels e.g. "Navigate", "English" */
html[data-theme="light"] .sn-section-label {
    color: #9CA3AF;
}
/* Nav links — neutral slate, NOT purple */
html[data-theme="light"] .sn-item {
    color: #4B5563;
}
html[data-theme="light"] .sn-item:hover {
    background: rgba(124, 58, 237, .07);
    color: #111827;
    border-left-color: rgba(124, 58, 237, .3);
}
html[data-theme="light"] .sn-item.active {
    background: rgba(124, 58, 237, .1);
    color: #7C3AED;
    border-left-color: #7C3AED;
}
html[data-theme="light"] .sn-divider {
    background: rgba(0, 0, 0, .07);
}


/* ════════════════════════════════════════════════════════════
   ⑤  STICKY NAV WRAPPER
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .sticky-nav-wrapper {
    background: linear-gradient(180deg, rgba(249, 248, 255, .98) 0%, rgba(245, 243, 255, .97) 100%);
    border-bottom-color: rgba(139, 92, 246, .1);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
}
html[data-theme="light"] .sticky-nav-wrapper.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, .09);
}


/* ════════════════════════════════════════════════════════════
   ⑥  LANGUAGE TABS
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .lang-tabs {
    border-bottom-color: rgba(139, 92, 246, .08);
}

/* Inactive */
html[data-theme="light"] .lang-tab {
    background: #FFFFFF;
    border-color: rgba(139, 92, 246, .2);
    color: #4B5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
html[data-theme="light"] .lang-tab:hover {
    background: #FFFFFF;
    border-color: rgba(124, 58, 237, .45);
    color: #111827;
    box-shadow: 0 2px 10px rgba(124, 58, 237, .12);
}
/* Active: block ① */


/* ════════════════════════════════════════════════════════════
   ⑦  SUBCAT TABS  (Movies / OTT / Series)
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .subcat-tabs {
    border-bottom-color: rgba(139, 92, 246, .07);
}

html[data-theme="light"] .subcat-tab {
    background: #FFFFFF;
    border-color: rgba(139, 92, 246, .2);
    color: #4B5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
html[data-theme="light"] .subcat-tab:hover {
    background: #FFFFFF;
    border-color: rgba(124, 58, 237, .45);
    color: #111827;
    box-shadow: 0 2px 10px rgba(124, 58, 237, .12);
}
/* Active: block ① */


/* ════════════════════════════════════════════════════════════
   ⑧  FILTER BAR  (This week / Last week / Upcoming / Year / Month)
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .filter-btn-compact {
    background: #FFFFFF;
    border-color: rgba(139, 92, 246, .2);
    color: #4B5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
html[data-theme="light"] .filter-btn-compact:hover {
    background: #FFFFFF;
    border-color: rgba(124, 58, 237, .45);
    color: #111827;
    box-shadow: 0 2px 10px rgba(124, 58, 237, .12);
}
/* Active: block ① */

html[data-theme="light"] .filter-divider {
    background: rgba(0, 0, 0, .1);
}

/* Year select wrapper */
html[data-theme="light"] .year-select-wrapper {
    background: #FFFFFF;
    border-color: rgba(139, 92, 246, .2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
html[data-theme="light"] .year-select-compact {
    color: #4B5563;
}
html[data-theme="light"] .year-select-compact option {
    background: #FFFFFF;
    color: #111827;
}
html[data-theme="light"] .year-select-arrow {
    color: rgba(107, 114, 128, .55);
}

/* Month navigator — inactive */
html[data-theme="light"] .month-nav-bar {
    background: #FFFFFF;
    border-color: rgba(139, 92, 246, .2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
html[data-theme="light"] .month-nav-btn {
    color: #6B7280;
}
html[data-theme="light"] .month-nav-btn:hover {
    background: rgba(124, 58, 237, .08);
    color: #111827;
}
html[data-theme="light"] .month-display {
    color: #374151;
}
/* Month active: block ① */

/* Legacy menu btns */
html[data-theme="light"] .menu-btn {
    background: #FFFFFF;
    border-color: rgba(139, 92, 246, .2);
    color: #4B5563;
}
html[data-theme="light"] .menu-btn:hover {
    background: #FFFFFF;
    border-color: rgba(124, 58, 237, .45);
    color: #111827;
}
/* Active: block ① */


/* ════════════════════════════════════════════════════════════
   ⑨  COUNT BAR
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .movie-count-pill {
    background: rgba(124, 58, 237, .07);
    border-color: rgba(124, 58, 237, .18);
    color: #7C3AED;
}


/* ════════════════════════════════════════════════════════════
   ⑩  MOVIE CARDS
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .movie-card {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, .07);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .04);
}
html[data-theme="light"] .movie-card:hover {
    box-shadow: 0 8px 32px rgba(124, 58, 237, .16), 0 2px 8px rgba(0, 0, 0, .08);
    border-color: rgba(124, 58, 237, .3);
}

html[data-theme="light"] .movie-poster-container {
    background: linear-gradient(135deg, #F3F0FF 0%, #EDE9FE 100%);
}

html[data-theme="light"] .movie-title {
    color: #111827;
}
html[data-theme="light"] .movie-detail {
    color: #6B7280;
}
html[data-theme="light"] .movie-detail strong {
    color: #374151;
}

/* Genre tags */
html[data-theme="light"] .genre-tag {
    background: rgba(124, 58, 237, .08);
    border-color: rgba(124, 58, 237, .2);
    color: #7C3AED;
}

/* Share button on poster */
html[data-theme="light"] .share-btn {
    background: rgba(124, 58, 237, .7);
}
html[data-theme="light"] .share-btn:hover {
    background: #7C3AED;
}


/* ════════════════════════════════════════════════════════════
   ⑪  ACTION BUTTONS
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .action-section {
    border-top-color: rgba(0, 0, 0, .07);
}
html[data-theme="light"] .action-btn {
    background: rgba(124, 58, 237, .05);
    border-color: rgba(124, 58, 237, .14);
    color: #7C3AED;
}
html[data-theme="light"] .action-btn:hover {
    background: rgba(124, 58, 237, .1);
    border-color: rgba(124, 58, 237, .35);
    box-shadow: 0 4px 12px rgba(124, 58, 237, .12);
}

/* Active state colours — keep vivid on light */
html[data-theme="light"] .action-btn.favourite-btn.active {
    background: rgba(236, 72, 153, .1);
    border-color: #EC4899;
    color: #BE185D;
    box-shadow: 0 0 10px rgba(236, 72, 153, .2);
}
html[data-theme="light"] .action-btn.watchlist-btn.active {
    background: rgba(59, 130, 246, .1);
    border-color: #3B82F6;
    color: #1D4ED8;
    box-shadow: 0 0 10px rgba(59, 130, 246, .2);
}
html[data-theme="light"] .action-btn.remind-btn.active {
    background: rgba(245, 158, 11, .1);
    border-color: #F59E0B;
    color: #B45309;
    box-shadow: 0 0 10px rgba(245, 158, 11, .2);
}
html[data-theme="light"] .action-btn.share-action-btn {
    border-color: rgba(20, 184, 166, .22);
    color: #0D9488;
}
html[data-theme="light"] .action-btn.share-action-btn:hover {
    background: rgba(20, 184, 166, .08);
    border-color: #14B8A6;
}


/* ════════════════════════════════════════════════════════════
   ⑫  TOAST NOTIFICATION
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .mv-toast {
    background: rgba(255, 255, 255, .98);
    color: #111827;
    border-color: rgba(124, 58, 237, .22);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}
html[data-theme="light"] .mv-toast--favourite { border-color: rgba(236, 72, 153, .45); }
html[data-theme="light"] .mv-toast--watchlist { border-color: rgba(59, 130, 246, .45); }
html[data-theme="light"] .mv-toast--remind    { border-color: rgba(245, 158, 11, .45); }
html[data-theme="light"] .mv-toast--share     { border-color: rgba(20, 184, 166, .45); }
html[data-theme="light"] .mv-toast--remove    { border-color: rgba(0, 0, 0, .15); color: #6B7280; }
html[data-theme="light"] .toast-link {
    color: #7C3AED;
}


/* ════════════════════════════════════════════════════════════
   ⑬  COOKIE BANNER
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .cookie-banner {
    background: rgba(255, 255, 255, .99);
    border-top-color: rgba(0, 0, 0, .08);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
}
html[data-theme="light"] .cookie-text h3 { color: #111827; }
html[data-theme="light"] .cookie-text p  { color: #6B7280; }
html[data-theme="light"] .reject-btn {
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .1);
    color: #6B7280;
}
html[data-theme="light"] .reject-btn:hover {
    background: rgba(0, 0, 0, .09);
    color: #374151;
}


/* ════════════════════════════════════════════════════════════
   ⑭  NO MOVIES STATE
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .no-movies      { color: #9CA3AF; }
html[data-theme="light"] .no-movies h3   { color: #6B7280; }


/* ════════════════════════════════════════════════════════════
   ⑮  FOOTER
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .footer {
    background: #F3F0FF;
    border-top-color: rgba(139, 92, 246, .1);
    color: #9CA3AF;
}
html[data-theme="light"] .footer-link         { color: #7C3AED; }
html[data-theme="light"] .footer-link:hover   { color: #6D28D9; }
html[data-theme="light"] .footer-separator    { color: #D1D5DB; }
html[data-theme="light"] .footer-apps-label  { color: #9CA3AF; }
html[data-theme="light"] .footer-copyright   { color: #9CA3AF; }

/* App store buttons */
html[data-theme="light"] .app-store-btn {
    border-color: rgba(0, 0, 0, .1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}
html[data-theme="light"] .app-store-btn:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
html[data-theme="light"] .android-btn  { background: rgba(59, 130, 246, .07); }
html[data-theme="light"] .ios-btn      { background: rgba(124, 58, 237, .07); }
html[data-theme="light"] .app-store-sub  { color: #6B7280; }
html[data-theme="light"] .app-store-name { color: #111827; }


/* ════════════════════════════════════════════════════════════
   ⑯  CONFIRMATION MODAL
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .confirmation-box {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, .08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
}
html[data-theme="light"] .confirmation-box h3 { color: #111827; }
html[data-theme="light"] .confirmation-box p  { color: #6B7280; }
html[data-theme="light"] .confirm-no-btn {
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .09);
    color: #6B7280;
}


/* ════════════════════════════════════════════════════════════
   ⑰  STANDALONE PAGES  (about / contact / terms / privacy…)
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .page-hero {
    border-bottom-color: rgba(0, 0, 0, .07);
}
html[data-theme="light"] .page-hero-sub { color: #9CA3AF; }

html[data-theme="light"] .page-body         { color: #374151; }
html[data-theme="light"] .page-body h2      { color: #111827; border-left-color: #7C3AED; }
html[data-theme="light"] .page-body h3      { color: #374151; }
html[data-theme="light"] .page-body strong  { color: #111827; }
html[data-theme="light"] .page-body a       { color: #7C3AED; }
html[data-theme="light"] .page-body a:hover { color: #6D28D9; }
html[data-theme="light"] .page-lead         { color: #6B7280; }
html[data-theme="light"] .page-sign-off     { color: #7C3AED; }

html[data-theme="light"] .back-link {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(0, 0, 0, .1);
    color: #4B5563;
}
html[data-theme="light"] .back-link:hover {
    background: #FFFFFF;
    color: #111827;
}

/* Contact cards */
html[data-theme="light"] .contact-card,
html[data-theme="light"] .contact-card-big {
    background: rgba(124, 58, 237, .04);
    border-color: rgba(124, 58, 237, .12);
}
html[data-theme="light"] .contact-label    { color: #9CA3AF; }
html[data-theme="light"] .contact-value    { color: #111827; }
html[data-theme="light"] .contact-value a  { color: #7C3AED; }

/* Info box */
html[data-theme="light"] .info-box {
    background: rgba(59, 130, 246, .05);
    border-color: rgba(59, 130, 246, .15);
}
html[data-theme="light"] .info-box h3 { color: #1D4ED8; }

/* Mission grid */
html[data-theme="light"] .mission-item {
    background: rgba(124, 58, 237, .05);
    border-color: rgba(124, 58, 237, .1);
    color: #374151;
}

/* CTA box */
html[data-theme="light"] .cta-box {
    background: linear-gradient(135deg, rgba(124, 58, 237, .07), rgba(168, 85, 247, .04));
    border-color: rgba(124, 58, 237, .18);
}
html[data-theme="light"] .cta-box h3 { color: #111827; }
html[data-theme="light"] .cta-box p  { color: #6B7280; }

/* Browser list */
html[data-theme="light"] .browser-item {
    background: rgba(0, 0, 0, .025);
    border-color: rgba(0, 0, 0, .06);
    color: #6B7280;
}
html[data-theme="light"] .browser-item strong { color: #374151; }

/* Legal divider */
html[data-theme="light"] .legal-divider {
    border-top-color: rgba(0, 0, 0, .07);
}


/* ════════════════════════════════════════════════════════════
   ⑱  GLOBAL SEARCH PANEL
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .gs-panel {
    background: linear-gradient(180deg, #FAFAFA 0%, #F5F3FF 100%);
    border-color: rgba(0, 0, 0, .08);
    box-shadow: -8px 0 40px rgba(0, 0, 0, .1);
}
html[data-theme="light"] .gs-header {
    background: rgba(124, 58, 237, .06);
    border-bottom-color: rgba(0, 0, 0, .07);
}
html[data-theme="light"] .gs-header-text { color: #374151; }
html[data-theme="light"] .gs-close-btn {
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .09);
    color: #6B7280;
}
html[data-theme="light"] .gs-close-btn:hover {
    background: rgba(0, 0, 0, .09);
    color: #111827;
}
html[data-theme="light"] .gs-footer {
    background: rgba(243, 240, 255, .8);
    border-top-color: rgba(0, 0, 0, .06);
    color: #9CA3AF;
}

/* States */
html[data-theme="light"] .gs-placeholder,
html[data-theme="light"] .gs-empty,
html[data-theme="light"] .gs-loading    { color: #9CA3AF; }
html[data-theme="light"] .gs-placeholder p,
html[data-theme="light"] .gs-empty p   { color: #9CA3AF; }
html[data-theme="light"] .gs-empty p strong  { color: #7C3AED; }
html[data-theme="light"] .gs-empty-sub       { color: #B3BAC5 !important; }

/* Group label */
html[data-theme="light"] .gs-group-label {
    color: #7C3AED;
    background: linear-gradient(180deg, #FAFAFA 70%, transparent 100%);
}

/* Result cards */
html[data-theme="light"] .gs-card              { border-bottom-color: rgba(0, 0, 0, .05); }
html[data-theme="light"] .gs-card:hover,
html[data-theme="light"] .gs-card:focus        { background: rgba(124, 58, 237, .06); }
html[data-theme="light"] .gs-card-name         { color: #111827; }
html[data-theme="light"] .gs-card-meta         { color: #9CA3AF; }
html[data-theme="light"] .gs-card-meta span    { color: #9CA3AF; }
html[data-theme="light"] .gs-card-cat          { color: #7C3AED; }
html[data-theme="light"] .gs-card-arrow        { color: rgba(0, 0, 0, .2); }
html[data-theme="light"] .gs-card:hover .gs-card-arrow,
html[data-theme="light"] .gs-card:focus .gs-card-arrow { color: #7C3AED; }
html[data-theme="light"] .gs-hl {
    background: rgba(124, 58, 237, .12);
    color: #6D28D9;
}
html[data-theme="light"] .gs-ott-badge {
    background: rgba(0, 0, 0, .07);
    color: #374151;
}


/* ════════════════════════════════════════════════════════════
   ⑲  APP COMING-SOON PAGES
════════════════════════════════════════════════════════════ */

html[data-theme="light"] .app-cs-subtitle        { color: #6B7280; }
html[data-theme="light"] .app-cs-progress-label  { color: #6B7280; }
html[data-theme="light"] .app-cs-progress-track  { background: rgba(0, 0, 0, .07); }

html[data-theme="light"] .app-cs-feature {
    background: rgba(124, 58, 237, .04);
    border-color: rgba(124, 58, 237, .09);
}
html[data-theme="light"] .app-cs-feature:hover {
    background: rgba(124, 58, 237, .08);
    border-color: rgba(124, 58, 237, .2);
}
html[data-theme="light"] .app-cs-feature-text        { color: #6B7280; }
html[data-theme="light"] .app-cs-feature-text strong { color: #111827; }

html[data-theme="light"] .app-cs-notify {
    background: rgba(0, 0, 0, .02);
    border-color: rgba(0, 0, 0, .07);
}
html[data-theme="light"] .app-cs-notify h3 { color: #111827; }
html[data-theme="light"] .app-cs-notify p  { color: #6B7280; }

html[data-theme="light"] .app-cs-input {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, .12);
    color: #111827;
}
html[data-theme="light"] .app-cs-input::placeholder { color: #9CA3AF; }
html[data-theme="light"] .app-cs-input:focus { border-color: rgba(124, 58, 237, .5); }

html[data-theme="light"] .app-cs-back       { color: #9CA3AF; }
html[data-theme="light"] .app-cs-back:hover { color: #374151; }


/* ════════════════════════════════════════════════════════════
   ⑳  THEME TOGGLE BUTTON (both theme states)
════════════════════════════════════════════════════════════ */

/* Dark theme: ☀️ "Light Mode" */
.sn-theme-btn {
    color: #c4b5fd;
}
.sn-theme-btn:hover {
    background: rgba(168, 85, 247, .12);
    color: #e2e8f0;
    border-left-color: rgba(168, 85, 247, .4);
}

/* Light theme: 🌙 "Dark Mode" */
html[data-theme="light"] .sn-theme-btn {
    color: #4B5563;
    background: none;
    border-left-color: transparent;
}
html[data-theme="light"] .sn-theme-btn:hover {
    background: rgba(124, 58, 237, .07);
    color: #111827;
    border-left-color: rgba(124, 58, 237, .3);
}