/* =================================================================
   Global Light/Dark Mode Override
   Applies to entire website when body.hh-light-mode is active
   Beautiful, comprehensive light mode design with white, gray, and purple tones
   ================================================================= */

/* =================================================================
   LIGHT MODE COLOR PALETTE
   ================================================================= */
:root {
  --lm-bg-primary: #faf9fc;
  --lm-bg-secondary: #f5f3f8;
  --lm-surface: #ffffff;
  --lm-surface-elevated: #fefefe;
  --lm-surface-muted: #f8f6fa;
  --lm-text-primary: #1a1526;
  --lm-text-secondary: #4a4458;
  --lm-text-muted: #6b6378;
  --lm-border: rgba(182, 109, 255, 0.12);
  --lm-border-strong: rgba(182, 109, 255, 0.2);
  --lm-accent: #8c38d1;
  --lm-accent-light: #b66dff;
  --lm-accent-soft: rgba(182, 109, 255, 0.1);
  --lm-shadow: rgba(140, 56, 209, 0.08);
  --lm-shadow-strong: rgba(140, 56, 209, 0.15);
}

/* =================================================================
   BASE BACKGROUND & TEXT
   ================================================================= */
body.hh-light-mode,
html.hh-light-mode {
  background:
    radial-gradient(900px 480px at 12% 14%, rgba(182, 109, 255, 0.04), transparent 58%),
    radial-gradient(840px 520px at 78% 18%, rgba(140, 56, 209, 0.03), transparent 60%),
    radial-gradient(600px 400px at 50% 80%, rgba(99, 102, 241, 0.02), transparent 70%),
    linear-gradient(180deg, var(--lm-bg-primary) 0%, var(--lm-bg-secondary) 100%) !important;
  background-attachment: fixed !important;
  color: var(--lm-text-primary) !important;
}

/* =================================================================
   ALL TEXT ELEMENTS - DARK FOR READABILITY
   ================================================================= */
body.hh-light-mode h1,
body.hh-light-mode h2,
body.hh-light-mode h3,
body.hh-light-mode h4,
body.hh-light-mode h5,
body.hh-light-mode h6,
body.hh-light-mode p,
body.hh-light-mode span:not(.hh-result-badge):not(.hh-close),
body.hh-light-mode div:not(.hh-result-badge):not(.hh-close),
body.hh-light-mode label,
body.hh-light-mode li,
body.hh-light-mode td,
body.hh-light-mode th,
body.hh-light-mode strong,
body.hh-light-mode b,
body.hh-light-mode em,
body.hh-light-mode i {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-page-title,
body.hh-light-mode h1.hh-page-title,
body.hh-light-mode #mainTitle,
body.hh-light-mode #gen-title,
body.hh-light-mode #tools-title,
body.hh-light-mode #prompt-title {
  color: var(--lm-text-primary) !important;
  text-shadow: none !important;
}

/* Muted/Secondary text - darker gray for contrast */
body.hh-light-mode .muted,
body.hh-light-mode [class*="muted"],
body.hh-light-mode [class*="subtitle"],
body.hh-light-mode .subtitle,
body.hh-light-mode .hh-modal-sub,
body.hh-light-mode .hh-result-sub,
body.hh-light-mode .hh-loader-sub,
body.hh-light-mode .hh-loader-hint,
body.hh-light-mode .hh-small,
body.hh-light-mode .hh-account-subtitle,
body.hh-light-mode .hh-account-legal-text {
  color: var(--lm-text-secondary) !important;
}

/* =================================================================
   CARDS, PANELS, SURFACES - ELEVATED WITH GRAY TONES
   ================================================================= */
body.hh-light-mode .box,
body.hh-light-mode .card,
body.hh-light-mode .card-surface,
body.hh-light-mode .center-ui.card-surface,
body.hh-light-mode [class*="panel"],
body.hh-light-mode [class*="surface"],
body.hh-light-mode .center-ui {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
  box-shadow: 0 4px 20px var(--lm-shadow), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Elevated surfaces (modals, dropdowns) - slightly different gray */
body.hh-light-mode .hh-modal,
body.hh-light-mode .hh-account-modal,
body.hh-light-mode .tools-modal,
body.hh-light-mode .format-desc.open {
  background: var(--lm-surface-elevated) !important;
  border-color: var(--lm-border-strong) !important;
  color: var(--lm-text-primary) !important;
  box-shadow: 0 20px 60px var(--lm-shadow-strong), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Muted surfaces (sections, info boxes) - light gray background */
body.hh-light-mode .hh-account-section,
body.hh-light-mode .hh-panel,
body.hh-light-mode .format-desc.open,
body.hh-light-mode .inline-options,
body.hh-light-mode .hh-result-content {
  background: var(--lm-surface-muted) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

/* =================================================================
   FORM ELEMENTS - WHITE WITH GRAY BORDERS
   ================================================================= */
body.hh-light-mode input[type="text"],
body.hh-light-mode input[type="email"],
body.hh-light-mode input[type="number"],
body.hh-light-mode input[type="password"],
body.hh-light-mode textarea,
body.hh-light-mode select,
body.hh-light-mode .hh-input {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

body.hh-light-mode input:focus,
body.hh-light-mode textarea:focus,
body.hh-light-mode select:focus,
body.hh-light-mode .hh-input:focus {
  border-color: var(--lm-accent) !important;
  box-shadow: 0 0 0 3px var(--lm-accent-soft), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  background: var(--lm-surface) !important;
}

body.hh-light-mode input::placeholder,
body.hh-light-mode textarea::placeholder,
body.hh-light-mode .hh-input::placeholder {
  color: var(--lm-text-muted) !important;
  opacity: 0.7 !important;
}

/* =================================================================
   BUTTONS - PURPLE GRADIENTS WITH DARK TEXT
   ================================================================= */
body.hh-light-mode .generate,
body.hh-light-mode .generate-btn,
body.hh-light-mode button[type="submit"].generate,
body.hh-light-mode .hookhero-btn:not(.ghost):not(.hh-google-btn) {
  background: linear-gradient(94deg, var(--lm-accent-light), var(--lm-accent)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px var(--lm-shadow-strong) !important;
  border: none !important;
}

body.hh-light-mode .generate:hover,
body.hh-light-mode .generate-btn:hover,
body.hh-light-mode .hookhero-btn:not(.ghost):not(.hh-google-btn):hover {
  background: linear-gradient(94deg, #c47dff, #9a42e0) !important;
  box-shadow: 0 12px 32px var(--lm-shadow-strong) !important;
}

body.hh-light-mode .hookhero-btn.ghost {
  background: var(--lm-accent-soft) !important;
  border-color: var(--lm-border-strong) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hookhero-btn.ghost:hover {
  background: rgba(182, 109, 255, 0.15) !important;
  border-color: var(--lm-accent) !important;
}

/* Mode buttons */
body.hh-light-mode .mode-btn {
  background: var(--lm-surface-muted) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .mode-btn:hover {
  background: var(--lm-accent-soft) !important;
  border-color: var(--lm-border-strong) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .mode-btn.active {
  background: linear-gradient(90deg, var(--lm-accent-light), var(--lm-accent)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* =================================================================
   SIDEBAR - WHITE WITH GRAY ACCENTS
   ================================================================= */
body.hh-light-mode .slim-sidebar,
body.hh-light-mode #slimSidebar {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  box-shadow: 2px 0 20px var(--lm-shadow) !important;
}

body.hh-light-mode .nav-item {
  background: var(--lm-surface-muted) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .nav-item:hover {
  background: var(--lm-accent-soft) !important;
  border-color: var(--lm-border-strong) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .nav-item.active {
  background: var(--lm-accent-soft) !important;
  border-color: var(--lm-accent) !important;
  color: var(--lm-accent) !important;
}

body.hh-light-mode .nav-item.active .icon {
  stroke: var(--lm-accent) !important;
}

/* =================================================================
   AUTH CONTROLS & HEADER ELEMENTS
   ================================================================= */
body.hh-light-mode #auth-controls,
body.hh-light-mode #hh-user-email,
body.hh-light-mode #hh-user-email-btn {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .floating-bar {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  box-shadow: 0 4px 20px var(--lm-shadow) !important;
}

body.hh-light-mode .ai-btn {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  box-shadow: 0 8px 24px var(--lm-shadow) !important;
}

body.hh-light-mode .ai-btn:hover {
  box-shadow: 0 12px 32px var(--lm-shadow-strong) !important;
}

body.hh-light-mode .mobile-toggle {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
  box-shadow: 0 8px 24px var(--lm-shadow) !important;
}

/* =================================================================
   LINKS - PURPLE WITH DARK HOVER
   ================================================================= */
body.hh-light-mode a {
  color: var(--lm-accent) !important;
}

body.hh-light-mode a:hover {
  color: #6b2aa3 !important;
}

/* =================================================================
   RESULT BOXES - ELEVATED WHITE CARDS
   ================================================================= */
body.hh-light-mode .result .box,
body.hh-light-mode .hh-result-card {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
  box-shadow: 0 8px 32px var(--lm-shadow), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.hh-light-mode .hh-result-content {
  background: var(--lm-surface-muted) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-result-badge {
  background: linear-gradient(180deg, var(--lm-accent-light), var(--lm-accent)) !important;
  color: #ffffff !important;
}

body.hh-light-mode .hh-result-title h2,
body.hh-light-mode .hh-result-sub {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-result-sub {
  color: var(--lm-text-secondary) !important;
}

/* Error/Success boxes */
body.hh-light-mode .box.error {
  border-color: rgba(220, 38, 38, 0.3) !important;
  background: linear-gradient(180deg, #fef2f2, #fee2e2) !important;
  color: #991b1b !important;
}

body.hh-light-mode .box.success {
  border-color: rgba(34, 197, 94, 0.3) !important;
  background: linear-gradient(180deg, #f0fdf4, #dcfce7) !important;
  color: #166534 !important;
}

/* =================================================================
   TOOLS PAGE SPECIFIC
   ================================================================= */
body.hh-light-mode .tool-card {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
  box-shadow: 0 4px 16px var(--lm-shadow) !important;
}

body.hh-light-mode .tool-card:hover {
  border-color: var(--lm-border-strong) !important;
  box-shadow: 0 8px 24px var(--lm-shadow-strong) !important;
}

body.hh-light-mode .tool-card.selected {
  background: var(--lm-accent-soft) !important;
  border-color: var(--lm-accent) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .tool-name,
body.hh-light-mode .tool-desc,
body.hh-light-mode .tool-cost {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .tool-desc {
  color: var(--lm-text-secondary) !important;
}

body.hh-light-mode .tool-cost {
  color: var(--lm-text-muted) !important;
}

body.hh-light-mode #toolsInfo,
body.hh-light-mode #tool_title,
body.hh-light-mode #tool_text {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode #tool_text {
  color: var(--lm-text-secondary) !important;
}

/* =================================================================
   PRICING PAGE SPECIFIC
   ================================================================= */
body.hh-light-mode .pricing-shell {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border-strong) !important;
  box-shadow: 0 20px 60px var(--lm-shadow-strong) !important;
}

body.hh-light-mode .plan-card {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
  box-shadow: 0 4px 20px var(--lm-shadow) !important;
}

body.hh-light-mode .plan-title,
body.hh-light-mode .plan-price {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .plan-features li {
  background: var(--lm-surface-muted) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

/* =================================================================
   VIDEO PAGE SPECIFIC
   ================================================================= */
body.hh-light-mode .card-media {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
}

/* =================================================================
   ABOUT PAGE SPECIFIC
   ================================================================= */
body.hh-light-mode .about-hero {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border-strong) !important;
  box-shadow: 0 12px 40px var(--lm-shadow-strong) !important;
}

/* =================================================================
   GALLERY PAGE SPECIFIC
   ================================================================= */
body.hh-light-mode .gallery-item {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  box-shadow: 0 4px 16px var(--lm-shadow) !important;
}

body.hh-light-mode .gallery-title,
body.hh-light-mode .gallery-subtitle {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .gallery-subtitle {
  color: var(--lm-text-secondary) !important;
}

/* =================================================================
   LOADING & PROGRESS ELEMENTS
   ================================================================= */
body.hh-light-mode .spinner {
  border-color: var(--lm-accent-soft) !important;
  border-top-color: var(--lm-accent) !important;
}

body.hh-light-mode .hh-progress-rail {
  background: var(--lm-accent-soft) !important;
}

body.hh-light-mode .hh-progress-bar {
  background: linear-gradient(90deg, var(--lm-accent), var(--lm-accent-light)) !important;
}

body.hh-light-mode .hh-loader-wrap {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-loader-title {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-loader-sub,
body.hh-light-mode .hh-loader-hint {
  color: var(--lm-text-secondary) !important;
}

body.hh-light-mode .hh-orb {
  background: radial-gradient(circle at 35% 28%, #ffffff 0%, var(--lm-accent-light) 20%, var(--lm-accent) 55%, rgba(0, 0, 0, 0.1)) !important;
  box-shadow: 0 20px 56px var(--lm-shadow-strong) !important;
}

/* =================================================================
   CREDITS & BADGES
   ================================================================= */
body.hh-light-mode #hh-credits,
body.hh-light-mode #hh-credits-label,
body.hh-light-mode #hh-credits-note {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode #hh-credits {
  background: linear-gradient(90deg, var(--lm-accent-light), var(--lm-accent)) !important;
  color: #ffffff !important;
}

body.hh-light-mode #hh-credits-label,
body.hh-light-mode #hh-credits-note {
  color: var(--lm-text-secondary) !important;
}

body.hh-light-mode #hh-user-remaining {
  color: var(--lm-text-secondary) !important;
}

/* =================================================================
   SEPARATORS & DIVIDERS
   ================================================================= */
body.hh-light-mode hr,
body.hh-light-mode .sep,
body.hh-light-mode .hh-form-divider::before,
body.hh-light-mode .hh-form-divider::after {
  border-color: var(--lm-border) !important;
}

/* =================================================================
   ACTION BUTTONS & LINKS
   ================================================================= */
body.hh-light-mode .hh-btn {
  background: var(--lm-surface-muted) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-btn-primary {
  background: linear-gradient(90deg, var(--lm-accent-light), var(--lm-accent)) !important;
  color: #ffffff !important;
  border: none !important;
}

body.hh-light-mode .hh-btn-ghost {
  background: transparent !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-btn-close {
  color: var(--lm-text-muted) !important;
}

body.hh-light-mode .hh-btn-close:hover {
  color: var(--lm-text-primary) !important;
  background: var(--lm-surface-muted) !important;
}

body.hh-light-mode .hh-download {
  background: var(--lm-surface-muted) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-download:hover {
  background: var(--lm-accent-soft) !important;
  border-color: var(--lm-border-strong) !important;
}

/* =================================================================
   MODAL BACKDROPS
   ================================================================= */
body.hh-light-mode .hh-modal-backdrop,
body.hh-light-mode .hh-account-modal-backdrop,
body.hh-light-mode .tools-backdrop,
body.hh-light-mode .mobile-sidebar-backdrop {
  background: rgba(250, 249, 252, 0.85) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
}

/* =================================================================
   COOKIE BANNERS & PROMPTS
   ================================================================= */
body.hh-light-mode .hh-cookie-banner,
body.hh-light-mode .hh-cookie-card,
body.hh-light-mode .hh-cookie-inline {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border-strong) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-cookie-title {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-cookie-copy,
body.hh-light-mode .hh-cookie-inline-text {
  color: var(--lm-text-secondary) !important;
}

body.hh-light-mode .hh-cookie-link {
  color: var(--lm-accent) !important;
}

body.hh-light-mode .hh-cookie-hint {
  color: var(--lm-text-muted) !important;
}

body.hh-light-mode .hh-cookie-btn {
  background: var(--lm-surface-muted) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-cookie-btn.primary {
  background: linear-gradient(94deg, var(--lm-accent-light), var(--lm-accent)) !important;
  color: #ffffff !important;
  border: none !important;
}

/* =================================================================
   OVERRIDE INLINE STYLES WITH DARK COLORS
   ================================================================= */
body.hh-light-mode [style*="background"][style*="rgba(22,12,40"],
body.hh-light-mode [style*="background"][style*="rgba(6,4,10"],
body.hh-light-mode [style*="background"][style*="#07070b"],
body.hh-light-mode [style*="background"][style*="#141218"],
body.hh-light-mode [style*="background"][style*="rgba(26,16,48"],
body.hh-light-mode [style*="background"][style*="rgba(10,6,22"],
body.hh-light-mode [style*="background"][style*="rgba(30,18,48"],
body.hh-light-mode [style*="background"][style*="rgba(8,6,18"] {
  background: var(--lm-surface) !important;
}

body.hh-light-mode [style*="color"][style*="#f1effa"],
body.hh-light-mode [style*="color"][style*="#f3f2f6"],
body.hh-light-mode [style*="color"][style*="rgba(241,239,250"],
body.hh-light-mode [style*="color"][style*="rgba(243,242,246"],
body.hh-light-mode [style*="color"][style*="#e9e9ee"],
body.hh-light-mode [style*="color"][style*="#fff"]:not(.hh-result-badge):not(.generate):not(.generate-btn):not(.hookhero-btn:not(.ghost)):not(.mode-btn.active) {
  color: var(--lm-text-primary) !important;
}

/* =================================================================
   REMOVE TEXT SHADOWS IN LIGHT MODE
   ================================================================= */
body.hh-light-mode * {
  text-shadow: none !important;
}

/* =================================================================
   ASPECT RATIO BUTTONS
   ================================================================= */
body.hh-light-mode .aspect-btn {
  background: var(--lm-surface-muted) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .aspect-btn:hover {
  background: var(--lm-accent-soft) !important;
  border-color: var(--lm-border-strong) !important;
}

body.hh-light-mode .aspect-btn.active {
  background: linear-gradient(90deg, var(--lm-accent-light), var(--lm-accent)) !important;
  color: #ffffff !important;
  border: none !important;
}

/* =================================================================
   THINKING TEXT & LOADING SCREENS
   ================================================================= */
body.hh-light-mode .thinking-text,
body.hh-light-mode .thinking-note {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .thinking-note {
  color: var(--lm-text-secondary) !important;
}

/* =================================================================
   SELECTED TOOL BADGE
   ================================================================= */
body.hh-light-mode .selected-tool-badge {
  background: var(--lm-accent-soft) !important;
  border-color: var(--lm-border-strong) !important;
  color: var(--lm-text-primary) !important;
}

/* =================================================================
   INLINE OPTIONS & FIELDS
   ================================================================= */
body.hh-light-mode .inline-options,
body.hh-light-mode .inline-field label,
body.hh-light-mode .option-item label {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .inline-input,
body.hh-light-mode select.inline-input {
  background: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

/* =================================================================
   GOOGLE BUTTON
   ================================================================= */
body.hh-light-mode .hh-google-btn {
  background: #ffffff !important;
  border-color: var(--lm-border) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-google-btn:hover {
  background: var(--lm-surface-muted) !important;
}

/* =================================================================
   PASSWORD TOGGLE
   ================================================================= */
body.hh-light-mode .toggle-password {
  color: var(--lm-text-muted) !important;
}

body.hh-light-mode .toggle-password:hover {
  color: var(--lm-text-primary) !important;
  background: var(--lm-surface-muted) !important;
}

/* =================================================================
   CLOSE BUTTONS
   ================================================================= */
body.hh-light-mode .hh-close,
body.hh-light-mode .hh-account-close,
body.hh-light-mode .tools-close {
  background: linear-gradient(180deg, var(--lm-accent-light), var(--lm-accent)) !important;
  color: #ffffff !important;
}

body.hh-light-mode .hh-close-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-close-btn:hover {
  background: rgba(0, 0, 0, 0.12) !important;
}

/* =================================================================
   ACCOUNT MODAL SPECIFIC
   ================================================================= */
body.hh-light-mode .hh-account-info-row {
  background: var(--lm-surface-muted) !important;
}

body.hh-light-mode .hh-account-info-label {
  color: var(--lm-text-secondary) !important;
}

body.hh-light-mode .hh-account-info-value {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-theme-toggle {
  background: var(--lm-surface-muted) !important;
}

body.hh-light-mode .hh-theme-toggle:hover {
  background: var(--lm-accent-soft) !important;
}

body.hh-light-mode .hh-theme-toggle-label {
  color: var(--lm-text-primary) !important;
}

body.hh-light-mode .hh-account-link {
  color: var(--lm-accent) !important;
}

body.hh-light-mode .hh-account-link:hover {
  background: var(--lm-accent-soft) !important;
}

body.hh-light-mode .hh-see-all-btn {
  background: linear-gradient(90deg, var(--lm-accent-light), var(--lm-accent)) !important;
  color: #ffffff !important;
}

body.hh-light-mode .hh-account-logout-btn {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.15)) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
}

body.hh-light-mode .hh-account-logout-btn:hover {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.2)) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #b91c1c !important;
}

/* =================================================================
   VIDEO ELEMENTS
   ================================================================= */
body.hh-light-mode #result .box video,
body.hh-light-mode .result .box video {
  background: #000000 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3) !important;
}

/* =================================================================
   SHADOWS - SOFTER FOR LIGHT MODE
   ================================================================= */
body.hh-light-mode {
  --shadow-sm: 0 2px 8px var(--lm-shadow) !important;
  --shadow-md: 0 4px 16px var(--lm-shadow) !important;
  --shadow-lg: 0 8px 32px var(--lm-shadow-strong) !important;
  --shadow-accent: 0 12px 40px var(--lm-shadow-strong) !important;
}