/* sitewide_theme.css - Universal Theme Engine for The Pirate Sea */
/* Supports: Radio, Mini Radio, Browse, Profiles, Chat, Contacts, and Universal Navbar */

/* ==========================================================================
   0. Default Template / Fallback Theme Variables
   ========================================================================== */
:root, [data-theme="default"], [data-theme="custom"] {
  --nav-bg: rgba(18, 21, 27, 0.95);
  --nav-border: 1px solid #4a5568;
  --nav-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  --nav-text: #a0aec0;
  --nav-text-hover: #f7fafc;
  --nav-text-active: #ffffff;
  --nav-accent: #3182ce;
  --nav-glow: rgba(49, 130, 206, 0.4);
  --nav-text-glow: 0 0 8px rgba(99, 179, 237, 0.5);
  --nav-font: sans-serif;
  --nav-dropdown-bg: rgba(26, 32, 44, 0.98);
  --nav-dropdown-border: 1px solid #4a5568;
  --nav-dropdown-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  --nav-dropdown-hover-bg: rgba(49, 130, 206, 0.2);
  --nav-dropdown-hover-text: #f7fafc;
  --nav-user-color: #63b3ed;
  --nav-user-glow: 0 0 6px rgba(99, 179, 237, 0.4);
  --nav-login-border: 1px solid #3182ce;
  --nav-login-color: #63b3ed;
  --nav-login-bg: transparent;
  --nav-login-hover-bg: #3182ce;
  --nav-login-hover-color: #ffffff;
  --nav-logout-border: 1px solid #e53e3e;
  --nav-logout-color: #fc8181;
  --nav-logout-bg: transparent;
  --nav-logout-hover-bg: #e53e3e;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #3182ce;
}

/* ==========================================================================
   1. Theme: Blue (Classic Pirate Ocean)
   ========================================================================== */
body.theme-blue, :root[data-theme="blue"] {
  --theme-name: 'blue';
  --wall-background: #0d1b2a;
  --wall-post-background: #1b263b;
  --wall-post-border: #415a77;
  --wall-header-background: #334466;
  --wall-header-text: #ffffff;
  --wall-text-color: #e0e1dd;
  --wall-link-color: #4da6ff;
  --wall-accent: #007bff;
  --wall-glow: rgba(102, 166, 255, 0.4);

  --bg-dark: #0d1b2a;
  --bg-med: #1b263b;
  --bg-light: #24344d;
  --border-color: #415a77;
  --text-light: #ffffff;
  --text-dark: #8da9c4;
  --accent-blue: #007bff;
  --accent-blue-hover: #0056b3;
  --accent-yellow: #f39c12;
  --accent-red: #c0392b;

  --browse-bg: #0d1b2a;
  --browse-card: #1b263b;
  --browse-border: #415a77;
  --browse-accent: #007bff;

  --nav-bg: rgba(13, 27, 42, 0.95);
  --nav-border: 1px solid #415a77;
  --nav-shadow: 0 2px 14px rgba(0, 123, 255, 0.18);
  --nav-text: #8da9c4;
  --nav-text-hover: #ffffff;
  --nav-text-active: #ffffff;
  --nav-accent: #007bff;
  --nav-glow: rgba(102, 166, 255, 0.4);
  --nav-text-glow: 0 0 8px rgba(77, 166, 255, 0.6);
  --nav-font: sans-serif;
  --nav-dropdown-bg: rgba(27, 38, 59, 0.98);
  --nav-dropdown-border: 1px solid #415a77;
  --nav-dropdown-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  --nav-dropdown-hover-bg: rgba(0, 123, 255, 0.2);
  --nav-dropdown-hover-text: #ffffff;
  --nav-user-color: #4da6ff;
  --nav-user-glow: 0 0 6px rgba(77, 166, 255, 0.4);
  --nav-login-border: 1px solid #007bff;
  --nav-login-color: #4da6ff;
  --nav-login-bg: transparent;
  --nav-login-hover-bg: #007bff;
  --nav-login-hover-color: #ffffff;
  --nav-logout-border: 1px solid #c0392b;
  --nav-logout-color: #e74c3c;
  --nav-logout-bg: transparent;
  --nav-logout-hover-bg: #c0392b;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #007bff;
}

body.theme-blue {
  background-color: var(--wall-background);
  color: var(--wall-text-color);
}
body.theme-blue .container, body.theme-blue #container {
  background-color: var(--wall-post-background);
  border-color: var(--wall-post-border);
}
body.theme-blue .search-result-item {
  border-bottom-color: var(--wall-post-border);
}

/* ==========================================================================
   2. Theme: Midnight (Obsidian Stealth)
   ========================================================================== */
body.theme-midnight, :root[data-theme="midnight"] {
  --theme-name: 'midnight';
  --wall-background: #080a0c;
  --wall-post-background: #121519;
  --wall-post-border: #283038;
  --wall-header-background: #1c2229;
  --wall-header-text: #e1e4e8;
  --wall-text-color: #cccccc;
  --wall-link-color: #8da0b8;
  --wall-accent: #64748b;
  --wall-glow: rgba(200, 200, 200, 0.25);

  --bg-dark: #080a0c;
  --bg-med: #121519;
  --bg-light: #1c2229;
  --border-color: #283038;
  --text-light: #e1e4e8;
  --text-dark: #768390;
  --accent-blue: #64748b;
  --accent-blue-hover: #475569;
  --accent-yellow: #d97706;
  --accent-red: #b91c1c;

  --browse-bg: #080a0c;
  --browse-card: #121519;
  --browse-border: #283038;
  --browse-accent: #a1c4fd;

  --nav-bg: rgba(8, 10, 12, 0.96);
  --nav-border: 1px solid #283038;
  --nav-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  --nav-text: #768390;
  --nav-text-hover: #e1e4e8;
  --nav-text-active: #ffffff;
  --nav-accent: #64748b;
  --nav-glow: rgba(200, 200, 200, 0.25);
  --nav-text-glow: 0 0 8px rgba(161, 196, 253, 0.5);
  --nav-font: sans-serif;
  --nav-dropdown-bg: rgba(18, 21, 25, 0.98);
  --nav-dropdown-border: 1px solid #283038;
  --nav-dropdown-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
  --nav-dropdown-hover-bg: rgba(100, 116, 139, 0.25);
  --nav-dropdown-hover-text: #ffffff;
  --nav-user-color: #a1c4fd;
  --nav-user-glow: 0 0 6px rgba(161, 196, 253, 0.3);
  --nav-login-border: 1px solid #64748b;
  --nav-login-color: #a1c4fd;
  --nav-login-bg: transparent;
  --nav-login-hover-bg: #64748b;
  --nav-login-hover-color: #ffffff;
  --nav-logout-border: 1px solid #b91c1c;
  --nav-logout-color: #ef4444;
  --nav-logout-bg: transparent;
  --nav-logout-hover-bg: #b91c1c;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #64748b;
}

body.theme-midnight {
  background: linear-gradient(135deg, #080a0c 0%, #151a21 100%);
  color: var(--wall-text-color);
}
body.theme-midnight .container, body.theme-midnight #container {
  background-color: var(--wall-post-background);
  border-color: var(--wall-post-border);
}
body.theme-midnight .search-result-item {
  border-bottom-color: var(--wall-post-border);
}
body.theme-midnight .search-result-name {
  color: #a1c4fd;
}

/* ==========================================================================
   3. Theme: Sunset (Solar Amber & Golden Fire)
   ========================================================================== */
body.theme-sunset, :root[data-theme="sunset"] {
  --theme-name: 'sunset';
  --wall-background: #180700;
  --wall-post-background: #2a0e02;
  --wall-post-border: #732a03;
  --wall-header-background: #cc4400;
  --wall-header-text: #ffffff;
  --wall-text-color: #ffebcd;
  --wall-link-color: #ffb74d;
  --wall-accent: #ff9800;
  --wall-glow: rgba(255, 152, 0, 0.5);

  --bg-dark: #180700;
  --bg-med: #2a0e02;
  --bg-light: #441703;
  --border-color: #732a03;
  --text-light: #ffebcd;
  --text-dark: #cc8855;
  --accent-blue: #ff9800;
  --accent-blue-hover: #e65100;
  --accent-yellow: #ffa726;
  --accent-red: #d32f2f;

  --browse-bg: #180700;
  --browse-card: #2a0e02;
  --browse-border: #732a03;
  --browse-accent: #ff9800;

  --nav-bg: rgba(24, 7, 0, 0.95);
  --nav-border: 1px solid #732a03;
  --nav-shadow: 0 2px 16px rgba(255, 152, 0, 0.25);
  --nav-text: #cc8855;
  --nav-text-hover: #ffebcd;
  --nav-text-active: #ffffff;
  --nav-accent: #ff9800;
  --nav-glow: rgba(255, 152, 0, 0.5);
  --nav-text-glow: 0 0 10px rgba(255, 152, 0, 0.6);
  --nav-font: sans-serif;
  --nav-dropdown-bg: rgba(42, 14, 2, 0.98);
  --nav-dropdown-border: 1px solid #732a03;
  --nav-dropdown-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
  --nav-dropdown-hover-bg: rgba(255, 152, 0, 0.25);
  --nav-dropdown-hover-text: #ffebcd;
  --nav-user-color: #ffa726;
  --nav-user-glow: 0 0 8px rgba(255, 167, 38, 0.5);
  --nav-login-border: 1px solid #ff9800;
  --nav-login-color: #ffa726;
  --nav-login-bg: transparent;
  --nav-login-hover-bg: #ff9800;
  --nav-login-hover-color: #180700;
  --nav-logout-border: 1px solid #d32f2f;
  --nav-logout-color: #ff6659;
  --nav-logout-bg: transparent;
  --nav-logout-hover-bg: #d32f2f;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #ff9800;
}

body.theme-sunset {
  background: linear-gradient(135deg, #180700 0%, #3d1400 100%);
  color: var(--wall-text-color);
}
body.theme-sunset .container, body.theme-sunset #container {
  background-color: var(--wall-post-background);
  border-color: var(--wall-post-border);
}
body.theme-sunset .search-result-item {
  border-bottom-color: var(--wall-post-border);
}
body.theme-sunset .search-result-name {
  color: #ff9800;
}

/* ==========================================================================
   4. Theme: Synthwave (Outrun Neon Magenta & Cyan)
   ========================================================================== */
body.theme-synthwave, :root[data-theme="synthwave"] {
  --theme-name: 'synthwave';
  --wall-background: #0f001c;
  --wall-post-background: #200033;
  --wall-post-border: #ff00ff;
  --wall-header-background: #3b0054;
  --wall-header-text: #00ffff;
  --wall-text-color: #00ffff;
  --wall-link-color: #ff00ff;
  --wall-accent: #ff00ff;
  --wall-glow: #00ffff;

  --bg-dark: #0f001c;
  --bg-med: #200033;
  --bg-light: #32004d;
  --border-color: #ff00ff;
  --text-light: #00ffff;
  --text-dark: #ff77ff;
  --accent-blue: #00ffff;
  --accent-blue-hover: #ff00ff;
  --accent-yellow: #fcee0a;
  --accent-red: #ff0055;

  --browse-bg: #0f001c;
  --browse-card: #200033;
  --browse-border: #ff00ff;
  --browse-accent: #ff00ff;

  --nav-bg: rgba(15, 0, 28, 0.95);
  --nav-border: 1px solid #ff00ff;
  --nav-shadow: 0 2px 18px rgba(255, 0, 255, 0.4);
  --nav-text: #ff77ff;
  --nav-text-hover: #00ffff;
  --nav-text-active: #ffffff;
  --nav-accent: #ff00ff;
  --nav-glow: 0 0 10px #00ffff;
  --nav-text-glow: 0 0 10px rgba(0, 255, 255, 0.8);
  --nav-font: sans-serif;
  --nav-dropdown-bg: rgba(32, 0, 51, 0.98);
  --nav-dropdown-border: 1px solid #ff00ff;
  --nav-dropdown-shadow: 0 8px 18px rgba(255, 0, 255, 0.35);
  --nav-dropdown-hover-bg: rgba(255, 0, 255, 0.25);
  --nav-dropdown-hover-text: #00ffff;
  --nav-user-color: #00ffff;
  --nav-user-glow: 0 0 8px rgba(0, 255, 255, 0.8);
  --nav-login-border: 1px solid #00ffff;
  --nav-login-color: #00ffff;
  --nav-login-bg: transparent;
  --nav-login-hover-bg: #00ffff;
  --nav-login-hover-color: #0f001c;
  --nav-logout-border: 1px solid #ff0055;
  --nav-logout-color: #ff0055;
  --nav-logout-bg: transparent;
  --nav-logout-hover-bg: #ff0055;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #00ffff;
}

body.theme-synthwave {
  background: linear-gradient(135deg, #0f001c 0%, #290040 100%);
  color: var(--wall-text-color);
}
body.theme-synthwave .container, body.theme-synthwave #container {
  background-color: var(--wall-post-background);
  border-color: var(--wall-post-border);
  box-shadow: 0 0 25px rgba(255, 0, 255, 0.25);
}
body.theme-synthwave .search-result-item {
  border-bottom-color: rgba(255, 0, 255, 0.4);
}
body.theme-synthwave .search-result-name {
  color: #ff00ff;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}

/* ==========================================================================
   5. Theme: Cyberpunk (High-Contrast Acid Yellow & Crimson)
   ========================================================================== */
body.theme-cyberpunk, :root[data-theme="cyberpunk"] {
  --theme-name: 'cyberpunk';
  --wall-background: #040404;
  --wall-post-background: #0d0d0d;
  --wall-post-border: #ff003c;
  --wall-header-background: #180005;
  --wall-header-text: #fcee0a;
  --wall-text-color: #00ffff;
  --wall-link-color: #fcee0a;
  --wall-accent: #fcee0a;
  --wall-glow: #ff003c;

  --bg-dark: #040404;
  --bg-med: #0d0d0d;
  --bg-light: #1f0007;
  --border-color: #ff003c;
  --text-light: #fcee0a;
  --text-dark: #00ffff;
  --accent-blue: #fcee0a;
  --accent-blue-hover: #ff003c;
  --accent-yellow: #fcee0a;
  --accent-red: #ff003c;

  --browse-bg: #040404;
  --browse-card: #0d0d0d;
  --browse-border: #ff003c;
  --browse-accent: #fcee0a;

  --nav-bg: rgba(4, 4, 4, 0.96);
  --nav-border: 1px solid #ff003c;
  --nav-shadow: 0 2px 18px rgba(255, 0, 60, 0.4);
  --nav-text: #00ffff;
  --nav-text-hover: #fcee0a;
  --nav-text-active: #ffffff;
  --nav-accent: #fcee0a;
  --nav-glow: 0 0 10px #ff003c;
  --nav-text-glow: 0 0 8px rgba(252, 238, 10, 0.8);
  --nav-font: sans-serif;
  --nav-dropdown-bg: rgba(13, 13, 13, 0.98);
  --nav-dropdown-border: 1px solid #ff003c;
  --nav-dropdown-shadow: 0 8px 18px rgba(255, 0, 60, 0.35);
  --nav-dropdown-hover-bg: rgba(255, 0, 60, 0.25);
  --nav-dropdown-hover-text: #fcee0a;
  --nav-user-color: #fcee0a;
  --nav-user-glow: 0 0 8px rgba(252, 238, 10, 0.8);
  --nav-login-border: 1px solid #fcee0a;
  --nav-login-color: #fcee0a;
  --nav-login-bg: transparent;
  --nav-login-hover-bg: #fcee0a;
  --nav-login-hover-color: #000000;
  --nav-logout-border: 1px solid #ff003c;
  --nav-logout-color: #ff003c;
  --nav-logout-bg: transparent;
  --nav-logout-hover-bg: #ff003c;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #fcee0a;
}

body.theme-cyberpunk {
  background-color: #040404;
  color: var(--wall-text-color);
}
body.theme-cyberpunk .container, body.theme-cyberpunk #container {
  background-color: var(--wall-post-background);
  border-color: var(--wall-post-border);
  box-shadow: 0 0 20px rgba(255, 0, 60, 0.3);
}
body.theme-cyberpunk .search-result-item {
  border-bottom-color: rgba(255, 0, 60, 0.4);
}
body.theme-cyberpunk .search-result-name {
  color: #fcee0a;
  text-shadow: 0 0 6px rgba(252, 238, 10, 0.5);
}

/* ==========================================================================
   6. Theme: Nature (Forest Emerald & Moss)
   ========================================================================== */
body.theme-nature, :root[data-theme="nature"] {
  --theme-name: 'nature';
  --wall-background: #08140e;
  --wall-post-background: #112419;
  --wall-post-border: #2c5364;
  --wall-header-background: #173827;
  --wall-header-text: #d4fc79;
  --wall-text-color: #d4fc79;
  --wall-link-color: #a8e063;
  --wall-accent: #a8e063;
  --wall-glow: #56ab2f;

  --bg-dark: #08140e;
  --bg-med: #112419;
  --bg-light: #1c3b29;
  --border-color: #2c5364;
  --text-light: #d4fc79;
  --text-dark: #71b280;
  --accent-blue: #56ab2f;
  --accent-blue-hover: #458e24;
  --accent-yellow: #e6b800;
  --accent-red: #c0392b;

  --browse-bg: #08140e;
  --browse-card: #112419;
  --browse-border: #2c5364;
  --browse-accent: #a8e063;

  --nav-bg: rgba(8, 20, 14, 0.95);
  --nav-border: 1px solid #2c5364;
  --nav-shadow: 0 2px 14px rgba(86, 171, 47, 0.25);
  --nav-text: #71b280;
  --nav-text-hover: #d4fc79;
  --nav-text-active: #ffffff;
  --nav-accent: #a8e063;
  --nav-glow: 0 0 8px #56ab2f;
  --nav-text-glow: 0 0 8px rgba(168, 224, 99, 0.7);
  --nav-font: sans-serif;
  --nav-dropdown-bg: rgba(17, 36, 25, 0.98);
  --nav-dropdown-border: 1px solid #2c5364;
  --nav-dropdown-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  --nav-dropdown-hover-bg: rgba(86, 171, 47, 0.25);
  --nav-dropdown-hover-text: #d4fc79;
  --nav-user-color: #a8e063;
  --nav-user-glow: 0 0 8px rgba(168, 224, 99, 0.6);
  --nav-login-border: 1px solid #a8e063;
  --nav-login-color: #a8e063;
  --nav-login-bg: transparent;
  --nav-login-hover-bg: #a8e063;
  --nav-login-hover-color: #08140e;
  --nav-logout-border: 1px solid #c0392b;
  --nav-logout-color: #e74c3c;
  --nav-logout-bg: transparent;
  --nav-logout-hover-bg: #c0392b;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #a8e063;
}

body.theme-nature {
  background: linear-gradient(135deg, #08140e 0%, #152d21 100%);
  color: var(--wall-text-color);
}
body.theme-nature .container, body.theme-nature #container {
  background-color: var(--wall-post-background);
  border-color: var(--wall-post-border);
}
body.theme-nature .search-result-item {
  border-bottom-color: var(--wall-post-border);
}
body.theme-nature .search-result-name {
  color: #a8e063;
}

/* ==========================================================================
   7. Theme: Neon (Laser Pink & Dark Violet)
   ========================================================================== */
body.theme-neon, :root[data-theme="neon"] {
  --theme-name: 'neon';
  --wall-background: #070710;
  --wall-post-background: #121224;
  --wall-post-border: #e94560;
  --wall-header-background: #0f3460;
  --wall-header-text: #ffffff;
  --wall-text-color: #f1f1f1;
  --wall-link-color: #e94560;
  --wall-accent: #e94560;
  --wall-glow: #e94560;

  --bg-dark: #070710;
  --bg-med: #121224;
  --bg-light: #1b1b36;
  --border-color: #e94560;
  --text-light: #ffffff;
  --text-dark: #a0a0c0;
  --accent-blue: #e94560;
  --accent-blue-hover: #c73650;
  --accent-yellow: #f1c40f;
  --accent-red: #e74c3c;

  --browse-bg: #070710;
  --browse-card: #121224;
  --browse-border: #e94560;
  --browse-accent: #e94560;

  --nav-bg: rgba(7, 7, 16, 0.96);
  --nav-border: 1px solid #e94560;
  --nav-shadow: 0 2px 18px rgba(233, 69, 96, 0.35);
  --nav-text: #a0a0c0;
  --nav-text-hover: #ffffff;
  --nav-text-active: #ffffff;
  --nav-accent: #e94560;
  --nav-glow: 0 0 10px #e94560;
  --nav-text-glow: 0 0 8px rgba(233, 69, 96, 0.8);
  --nav-font: sans-serif;
  --nav-dropdown-bg: rgba(18, 18, 36, 0.98);
  --nav-dropdown-border: 1px solid #e94560;
  --nav-dropdown-shadow: 0 8px 18px rgba(233, 69, 96, 0.3);
  --nav-dropdown-hover-bg: rgba(233, 69, 96, 0.25);
  --nav-dropdown-hover-text: #ffffff;
  --nav-user-color: #e94560;
  --nav-user-glow: 0 0 8px rgba(233, 69, 96, 0.8);
  --nav-login-border: 1px solid #e94560;
  --nav-login-color: #e94560;
  --nav-login-bg: transparent;
  --nav-login-hover-bg: #e94560;
  --nav-login-hover-color: #070710;
  --nav-logout-border: 1px solid #e74c3c;
  --nav-logout-color: #ff6b6b;
  --nav-logout-bg: transparent;
  --nav-logout-hover-bg: #e74c3c;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #e94560;
}

body.theme-neon {
  background: linear-gradient(135deg, #070710 0%, #181830 100%);
  color: var(--wall-text-color);
}
body.theme-neon .container, body.theme-neon #container {
  background-color: var(--wall-post-background);
  border-color: var(--wall-post-border);
  box-shadow: 0 0 20px rgba(233, 69, 96, 0.25);
}
body.theme-neon .search-result-item {
  border-bottom-color: rgba(233, 69, 96, 0.4);
}
body.theme-neon .search-result-name {
  color: #e94560;
}

/* ==========================================================================
   8. Theme: Hacker (Matrix Phosphor Green on Black)
   ========================================================================== */
body.theme-hacker, :root[data-theme="hacker"] {
  --theme-name: 'hacker';
  --wall-background: #000000;
  --wall-post-background: #010c01;
  --wall-post-border: #00ff00;
  --wall-header-background: #002200;
  --wall-header-text: #00ff00;
  --wall-text-color: #00ff00;
  --wall-link-color: #00ff00;
  --wall-accent: #00ff00;
  --wall-glow: #00ff00;

  --bg-dark: #000000;
  --bg-med: #010c01;
  --bg-light: #031c03;
  --border-color: #00ff00;
  --text-light: #00ff00;
  --text-dark: #009900;
  --accent-blue: #00ff00;
  --accent-blue-hover: #00cc00;
  --accent-yellow: #aaff00;
  --accent-red: #ff3333;

  --browse-bg: #000000;
  --browse-card: #010c01;
  --browse-border: #00ff00;
  --browse-accent: #00ff00;

  --nav-bg: rgba(0, 0, 0, 0.96);
  --nav-border: 1px solid #00ff00;
  --nav-shadow: 0 2px 18px rgba(0, 255, 0, 0.4);
  --nav-text: #009900;
  --nav-text-hover: #00ff00;
  --nav-text-active: #ffffff;
  --nav-accent: #00ff00;
  --nav-glow: 0 0 10px #00ff00;
  --nav-text-glow: 0 0 8px rgba(0, 255, 0, 0.8);
  --nav-font: monospace, 'Courier New', Courier;
  --nav-dropdown-bg: rgba(1, 12, 1, 0.98);
  --nav-dropdown-border: 1px solid #00ff00;
  --nav-dropdown-shadow: 0 8px 18px rgba(0, 255, 0, 0.35);
  --nav-dropdown-hover-bg: rgba(0, 255, 0, 0.2);
  --nav-dropdown-hover-text: #00ff00;
  --nav-user-color: #00ff00;
  --nav-user-glow: 0 0 8px rgba(0, 255, 0, 0.8);
  --nav-login-border: 1px solid #00ff00;
  --nav-login-color: #00ff00;
  --nav-login-bg: transparent;
  --nav-login-hover-bg: #00ff00;
  --nav-login-hover-color: #000000;
  --nav-logout-border: 1px solid #ff3333;
  --nav-logout-color: #ff3333;
  --nav-logout-bg: transparent;
  --nav-logout-hover-bg: #ff3333;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #00ff00;
}

body.theme-hacker {
  background-color: #000000;
  color: #00ff00;
  font-family: monospace, 'Courier New', Courier !important;
}
body.theme-hacker .container, body.theme-hacker #container {
  background-color: var(--wall-post-background);
  border-color: var(--wall-post-border);
  box-shadow: 0 0 25px rgba(0, 255, 0, 0.25);
}
body.theme-hacker .search-result-item {
  border-bottom-color: rgba(0, 255, 0, 0.3);
}
body.theme-hacker .search-result-name {
  color: #00ff00;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.7);
}
body.theme-hacker input, body.theme-hacker textarea, body.theme-hacker select {
  font-family: monospace !important;
  color: #00ff00 !important;
  border-color: #00ff00 !important;
  background-color: #001100 !important;
}
body.theme-hacker button {
  font-family: monospace !important;
}

/* ==========================================================================
   9. Theme: Retro95 (Windows 95 / Chicago 95 Grey Theme)
   ========================================================================== */
body.theme-retro95, :root[data-theme="retro95"] {
  --theme-name: 'retro95';
  --wall-background: #008080;
  --wall-post-background: #c0c0c0;
  --wall-post-border: #808080;
  --wall-header-background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  --wall-header-text: #ffffff;
  --wall-text-color: #000000;
  --wall-link-color: #000080;
  --wall-accent: #000080;
  --wall-glow: rgba(0, 0, 128, 0.35);

  --bg-dark: #c0c0c0;
  --bg-med: #c0c0c0;
  --bg-light: #d4d0c8;
  --border-color: #808080;
  --text-light: #000000;
  --text-dark: #333333;
  --accent-blue: #000080;
  --accent-blue-hover: #1084d0;
  --accent-yellow: #808000;
  --accent-red: #a80000;

  --browse-bg: #008080;
  --browse-card: #c0c0c0;
  --browse-border: #808080;
  --browse-accent: #000080;

  --nav-bg: #c0c0c0;
  --nav-border: 2px solid #ffffff;
  --nav-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  --nav-text: #000000;
  --nav-text-hover: #000000;
  --nav-text-active: #ffffff;
  --nav-accent: #000080;
  --nav-glow: rgba(0, 0, 128, 0.35);
  --nav-text-glow: none;
  --nav-font: 'MS Sans Serif', Tahoma, 'Segoe UI', Geneva, sans-serif;
  --nav-dropdown-bg: #c0c0c0;
  --nav-dropdown-border: 2px outset #ffffff;
  --nav-dropdown-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
  --nav-dropdown-hover-bg: #000080;
  --nav-dropdown-hover-text: #ffffff;
  --nav-user-color: #000080;
  --nav-user-glow: none;
  --nav-login-border: 2px outset #ffffff;
  --nav-login-color: #000000;
  --nav-login-bg: #c0c0c0;
  --nav-login-hover-bg: #dfdfdf;
  --nav-login-hover-color: #000000;
  --nav-logout-border: 2px outset #ffffff;
  --nav-logout-color: #a80000;
  --nav-logout-bg: #c0c0c0;
  --nav-logout-hover-bg: #a80000;
  --nav-logout-hover-color: #ffffff;
  --nav-link-active-border: 2px solid #000080;
}

body.theme-retro95 {
  background-color: #008080;
  color: #000000;
  font-family: 'MS Sans Serif', Tahoma, 'Segoe UI', Geneva, sans-serif !important;
}
body.theme-retro95 .container, body.theme-retro95 #container {
  background-color: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080, 4px 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: 0;
}
body.theme-retro95 .search-result-item {
  border-bottom: 1px solid #808080;
}
body.theme-retro95 h1,
:root[data-theme="retro95"] h1 {
  color: #008080 !important;
}
body.theme-retro95 .search-result-name {
  color: #000080;
  text-shadow: none;
}
body.theme-retro95 .search-result-meta,
:root[data-theme="retro95"] .search-result-meta {
  color: #222222 !important;
}
body.theme-retro95 #status-box,
:root[data-theme="retro95"] #status-box {
  color: #000000 !important;
}
body.theme-retro95 input, body.theme-retro95 textarea, body.theme-retro95 select {
  font-family: 'MS Sans Serif', Tahoma, monospace, sans-serif !important;
  color: #000000 !important;
  border-top: 2px solid #808080 !important;
  border-left: 2px solid #808080 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf !important;
  background-color: #ffffff !important;
  border-radius: 0 !important;
}
body.theme-retro95 button {
  font-family: 'MS Sans Serif', Tahoma, 'Segoe UI', Geneva, sans-serif !important;
  background-color: #c0c0c0 !important;
  color: #000000 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080 !important;
  border-radius: 0 !important;
}
body.theme-retro95 button:active {
  border-top: 2px solid #000000 !important;
  border-left: 2px solid #000000 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #808080 !important;
}

/* ==========================================================================
   Universal Component Theming (Browse, Profile Wall, Chat, Contacts)
   ========================================================================== */

/* Browse Page */
.container {
  transition: background-color 0.3s, border-color 0.3s;
}

/* Profile Wall Canvas & Modals */
.wall-preset-canvas {
  background-color: var(--wall-background) !important;
  border-color: var(--wall-header-background) !important;
}
.wall-modal {
  background-color: var(--wall-post-background) !important;
  border-color: var(--wall-post-border) !important;
  color: var(--wall-text-color) !important;
}
.wall-modal-header {
  background-color: var(--wall-header-background) !important;
  color: var(--wall-header-text) !important;
}
#wall-toolbar {
  background: var(--wall-post-background) !important;
  border-color: var(--wall-post-border) !important;
}
#friends-editor-modal, #wall-editor-modal {
  background-color: rgba(0, 0, 0, 0.75);
}
#friends-editor-content, #wall-editor-content {
  background-color: var(--wall-post-background) !important;
  border-color: var(--wall-post-border) !important;
  color: var(--wall-text-color) !important;
}

/* Chat & Contacts Modules */
#chat-panel .window-panel, #friends-panel .window-panel {
  background-color: var(--bg-med) !important;
  color: var(--text-light) !important;
}
#chat-panel .panel-header, #friends-panel .panel-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 48%, rgba(0, 0, 0, 0.08) 50%, rgba(255, 255, 255, 0.12) 100%), var(--bg-light) !important;
  border-bottom-color: var(--border-color) !important;
  color: var(--text-light) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.2);
}
#chat-panel #chat-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.12) 100%), var(--bg-light) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#chat-panel .chat-tab {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.15) 100%), var(--bg-dark) !important;
  border-color: var(--border-color) !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--text-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}
#chat-panel .chat-tab:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(0, 0, 0, 0.1) 100%), var(--bg-med) !important;
  color: var(--text-light) !important;
}
#chat-panel .chat-tab.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%), var(--bg-med) !important;
  color: var(--text-light) !important;
  border-left-color: var(--accent-blue) !important;
  border-top-color: var(--border-color) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 10px var(--wall-glow, rgba(102, 166, 255, 0.35));
}
#friends-panel #sidebar-toggle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.15) 100%), var(--bg-dark) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
#friends-panel .toggle-btn {
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0.15) 100%), var(--bg-med) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}
#friends-panel .toggle-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.08) 100%), var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 10px var(--wall-glow, rgba(102, 166, 255, 0.4));
  color: #fff !important;
}

/* Frutiger Aero Floating Chat & Contacts Window Header */
@keyframes aeroHeaderShine {
  0% { transform: translateX(-120%) translateY(-120%) rotate(25deg); }
  100% { transform: translateX(220%) translateY(220%) rotate(25deg); }
}

@keyframes aeroStatusGlow {
  0%, 100% { box-shadow: 0 0 5px #4caf50, inset 0 1px 2px rgba(255, 255, 255, 0.9); }
  50% { box-shadow: 0 0 9px #81c784, inset 0 1px 2px rgba(255, 255, 255, 0.9); }
}

.chat-contacts-header {
  position: relative;
  overflow: hidden;
  height: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 12px !important;
  user-select: none;
  -webkit-user-select: none;
  cursor: move;
  box-sizing: border-box !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  border-radius: 14px 14px 0 0 !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.chat-contacts-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
  z-index: 1;
}

.chat-contacts-header::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  animation: aeroHeaderShine 8s infinite;
  z-index: 1;
}

.chat-contacts-header .header-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.chat-contacts-header .header-controls {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

.aero-status-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #81c784, #388e3c);
  box-shadow: 0 0 6px #4caf50, inset 0 1px 2px rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
  display: inline-block;
}

.aero-status-light.live {
  animation: aeroStatusGlow 2.5s infinite ease-in-out;
}

.chat-contacts-header .header-title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
}

.aero-btn {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  outline: none !important;
  background: var(--aero-btn-bg, rgba(255, 255, 255, 0.55));
  border: var(--aero-btn-border, 1px solid rgba(255, 255, 255, 0.75));
  color: var(--aero-btn-color, #005c97);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 1.5px rgba(255, 255, 255, 0.85);
  transition: transform 0.15s ease, filter 0.15s ease, background 0.2s ease;
}

.aero-btn:hover {
  filter: brightness(1.18);
  transform: scale(1.05);
}

.aero-min-btn {
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 13px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

.aero-close-btn {
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 13px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  background: radial-gradient(circle at 35% 35%, #ff5252, #c0392b) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  color: #ffffff !important;
}

/* Frutiger Aero Popup Media Players & Modal Window */
#view-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 20000;
  pointer-events: none;
}

#modal-window, .aero-modal-window {
  position: absolute;
  top: 8%;
  left: 10%;
  width: 80%;
  height: 80%;
  background: var(--aero-modal-bg, rgba(20, 28, 45, 0.9));
  border: 1px solid var(--aero-modal-border, rgba(255, 255, 255, 0.45));
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px var(--wall-glow, rgba(96, 165, 250, 0.35)), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  resize: both;
  pointer-events: auto;
  min-width: 280px;
  min-height: 200px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.aero-resizer-handle-br {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 10005;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 65%, transparent 65%, transparent 75%, rgba(255, 255, 255, 0.35) 75%);
  border-bottom-right-radius: 12px;
  pointer-events: auto;
  user-select: none;
}
.aero-resizer-handle-br:hover {
  background: linear-gradient(135deg, transparent 50%, #4da6ff 50%, #4da6ff 65%, transparent 65%, transparent 75%, #4da6ff 75%);
}
.aero-resizer-handle-tl {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 10005;
  background: linear-gradient(315deg, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 65%, transparent 65%, transparent 75%, rgba(255, 255, 255, 0.35) 75%);
  border-top-left-radius: 12px;
  pointer-events: auto;
  user-select: none;
}
.aero-resizer-handle-tl:hover {
  background: linear-gradient(315deg, transparent 50%, #4da6ff 50%, #4da6ff 65%, transparent 65%, transparent 75%, #4da6ff 75%);
}

#modal-header, .aero-modal-header {
  position: relative;
  overflow: hidden;
  height: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 12px !important;
  user-select: none;
  -webkit-user-select: none;
  cursor: move;
  box-sizing: border-box !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  border-radius: 14px 14px 0 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--aero-modal-header-bg, linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.18) 49%, rgba(0, 50, 100, 0.2) 50%, rgba(255, 255, 255, 0.15) 100%), linear-gradient(135deg, #005c97, #363795));
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

#modal-header::before, .aero-modal-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
  z-index: 1;
}

#modal-header::after, .aero-modal-header::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  animation: aeroHeaderShine 8s infinite;
  z-index: 1;
}

#view-modal-title {
  color: var(--text-light, #ffffff) !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 0 8px var(--wall-glow, rgba(137, 247, 254, 0.8)), 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  margin-right: 12px;
  text-align: left;
  z-index: 2;
}

#modal-body-container, .aero-modal-body {
  flex-grow: 1;
  position: relative;
  overflow: auto;
  background-color: rgba(5, 10, 18, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 0 0 13px 13px;
}

/* Mini Stream Container Frutiger Aero */
#mini-stream-container {
  border-radius: 14px !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 18px var(--wall-glow, rgba(96, 165, 250, 0.35));
  border: 1px solid var(--aero-modal-border, rgba(255, 255, 255, 0.45)) !important;
  background: var(--aero-modal-bg, rgba(20, 28, 45, 0.9)) !important;
}

#mini-stream-container .chat-contacts-header {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
}

#mini-stream-container.minimized {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  resize: none !important;
}

#modal-window.minimized, .aero-modal-window.minimized {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  resize: none !important;
}

#mini-radio-container.minimized {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  resize: none !important;
}

/* Aero Theme Variations for Modal Windows & Popup Players */
body.theme-blue #modal-window, :root[data-theme="blue"] #modal-window,
body.theme-blue #mini-stream-container, :root[data-theme="blue"] #mini-stream-container {
  --aero-modal-bg: rgba(13, 27, 42, 0.9);
  --aero-modal-border: rgba(255, 255, 255, 0.55);
  --aero-modal-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.18) 49%, rgba(0, 50, 100, 0.2) 50%, rgba(255, 255, 255, 0.15) 100%), linear-gradient(135deg, #005c97, #363795);
  --aero-btn-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(200, 230, 255, 0.6) 100%);
  --aero-btn-border: 1px solid rgba(255, 255, 255, 0.85);
  --aero-btn-color: #005c97;
}

body.theme-midnight #modal-window, :root[data-theme="midnight"] #modal-window,
body.theme-midnight #mini-stream-container, :root[data-theme="midnight"] #mini-stream-container {
  --aero-modal-bg: rgba(18, 21, 25, 0.94);
  --aero-modal-border: rgba(100, 100, 120, 0.55);
  --aero-modal-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(135deg, #1c2229, #283038);
  --aero-btn-bg: rgba(50, 50, 60, 0.85);
  --aero-btn-border: 1px solid rgba(120, 120, 140, 0.6);
  --aero-btn-color: #cccccc;
}

body.theme-sunset #modal-window, :root[data-theme="sunset"] #modal-window,
body.theme-sunset #mini-stream-container, :root[data-theme="sunset"] #mini-stream-container {
  --aero-modal-bg: rgba(24, 7, 0, 0.92);
  --aero-modal-border: rgba(255, 180, 100, 0.65);
  --aero-modal-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 49%, rgba(100, 20, 0, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(135deg, #ff7832, #c83200);
  --aero-btn-bg: rgba(255, 140, 50, 0.65);
  --aero-btn-border: 1px solid rgba(255, 200, 120, 0.7);
  --aero-btn-color: #ffffff;
}

body.theme-synthwave #modal-window, :root[data-theme="synthwave"] #modal-window,
body.theme-synthwave #mini-stream-container, :root[data-theme="synthwave"] #mini-stream-container {
  --aero-modal-bg: rgba(20, 0, 40, 0.93);
  --aero-modal-border: #ff00ff;
  --aero-modal-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 49%, rgba(255, 0, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(135deg, #320050, #140028);
  --aero-btn-bg: rgba(40, 0, 60, 0.85);
  --aero-btn-border: 1px solid #ff00ff;
  --aero-btn-color: #00ffff;
}

body.theme-cyberpunk #modal-window, :root[data-theme="cyberpunk"] #modal-window,
body.theme-cyberpunk #mini-stream-container, :root[data-theme="cyberpunk"] #mini-stream-container {
  --aero-modal-bg: rgba(10, 10, 10, 0.96);
  --aero-modal-border: #ff003c;
  --aero-modal-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 0, 60, 0.2) 100%), linear-gradient(135deg, #1e1e1e, #0a0a0a);
  --aero-btn-bg: rgba(25, 25, 25, 0.85);
  --aero-btn-border: 1px solid #ff003c;
  --aero-btn-color: #fcee0a;
}

body.theme-nature #modal-window, :root[data-theme="nature"] #modal-window,
body.theme-nature #mini-stream-container, :root[data-theme="nature"] #mini-stream-container {
  --aero-modal-bg: rgba(10, 35, 25, 0.93);
  --aero-modal-border: #4ca1af;
  --aero-modal-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 49%, rgba(0, 50, 30, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(135deg, #143c28, #0a2319);
  --aero-btn-bg: rgba(20, 50, 30, 0.85);
  --aero-btn-border: 1px solid #4ca1af;
  --aero-btn-color: #d4fc79;
}

body.theme-neon #modal-window, :root[data-theme="neon"] #modal-window,
body.theme-neon #mini-stream-container, :root[data-theme="neon"] #mini-stream-container {
  --aero-modal-bg: rgba(10, 5, 20, 0.96);
  --aero-modal-border: #e94560;
  --aero-modal-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 49%, rgba(233, 69, 96, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(135deg, #16213e, #0f3460);
  --aero-btn-bg: rgba(30, 15, 40, 0.85);
  --aero-btn-border: 1px solid #e94560;
  --aero-btn-color: #ffffff;
}

body.theme-hacker #modal-window, :root[data-theme="hacker"] #modal-window,
body.theme-hacker #mini-stream-container, :root[data-theme="hacker"] #mini-stream-container {
  --aero-modal-bg: rgba(0, 15, 0, 0.96);
  --aero-modal-border: #00ff00;
  --aero-modal-header-bg: linear-gradient(180deg, rgba(0, 255, 0, 0.2) 0%, rgba(0, 255, 0, 0.05) 50%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, #001e00, #000f00);
  --aero-btn-bg: rgba(0, 25, 0, 0.85);
  --aero-btn-border: 1px solid #00ff00;
  --aero-btn-color: #00ff00;
}

body.theme-retro95 #modal-window, :root[data-theme="retro95"] #modal-window,
body.theme-retro95 #mini-stream-container, :root[data-theme="retro95"] #mini-stream-container {
  --aero-modal-bg: #c0c0c0;
  --aero-modal-border: 2px outset #ffffff;
  --aero-modal-header-bg: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  --aero-btn-bg: #c0c0c0;
  --aero-btn-border: 2px outset #ffffff;
  --aero-btn-color: #000000;
}
#chat-panel .message-bubble, .message-bubble {
  border-color: var(--border-color);
}
#chat-panel input, #chat-panel textarea, #friends-panel input, #friends-panel textarea {
  background-color: var(--bg-dark) !important;
  border-color: var(--border-color) !important;
  color: var(--text-light) !important;
}
#chat-panel input::placeholder, #chat-panel textarea::placeholder, #friends-panel input::placeholder, #friends-panel textarea::placeholder {
  color: #666666 !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Synthwave (Purple Theme) Contacts & Chat Styling Overrides
   Replaces light-blue backgrounds for Rooms/Friends toggle, contact hover/selected states,
   and chat send buttons with a sleek glossy light-purple while preserving light-blue
   fonts and accents.
   ========================================================================== */
body.theme-synthwave #friends-panel .toggle-btn.active,
:root[data-theme="synthwave"] #friends-panel .toggle-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 49%, rgba(0, 0, 0, 0.08) 50%, rgba(255, 255, 255, 0.1) 100%), #9d4edd !important;
  border-color: #ba68c8 !important;
  border-top-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 12px rgba(186, 104, 200, 0.5) !important;
  color: #ffffff !important;
}

body.theme-synthwave #friends-panel .toggle-btn:hover:not(.active),
:root[data-theme="synthwave"] #friends-panel .toggle-btn:hover:not(.active) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(0, 0, 0, 0.1) 100%), #5a189a !important;
  color: #ffffff !important;
}

body.theme-synthwave #friends-panel .player-entry:hover,
body.theme-synthwave #friends-panel .friend-entry:hover,
:root[data-theme="synthwave"] #friends-panel .player-entry:hover,
:root[data-theme="synthwave"] #friends-panel .friend-entry:hover {
  background-color: #7b2cbf !important;
  color: #ffffff !important;
}

body.theme-synthwave #friends-panel .player-entry.selected,
body.theme-synthwave #friends-panel .friend-entry.selected,
:root[data-theme="synthwave"] #friends-panel .player-entry.selected,
:root[data-theme="synthwave"] #friends-panel .friend-entry.selected {
  background-color: #9d4edd !important;
  color: #ffffff !important;
}

body.theme-synthwave #friends-panel .context-menu-item:hover,
:root[data-theme="synthwave"] #friends-panel .context-menu-item:hover {
  background-color: #7b2cbf !important;
  color: #ffffff !important;
}

body.theme-synthwave #friends-panel .room-header:hover,
:root[data-theme="synthwave"] #friends-panel .room-header:hover {
  background-color: #7b2cbf !important;
  color: #ffffff !important;
}

body.theme-synthwave #friends-panel .friend-request-entry:hover,
:root[data-theme="synthwave"] #friends-panel .friend-request-entry:hover {
  background-color: #7b2cbf !important;
  color: #ffffff !important;
}

body.theme-synthwave #friends-panel .unread-badge,
body.theme-synthwave #friends-panel .toggle-badge,
:root[data-theme="synthwave"] #friends-panel .unread-badge,
:root[data-theme="synthwave"] #friends-panel .toggle-badge {
  background-color: #9d4edd !important;
  color: #ffffff !important;
  box-shadow: 0 0 6px rgba(186, 104, 200, 0.5) !important;
}

/* Chat Module - Send Button & Key Confirm in Synthwave */
body.theme-synthwave #chat-panel .pm-send-btn,
body.theme-synthwave #chat-panel .public-chat-send-button,
body.theme-synthwave #chat-panel .page-chat-send-button,
:root[data-theme="synthwave"] #chat-panel .pm-send-btn,
:root[data-theme="synthwave"] #chat-panel .public-chat-send-button,
:root[data-theme="synthwave"] #chat-panel .page-chat-send-button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 49%, rgba(0, 0, 0, 0.08) 50%, rgba(255, 255, 255, 0.1) 100%), #9d4edd !important;
  background-color: #9d4edd !important;
  border: 1px solid #ba68c8 !important;
  border-top-color: rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  font-weight: 600 !important;
}

body.theme-synthwave #chat-panel .pm-send-btn:hover,
body.theme-synthwave #chat-panel .public-chat-send-button:hover,
body.theme-synthwave #chat-panel .page-chat-send-button:hover,
:root[data-theme="synthwave"] #chat-panel .pm-send-btn:hover,
:root[data-theme="synthwave"] #chat-panel .public-chat-send-button:hover,
:root[data-theme="synthwave"] #chat-panel .page-chat-send-button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.18) 49%, rgba(0, 0, 0, 0.06) 50%, rgba(255, 255, 255, 0.15) 100%), #b845e6 !important;
  background-color: #b845e6 !important;
  border-color: #da70d6 !important;
  border-top-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 0 12px rgba(186, 104, 200, 0.6) !important;
  color: #ffffff !important;
}

body.theme-synthwave #chat-panel .pm-send-btn:active,
body.theme-synthwave #chat-panel .public-chat-send-button:active,
body.theme-synthwave #chat-panel .page-chat-send-button:active,
:root[data-theme="synthwave"] #chat-panel .pm-send-btn:active,
:root[data-theme="synthwave"] #chat-panel .public-chat-send-button:active,
:root[data-theme="synthwave"] #chat-panel .page-chat-send-button:active {
  background: #7b1fa2 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

body.theme-synthwave #chat-panel #encryption-key-confirm,
:root[data-theme="synthwave"] #chat-panel #encryption-key-confirm {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.1) 100%), #9d4edd !important;
  background-color: #9d4edd !important;
  border: 1px solid #ba68c8 !important;
  color: #ffffff !important;
}

body.theme-synthwave #chat-panel #encryption-key-confirm:hover,
:root[data-theme="synthwave"] #chat-panel #encryption-key-confirm:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(0, 0, 0, 0.1) 100%), #b845e6 !important;
  background-color: #b845e6 !important;
}

body.theme-synthwave #chat-panel .media-btn:hover,
body.theme-synthwave #chat-panel .emoji-btn:hover,
:root[data-theme="synthwave"] #chat-panel .media-btn:hover,
:root[data-theme="synthwave"] #chat-panel .emoji-btn:hover {
  background-color: #7b2cbf !important;
  color: #ffffff !important;
}

body.theme-synthwave #chat-panel .media-menu-item:hover,
:root[data-theme="synthwave"] #chat-panel .media-menu-item:hover {
  background-color: #7b2cbf !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Retro95 (Windows 95 / Chicago 95) Contacts & Chat Styling Overrides
   Authentic grey beveled buttons, navy active tabs/selections, inset inputs
   ========================================================================== */
body.theme-retro95 #friends-panel,
:root[data-theme="retro95"] #friends-panel,
body.theme-retro95 #chat-panel,
:root[data-theme="retro95"] #chat-panel {
  background-color: #c0c0c0 !important;
  color: #000000 !important;
  font-family: 'MS Sans Serif', Tahoma, 'Segoe UI', Geneva, sans-serif !important;
}

body.theme-retro95 #friends-panel .toggle-btn,
:root[data-theme="retro95"] #friends-panel .toggle-btn {
  background: #c0c0c0 !important;
  color: #000000 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080 !important;
  border-radius: 0 !important;
  font-weight: bold !important;
}

body.theme-retro95 #friends-panel .toggle-btn.active,
:root[data-theme="retro95"] #friends-panel .toggle-btn.active {
  background: #dfdfdf !important;
  color: #000000 !important;
  border-top: 2px solid #000000 !important;
  border-left: 2px solid #000000 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #808080 !important;
  border-radius: 0 !important;
}

body.theme-retro95 #friends-panel .toggle-btn:hover:not(.active),
:root[data-theme="retro95"] #friends-panel .toggle-btn:hover:not(.active) {
  background: #d4d0c8 !important;
  color: #000000 !important;
}

body.theme-retro95 #friends-panel .player-entry:hover,
body.theme-retro95 #friends-panel .friend-entry:hover,
body.theme-retro95 #friends-panel .friend-request-entry:hover,
:root[data-theme="retro95"] #friends-panel .player-entry:hover,
:root[data-theme="retro95"] #friends-panel .friend-entry:hover,
:root[data-theme="retro95"] #friends-panel .friend-request-entry:hover {
  background-color: #000080 !important;
  color: #ffffff !important;
}

body.theme-retro95 #friends-panel .player-entry:hover *,
body.theme-retro95 #friends-panel .friend-entry:hover *,
body.theme-retro95 #friends-panel .friend-request-entry:hover *,
:root[data-theme="retro95"] #friends-panel .player-entry:hover *,
:root[data-theme="retro95"] #friends-panel .friend-entry:hover *,
:root[data-theme="retro95"] #friends-panel .friend-request-entry:hover * {
  color: #ffffff !important;
}

body.theme-retro95 #friends-panel .player-entry.selected,
body.theme-retro95 #friends-panel .friend-entry.selected,
:root[data-theme="retro95"] #friends-panel .player-entry.selected,
:root[data-theme="retro95"] #friends-panel .friend-entry.selected {
  background-color: #000080 !important;
  color: #ffffff !important;
}

body.theme-retro95 #friends-panel .player-entry.selected *,
body.theme-retro95 #friends-panel .friend-entry.selected *,
:root[data-theme="retro95"] #friends-panel .player-entry.selected *,
:root[data-theme="retro95"] #friends-panel .friend-entry.selected * {
  color: #ffffff !important;
}

body.theme-retro95 #friends-panel .context-menu-item:hover,
:root[data-theme="retro95"] #friends-panel .context-menu-item:hover {
  background-color: #000080 !important;
  color: #ffffff !important;
}

body.theme-retro95 #friends-panel .room-header:hover,
:root[data-theme="retro95"] #friends-panel .room-header:hover {
  background-color: #000080 !important;
  color: #ffffff !important;
}

body.theme-retro95 #friends-panel .unread-badge,
body.theme-retro95 #friends-panel .toggle-badge,
:root[data-theme="retro95"] #friends-panel .unread-badge,
:root[data-theme="retro95"] #friends-panel .toggle-badge {
  background-color: #000080 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  border: 1px solid #ffffff !important;
  font-weight: bold !important;
  box-shadow: none !important;
}

body.theme-retro95 #chat-panel .pm-send-btn,
body.theme-retro95 #chat-panel .public-chat-send-button,
body.theme-retro95 #chat-panel .page-chat-send-button,
:root[data-theme="retro95"] #chat-panel .pm-send-btn,
:root[data-theme="retro95"] #chat-panel .public-chat-send-button,
:root[data-theme="retro95"] #chat-panel .page-chat-send-button {
  background: #c0c0c0 !important;
  color: #000000 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080 !important;
  border-radius: 0 !important;
  font-weight: bold !important;
  text-shadow: none !important;
}

body.theme-retro95 #chat-panel .pm-send-btn:hover,
body.theme-retro95 #chat-panel .public-chat-send-button:hover,
body.theme-retro95 #chat-panel .page-chat-send-button:hover,
:root[data-theme="retro95"] #chat-panel .pm-send-btn:hover,
:root[data-theme="retro95"] #chat-panel .public-chat-send-button:hover,
:root[data-theme="retro95"] #chat-panel .page-chat-send-button:hover {
  background: #d4d0c8 !important;
  color: #000000 !important;
}

body.theme-retro95 #chat-panel .pm-send-btn:active,
body.theme-retro95 #chat-panel .public-chat-send-button:active,
body.theme-retro95 #chat-panel .page-chat-send-button:active,
:root[data-theme="retro95"] #chat-panel .pm-send-btn:active,
:root[data-theme="retro95"] #chat-panel .public-chat-send-button:active,
:root[data-theme="retro95"] #chat-panel .page-chat-send-button:active {
  border-top: 2px solid #000000 !important;
  border-left: 2px solid #000000 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #808080 !important;
}

body.theme-retro95 #chat-panel #encryption-key-confirm,
:root[data-theme="retro95"] #chat-panel #encryption-key-confirm {
  background: #c0c0c0 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080 !important;
  border-radius: 0 !important;
  color: #000000 !important;
}

body.theme-retro95 #chat-panel .media-btn,
body.theme-retro95 #chat-panel .emoji-btn,
:root[data-theme="retro95"] #chat-panel .media-btn,
:root[data-theme="retro95"] #chat-panel .emoji-btn {
  background: #c0c0c0 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080 !important;
  border-radius: 0 !important;
  color: #000000 !important;
}

body.theme-retro95 #chat-panel .media-btn:hover,
body.theme-retro95 #chat-panel .emoji-btn:hover,
body.theme-retro95 #chat-panel .media-menu-item:hover,
:root[data-theme="retro95"] #chat-panel .media-btn:hover,
:root[data-theme="retro95"] #chat-panel .emoji-btn:hover,
:root[data-theme="retro95"] #chat-panel .media-menu-item:hover {
  background-color: #000080 !important;
  color: #ffffff !important;
}

/* Retro95 Grey Chassis, Headers, Bars, Tabs & Panels */
body.theme-retro95 #friends-panel,
body.theme-retro95 #chat-panel,
body.theme-retro95 #friends-panel .window-panel,
body.theme-retro95 #chat-panel .window-panel,
body.theme-retro95 #chat-panel #chat-content-area,
body.theme-retro95 #friends-panel #friends-panel-content,
:root[data-theme="retro95"] #friends-panel,
:root[data-theme="retro95"] #chat-panel,
:root[data-theme="retro95"] #friends-panel .window-panel,
:root[data-theme="retro95"] #chat-panel .window-panel,
:root[data-theme="retro95"] #chat-panel #chat-content-area,
:root[data-theme="retro95"] #friends-panel #friends-panel-content {
  background-color: #c0c0c0 !important;
  color: #000000 !important;
  font-family: 'MS Sans Serif', Tahoma, 'Segoe UI', Geneva, sans-serif !important;
}

body.theme-retro95 #chat-panel .panel-header,
body.theme-retro95 #friends-panel .panel-header,
:root[data-theme="retro95"] #chat-panel .panel-header,
:root[data-theme="retro95"] #friends-panel .panel-header {
  background-color: #c0c0c0 !important;
  color: #000000 !important;
  border-bottom: 2px solid #808080 !important;
}

body.theme-retro95 #chat-panel #chat-header,
:root[data-theme="retro95"] #chat-panel #chat-header {
  background-color: #c0c0c0 !important;
  border-bottom: 2px solid #808080 !important;
}

body.theme-retro95 #chat-panel .chat-tab,
:root[data-theme="retro95"] #chat-panel .chat-tab {
  background-color: #b0b0b0 !important;
  color: #000000 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #808080 !important;
  border-bottom: 2px solid #808080 !important;
  border-radius: 3px 3px 0 0 !important;
}

body.theme-retro95 #chat-panel .chat-tab.active,
:root[data-theme="retro95"] #chat-panel .chat-tab.active {
  background-color: #c0c0c0 !important;
  color: #000000 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #c0c0c0 !important;
  border-radius: 3px 3px 0 0 !important;
  font-weight: bold !important;
}

body.theme-retro95 #chat-panel #encryption-bar,
:root[data-theme="retro95"] #chat-panel #encryption-bar {
  background-color: #c0c0c0 !important;
  border-bottom: 2px solid #808080 !important;
}

body.theme-retro95 #chat-panel .chat-input-form,
:root[data-theme="retro95"] #chat-panel .chat-input-form {
  background-color: #c0c0c0 !important;
  border-top: 2px solid #ffffff !important;
  box-shadow: 0 -1px 0 #808080 !important;
}

body.theme-retro95 #friends-panel #sidebar-toggle,
:root[data-theme="retro95"] #friends-panel #sidebar-toggle {
  background-color: #b0b0b0 !important;
  border-top: 2px solid #808080 !important;
  border-left: 2px solid #808080 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #000000 !important;
  border-radius: 0 !important;
}

body.theme-retro95 #friends-panel .room-header:not(:hover),
:root[data-theme="retro95"] #friends-panel .room-header:not(:hover) {
  background-color: #c0c0c0 !important;
  color: #000000 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #808080 !important;
  border-bottom: 2px solid #808080 !important;
  box-shadow: inset 1px 1px 0 #dfdfdf !important;
  font-weight: bold !important;
  border-radius: 0 !important;
}

body.theme-retro95 #friends-panel .player-entry,
body.theme-retro95 #friends-panel .friend-entry,
:root[data-theme="retro95"] #friends-panel .player-entry,
:root[data-theme="retro95"] #friends-panel .friend-entry {
  color: #000000 !important;
  border-bottom: 1px solid #d4d0c8 !important;
}

/* Retro95 White Text Areas & Sunken Message/List Viewports with Black Lettering */
body.theme-retro95 #chat-panel input,
body.theme-retro95 #chat-panel textarea,
body.theme-retro95 #friends-panel input,
body.theme-retro95 #friends-panel textarea,
body.theme-retro95 #chat-panel .pm-input,
body.theme-retro95 #chat-panel .public-chat-input,
body.theme-retro95 #chat-panel .page-chat-input,
body.theme-retro95 #chat-panel #encryption-key-input,
body.theme-retro95 #chat-panel .pm-encryption-key,
:root[data-theme="retro95"] #chat-panel input,
:root[data-theme="retro95"] #chat-panel textarea,
:root[data-theme="retro95"] #friends-panel input,
:root[data-theme="retro95"] #friends-panel textarea,
:root[data-theme="retro95"] #chat-panel .pm-input,
:root[data-theme="retro95"] #chat-panel .public-chat-input,
:root[data-theme="retro95"] #chat-panel .page-chat-input,
:root[data-theme="retro95"] #chat-panel #encryption-key-input,
:root[data-theme="retro95"] #chat-panel .pm-encryption-key {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-top: 2px solid #808080 !important;
  border-left: 2px solid #808080 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf !important;
  border-radius: 0 !important;
}

body.theme-retro95 #chat-panel input::placeholder,
body.theme-retro95 #chat-panel textarea::placeholder,
body.theme-retro95 #friends-panel input::placeholder,
body.theme-retro95 #friends-panel textarea::placeholder,
:root[data-theme="retro95"] #chat-panel input::placeholder,
:root[data-theme="retro95"] #chat-panel textarea::placeholder,
:root[data-theme="retro95"] #friends-panel input::placeholder,
:root[data-theme="retro95"] #friends-panel textarea::placeholder {
  color: #666666 !important;
  opacity: 1 !important;
}

body.theme-retro95 #chat-panel .chat-messages,
:root[data-theme="retro95"] #chat-panel .chat-messages,
body.theme-retro95 #friends-panel #rooms-list,
body.theme-retro95 #friends-panel #friends-list,
body.theme-retro95 #friends-panel #player-list,
:root[data-theme="retro95"] #friends-panel #rooms-list,
:root[data-theme="retro95"] #friends-panel #friends-list,
:root[data-theme="retro95"] #friends-panel #player-list {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-top: 2px solid #808080 !important;
  border-left: 2px solid #808080 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf !important;
  border-radius: 0 !important;
}

body.theme-retro95 #chat-panel .chat-messages p,
:root[data-theme="retro95"] #chat-panel .chat-messages p {
  color: #000000 !important;
}

body.theme-retro95 #chat-panel .chat-messages .timestamp,
:root[data-theme="retro95"] #chat-panel .chat-messages .timestamp {
  color: #555555 !important;
}

body.theme-retro95 #chat-panel .chat-messages .username,
:root[data-theme="retro95"] #chat-panel .chat-messages .username {
  color: #000080 !important;
}

body.theme-retro95 #chat-panel #decryption-output,
:root[data-theme="retro95"] #chat-panel #decryption-output {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-top: 2px solid #808080 !important;
  border-left: 2px solid #808080 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf !important;
}

/* ==========================================================================
   Universal Navigation Bar Theming (Ultra-Glossy Frutiger Aero Styling)
   ========================================================================== */
#shared-nav-container {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 48%, rgba(0, 0, 0, 0.12) 50%, rgba(255, 255, 255, 0.05) 100%), var(--nav-bg) !important;
  border-bottom: var(--nav-border) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.4), var(--nav-shadow) !important;
  font-family: var(--nav-font, sans-serif) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#shared-nav-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
  z-index: 1;
}

#shared-nav-container > * {
  position: relative;
  z-index: 2;
}

#shared-nav-container .nav-link,
#shared-nav-container .nav-dropbtn {
  color: var(--nav-text) !important;
  font-family: var(--nav-font, sans-serif) !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  padding: 7px 13px !important;
  margin: 0 2px !important;
  transition: all 0.2s ease !important;
}

#shared-nav-container .nav-link:hover,
#shared-nav-container .nav-dropdown:hover .nav-dropbtn,
#shared-nav-container .nav-dropdown.active .nav-dropbtn {
  color: var(--nav-text-hover) !important;
  text-shadow: var(--nav-text-glow) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 49%, rgba(0, 0, 0, 0.06) 50%, rgba(255, 255, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-top-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#shared-nav-container .nav-link.active,
#shared-nav-container .nav-link[data-active="true"] {
  color: #ffffff !important;
  font-weight: bold !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), var(--nav-text-glow) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.14) 49%, rgba(0, 0, 0, 0.12) 50%, rgba(255, 255, 255, 0.16) 100%), var(--nav-accent) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-top-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.75), 0 2px 10px var(--nav-glow) !important;
}

#shared-nav-container .nav-dropdown-content {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.15) 100%), var(--nav-dropdown-bg) !important;
  border: var(--nav-dropdown-border) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 12px 30px rgba(0, 0, 0, 0.65), var(--nav-dropdown-shadow) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  padding: 6px !important;
}

#shared-nav-container .nav-dropdown-content a {
  color: var(--nav-text) !important;
  font-family: var(--nav-font, sans-serif) !important;
  padding: 9px 14px !important;
  margin: 2px 0 !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

#shared-nav-container .nav-dropdown-content a:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 49%, rgba(0, 0, 0, 0.06) 50%, rgba(255, 255, 255, 0.1) 100%), var(--nav-dropdown-hover-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  color: var(--nav-dropdown-hover-text) !important;
  text-shadow: var(--nav-text-glow) !important;
}

#shared-nav-container .nav-dropdown-content a.active,
#shared-nav-container .nav-dropdown-content a[data-active="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 49%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.12) 100%), var(--nav-accent) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-top-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
  font-weight: bold !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

#shared-nav-container .hamburger {
  color: var(--nav-text) !important;
  transition: color 0.2s;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}

#shared-nav-container .hamburger:hover {
  color: var(--nav-text-hover) !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

#shared-nav-container #nav-user-label {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.18) 100%), rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-top-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  color: var(--nav-user-color) !important;
  font-weight: bold !important;
  font-size: 0.88rem !important;
  text-shadow: var(--nav-user-glow) !important;
  font-family: var(--nav-font, sans-serif) !important;
  padding: 5px 12px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#shared-nav-container #nav-logout-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(0, 0, 0, 0.18) 100%), var(--nav-logout-bg) !important;
  border: var(--nav-logout-border) !important;
  border-top-color: rgba(255, 255, 255, 0.55) !important;
  color: var(--nav-logout-color) !important;
  padding: 5px 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  font-family: var(--nav-font, monospace) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s ease !important;
}

#shared-nav-container #nav-logout-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.14) 49%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.15) 100%), var(--nav-logout-hover-bg) !important;
  color: var(--nav-logout-hover-color) !important;
  border-color: var(--nav-logout-color) !important;
  border-top-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 0 14px rgba(255, 51, 102, 0.6) !important;
}

#shared-nav-container #nav-login-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(0, 0, 0, 0.18) 100%), var(--nav-login-bg) !important;
  border: var(--nav-login-border) !important;
  border-top-color: rgba(255, 255, 255, 0.55) !important;
  color: var(--nav-login-color) !important;
  padding: 5px 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  font-family: var(--nav-font, monospace) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s ease !important;
}

#shared-nav-container #nav-login-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.14) 49%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.15) 100%), var(--nav-login-hover-bg) !important;
  color: var(--nav-login-hover-color) !important;
  border-color: var(--nav-login-color) !important;
  border-top-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 0 14px rgba(0, 255, 136, 0.6) !important;
}

#shared-nav-container #nav-report-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.15) 100%), rgba(234, 179, 8, 0.18) !important;
  border: 1px solid rgba(234, 179, 8, 0.55) !important;
  border-top-color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
}

#shared-nav-container #nav-report-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(0, 0, 0, 0.1) 100%), rgba(234, 179, 8, 0.35) !important;
  border-color: #facc15 !important;
  border-top-color: rgba(255, 255, 255, 0.75) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 12px rgba(250, 204, 21, 0.55) !important;
}

#shared-nav-container.nav-compact #nav-links-container {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.15) 100%), var(--nav-bg) !important;
  border-bottom: var(--nav-border) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 12px 24px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  padding: 10px !important;
  gap: 4px !important;
}
#shared-nav-container.nav-compact .nav-link {
  width: 100% !important;
  box-sizing: border-box !important;
}
#shared-nav-container.nav-compact .nav-dropdown-content {
  border-left: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 768px) {
  #shared-nav-container #nav-links-container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.15) 100%), var(--nav-bg) !important;
    border-bottom: var(--nav-border) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 12px 24px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    padding: 10px !important;
    gap: 4px !important;
  }
  #shared-nav-container .nav-link {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #shared-nav-container .nav-dropdown-content {
    border-left: 2px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  }
}

/* ==========================================================================
   Retro95 Windows 95 Taskbar Navigation Bar Overrides
   ========================================================================== */
body.theme-retro95 #shared-nav-container,
:root[data-theme="retro95"] #shared-nav-container {
  background: #c0c0c0 !important;
  border-top: 2px solid #ffffff !important;
  border-bottom: 2px solid #808080 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.theme-retro95 #shared-nav-container::before,
:root[data-theme="retro95"] #shared-nav-container::before {
  display: none !important;
}

body.theme-retro95 #shared-nav-container .nav-link,
body.theme-retro95 #shared-nav-container .nav-dropbtn,
:root[data-theme="retro95"] #shared-nav-container .nav-link,
:root[data-theme="retro95"] #shared-nav-container .nav-dropbtn {
  color: #000000 !important;
  background: #c0c0c0 !important;
  border-radius: 0 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080 !important;
  text-shadow: none !important;
  font-weight: normal !important;
}

body.theme-retro95 #shared-nav-container .nav-link:hover,
body.theme-retro95 #shared-nav-container .nav-dropdown:hover .nav-dropbtn,
body.theme-retro95 #shared-nav-container .nav-dropdown.active .nav-dropbtn,
:root[data-theme="retro95"] #shared-nav-container .nav-link:hover,
:root[data-theme="retro95"] #shared-nav-container .nav-dropdown:hover .nav-dropbtn,
:root[data-theme="retro95"] #shared-nav-container .nav-dropdown.active .nav-dropbtn {
  background: #dfdfdf !important;
  color: #000000 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080 !important;
  text-shadow: none !important;
}

body.theme-retro95 #shared-nav-container .nav-link.active,
body.theme-retro95 #shared-nav-container .nav-link[data-active="true"],
:root[data-theme="retro95"] #shared-nav-container .nav-link.active,
:root[data-theme="retro95"] #shared-nav-container .nav-link[data-active="true"] {
  background: #dfdfdf !important;
  color: #000000 !important;
  border-top: 2px solid #000000 !important;
  border-left: 2px solid #000000 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #808080 !important;
  font-weight: bold !important;
  text-shadow: none !important;
}

body.theme-retro95 #shared-nav-container .nav-dropdown-content,
:root[data-theme="retro95"] #shared-nav-container .nav-dropdown-content {
  background: #c0c0c0 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.theme-retro95 #shared-nav-container .nav-dropdown-content a,
:root[data-theme="retro95"] #shared-nav-container .nav-dropdown-content a {
  color: #000000 !important;
  border-radius: 0 !important;
  font-weight: normal !important;
}

body.theme-retro95 #shared-nav-container .nav-dropdown-content a:hover,
:root[data-theme="retro95"] #shared-nav-container .nav-dropdown-content a:hover {
  background: #000080 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}

body.theme-retro95 #shared-nav-container #nav-user-label,
:root[data-theme="retro95"] #shared-nav-container #nav-user-label {
  background: #c0c0c0 !important;
  border-top: 2px solid #808080 !important;
  border-left: 2px solid #808080 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf !important;
  border-radius: 0 !important;
  color: #000000 !important;
  text-shadow: none !important;
}

body.theme-retro95 #shared-nav-container #nav-login-btn,
body.theme-retro95 #shared-nav-container #nav-logout-btn,
body.theme-retro95 #shared-nav-container #nav-report-btn,
:root[data-theme="retro95"] #shared-nav-container #nav-login-btn,
:root[data-theme="retro95"] #shared-nav-container #nav-logout-btn,
:root[data-theme="retro95"] #shared-nav-container #nav-report-btn {
  background: #c0c0c0 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080 !important;
  border-radius: 0 !important;
  color: #000000 !important;
  text-shadow: none !important;
}