/* ============================================================================
   24 CURATED THEME SKINS FOR ASYCUDA WORLD PERMIT CONVERTER
   Light & Clean, Dark Tech, Cyber Neons, Nature & Minimalist
   ============================================================================ */

/* ─── Header Theme Skin Button ─── */
.theme-skin-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.44rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
}

[data-theme-mode="light"] .theme-skin-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

[data-theme-mode="light"] .theme-skin-btn:hover {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.1);
}

.theme-swatch-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
  display: inline-block;
  transition: background-color 0.25s ease;
}

[data-theme-mode="light"] .theme-swatch-dot {
  border-color: rgba(15, 23, 42, 0.25);
}

/* ─── Theme Selector Modal ─── */
.theme-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 14, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.theme-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.theme-modal-card {
  width: 100%;
  max-width: 980px;
  max-height: 88vh;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-modal-overlay.show .theme-modal-card {
  transform: translateY(0) scale(1);
}

.theme-modal-header {
  padding: 1.25rem 1.6rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-subcard);
}

.theme-modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-modal-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.35);
  flex-shrink: 0;
}

.theme-modal-heading h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.theme-modal-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

.theme-modal-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.theme-modal-close-btn:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.4);
  color: var(--accent-rose);
}

.theme-modal-toolbar {
  padding: 0.9rem 1.6rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg-card);
}

.theme-category-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.theme-tab-btn {
  padding: 0.38rem 0.8rem;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--bg-subcard);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.theme-tab-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.theme-tab-btn.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.35);
}

.theme-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 0.35rem 0.85rem;
  width: 220px;
}

.theme-search-box input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.78rem;
  width: 100%;
  outline: none;
}

.theme-modal-body {
  padding: 1.4rem 1.6rem;
  overflow-y: auto;
  flex: 1;
}

.theme-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* ─── Individual Theme Card ─── */
.theme-card {
  background: var(--bg-subcard);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.05rem;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  user-select: none;
}

.theme-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-cyan);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 0 16px rgba(6, 182, 212, 0.2);
}

.theme-card.active {
  border-color: var(--accent-cyan);
  background: var(--bg-card);
  box-shadow: 0 0 0 2px var(--accent-cyan), 0 12px 30px -5px rgba(6, 182, 212, 0.25);
}

.theme-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.theme-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-card-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 12px;
  letter-spacing: 0.04em;
}

.badge-mode-light {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.badge-mode-dark {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.badge-mode-cyber {
  background: rgba(6, 182, 212, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-mode-nature {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* 4-Color Swatch Strip */
.theme-swatches-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

.swatch-color {
  flex: 1;
  height: 100%;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.theme-card-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.theme-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.theme-active-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 0.74rem;
}

/* ============================================================================
   24 THEME PALETTE DEFINITIONS
   ============================================================================ */

/* ─── 1. Default Obsidian Cyber (Dark) ─── */
[data-theme="dark"] {
  --bg-primary: #06080f;
  --bg-secondary: #0b0f19;
  --bg-tertiary: #111726;
  --bg-card: rgba(11, 15, 25, 0.82);
  --bg-card-hover: rgba(16, 23, 38, 0.92);
  --bg-input: rgba(8, 12, 20, 0.75);
  --bg-subcard: rgba(13, 19, 32, 0.6);
  --border-color: rgba(255, 255, 255, 0.08);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --accent-cyan: #06b6d4;
  --accent-cyan-light: #22d3ee;
  --accent-indigo: #6366f1;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
}

/* ─── 2. Tokyo Night ─── */
[data-theme="tokyo-night"] {
  --bg-primary: #1a1b26;
  --bg-secondary: #24283b;
  --bg-tertiary: #1f2335;
  --bg-card: rgba(36, 40, 59, 0.88);
  --bg-card-hover: rgba(41, 46, 66, 0.95);
  --bg-input: rgba(26, 27, 38, 0.85);
  --bg-subcard: rgba(31, 35, 53, 0.7);
  --border-color: rgba(122, 162, 247, 0.18);
  --border-hover: rgba(122, 162, 247, 0.45);
  --border-focus: #7aa2f7;
  --text-primary: #c0caf5;
  --text-secondary: #9aa5ce;
  --text-muted: #565f89;
  --accent-cyan: #7aa2f7;
  --accent-cyan-light: #89ddff;
  --accent-blue: #7aa2f7;
  --accent-indigo: #bb9af7;
  --accent-emerald: #9ece6a;
  --accent-emerald-light: #b9f27c;
  --accent-amber: #e0af68;
  --accent-rose: #f7768e;
  --accent-purple: #bb9af7;
}

/* ─── 3. Dracula ─── */
[data-theme="dracula"] {
  --bg-primary: #21222c;
  --bg-secondary: #282a36;
  --bg-tertiary: #343746;
  --bg-card: rgba(40, 42, 54, 0.9);
  --bg-card-hover: rgba(52, 55, 70, 0.95);
  --bg-input: rgba(33, 34, 44, 0.85);
  --bg-subcard: rgba(40, 42, 54, 0.7);
  --border-color: rgba(189, 147, 249, 0.18);
  --border-hover: rgba(189, 147, 249, 0.45);
  --border-focus: #bd93f9;
  --text-primary: #f8f8f2;
  --text-secondary: #bd93f9;
  --text-muted: #6272a4;
  --accent-cyan: #8be9fd;
  --accent-cyan-light: #a4ffff;
  --accent-indigo: #bd93f9;
  --accent-emerald: #50fa7b;
  --accent-emerald-light: #69ff94;
  --accent-amber: #f1fa8c;
  --accent-rose: #ff5555;
  --accent-purple: #ff79c6;
}

/* ─── 4. Nord Frost ─── */
[data-theme="nord-frost"] {
  --bg-primary: #242933;
  --bg-secondary: #2e3440;
  --bg-tertiary: #3b4252;
  --bg-card: rgba(46, 52, 64, 0.9);
  --bg-card-hover: rgba(59, 66, 82, 0.95);
  --bg-input: rgba(36, 41, 51, 0.85);
  --bg-subcard: rgba(46, 52, 64, 0.7);
  --border-color: rgba(136, 192, 208, 0.18);
  --border-hover: rgba(136, 192, 208, 0.45);
  --border-focus: #88c0d0;
  --text-primary: #eceff4;
  --text-secondary: #d8dee9;
  --text-muted: #4c566a;
  --accent-cyan: #88c0d0;
  --accent-cyan-light: #8fbcbb;
  --accent-blue: #81a1c1;
  --accent-indigo: #5e81ac;
  --accent-emerald: #a3be8c;
  --accent-amber: #ebcb8b;
  --accent-rose: #bf616a;
  --accent-purple: #b48ead;
}

/* ─── 5. Monokai Pro ─── */
[data-theme="monokai-pro"] {
  --bg-primary: #1e1f1c;
  --bg-secondary: #272822;
  --bg-tertiary: #3e3d32;
  --bg-card: rgba(39, 40, 34, 0.92);
  --bg-card-hover: rgba(50, 52, 44, 0.95);
  --bg-input: rgba(30, 31, 28, 0.85);
  --bg-subcard: rgba(39, 40, 34, 0.7);
  --border-color: rgba(255, 216, 102, 0.18);
  --border-hover: rgba(255, 216, 102, 0.45);
  --border-focus: #ffd866;
  --text-primary: #f8f8f2;
  --text-secondary: #c1c0b9;
  --text-muted: #75715e;
  --accent-cyan: #78dce8;
  --accent-cyan-light: #a1efe4;
  --accent-amber: #ffd866;
  --accent-rose: #ff6188;
  --accent-emerald: #a9dc76;
  --accent-purple: #ab9df2;
}

/* ─── 6. Matrix Terminal ─── */
[data-theme="matrix-cyber"] {
  --bg-primary: #050b07;
  --bg-secondary: #0a140d;
  --bg-tertiary: #0f1f14;
  --bg-card: rgba(10, 20, 13, 0.9);
  --bg-card-hover: rgba(15, 31, 20, 0.95);
  --bg-input: rgba(5, 11, 7, 0.85);
  --bg-subcard: rgba(10, 20, 13, 0.7);
  --border-color: rgba(0, 255, 102, 0.2);
  --border-hover: rgba(0, 255, 102, 0.5);
  --border-focus: #00ff66;
  --text-primary: #e6ffe6;
  --text-secondary: #80ffaa;
  --text-muted: #2e6640;
  --accent-cyan: #00ff66;
  --accent-cyan-light: #66ff99;
  --accent-emerald: #00ff66;
  --accent-emerald-light: #80ffaa;
  --accent-amber: #ffcc00;
  --accent-rose: #ff3366;
  --accent-purple: #33cc99;
}

/* ─── 7. Midnight Ocean Navy ─── */
[data-theme="midnight-navy"] {
  --bg-primary: #060c18;
  --bg-secondary: #0b1528;
  --bg-tertiary: #101e38;
  --bg-card: rgba(11, 21, 40, 0.9);
  --bg-card-hover: rgba(16, 30, 56, 0.95);
  --bg-input: rgba(6, 12, 24, 0.85);
  --bg-subcard: rgba(11, 21, 40, 0.7);
  --border-color: rgba(56, 189, 248, 0.18);
  --border-hover: rgba(56, 189, 248, 0.45);
  --border-focus: #38bdf8;
  --text-primary: #f0f9ff;
  --text-secondary: #bae6fd;
  --text-muted: #38bdf8;
  --accent-cyan: #38bdf8;
  --accent-cyan-light: #7dd3fc;
  --accent-blue: #3b82f6;
  --accent-indigo: #60a5fa;
  --accent-emerald: #34d399;
  --accent-amber: #fbbf24;
  --accent-rose: #fb7185;
}

/* ─── 8. Synthwave '84 ─── */
[data-theme="synthwave-84"] {
  --bg-primary: #180d28;
  --bg-secondary: #24143d;
  --bg-tertiary: #321c54;
  --bg-card: rgba(36, 20, 61, 0.9);
  --bg-card-hover: rgba(50, 28, 84, 0.95);
  --bg-input: rgba(24, 13, 40, 0.85);
  --bg-subcard: rgba(36, 20, 61, 0.7);
  --border-color: rgba(255, 42, 133, 0.25);
  --border-hover: rgba(0, 240, 255, 0.5);
  --border-focus: #ff2a85;
  --text-primary: #fdf2f8;
  --text-secondary: #f472b6;
  --text-muted: #9d4edd;
  --accent-cyan: #00f0ff;
  --accent-cyan-light: #70f8ff;
  --accent-rose: #ff2a85;
  --accent-purple: #c084fc;
  --accent-amber: #fde047;
  --accent-emerald: #34d399;
}

/* ─── 9. Cyberpunk 2077 ─── */
[data-theme="cyberpunk-2077"] {
  --bg-primary: #0c0d12;
  --bg-secondary: #141620;
  --bg-tertiary: #1d2030;
  --bg-card: rgba(20, 22, 32, 0.92);
  --bg-card-hover: rgba(29, 32, 48, 0.95);
  --bg-input: rgba(12, 13, 18, 0.85);
  --bg-subcard: rgba(20, 22, 32, 0.7);
  --border-color: rgba(252, 238, 10, 0.25);
  --border-hover: rgba(0, 240, 255, 0.5);
  --border-focus: #fcee0a;
  --text-primary: #ffffff;
  --text-secondary: #fcee0a;
  --text-muted: #71717a;
  --accent-cyan: #00f0ff;
  --accent-cyan-light: #5ef5ff;
  --accent-amber: #fcee0a;
  --accent-rose: #ff0055;
  --accent-emerald: #00ff66;
}

/* ─── 10. Tropical Sunset ─── */
[data-theme="sunset-horizon"] {
  --bg-primary: #170d19;
  --bg-secondary: #231427;
  --bg-tertiary: #331d38;
  --bg-card: rgba(35, 20, 39, 0.9);
  --bg-card-hover: rgba(51, 29, 56, 0.95);
  --bg-input: rgba(23, 13, 25, 0.85);
  --bg-subcard: rgba(35, 20, 39, 0.7);
  --border-color: rgba(249, 115, 22, 0.22);
  --border-hover: rgba(249, 115, 22, 0.5);
  --border-focus: #f97316;
  --text-primary: #fff7ed;
  --text-secondary: #fdba74;
  --text-muted: #c2410c;
  --accent-cyan: #f97316;
  --accent-cyan-light: #fb923c;
  --accent-rose: #f43f5e;
  --accent-amber: #f59e0b;
  --accent-purple: #c084fc;
  --accent-emerald: #10b981;
}

/* ─── 11. Amethyst Galaxy ─── */
[data-theme="amethyst-purple"] {
  --bg-primary: #0f071a;
  --bg-secondary: #180b2a;
  --bg-tertiary: #24113d;
  --bg-card: rgba(24, 11, 42, 0.9);
  --bg-card-hover: rgba(36, 17, 61, 0.95);
  --bg-input: rgba(15, 7, 26, 0.85);
  --bg-subcard: rgba(24, 11, 42, 0.7);
  --border-color: rgba(168, 85, 247, 0.22);
  --border-hover: rgba(168, 85, 247, 0.5);
  --border-focus: #a855f7;
  --text-primary: #faf5ff;
  --text-secondary: #d8b4fe;
  --text-muted: #7e22ce;
  --accent-cyan: #a855f7;
  --accent-cyan-light: #c084fc;
  --accent-purple: #c084fc;
  --accent-rose: #f43f5e;
  --accent-indigo: #818cf8;
  --accent-amber: #fcd34d;
}

/* ─── 12. Crimson Ruby ─── */
[data-theme="crimson-red"] {
  --bg-primary: #140508;
  --bg-secondary: #22090e;
  --bg-tertiary: #330e15;
  --bg-card: rgba(34, 9, 14, 0.9);
  --bg-card-hover: rgba(51, 14, 21, 0.95);
  --bg-input: rgba(20, 5, 8, 0.85);
  --bg-subcard: rgba(34, 9, 14, 0.7);
  --border-color: rgba(244, 63, 94, 0.22);
  --border-hover: rgba(244, 63, 94, 0.5);
  --border-focus: #f43f5e;
  --text-primary: #fff1f2;
  --text-secondary: #fda4af;
  --text-muted: #be123c;
  --accent-cyan: #f43f5e;
  --accent-cyan-light: #fb7185;
  --accent-rose: #f43f5e;
  --accent-amber: #fbbf24;
  --accent-emerald: #10b981;
}

/* ─── 13. Solar Flare ─── */
[data-theme="solar-flare"] {
  --bg-primary: #150903;
  --bg-secondary: #241107;
  --bg-tertiary: #361a0b;
  --bg-card: rgba(36, 17, 7, 0.9);
  --bg-card-hover: rgba(54, 26, 11, 0.95);
  --bg-input: rgba(21, 9, 3, 0.85);
  --bg-subcard: rgba(36, 17, 7, 0.7);
  --border-color: rgba(234, 88, 12, 0.24);
  --border-hover: rgba(234, 88, 12, 0.5);
  --border-focus: #ea580c;
  --text-primary: #fff7ed;
  --text-secondary: #fed7aa;
  --text-muted: #9a3412;
  --accent-cyan: #ea580c;
  --accent-cyan-light: #fb923c;
  --accent-amber: #facc15;
  --accent-rose: #f43f5e;
  --accent-emerald: #22c55e;
}

/* ─── 14. Forest Pine ─── */
[data-theme="forest-pine"] {
  --bg-primary: #06110a;
  --bg-secondary: #0c1f13;
  --bg-tertiary: #132e1c;
  --bg-card: rgba(12, 31, 19, 0.9);
  --bg-card-hover: rgba(19, 46, 28, 0.95);
  --bg-input: rgba(6, 17, 10, 0.85);
  --bg-subcard: rgba(12, 31, 19, 0.7);
  --border-color: rgba(16, 185, 129, 0.22);
  --border-hover: rgba(16, 185, 129, 0.5);
  --border-focus: #10b981;
  --text-primary: #ecfdf5;
  --text-secondary: #a7f3d0;
  --text-muted: #047857;
  --accent-cyan: #10b981;
  --accent-cyan-light: #34d399;
  --accent-emerald: #10b981;
  --accent-emerald-light: #6ee7b7;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
}

/* ─── 15. Coffee & Mocha ─── */
[data-theme="coffee-mocha"] {
  --bg-primary: #120e0b;
  --bg-secondary: #1d1712;
  --bg-tertiary: #2a221b;
  --bg-card: rgba(29, 23, 18, 0.9);
  --bg-card-hover: rgba(42, 34, 27, 0.95);
  --bg-input: rgba(18, 14, 11, 0.85);
  --bg-subcard: rgba(29, 23, 18, 0.7);
  --border-color: rgba(217, 119, 6, 0.2);
  --border-hover: rgba(217, 119, 6, 0.45);
  --border-focus: #d97706;
  --text-primary: #fef3c7;
  --text-secondary: #fde68a;
  --text-muted: #92400e;
  --accent-cyan: #d97706;
  --accent-cyan-light: #f59e0b;
  --accent-amber: #d97706;
  --accent-emerald: #10b981;
  --accent-rose: #f43f5e;
}

/* ─── 16. Deep Abyss ─── */
[data-theme="deep-abyss"] {
  --bg-primary: #020408;
  --bg-secondary: #050a14;
  --bg-tertiary: #081224;
  --bg-card: rgba(5, 10, 20, 0.92);
  --bg-card-hover: rgba(8, 18, 36, 0.95);
  --bg-input: rgba(2, 4, 8, 0.85);
  --bg-subcard: rgba(5, 10, 20, 0.7);
  --border-color: rgba(6, 182, 212, 0.22);
  --border-hover: rgba(6, 182, 212, 0.5);
  --border-focus: #06b6d4;
  --text-primary: #ecfeff;
  --text-secondary: #a5f3fc;
  --text-muted: #0e7490;
  --accent-cyan: #06b6d4;
  --accent-cyan-light: #67e8f9;
  --accent-blue: #0284c7;
  --accent-indigo: #38bdf8;
  --accent-emerald: #14b8a6;
  --accent-amber: #facc15;
}

/* ─── 17. Carbon Minimal ─── */
[data-theme="carbon-graphite"] {
  --bg-primary: #0f0f11;
  --bg-secondary: #18181b;
  --bg-tertiary: #27272a;
  --bg-card: rgba(24, 24, 27, 0.92);
  --bg-card-hover: rgba(39, 39, 42, 0.95);
  --bg-input: rgba(15, 15, 17, 0.85);
  --bg-subcard: rgba(24, 24, 27, 0.7);
  --border-color: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.3);
  --border-focus: #e4e4e7;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #52525b;
  --accent-cyan: #e4e4e7;
  --accent-cyan-light: #ffffff;
  --accent-blue: #a1a1aa;
  --accent-indigo: #d4d4d8;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
}

/* ─── 18. Enterprise Light (Default Light) ─── */
[data-theme="light"] {
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e2e8f0;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-input: #ffffff;
  --bg-subcard: #f8fafc;
  --border-color: rgba(15, 23, 42, 0.12);
  --border-hover: rgba(2, 132, 199, 0.4);
  --border-focus: #0284c7;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --accent-cyan: #0284c7;
  --accent-cyan-light: #0369a1;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
}

/* ─── 19. Nordic Snow (Light) ─── */
[data-theme="nordic-snow"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e2e8f0;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-input: #ffffff;
  --bg-subcard: #f1f5f9;
  --border-color: rgba(71, 85, 105, 0.15);
  --border-hover: rgba(2, 132, 199, 0.45);
  --border-focus: #0284c7;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --accent-cyan: #0284c7;
  --accent-cyan-light: #0ea5e9;
  --accent-blue: #2563eb;
  --accent-indigo: #4f46e5;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
}

/* ─── 20. Emerald Mint (Light) ─── */
[data-theme="emerald-customs"] {
  --bg-primary: #f0fdf4;
  --bg-secondary: #ffffff;
  --bg-tertiary: #dcfce7;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-input: #ffffff;
  --bg-subcard: #f7fee7;
  --border-color: rgba(5, 150, 105, 0.18);
  --border-hover: rgba(5, 150, 105, 0.45);
  --border-focus: #059669;
  --text-primary: #064e3b;
  --text-secondary: #065f46;
  --text-muted: #047857;
  --accent-cyan: #059669;
  --accent-cyan-light: #10b981;
  --accent-emerald: #059669;
  --accent-emerald-light: #10b981;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
}

/* ─── 21. Royal Gold & Pearl (Light) ─── */
[data-theme="royal-gold"] {
  --bg-primary: #fefce8;
  --bg-secondary: #ffffff;
  --bg-tertiary: #fef08a;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-input: #ffffff;
  --bg-subcard: #fffbeb;
  --border-color: rgba(180, 83, 9, 0.18);
  --border-hover: rgba(180, 83, 9, 0.45);
  --border-focus: #b45309;
  --text-primary: #451a03;
  --text-secondary: #78350f;
  --text-muted: #92400e;
  --accent-cyan: #b45309;
  --accent-cyan-light: #d97706;
  --accent-amber: #b45309;
  --accent-emerald: #15803d;
  --accent-indigo: #4338ca;
  --accent-rose: #be123c;
}

/* ─── 22. Sakura Rose (Light) ─── */
[data-theme="rose-blossom"] {
  --bg-primary: #fff1f2;
  --bg-secondary: #ffffff;
  --bg-tertiary: #ffe4e6;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-input: #ffffff;
  --bg-subcard: #fff5f5;
  --border-color: rgba(225, 29, 72, 0.15);
  --border-hover: rgba(225, 29, 72, 0.45);
  --border-focus: #e11d48;
  --text-primary: #4c0519;
  --text-secondary: #881337;
  --text-muted: #9f1239;
  --accent-cyan: #e11d48;
  --accent-cyan-light: #f43f5e;
  --accent-rose: #e11d48;
  --accent-purple: #9333ea;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
}

/* ─── 23. Warm Sand & Linen (Light) ─── */
[data-theme="desert-sand"] {
  --bg-primary: #faf8f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3ede2;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-input: #ffffff;
  --bg-subcard: #f9f6f0;
  --border-color: rgba(146, 64, 14, 0.16);
  --border-hover: rgba(146, 64, 14, 0.45);
  --border-focus: #b45309;
  --text-primary: #292524;
  --text-secondary: #44403c;
  --text-muted: #78716c;
  --accent-cyan: #b45309;
  --accent-cyan-light: #d97706;
  --accent-amber: #b45309;
  --accent-emerald: #059669;
  --accent-rose: #e11d48;
}

/* ─── 24. Solarized Paper (Light) ─── */
[data-theme="solarized-light"] {
  --bg-primary: #fdf6e3;
  --bg-secondary: #eee8d5;
  --bg-tertiary: #e0d8c3;
  --bg-card: #eee8d5;
  --bg-card-hover: #fdf6e3;
  --bg-input: #fdf6e3;
  --bg-subcard: #f5eed9;
  --border-color: rgba(7, 54, 66, 0.15);
  --border-hover: rgba(42, 161, 152, 0.5);
  --border-focus: #2aa198;
  --text-primary: #073642;
  --text-secondary: #586e75;
  --text-muted: #657b83;
  --accent-cyan: #2aa198;
  --accent-cyan-light: #36b5ab;
  --accent-blue: #268bd2;
  --accent-emerald: #859900;
  --accent-amber: #b58900;
  --accent-rose: #dc322f;
}

/* ─── Universal Liquid Glass Specular Enhancement Across All Theme Skins ─── */
.card,
.step-section,
.function-form-card,
.modal-card,
.stat-item,
.theme-modal-card {
  backdrop-filter: blur(22px) saturate(180%) contrast(102%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) contrast(102%) !important;
}