/* ==========================================================================
   PRIMARY GLOBAL LAYOUT FRAMEWORK (global.css)
   ========================================================================== */

/* Global reset and baseline */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-dark-void);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: clip;
  scroll-behavior: smooth;
}

/* ==========================================================================
   THEME STYLES (Void Black, Deep Space, Void Nebula)
   ========================================================================== */

/* Theme: Void Black (Default / Animating Particles on Pitch Black) */
.theme-void-black {
  background-color: #000000;
  background-image: none;
  --bg-dark-void: #000000;
  --bg-dark-space: #000000;
  --bg-dark-slate: #0b0f19;
  --bg-glass: rgba(0, 0, 0, 0.5);
  
  /* System Accents for Void Black */
  --color-teal: #64ffda;
  --color-teal-bright: #00f2fe;
  --color-teal-muted: #1e4d46;
  --color-blue-accent: #0077b6;
  --gradient-primary: linear-gradient(135deg, #64ffda 0%, #0077b6 100%);
  --gradient-glow: linear-gradient(90deg, #64ffda, #00f2fe, #0077b6);
  --border-glass: 1px solid rgba(100, 255, 218, 0.12);
  --border-glass-hover: 1px solid rgba(100, 255, 218, 0.3);
  --shadow-teal: 0 0 20px rgba(100, 255, 218, 0.15);
  --shadow-teal-strong: 0 0 30px rgba(100, 255, 218, 0.35);
}

/* Theme: Deep Space (Original navy void with subtle cyan/blue radial glows) */
.theme-deep-space {
  background-color: #060b13;
  background-image:
    radial-gradient(at 0% 0%, rgba(0, 119, 182, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(100, 255, 218, 0.08) 0px, transparent 50%);
  --bg-dark-void: #060b13;
  --bg-dark-space: #0d1527;
  --bg-dark-slate: #16223f;
  --bg-glass: rgba(13, 21, 39, 0.7);
  
  /* System Accents for Deep Space */
  --color-teal: #00b4d8;
  --color-teal-bright: #90e0ef;
  --color-teal-muted: #0077b6;
  --color-blue-accent: #03045e;
  --gradient-primary: linear-gradient(135deg, #00b4d8 0%, #03045e 100%);
  --gradient-glow: linear-gradient(90deg, #00b4d8, #90e0ef, #0077b6);
  --border-glass: 1px solid rgba(0, 180, 216, 0.15);
  --border-glass-hover: 1px solid rgba(0, 180, 216, 0.35);
  --shadow-teal: 0 0 20px rgba(0, 180, 216, 0.18);
  --shadow-teal-strong: 0 0 30px rgba(0, 180, 216, 0.38);
}

/* Theme: Void Nebula (Cyberpunk dark violet with purple/cyan radial glows) */
.theme-void-nebula {
  background-color: #080410;
  background-image:
    radial-gradient(at 0% 0%, rgba(139, 92, 246, 0.12) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(0, 242, 254, 0.08) 0px, transparent 55%);
  --bg-dark-void: #080410;
  --bg-dark-space: #0c0817;
  --bg-dark-slate: #1c142c;
  --bg-glass: rgba(20, 10, 35, 0.75);
  
  /* System Accents for Void Nebula */
  --color-teal: #a855f7;
  --color-teal-bright: #e879f9;
  --color-teal-muted: #6b21a8;
  --color-blue-accent: #06b6d4;
  --gradient-primary: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
  --gradient-glow: linear-gradient(90deg, #a855f7, #e879f9, #06b6d4);
  --border-glass: 1px solid rgba(168, 85, 247, 0.15);
  --border-glass-hover: 1px solid rgba(168, 85, 247, 0.35);
  --shadow-teal: 0 0 20px rgba(168, 85, 247, 0.18);
  --shadow-teal-strong: 0 0 30px rgba(168, 85, 247, 0.38);
}

/* Theme: Cosmic Emerald (Mystic dark emerald with glowing mint highlights) */
.theme-cosmic-emerald {
  background-color: #030806;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.12) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(52, 211, 153, 0.08) 0px, transparent 55%);
  --bg-dark-void: #030806;
  --bg-dark-space: #05140f;
  --bg-dark-slate: #0d2b20;
  --bg-glass: rgba(5, 20, 15, 0.7);
  
  /* System Accents for Cosmic Emerald */
  --color-teal: #10b981;
  --color-teal-bright: #34d399;
  --color-teal-muted: #065f46;
  --color-blue-accent: #059669;
  --gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-glow: linear-gradient(90deg, #10b981, #34d399, #059669);
  --border-glass: 1px solid rgba(16, 185, 129, 0.15);
  --border-glass-hover: 1px solid rgba(16, 185, 129, 0.35);
  --shadow-teal: 0 0 20px rgba(16, 185, 129, 0.18);
  --shadow-teal-strong: 0 0 30px rgba(16, 185, 129, 0.38);
}

/* Theme: Cyberpunk (Electric Cyan & Indigo Glows) */
.theme-cyberpunk {
  background-color: #040914;
  background-image:
    radial-gradient(at 0% 0%, rgba(0, 242, 254, 0.12) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(79, 70, 229, 0.1) 0px, transparent 55%);
  --bg-dark-void: #040914;
  --bg-dark-space: #081026;
  --bg-dark-slate: #101c3d;
  --bg-glass: rgba(8, 16, 38, 0.75);

  /* System Accents for Cyberpunk */
  --color-teal: #00f2fe;
  --color-teal-bright: #38bdf8;
  --color-teal-muted: #0369a1;
  --color-blue-accent: #6366f1;
  --gradient-primary: linear-gradient(135deg, #00f2fe 0%, #6366f1 100%);
  --gradient-glow: linear-gradient(90deg, #00f2fe, #38bdf8, #6366f1);
  --border-glass: 1px solid rgba(0, 242, 254, 0.18);
  --border-glass-hover: 1px solid rgba(0, 242, 254, 0.38);
  --shadow-teal: 0 0 20px rgba(0, 242, 254, 0.22);
  --shadow-teal-strong: 0 0 30px rgba(0, 242, 254, 0.45);
}

/* Theme: Matrix (Cyberpunk Matrix Green) */
.theme-matrix {
  background-color: #020a04;
  background-image:
    radial-gradient(at 0% 0%, rgba(34, 197, 94, 0.12) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(74, 222, 128, 0.08) 0px, transparent 55%);
  --bg-dark-void: #020a04;
  --bg-dark-space: #051a09;
  --bg-dark-slate: #0b2e13;
  --bg-glass: rgba(5, 26, 9, 0.75);

  /* System Accents for Matrix */
  --color-teal: #22c55e;
  --color-teal-bright: #4ade80;
  --color-teal-muted: #15803d;
  --color-blue-accent: #16a34a;
  --gradient-primary: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  --gradient-glow: linear-gradient(90deg, #22c55e, #4ade80, #16a34a);
  --border-glass: 1px solid rgba(34, 197, 94, 0.18);
  --border-glass-hover: 1px solid rgba(34, 197, 94, 0.38);
  --shadow-teal: 0 0 20px rgba(34, 197, 94, 0.22);
  --shadow-teal-strong: 0 0 30px rgba(34, 197, 94, 0.45);
}

/* Theme: Neon Sunset (Warm Orange & Magenta Void) */
.theme-neon-sunset {
  background-color: #120603;
  background-image:
    radial-gradient(at 0% 0%, rgba(249, 115, 22, 0.14) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.1) 0px, transparent 55%);
  --bg-dark-void: #120603;
  --bg-dark-space: #1f0b05;
  --bg-dark-slate: #33140a;
  --bg-glass: rgba(31, 11, 5, 0.75);

  /* System Accents for Neon Sunset */
  --color-teal: #f97316;
  --color-teal-bright: #fb923c;
  --color-teal-muted: #c2410c;
  --color-blue-accent: #ec4899;
  --gradient-primary: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  --gradient-glow: linear-gradient(90deg, #f97316, #fb923c, #ec4899);
  --border-glass: 1px solid rgba(249, 115, 22, 0.18);
  --border-glass-hover: 1px solid rgba(249, 115, 22, 0.38);
  --shadow-teal: 0 0 20px rgba(249, 115, 22, 0.22);
  --shadow-teal-strong: 0 0 30px rgba(249, 115, 22, 0.45);
}

/* Theme: Sakura Pink (Cyber Pink + Soft Rose Glows) */
.theme-sakura-pink {
  background-color: #12040d;
  background-image:
    radial-gradient(at 0% 0%, rgba(236, 72, 153, 0.16) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(244, 114, 182, 0.12) 0px, transparent 55%);
  --bg-dark-void: #12040d;
  --bg-dark-space: #1c0717;
  --bg-dark-slate: #2e0b24;
  --bg-glass: rgba(28, 7, 23, 0.75);

  /* System Accents for Sakura Pink */
  --color-teal: #ec4899;
  --color-teal-bright: #f472b6;
  --color-teal-muted: #9d174d;
  --color-blue-accent: #fb7185;
  --gradient-primary: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  --gradient-glow: linear-gradient(90deg, #ec4899, #f472b6, #fb7185);
  --border-glass: 1px solid rgba(236, 72, 153, 0.18);
  --border-glass-hover: 1px solid rgba(236, 72, 153, 0.38);
  --shadow-teal: 0 0 20px rgba(236, 72, 153, 0.22);
  --shadow-teal-strong: 0 0 30px rgba(236, 72, 153, 0.45);
}

/* Theme: Rose Neon (Vibrant Magenta Void + Crimson Glows) */
.theme-rose-neon {
  background-color: #16020f;
  background-image:
    radial-gradient(at 0% 0%, rgba(255, 42, 133, 0.18) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(225, 29, 72, 0.14) 0px, transparent 55%);
  --bg-dark-void: #16020f;
  --bg-dark-space: #24041a;
  --bg-dark-slate: #380729;
  --bg-glass: rgba(36, 4, 26, 0.75);

  /* System Accents for Rose Neon */
  --color-teal: #ff2a85;
  --color-teal-bright: #ff73b3;
  --color-teal-muted: #a80051;
  --color-blue-accent: #e11d48;
  --gradient-primary: linear-gradient(135deg, #ff2a85 0%, #e11d48 100%);
  --gradient-glow: linear-gradient(90deg, #ff2a85, #ff73b3, #e11d48);
  --border-glass: 1px solid rgba(255, 42, 133, 0.18);
  --border-glass-hover: 1px solid rgba(255, 42, 133, 0.38);
  --shadow-teal: 0 0 20px rgba(255, 42, 133, 0.22);
  --shadow-teal-strong: 0 0 30px rgba(255, 42, 133, 0.45);
}

/* Theme: Warm Sepia (Light Mode - Cream & Warm Amber Glows) */
.theme-warm-sepia {
  background-color: #fdf6e3 !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.12) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(180, 83, 9, 0.08) 0px, transparent 55%) !important;
  --bg-dark-void: #fdf6e3;
  --bg-dark-space: #f7ede2;
  --bg-dark-slate: #f2e3d5;
  --bg-glass: rgba(255, 255, 255, 0.95);

  --text-primary: #21150b;
  --text-secondary: #4a3422;
  --text-muted: #735438;

  /* System Accents for Warm Sepia */
  --color-teal: #b45309;
  --color-teal-bright: #d97706;
  --color-teal-muted: #f59e0b;
  --color-blue-accent: #92400e;
  --gradient-primary: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --gradient-glow: linear-gradient(90deg, #d97706, #f59e0b, #b45309);
  --border-glass: 1px solid rgba(180, 83, 9, 0.25);
  --border-glass-hover: 1px solid rgba(180, 83, 9, 0.45);
  --shadow-teal: 0 0 20px rgba(217, 119, 6, 0.2);
  --shadow-teal-strong: 0 0 30px rgba(217, 119, 6, 0.35);
}

/* Global Container */
.app-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main Content SPA Pages */
main.main-content {
  flex-grow: 1;
  min-width: 0;
  padding: 100px 24px 60px 24px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

body.logged-in .main-content {
  margin-left: 260px;
  width: calc(100% - 260px);
  padding: 40px;
  min-height: 100vh;
  flex-grow: 1;
  min-width: 0;
}

/* Outer Main Page Container Baseline Layout Style */
.page-section {
  display: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  min-height: 100vh;
  width: 100%;
}

.page-section.active {
  display: block;
  opacity: 1;
}

/* Dictionary Structural Parent Layout Wrapper & Grid Definitions */
.dictionary-results-container {
  max-width: 1100px;
  margin: 40px auto 0 auto;
  width: 100%;
}

.dict-glass-card {
  background: rgba(10, 20, 38, 0.65) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  border-radius: 20px;
  width: 100%;
}

.dict-results-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
  width: 100%;
}

.dict-tabs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.dict-meanings-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* ==========================================================================
   RESPONSIVE GLOBAL OVERRIDES (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  main.main-content {
    padding: 85px 16px 40px 16px;
  }

  body.logged-in .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 85px 16px 40px 16px !important;
  }

  .dict-results-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}