/**
 * Theme System - All color themes with integrated effects
 * Themes are gamified rewards for finding easter eggs
 */

/* ===== BASE VARIABLES (fallback) ===== */
:root {
  --bg-color: #1F282E;
  --bg-secondary: #1a2228;
  --text-primary: #59C99C;
  --text-secondary: #A5A9AB;
  --border-accent: #326B78;
  --border-color: #2a3a42;
  --hover-color: #326B78;
  --shadow-color: #353E4344;
  --link-color: #59C99C;
}

/* ===== GLOBAL THEME FIXES ===== */
/* Ensure background covers full viewport for all themes */
html, body {
  min-height: 100vh;
}

/* Ensure .lists container is transparent */
.lists {
  background: transparent !important;
}

/* Ensure weather banner is transparent */
.weather-banner {
  background: transparent !important;
}


/* ========================================
   DEFAULT THEME (vault-tec)
   Clean terminal teal - always available
   ======================================== */

html.theme-vault-tec,
body.theme-vault-tec {
  --bg-color: #1F282E;
  --bg-secondary: #1a2228;
  --text-primary: #59C99C;
  --text-secondary: #A5A9AB;
  --border-accent: #326B78;
  --border-color: #2a3a42;
  --hover-color: #326B78;
  --shadow-color: #353E4344;
  --link-color: #59C99C;
}


/* ========================================
   CRT THEME
   Classic green terminal with scanlines and phosphor glow
   Emulates vintage CRT monitor aesthetic
   ======================================== */

html.theme-crt,
body.theme-crt {
  --bg-color: #0a0f0a;
  --bg-secondary: #0d140d;
  --text-primary: #33ff33;
  --text-secondary: #22aa22;
  --border-accent: #22cc22;
  --border-color: #1a4a1a;
  --hover-color: #44ff44;
  --shadow-color: #00ff0022;
  --link-color: #33ff33;
}

html.theme-crt,
body.theme-crt {
  background-color: #050805 !important;
}

/* Phosphor glow on all text */
body.theme-crt {
  text-shadow: 0 0 2px #33ff33, 0 0 8px #33ff3366, 0 0 12px #33ff3333;
}

body.theme-crt * {
  text-shadow: 0 0 2px #33ff33, 0 0 8px #33ff3366;
}

/* Enhanced glow on hover */
body.theme-crt a:hover,
body.theme-crt button:hover {
  text-shadow: 0 0 4px #33ff33, 0 0 12px #33ff33aa, 0 0 20px #33ff3366;
}

/* ASCII art phosphor burn-in effect */
body.theme-crt .name {
  text-shadow: 0 0 4px #33ff33, 0 0 15px #33ff33aa, 0 0 25px #33ff3355;
  color: #44ff44 !important;
}

/* Scanlines overlay - refined with RGB sub-pixels */
body.theme-crt::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    /* Main scanlines */
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 3px
    ),
    /* RGB sub-pixel simulation (subtle color fringing) */
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.008),
      rgba(255, 0, 0, 0.008) 1px,
      rgba(0, 255, 0, 0.008) 1px,
      rgba(0, 255, 0, 0.008) 2px,
      rgba(0, 0, 255, 0.008) 2px,
      rgba(0, 0, 255, 0.008) 3px
    );
  pointer-events: none;
  z-index: 9999;
}

/* CRT screen curvature - enhanced edge darkening */
body.theme-crt::after {
  content: '';
  position: fixed;
  top: -2%;
  left: -2%;
  width: 104%;
  height: 104%;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 45%,
    rgba(0, 20, 0, 0.12) 65%,
    rgba(0, 0, 0, 0.35) 85%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
  z-index: 9998;
  /* Rounded corners simulate curved screen edges */
  border-radius: 8% / 4%;
}

/* Screen bezel - outer dark frame */
html.theme-crt {
  background: linear-gradient(135deg, #151515 0%, #080808 50%, #151515 100%);
}

/* CRT screen inner glow */
body.theme-crt {
  box-shadow: inset 0 0 120px rgba(51, 255, 51, 0.03);
}

/* CRT refresh line animation */
@keyframes crt-refresh-line {
  0% { transform: translateY(-100vh); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Additional animated refresh line (add via JS or as element) */
body.theme-crt .main-nav-bar::before {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(51, 255, 51, 0.15),
    rgba(51, 255, 51, 0.25),
    rgba(51, 255, 51, 0.15),
    transparent
  );
  pointer-events: none;
  z-index: 9996;
  animation: crt-refresh-line 12s linear infinite;
}

/* CRT glow on cards */
body.theme-crt .watch,
body.theme-crt .social,
body.theme-crt .dev,
body.theme-crt .linux,
body.theme-crt .other {
  box-shadow: 5px 5px 1px 2px rgba(51, 255, 51, 0.25),
              0 0 15px rgba(51, 255, 51, 0.1),
              inset 0 0 10px rgba(51, 255, 51, 0.05) !important;
  border-color: #22aa22 !important;
}

body.theme-crt .watch:hover,
body.theme-crt .social:hover,
body.theme-crt .dev:hover,
body.theme-crt .linux:hover,
body.theme-crt .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(51, 255, 51, 0.35),
              0 0 25px rgba(51, 255, 51, 0.2),
              inset 0 0 15px rgba(51, 255, 51, 0.1) !important;
  border-color: #33ff33 !important;
}

/* Navigation bar glow */
body.theme-crt .main-nav-bar {
  box-shadow: 0 2px 15px rgba(51, 255, 51, 0.2);
  border-bottom: 1px solid rgba(51, 255, 51, 0.3);
}

/* Buttons - dark background with glowing green text */
body.theme-crt button,
body.theme-crt .btn,
body.theme-crt .nav-user-btn,
body.theme-crt [type="submit"],
body.theme-crt [type="button"] {
  background-color: #0d140d !important;
  color: #33ff33 !important;
  border-color: #22aa22 !important;
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.2),
              inset 0 0 10px rgba(51, 255, 51, 0.05) !important;
}

body.theme-crt button:hover,
body.theme-crt .btn:hover,
body.theme-crt .nav-user-btn:hover,
body.theme-crt [type="submit"]:hover,
body.theme-crt [type="button"]:hover {
  background-color: #1a2a1a !important;
  color: #55ff55 !important;
  border-color: #33ff33 !important;
  box-shadow: 0 0 15px rgba(51, 255, 51, 0.4),
              inset 0 0 15px rgba(51, 255, 51, 0.1) !important;
}

/* Nav user button special handling */
body.theme-crt .nav-user-btn.logged-in {
  background-color: #1a3a1a !important;
  color: #66ff66 !important;
  border-color: #33ff33 !important;
}

body.theme-crt .nav-user-btn.logged-in:hover {
  background-color: #2a4a2a !important;
  color: #88ff88 !important;
}

/* Input fields */
body.theme-crt input,
body.theme-crt textarea {
  box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.1),
              0 0 5px rgba(51, 255, 51, 0.2) !important;
}

body.theme-crt input:focus,
body.theme-crt textarea:focus {
  box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.15),
              0 0 10px rgba(51, 255, 51, 0.3) !important;
}


/* ========================================
   GARY MODE THEME (Unlockable)
   Blood red warning - unlocked after Gary lockdown
   ======================================== */

html.theme-gary-mode,
html.theme-gary-mode body,
body.theme-gary-mode {
  --bg-color: #0a0000;
  --bg-secondary: #120000;
  --text-primary: #ff0000;
  --text-secondary: #cc0000;
  --border-accent: #660000;
  --border-color: #440000;
  --hover-color: #ff3333;
  --shadow-color: #66000044;
  --link-color: #ff6666;
}

/* Force background on all elements */
html.theme-gary-mode {
  background-color: #080000 !important;
}

html.theme-gary-mode body,
body.theme-gary-mode {
  background-color: #080000 !important;
}

/* Apply dark red background to major sections */
body.theme-gary-mode .main-nav-bar,
body.theme-gary-mode .blog-page-header,
body.theme-gary-mode .content-wrapper,
body.theme-gary-mode .blog-posts-container,
body.theme-gary-mode .profile-container,
body.theme-gary-mode .profile-section {
  background-color: #0a0000 !important;
}

/* Cards and containers */
body.theme-gary-mode .watch,
body.theme-gary-mode .social,
body.theme-gary-mode .dev,
body.theme-gary-mode .linux,
body.theme-gary-mode .other,
body.theme-gary-mode .blog-post-preview,
body.theme-gary-mode .server-card {
  background-color: #120000 !important;
}

/* Red glow effect on text */
body.theme-gary-mode * {
  text-shadow: 0 0 3px rgba(255, 0, 0, 0.3);
}

body.theme-gary-mode a:hover,
body.theme-gary-mode button:hover {
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
}

@keyframes garyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.9; }
}

body.theme-gary-mode .name {
  animation: garyPulse 3s ease-in-out infinite;
  color: #ff0000 !important;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

body.theme-gary-mode .watch,
body.theme-gary-mode .social,
body.theme-gary-mode .dev,
body.theme-gary-mode .linux,
body.theme-gary-mode .other {
  box-shadow: 5px 5px 1px 2px rgba(255, 0, 0, 0.3) !important;
  border-color: #660000 !important;
}

body.theme-gary-mode .watch:hover,
body.theme-gary-mode .social:hover,
body.theme-gary-mode .dev:hover,
body.theme-gary-mode .linux:hover,
body.theme-gary-mode .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(255, 0, 0, 0.5) !important;
  border-color: #ff0000 !important;
}

/* Navigation */
body.theme-gary-mode .main-nav-bar {
  border-bottom: 1px solid #660000 !important;
  box-shadow: 0 2px 10px rgba(255, 0, 0, 0.2);
}

/* Buttons - ensure dark background with light text for readability */
body.theme-gary-mode button,
body.theme-gary-mode .btn,
body.theme-gary-mode .nav-user-btn,
body.theme-gary-mode [type="submit"],
body.theme-gary-mode [type="button"] {
  background-color: #1a0000 !important;
  color: #ff6666 !important;
  border-color: #660000 !important;
  text-shadow: none !important;
}

body.theme-gary-mode button:hover,
body.theme-gary-mode .btn:hover,
body.theme-gary-mode .nav-user-btn:hover,
body.theme-gary-mode [type="submit"]:hover,
body.theme-gary-mode [type="button"]:hover {
  background-color: #330000 !important;
  color: #ff9999 !important;
  border-color: #ff0000 !important;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.4) !important;
}

/* Nav user button special handling */
body.theme-gary-mode .nav-user-btn.logged-in {
  background-color: #660000 !important;
  color: #ffcccc !important;
  border-color: #ff0000 !important;
}

body.theme-gary-mode .nav-user-btn.logged-in:hover {
  background-color: #880000 !important;
  color: #ffffff !important;
}

/* Inputs and forms */
body.theme-gary-mode input,
body.theme-gary-mode textarea,
body.theme-gary-mode select {
  background-color: #120000 !important;
  border-color: #660000 !important;
  color: #ff0000 !important;
}

body.theme-gary-mode input:focus,
body.theme-gary-mode textarea:focus {
  border-color: #ff0000 !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3) !important;
}


/* ========================================
   INCLEMENT WEATHER THEME
   Cozy thunderstorm with rain and lightning
   Rain and lightning rendered via Canvas (theme-effects.js)
   ======================================== */

html.theme-inclement,
body.theme-inclement {
  --bg-color: #1a1e24;
  --bg-secondary: #232830;
  --text-primary: #c4d4e0;
  --text-secondary: #8a9bab;
  --border-accent: #4a6278;
  --border-color: #3a4a58;
  --hover-color: #7b9eb8;
  --shadow-color: #00000066;
  --link-color: #9bb8d0;
}

/* Background transparent to show canvas rain effect */
html.theme-inclement {
  background-color: transparent !important;
}

html.theme-inclement body,
body.theme-inclement {
  background: transparent !important;
}

/* Cozy warm text tint */
body.theme-inclement .name {
  color: #d0e0ec !important;
  text-shadow: 0 0 20px rgba(155, 184, 208, 0.3);
}

/* Cozy card styling - warm shadows */
body.theme-inclement .watch,
body.theme-inclement .social,
body.theme-inclement .dev,
body.theme-inclement .linux,
body.theme-inclement .other {
  box-shadow: 5px 5px 1px 2px rgba(0, 0, 0, 0.4),
              0 0 20px rgba(74, 98, 120, 0.15) !important;
  border-color: #4a6278 !important;
  background-color: rgba(35, 40, 48, 0.9) !important;
}

body.theme-inclement .watch:hover,
body.theme-inclement .social:hover,
body.theme-inclement .dev:hover,
body.theme-inclement .linux:hover,
body.theme-inclement .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(0, 0, 0, 0.5),
              0 0 30px rgba(74, 98, 120, 0.25) !important;
  border-color: #7b9eb8 !important;
}

/* Navigation with storm ambiance */
body.theme-inclement .main-nav-bar {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  background-color: rgba(26, 30, 36, 0.95) !important;
}

/* Buttons - cozy storm styling */
body.theme-inclement button,
body.theme-inclement .btn,
body.theme-inclement .nav-user-btn,
body.theme-inclement [type="submit"],
body.theme-inclement [type="button"] {
  background-color: #2a3038 !important;
  color: #c4d4e0 !important;
  border-color: #4a6278 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.theme-inclement button:hover,
body.theme-inclement .btn:hover,
body.theme-inclement .nav-user-btn:hover,
body.theme-inclement [type="submit"]:hover,
body.theme-inclement [type="button"]:hover {
  background-color: #3a4550 !important;
  color: #e0f0ff !important;
  border-color: #7b9eb8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Nav user button special handling */
body.theme-inclement .nav-user-btn.logged-in {
  background-color: #4a6278 !important;
  color: #e8f4ff !important;
  border-color: #7b9eb8 !important;
}

body.theme-inclement .nav-user-btn.logged-in:hover {
  background-color: #5a7288 !important;
  color: #ffffff !important;
}

/* Warm input fields */
body.theme-inclement input,
body.theme-inclement textarea {
  background-color: rgba(35, 40, 48, 0.8) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.theme-inclement input:focus,
body.theme-inclement textarea:focus {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3),
              0 0 10px rgba(155, 184, 208, 0.2) !important;
}

/* Vignette effect for stormy atmosphere */
body.theme-inclement::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9996;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 100%
  );
}


/* ========================================
   LEGACY SUPPORT
   Backwards compatibility with gary-mode-active class
   ======================================== */

html.gary-mode-active-pending {
  background-color: #000000 !important;
}

body.gary-mode-active {
  background-color: #000000 !important;
  color: #ff0000 !important;
  transition: background-color 0.5s ease, color 0.5s ease;
}

body.gary-mode-active * {
  color: #ff0000 !important;
  transition: color 0.5s ease;
}

body.gary-mode-active a {
  color: #ff3333 !important;
  text-shadow: 0 0 5px #ff000066;
  transition: all 0.3s ease;
}

body.gary-mode-active a:hover {
  color: #ff6666 !important;
  text-shadow: 0 0 10px #ff0000;
}

body.gary-mode-active .name {
  color: #ff0000 !important;
  text-shadow: 0 0 10px #ff000066;
  animation: garyGlowPulse 3s ease-in-out infinite,
             garyGlitch 8s ease-in-out infinite;
}

body.gary-mode-active #weatherBanner {
  color: #ff0000 !important;
  text-shadow: 0 0 8px #ff000066;
}

body.gary-mode-active .list_title {
  color: #ff0000 !important;
  text-shadow: 0 0 8px #ff000066;
}

body.gary-mode-active .theme-toggle,
body.gary-mode-active .gary-mode-toggle,
body.gary-mode-active button {
  color: #ff0000 !important;
}

body.gary-mode-active .theme-icon {
  stroke: #ff0000 !important;
}

body.gary-mode-active .date-display {
  color: #ff0000 !important;
  text-shadow: 0 0 8px #ff000066;
}

@keyframes garyGlowPulse {
  0%, 100% { text-shadow: 0 0 10px #ff000066; }
  50% { text-shadow: 0 0 20px #ff0000aa; }
}

body.gary-mode-active .lists > div {
  box-shadow: 0 0 10px #ff000033, 5px 5px 1px 2px var(--shadow-color);
  border-color: #660000 !important;
  transition: box-shadow 0.3s ease;
}

body.gary-mode-active .lists > div:hover {
  box-shadow: 0 0 20px #ff000066, 5px 5px 1px 2px var(--shadow-color);
  border-color: #ff0000 !important;
}

@keyframes garyGlitch {
  0%, 90%, 100% {
    transform: translate(0);
    opacity: 1;
  }
  92% { transform: translate(-2px, 1px); opacity: 0.8; }
  94% { transform: translate(2px, -1px); opacity: 0.9; }
  96% { transform: translate(-1px, -2px); opacity: 0.85; }
  98% { transform: translate(1px, 2px); opacity: 0.95; }
}

body.gary-mode-active a {
  animation: garyGlitch 12s ease-in-out infinite;
  animation-delay: calc(var(--glitch-delay, 0) * 1s);
}

/* ========================================
   DEEP SPACE THEME
   Cosmic starfield with nebula colors
   ======================================== */

html.theme-deep-space,
body.theme-deep-space {
  --bg-color: #0a0a14;
  --bg-secondary: #0f0f1e;
  --text-primary: #e8e8ff;
  --text-secondary: #9090c0;
  --border-accent: #4040a0;
  --border-color: #2a2a50;
  --hover-color: #6060d0;
  --shadow-color: #4040a044;
  --link-color: #b0b0ff;
}

/* Force background uniformly */
html.theme-deep-space {
  background-color: #050510 !important;
}

html.theme-deep-space body,
body.theme-deep-space {
  background: linear-gradient(to bottom, #050510 0%, #0a0a1a 50%, #0f0f24 100%) !important;
  background-attachment: fixed !important;
}

/* Major sections */
body.theme-deep-space .main-nav-bar,
body.theme-deep-space .blog-page-header,
body.theme-deep-space .content-wrapper,
body.theme-deep-space .blog-posts-container,
body.theme-deep-space .profile-container,
body.theme-deep-space .profile-section {
  background-color: #0a0a14 !important;
}

/* Cards and containers */
body.theme-deep-space .watch,
body.theme-deep-space .social,
body.theme-deep-space .dev,
body.theme-deep-space .linux,
body.theme-deep-space .other,
body.theme-deep-space .blog-post-preview,
body.theme-deep-space .server-card {
  box-shadow: 5px 5px 1px 2px rgba(64, 64, 160, 0.3),
              0 0 20px rgba(100, 100, 200, 0.1) !important;
  border-color: #4040a0 !important;
  background-color: #0f0f1e !important;
}

body.theme-deep-space .watch:hover,
body.theme-deep-space .social:hover,
body.theme-deep-space .dev:hover,
body.theme-deep-space .linux:hover,
body.theme-deep-space .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(96, 96, 208, 0.4),
              0 0 30px rgba(140, 140, 255, 0.15) !important;
  border-color: #6060d0 !important;
}

body.theme-deep-space .main-nav-bar {
  background-color: rgba(10, 10, 20, 0.95) !important;
  box-shadow: 0 2px 20px rgba(64, 64, 160, 0.2);
}

body.theme-deep-space button,
body.theme-deep-space .btn,
body.theme-deep-space .nav-user-btn,
body.theme-deep-space [type="submit"],
body.theme-deep-space [type="button"] {
  background-color: #1a1a30 !important;
  color: #c0c0ff !important;
  border-color: #4040a0 !important;
}

body.theme-deep-space button:hover,
body.theme-deep-space .btn:hover,
body.theme-deep-space .nav-user-btn:hover,
body.theme-deep-space [type="submit"]:hover,
body.theme-deep-space [type="button"]:hover {
  background-color: #2a2a50 !important;
  color: #e0e0ff !important;
  border-color: #6060d0 !important;
  box-shadow: 0 0 15px rgba(96, 96, 208, 0.3) !important;
}

body.theme-deep-space .nav-user-btn.logged-in {
  background-color: #3a3a70 !important;
  color: #e8e8ff !important;
}

/* Inputs and forms */
body.theme-deep-space input,
body.theme-deep-space textarea,
body.theme-deep-space select {
  background-color: #0f0f1e !important;
  border-color: #4040a0 !important;
  color: #e8e8ff !important;
}

body.theme-deep-space input:focus,
body.theme-deep-space textarea:focus {
  border-color: #6060d0 !important;
  box-shadow: 0 0 10px rgba(96, 96, 208, 0.3) !important;
}


/* ========================================
   EMBER/CAMPFIRE THEME
   Warm orange glows and floating embers
   ======================================== */

html.theme-ember,
body.theme-ember {
  --bg-color: #1a1008;
  --bg-secondary: #241810;
  --text-primary: #ffc880;
  --text-secondary: #c49060;
  --border-accent: #8a4420;
  --border-color: #5a3018;
  --hover-color: #ff9040;
  --shadow-color: #ff800033;
  --link-color: #ffb060;
}

/* Force background uniformly */
html.theme-ember {
  background-color: #0a0402 !important;
}

html.theme-ember body,
body.theme-ember {
  background: linear-gradient(to top, #1a0a04 0%, #140804 50%, #0a0402 100%) !important;
  background-attachment: fixed !important;
}

/* Major sections */
body.theme-ember .main-nav-bar,
body.theme-ember .blog-page-header,
body.theme-ember .content-wrapper,
body.theme-ember .blog-posts-container,
body.theme-ember .profile-container,
body.theme-ember .profile-section {
  background-color: #1a1008 !important;
}

body.theme-ember .name {
  color: #ffd0a0 !important;
  text-shadow: 0 0 15px rgba(255, 150, 50, 0.4);
}

/* Cards and containers */
body.theme-ember .watch,
body.theme-ember .social,
body.theme-ember .dev,
body.theme-ember .linux,
body.theme-ember .other,
body.theme-ember .blog-post-preview,
body.theme-ember .server-card {
  box-shadow: 5px 5px 1px 2px rgba(138, 68, 32, 0.4),
              0 0 20px rgba(255, 128, 0, 0.1) !important;
  border-color: #8a4420 !important;
  background-color: #241810 !important;
}

body.theme-ember .watch:hover,
body.theme-ember .social:hover,
body.theme-ember .dev:hover,
body.theme-ember .linux:hover,
body.theme-ember .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(255, 144, 64, 0.4),
              0 0 30px rgba(255, 150, 50, 0.2) !important;
  border-color: #ff9040 !important;
}

body.theme-ember .main-nav-bar {
  background-color: rgba(26, 16, 8, 0.95) !important;
  box-shadow: 0 2px 20px rgba(255, 128, 0, 0.15);
}

body.theme-ember button,
body.theme-ember .btn,
body.theme-ember .nav-user-btn,
body.theme-ember [type="submit"],
body.theme-ember [type="button"] {
  background-color: #2a1810 !important;
  color: #ffc880 !important;
  border-color: #8a4420 !important;
}

body.theme-ember button:hover,
body.theme-ember .btn:hover,
body.theme-ember .nav-user-btn:hover,
body.theme-ember [type="submit"]:hover,
body.theme-ember [type="button"]:hover {
  background-color: #3a2818 !important;
  color: #ffe0b0 !important;
  border-color: #ff9040 !important;
  box-shadow: 0 0 15px rgba(255, 144, 64, 0.3) !important;
}

body.theme-ember .nav-user-btn.logged-in {
  background-color: #5a3820 !important;
  color: #ffd8a0 !important;
}

/* Inputs and forms */
body.theme-ember input,
body.theme-ember textarea,
body.theme-ember select {
  background-color: #241810 !important;
  border-color: #8a4420 !important;
  color: #ffc880 !important;
}

body.theme-ember input:focus,
body.theme-ember textarea:focus {
  border-color: #ff9040 !important;
  box-shadow: 0 0 10px rgba(255, 144, 64, 0.3) !important;
}


/* ========================================
   UNDERWATER/ABYSS THEME
   Deep ocean with bioluminescence
   ======================================== */

html.theme-underwater,
body.theme-underwater {
  --bg-color: #081018;
  --bg-secondary: #0c1620;
  --text-primary: #4aeadc;
  --text-secondary: #2a9a90;
  --border-accent: #1a6a70;
  --border-color: #104040;
  --hover-color: #6affec;
  --shadow-color: #00a0a044;
  --link-color: #4aeadc;
}

/* Force background uniformly */
html.theme-underwater {
  background-color: #020810 !important;
}

html.theme-underwater body,
body.theme-underwater {
  background: linear-gradient(to bottom, #020810 0%, #041018 40%, #081420 100%) !important;
  background-attachment: fixed !important;
}

/* Major sections */
body.theme-underwater .main-nav-bar,
body.theme-underwater .blog-page-header,
body.theme-underwater .content-wrapper,
body.theme-underwater .blog-posts-container,
body.theme-underwater .profile-container,
body.theme-underwater .profile-section {
  background-color: #081018 !important;
}

body.theme-underwater .name {
  color: #5af0e0 !important;
  text-shadow: 0 0 20px rgba(74, 234, 220, 0.4);
}

body.theme-underwater * {
  text-shadow: 0 0 3px rgba(74, 234, 220, 0.2);
}

/* Cards and containers */
body.theme-underwater .watch,
body.theme-underwater .social,
body.theme-underwater .dev,
body.theme-underwater .linux,
body.theme-underwater .other,
body.theme-underwater .blog-post-preview,
body.theme-underwater .server-card {
  box-shadow: 5px 5px 1px 2px rgba(26, 106, 112, 0.4),
              0 0 25px rgba(74, 234, 220, 0.08) !important;
  border-color: #1a6a70 !important;
  background-color: #0c1620 !important;
}

body.theme-underwater .watch:hover,
body.theme-underwater .social:hover,
body.theme-underwater .dev:hover,
body.theme-underwater .linux:hover,
body.theme-underwater .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(74, 234, 220, 0.3),
              0 0 35px rgba(74, 234, 220, 0.15) !important;
  border-color: #4aeadc !important;
}

body.theme-underwater .main-nav-bar {
  background-color: rgba(8, 16, 24, 0.95) !important;
  box-shadow: 0 2px 25px rgba(74, 234, 220, 0.1);
}

body.theme-underwater button,
body.theme-underwater .btn,
body.theme-underwater .nav-user-btn,
body.theme-underwater [type="submit"],
body.theme-underwater [type="button"] {
  background-color: #102028 !important;
  color: #4aeadc !important;
  border-color: #1a6a70 !important;
}

body.theme-underwater button:hover,
body.theme-underwater .btn:hover,
body.theme-underwater .nav-user-btn:hover,
body.theme-underwater [type="submit"]:hover,
body.theme-underwater [type="button"]:hover {
  background-color: #183038 !important;
  color: #7affec !important;
  border-color: #4aeadc !important;
  box-shadow: 0 0 15px rgba(74, 234, 220, 0.3) !important;
}

body.theme-underwater .nav-user-btn.logged-in {
  background-color: #1a5050 !important;
  color: #6affec !important;
}

/* Inputs and forms */
body.theme-underwater input,
body.theme-underwater textarea,
body.theme-underwater select {
  background-color: #0c1620 !important;
  border-color: #1a6a70 !important;
  color: #4aeadc !important;
}

body.theme-underwater input:focus,
body.theme-underwater textarea:focus {
  border-color: #4aeadc !important;
  box-shadow: 0 0 10px rgba(74, 234, 220, 0.3) !important;
}


/* ========================================
   SYNTHWAVE THEME
   Neon pink/cyan retro-futurism
   ======================================== */

html.theme-synthwave,
body.theme-synthwave {
  --bg-color: #1a0a2e;
  --bg-secondary: #240e3e;
  --text-primary: #ff2a6d;
  --text-secondary: #05d9e8;
  --border-accent: #d300c5;
  --border-color: #5a1a6e;
  --hover-color: #ff6b9d;
  --shadow-color: #ff2a6d44;
  --link-color: #05d9e8;
}

/* Background transparent to show canvas effect */
html.theme-synthwave {
  background-color: transparent !important;
}

html.theme-synthwave body,
body.theme-synthwave {
  background: transparent !important;
}

/* Major sections */
body.theme-synthwave .main-nav-bar,
body.theme-synthwave .blog-page-header,
body.theme-synthwave .content-wrapper,
body.theme-synthwave .blog-posts-container,
body.theme-synthwave .profile-container,
body.theme-synthwave .profile-section {
  background-color: #1a0a2e !important;
}

body.theme-synthwave .name {
  color: #ff2a6d !important;
  text-shadow: 0 0 20px rgba(255, 42, 109, 0.6), 0 0 40px rgba(255, 42, 109, 0.3);
}

/* Cards and containers */
body.theme-synthwave .watch,
body.theme-synthwave .social,
body.theme-synthwave .dev,
body.theme-synthwave .linux,
body.theme-synthwave .other,
body.theme-synthwave .blog-post-preview,
body.theme-synthwave .server-card {
  box-shadow: 5px 5px 1px 2px rgba(211, 0, 197, 0.4),
              0 0 20px rgba(255, 42, 109, 0.15),
              0 0 40px rgba(5, 217, 232, 0.08) !important;
  border-color: #d300c5 !important;
  background-color: #240e3e !important;
}

body.theme-synthwave .watch:hover,
body.theme-synthwave .social:hover,
body.theme-synthwave .dev:hover,
body.theme-synthwave .linux:hover,
body.theme-synthwave .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(255, 42, 109, 0.5),
              0 0 30px rgba(255, 42, 109, 0.25),
              0 0 50px rgba(5, 217, 232, 0.15) !important;
  border-color: #ff2a6d !important;
}

body.theme-synthwave .main-nav-bar {
  background-color: rgba(26, 10, 46, 0.95) !important;
  box-shadow: 0 2px 25px rgba(255, 42, 109, 0.2);
  border-bottom: 1px solid rgba(211, 0, 197, 0.3) !important;
}

body.theme-synthwave button,
body.theme-synthwave .btn,
body.theme-synthwave .nav-user-btn,
body.theme-synthwave [type="submit"],
body.theme-synthwave [type="button"] {
  background-color: #2a0e3e !important;
  color: #ff2a6d !important;
  border-color: #d300c5 !important;
}

body.theme-synthwave button:hover,
body.theme-synthwave .btn:hover,
body.theme-synthwave .nav-user-btn:hover,
body.theme-synthwave [type="submit"]:hover,
body.theme-synthwave [type="button"]:hover {
  background-color: #3a1a50 !important;
  color: #ff6b9d !important;
  border-color: #ff2a6d !important;
  box-shadow: 0 0 20px rgba(255, 42, 109, 0.4),
              0 0 40px rgba(5, 217, 232, 0.2) !important;
}

body.theme-synthwave .nav-user-btn.logged-in {
  background-color: #5a1a6e !important;
  color: #05d9e8 !important;
  border-color: #ff2a6d !important;
}

/* Inputs and forms */
body.theme-synthwave input,
body.theme-synthwave textarea,
body.theme-synthwave select {
  background-color: #240e3e !important;
  border-color: #d300c5 !important;
  color: #ff2a6d !important;
}

body.theme-synthwave input:focus,
body.theme-synthwave textarea:focus {
  border-color: #ff2a6d !important;
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.4) !important;
}


/* ========================================
   AUTUMN THEME
   Warm oranges and browns with falling leaves
   ======================================== */

html.theme-autumn,
body.theme-autumn {
  --bg-color: #1a1410;
  --bg-secondary: #241c16;
  --text-primary: #d4a050;
  --text-secondary: #a87840;
  --border-accent: #8a5030;
  --border-color: #5a3820;
  --hover-color: #e8b060;
  --shadow-color: #8a503044;
  --link-color: #d4a050;
}

/* Force background uniformly */
html.theme-autumn {
  background-color: #140e08 !important;
}

html.theme-autumn body,
body.theme-autumn {
  background: linear-gradient(to bottom, #140e08 0%, #1a1410 50%, #1e1814 100%) !important;
  background-attachment: fixed !important;
}

/* Major sections */
body.theme-autumn .main-nav-bar,
body.theme-autumn .blog-page-header,
body.theme-autumn .content-wrapper,
body.theme-autumn .blog-posts-container,
body.theme-autumn .profile-container,
body.theme-autumn .profile-section {
  background-color: #1a1410 !important;
}

body.theme-autumn .name {
  color: #e8b868 !important;
  text-shadow: 0 0 15px rgba(212, 160, 80, 0.3);
}

/* Cards and containers */
body.theme-autumn .watch,
body.theme-autumn .social,
body.theme-autumn .dev,
body.theme-autumn .linux,
body.theme-autumn .other,
body.theme-autumn .blog-post-preview,
body.theme-autumn .server-card {
  box-shadow: 5px 5px 1px 2px rgba(138, 80, 48, 0.4),
              0 0 15px rgba(212, 160, 80, 0.08) !important;
  border-color: #8a5030 !important;
  background-color: #241c16 !important;
}

body.theme-autumn .watch:hover,
body.theme-autumn .social:hover,
body.theme-autumn .dev:hover,
body.theme-autumn .linux:hover,
body.theme-autumn .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(232, 176, 96, 0.4),
              0 0 25px rgba(212, 160, 80, 0.15) !important;
  border-color: #e8b060 !important;
}

body.theme-autumn .main-nav-bar {
  background-color: rgba(26, 20, 16, 0.95) !important;
  box-shadow: 0 2px 15px rgba(138, 80, 48, 0.2);
}

body.theme-autumn button,
body.theme-autumn .btn,
body.theme-autumn .nav-user-btn,
body.theme-autumn [type="submit"],
body.theme-autumn [type="button"] {
  background-color: #2a2018 !important;
  color: #d4a050 !important;
  border-color: #8a5030 !important;
}

body.theme-autumn button:hover,
body.theme-autumn .btn:hover,
body.theme-autumn .nav-user-btn:hover,
body.theme-autumn [type="submit"]:hover,
body.theme-autumn [type="button"]:hover {
  background-color: #3a2820 !important;
  color: #f0c070 !important;
  border-color: #e8b060 !important;
  box-shadow: 0 0 15px rgba(232, 176, 96, 0.3) !important;
}

body.theme-autumn .nav-user-btn.logged-in {
  background-color: #5a4030 !important;
  color: #e8c080 !important;
}

/* Inputs and forms */
body.theme-autumn input,
body.theme-autumn textarea,
body.theme-autumn select {
  background-color: #241c16 !important;
  border-color: #8a5030 !important;
  color: #d4a050 !important;
}

body.theme-autumn input:focus,
body.theme-autumn textarea:focus {
  border-color: #e8b060 !important;
  box-shadow: 0 0 10px rgba(232, 176, 96, 0.3) !important;
}


/* ========================================
   SAKURA (CHERRY BLOSSOM) THEME
   Soft pink with delicate petals
   ======================================== */

html.theme-sakura,
body.theme-sakura {
  --bg-color: #1a1418;
  --bg-secondary: #241c22;
  --text-primary: #ffb7c5;
  --text-secondary: #c08090;
  --border-accent: #a06070;
  --border-color: #604050;
  --hover-color: #ffd0dc;
  --shadow-color: #a0607044;
  --link-color: #ffb7c5;
}

/* Force background uniformly */
html.theme-sakura {
  background-color: #14101a !important;
}

html.theme-sakura body,
body.theme-sakura {
  background: linear-gradient(to bottom, #14101a 0%, #1a1418 50%, #1e181e 100%) !important;
  background-attachment: fixed !important;
}

/* Major sections */
body.theme-sakura .main-nav-bar,
body.theme-sakura .blog-page-header,
body.theme-sakura .content-wrapper,
body.theme-sakura .blog-posts-container,
body.theme-sakura .profile-container,
body.theme-sakura .profile-section {
  background-color: #1a1418 !important;
}

body.theme-sakura .name {
  color: #ffc8d4 !important;
  text-shadow: 0 0 20px rgba(255, 183, 197, 0.4);
}

/* Cards and containers */
body.theme-sakura .watch,
body.theme-sakura .social,
body.theme-sakura .dev,
body.theme-sakura .linux,
body.theme-sakura .other,
body.theme-sakura .blog-post-preview,
body.theme-sakura .server-card {
  box-shadow: 5px 5px 1px 2px rgba(160, 96, 112, 0.4),
              0 0 20px rgba(255, 183, 197, 0.08) !important;
  border-color: #a06070 !important;
  background-color: #241c22 !important;
}

body.theme-sakura .watch:hover,
body.theme-sakura .social:hover,
body.theme-sakura .dev:hover,
body.theme-sakura .linux:hover,
body.theme-sakura .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(255, 183, 197, 0.4),
              0 0 30px rgba(255, 183, 197, 0.15) !important;
  border-color: #ffb7c5 !important;
}

body.theme-sakura .main-nav-bar {
  background-color: rgba(26, 20, 24, 0.95) !important;
  box-shadow: 0 2px 20px rgba(160, 96, 112, 0.2);
}

body.theme-sakura button,
body.theme-sakura .btn,
body.theme-sakura .nav-user-btn,
body.theme-sakura [type="submit"],
body.theme-sakura [type="button"] {
  background-color: #2a2028 !important;
  color: #ffb7c5 !important;
  border-color: #a06070 !important;
}

body.theme-sakura button:hover,
body.theme-sakura .btn:hover,
body.theme-sakura .nav-user-btn:hover,
body.theme-sakura [type="submit"]:hover,
body.theme-sakura [type="button"]:hover {
  background-color: #3a2838 !important;
  color: #ffd0dc !important;
  border-color: #ffb7c5 !important;
  box-shadow: 0 0 20px rgba(255, 183, 197, 0.3) !important;
}

body.theme-sakura .nav-user-btn.logged-in {
  background-color: #6a4858 !important;
  color: #ffd0dc !important;
}

/* Inputs and forms */
body.theme-sakura input,
body.theme-sakura textarea,
body.theme-sakura select {
  background-color: #241c22 !important;
  border-color: #a06070 !important;
  color: #ffb7c5 !important;
}

body.theme-sakura input:focus,
body.theme-sakura textarea:focus {
  border-color: #ffb7c5 !important;
  box-shadow: 0 0 10px rgba(255, 183, 197, 0.3) !important;
}


/* ========================================
   CHRISTMAS THEME
   Frosted night with warm holiday glow
   ======================================== */

html.theme-christmas,
body.theme-christmas {
  --bg-color: #0e1b2a;
  --bg-secondary: #122437;
  --text-primary: #d7f4ff;
  --text-secondary: #9bc3d6;
  --border-accent: #5cc1a0;
  --border-color: #2b4a66;
  --hover-color: #f5fff9;
  --shadow-color: #5cc1a044;
  --link-color: #c9f5e5;
}

html.theme-christmas {
  background-color: #0b1622 !important;
}

html.theme-christmas body,
body.theme-christmas {
  background: linear-gradient(to bottom, #0b1622 0%, #0e1b2a 55%, #102033 100%) !important;
  background-attachment: fixed !important;
}

body.theme-christmas .main-nav-bar,
body.theme-christmas .blog-page-header,
body.theme-christmas .content-wrapper,
body.theme-christmas .blog-posts-container,
body.theme-christmas .profile-container,
body.theme-christmas .profile-section {
  background-color: #0f1f2f !important;
}

body.theme-christmas .name {
  color: #e6fbff !important;
  text-shadow: 0 0 18px rgba(214, 244, 255, 0.35);
}

body.theme-christmas .watch,
body.theme-christmas .social,
body.theme-christmas .dev,
body.theme-christmas .linux,
body.theme-christmas .other,
body.theme-christmas .blog-post-preview,
body.theme-christmas .server-card {
  box-shadow: 5px 5px 1px 2px rgba(44, 86, 116, 0.45),
              0 0 22px rgba(92, 193, 160, 0.12) !important;
  border-color: #2b4a66 !important;
  background-color: #122437 !important;
}

body.theme-christmas .watch:hover,
body.theme-christmas .social:hover,
body.theme-christmas .dev:hover,
body.theme-christmas .linux:hover,
body.theme-christmas .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(214, 244, 255, 0.35),
              0 0 30px rgba(92, 193, 160, 0.2) !important;
  border-color: #5cc1a0 !important;
}

body.theme-christmas .main-nav-bar {
  background-color: rgba(14, 27, 42, 0.95) !important;
  box-shadow: 0 2px 20px rgba(92, 193, 160, 0.2);
  position: relative;
  overflow: visible;
}

body.theme-christmas .main-nav-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  background: linear-gradient(to right, rgba(92, 193, 160, 0.6), rgba(214, 244, 255, 0.4), rgba(92, 193, 160, 0.6));
  opacity: 0.6;
  pointer-events: none;
}

body.theme-christmas .main-nav-bar::after {
  content: '';
  position: absolute;
  left: -20px;
  right: -20px;
  top: 8px;
  height: 18px;
  background-image:
    radial-gradient(circle at 8px 8px, #ff6b6b 0 4px, transparent 5px),
    radial-gradient(circle at 28px 8px, #ffd86b 0 4px, transparent 5px),
    radial-gradient(circle at 48px 8px, #7cffb2 0 4px, transparent 5px),
    radial-gradient(circle at 68px 8px, #77b8ff 0 4px, transparent 5px);
  background-size: 80px 18px;
  background-repeat: repeat;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
  animation: christmasLightsTwinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes christmasLightsTwinkle {
  0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)); }
  50% { opacity: 0.55; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); }
}

body.theme-christmas button,
body.theme-christmas .btn,
body.theme-christmas .nav-user-btn,
body.theme-christmas [type="submit"],
body.theme-christmas [type="button"] {
  background-color: #122a3f !important;
  color: #d7f4ff !important;
  border-color: #2b4a66 !important;
}

body.theme-christmas button:hover,
body.theme-christmas .btn:hover,
body.theme-christmas .nav-user-btn:hover,
body.theme-christmas [type="submit"]:hover,
body.theme-christmas [type="button"]:hover {
  background-color: #193652 !important;
  color: #f5fff9 !important;
  border-color: #5cc1a0 !important;
  box-shadow: 0 0 20px rgba(92, 193, 160, 0.3) !important;
}

body.theme-christmas .nav-user-btn.logged-in {
  background-color: #1b4254 !important;
  color: #e6fbff !important;
}

body.theme-christmas input,
body.theme-christmas textarea,
body.theme-christmas select {
  background-color: #122437 !important;
  border-color: #2b4a66 !important;
  color: #d7f4ff !important;
}

body.theme-christmas input:focus,
body.theme-christmas textarea:focus {
  border-color: #5cc1a0 !important;
  box-shadow: 0 0 10px rgba(92, 193, 160, 0.35) !important;
}


/* ========================================
   HAUNTED THEME
   Eerie green with fog and shadows
   ======================================== */

html.theme-haunted,
body.theme-haunted {
  --bg-color: #0a100a;
  --bg-secondary: #10180e;
  --text-primary: #4a8a4a;
  --text-secondary: #2a6a2a;
  --border-accent: #305030;
  --border-color: #1a3018;
  --hover-color: #5aaa5a;
  --shadow-color: #00400044;
  --link-color: #5a9a5a;
}

/* Force background uniformly */
html.theme-haunted {
  background-color: #040804 !important;
}

html.theme-haunted body,
body.theme-haunted {
  background: linear-gradient(to bottom, #040804 0%, #0a100a 50%, #0e1610 100%) !important;
  background-attachment: fixed !important;
}

/* Major sections */
body.theme-haunted .main-nav-bar,
body.theme-haunted .blog-page-header,
body.theme-haunted .content-wrapper,
body.theme-haunted .blog-posts-container,
body.theme-haunted .profile-container,
body.theme-haunted .profile-section {
  background-color: #0a100a !important;
}

body.theme-haunted .name {
  color: #5a9a5a !important;
  text-shadow: 0 0 15px rgba(74, 138, 74, 0.4);
}

body.theme-haunted * {
  text-shadow: 0 0 2px rgba(74, 138, 74, 0.15);
}

/* Cards and containers */
body.theme-haunted .watch,
body.theme-haunted .social,
body.theme-haunted .dev,
body.theme-haunted .linux,
body.theme-haunted .other,
body.theme-haunted .blog-post-preview,
body.theme-haunted .server-card {
  box-shadow: 5px 5px 1px 2px rgba(48, 80, 48, 0.4),
              0 0 25px rgba(74, 138, 74, 0.08) !important;
  border-color: #305030 !important;
  background-color: #10180e !important;
}

body.theme-haunted .watch:hover,
body.theme-haunted .social:hover,
body.theme-haunted .dev:hover,
body.theme-haunted .linux:hover,
body.theme-haunted .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(90, 170, 90, 0.4),
              0 0 35px rgba(74, 138, 74, 0.15) !important;
  border-color: #5aaa5a !important;
}

body.theme-haunted .main-nav-bar {
  background-color: rgba(10, 16, 10, 0.95) !important;
  box-shadow: 0 2px 20px rgba(74, 138, 74, 0.15);
}

body.theme-haunted button,
body.theme-haunted .btn,
body.theme-haunted .nav-user-btn,
body.theme-haunted [type="submit"],
body.theme-haunted [type="button"] {
  background-color: #141c12 !important;
  color: #4a8a4a !important;
  border-color: #305030 !important;
}

body.theme-haunted button:hover,
body.theme-haunted .btn:hover,
body.theme-haunted .nav-user-btn:hover,
body.theme-haunted [type="submit"]:hover,
body.theme-haunted [type="button"]:hover {
  background-color: #1c281a !important;
  color: #6aba6a !important;
  border-color: #5aaa5a !important;
  box-shadow: 0 0 15px rgba(90, 170, 90, 0.3) !important;
}

body.theme-haunted .nav-user-btn.logged-in {
  background-color: #2a4028 !important;
  color: #6aba6a !important;
}

/* Inputs and forms */
body.theme-haunted input,
body.theme-haunted textarea,
body.theme-haunted select {
  background-color: #10180e !important;
  border-color: #305030 !important;
  color: #4a8a4a !important;
}

body.theme-haunted input:focus,
body.theme-haunted textarea:focus {
  border-color: #5aaa5a !important;
  box-shadow: 0 0 10px rgba(90, 170, 90, 0.3) !important;
}


/* ========================================
   DESERT THEME
   Sandy oranges with heat shimmer
   ======================================== */

html.theme-desert,
body.theme-desert {
  --bg-color: #1a1610;
  --bg-secondary: #242018;
  --text-primary: #e8d8c4;
  --text-secondary: #c4a080;
  --border-accent: #a08060;
  --border-color: #6a5040;
  --hover-color: #f0e0d0;
  --shadow-color: #a0806044;
  --link-color: #d4c0a0;
}

/* Force background uniformly */
html.theme-desert {
  background-color: #1a1408 !important;
}

html.theme-desert body,
body.theme-desert {
  background: linear-gradient(to bottom, #1a1408 0%, #1a1610 50%, #1e1a14 100%) !important;
  background-attachment: fixed !important;
}

/* Major sections */
body.theme-desert .main-nav-bar,
body.theme-desert .blog-page-header,
body.theme-desert .content-wrapper,
body.theme-desert .blog-posts-container,
body.theme-desert .profile-container,
body.theme-desert .profile-section {
  background-color: #1a1610 !important;
}

body.theme-desert .name {
  color: #f0e0cc !important;
  text-shadow: 0 0 15px rgba(232, 216, 196, 0.3);
}

/* Cards and containers */
body.theme-desert .watch,
body.theme-desert .social,
body.theme-desert .dev,
body.theme-desert .linux,
body.theme-desert .other,
body.theme-desert .blog-post-preview,
body.theme-desert .server-card {
  box-shadow: 5px 5px 1px 2px rgba(160, 128, 96, 0.4),
              0 0 15px rgba(232, 216, 196, 0.08) !important;
  border-color: #a08060 !important;
  background-color: #242018 !important;
}

body.theme-desert .watch:hover,
body.theme-desert .social:hover,
body.theme-desert .dev:hover,
body.theme-desert .linux:hover,
body.theme-desert .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(240, 224, 208, 0.35),
              0 0 25px rgba(232, 216, 196, 0.15) !important;
  border-color: #f0e0d0 !important;
}

body.theme-desert .main-nav-bar {
  background-color: rgba(26, 22, 16, 0.95) !important;
  box-shadow: 0 2px 15px rgba(160, 128, 96, 0.2);
}

body.theme-desert button,
body.theme-desert .btn,
body.theme-desert .nav-user-btn,
body.theme-desert [type="submit"],
body.theme-desert [type="button"] {
  background-color: #2a2418 !important;
  color: #e8d8c4 !important;
  border-color: #a08060 !important;
}

body.theme-desert button:hover,
body.theme-desert .btn:hover,
body.theme-desert .nav-user-btn:hover,
body.theme-desert [type="submit"]:hover,
body.theme-desert [type="button"]:hover {
  background-color: #3a3020 !important;
  color: #fff0e0 !important;
  border-color: #f0e0d0 !important;
  box-shadow: 0 0 15px rgba(240, 224, 208, 0.25) !important;
}

body.theme-desert .nav-user-btn.logged-in {
  background-color: #5a4830 !important;
  color: #f0e0d0 !important;
}

/* Inputs and forms */
body.theme-desert input,
body.theme-desert textarea,
body.theme-desert select {
  background-color: #242018 !important;
  border-color: #a08060 !important;
  color: #e8d8c4 !important;
}

body.theme-desert input:focus,
body.theme-desert textarea:focus {
  border-color: #f0e0d0 !important;
  box-shadow: 0 0 10px rgba(240, 224, 208, 0.25) !important;
}


/* ========================================
   FOREST THEME
   Deep greens with dappled light
   ======================================== */

html.theme-forest,
body.theme-forest {
  --bg-color: #0c140c;
  --bg-secondary: #121c12;
  --text-primary: #a0d080;
  --text-secondary: #70a050;
  --border-accent: #4a7040;
  --border-color: #2a4a28;
  --hover-color: #b0e090;
  --shadow-color: #2a4a2844;
  --link-color: #90c070;
}

/* Force background uniformly */
html.theme-forest {
  background-color: #080c08 !important;
}

html.theme-forest body,
body.theme-forest {
  background: linear-gradient(to bottom, #080c08 0%, #0c140c 50%, #101810 100%) !important;
  background-attachment: fixed !important;
}

/* Major sections */
body.theme-forest .main-nav-bar,
body.theme-forest .blog-page-header,
body.theme-forest .content-wrapper,
body.theme-forest .blog-posts-container,
body.theme-forest .profile-container,
body.theme-forest .profile-section {
  background-color: #0c140c !important;
}

body.theme-forest .name {
  color: #b0e090 !important;
  text-shadow: 0 0 15px rgba(160, 208, 128, 0.3);
}

/* Cards and containers */
body.theme-forest .watch,
body.theme-forest .social,
body.theme-forest .dev,
body.theme-forest .linux,
body.theme-forest .other,
body.theme-forest .blog-post-preview,
body.theme-forest .server-card {
  box-shadow: 5px 5px 1px 2px rgba(74, 112, 64, 0.4),
              0 0 20px rgba(160, 208, 128, 0.08) !important;
  border-color: #4a7040 !important;
  background-color: #121c12 !important;
}

body.theme-forest .watch:hover,
body.theme-forest .social:hover,
body.theme-forest .dev:hover,
body.theme-forest .linux:hover,
body.theme-forest .other:hover {
  box-shadow: 7px 7px 2px 3px rgba(176, 224, 144, 0.35),
              0 0 30px rgba(160, 208, 128, 0.15) !important;
  border-color: #b0e090 !important;
}

body.theme-forest .main-nav-bar {
  background-color: rgba(12, 20, 12, 0.95) !important;
  box-shadow: 0 2px 20px rgba(74, 112, 64, 0.2);
}

body.theme-forest button,
body.theme-forest .btn,
body.theme-forest .nav-user-btn,
body.theme-forest [type="submit"],
body.theme-forest [type="button"] {
  background-color: #182018 !important;
  color: #a0d080 !important;
  border-color: #4a7040 !important;
}

body.theme-forest button:hover,
body.theme-forest .btn:hover,
body.theme-forest .nav-user-btn:hover,
body.theme-forest [type="submit"]:hover,
body.theme-forest [type="button"]:hover {
  background-color: #203020 !important;
  color: #c0f0a0 !important;
  border-color: #b0e090 !important;
  box-shadow: 0 0 15px rgba(176, 224, 144, 0.25) !important;
}

body.theme-forest .nav-user-btn.logged-in {
  background-color: #2a4a28 !important;
  color: #b0e090 !important;
}

/* Inputs and forms */
body.theme-forest input,
body.theme-forest textarea,
body.theme-forest select {
  background-color: #121c12 !important;
  border-color: #4a7040 !important;
  color: #a0d080 !important;
}

body.theme-forest input:focus,
body.theme-forest textarea:focus {
  border-color: #b0e090 !important;
  box-shadow: 0 0 10px rgba(176, 224, 144, 0.25) !important;
}


/* ========================================
   WARHAMMER 40K / IMPERIUM OF MAN THEME
   Grimdark Gothic of the 41st Millennium
   Unlocked by completing Guess the Primarch
   ======================================== */

html.theme-warhammer,
body.theme-warhammer {
  --bg-color: #1a0a0a;
  --bg-secondary: #2a1515;
  --text-primary: #d4af37;
  --text-secondary: #c9a227;
  --border-accent: #8b0000;
  --border-color: #4a2020;
  --hover-color: #f5f0e1;
  --shadow-color: #8b000044;
  --link-color: #d4af37;
}

/* Deep grimdark background */
html.theme-warhammer {
  background-color: #0d0505 !important;
}

html.theme-warhammer body,
body.theme-warhammer {
  background: linear-gradient(
    180deg,
    #0d0505 0%,
    #1a0a0a 30%,
    #1a0a0a 70%,
    #0d0505 100%
  ) !important;
  background-attachment: fixed !important;
}

/* Major sections - dark burgundy */
body.theme-warhammer .main-nav-bar,
body.theme-warhammer .blog-page-header,
body.theme-warhammer .content-wrapper,
body.theme-warhammer .blog-posts-container,
body.theme-warhammer .profile-container,
body.theme-warhammer .profile-section {
  background-color: #1a0a0a !important;
}

/* Imperial gold text glow */
body.theme-warhammer .name {
  color: #d4af37 !important;
  text-shadow:
    0 0 10px rgba(212, 175, 55, 0.6),
    0 0 20px rgba(212, 175, 55, 0.3),
    0 0 40px rgba(139, 0, 0, 0.2);
  letter-spacing: 2px;
}

/* Subtle gold shimmer on all text */
body.theme-warhammer * {
  text-shadow: 0 0 1px rgba(212, 175, 55, 0.15);
}

body.theme-warhammer a {
  color: #d4af37 !important;
  transition: all 0.3s ease;
}

body.theme-warhammer a:hover {
  color: #f5f0e1 !important;
  text-shadow:
    0 0 8px rgba(212, 175, 55, 0.8),
    0 0 16px rgba(212, 175, 55, 0.4);
}

/* Cards and containers - Gothic panel style */
body.theme-warhammer .watch,
body.theme-warhammer .social,
body.theme-warhammer .dev,
body.theme-warhammer .linux,
body.theme-warhammer .other,
body.theme-warhammer .blog-post-preview,
body.theme-warhammer .server-card {
  background: linear-gradient(
    145deg,
    #2a1515 0%,
    #1a0a0a 50%,
    #2a1515 100%
  ) !important;
  border: 2px solid #4a2020 !important;
  box-shadow:
    5px 5px 1px 2px rgba(139, 0, 0, 0.4),
    0 0 20px rgba(212, 175, 55, 0.05),
    inset 0 0 30px rgba(139, 0, 0, 0.1) !important;
  position: relative;
}

/* Gothic corner accents on cards */
body.theme-warhammer .watch::before,
body.theme-warhammer .social::before,
body.theme-warhammer .dev::before,
body.theme-warhammer .linux::before,
body.theme-warhammer .other::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #d4af37 20%,
    #d4af37 80%,
    transparent 100%
  );
  opacity: 0.6;
}

body.theme-warhammer .watch::after,
body.theme-warhammer .social::after,
body.theme-warhammer .dev::after,
body.theme-warhammer .linux::after,
body.theme-warhammer .other::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #8b0000 20%,
    #8b0000 80%,
    transparent 100%
  );
  opacity: 0.5;
}

body.theme-warhammer .watch:hover,
body.theme-warhammer .social:hover,
body.theme-warhammer .dev:hover,
body.theme-warhammer .linux:hover,
body.theme-warhammer .other:hover {
  border-color: #8b0000 !important;
  box-shadow:
    7px 7px 2px 3px rgba(139, 0, 0, 0.5),
    0 0 30px rgba(212, 175, 55, 0.15),
    0 0 60px rgba(139, 0, 0, 0.2),
    inset 0 0 40px rgba(139, 0, 0, 0.15) !important;
}

body.theme-warhammer .watch:hover::before,
body.theme-warhammer .social:hover::before,
body.theme-warhammer .dev:hover::before,
body.theme-warhammer .linux:hover::before,
body.theme-warhammer .other:hover::before {
  opacity: 1;
}

/* Navigation - Imperial command bar */
body.theme-warhammer .main-nav-bar {
  background: linear-gradient(
    180deg,
    #2a1515 0%,
    #1a0a0a 100%
  ) !important;
  border-bottom: 2px solid #4a2020 !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(139, 0, 0, 0.15);
  position: relative;
}

/* Aquila-inspired gold trim on nav */
body.theme-warhammer .main-nav-bar::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #4a2020 10%,
    #8b0000 30%,
    #d4af37 50%,
    #8b0000 70%,
    #4a2020 90%,
    transparent 100%
  );
}

/* Buttons - Imperial style */
body.theme-warhammer button,
body.theme-warhammer .btn,
body.theme-warhammer .nav-user-btn,
body.theme-warhammer [type="submit"],
body.theme-warhammer [type="button"] {
  background: linear-gradient(
    180deg,
    #2a1515 0%,
    #1a0a0a 100%
  ) !important;
  color: #d4af37 !important;
  border: 2px solid #4a2020 !important;
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.3) !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

body.theme-warhammer button::before,
body.theme-warhammer .btn::before,
body.theme-warhammer [type="submit"]::before,
body.theme-warhammer [type="button"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

body.theme-warhammer button:hover,
body.theme-warhammer .btn:hover,
body.theme-warhammer .nav-user-btn:hover,
body.theme-warhammer [type="submit"]:hover,
body.theme-warhammer [type="button"]:hover {
  background: linear-gradient(
    180deg,
    #3a2020 0%,
    #2a1515 100%
  ) !important;
  color: #f5f0e1 !important;
  border-color: #8b0000 !important;
  box-shadow:
    0 0 20px rgba(139, 0, 0, 0.4),
    0 0 40px rgba(212, 175, 55, 0.15),
    inset 0 0 20px rgba(139, 0, 0, 0.1) !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6) !important;
}

body.theme-warhammer button:hover::before,
body.theme-warhammer .btn:hover::before,
body.theme-warhammer [type="submit"]:hover::before,
body.theme-warhammer [type="button"]:hover::before {
  left: 100%;
}

/* Logged in button - Adeptus styling */
body.theme-warhammer .nav-user-btn.logged-in {
  background: linear-gradient(
    180deg,
    #4a2020 0%,
    #3a1515 100%
  ) !important;
  color: #f5f0e1 !important;
  border-color: #8b0000 !important;
  box-shadow:
    0 0 15px rgba(139, 0, 0, 0.3),
    inset 0 0 10px rgba(212, 175, 55, 0.1) !important;
}

body.theme-warhammer .nav-user-btn.logged-in:hover {
  background: linear-gradient(
    180deg,
    #5a2828 0%,
    #4a2020 100%
  ) !important;
  box-shadow:
    0 0 25px rgba(139, 0, 0, 0.5),
    0 0 50px rgba(212, 175, 55, 0.2),
    inset 0 0 15px rgba(212, 175, 55, 0.15) !important;
}

/* Input fields - Parchment style */
body.theme-warhammer input,
body.theme-warhammer textarea,
body.theme-warhammer select {
  background: linear-gradient(
    180deg,
    #2a1515 0%,
    #1a0a0a 100%
  ) !important;
  border: 2px solid #4a2020 !important;
  color: #f5f0e1 !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

body.theme-warhammer input::placeholder,
body.theme-warhammer textarea::placeholder {
  color: rgba(201, 162, 39, 0.4) !important;
}

body.theme-warhammer input:focus,
body.theme-warhammer textarea:focus {
  border-color: #d4af37 !important;
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(212, 175, 55, 0.3) !important;
  outline: none !important;
}

/* Scrollbar - Gothic styling */
body.theme-warhammer::-webkit-scrollbar {
  width: 12px;
  background: #0d0505;
}

body.theme-warhammer::-webkit-scrollbar-track {
  background: #1a0a0a;
  border-left: 1px solid #4a2020;
}

body.theme-warhammer::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #4a2020 0%,
    #8b0000 50%,
    #4a2020 100%
  );
  border: 1px solid #d4af37;
  border-radius: 2px;
}

body.theme-warhammer::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #5a2828 0%,
    #a52a2a 50%,
    #5a2828 100%
  );
}

/* Grimdark vignette overlay */
body.theme-warhammer::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9996;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(13, 5, 5, 0.3) 70%,
    rgba(13, 5, 5, 0.6) 100%
  );
}

/* Subtle blood mist animation */
@keyframes warhammerMist {
  0%, 100% {
    opacity: 0.03;
    transform: translateX(0);
  }
  50% {
    opacity: 0.06;
    transform: translateX(-2%);
  }
}

body.theme-warhammer::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9995;
  background:
    radial-gradient(
      ellipse at 20% 80%,
      rgba(139, 0, 0, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 20%,
      rgba(212, 175, 55, 0.08) 0%,
      transparent 40%
    );
  animation: warhammerMist 20s ease-in-out infinite;
}

/* List titles - Imperial header style */
body.theme-warhammer .list_title {
  color: #d4af37 !important;
  text-shadow:
    0 0 10px rgba(212, 175, 55, 0.5),
    2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 3px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 8px;
}

/* Weather banner - parchment text */
body.theme-warhammer #weatherBanner {
  color: #c9a227 !important;
  text-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
}

/* Date display - Imperial calendar */
body.theme-warhammer .date-display {
  color: #8b0000 !important;
  text-shadow: 0 0 5px rgba(139, 0, 0, 0.5);
  letter-spacing: 1px;
}

/* Theme toggle and icons */
body.theme-warhammer .theme-toggle,
body.theme-warhammer .gary-mode-toggle {
  color: #d4af37 !important;
}

body.theme-warhammer .theme-icon {
  stroke: #d4af37 !important;
}

body.theme-warhammer .theme-toggle:hover,
body.theme-warhammer .gary-mode-toggle:hover {
  color: #f5f0e1 !important;
}

body.theme-warhammer .theme-toggle:hover .theme-icon {
  stroke: #f5f0e1 !important;
}

/* Selection highlight */
body.theme-warhammer ::selection {
  background: rgba(139, 0, 0, 0.6);
  color: #f5f0e1;
}

body.theme-warhammer ::-moz-selection {
  background: rgba(139, 0, 0, 0.6);
  color: #f5f0e1;
}

/* Focus outline - Imperial gold */
body.theme-warhammer *:focus-visible {
  outline: 2px solid #d4af37 !important;
  outline-offset: 2px;
}


/* ========================================
   LEGACY SUPPORT
   Backwards compatibility with gary-mode-active class
   ======================================== */

/* Gary Mode Unlock Notification */
#gary-unlock-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: #000;
  border: 4px solid #ff0000;
  border-radius: 10px;
  padding: 40px 60px;
  box-shadow: 0 0 40px #ff0000, inset 0 0 20px #ff000033;
  z-index: 100000;
  opacity: 0;
  transition: all 0.5s ease;
  pointer-events: none;
}

#gary-unlock-notification.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.gary-unlock-content h2 {
  font-family: monospace, 'Courier New', Courier;
  font-size: 32px;
  color: #ff0000;
  text-shadow: 0 0 20px #ff0000;
  margin: 0 0 20px 0;
  letter-spacing: 2px;
  animation: textGlitch 0.15s ease-in-out infinite;
}

.gary-unlock-content p {
  font-family: monospace, 'Courier New', Courier;
  font-size: 16px;
  color: #ff6666;
  margin: 10px 0;
  text-align: center;
}

@keyframes textGlitch {
  0%, 90%, 100% { transform: translate(0); }
  95% { transform: translate(-1px, 1px); }
}

@media (max-width: 600px) {
  #gary-unlock-notification {
    padding: 30px 40px;
    width: 90%;
    max-width: 400px;
  }

  .gary-unlock-content h2 {
    font-size: 24px;
  }

  .gary-unlock-content p {
    font-size: 14px;
  }
}