* 1MARSITE2 - COMPLETE THEME SYSTEM */

/* Base defaults */
:root {
  --bg-page: #0b0b10;
  --bg-card: #131320;
  --border-color: #555;
  --border-width: 2px;
  --border-style: solid;
  --border-radius: 8px;
  --text-color: #f5f5f5;
  --accent: #ff4081;

  --accent-color: #ce0021;
  --glass-bg: rgba(0, 0, 0, 0.5);
  --glass-border: rgba(255, 255, 255, 0.15);
  --text-color: #ffffff;

  --shadow-soft: 0 4px 10px rgba(0,0,0,0.4);
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Global usage */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-color);
  font-family: var(--font-main);
  transition: background 0.4s ease, color 0.4s ease;
}

.main-container,
.card,
.product-tile {
  background: var(--bg-card);
  border-color: var(--border-color);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  transition: background 0.4s ease, border 0.2s ease, box-shadow 0.2s ease;
}

.button,
.nav-tab {
  background: var(--accent);
  border-radius: calc(var(--border-radius) / 1.5);
}

/* Fix form/dropdown backgrounds */
select,
input,
textarea,
option,
.wp-block-search__input,
.dropdown-menu {
  background: var(--bg-card) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

/* Specific dropdown/popover fixes */
body * select,
body * [role="combobox"],
body * .select__control {
  background: var(--bg-card) !important;
  color: var(--text-color) !important;
}




* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-color);
  font-family: var(--font-main);
  transition: all 0.4s ease;
}

/* BASE COMPONENT STYLES */
header,
.hero-header {
  background: var(--bg-page);
  box-shadow: var(--shadow-soft);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav,
.hero-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
}

nav a,
.hero-nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: bold;
  font-family: 'Oswald', sans-serif;
  font-size: 0.9rem;
  padding: 1.1em 1.4em;
  letter-spacing: 1.2px;
  border-bottom: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  transition: all 0.2s ease;
}

nav a:hover,
.hero-nav a:hover,
nav a.active,
.hero-nav a.active {
  color: var(--text-color);
  background: linear-gradient(90deg, var(--accent), var(--accent) 80%);
  border-bottom: 3px solid var(--text-color);
}

.block-container,
.main-container,
.card,
.product-tile {
  max-width: 900px;
  margin: 3rem auto;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  padding: 2.5rem 2rem;
  border: var(--border-width) var(--border-style) var(--border-color);
}

h1, h2, h3 {
  font-family: 'Oswald', sans-serif;
  color: var(--accent);
  background-image: linear-gradient(90deg, var(--accent) 17%, var(--text-color) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem;
  letter-spacing: 2px;
  margin-bottom: 1.3rem;
}

.button,
.nav-tab,
.buy-btn,
.cta {
  background: var(--accent);
  color: var(--text-color);
  border-radius: calc(var(--border-radius) / 1.5);
  transition: all 0.3s ease;
}

.theme-switcher {
  position: fixed;
  top: 90px; right: 20px;
  z-index: 9999;
  padding: 8px 12px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-color);
  font-size: 14px;
}





/* ========= DARK THEMES (10) ========= */

/* 1. Obsidian Core – smooth chrome, sharp corners */

body.obsidian-core {
  --bg-page: radial-gradient(circle at top, #020617 0, #06030C 0%, #000 50%);
  --bg-card: #06030C;
  --border-color: #e5e7eb;
  --border-width: 20px;
  --border-style: double;
  --border-radius: 14px;
  --text-color: #e5e7eb;
  --accent: #676B6E;
--accent-glow: #7c3aed;  /* brighter version for glows */

--shadow-soft: 0 0 0 1px rgba(255,23,42,0.9), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 2. Nightfall Indigo – smooth chrome, medium radius */
body.nightfall-indigo {
  --bg-page: radial-gradient(circle at top, #1e1b4b 0, #4B0082 60%, #000 100%);
  --bg-card: #020617;
  --border-color: #c7d2fe;
  --border-width: 20px;
  --border-style: double;
  --border-radius: 8px;
  --text-color: #e0e7ff;
  --accent: #4B0082;
  --shadow-soft: 0 0 0 1px rgba(255,23,42,0.9), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 3. Carbon Pulse – bold chrome band, sharp corners */
body.carbon-pulse {
  --bg-page: radial-gradient(circle at top, #020617 0, #676B6E 50%, #000 100%);
  --bg-card: #020617;
  --border-color: #686972;
  --border-width: 20px;
  --border-style: double;
  --border-radius: 12px;
  --text-color: #e5e7eb;
  --accent: #676B6E;
  --shadow-soft: 0 0 0 1px rgba(255,23,42,0.9), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 4. Shadow Ember – bold chrome, medium radius */
body.shadow-ember {
  --bg-page: radial-gradient(circle at top, #450a0a 0, #F9A851 60%, #000 100%);
  --bg-card: #020617;
  --border-color:#F9A851;
  --border-width: 15px;
  --border-style: double;
  --border-radius: 20px;
  --text-color: #fee2e2;
  --accent: #8C3F30;
  --shadow-soft: 0 0 0 1px rgba(127,29,29,0.9), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 5. Astral Void – smooth chrome, large radius */
body.astral-void {
  --bg-page: radial-gradient(circle at top, #4c1d95 0, #306789 55%, #020617 100%);
  --bg-card: #020617;
  --border-color: #e9d5ff;
  --border-width: 14px;
  --border-style: double;
  --border-radius: 24px;
  --text-color: #f5f3ff;
  --accent: #306789;
  --shadow-soft: 0 0 0 1px rgba(76,29,149,0.9), 0 20px 45px rgba(0,0,0,0.9);
  --font-main: var(--font-main);
}

/* 6. Blackwater Depths – subtle chrome, medium radius */
body.blackwater-depths {
  --bg-page: radial-gradient(circle at top, #022c22 0, #ABE098 55%, #000 100%);
  --bg-card: #020617;
  --border-color: #a5f3fc;
  --border-width: 24px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #ffffff;
  --accent: #ABE098;
  --shadow-soft: 0 0 0 1px rgba(15,23,42,0.9), 0 20px 45px rgba(0,0,0,0.9);
  --font-main: var(--font-main);
}

/* 7. Grimlight – subtle chrome, medium radius */
body.grimlight {
  --bg-page: radial-gradient(circle at top, #111827 0, #FFDD3C 60%, #000 100%);
  --bg-card: #020617;
  --border-color: #111827;
  --border-width: 33px;
  --border-style: double;
  --border-radius: 18px;
  --text-color: #EA4C46;
  --accent: #FFDD3C;
  --shadow-soft: 0 0 0 1px rgba(31,41,55,0.9), 0 18px 40px rgba(0,0,0,0.9);
  --font-main: var(--font-main);
}

/* 8. Phantom Rose – warm chrome, large radius */
body.phantom-rose {
  --bg-page: radial-gradient(circle at top, #111827 0, #bd5195 55%, #000 100%);
  --bg-card: #020617;
  --border-color: #bd5195;
  --border-width: 24px;
  --border-style: double;
  --border-radius: 16px;
  --text-color: #ECE4D0;
  --accent: #bd5195;
  --shadow-soft: 0 0 0 1px rgba(127,29,29,0.8), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 9. Dark Aurora – bold chrome, large radius */
body.dark-aurora {
  --bg-page: radial-gradient(circle at top, #022c22 0, #16361b 50%, #020617 100%);
  --bg-card: #16361b;
  --border-color: #a5b4fc;
  --border-width: 15px;
  --border-style: double;
  --border-radius: 4px;
  --text-color: #e5e7eb;
  --accent: #070000;
  --shadow-soft: 0 0 0 1px rgba(15,23,42,0.9), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 10. Terminal Ghost – subtle chrome, sharp corners */
body.terminal-ghost {
  --bg-page: radial-gradient(circle at top, #020617 0, #000 60%, #000 100%);
  --bg-card: #468250;
  --border-color: #bbf7d0;
  --border-width: 13px;
  --border-style: double;
  --border-radius: 22px;
  --text-color: #ffffff;
  --accent: #020617;
  --shadow-soft: 0 0 0 1px rgba(0,0,0,1), 0 20px 45px rgba(0,0,0,1);
  --font-main: "Courier New", monospace;
}

/* ========= METALLIC MIRROR-CHROME THEMES (10) ========= */

/* 11. Steel Horizon – cool pure chrome, medium radius */
body.steel-horizon {
  --bg-page: radial-gradient(circle at top, #646e6c 0, #615C55 40%, #f9fafb 100%);
  --bg-card: #646e6c;
  --border-color: #e5e7eb;
  --border-width: 15px;
  --border-style: double;
  --border-radius: 8px;
  --text-color: #000000;
  --accent: #CFD2D4;
  --shadow-soft: 0 0 0 1px rgba(148,163,184,0.9), 0 18px 40px rgba(15,23,42,0.5);
  --font-main: var(--font-main);
}




/* 16. Copper Ember – warm tinted chrome, large radius */
body.copper-ember {
  --bg-page: radial-gradient(circle at top, #CB6D51 0, #FF69B4 40%, #DD9B72 100%);
  --bg-card: #CB6D51;
  --border-color: #FF69B4;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 14px;
  --text-color: #fef3c7;
  --accent: #DD9B72;
  --shadow-soft: 0 0 0 1px rgba(180,83,9,0.9), 0 20px 45px rgba(120,53,15,0.7);
  --font-main: var(--font-main);
}

/* 17. Gunmetal Alloy – dark tinted chrome, sharp corners */
body.gunmetal-alloy {
  --bg-page: radial-gradient(circle at top, #111827 0, #020617 50%, #000 100%);
  --bg-card: #20202b;
  --border-color: #37374a;
  --border-width: 15px;
  --border-style: double;
  --border-radius: 13px;
  --text-color: #e5e7eb;
  --accent: #37374a;
  --shadow-soft: 0 0 0 1px rgba(15,23,42,1), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 18. Gold Royale – warm chrome, large radius */
body.gold-royale {
  --bg-page: radial-gradient(circle at top, #92400e 0, #facc15 40%, #92400e 100%);
  --bg-card: #facc15;
  --border-color: #92400e;
  --border-width: 36px;
  --border-style: double;
  --border-radius: 26px;
  --text-color: #ffffff;
  --accent: #92400e;
  --shadow-soft: 0 0 0 1px rgba(402,138,4,0.9), 0 22px 50px rgba(120,53,15,0.7);
  --font-main: var(--font-main);
}

/* 19. Bronze Forge – warm tinted chrome, medium radius */
body.bronze-forge {
  --bg-page: radial-gradient(circle at top, #7a3515 0, #7c2d12 40%, #cd7f32 100%);
  --bg-card: #cd7f32;
  --border-color: #fed7aa;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #ffffff;
  --accent: #c95718;
  --shadow-soft: 0 0 0 1px rgba(124,45,18,0.9), 0 20px 45px rgba(120,53,15,0.7);
  --font-main: var(--font-main);
}

/* 20. Ironclad – black chrome, sharp corners */
body.ironclad {
  --bg-page: radial-gradient(circle at top, #615C55 0, #615C55 50%, #615C55 100%);
  --bg-card: #615C55;
  --border-color: #e5e7eb;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 2px;
  --text-color: #ffffff;
--accent: #8B008B;
  --shadow-soft: 0 0 0 1px rgba(15,23,42,1), 0 26px 60px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* ========= NEON CHROME-GLOW THEMES (10) ========= */

/* 21. Neon Magenta – bold chrome, medium radius */
body.neon-magenta {
  --bg-page: radial-gradient(circle at top, #301934 0, #1e0030 55%, #000 100%);
  --bg-card: #B000AF;
  --border-color: #f9a8d4;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #fdf2ff;
  --accent: #301934;
  --shadow-soft: 0 0 0 1px rgba(236,72,153,0.7), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 22. Cyber Lime – bold chrome, sharp corners */
body.cyber-lime {
  --bg-page: radial-gradient(circle at top, #1a2e05 0, #020617 55%, #000 100%);
  --bg-card: #1a2e05;
  --border-color: #bef264;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 3px;
  --text-color: #ffffff;
  --accent: #020617;
  --shadow-soft: 0 0 0 1px rgba(22,101,52,0.9), 0 26px 60px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 23. Vaporwave Sunset – smooth chrome, large radius */
body.vaporwave-sunset {
  --bg-page: radial-gradient(circle at top, #f97316 0, #ec4899 40%, #4f46e5 100%);
  --bg-card: #1e1b4b;
  --border-color: #f9a8d4;
  --border-width: 4px;
  --border-style: double;
  --border-radius: 16px;
  --text-color: #fdf2ff;
  --accent: #22d3ee;
  --shadow-soft: 0 0 0 1px rgba(129,140,248,0.8), 0 22px 50px rgba(15,23,42,0.9);
  --font-main: var(--font-main);
}

/* 24. Arcade Blue – bold chrome, medium radius */
body.arcade-blue {
  --bg-page: radial-gradient(circle at top, #0f172a 0, #020617 55%, #000 100%);
  --bg-card: #020617;
  --border-color: #38bdf8;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 8px;
  --text-color: #EDDDB8;
  --accent: #FF8B00;
  --shadow-soft: 0 0 0 1px rgba(56,189,248,0.7), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 25. Laser Grid – bold chrome, sharp corners */
body.laser-grid {
  --bg-page: radial-gradient(circle at top, #1e1b4b 0, #020617 60%, #000 100%);
  --bg-card: #020617;
  --border-color: #a5b4fc;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 2px;
  --text-color: #e5e7eb;
  --accent: #22d3ee;
  --shadow-soft: 0 0 0 1px rgba(129,140,248,0.8), 0 26px 60px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 26. Synthwave Horizon – smooth chrome, large radius */
body.synthwave-horizon {
  --bg-page: radial-gradient(circle at top, #f97316 0, #ec4899 40%, #4c1d95 100%);
  --bg-card: #1e1b4b;
  --border-color: #f9a8d4;
  --border-width: 4px;
  --border-style: double;
  --border-radius: 16px;
  --text-color: #fdf2ff;
  --accent: #fb7185;
  --shadow-soft: 0 0 0 1px rgba(236,72,153,0.8), 0 22px 50px rgba(15,23,42,0.9);
  --font-main: var(--font-main);
}

/* 27. Neon Orchid – bold chrome, medium radius */
body.neon-orchid {
  --bg-page: radial-gradient(circle at top, #4c1d95 0, #1e0030 55%, #000 100%);
  --bg-card: #050014;
  --border-color: #e9d5ff;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #f5f3ff;
  --accent: #a855f7;
  --shadow-soft: 0 0 0 1px rgba(168,85,247,0.8), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 28. Electric Aqua – smooth chrome, medium radius */
body.electric-aqua {
  --bg-page: radial-gradient(circle at top, #53bcbd 0, #020617 55%, #000 100%);
  --bg-card: #53bcbd;
  --border-color: #a5f3fc;
  --border-width: 4px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #e0f2fe;
  --accent: #020617;
  --shadow-soft: 0 0 0 1px rgba(56,189,248,0.7), 0 22px 50px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 29. Hypernova – bold chrome, sharp corners */
body.hypernova {
  --bg-page: radial-gradient(circle at top, #1e1b4b 0, #f97316 75%, #4c1d95 50%);
  --bg-card: #1e1b4b;
  --border-color: #fef9c3;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 3px;
  --text-color: #fefce8;
  --accent: #eab308;
  --shadow-soft: 0 0 0 1px rgba(234,179,8,0.9), 0 26px 60px rgba(15,23,42,1);
  --font-main: var(--font-main);
}

/* 30. Circuit Breaker – bold chrome, medium radius */
body.circuit-breaker {
  --bg-page: radial-gradient(circle at top, #022c22 0, #020617 55%, #000 100%);
  --bg-card: #020617;
  --border-color: #bbf7d0;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 8px;
  --text-color: #bbf7d0;
  --accent: #22c55e;
  --shadow-soft: 0 0 0 1px rgba(34,197,94,0.8), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* TEMP TEST - remove after confirming */
body {
  outline: 3px solid red;
}
/* HeroSection.css */

/* Main hero header styles */
.hero-header {
  background: #000;
  box-shadow: 0 3px 14px #c3002170;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}






.hero-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  padding: 0.1em 1.4em;
  letter-spacing: 1.2px;
  border-bottom: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  transition: background 0.2s, color 0.2s;
}

.hero-nav a:hover,
.hero-nav a.active {
  color: #fff;
  background: linear-gradient(90deg, #c30021, #ff0059 80%);
  border-bottom: 3.5px solid #fff;
}

/* Hero block container section */
.block-container {
  max-width: 998px;
  width: 100%;
  margin: 3rem auto;
  background: rgba(20, 20, 23, 0.96);
  border-radius: 16px;
  box-shadow: 0 6px 36px #ce002155;
  padding: 2.5rem 2rem 2.5rem 2rem;
  border: 2px solid #151;

  display: flex;
  justify-content: center; /* centers content horizontally */
  align-items: center;     /* centers content vertically */
  flex-direction: column;  /* if content stacks vertically */
}


/* Headings */
.block-container h1,
.block-container h2 {
  font-family: 'Oswald', sans-serif;
  color: #ff0059;
   background-image: linear-gradient(90deg, #ff0059 17%, #fff 85%);
  font-size: 2rem;
  letter-spacing: 2px;
  margin-bottom: 1.3rem;
}

/* Paragraphs */
.block-container p {
  color: #fff;
  font-size: 1.1rem;
  font-family: 'Montserrat', sans-serif;
}

/* Call-to-action styling */
.cta {
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, #c30021, #ff0059 80%);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  margin: 1.4rem auto 0 auto;
  box-shadow: 0 4px 16px #c3002133;
  letter-spacing: 0.5px;
  display: inline-block;
}

/* Transparent floating panel */
.hero-panel {
  position: absolute;  /* floats over the hero image */
  top: 20%;            /* move down from top */
  left: 50%;
  transform: translateX(-50%);
  max-width: 800px;    /* smaller width */
  width: 90%;
  padding: 20px 30px;
  background: rgba(0,0,0,0.5);
  background: var(--glass-bg, rgba(0,0,0,0.5));  /* transparent, themeable */
  border: 10px solid rgba(255,255,255,0.15);
  border: 10px solid var(--glass-border, rgba(255,255,255,0.15));
  border-radius: 12px;
  color: #fff;
  color: var(--text-color, #fff);
  text-align: center;
  z-index: 10;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px); /* nice frosted effect */
}

.hero-panel h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-panel .cta {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

/* Keep carousel inside panel */
.hero-panel .preorder-carousel {
  text-align: center;
}
.hero{
position:relative;
height:100vh;
width:100%;


background-size:cover;
background-position:center;
background-attachment:fixed;

display:flex;
align-items:flex-end;

padding:40px;

overflow:hidden;
}



.hero-lights {
  background:
    radial-gradient(circle at 0% 30%, var(--accent-glow) 50%, transparent 40%),
    radial-gradient(circle at 80% 70%, #ff00cc 10%, transparent 40%);


position:absolute;
top:0;
left:0;

width:100%;
height:0%;

pointer-events:none;

background:
radial-gradient(circle at 20% 30%, var(--accent) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, #ff00cc 0%, transparent 40%);

opacity:.28;

animation:studioGlow 75s ease-in-out infinite alternate;

}

.hero-overlay{

max-width:900px;
width:100%;

padding:28px 34px;

background:var(--glass-bg);
-webkit-backdrop-filter:blur(14px);
        backdrop-filter:blur(14px);

border-radius:16px;
border:1px solid var(--glass-border);

color:var(--text-color);

font-size:1.2rem;
line-height:1.7;

box-shadow:0 15px 45px rgba(0,0,0,.45);

}

.accent-line{

width:80px;
height:3px;

margin-bottom:16px;

background:var(--accent);

border-radius:10px;

animation:glowline 3s ease-in-out infinite;

}

.purchase span{
color:var(--accent);
font-weight:600;
}

.hero-btn{

margin-top:16px;

padding:12px 22px;

border-radius:8px;

border:none;

font-size:1rem;
font-weight:600;

background:var(--accent);

color:#000;

cursor:pointer;

transition:all .25s ease;

}

.hero-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.35);
}

@keyframes glowline{

10%{opacity:.4;width:60px;}
50%{opacity:1;width:120px;}
100%{opacity:.4;width:60px;}

}

@keyframes studioGlow{

10%{transform:translateX(-5%) translateY(-3%) scale(1);}
50%{transform:translateX(4%) translateY(3%) scale(1.1);}
100%{transform:translateX(-3%) translateY(4%) scale(1);}

}

@media (max-width:768px){

.hero{
height:65vh;
padding:20px;
background-attachment:scroll;
}

.hero-overlay{
font-size:1rem;
padding:18px;
}

}


/* Root player shell */
.media-player-visual {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  grid-gap: 6.5rem;
  gap: 6.5rem;
  padding: 2.5rem;
  border-radius: 1px;
  background: radial-gradient(circle at top left, #202020 0, #050505 55%);
  background: var(--bg-card, radial-gradient(circle at top left, #202020 0, #050505 55%));
  border: 1px solid #ce0021;
  border: 1px solid var(--accent, #ce0021);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  box-shadow: var(--shadow-soft, 0 20px 60px rgba(0, 0, 0, 0.9));
  color: #fff;
  color: var(--text-color, #fff);
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  max-width: 920px;
  margin: 0 auto 2rem auto;
}

/* Left section: artwork + meta */
.media-player-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.media-player-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.6);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.media-player-cover-wrap:hover .media-player-cover {
  transform: scale(3.0);
  filter: saturate(1.2);
}

.media-player-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.media-player-label {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: #aaaaaa;
  color: var(--text-color, #aaaaaa);
  opacity: 0.7;
}

.media-player-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.05rem 0 0.15rem 0;
  color: #fff;
  color: var(--text-color, #fff);
}

.media-player-nowplaying {
  font-size: 0.85rem;
  color: #f0f0f0;
  color: var(--text-color, #f0f0f0);
  opacity: 0.85;
}

/* Album selector */
.media-player-album-select {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.media-player-album-select label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #bbbbbb;
  color: var(--text-color, #bbbbbb);
  opacity: 0.75;
}

.media-player-album-select select {
  background: #111;
  background: var(--bg-page, #111);
  border-radius: 999px;
  border: 1px solid #333;
  border: 1px solid var(--border-color, #333);
  padding: 0.4rem 0.75rem;
  color: #fff;
  color: var(--text-color, #fff);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.media-player-album-select select:focus {
  border-color: #ce0021;
  border-color: var(--accent, #ce0021);
  box-shadow: 0 0 0 1px #ce0021;
  box-shadow: 0 0 0 1px var(--accent, #ce0021);
  background: #181818;
  background: var(--bg-card, #181818);
}

/* Preorder button */
.media-player-preorder-btn {
  margin-top: 0.7rem;
  align-self: flex-start;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: none;
  background: #ce0021;
  background: var(--accent, #ce0021);
  color: #fff;
  color: var(--text-color, #fff);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.media-player-preorder-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.media-player-preorder-btn:active {
  transform: translateY(0);
}

/* Right section */
.media-player-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Track list — plain text, no boxes on items */
.media-player-tracklist {
  background: transparent;
  border-radius: 12px;
  padding: 0.4rem 0.3rem;
  border: 1px solid #222;
  border: 1px solid var(--border-color, #222);
  max-height: 210px;
  overflow-y: auto;
}

.media-player-tracklist::-webkit-scrollbar {
  width: 6px;
}

.media-player-tracklist::-webkit-scrollbar-thumb {
  background: #444;
  background: var(--border-color, #444);
  border-radius: 999px;
}

.media-player-track {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0;
  border: none;
  background: transparent;
  color: #f5f5f5;
  color: var(--text-color, #f5f5f5);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.media-player-track:hover {
  background: transparent;
  color: #ce0021;
  color: var(--accent, #ce0021);
  opacity: 1;
  transform: none;
}

.media-player-track.is-active {
  background: transparent;
  color: #ce0021;
  color: var(--accent, #ce0021);
  font-weight: 700;
}

.media-player-track .track-index {
  width: 18px;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.7;
}

.media-player-track .track-title {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Waveform */
.media-player-waveform {
  width: 100%;
  height: 64px;
}

/* Controls row */
.media-player-controls {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.controls-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.controls-btn {
  border-radius: 999px;
  border: 1px solid #444;
  border: 1px solid var(--border-color, #444);
  background: #181818;
  background: var(--bg-card, #181818);
  color: #fff;
  color: var(--text-color, #fff);
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.controls-btn:hover {
  background-color: #262626;
  background-color: var(--bg-page, #262626);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.controls-play {
  font-weight: 700;
  padding-inline: 1.1rem;
  background: #ce0021;
  background: var(--accent, #ce0021);
  border-color: #ce0021;
  border-color: var(--accent, #ce0021);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.controls-play.is-playing {
  background: #18b94a;
  border-color: #18b94a;
  box-shadow: 0 10px 28px rgba(24, 185, 74, 0.7);
}

/* Volume */
.controls-volume {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.volume-icon {
  font-size: 0.9rem;
}

.volume-slider {
  width: 120px;
}

/* Progress bar */
.controls-progress {
  width: 100%;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background-color: #2a2a2a;
  background-color: var(--border-color, #2a2a2a);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: #ce0021;
  background: var(--accent, #ce0021);
  transition: width 0.15s linear;
}

/* Responsive */
@media screen and (max-width: 780px) {
  .media-player-visual {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-player-tracklist {
    max-height: 180px;
  }

  .media-player-controls {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
  }

  .controls-main {
    justify-content: center;
  }

  .controls-volume {
    justify-content: center;
  }
}

.media-player-action-btns {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.media-player-buy-btn {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #1a6fb5, #1558a0);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.media-player-buy-btn:hover {
  background: linear-gradient(135deg, #1558a0, #0f4080);
}
.video-player {
  background: var(--bg-card);           /* ✅ Fixed */
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 2rem;
  color: var(--text-color);             /* ✅ Fixed */
  font-family: 'Montserrat', sans-serif;
  box-shadow: var(--shadow-soft);       /* ✅ Fixed */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.video-player h3 {
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

#video-album-select {
  background-color: var(--bg-page);     /* ✅ Fixed */
  color: var(--text-color);             /* ✅ Fixed */
  border: 1px solid var(--accent);
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 1rem;
}

.album-cover img {
  border-radius: 8px;
  box-shadow: var(--shadow-soft);       /* ✅ Fixed */
}



.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 1rem 0;
}

.video-btn {
  background: var(--bg-card);
  color: var(--text-color);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.video-btn:hover,
.video-btn.active {
  background: var(--accent);
  color: #fff;
}
.block-container {
  padding: 2rem;
  background-color: var(--bg-page);
  color: var(--text-color);
  font-family: sans-serif;
  line-height: 1.6;
}
.block-container h2,
.block-container h4 {
  color: var(--accent);
  margin-top: 1.5rem;
}
.block-container img {
  width: 120px;
  border-radius: 70px;
  box-shadow: 0 2px 14px var(--accent);
  float: right;
  margin-left: 1.3em;
  margin-bottom: 0.8em;
}


.novel-block-container {
  max-width: 800px;                /* Limits the width for readability */
  margin: 2rem auto;               /* Centered with vertical spacing */
  padding: 2rem;                   /* Internal padding for content spacing */
  background: rgba(20, 20, 23, 0.96);  /* Semi-transparent dark background */
  border-radius: 16px;             /* Rounded corners for smooth look */
  box-shadow: 0 6px 36px #ce002155; /* Subtle shadow for depth */
  border: 2px solid #151;          /* Border matching site theme */
}

/* Novel Section Container */
.novel-section {
  min-height: 100vh;
  background: linear-gradient(135deg, #000000 0%, #450a0a 50%, #000000 100%);
  padding: 3rem 2rem;
}


.novel-container {
  max-width: 300px;
  margin: 0 auto;  /* center container horizontally */
  padding: 1rem;
}

/* Title */
.novel-title {
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(to right, #ef4444, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 3rem;
  text-align: center;
}


.novel-grid {
  display: grid;
justify-content: center;
  grid-template-columns: repeat(4, 1fr); /* 4 per row */
  grid-gap: 20px;
  gap: 20px;
}




.novel-cover {
  width: 100%;           /* fill card width */
  height: auto;          /* keep natural aspect ratio */
  max-height: 200px;     /* limit image height */
  object-fit: cover;
  border-radius: 8px;
}


.novel-card {
  flex-shrink: 0;
  width: 16rem;
  max-height: 500px;
  overflow: hidden;
  background: linear-gradient(135deg, #000000 0%, #1f1f1f 50%, #450a0a 100%);
  border-radius: 0.75rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(220, 38, 38, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px 0 rgba(220, 20, 60, 0.2);
}


.novel-card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 60px 0 rgba(220, 38, 38, 0.5);
}

/* Cover Image */
.novel-cover-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border: 2px solid rgba(153, 27, 27, 0.4);
}

.novel-cover {
  width: 100%;
  height: 25rem;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.1);
}

.novel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

/* Book Info */
.novel-book-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.novel-author {
  color: #9ca3af;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* Buttons */
.novel-buttons {
  display: flex;
  gap: 0.25rem;
}

.novel-btn {
  flex: 1 1;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 300;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-block;
}

.novel-btn-preorder {
  background: linear-gradient(to right, #dc2626, #b91c1c);
  color: blue;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.novel-btn-preorder:hover {
  background: linear-gradient(to right, #b91c1c, #991b1b);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6);
}

.novel-btn-read {
  background: linear-gradient(to right, #374151, #1f2937);
  color: #f87171;
  border: 1px solid rgba(153, 27, 27, 0.5);
}

.novel-btn-read:hover {
  background: linear-gradient(to right, #4b5563, #374151);
}

/* ========================= */
/* Modal Overlay - Fullscreen */
/* ========================= */
.novel-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 97vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.novel-modal {
  position: relative;
  width: 90%;
  height: 97%;
  background: linear-gradient(to bottom, #0a0a0a, #1a1a1a);
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
}

.novel-modal-iframe {
  width: 100%;
  height: 97%;
  border: none;
}

.novel-modal-header {
  height: 1.6rem;              /* Fixed height same as footer */
  padding: 0 1rem;             /* Horizontal padding */
  background: #111;            /* Background color */
  color: #ff2a2a;              /* Text color */
  font-size: 0.7rem;           /* Smaller font size for compact header */
  font-weight: 500;            /* Font weight */
  text-transform: lowercase;   /* Lowercase text */
  border-bottom: 1px solid #ff2a2a; /* Bottom border */
  display: flex;               /* Flex to align items */
  align-items: center;         /* Vertically center content */
  white-space: nowrap;         /* Keep the text on one line */
  overflow: hidden;            /* Hide overflow */
  text-overflow: ellipsis;     /* Show ... if text is too long */
  min-width: 250px;
  max-width: 350px;            /* Control header width */
}



.novel-modal-content {
  flex: 1 1;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #121212;
}


.novel-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem;
  background: #111;
  border-top: 1px solid #ff2a2a;
  flex-shrink: 0;
}

.novel-modal-footer {
  height: 1.4rem;
  display: flex;
  align-items: center; /* vertically center content */
  padding: 0 1rem;
  border-top: 1px solid #ff2a2a;
  background: #111;
}
.novel-modal-footer button {
  background: #ff2a2a;
  color: #fff;
  border: none;
  padding: 0.2rem 1.0rem;
  font-size: 0.8rem; /* reduced font size */
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}



//.novel-modal-footer button:hover {
  background: #e60000;
}

//.novel-modal-footer button:disabled {
  background: #444;
  cursor: not-allowed;
}


/* ========================= */
/* Responsive tweaks for small screens */
/* ========================= */
@media (max-width: 768px) {
  .novel-modal {
    width: 95vw !important;
    height: 80vh !important;
  }

  .novel-modal-footer button {
    padding: 8px 15px !important;
  }
}

.novel-btn-nav {
  background: linear-gradient(to right, #dc2626, #b91c1c);
  color: white;
  padding: 0.5rem 1.5rem;
}

.novel-btn-nav:hover:not(:disabled) {
  background: linear-gradient(to right, #b91c1c, #991b1b);
}

.novel-btn-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.novel-btn-close {
  background: linear-gradient(to right, #374151, #1f2937);
  color: #f87171;
  border: 1px solid rgba(153, 27, 27, 0.5);
  padding: 0.5rem 1.5rem;
}

.novel-btn-close:hover {
  background: linear-gradient(to right, #4b5563, #374151);
}

/* Scrollbar Styling */
.novel-grid::-webkit-scrollbar {
  height: 8px;
}

.novel-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.novel-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #dc2626, #b91c1c);
  border-radius: 4px;
}
.art-carousel {
  max-height: 400px;   /* adjust this value to the desired height */
  overflow: hidden;    /* hides any overflow content */
}

.novel-grid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, #b91c1c, #991b1b);
  
.novel-block-container {
  max-width: 800px;
  margin: 3rem auto;
  padding: 2rem;
  background: rgba(20, 20, 23, 0.96);
  border-radius: 16px;
  box-shadow: 0 6px 36px #ce002155;
  border: 2px solid #151;
}

.novel-grid {
  display: flex;
  flex-wrap: wrap;      /* allow wrapping */
  justify-content: center;
  gap: 1.5rem;
}




.novel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-top: 20px;
}

.cart-summary {
  margin-top: 30px;
  color: white;
}


.novel-btn-buy {
  background: linear-gradient(to right, #1a6fb5, #1558a0);
  color: #fff;
  border: 1px solid rgba(26, 111, 181, 0.5);
  box-shadow: 0 4px 14px rgba(26, 111, 181, 0.4);
}

.novel-btn-buy:hover {
  background: linear-gradient(to right, #1558a0, #0f4080);
  box-shadow: 0 6px 20px rgba(26, 111, 181, 0.6);
}




  
  
}
.product-card {
  border: 1px solid #ccc;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  border-radius: 8px;
}

.product-image {
  max-width: 100%;
  height: auto;
}

.buy-btn,
.preorder-btn {
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.product-card {
  position: relative;
  border: 1px solid rgba(206, 0, 33, 0.3);
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  color: white;
  box-shadow: 0 8px 32px rgba(206, 0, 33, 0.3);
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: scale(1.03);
}

.image-wrapper {
  position: relative;
}

.image-wrapper img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.cart-icon-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(206, 0, 33, 0.85);
  border: none;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  transition: background-color 0.2s ease;
}

.cart-icon-button:hover {
  background: #ce0021;
}

#storeSection {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.product {
  border: 1px solid var(--border-color);  /* ✅ Fixed */
  padding: 10px;
  width: 200px;
  text-align: center;
  background: var(--bg-card);             /* ✅ Fixed */
  color: var(--text-color);               /* ✅ Fixed */
  border-radius: 4px;
}

.product img {
  max-width: 100%;
}

.buy-btn {
  padding: 5px 10px;
  cursor: pointer;
  background-color: var(--accent);        /* ✅ Perfect */
  color: #fff;
  border: none;
  border-radius: 4px;
  transition: filter 0.2s ease;
}

.buy-btn:hover {
  filter: brightness(0.85);
}

faq-block-container {
  max-width: 800px;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  border: 2px solid var(--border-color);
}
.faq {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.5em;
  padding: 0.5em 0;
}
.faq-question {
  cursor: pointer;
  font-weight: bold;
  position: relative;
  padding-right: 1.5em;
  transition: color 0.3s ease;
}
.faq-question::after {
  content: "▼";
  position: absolute;
  right: 0;
  transition: transform 0.3s;
}
.faq.active .faq-question::after {
  transform: rotate(-180deg);
}
.faq-question:hover {
  color: var(--text-secondary);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
  margin-left: 10px;
  color: var(--text-color);
}
.faq.active .faq-answer {
  max-height: 1000px;
  opacity: 1;
}

.contact-block-container {
  max-width: 800px;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  border: 2px solid var(--border-color);
}
form input,
form textarea {
  width: 100%;
  padding: 0.7em;
  margin: 0.5em 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-page);
  color: var(--text-color);
}
button,
.shop-btn {
  background: linear-gradient(90deg, var(--accent) 0, var(--accent) 100%);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  border: 0;
  border-radius: 10px;
  margin: 0.8em 0;
  padding: 0.82em 2em;
  cursor: pointer;
}
button:hover {
  background: linear-gradient(90deg, var(--accent) 0, var(--accent) 100%);
  opacity: 0.85;
}

/* PricingSection.css */

.pricing-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Hero Pitch */
.hero-pitch {
  text-align: center;
  margin-bottom: 60px;
}

.hero-pitch h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.hero-text {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ce0021;
  margin-bottom: 1rem;
}

.hero-pitch p {
  font-size: 1.1rem;
  color: #aaaaaa;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Tier Container */
.tier-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 60px;
  align-items: start;
}

/* Tier Cards - White blocks */
.tier-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 36px 28px;
  color: #111111;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tier-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.tier-card.featured {
  border: 3px solid #ce0021;
  transform: scale(1.04);
}

.tier-card.featured:hover {
  transform: scale(1.04) translateY(-6px);
}

/* Badges */
.tier-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 16px;
  background: #f0f0f0;
  color: #555;
}

.featured-badge {
  background: #ce0021;
  color: #ffffff;
}

.elite-badge {
  background: #111111;
  color: #ffffff;
}

/* Tier Headings */
.tier-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111111;
  margin: 0 0 16px 0;
}

/* Pricing */
.tier-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.tier-amount {
  font-size: 3rem;
  font-weight: 800;
  color: #ce0021;
}

.tier-period {
  font-size: 1rem;
  color: #888;
}

.tier-total {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 16px;
}

.tier-desc {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  min-height: 60px;
}

/* Feature Lists */
.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tier-features li {
  font-size: 0.95rem;
  color: #333;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

/* Buttons */
.tier-button {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tier-button-basic {
  background: #f0f0f0;
  color: #333;
  border: 2px solid #ddd;
}

.tier-button-basic:hover {
  background: #e0e0e0;
}

.tier-button-pro {
  background: #ce0021;
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 20px rgba(206,0,33,0.4);
}

.tier-button-pro:hover {
  background: #a80019;
  box-shadow: 0 10px 30px rgba(206,0,33,0.5);
  transform: translateY(-2px);
}

.tier-button-elite {
  background: #111111;
  color: #ffffff;
  border: none;
}

.tier-button-elite:hover {
  background: #333333;
  transform: translateY(-2px);
}

/* Theme Add-ons Section */
.addons-section {
  text-align: center;
  margin: 60px 0;
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.addons-section h2 {
  font-size: 2rem;
  color: #111111;
  margin-bottom: 12px;
}

.addons-section p {
  color: #555;
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.theme-thumbs {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.theme-thumb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.theme-thumb-card:hover {
  transform: translateY(-4px);
}

.theme-thumb-card img {
  width: 100px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ddd;
}

.theme-thumb-card span {
  font-size: 0.85rem;
  color: #555;
}

.theme-thumb-card strong {
  font-size: 0.9rem;
  color: #ce0021;
}

.addons-link {
  display: inline-block;
  color: #ce0021;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 2px solid #ce0021;
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}

.addons-link:hover {
  opacity: 0.7;
}

/* Features Grid */
.features-section {
  margin: 60px 0;
  text-align: center;
}

.features-section h2 {
  font-size: 2.2rem;
  color: #ffffff;
  margin-bottom: 40px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.feature-block {
  background: #ffffff;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.feature-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 12px;
}

.feature-block h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111111;
  margin: 0 0 8px 0;
}

.feature-block p {
  font-size: 0.95rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Legal Footer */
.legal-footer {
  text-align: center;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  margin-top: 40px;
}

.legal-footer p {
  margin: 8px 0;
  color: #555;
  font-size: 0.95rem;
}

/* Mobile */
@media (max-width: 900px) {
  .tier-container {
    grid-template-columns: 1fr;
  }

  .tier-card.featured {
    transform: scale(1);
  }

  .tier-card.featured:hover {
    transform: translateY(-6px);
  }
}

@media (max-width: 600px) {
  .theme-thumbs {
    gap: 12px;
  }

  .theme-thumb-card img {
    width: 80px;
    height: 55px;
  }
}
/* AdminDashboard.css */

.admin-dashboard {
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f8f9fa;
  color: #333;
}

.admin-dashboard h1, .admin-dashboard h2, .admin-dashboard h3 {
  color: #222;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-bottom: 2rem;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


.admin-dashboard .admin-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem 0.5rem 0;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}


.admin-button:hover {
  background-color: #0056b3;
}

.button-group {
  margin-bottom: 2rem;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.small-button {
  margin-left: auto;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: #dc3545;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.small-button:hover {
  background-color: #a71d2a;
}

/* Store Page Container */
.store-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  min-height: 100vh;
}

.store-page h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: var(--text-color);             /* ✅ Fixed */
  font-weight: 700;
}

.back-home-btn {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 20px;
  background-color: var(--accent);      /* ✅ Fixed */
  color: var(--text-color);             /* ✅ Added */
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.back-home-btn:hover {
  filter: brightness(0.9);              /* ✅ Fixed */
  transform: translateX(-5px);
}

/* Filter Bar */
.filter-bar {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.filter-bar button {
  padding: 12px 24px;
  border: 2px solid var(--accent);      /* ✅ Fixed */
  background-color: var(--bg-card);     /* ✅ Fixed */
  color: var(--accent);                 /* ✅ Fixed */
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-bar button:hover {
  background-color: var(--bg-card);     /* ✅ Fixed */
  transform: translateY(-2px);
}

.filter-bar button.active {
  background-color: var(--accent);      /* ✅ Fixed */
  color: var(--text-color);             /* ✅ Added */
  box-shadow: var(--shadow-soft);       /* ✅ Fixed */
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 60px;
}

/* Product Card Wrapper */
.product-card-wrapper {
  background: var(--bg-card);           /* ✅ Fixed */
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-soft);       /* ✅ Fixed */
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-card-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);       /* ✅ Fixed */
}

/* Product Price */
.product-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);             /* ✅ Fixed */
  margin: 0;
}

/* Preorder Progress */
.preorder-progress {
  font-size: 0.9rem;
  color: var(--text-secondary);         /* ✅ Fixed */
  margin: 0;
  padding: 8px;
  background-color: var(--bg-card);     /* ✅ Fixed */
  border-radius: 6px;
  text-align: center;
}

/* Buttons */
.buy-btn,
.preorder-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.buy-btn {
  background-color: var(--accent);      /* ✅ Fixed */
  color: var(--text-color);             /* ✅ Added */
  margin-bottom: 8px;
}

.buy-btn:hover {
  filter: brightness(0.9);              /* ✅ Fixed */
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);       /* ✅ Fixed */
}

.preorder-btn {
  background-color: var(--accent);      /* ✅ Fixed */
  color: var(--text-color);             /* ✅ Added */
}

.preorder-btn:hover {
  filter: brightness(0.9);              /* ✅ Fixed */
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);       /* ✅ Fixed */
}

/* Empty Message */
.empty-message {
  text-align: center;
  font-size: 1.2rem;
  color: var(--text-secondary);         /* ✅ Fixed */
  padding: 60px 20px;
  grid-column: 1 / -1;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* Modal Content */
.modal-content {
  background: var(--bg-card);           /* ✅ Fixed */
  padding: 40px;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-soft);       /* ✅ Fixed */
  animation: slideIn 0.3s ease;
}

.modal-content h2 {
  margin-bottom: 24px;
  color: var(--text-color);             /* ✅ Fixed */
  font-size: 1.8rem;
}

.modal-content input,
.modal-content textarea {
  padding: 12px 16px;
  border: 2px solid var(--border-color); /* ✅ Fixed */
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.3s ease;
  background: var(--bg-page);           /* ✅ Added */
  color: var(--text-color);             /* ✅ Added */
}

.modal-content input:focus,
.modal-content textarea:focus {
  outline: none;
  border-color: var(--accent);          /* ✅ Fixed */
}

.modal-content button[type="submit"] {
  background-color: var(--accent);      /* ✅ Fixed */
  color: var(--text-color);             /* ✅ Added */
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.modal-content button[type="submit"]:hover {
  filter: brightness(0.9);              /* ✅ Fixed */
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);       /* ✅ Fixed */
}

.modal-content > button:last-child {
  background-color: var(--accent);      /* ✅ Fixed */
  color: var(--text-color);             /* ✅ Added */
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.3s ease;
}

.modal-content > button:last-child:hover {
  filter: brightness(0.9);              /* ✅ Fixed */
  transform: translateY(-2px);
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.cart-sidebar {
  position: fixed;
  top: 0;
  right: -450px;
  width: 450px;
  max-width: 100vw;
  height: 100vh;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
}

.cart-sidebar.open {
  right: 0;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.cart-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.cart-close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.cart-close:hover {
  background-color: var(--bg-secondary);
}

.cart-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
}

.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.cart-empty p {
  font-size: 1.1rem;
}

.cart-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s;
}

.cart-item:hover {
  background-color: var(--bg-secondary);
}

.cart-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.cart-item-details {
  flex: 1 1;
}

.cart-item-details h3 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.cart-item-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 10px 0;
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent);
  background: var(--card-bg);
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.quantity-btn:hover {
  background: var(--accent);
  color: #fff;
}

.cart-item-quantity span {
  font-weight: 600;
  min-width: 30px;
  text-align: center;
  color: var(--text-primary);
}

.cart-item-remove {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s;
}

.cart-item-remove:hover {
  background-color: #dc3545;
  color: #fff;
}

.cart-footer {
  padding: 20px;
  border-top: 2px solid var(--border);
  background: var(--bg-secondary);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cart-total-amount {
  color: var(--accent);
}

.checkout-btn {
  width: 100%;
  padding: 15px;
  background-color: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.checkout-btn:hover {
  filter: brightness(0.9);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

@media (max-width: 768px) {
  .cart-sidebar {
    width: 100vw;
    right: -100vw;
  }
}
.cart-button-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #6772e5;
  color: white;
  border: none;
  padding: 14px 18px;       /* controls the shape */
  border-radius: 12px;      /* rounded rectangle */
  box-shadow: 0 4px 12px rgba(103, 114, 229, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  z-index: 998;
}
.cart-button-float:hover {
  background-color: #5469d4;
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(103, 114, 229, 0.5);
}
.cart-button-float svg {
  width: 26px;      /* slightly larger for clarity */
  height: 26px;
  stroke-width: 2.4;
}
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #dc3545;
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 50%;
  min-width: 20px;
  text-align: center;
}
* 1MARSITE2 - COMPLETE THEME SYSTEM */

/* Base defaults */
:root {
  --bg-page: #0b0b10;
  --bg-card: #131320;
  --border-color: #555;
  --border-width: 2px;
  --border-style: solid;
  --border-radius: 8px;
  --text-color: #f5f5f5;
  --accent: #ff4081;
  --shadow-soft: 0 4px 10px rgba(0,0,0,0.4);
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Global usage */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-color);
  font-family: var(--font-main);
  transition: background 0.4s ease, color 0.4s ease;
}

.main-container,
.card,
.product-tile {
  background: var(--bg-card);
  border-color: var(--border-color);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  transition: background 0.4s ease, border 0.2s ease, box-shadow 0.2s ease;
}

.button,
.nav-tab {
  background: var(--accent);
  border-radius: calc(var(--border-radius) / 1.5);
}

/* Fix form/dropdown backgrounds */
select,
input,
textarea,
option,
.wp-block-search__input,
.dropdown-menu {
  background: var(--bg-card) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

/* Specific dropdown/popover fixes */
body * select,
body * [role="combobox"],
body * .select__control {
  background: var(--bg-card) !important;
  color: var(--text-color) !important;
}




* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-color);
  font-family: var(--font-main);
  transition: all 0.4s ease;
}

/* BASE COMPONENT STYLES */
header,
.hero-header {
  background: var(--bg-page);
  box-shadow: var(--shadow-soft);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav,
.hero-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
}

nav a,
.hero-nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: bold;
  font-family: 'Oswald', sans-serif;
  font-size: 0.9rem;
  padding: 1.1em 1.4em;
  letter-spacing: 1.2px;
  border-bottom: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  transition: all 0.2s ease;
}

nav a:hover,
.hero-nav a:hover,
nav a.active,
.hero-nav a.active {
  color: var(--text-color);
  background: linear-gradient(90deg, var(--accent), var(--accent) 80%);
  border-bottom: 3px solid var(--text-color);
}

.block-container,
.main-container,
.card,
.product-tile {
  max-width: 900px;
  margin: 3rem auto;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  padding: 2.5rem 2rem;
  border: var(--border-width) var(--border-style) var(--border-color);
}

h1, h2, h3 {
  font-family: 'Oswald', sans-serif;
  color: var(--accent);
  background-image: linear-gradient(90deg, var(--accent) 17%, var(--text-color) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem;
  letter-spacing: 2px;
  margin-bottom: 1.3rem;
}

.button,
.nav-tab,
.buy-btn,
.cta {
  background: var(--accent);
  color: var(--text-color);
  border-radius: calc(var(--border-radius) / 1.5);
  transition: all 0.3s ease;
}

.theme-switcher {
  position: fixed;
  top: 90px; right: 20px;
  z-index: 9999;
  padding: 8px 12px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-color);
  font-size: 14px;
}


/* ========= DARK THEMES (10) ========= */

/* 1. Obsidian Core – smooth chrome, sharp corners */

body.obsidian-core {
  --bg-page: radial-gradient(circle at top, #020617 0, #06030C 0%, #000 50%);
  --bg-card: #06030C;
  --border-color: #e5e7eb;
  --border-width: 20px;
  --border-style: double;
  --border-radius: 14px;
  --text-color: #e5e7eb;
  --accent: #676B6E;

--shadow-soft: 0 0 0 1px rgba(255,23,42,0.9), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 2. Nightfall Indigo – smooth chrome, medium radius */
body.nightfall-indigo {
  --bg-page: radial-gradient(circle at top, #1e1b4b 0, #4B0082 60%, #000 100%);
  --bg-card: #020617;
  --border-color: #c7d2fe;
  --border-width: 20px;
  --border-style: double;
  --border-radius: 8px;
  --text-color: #e0e7ff;
  --accent: #4B0082;
  --shadow-soft: 0 0 0 1px rgba(255,23,42,0.9), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 3. Carbon Pulse – bold chrome band, sharp corners */
body.carbon-pulse {
  --bg-page: radial-gradient(circle at top, #020617 0, #676B6E 50%, #000 100%);
  --bg-card: #020617;
  --border-color: #686972;
  --border-width: 20px;
  --border-style: double;
  --border-radius: 12px;
  --text-color: #e5e7eb;
  --accent: #676B6E;
  --shadow-soft: 0 0 0 1px rgba(255,23,42,0.9), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 4. Shadow Ember – bold chrome, medium radius */
body.shadow-ember {
  --bg-page: radial-gradient(circle at top, #450a0a 0, #F9A851 60%, #000 100%);
  --bg-card: #020617;
  --border-color:#F9A851;
  --border-width: 15px;
  --border-style: double;
  --border-radius: 20px;
  --text-color: #fee2e2;
  --accent: #8C3F30;
  --shadow-soft: 0 0 0 1px rgba(127,29,29,0.9), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 5. Astral Void – smooth chrome, large radius */
body.astral-void {
  --bg-page: radial-gradient(circle at top, #4c1d95 0, #306789 55%, #020617 100%);
  --bg-card: #020617;
  --border-color: #e9d5ff;
  --border-width: 14px;
  --border-style: double;
  --border-radius: 24px;
  --text-color: #f5f3ff;
  --accent: #306789;
  --shadow-soft: 0 0 0 1px rgba(76,29,149,0.9), 0 20px 45px rgba(0,0,0,0.9);
  --font-main: var(--font-main);
}

/* 6. Blackwater Depths – subtle chrome, medium radius */
body.blackwater-depths {
  --bg-page: radial-gradient(circle at top, #022c22 0, #ABE098 55%, #000 100%);
  --bg-card: #020617;
  --border-color: #a5f3fc;
  --border-width: 24px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #ffffff;
  --accent: #ABE098;
  --shadow-soft: 0 0 0 1px rgba(15,23,42,0.9), 0 20px 45px rgba(0,0,0,0.9);
  --font-main: var(--font-main);
}

/* 7. Grimlight – subtle chrome, medium radius */
body.grimlight {
  --bg-page: radial-gradient(circle at top, #111827 0, #FFDD3C 60%, #000 100%);
  --bg-card: #020617;
  --border-color: #111827;
  --border-width: 33px;
  --border-style: double;
  --border-radius: 18px;
  --text-color: #EA4C46;
  --accent: #FFDD3C;
  --shadow-soft: 0 0 0 1px rgba(31,41,55,0.9), 0 18px 40px rgba(0,0,0,0.9);
  --font-main: var(--font-main);
}

/* 8. Phantom Rose – warm chrome, large radius */
body.phantom-rose {
  --bg-page: radial-gradient(circle at top, #111827 0, #bd5195 55%, #000 100%);
  --bg-card: #020617;
  --border-color: #bd5195;
  --border-width: 24px;
  --border-style: double;
  --border-radius: 16px;
  --text-color: #ECE4D0;
  --accent: #bd5195;
  --shadow-soft: 0 0 0 1px rgba(127,29,29,0.8), 0 22px 50px rgba(0,0,0,0.95);
  --font-main: var(--font-main);
}

/* 9. Dark Aurora – bold chrome, large radius */
body.dark-aurora {
  --bg-page: radial-gradient(circle at top, #022c22 0, #16361b 50%, #020617 100%);
  --bg-card: #16361b;
  --border-color: #a5b4fc;
  --border-width: 15px;
  --border-style: double;
  --border-radius: 4px;
  --text-color: #e5e7eb;
  --accent: #070000;
  --shadow-soft: 0 0 0 1px rgba(15,23,42,0.9), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 10. Terminal Ghost – subtle chrome, sharp corners */
body.terminal-ghost {
  --bg-page: radial-gradient(circle at top, #020617 0, #000 60%, #000 100%);
  --bg-card: #468250;
  --border-color: #bbf7d0;
  --border-width: 13px;
  --border-style: double;
  --border-radius: 22px;
  --text-color: #ffffff;
  --accent: #020617;
  --shadow-soft: 0 0 0 1px rgba(0,0,0,1), 0 20px 45px rgba(0,0,0,1);
  --font-main: "Courier New", monospace;
}

/* ========= METALLIC MIRROR-CHROME THEMES (10) ========= */

/* 11. Steel Horizon – cool pure chrome, medium radius */
body.steel-horizon {
  --bg-page: radial-gradient(circle at top, #646e6c 0, #615C55 40%, #f9fafb 100%);
  --bg-card: #646e6c;
  --border-color: #e5e7eb;
  --border-width: 15px;
  --border-style: double;
  --border-radius: 8px;
  --text-color: #000000;
  --accent: #CFD2D4;
  --shadow-soft: 0 0 0 1px rgba(148,163,184,0.9), 0 18px 40px rgba(15,23,42,0.5);
  --font-main: var(--font-main);
}




/* 16. Copper Ember – warm tinted chrome, large radius */
body.copper-ember {
  --bg-page: radial-gradient(circle at top, #CB6D51 0, #FF69B4 40%, #DD9B72 100%);
  --bg-card: #CB6D51;
  --border-color: #FF69B4;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 14px;
  --text-color: #fef3c7;
  --accent: #DD9B72;
  --shadow-soft: 0 0 0 1px rgba(180,83,9,0.9), 0 20px 45px rgba(120,53,15,0.7);
  --font-main: var(--font-main);
}

/* 17. Gunmetal Alloy – dark tinted chrome, sharp corners */
body.gunmetal-alloy {
  --bg-page: radial-gradient(circle at top, #111827 0, #020617 50%, #000 100%);
  --bg-card: #20202b;
  --border-color: #37374a;
  --border-width: 15px;
  --border-style: double;
  --border-radius: 13px;
  --text-color: #e5e7eb;
  --accent: #37374a;
  --shadow-soft: 0 0 0 1px rgba(15,23,42,1), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 18. Gold Royale – warm chrome, large radius */
body.gold-royale {
  --bg-page: radial-gradient(circle at top, #92400e 0, #facc15 40%, #92400e 100%);
  --bg-card: #facc15;
  --border-color: #92400e;
  --border-width: 36px;
  --border-style: double;
  --border-radius: 26px;
  --text-color: #ffffff;
  --accent: #92400e;
  --shadow-soft: 0 0 0 1px rgba(402,138,4,0.9), 0 22px 50px rgba(120,53,15,0.7);
  --font-main: var(--font-main);
}

/* 19. Bronze Forge – warm tinted chrome, medium radius */
body.bronze-forge {
  --bg-page: radial-gradient(circle at top, #7a3515 0, #7c2d12 40%, #cd7f32 100%);
  --bg-card: #cd7f32;
  --border-color: #fed7aa;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #ffffff;
  --accent: #c95718;
  --shadow-soft: 0 0 0 1px rgba(124,45,18,0.9), 0 20px 45px rgba(120,53,15,0.7);
  --font-main: var(--font-main);
}

/* 20. Ironclad – black chrome, sharp corners */
body.ironclad {
  --bg-page: radial-gradient(circle at top, #615C55 0, #615C55 50%, #615C55 100%);
  --bg-card: #615C55;
  --border-color: #e5e7eb;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 2px;
  --text-color: #ffffff;
--accent: #8B008B;
  --shadow-soft: 0 0 0 1px rgba(15,23,42,1), 0 26px 60px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* ========= NEON CHROME-GLOW THEMES (10) ========= */

/* 21. Neon Magenta – bold chrome, medium radius */
body.neon-magenta {
  --bg-page: radial-gradient(circle at top, #301934 0, #1e0030 55%, #000 100%);
  --bg-card: #B000AF;
  --border-color: #f9a8d4;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #fdf2ff;
  --accent: #301934;
  --shadow-soft: 0 0 0 1px rgba(236,72,153,0.7), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 22. Cyber Lime – bold chrome, sharp corners */
body.cyber-lime {
  --bg-page: radial-gradient(circle at top, #1a2e05 0, #020617 55%, #000 100%);
  --bg-card: #1a2e05;
  --border-color: #bef264;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 3px;
  --text-color: #ffffff;
  --accent: #020617;
  --shadow-soft: 0 0 0 1px rgba(22,101,52,0.9), 0 26px 60px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 23. Vaporwave Sunset – smooth chrome, large radius */
body.vaporwave-sunset {
  --bg-page: radial-gradient(circle at top, #f97316 0, #ec4899 40%, #4f46e5 100%);
  --bg-card: #1e1b4b;
  --border-color: #f9a8d4;
  --border-width: 4px;
  --border-style: double;
  --border-radius: 16px;
  --text-color: #fdf2ff;
  --accent: #22d3ee;
  --shadow-soft: 0 0 0 1px rgba(129,140,248,0.8), 0 22px 50px rgba(15,23,42,0.9);
  --font-main: var(--font-main);
}

/* 24. Arcade Blue – bold chrome, medium radius */
body.arcade-blue {
  --bg-page: radial-gradient(circle at top, #0f172a 0, #020617 55%, #000 100%);
  --bg-card: #020617;
  --border-color: #38bdf8;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 8px;
  --text-color: #EDDDB8;
  --accent: #FF8B00;
  --shadow-soft: 0 0 0 1px rgba(56,189,248,0.7), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 25. Laser Grid – bold chrome, sharp corners */
body.laser-grid {
  --bg-page: radial-gradient(circle at top, #1e1b4b 0, #020617 60%, #000 100%);
  --bg-card: #020617;
  --border-color: #a5b4fc;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 2px;
  --text-color: #e5e7eb;
  --accent: #22d3ee;
  --shadow-soft: 0 0 0 1px rgba(129,140,248,0.8), 0 26px 60px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 26. Synthwave Horizon – smooth chrome, large radius */
body.synthwave-horizon {
  --bg-page: radial-gradient(circle at top, #f97316 0, #ec4899 40%, #4c1d95 100%);
  --bg-card: #1e1b4b;
  --border-color: #f9a8d4;
  --border-width: 4px;
  --border-style: double;
  --border-radius: 16px;
  --text-color: #fdf2ff;
  --accent: #fb7185;
  --shadow-soft: 0 0 0 1px rgba(236,72,153,0.8), 0 22px 50px rgba(15,23,42,0.9);
  --font-main: var(--font-main);
}

/* 27. Neon Orchid – bold chrome, medium radius */
body.neon-orchid {
  --bg-page: radial-gradient(circle at top, #4c1d95 0, #1e0030 55%, #000 100%);
  --bg-card: #050014;
  --border-color: #e9d5ff;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #f5f3ff;
  --accent: #a855f7;
  --shadow-soft: 0 0 0 1px rgba(168,85,247,0.8), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 28. Electric Aqua – smooth chrome, medium radius */
body.electric-aqua {
  --bg-page: radial-gradient(circle at top, #53bcbd 0, #020617 55%, #000 100%);
  --bg-card: #53bcbd;
  --border-color: #a5f3fc;
  --border-width: 4px;
  --border-style: double;
  --border-radius: 10px;
  --text-color: #e0f2fe;
  --accent: #020617;
  --shadow-soft: 0 0 0 1px rgba(56,189,248,0.7), 0 22px 50px rgba(0,0,0,1);
  --font-main: var(--font-main);
}

/* 29. Hypernova – bold chrome, sharp corners */
body.hypernova {
  --bg-page: radial-gradient(circle at top, #1e1b4b 0, #f97316 75%, #4c1d95 50%);
  --bg-card: #1e1b4b;
  --border-color: #fef9c3;
  --border-width: 6px;
  --border-style: double;
  --border-radius: 3px;
  --text-color: #fefce8;
  --accent: #eab308;
  --shadow-soft: 0 0 0 1px rgba(234,179,8,0.9), 0 26px 60px rgba(15,23,42,1);
  --font-main: var(--font-main);
}

/* 30. Circuit Breaker – bold chrome, medium radius */
body.circuit-breaker {
  --bg-page: radial-gradient(circle at top, #022c22 0, #020617 55%, #000 100%);
  --bg-card: #020617;
  --border-color: #bbf7d0;
  --border-width: 5px;
  --border-style: double;
  --border-radius: 8px;
  --text-color: #bbf7d0;
  --accent: #22c55e;
  --shadow-soft: 0 0 0 1px rgba(34,197,94,0.8), 0 24px 55px rgba(0,0,0,1);
  --font-main: var(--font-main);
}



/*# sourceMappingURL=main.9a0a0ee4.css.map*/