/* =====================================================================
   LIQUID GLASS — Refined Minimal (framework-agnostic layer)
   Loaded LAST in header.html so it wins the cascade over Bootstrap
   and the page-level <style> blocks. Zero JS logic changes.

   Single source of truth = the three RGB triplets below + the neutral
   surface tokens in :root / [data-theme="dark"]. Re-skin = edit those.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BRAND TRIPLETS  (edit only these three)
--------------------------------------------------------------------- */
:root {
  --lg-primary: 139 92 246;       /* violet #8B5CF6 */
  --lg-primary-soft: 167 139 250; /* lighter violet #A78BFA */
  --lg-accent: 224 190 138;       /* champagne gold #E0BE8A */

  --lg-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --lg-font-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lg-radius: 20px;
  --lg-radius-lg: 28px;
  --lg-pill: 999px;

  /* existing app tokens remapped onto the new palette (light theme) */
  --primary-color: #7c3aed;
  --secondary-color: #5a6272;
  --success-color: #16a34a;
  --danger-color: #dc2626;
  --warning-color: #d97706;
  --info-color: #0891b2;
  --light-bg: #f3f5fa;
  --card-shadow: 0 8px 24px -12px rgba(22, 27, 42, 0.16);
  --card-shadow-hover: 0 20px 44px -18px rgba(22, 27, 42, 0.28);
  --bg-primary: #fbfcfe;
  --bg-secondary: #eef1f7;
  --bg-card: #fbfcfe;
  --text-primary: #161b2a;
  --text-secondary: #5a6272;
  --text-muted: #7c8598;
  --border-color: #e3e8f0;
  --border-light: #edf1f7;
  --filter-bg: #f3f5fa;
  --stats-bg-start: #f3f5fa;
  --stats-bg-end: #e9edf5;
  --stats-border: #e3e8f0;
  --input-bg: #ffffff;
  --input-border: #dfe5ef;
  --upload-bg: #ffffff;
  --upload-border: #dfe5ef;
  --upload-hover-bg: #f0f5ff;
  --preview-bg: #ffffff;
  --preview-checker: #e9edf5;
  --crop-wrapper-bg: #f3f5fa;
  --crop-wrapper-border: #dfe5ef;
  --toast-bg: #fbfcfe;
  --toast-shadow: 0 12px 32px -12px rgba(22, 27, 42, 0.28);
  --navbar-dark-text: rgba(237, 241, 250, 0.72);
  --modal-content-bg: #fbfcfe;
  --modal-backdrop: rgba(10, 14, 25, 0.55);
  --link-color: #7c3aed;

  /* Bootstrap body vars (light) */
  --bs-body-bg: var(--light-bg);
  --bs-body-color: var(--text-primary);
  --bs-body-font-family: var(--lg-font-body);
  --bs-primary: #7c3aed;
  --bs-primary-rgb: 124, 58, 237;
  --bs-link-color: #7c3aed;

  /* liquid-glass semantic tokens (light — milk-white, translucent) */
  --lg-bg: #e6e8ee;
  --lg-panel: #ffffff;
  --lg-panel-2: #f3f2f8;
  --lg-elev: #f6efef;
  --lg-border: rgba(22, 27, 42, 0.10);
  --lg-border-strong: rgba(22, 27, 42, 0.20);
  --lg-text: #161b2a;
  --lg-text-soft: #5a6272;
  --lg-text-faint: #7c8598;
  --lg-hover: rgba(22, 27, 42, 0.05);
  --lg-shadow: 0 24px 60px -36px rgba(76, 95, 140, 0.5);
  --lg-glass-bg: rgba(240, 244, 240, 0.62);
  --lg-glass-bg-strong: rgba(255, 255, 255, 0.84);
  --lg-glass-border: rgba(255, 255, 255, 0.9);
  --lg-glass-highlight: rgba(255, 255, 255, 0.98);
  --lg-blur: 24px;
  --lg-blur-strong: 40px;
  --lg-saturate: 180%;
  --lg-aura: 0.55;
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. DARK THEME — swap neutral surface tokens, keep brand triplets
--------------------------------------------------------------------- */
[data-theme="dark"] {
  --primary-color: #2dd4bf;
  --secondary-color: #93a7b8;
  --success-color: #34d399;
  --danger-color: #f87171;
  --warning-color: #fbbf24;
  --info-color: #38bdf8;
  --light-bg: #0a1216;
  --card-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --card-shadow-hover: 0 22px 50px -20px rgba(0, 0, 0, 0.75);
  --bg-primary: #0d171d;
  --bg-secondary: #0a1216;
  --bg-card: #13202a;
  --text-primary: #e5eef4;
  --text-secondary: #93a7b8;
  --text-muted: #6b8291;
  --border-color: #1d303b;
  --border-light: #16262f;
  --filter-bg: #0d171d;
  --stats-bg-start: #0d171d;
  --stats-bg-end: #0a1216;
  --stats-border: #1d303b;
  --input-bg: #13202a;
  --input-border: #223845;
  --upload-bg: #0f1a20;
  --upload-border: #223845;
  --upload-hover-bg: #13202a;
  --preview-bg: #0f1a20;
  --preview-checker: #182a35;
  --crop-wrapper-bg: #0f1a20;
  --crop-wrapper-border: #223845;
  --toast-bg: #0f1a20;
  --toast-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --navbar-dark-text: rgba(229, 238, 244, 0.62);
  --modal-content-bg: #0f1a20;
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --link-color: #5eead4;

  --bs-body-bg: var(--light-bg);
  --bs-body-color: var(--text-primary);
  --bs-primary: #2dd4bf;
  --bs-primary-rgb: 45, 212, 191;
  --bs-link-color: #5eead4;

  --lg-primary: 45 212 191;
  --lg-primary-soft: 94 234 212;
  --lg-bg: #0a1216;
  --lg-panel: #0f1a20;
  --lg-panel-2: #132129;
  --lg-elev: #182832;
  --lg-border: rgba(148, 197, 214, 0.12);
  --lg-border-strong: rgba(148, 197, 214, 0.24);
  --lg-text: #e5eef4;
  --lg-text-soft: #93a7b8;
  --lg-text-faint: #6b8291;
  --lg-hover: rgba(229, 238, 244, 0.055);
  --lg-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.75);
  --lg-glass-bg: rgba(15, 26, 32, 0.55);
  --lg-glass-bg-strong: rgba(15, 26, 32, 0.82);
  --lg-glass-border: rgba(255, 255, 255, 0.18);
  --lg-glass-highlight: rgba(255, 255, 255, 0.30);
  --lg-blur: 26px;
  --lg-blur-strong: 44px;
  --lg-saturate: 190%;
  --lg-aura: 0.38;
  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   3. BASE
--------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  background-color: var(--lg-bg);
  color: var(--lg-text);
  font-family: var(--lg-font-body);
  font-weight: 400;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv01";
}

::selection { background: rgb(var(--lg-primary)); color: #fff; }

/* smooth cross-fade on theme change */
body, .card, .modal-content, .list-group-item, .dropdown-menu,
.form-control, .form-select, .input-group-text,
.page-link, .navbar, .footer, .stats-banner, .filter-section,
.btn, .badge, .toast, .toast-notification {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

/* ---------------------------------------------------------------------
   4. TYPOGRAPHY
--------------------------------------------------------------------- */
.display {
  font-family: var(--lg-font-display);
  font-optical-sizing: auto;
  font-weight: 360;
  letter-spacing: -0.025em;
  line-height: 0.92;
}
.display-italic { font-style: italic; font-variation-settings: "SOFT" 4; }

.kicker {
  font-family: var(--lg-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgb(var(--lg-primary-soft));
}

h1, h2, h3, h4, h5, h6 { font-family: var(--lg-font-body); letter-spacing: -0.02em; }

/* ---------------------------------------------------------------------
   5. ATMOSPHERE — the colorful backdrop glass needs to refract
--------------------------------------------------------------------- */
.lg-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1100px 640px at 12% -10%, rgb(var(--lg-primary) / 0.30), transparent 60%),
    radial-gradient(900px 560px at 88% 0%, rgb(139 92 246 / 0.26), transparent 62%),
    radial-gradient(760px 520px at 50% 112%, rgb(244 114 182 / 0.22), transparent 62%),
    radial-gradient(640px 460px at -4% 58%, rgb(34 211 238 / 0.20), transparent 60%),
    radial-gradient(680px 480px at 104% 72%, rgb(251 146 60 / 0.20), transparent 60%),
    var(--lg-bg);
}
[data-theme="dark"] .lg-atmosphere {
  background:
    radial-gradient(1100px 640px at 12% -10%, rgb(45 212 191 / 0.22), transparent 60%),
    radial-gradient(900px 560px at 88% 0%, rgb(34 211 238 / 0.18), transparent 62%),
    radial-gradient(760px 520px at 50% 112%, rgb(56 189 248 / 0.16), transparent 62%),
    radial-gradient(640px 460px at -4% 58%, rgb(45 212 191 / 0.12), transparent 60%),
    radial-gradient(680px 480px at 104% 72%, rgb(59 130 246 / 0.12), transparent 60%),
    var(--lg-bg);
}

.lg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(74px);
  opacity: var(--lg-aura);
  will-change: transform;
}
.lg-blob--a {
  width: 46vw; height: 46vw; left: 44%; top: -14%;
  background: radial-gradient(circle, rgb(var(--lg-primary) / 0.85), transparent 68%);
  animation: lgFloatA 26s ease-in-out infinite;
}
.lg-blob--b {
  width: 38vw; height: 38vw; left: 62%; top: 30%;
  background: radial-gradient(circle, rgb(var(--lg-primary) / 0.8), transparent 68%);
  animation: lgFloatB 32s ease-in-out infinite;
}
.lg-blob--c {
  width: 32vw; height: 32vw; left: 14%; top: 44%;
  background: radial-gradient(circle, rgb(244 114 182 / 0.7), transparent 68%);
  animation: lgFloatC 38s ease-in-out infinite;
}
[data-theme="dark"] .lg-blob--c {
  background: radial-gradient(circle, rgb(34 211 238 / 0.6), transparent 68%);
}
@keyframes lgFloatA { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-12vw,8vh) scale(1.15); } 66% { transform: translate(8vw,-7vh) scale(0.92); } }
@keyframes lgFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-14vw,11vh) scale(1.2); } }
@keyframes lgFloatC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(12vw,-11vh) scale(0.86); } }

/* cursor-reactive aura (position driven by liquid-glass.js) */
.lg-cursor-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 520px; height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgb(var(--lg-primary) / 0.16), transparent 62%);
  opacity: 0;
  will-change: transform;
}

/* grain — analog warmth + hides gradient banding */
.lg-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------------
   6. GLASS UTILITIES
--------------------------------------------------------------------- */
.glass-surface {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04) 34%, transparent 55%),
    var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-glass-border);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(255 255 255 / 0.05),
    inset 1px 0 0 rgb(255 255 255 / 0.10),
    inset -1px 0 0 rgb(255 255 255 / 0.08);
}
.glass-surface-soft {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.05) 34%, transparent 55%),
    var(--lg-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(calc(var(--lg-saturate) + 20%));
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(calc(var(--lg-saturate) + 20%));
  border: 1px solid var(--lg-glass-border);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    var(--lg-shadow);
}
.glass-menu {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03) 40%, transparent 60%),
    color-mix(in srgb, var(--lg-panel) 94%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), var(--lg-shadow);
}
.glass-inset {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.10), transparent 55%),
    color-mix(in srgb, var(--lg-elev) 55%, transparent);
  border: 1px solid var(--lg-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
}
.glass-inset-hover { transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.glass-inset-hover:hover {
  background: color-mix(in srgb, var(--lg-elev) 70%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.05);
}

/* light theme: thinner panel + more saturation so pastel aura reads through */
[data-theme="light"] .glass-surface,
[data-theme="light"] .glass-surface-soft {
  -webkit-backdrop-filter: blur(calc(var(--lg-blur) - 4px)) saturate(210%);
  backdrop-filter: blur(calc(var(--lg-blur) - 4px)) saturate(210%);
}

/* ---------------------------------------------------------------------
   7. BUTTONS — glass + brand-tinted frost
--------------------------------------------------------------------- */
.btn {
  font-weight: 500;
  border-radius: var(--lg-pill);
  border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }

/* 3D glassmorphism buttons — glossy frosted surface, thick light border, soft float shadow */
.btn-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.16)),
    rgba(255, 255, 255, 0.12);
  border-color: var(--lg-glass-border);
  color: var(--lg-text);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 1px rgba(255, 255, 255, 0.10),
    0 10px 24px -10px rgba(0, 0, 0, 0.3);
}
.btn-primary:hover,
.btn-primary:focus {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.20)),
    rgba(255, 255, 255, 0.18);
  border-color: var(--lg-glass-border);
  color: var(--lg-text);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.65),
    inset 0 -2px 1px rgba(255, 255, 255, 0.14),
    0 12px 28px -10px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.btn-outline-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.18)),
    var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-color: rgba(255, 255, 255, 0.55);
  color: rgb(var(--lg-primary));
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2px 1px rgba(255, 255, 255, 0.12),
    0 12px 28px -10px rgba(0, 0, 0, 0.32);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.22)),
    rgb(var(--lg-primary) / 0.14);
  border-color: rgba(255, 255, 255, 0.7);
  color: rgb(var(--lg-primary));
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.65),
    inset 0 -2px 1px rgba(255, 255, 255, 0.16),
    0 14px 30px -10px rgba(0, 0, 0, 0.35);
}

.btn-outline-secondary,
.btn-outline-light {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.18)),
    var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-color: var(--lg-glass-border);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2px 1px rgba(255, 255, 255, 0.12),
    0 12px 28px -10px rgba(0, 0, 0, 0.32);
}
.btn-outline-secondary { color: var(--lg-text-soft); }
.btn-outline-secondary:hover,
.btn-outline-light:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.22)),
    var(--lg-hover);
  border-color: var(--lg-glass-border);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.65),
    inset 0 -2px 1px rgba(255, 255, 255, 0.16),
    0 14px 30px -10px rgba(0, 0, 0, 0.35);
}

/* disabled + pressed states — keep the frosted glass, no Bootstrap blue */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  opacity: 0.55;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.14)),
    rgba(255, 255, 255, 0.10) !important;
  border-color: var(--lg-glass-border) !important;
  color: var(--lg-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.20)),
    rgba(255, 255, 255, 0.18) !important;
  border-color: var(--lg-glass-border) !important;
  color: var(--lg-text) !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.5),
    inset 0 -2px 1px rgba(255, 255, 255, 0.10) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.show,
.btn-outline-light:active,
.btn-outline-light.active,
.btn-outline-light.show,
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary,
.show > .btn-outline-primary.dropdown-toggle,
.show > .btn-outline-secondary.dropdown-toggle,
.show > .btn-outline-light.dropdown-toggle {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.09) 45%, rgba(255, 255, 255, 0.20)),
    var(--lg-glass-bg) !important;
  border-color: var(--lg-glass-border) !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 1px rgba(255, 255, 255, 0.12) !important;
}
/* keep per-variant text color on show/active (Bootstrap flips it to white) */
.btn-outline-primary.show,
.btn-outline-primary:active,
.btn-outline-primary.active { color: rgb(var(--lg-primary)) !important; }
.btn-outline-secondary.show,
.btn-outline-secondary:active,
.btn-outline-secondary.active { color: var(--lg-text-soft) !important; }

/* keyboard focus ring — violet instead of Bootstrap blue */
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--lg-primary) / 0.45) !important;
}

/* ---------------------------------------------------------------------
   7b. SEMANTIC BUTTONS — tinted frosted glass (danger / success / warning)
       instead of Bootstrap's flat solid colors, so every control on the
       template page reads as the same liquid-glass material.
--------------------------------------------------------------------- */
.btn-danger {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.16)),
    color-mix(in srgb, var(--danger-color) 16%, transparent);
  border-color: color-mix(in srgb, var(--danger-color) 55%, transparent);
  color: var(--danger-color);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 1px rgba(255, 255, 255, 0.10),
    0 10px 24px -10px color-mix(in srgb, var(--danger-color) 45%, transparent);
}
.btn-danger:hover,
.btn-danger:focus {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.20)),
    color-mix(in srgb, var(--danger-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--danger-color) 70%, transparent);
  color: var(--danger-color);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.65),
    inset 0 -2px 1px rgba(255, 255, 255, 0.14),
    0 12px 28px -10px color-mix(in srgb, var(--danger-color) 55%, transparent);
}

.btn-success {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.16)),
    color-mix(in srgb, var(--success-color) 16%, transparent);
  border-color: color-mix(in srgb, var(--success-color) 55%, transparent);
  color: var(--success-color);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 1px rgba(255, 255, 255, 0.10),
    0 10px 24px -10px color-mix(in srgb, var(--success-color) 45%, transparent);
}
.btn-success:hover,
.btn-success:focus {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.20)),
    color-mix(in srgb, var(--success-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--success-color) 70%, transparent);
  color: var(--success-color);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.65),
    inset 0 -2px 1px rgba(255, 255, 255, 0.14),
    0 12px 28px -10px color-mix(in srgb, var(--success-color) 55%, transparent);
}

.btn-warning {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.16)),
    color-mix(in srgb, var(--warning-color) 16%, transparent);
  border-color: color-mix(in srgb, var(--warning-color) 55%, transparent);
  color: var(--warning-color);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 1px rgba(255, 255, 255, 0.10),
    0 10px 24px -10px color-mix(in srgb, var(--warning-color) 45%, transparent);
}
.btn-warning:hover,
.btn-warning:focus {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.20)),
    color-mix(in srgb, var(--warning-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--warning-color) 70%, transparent);
  color: var(--warning-color);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.65),
    inset 0 -2px 1px rgba(255, 255, 255, 0.14),
    0 12px 28px -10px color-mix(in srgb, var(--warning-color) 55%, transparent);
}

/* outline semantic variants — same frost as btn-outline-primary, colored text */
.btn-outline-danger,
.btn-outline-warning {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.18)),
    var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2px 1px rgba(255, 255, 255, 0.12),
    0 12px 28px -10px rgba(0, 0, 0, 0.32);
}
.btn-outline-danger {
  border-color: color-mix(in srgb, var(--danger-color) 45%, transparent);
  color: var(--danger-color);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.22)),
    color-mix(in srgb, var(--danger-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger-color) 65%, transparent);
  color: var(--danger-color);
}
.btn-outline-warning {
  border-color: color-mix(in srgb, var(--warning-color) 45%, transparent);
  color: var(--warning-color);
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.22)),
    color-mix(in srgb, var(--warning-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning-color) 65%, transparent);
  color: var(--warning-color);
}

/* pressed states — keep the tint, no flat Bootstrap solid flash */
.btn-danger:active,
.btn-danger.active,
.btn-success:active,
.btn-success.active,
.btn-warning:active,
.btn-warning.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.14)),
    color-mix(in srgb, currentColor 18%, transparent) !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 1px rgba(255, 255, 255, 0.10) !important;
}
.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-warning:active,
.btn-outline-warning.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.09) 45%, rgba(255, 255, 255, 0.20)),
    var(--lg-glass-bg) !important;
}

/* rating stars — gold gradient + soft glow for the active/selected state */
.rating-stars .star.active {
  background: linear-gradient(135deg, #ffd86f 0%, #ff9a56 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgb(251 191 36 / 0.45));
}

/* radio toggle (btn-check) checked state — brand-tinted frosted glass with
   white text, so the active mode (Cắt / Vẽ in the image editor) is clearly
   visible instead of blending into the light toolbar */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary {
  background:
    linear-gradient(180deg, rgb(var(--lg-primary-soft) / 0.32), rgb(var(--lg-primary) / 0.12) 45%, rgb(var(--lg-primary) / 0.22)),
    rgb(var(--lg-primary) / 0.20) !important;
  border-color: rgb(var(--lg-primary) / 0.6) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -6px 14px rgba(0, 0, 0, 0.12),
    0 8px 20px -8px rgb(var(--lg-primary) / 0.45) !important;
}

/* light theme — visible borders for outline buttons on light backgrounds */
[data-theme="light"] .btn-outline-primary {
  border-color: rgb(var(--lg-primary) / 0.45);
}
[data-theme="light"] .btn-outline-secondary {
  border-color: rgba(22, 27, 42, 0.25);
}

/* "selected" state of toggles that reuse .btn-primary as the active marker
   (profile grid/list switch, admin tabs) — brand-tinted frosted glass so the
   active item is clearly distinguished from its outline neighbors, instead
   of looking plainer than the inactive (violet) ones in light theme */
.btn-group .btn-primary,
.admin-tab-btn.btn-primary {
  background:
    linear-gradient(180deg, rgb(var(--lg-primary-soft) / 0.32), rgb(var(--lg-primary) / 0.12) 45%, rgb(var(--lg-primary) / 0.22)),
    rgb(var(--lg-primary) / 0.20) !important;
  border-color: rgb(var(--lg-primary) / 0.6) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -6px 14px rgba(0, 0, 0, 0.12),
    0 8px 20px -8px rgb(var(--lg-primary) / 0.45) !important;
}

/* ---------------------------------------------------------------------
   8. NAVBAR — frosted chrome. Light theme keeps the original brand
      violet; dark theme swaps to a translucent dark teal glass (liquid
      glass) instead of a solid bright bar.
--------------------------------------------------------------------- */
.navbar.bg-primary,
.navbar {
  position: relative;
  z-index: 1030;
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    inset 0 -1px 0 rgb(255 255 255 / 0.04),
    0 12px 40px -20px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] nav.navbar.bg-primary,
[data-theme="dark"] .navbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 55%, transparent),
    rgba(9, 18, 24, 0.72) !important;
}
.navbar .navbar-brand { color: #fff; }
.navbar-nav .nav-link {
  color: var(--navbar-dark-text);
  border-radius: var(--lg-pill);
}
.navbar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff;
}
.navbar-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff;
}
.navbar .dropdown-menu {
  background:
    linear-gradient(160deg, rgb(var(--lg-primary) / 0.94), rgb(var(--lg-primary-soft) / 0.78));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.20), 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}
/* dark theme — dark frosted dropdown matching the dark navbar */
[data-theme="dark"] .navbar .dropdown-menu {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 55%, transparent),
    rgba(13, 24, 31, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
.navbar .dropdown-item { color: #edf1fa; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* credits pill — original gold gradient restored (defined in style.css) */

/* ---------------------------------------------------------------------
   9. CARDS / SURFACES
--------------------------------------------------------------------- */
.card {
  position: relative;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.06) 36%, transparent 58%),
    var(--lg-glass-bg);
  border: 1px solid var(--lg-glass-border);
  border-radius: var(--lg-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -1px 0 rgb(255 255 255 / 0.06),
    var(--card-shadow);
  color: var(--lg-text);
}
.card:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    inset 0 -1px 0 rgb(255 255 255 / 0.08),
    var(--card-shadow-hover);
}

/* when a dropdown/select is open inside a card, lift it above siblings + footer.
   (backdrop-filter traps z-index, so we raise the whole card while open.) */
.card:has(.dropdown.show),
.card:has(.bootstrap-select.show) {
  z-index: 2000;
}

.card-header, .card-footer {
  background: transparent;
  border-color: var(--lg-border);
  color: var(--lg-text);
}

/* Bootstrap gives card-header/footer a tiny 5px inner radius
   (--bs-card-inner-border-radius); next to our 20px glass card that reads
   as broken corners. Echo the card's radius so the corners line up. */
.card-header:first-child {
  border-radius: var(--lg-radius) var(--lg-radius) 0 0;
}
.card-footer:last-child {
  border-radius: 0 0 var(--lg-radius) var(--lg-radius);
}

/* dark theme: style.css paints card-header/footer solid (--bg-primary);
   make them transparent so they blend with the glass card like light theme */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background: transparent;
}

/* template card tiles (homepage) — real frost so the grid reads as glass */
.template-card {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.04) 40%, transparent 60%),
    color-mix(in srgb, var(--lg-elev) 55%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--lg-glass-border);
  border-radius: var(--lg-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    inset 0 -1px 0 rgb(255 255 255 / 0.05),
    0 6px 18px -10px rgba(0, 0, 0, 0.25);
}
.template-card:hover {
  border-color: var(--lg-glass-border);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    inset 0 -1px 0 rgb(255 255 255 / 0.07),
    0 18px 40px -18px rgba(0, 0, 0, 0.4);
}

/* template thumbnail — show the full image (contain) AND keep corners
   rounded to the card's radius. Auto-size the img to its natural ratio
   (no forced box, no letterbox) so border-radius rounds the photo itself,
   not an empty frame around it. */
.template-card img,
.template-card .card-img-top {
  display: block;
  width: auto;
  height: auto;
  max-width: 95%;
  max-height: 200px;
  margin: 0.5em auto;
  object-fit: contain;
  border-radius: var(--lg-radius);
}

/* primary CTA buttons (homepage + all pages) — frosted liquid-glass with
   a shimmer sweep so the main action stands out */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%);
  /* filter: blur(5px); */
  transform: skewX(-20deg);
  animation: lg-cta-shine 3.2s ease-in-out infinite;
}
.btn-primary:hover::before {
  animation-duration: 0.9s;
}
/* colorful stars icon inside primary buttons — gradient-filled glyph */
.btn-primary .bi-stars::before {
  background: linear-gradient(135deg, #ffd86f 0%, #ff9a56 30%, #ff6fa5 60%, #9d7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes lg-cta-shine {
  0%   { left: -150%; opacity: 0; }
  40%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { left: 220%; opacity: 0; }
}

/* template #id badge — identical to the viewing badge */
.template-card .template-stats .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--lg-glass-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgb(var(--lg-primary) / 0.35) !important;
  color: var(--primary-color) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
  border-radius: 16px !important;
  font-size: 0.68rem !important;
  font-weight: 500;
  line-height: 1.2;
}

/* features step / benefit cards */
.step-card, .benefit-card, .feature-card, .pricing-card {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.20), rgb(255 255 255 / 0.05) 36%, transparent 58%),
    var(--lg-glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-glass-border);
  border-radius: var(--lg-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -1px 0 rgb(255 255 255 / 0.05),
    var(--card-shadow);
}
.step-card:hover, .benefit-card:hover, .feature-card:hover, .pricing-card:hover {
  box-shadow: inset 0 1px 0 var(--lg-glass-highlight), var(--card-shadow-hover);
}

/* featured pricing card — brand-tinted frost + rim */
.pricing-card.featured {
  border: 1px solid rgb(var(--lg-primary) / 0.55) !important;
  box-shadow: inset 0 1px 0 var(--lg-glass-highlight), 0 18px 44px -16px rgb(var(--lg-primary) / 0.4);
}
.pricing-card.featured .card-title { color: var(--lg-text); }
.pricing-card.featured .pricing-price .display-4 { color: rgb(var(--lg-primary)); }

/* PAYG button — same frosted glass as the other plan buttons (style.css
   painted it violet `var(--primary-color)` / blue `#1d4ed8` on hover) */
.pricing-card.featured .btn-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.16)),
    rgba(255, 255, 255, 0.12);
  border-color: var(--lg-glass-border);
  color: var(--lg-text);
  font-weight: 500;
}
.pricing-card.featured .btn-primary:hover,
.pricing-card.featured .btn-primary:focus {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.20)),
    rgba(255, 255, 255, 0.18);
  border-color: var(--lg-glass-border);
  color: var(--lg-text);
}

/* ---------------------------------------------------------------------
   10. FILTER SECTION (sticky) — real frost
--------------------------------------------------------------------- */
.filter-section {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04) 36%, transparent 58%),
    var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border-bottom: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.04), 0 8px 30px -18px rgba(0, 0, 0, 0.3);
}
.filter-section.scrolled { box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.4); }

.filter-tab {
  color: var(--lg-text-soft);
  border-radius: var(--lg-pill);
}
.filter-tab:hover {
  background: rgb(var(--lg-primary) / 0.10);
  color: rgb(var(--lg-primary));
}
.filter-tab.active {
  color: var(--lg-text);
  background: color-mix(in srgb, var(--lg-elev) 55%, transparent);
  box-shadow: inset 0 1px 0 var(--lg-glass-highlight);
}
.filter-tab.active::after {
  background: rgb(var(--lg-primary));
}

.search-input {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04) 36%, transparent 58%),
    var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-glass-border);
  color: var(--lg-text);
}
.search-input:focus {
  border-color: rgb(var(--lg-primary));
  box-shadow: 0 0 0 3px rgb(var(--lg-primary) / 0.15);
}

/* ---------------------------------------------------------------------
   11. FORMS
--------------------------------------------------------------------- */
.form-control, .form-select, .input-group-text {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.03) 36%, transparent 58%),
    var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-glass-border);
  color: var(--lg-text);
  border-radius: 14px;
}
.form-control:focus, .form-select:focus {
  background: var(--lg-glass-bg);
  border-color: rgb(var(--lg-primary));
  box-shadow: 0 0 0 3px rgb(var(--lg-primary) / 0.16);
  color: var(--lg-text);
}
.form-control::placeholder { color: var(--lg-text-faint); }

/* light theme — solid white + visible border so inputs/textareas clearly
   read as editable (the milky frosted glass looked read-only on bright
   surfaces) */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: #ffffff;
  border-color: rgba(22, 27, 42, 0.25);
  box-shadow: inset 0 1px 2px rgba(22, 27, 42, 0.05);
}
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background: #ffffff;
  border-color: rgb(var(--lg-primary));
  box-shadow: 0 0 0 3px rgb(var(--lg-primary) / 0.15);
}

/* light theme combobox (bootstrap-select renders a .btn-outline-primary):
   neutral 1px border like the textareas; keep the original violet text
   and frosted background. Violet accent shows on focus/open. */
[data-theme="light"] .bootstrap-select .dropdown-toggle {
  border-width: 1px;
  border-color: rgba(22, 27, 42, 0.25);
}
[data-theme="light"] .bootstrap-select .dropdown-toggle:focus,
[data-theme="light"] .bootstrap-select .dropdown-toggle.show {
  border-color: rgb(var(--lg-primary));
  box-shadow: 0 0 0 3px rgb(var(--lg-primary) / 0.15);
}

/* ---------------------------------------------------------------------
   12. MODALS / DROPDOWNS
--------------------------------------------------------------------- */
.modal-content {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.05) 34%, transparent 55%),
    var(--lg-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(calc(var(--lg-saturate) + 20%));
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(calc(var(--lg-saturate) + 20%));
  border: 1px solid var(--lg-glass-border);
  border-radius: var(--lg-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.modal-header { border-bottom-color: var(--lg-border); }
.modal-footer { border-top-color: var(--lg-border); }

.dropdown-menu {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.10), rgb(255 255 255 / 0.02) 40%, transparent 60%),
    color-mix(in srgb, var(--lg-panel) 94%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), var(--lg-shadow);
}
.dropdown-item { color: var(--lg-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--lg-hover); color: var(--lg-text); }

/* dropdown selection — violet glass instead of Bootstrap blue */
.dropdown-item.active,
.dropdown-item.selected,
.dropdown-item:active,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.selected {
  background: rgb(var(--lg-primary) / 0.16) !important;
  color: rgb(var(--lg-primary)) !important;
}
.dropdown-divider { border-color: var(--lg-border); }

/* ---------------------------------------------------------------------
   13. STATS BANNER / TOASTS / BADGES / ALERTS
--------------------------------------------------------------------- */
.stats-banner {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04) 36%, transparent 58%),
    var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border-bottom: 1px solid var(--lg-glass-border);
  color: var(--lg-text);
}
.stats-banner .stats-icon { color: rgb(var(--lg-primary)); }
.stats-banner .stats-label { color: var(--lg-text-soft); }

.toast, .toast-notification {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04) 34%, transparent 55%),
    var(--lg-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), var(--lg-shadow);
  color: var(--lg-text);
}

.alert {
  background: var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius);
  color: var(--lg-text);
}

.badge { border-radius: var(--lg-pill); font-weight: 500; }

/* hint chips (parameter suggestions) — keep original neutral colors,
   only switch the border to dashed so they read as hints, not inputs */
.param-hints .badge {
  border-radius: 8px;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  border-style: dashed !important;
  cursor: pointer;
  transition: border-color 0.18s var(--lg-ease);
}
.param-hints .badge:hover {
  border-color: #9aa3ad !important;
}

/* ---------------------------------------------------------------------
   14. HERO (homepage) — type-as-hero, refined minimal
--------------------------------------------------------------------- */
.hero-section {
  padding: 1.5rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.hero-shape { opacity: 0.5; }
.hero-shape-1 { background: radial-gradient(circle, rgb(var(--lg-primary-soft) / 0.8), transparent 70%); }
.hero-shape-2 { background: radial-gradient(circle, rgb(var(--lg-accent) / 0.7), transparent 70%); }
.hero-shape-3 { background: radial-gradient(circle, rgb(var(--lg-primary) / 0.7), transparent 70%); }

.hero-title {
  font-family: var(--lg-font-display);
  font-weight: 360;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--lg-text) !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
.hero-subtitle {
  color: var(--lg-text-soft) !important;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  max-width: 560px;
}

/* ---------------------------------------------------------------------
   15. FOOTER — dark glass band
--------------------------------------------------------------------- */
footer.bg-dark,
.footer.bg-dark {
  background: linear-gradient(180deg, rgba(8, 15, 20, 0.94), rgba(8, 15, 20, 0.97)) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(170%);
  backdrop-filter: blur(var(--lg-blur)) saturate(170%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8ecf6;
}

/* ---------------------------------------------------------------------
   16. HERO PAGE-LOAD ORCHESTRATION — pure CSS, gated by html.lg-js
       (lg-js is set by an inline <head> script before first paint)
--------------------------------------------------------------------- */
html.lg-js .hero-badge { animation: lgRise 1s var(--lg-ease) 0s both; }
html.lg-js .hero-title { animation: lgRise 1s var(--lg-ease) 0.08s both; }
html.lg-js .hero-subtitle { animation: lgRise 1s var(--lg-ease) 0.2s both; }
html.lg-js .hero-divider { animation: lgRise 1s var(--lg-ease) 0.3s both; }
@keyframes lgRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
html.lg-reduced .hero-badge,
html.lg-reduced .hero-title,
html.lg-reduced .hero-subtitle,
html.lg-reduced .hero-divider {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------
   17. MISC
--------------------------------------------------------------------- */
/* marketing gradient cards (features/CTA) -> dark frosted glass so their white text stays readable */
.card[style*="linear-gradient"] {
  background: linear-gradient(150deg, rgba(12, 22, 28, 0.90), rgba(12, 22, 28, 0.72)) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(170%);
  backdrop-filter: blur(var(--lg-blur)) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--lg-shadow);
  color: #edf1fa;
}

/* links */
a { color: var(--lg-text); }
a.text-primary { color: rgb(var(--lg-primary)) !important; }
.text-primary { color: rgb(var(--lg-primary)) !important; }

/* progress */
.progress { background: var(--lg-border); border-radius: var(--lg-pill); }
.progress-bar { border-radius: var(--lg-pill); }

/* style.css targets #progressCard .progress (ID = higher specificity) and
   fixes the track at 8px while the bar stays pill → corners mismatch.
   Unify the track to pill, and give light theme a clearly visible track
   well (style.css's --border-light is nearly white in light theme). */
#progressCard .progress {
  border-radius: var(--lg-pill);
  background-color: #d8dee8;
}
[data-theme="dark"] #progressCard .progress {
  background-color: var(--border-light);
}

/* page link / pagination */
.page-link {
  background: var(--lg-glass-bg);
  border: 1px solid var(--lg-border);
  color: var(--lg-text);
}
.page-item.active .page-link { background: rgb(var(--lg-primary)); border-color: rgb(var(--lg-primary)); }

/* upload zone */
.upload-zone {
  background: var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 2px dashed var(--lg-border-strong);
  border-radius: var(--lg-radius);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: rgb(var(--lg-primary));
  background: rgb(var(--lg-primary) / 0.06);
}

/* ---------------------------------------------------------------------
   18. MARKETING / FEATURES ACCENTS — recolor legacy gradients to brand
--------------------------------------------------------------------- */
/* features page: numbered steps */
.step-number, .steps-progress .progress-node {
  background: linear-gradient(135deg, rgb(var(--lg-primary)), rgb(var(--lg-primary-soft))) !important;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgb(var(--lg-primary) / 0.7) !important;
}
.step-icon {
  background: rgb(var(--lg-primary) / 0.10) !important;
  color: rgb(var(--lg-primary)) !important;
}

/* features page: .btn-glass -> frosted glass (same as template button) */
.btn-glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.16)),
    rgba(255, 255, 255, 0.12) !important;
  border: 2px solid var(--lg-glass-border) !important;
  color: var(--lg-text) !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 1px rgba(255, 255, 255, 0.10),
    0 10px 24px -10px rgba(0, 0, 0, 0.3) !important;
}
.btn-glass:hover { filter: brightness(1.06); }

/* low-credits modal: brand-tinted header + primary CTA */
#lowCreditsModal .modal-header[style*="linear-gradient"] {
  background: linear-gradient(135deg, rgb(var(--lg-primary)), rgb(var(--lg-primary-soft))) !important;
}
#lowCreditsModal #viewPricingBtn {
  background: linear-gradient(135deg, rgb(var(--lg-primary)), rgb(var(--lg-primary-soft))) !important;
  box-shadow: 0 10px 28px -10px rgb(var(--lg-primary) / 0.6) !important;
}
/* low-credits modal: the pink credits pill -> champagne glass */
#lowCreditsModal .modal-body .d-inline-flex[style*="linear-gradient"] {
  background: linear-gradient(135deg, rgb(var(--lg-accent) / 0.85), rgb(var(--lg-accent))) !important;
  color: #1a1a1a;
  box-shadow: 0 8px 20px -8px rgb(var(--lg-accent) / 0.6) !important;
}

/* keep any flat bootstrap bg-primary (e.g. inline) readable */
.bg-primary {
  background-color: rgb(var(--lg-primary)) !important;
  color: #fff;
}
/* dark theme: outrank style.css's hardcoded navy navbar + blue select tint
   so bg-primary / selected states follow the accent (teal) instead */
[data-theme="dark"] .bg-primary {
  background-color: rgb(var(--lg-primary)) !important;
}
[data-theme="dark"] .bootstrap-select .dropdown-menu .dropdown-item.selected {
  background-color: rgb(var(--lg-primary) / 0.15) !important;
}

/* ---------------------------------------------------------------------
   19. LIGHT THEME — bright surfaces (separate from dark theme)
       Marketing cards / footer stop being dark bands in light.
       (Navbar + credits stay dark frosted glass in BOTH themes — the
       original white logo and gold credits need a dark backdrop, §8.)
--------------------------------------------------------------------- */

/* marketing gradient cards (features/CTA) become bright glass in light theme */
[data-theme="light"] .card[style*="linear-gradient"] {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(239, 243, 254, 0.84)) !important;
  border: 1px solid rgba(22, 27, 42, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--lg-shadow);
  color: var(--lg-text);
}
[data-theme="light"] .card[style*="linear-gradient"] .text-white {
  color: var(--lg-text) !important;
}
[data-theme="light"] .card[style*="linear-gradient"] .btn-outline-light {
  color: var(--lg-text);
  border-color: rgba(22, 27, 42, 0.25);
}

/* footer becomes a bright band in light theme */
[data-theme="light"] footer.bg-dark,
[data-theme="light"] .footer.bg-dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(239, 243, 254, 0.80)) !important;
  border-top: 1px solid rgba(22, 27, 42, 0.10);
  color: var(--lg-text) !important;
}
[data-theme="light"] footer h5,
[data-theme="light"] footer h6 {
  color: var(--lg-text) !important;
}
[data-theme="light"] footer .text-white,
[data-theme="light"] footer .text-light,
[data-theme="light"] footer a {
  color: var(--lg-text-soft) !important;
}
[data-theme="light"] footer a:hover { color: rgb(var(--lg-primary)) !important; }

/* ---------------------------------------------------------------------
   20. DARK THEME BUTTONS — brand-tinted frosted glass (liquid-glass
       .glass-btn--clay pattern): translucent teal + teal glow, instead
       of the milky white frost that washes out on dark surfaces.
--------------------------------------------------------------------- */
[data-theme="dark"] .btn-primary {
  background:
    linear-gradient(180deg, rgb(var(--lg-primary-soft) / 0.30), rgb(var(--lg-primary) / 0.08) 45%, rgb(var(--lg-primary) / 0.18)),
    rgb(var(--lg-primary) / 0.14);
  border-color: rgb(var(--lg-primary) / 0.45);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -10px 22px rgba(0, 0, 0, 0.18),
    0 5px 14px -6px rgb(var(--lg-primary) / 0.28);
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
  background:
    linear-gradient(180deg, rgb(var(--lg-primary-soft) / 0.38), rgb(var(--lg-primary) / 0.12) 45%, rgb(var(--lg-primary) / 0.24)),
    rgb(var(--lg-primary) / 0.18);
  border-color: rgb(var(--lg-primary) / 0.62);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -10px 22px rgba(0, 0, 0, 0.16),
    0 7px 18px -8px rgb(var(--lg-primary) / 0.38);
  transform: translateY(-2px);
}
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-primary.active,
[data-theme="dark"] .btn-primary.show,
[data-theme="dark"] .btn-check:checked + .btn-primary,
[data-theme="dark"] .btn-check:active + .btn-primary,
[data-theme="dark"] .show > .btn-primary.dropdown-toggle {
  background:
    linear-gradient(180deg, rgb(var(--lg-primary) / 0.22), rgb(var(--lg-primary) / 0.10) 45%, rgb(var(--lg-primary) / 0.24)),
    rgb(var(--lg-primary) / 0.16) !important;
  border-color: rgb(var(--lg-primary) / 0.55) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -8px 18px rgba(0, 0, 0, 0.20) !important;
}
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn.disabled,
[data-theme="dark"] fieldset:disabled .btn {
  opacity: 0.45;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(229, 238, 244, 0.5) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* outline / neutral buttons — subtle dark frost, not milky white */
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-light {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -8px 18px rgba(0, 0, 0, 0.10);
}
[data-theme="dark"] .btn-outline-primary { color: rgb(var(--lg-primary-soft)); }
[data-theme="dark"] .btn-outline-secondary { color: var(--lg-text-soft); }
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-light:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.09)),
    rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.26);
}

/* glass marketing CTA — teal-tinted in dark, same as primary */
[data-theme="dark"] .btn-glass {
  background:
    linear-gradient(180deg, rgb(var(--lg-primary-soft) / 0.30), rgb(var(--lg-primary) / 0.08) 45%, rgb(var(--lg-primary) / 0.18)),
    rgb(var(--lg-primary) / 0.14) !important;
  border-color: rgb(var(--lg-primary) / 0.45) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -10px 22px rgba(0, 0, 0, 0.18),
    0 5px 14px -6px rgb(var(--lg-primary) / 0.28) !important;
}