:root {
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --nav-offset: calc(env(safe-area-inset-top, 0px) + 12px);
  --nav-z: 1000;
  --bg: #f6f5f1;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: rgba(255, 255, 255, 0.97);
  --surface-dark: #121a2d;
  --surface-dark-2: #1a2540;
  --ink: #23282A;
  --muted: #5E6661;
  --line: #D2D8CF;
  --line-strong: rgba(255, 255, 255, 0.9);
  --accent: #6F8F73;
  --accent-hover: #5E7C62;
  --accent-contrast: #ffffff;
  --ring: #6F8F73;
  --blue: #3f628e;
  --blue-deep: #243c59;
  --green: #7ea483;
  --green-deep: #55785c;
  --sky: #eef2f4;
  --mint: #edf1ea;
  --red: #b42318;
  --success: #067647;
  --shadow: 0 26px 72px rgba(35, 40, 42, 0.11);
  --shadow-soft: 0 14px 40px rgba(35, 40, 42, 0.07);
  --shadow-lift: 0 8px 24px rgba(35, 40, 42, 0.10);
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --secondary: var(--green);
  --border: var(--line);
  --muted-foreground: var(--muted);
  --gradient-start: #fbfaf7;
  --gradient-end: #ffffff;
}

/* ─── Noir theme ─────────────────────────────────────── */
[data-theme="noir"] {
  --bg: #0B0A08;
  --surface: rgba(26, 20, 12, 0.94);
  --surface-strong: rgba(36, 28, 16, 0.98);
  --surface-dark: #2A241B;
  --surface-dark-2: #1E1A14;
  --ink: #F5EFE3;
  --muted: #B6AC97;
  --line: rgba(201, 162, 75, 0.20);
  --line-strong: rgba(201, 162, 75, 0.28);
  --accent: #C9A24B;
  --accent-hover: #DCB75E;
  --accent-contrast: #0B0A08;
  --ring: #C9A24B;
  --blue: #C9A24B;
  --blue-deep: #A07828;
  --green: #C9A24B;
  --green-deep: #A07828;
  --shadow: 0 26px 72px rgba(0, 0, 0, 0.52);
  --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.36);
  --shadow-lift: 0 8px 28px rgba(201, 162, 75, 0.18);
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --border: var(--line);
  --muted-foreground: var(--muted);
}

/* ─── Glass theme (glassmorphism) ──────────────────────────── */
[data-theme="glass"] {
  --bg: #e6ecfb;
  --surface: rgba(255, 255, 255, 0.42);
  --surface-strong: rgba(255, 255, 255, 0.60);
  --surface-dark: rgba(255, 255, 255, 0.30);
  --surface-dark-2: rgba(255, 255, 255, 0.22);
  --ink: #1b2230;
  --muted: #555f73;
  --line: rgba(255, 255, 255, 0.55);
  --line-strong: rgba(255, 255, 255, 0.85);
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-contrast: #ffffff;
  --ring: #6366f1;
  --blue: #4f7cf0;
  --blue-deep: #2f53b8;
  --green: #2f9e7e;
  --green-deep: #1f7a60;
  --shadow: 0 26px 72px rgba(40, 50, 90, 0.22);
  --shadow-soft: 0 14px 40px rgba(40, 50, 90, 0.14);
  --shadow-lift: 0 8px 28px rgba(99, 102, 241, 0.18);
  --gradient-start: #e8edfb;
  --gradient-end: #f4ecff;
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --secondary: var(--green);
  --border: var(--line);
  --muted-foreground: var(--muted);
}

/* Keep glass readable where backdrop-filter is unsupported. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-theme="glass"] {
    --surface: rgba(255, 255, 255, 0.92);
    --surface-strong: rgba(255, 255, 255, 0.97);
    --surface-dark: rgba(255, 255, 255, 0.88);
    --surface-dark-2: rgba(255, 255, 255, 0.82);
    --line: rgba(120, 130, 160, 0.30);
  }
}

/* ─── Clay theme (claymorphism) ────────────────────────────── */
[data-theme="clay"] {
  --bg: #f1e4ea;
  --surface: #faf0f4;
  --surface-strong: #fdf7f9;
  --surface-dark: #ecd9e1;
  --surface-dark-2: #e3ccd6;
  --ink: #4a2740;
  --muted: #8a6079;
  --line: #f0d8e2;
  --line-strong: #ffffff;
  --accent: #e8568f;
  --accent-hover: #cf3f78;
  --accent-contrast: #ffffff;
  --ring: #e8568f;
  --blue: #5b8def;
  --blue-deep: #3a64c4;
  --green: #1fb89a;
  --green-deep: #138a73;
  --red: #ff6b81;
  --success: #16a34a;
  /* Claymorphism: soft outer drop + light/dark insets for the puffy 3D edge. */
  --shadow:
    16px 18px 34px rgba(182, 110, 145, 0.30),
    -10px -12px 26px rgba(255, 255, 255, 0.80),
    inset 3px 3px 8px rgba(255, 255, 255, 0.92),
    inset -6px -6px 14px rgba(200, 140, 170, 0.42);
  --shadow-soft:
    12px 14px 28px rgba(182, 110, 145, 0.22),
    -8px -10px 20px rgba(255, 255, 255, 0.74),
    inset 2px 2px 6px rgba(255, 255, 255, 0.88),
    inset -5px -5px 12px rgba(200, 140, 170, 0.34);
  --shadow-lift:
    10px 12px 26px rgba(232, 86, 143, 0.28),
    inset 2px 2px 6px rgba(255, 255, 255, 0.72),
    inset -4px -4px 10px rgba(175, 50, 105, 0.30);
  --gradient-start: #faeaf1;
  --gradient-end: #fdecf3;
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --secondary: var(--green);
  --border: var(--line);
  --muted-foreground: var(--muted);
}

/* Clay base/login backdrop: soft pastel dream (the full non-login refinement
   lives at the end of the file so it can outrank the default body block). */
[data-theme="clay"] body {
  background-color: #d94f86;
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    url("../img/clay-bg.86e1b6062d4f.jpg");
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    image-set(url("../img/clay-bg.400981ca1deb.webp") type("image/webp"), url("../img/clay-bg.86e1b6062d4f.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  background: var(--bg, #050403);
}

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background-color: var(--bg);
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 32%),
    linear-gradient(180deg, var(--gradient-start, var(--bg)) 0%, var(--bg) 60%, var(--bg) 100%);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="noir"] body {
  background:
    radial-gradient(circle at 18% 12%, rgba(201, 162, 75, 0.07), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(201, 162, 75, 0.04), transparent 28%),
    linear-gradient(180deg, #0E0C09 0%, #0B0A08 50%, #0A0906 100%);
}

/* Glass needs a vivid backdrop for the frosted surfaces to read. This base
   rule covers the login page; the full non-login refinement lives at the end
   of the file (so it can outrank the default Noir body block). */
[data-theme="glass"] body {
  background-color: #16306e;
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    url("../img/glass-bg.498407b2cc52.jpg");
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    image-set(url("../img/glass-bg.8c7a1a985cd7.webp") type("image/webp"), url("../img/glass-bg.498407b2cc52.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  body,
body::before,
body::after,
.page-grid,
.site-footer,
.site-nav,
.theme-select,
.language-select,
.hero,
.band,
.workflow,
.page-hero,
.dashboard-head,
.section-grid article,
.panel,
.price-card,
.limit-card,
.feature-status,
.table-panel,
.filter-bar,
.result-card,
.metric-grid article,
.timeline-grid article,
.button,
.nav-cta,
input,
select,
textarea {
    transition:
      background-color 240ms ease,
      background 240ms ease,
      border-color 240ms ease,
      backdrop-filter 240ms ease,
      box-shadow 240ms ease,
      color 240ms ease,
      outline-color 240ms ease;
  }
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  text-wrap: balance;
}

h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
h3 { letter-spacing: -0.01em; }

p,
li,
td,
th,
label,
input,
select,
textarea,
button {
  font-family: var(--font-body);
}

main:not(.top-menu-bar),
.page-main {
  min-height: calc(100vh - 150px);
  position: relative;
  z-index: 1;
}

.page-aura,
.page-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-aura {
  display: none;
  pointer-events: none;
}

[data-theme="noir"] .page-aura {
  display: block;
}

.page-grid {
  opacity: 0.22;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
}

.aura {
  position: absolute;
  border-radius: 999px;
  filter: blur(32px);
  opacity: 0.5;
  animation: drift 22s ease-in-out infinite;
}

.aura-one {
  top: 90px;
  left: -70px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.10), rgba(201, 162, 75, 0));
}

.aura-two {
  top: 260px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.07), rgba(201, 162, 75, 0));
  animation-delay: -5s;
}

.aura-three {
  bottom: 140px;
  left: 28%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.06), rgba(201, 162, 75, 0));
  animation-delay: -9s;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.home-page .site-footer {
  display: none;
}

/* ── Footer embedded inside the home video hero ── */
.video-hero-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 248, 232, 0.13);
  pointer-events: auto;
}

.video-hero-footer .site-footer-top {
  justify-content: space-between;
}

.video-hero-footer .site-footer-brand strong {
  color: #fff;
  opacity: 1;
}

.video-hero-footer .site-footer-logo {
  opacity: 1;
  filter: none;
}

.video-hero-footer .site-footer-desc {
  color: #fff;
}

.video-hero-footer .site-footer-nav a,
.video-hero-footer .footer-cookie-button {
  color: #fff;
}

.video-hero-footer .site-footer-nav a:hover,
.video-hero-footer .footer-cookie-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.video-hero-footer .site-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.14);
  padding-top: 10px;
}

.video-hero-footer .site-footer-copy,
.video-hero-footer .site-footer-attr {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* ── Video hero footer: phone layout — center everything ── */
@media (max-width: 600px) {
  .video-hero-footer {
    align-items: center;
    text-align: center;
  }

  .video-hero-footer .site-footer-top {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .video-hero-footer .site-footer-nav {
    justify-content: center;
  }

  .video-hero-footer .site-footer-desc {
    text-align: center;
  }

  .video-hero-footer .site-footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
}

.site-footer {
  width: min(1240px, calc(100% - 24px));
  margin: 64px auto 24px;
  padding: 28px 32px 24px;
  border-radius: 24px;
  color: var(--muted);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-theme="noir"] .site-footer {
  background: linear-gradient(180deg, rgba(26, 20, 12, 0.96), rgba(14, 11, 7, 0.98));
  border-color: var(--line);
}

.site-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.site-footer-logo {
  width: auto;
  height: 26px;
  opacity: 0.68;
}

.site-footer-brand strong {
  font-weight: 800;
  font-size: 0.94rem;
  color: var(--ink);
  opacity: 0.82;
}

.site-footer-desc {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
}

.site-footer-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.site-footer-nav a,
.footer-cookie-button {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}

.site-footer-nav a:hover,
.footer-cookie-button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.footer-cookie-button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.site-footer-copy,
.site-footer-attr {
  font-size: 0.76rem;
  color: var(--muted);
  opacity: 0.64;
}

@media (max-width: 600px) {
  .site-footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer-nav {
    gap: 4px;
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.brand,
.site-nav,
.theme-switcher,
.language-switcher,
.site-footer nav,
.actions,
.inline-form,
.message-actions,
.auth-points,
.invite-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: auto;
  height: 44px;
  object-fit: contain;
}

.brand-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.site-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
  position: relative;
  z-index: 1;
}

.inline-form {
  margin: 0;
  flex: 0 0 auto;
}

.site-nav a,
.link-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: color-mix(in srgb, var(--surface-strong) 85%, transparent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-switcher {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.theme-select,
.language-select {
  min-height: 42px;
  max-width: 160px;
  padding: 0 34px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--foreground);
  background: var(--card);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.theme-select:focus-visible,
.language-select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 32%, transparent);
  outline-offset: 2px;
}

.nav-cta,
.button,
.link-button {
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 220ms ease, border-color 220ms ease;
}

.link-button {
  padding: 0 10px;
  background: transparent;
  appearance: none;
}

.button,
.nav-cta {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.button.primary,
.nav-cta {
  color: var(--accent-contrast);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover, var(--accent)));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent);
  animation: none;
}

[data-theme="noir"] .button.primary,
[data-theme="noir"] .nav-cta {
  background: linear-gradient(135deg, #A07828, #C9A24B, #E8C46A);
  box-shadow: 0 8px 28px rgba(201, 162, 75, 0.36);
}

.site-nav a.nav-account-settings,
.site-nav a.nav-logout {
  font-weight: 800;
  border: 1px solid rgba(36, 60, 89, 0.14);
}

.site-nav a.nav-account-settings::after,
.site-nav a.nav-logout::after {
  display: none;
}

.site-nav a.nav-logout {
  color: #9f1f1f;
  background: rgba(255, 255, 255, 0.82);
}

.site-nav a.nav-logout:hover,
.site-nav a.nav-logout:focus-visible {
  color: #fff;
  background: #b42318;
}

.button.secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: blur(10px);
}

.button:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 28%, transparent);
}

.button:active,
.nav-cta:active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.tab-nav a:hover,
.list-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

.button:focus-visible,
.nav-cta:focus-visible,
.tab-nav a:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.messages {
  width: min(1240px, calc(100% - 24px));
  margin: 14px auto 0;
}

.message {
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #ecfdf3;
  color: var(--success);
  border: 1px solid #abefc6;
}

.toast-region {
  position: fixed;
  top: 88px;
  right: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.live-toast {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  animation: hero-rise 220ms ease both;
}

.live-toast-success {
  border-color: rgba(6, 118, 71, 0.28);
}

.live-toast-info {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.live-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.live-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  font-size: 0.78rem;
  font-weight: 800;
}

.live-status::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--muted);
}

.live-status[data-live-state="success"]::before {
  background: var(--success);
}

.live-status[data-live-state="error"]::before {
  background: var(--red);
}

.live-status[data-live-state="paused"]::before {
  background: var(--accent);
}

.is-live-updated {
  animation: live-pulse 760ms ease both;
}

[data-live-payment-state="paid"],
[data-live-payment-state="published"] {
  color: var(--success);
}

[data-live-payment-state="failed"],
[data-live-payment-state="cancelled"],
[data-live-payment-state="refunded"] {
  color: var(--red);
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 24%, transparent);
  }

  100% {
    box-shadow: 0 0 0 8px transparent;
  }
}

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1400;
  width: 100%;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.page-progress.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-loader {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.slide-loader::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 74%, #ffffff), transparent);
  animation: slide-loader 1050ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.skeleton,
.skeleton-line,
.skeleton-title,
.skeleton-card,
.skeleton-avatar,
.skeleton-table-row,
[data-live-loading].is-loading::after,
[data-image-loading].is-loading::after {
  background:
    linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.14) 42%, transparent 78%),
    color-mix(in srgb, var(--surface-strong) 15%, rgba(255, 255, 255, 0.07));
  background-size: 220% 100%;
  animation: skeleton-slide 1350ms ease-in-out infinite;
}

.skeleton {
  display: block;
  border-radius: 16px;
}

.skeleton-line,
.skeleton-title {
  display: block;
  height: 12px;
  border-radius: 999px;
}

.skeleton-title {
  width: min(320px, 72%);
  height: 18px;
}

.skeleton-line {
  width: 100%;
}

.skeleton-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.skeleton-card {
  min-height: 150px;
  border-radius: 24px;
}

.skeleton-table-row {
  height: 48px;
  border-radius: 12px;
}

[data-live-loading],
[data-image-loading] {
  position: relative;
}

[data-live-loading].is-loading::after,
[data-image-loading].is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: screen;
}

[data-live-loading][data-skeleton="metrics"].is-loading article,
[data-live-loading][data-skeleton="card"].is-loading,
[data-live-loading][data-skeleton="cards"].is-loading .panel,
[data-live-loading][data-skeleton="list"].is-loading .list-row,
[data-live-loading][data-skeleton="table"].is-loading tbody tr {
  position: relative;
  overflow: hidden;
}

[data-live-loading].has-loading-error::before {
  content: attr(data-loading-error);
  display: block;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  font-size: 0.82rem;
  font-weight: 800;
}

[data-image-loading] {
  overflow: hidden;
}

[data-image-loading] img {
  transition: opacity 220ms ease, transform 220ms ease;
}

[data-image-loading].is-loading img {
  opacity: 0.18;
}

[data-image-loading].has-loading-error::before {
  content: attr(data-loading-error);
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  font-weight: 900;
  text-align: center;
}

form.is-loading {
  cursor: progress;
}

form.is-loading button[type="submit"].is-loading,
form.is-loading input[type="submit"].is-loading {
  cursor: progress;
  opacity: 0.82;
}

form.is-loading button[type="submit"].is-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: loader-spin 760ms linear infinite;
}

@keyframes skeleton-slide {
  0% {
    background-position: 180% 0;
  }

  100% {
    background-position: -80% 0;
  }
}

@keyframes slide-loader {
  0% {
    transform: translateX(-45%);
  }

  100% {
    transform: translateX(245%);
  }
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Page-section skeleton: static server-rendered sections during initial page load ── */
[data-page-section] {
  position: relative;
}

[data-page-section].is-loading {
  overflow: hidden;
}

[data-page-section].is-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 42%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 72%, #ffffff), transparent);
  animation: slide-loader 1050ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events: none;
}

[data-page-section].is-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 3px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  pointer-events: none;
}

[data-page-section].has-loading-error::before {
  content: attr(data-loading-error);
  display: block;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  font-size: 0.82rem;
  font-weight: 800;
}

[data-page-section].has-loading-error::after {
  display: none;
}

@keyframes section-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-page-section].is-loaded {
  animation: section-fade-in 280ms ease both;
}

/* ── Retry button inside error states ── */
.live-retry-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.live-retry-button:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 54%, transparent);
}

/* ── Error toast variant ── */
.live-toast.live-toast-error {
  border-color: color-mix(in srgb, var(--red, #e04c4c) 40%, transparent);
  color: color-mix(in srgb, var(--red, #e04c4c) 90%, var(--text, #fff));
  background: color-mix(in srgb, var(--red, #e04c4c) 9%, var(--surface, #111));
}

/* ── Warning toast variant ── */
.live-toast.live-toast-warning {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: color-mix(in srgb, var(--accent) 90%, var(--text, #fff));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface, #111));
}

.video-hero {
  min-height: max(100svh, 780px);
  width: 100%;
  margin-top: -86px;
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(245, 208, 122, 0.2), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(126, 164, 131, 0.18), transparent 26%),
    linear-gradient(140deg, #0b0905 0%, #171005 48%, #080706 100%);
}

.home-page .video-hero {
  margin-top: 0;
}

body.home-page {
  --home-nav-overlap: calc(env(safe-area-inset-top, 0px) + 78px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.home-page .page-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--home-nav-overlap) * -1);
}

.home-page .video-hero {
  flex: 0 0 auto;
  min-height: max(100svh, 720px) !important;
  height: auto;
  margin-top: 0 !important;
  padding-top: var(--home-nav-overlap);
}

.home-page .video-hero-content {
  top: calc(var(--home-nav-overlap) + clamp(14px, 4svh, 42px));
}

html[data-theme] body.home-page .top-menu-bar {
  border-color: rgba(245, 208, 122, 0.34);
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(12, 10, 6, 0.42), rgba(8, 7, 5, 0.28));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 244, 210, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

html[data-theme] body.home-page .top-menu-bar .brand,
html[data-theme] body.home-page .top-menu-bar .brand-name,
html[data-theme] body.home-page .top-menu-bar .desktop-nav a,
html[data-theme] body.home-page .top-menu-bar .dropdown-link,
html[data-theme] body.home-page .top-menu-bar .nav-preference {
  color: #fff8e8;
}

html[data-theme] body.home-page .top-menu-bar .desktop-nav,
html[data-theme] body.home-page .top-menu-bar .account-trigger {
  border-color: rgba(245, 208, 122, 0.22);
  background: rgba(255, 244, 210, 0.08);
}

html[data-theme] body.home-page .top-menu-bar .account-dropdown,
html[data-theme] body.home-page .top-menu-bar .mobile-nav-panel {
  border-color: rgba(245, 208, 122, 0.3);
  color: #fff8e8;
  background:
    radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 12, 7, 0.985), rgba(7, 6, 4, 0.985));
}

html[data-theme] body.home-page .top-menu-bar .theme-select,
html[data-theme] body.home-page .top-menu-bar .language-select {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.24);
  background: rgba(5, 4, 3, 0.96);
}

@media (max-height: 620px) {
  body.home-page {
    display: block !important;
  }

  .home-page .page-main {
    display: block !important;
  }

  .home-page .video-hero {
    min-height: 620px !important;
  }
}

@media (max-width: 920px) {
  body.home-page {
    --home-nav-overlap: calc(env(safe-area-inset-top, 0px) + 66px);
  }

  .home-page .video-hero-content {
    top: calc(var(--home-nav-overlap) + 12px);
  }
}

@media (max-width: 720px) {
  .public-invite {
    width: 100%;
    padding-inline: 0;
    justify-items: center;
  }
}

.video-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: cinematic-zoom 18s ease-in-out infinite alternate;
}

.video-hero-media.is-autoplay-managed {
  opacity: 0;
}

.video-hero-media.is-autoplay-managed.is-playing {
  opacity: 1;
}

.video-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 19, 0.6) 0%, rgba(10, 13, 19, 0.26) 42%, rgba(10, 13, 19, 0.72) 100%),
    linear-gradient(90deg, rgba(10, 13, 19, 0.42), rgba(10, 13, 19, 0.04) 50%, rgba(10, 13, 19, 0.42));
}

.video-hero-content {
  width: min(1040px, 100%);
  position: absolute;
  left: 50%;
  top: clamp(48px, 8svh, 96px);
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  padding: 0 24px;
  transform: translateX(-50%);
  animation: hero-fade 900ms ease both;
}

.video-hero .eyebrow {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 18px;
}

.video-hero h1 {
  margin: 0 auto;
  max-width: 960px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 5.2rem;
  line-height: 0.92;
  letter-spacing: -0.015em;
}

.video-hero-content > p:not(.eyebrow) {
  max-width: 800px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.1rem;
}

.video-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  animation: hero-rise 900ms ease 180ms both;
}

.button.secondary.light {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
}

.home-summary {
  width: 100%;
  padding: clamp(54px, 8vw, 96px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(ellipse at 10% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 48%),
    linear-gradient(180deg, #0D0B08 0%, #0B0A07 100%);
  color: #F5EFE3;
}

.home-summary .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.summary-heading,
.summary-list {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.summary-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: 42px;
}

.summary-heading h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
}

.summary-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.summary-list article {
  padding: 30px clamp(18px, 3vw, 36px) 10px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.summary-list article:last-child {
  border-right: 0;
}

.summary-list span {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--accent);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  opacity: 0.82;
}

.summary-list h3 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-family: var(--font-heading);
  font-weight: 700;
}

@media (max-width: 700px) {
  .summary-heading {
    grid-template-columns: 1fr;
  }

  .summary-list {
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .summary-list article {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: 24px 0 20px;
  }

  .summary-list article:last-child {
    border-bottom: 0;
  }
}

.summary-list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.editorial-band {
  width: 100%;
  max-width: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 72px);
}

.editorial-band > .section-intro,
.editorial-band > .section-grid,
.editorial-band > .timeline-grid {
  width: min(1240px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.hero,
.band,
.workflow,
.page-hero,
.dashboard-head,
.content-grid,
.pricing-grid,
.split,
.metric-grid,
.table-panel,
.tab-nav,
.scanner-layout,
.public-invite,
.result-card {
  width: min(1240px, calc(100% - 24px));
  margin-left: auto;
  margin-right: auto;
}

.hero,
.video-hero,
.page-hero,
.dashboard-head {
  scroll-margin-top: 128px;
}

.hero,
.band,
.workflow,
.page-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--surface-strong) 0%, color-mix(in srgb, var(--bg) 60%, var(--surface)) 100%);
  box-shadow: var(--shadow);
}

[data-theme="noir"] .hero,
[data-theme="noir"] .band,
[data-theme="noir"] .workflow,
[data-theme="noir"] .page-hero {
  border-color: var(--line);
  background:
    radial-gradient(ellipse at 80% 0%, rgba(201, 162, 75, 0.08), transparent 50%),
    linear-gradient(180deg, rgba(26, 20, 12, 0.96) 0%, rgba(14, 12, 9, 0.98) 100%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(201, 162, 75, 0.12);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.96fr);
  gap: 56px;
  align-items: center;
  padding: clamp(84px, 11vw, 132px) clamp(22px, 5vw, 76px) 64px;
  margin-top: 28px;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 28%),
    radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 32%),
    linear-gradient(180deg, var(--surface-strong) 0%, color-mix(in srgb, var(--bg) 40%, var(--surface)) 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.hero::before {
  top: -80px;
  right: 12%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
}

.hero::after {
  bottom: -80px;
  left: 8%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}

.hero-copy,
.hero-visual,
.band,
.workflow,
.page-hero,
.dashboard-head,
.metric-grid,
.content-grid,
.pricing-grid,
.split,
.scanner-layout,
.public-invite {
  position: relative;
  z-index: 1;
}

.eyebrow,
.small-label {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.hero-copy .eyebrow,
.page-hero > .eyebrow,
.dashboard-head .eyebrow,
.pricing-note .eyebrow,
.feature-banner .eyebrow,
.auth-form .eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1.2;
  opacity: 0.88;
}

.hero-copy h1,
.page-hero h1,
.dashboard-head h1,
.auth-story h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.015em;
}

.hero-copy h1 {
  max-width: 760px;
  font-size: clamp(2.6rem, 6vw, 5.3rem);
}

.page-hero h1,
.dashboard-head h1 {
  max-width: 860px;
  font-size: clamp(2rem, 4vw, 4rem);
}

.id-line {
  margin: 10px 0 0;
  color: var(--gold-soft);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hero-copy p,
.page-hero p,
.dashboard-subtitle,
.section-intro p,
.feature-banner p:last-child,
.auth-story p,
.invite-intro {
  color: var(--muted);
}

.hero-copy p,
.page-hero p {
  max-width: 700px;
  font-size: 1.08rem;
}

.hero-copy > p:not(.eyebrow) {
  margin-bottom: 24px;
}

.hero-points {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.hero-points-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 780px;
}

.hero-points span {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.hero-points strong {
  font-size: 0.96rem;
}

.hero-points small {
  color: var(--muted);
}

.hero-visual {
  min-height: 620px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
    linear-gradient(135deg, rgba(63, 98, 142, 0.08), rgba(126, 164, 131, 0.08));
}

.hero-showcase {
  position: relative;
  width: min(620px, 100%);
  padding: 42px 22px 22px;
}

.showcase-frame {
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    linear-gradient(145deg, #e7e2d7 0%, #cab9a0 38%, #8e7a62 100%);
  box-shadow: 0 30px 72px rgba(33, 39, 52, 0.16);
}

.showcase-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 32, 51, 0.04), rgba(22, 32, 51, 0.22)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 44%);
}

.showcase-card,
.invite-preview,
.card-preview {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 34px;
  color: #fff;
}

.showcase-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  min-height: 240px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(22, 32, 51, 0.82), rgba(22, 32, 51, 0.94));
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}

.showcase-card::after,
.invite-preview::after,
.card-preview::after {
  content: "";
  position: absolute;
  inset: -34% auto auto 56%;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  transform: rotate(18deg);
}

.showcase-card h2,
.invite-preview h2,
.card-preview h1,
.card-preview h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.02;
}

.showcase-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.showcase-details span,
.hero-note {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  width: fit-content;
}

.hero-note {
  position: absolute;
  max-width: 230px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(36, 60, 89, 0.08);
  box-shadow: var(--shadow-soft);
}

.hero-note strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.94rem;
}

.hero-note small {
  color: var(--muted);
}

.hero-note.one {
  top: 54px;
  left: 0;
  animation: float-card 10s ease-in-out infinite;
}

.hero-note.two {
  right: 0;
  bottom: 18px;
  animation: float-card 12s ease-in-out infinite reverse;
}

.status-chip,
.badge,
.price-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.78rem;
  font-weight: 800;
}

.status-chip {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.badge,
.price-badge {
  color: var(--blue-deep);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.band,
.workflow,
.page-hero,
.dashboard-head {
  margin-top: 26px;
  padding: 34px clamp(18px, 5vw, 28px) 28px;
}

.section-intro {
  max-width: 760px;
  margin-bottom: 22px;
}

.section-intro h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
}

.section-intro-split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: 24px;
  align-items: end;
}

.section-grid,
.content-grid,
.pricing-grid {
  display: grid;
  gap: 18px;
  padding: 0 clamp(18px, 5vw, 0px) 24px;
}

.section-grid,
.pricing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.features-grid {
  margin-top: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
}

.page-hero + .content-grid,
.page-hero + .pricing-grid,
.page-hero + .section-grid,
.page-hero + .band,
.page-hero + .split,
.page-hero + .table-panel,
.page-hero + .public-invite,
.dashboard-head + .metric-grid,
.dashboard-head + .content-grid,
.dashboard-head + .tab-nav,
.dashboard-head + .operation-grid,
.dashboard-head + .split,
.dashboard-head + .table-panel,
.dashboard-head + .filter-bar,
.dashboard-head + .panel {
  margin-top: 26px;
}

.section-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-grid article,
.panel,
.price-card,
.table-panel,
.filter-bar,
.result-card,
.metric-grid article,
.timeline-grid article {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}

.section-grid article,
.panel,
.price-card,
.result-card,
.timeline-grid article {
  padding: 22px;
}

.section-grid article,
.price-card,
.panel,
.metric-grid article,
.timeline-grid article,
.result-card,
.table-panel {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.section-grid article:hover,
.price-card:hover,
.panel:hover,
.metric-grid article:hover,
.timeline-grid article:hover,
.result-card:hover,
.table-panel:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.section-grid article::before,
.price-card::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.feature-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 4vw, 36px);
}

.feature-panel h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.18;
}

.feature-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  padding: clamp(32px, 5vw, 52px);
}

.feature-lead .feature-lead-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-lead h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  max-width: 18ch;
}

.feature-lead .feature-lead-points {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
  margin: 4px 0 0;
}

.feature-lead .feature-lead-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
}

.feature-lead .feature-lead-points li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
}

.feature-lead-mock {
  flex: 0 0 auto;
  width: clamp(200px, 36%, 340px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)),
    var(--surface-dark, #1E2540);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  gap: 10px;
}

.feature-mock-chip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.feature-mock-chip span {
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.feature-mock-title {
  height: 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  width: 70%;
  margin-top: 6px;
}

.feature-mock-rows {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.feature-mock-row {
  height: 40px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  display: grid;
  grid-template-columns: 32px 1fr 56px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

.feature-mock-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

.feature-mock-line {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}

.feature-mock-badge {
  height: 20px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width: 820px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-lead {
    flex-direction: column;
    grid-column: auto;
  }

  .feature-lead-mock {
    width: 100%;
    aspect-ratio: 4 / 2.4;
  }

  .feature-mock-rows {
    grid-template-columns: repeat(2, 1fr);
  }
}

.about-unified-frame {
  padding: clamp(34px, 6vw, 64px);
}

.about-frame-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  min-height: 330px;
}

.about-brand-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 10px;
  text-align: center;
  position: relative;
}

.about-brand-card::before {
  content: "";
  position: absolute;
  inset: 8% 8% auto;
  height: 190px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(245, 208, 122, 0.2), transparent 68%);
  pointer-events: none;
}

.about-brand-card img {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 30px;
  object-fit: contain;
  box-shadow: 0 24px 54px rgba(33, 39, 52, 0.18);
}

.about-brand-card strong {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--blue-deep);
}

.about-brand-card span {
  position: relative;
  max-width: 220px;
  color: var(--muted);
  font-size: 0.95rem;
}

.about-story-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 480px);
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
  margin-top: clamp(28px, 5vw, 52px);
  padding-top: clamp(24px, 4vw, 38px);
  padding-bottom: 24px;
  border-top: 1px solid rgba(36, 60, 89, 0.08);
  border-bottom: 1px solid rgba(36, 60, 89, 0.08);
}

.about-story-intro h2,
.about-mission-grid h3,
.about-columns h3 {
  margin: 0;
}

.about-story-intro h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
  color: var(--blue-deep);
}

.about-story-intro p,
.about-columns p,
.about-workflow-note p,
.about-founder-note,
.about-columns li {
  color: var(--muted);
}

.about-mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 48px);
  margin-top: 26px;
}

.about-mission-grid article,
.about-columns article {
  min-width: 0;
}

.about-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 42px);
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(36, 60, 89, 0.08);
}

.about-columns ul {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.about-columns li::marker {
  color: var(--green-deep);
}

.about-mission-grid article,
.about-columns article {
  position: relative;
}

.about-mission-grid article::before,
.about-columns article::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.about-workflow-note {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(36, 60, 89, 0.08);
}

.about-workflow-note span {
  color: var(--blue-deep);
  font-weight: 900;
}

.about-workflow-note p {
  margin: 0;
}

.about-founder-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(36, 60, 89, 0.08);
  font-size: 0.96rem;
}

.feature-icon {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 16px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.feature-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 20px;
  align-items: end;
  margin-bottom: 26px;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: linear-gradient(135deg, rgba(126, 164, 131, 0.08), rgba(63, 98, 142, 0.08));
}

.feature-banner.compact {
  margin-bottom: 0;
}

.feature-banner h2,
.panel h2,
.price-card h2,
.section-grid h3,
.timeline-grid h3 {
  margin-top: 0;
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--blue-deep);
}

.price {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 900;
}

.price-card .button {
  margin-top: 14px;
}

.price-card .package-cta {
  gap: 0.35em;
}

.workflow .section-intro p:last-child {
  margin-bottom: 0;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.timeline-grid span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--green-deep), var(--blue));
  box-shadow: 0 10px 24px rgba(33, 39, 52, 0.1);
}

.dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.dashboard-subtitle {
  max-width: 620px;
  margin: 10px 0 0;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  padding: 0 clamp(18px, 5vw, 0px) 24px;
}

.metric-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-grid article {
  padding: 18px;
}

.metric-grid span {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--blue-deep);
}

.metric-grid p {
  margin: 4px 0 0;
  color: var(--muted);
}

/* Admin live summary: reuse the metric-card look, but let the linked cards
   (payments, feedback, suggestions, AI work) be clickable shortcuts. */
.admin-live-grid a {
  display: block;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.admin-live-grid a:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

.split,
.scanner-layout,
.public-invite {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 0 clamp(18px, 5vw, 0px) 24px;
}

.scanner-layout-live {
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
}

.auth-shell {
  display: grid;
  place-items: start center;
  padding: 50px 18px;
}

.auth-layout {
  width: min(1160px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
  gap: 24px;
}

.account-settings-layout {
  width: min(780px, 100%);
  display: flex;
  justify-content: center;
}

.settings-layout {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.settings-home-layout,
.settings-detail-layout {
  width: min(760px, 100%);
}

.settings-detail-layout {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.settings-detail-layout > * {
  width: 100%;
}

.settings-home-panel,
.settings-form-card {
  display: grid;
  gap: 22px;
  width: 100%;
}

.settings-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
}

.settings-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.settings-profile-card h2,
.settings-profile-card h1,
.settings-profile-card p {
  margin: 0;
}

.settings-profile-card h1,
.settings-profile-card h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.settings-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff8e8;
  background:
    radial-gradient(circle at 72% 20%, rgba(245, 208, 122, 0.42), transparent 35%),
    linear-gradient(145deg, #050403, #263145);
  border: 1px solid rgba(245, 208, 122, 0.42);
  font-size: 1.45rem;
  font-weight: 900;
}

.settings-menu {
  display: grid;
  gap: 10px;
}

.settings-menu-home {
  gap: 12px;
}

.settings-menu-button {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(36, 60, 89, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--ink);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.settings-menu-home .settings-menu-button {
  min-height: 84px;
  align-content: center;
  padding: 18px;
}

.settings-menu-button:hover,
.settings-menu-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(245, 208, 122, 0.52);
  box-shadow: 0 18px 38px rgba(25, 43, 93, 0.1);
}

.settings-menu-button span {
  color: var(--muted);
  font-size: 0.88rem;
}

.settings-content,
.settings-form {
  display: grid;
  gap: 18px;
}

.settings-card {
  width: 100%;
}

.settings-section-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(36, 60, 89, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.1), transparent 28%),
    rgba(255, 255, 255, 0.58);
}

.settings-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.settings-section-heading h2,
.settings-section-heading p {
  margin: 0;
}

.settings-section-heading h2 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.settings-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--blue-deep);
  background: rgba(245, 208, 122, 0.16);
  border: 1px solid rgba(245, 208, 122, 0.32);
  font-weight: 900;
}

.settings-password-row,
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(36, 60, 89, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
}

.settings-password-row small,
.settings-toggle-row small {
  display: block;
  margin-top: 4px;
}

.settings-toggle-row {
  justify-content: flex-start;
  cursor: pointer;
}

.settings-toggle-row input[type="checkbox"] {
  width: 22px;
  min-height: 22px;
  flex: 0 0 22px;
  accent-color: #d9ad55;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
}

.settings-back-link {
  width: fit-content;
  font-weight: 800;
}

.settings-detail-back {
  justify-self: start;
}

.settings-detail-card {
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(22px, 4vw, 34px);
}

.settings-detail-heading {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.settings-detail-heading .settings-section-icon {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  border-radius: 20px;
  font-size: 1.2rem;
}

.settings-detail-heading h1 {
  margin: 4px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  line-height: 1;
}

.settings-detail-heading p:not(.eyebrow) {
  max-width: 48ch;
  margin-inline: auto;
}

.settings-detail-card .settings-form {
  width: min(520px, 100%);
  margin-inline: auto;
}

.settings-detail-card .settings-form p {
  display: grid;
  gap: 8px;
  margin: 0;
}

.settings-detail-actions {
  justify-content: center;
  padding-top: 4px;
}

.settings-password-card {
  width: min(680px, 100%);
  margin-inline: auto;
}

.logout-shell {
  min-height: calc(100svh - 230px);
  place-items: center;
}

.logout-card {
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(24px, 5vw, 40px);
  text-align: center;
}

.logout-card h1,
.logout-card p {
  margin: 0;
}

.logout-card h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
}

.logout-copy {
  display: grid;
  gap: 8px;
  max-width: 42ch;
}

.logout-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.auth-story {
  min-height: 100%;
  padding: 34px;
  border-radius: 22px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background:
    radial-gradient(circle at top right, rgba(63, 98, 142, 0.12), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(237, 241, 234, 0.92));
  box-shadow: var(--shadow-soft);
}

.auth-story h1 {
  font-size: clamp(2rem, 4vw, 3.3rem);
  margin-bottom: 14px;
}

.auth-points {
  flex-wrap: wrap;
  margin-top: 18px;
}

.auth-points span {
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.76);
}

.auth-form h2 {
  margin-top: 0;
}

.login-auth-shell {
  min-height: calc(100dvh - 150px);
  place-items: center;
  padding-block: clamp(30px, 7vh, 78px);
}

.login-auth-layout {
  width: min(480px, 100%);
  display: flex;
  justify-content: center;
}

.login-auth-layout .auth-form {
  width: 100%;
}

.login-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.login-eyebrow span + span::before {
  content: "/";
  margin-right: 8px;
  color: var(--muted);
}

.public-invite {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
}

.public-invite .invitation-card {
  justify-self: center;
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
  min-height: 0;
  aspect-ratio: auto;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 64px;
}

.invitation-card-frame {
  --card-frame-scale: 0.42;
  justify-self: center;
  position: relative;
  z-index: 1;
  width: 454px;
  height: 642px;
  overflow: visible;
}

.invitation-card-frame > .invitation-card {
  position: absolute;
  inset: 0 auto auto 0;
  transform: scale(var(--card-frame-scale));
  transform-origin: top left;
}

.invitation-card-frame.is-exporting {
  /* Lift the card out of the responsive flex/grid layout and pin it to a clean
     origin so html2canvas captures the whole design at native size, never
     clipped by columns, flex-shrink, sticky offsets or the viewport. */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  width: var(--card-design-w, 1080px) !important;
  height: var(--card-design-h, 1528px) !important;
}

.invitation-card-frame.is-exporting > .invitation-card {
  transform: none;
}

.public-invite .invitation-card[data-layout="square"] {
  width: var(--card-design-w, 1080px);
  min-height: auto;
  height: var(--card-design-h, 1080px);
  aspect-ratio: auto;
}

.public-invite .invitation-card[data-layout="landscape"] {
  width: var(--card-design-w, 1280px);
  height: var(--card-design-h, 720px);
}

.public-invite .panel.form-shell {
  background: var(--surface-strong);
  padding: 26px 22px;
}

.public-invite .panel.form-shell h2 {
  margin: 10px 0;
  font-size: 1.55rem;
}

.public-invite .panel.form-shell p:last-child {
  margin-bottom: 0;
}

.public-card-offline-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.public-card-offline-actions .button {
  width: 100%;
}

.public-card-offline-actions small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

/* ---- Public invitation: showcase + details rail ---- */
.invitation-showcase {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.invitation-showcase::before {
  content: "";
  position: absolute;
  inset: 4% 6% 0;
  z-index: 0;
  border-radius: 40px;
  background: radial-gradient(120% 92% at 50% 4%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 68%);
  filter: blur(40px);
  opacity: 0.65;
  pointer-events: none;
}

.invite-rail {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}

.invite-rail-head {
  display: grid;
  gap: 14px;
}

.invite-rail-head .eyebrow {
  margin: 0;
}

.invite-rail-head .invite-rail-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.invite-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.invite-identity-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--accent-contrast);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover, var(--accent)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 32%, transparent);
}

.invite-identity-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.invite-identity-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.invite-identity-text strong {
  font-size: 1.06rem;
  overflow-wrap: anywhere;
}

.invite-identity-chip {
  margin-left: auto;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  backdrop-filter: none;
}

.invite-celebrant {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin: 0 0 4px;
  text-align: center;
}

.invite-celebrant img {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(5, 4, 3, 0.18);
}

.invite-celebrant-caption {
  display: grid;
  gap: 3px;
}

.invite-celebrant-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.invite-celebrant-caption strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@media (min-width: 901px) {
  .invitation-showcase {
    position: sticky;
    top: clamp(80px, 9vh, 120px);
  }
}

@media (max-width: 900px) {
  .invitation-showcase {
    position: relative;
  }

  .invite-rail {
    width: 100%;
  }
}

.invite-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  justify-content: center;
}

.invite-intro {
  margin: 0 0 14px;
}

.invite-description {
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.65;
}

.invitation-card .invite-description {
  width: 100%;
  max-height: none;
  overflow: visible;
  overflow-wrap: anywhere;
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.16));
  border-radius: 14px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.22));
  font-size: var(--card-description-size, 24px);
  font-weight: 800;
  line-height: 1.45;
}

.invite-deadline {
  margin: 0 0 14px;
  font-weight: 700;
  color: var(--ink);
}

.invite-choice-help {
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.6;
  overflow-wrap: normal;
  text-wrap: pretty;
  word-break: normal;
}

.invite-detail-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
}

.invite-detail-label {
  font-weight: 800;
}

.invite-detail-label::after {
  content: ":";
  margin-left: 2px;
}

.invite-detail-value {
  display: inline-flex;
  align-items: baseline;
}

.invite-detail-note {
  margin-top: 0;
  margin-bottom: 14px;
}

.rsvp-status-card {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(245, 208, 122, 0.26);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.16), transparent 34%),
    rgba(245, 208, 122, 0.08);
}

.rsvp-status-card h3 {
  margin: 0;
  font-size: 1.25rem;
}

.rsvp-status-card p,
.rsvp-status-card small {
  margin: 0;
  line-height: 1.55;
}

.rsvp-status-card.is-attending {
  border-color: rgba(47, 122, 69, 0.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 122, 69, 0.18), transparent 34%),
    rgba(47, 122, 69, 0.08);
}

.rsvp-status-card.is-not-attending {
  border-color: rgba(180, 35, 24, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(180, 35, 24, 0.14), transparent 34%),
    rgba(180, 35, 24, 0.07);
}

.rsvp-status-card.is-checked-in {
  border-color: rgba(34, 115, 83, 0.36);
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 115, 83, 0.2), transparent 34%),
    rgba(34, 115, 83, 0.09);
}

.rsvp-choice-field ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.rsvp-choice-field li {
  margin: 0;
}

.rsvp-choice-field label {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.rsvp-choice-field input[type="radio"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  inline-size: 15px;
  block-size: 15px;
  margin: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 2px var(--surface-strong);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.rsvp-choice-field input[type="radio"]:checked {
  border-color: var(--primary);
  background: radial-gradient(circle, var(--primary) 0 45%, transparent 48%), var(--surface-strong);
  box-shadow: inset 0 0 0 2px var(--surface-strong);
}

.rsvp-choice-field input[type="radio"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 32%, transparent);
  outline-offset: 2px;
}

.rsvp-confirmation-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(240px, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 8px;
}

.rsvp-confirmation-row .button {
  min-height: 64px;
}

.rsvp-inline-status {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(245, 208, 122, 0.24);
  border-radius: 18px;
  background: rgba(245, 208, 122, 0.08);
}

.rsvp-inline-status span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rsvp-inline-status strong {
  font-size: 1.18rem;
}

.rsvp-inline-status small {
  color: var(--muted);
  line-height: 1.45;
}

.rsvp-inline-status.is-attending {
  border-color: rgba(47, 122, 69, 0.34);
  background: rgba(47, 122, 69, 0.08);
}

.rsvp-inline-status.is-not-attending {
  border-color: rgba(180, 35, 24, 0.28);
  background: rgba(180, 35, 24, 0.07);
}

.rsvp-inline-status.is-pending {
  border-color: rgba(183, 121, 31, 0.28);
  background: rgba(255, 247, 214, 0.16);
}

@media (max-width: 720px) {
  .rsvp-choice-field ul,
  .rsvp-confirmation-row {
    grid-template-columns: 1fr;
  }
}

.field-package #id_package {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-package #id_package li {
  margin: 0;
}

.field-package #id_package label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-weight: 500;
  line-height: 1.35;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.field-package #id_package label:hover {
  border-color: rgba(79, 124, 255, 0.35);
  background: rgba(79, 124, 255, 0.05);
}

.field-package #id_package label:has(input[type="radio"]:checked) {
  border-color: var(--primary);
  background: rgba(79, 124, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.08);
}

.field-package #id_package input[type="radio"] {
  flex-shrink: 0;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 3px var(--surface-strong);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.field-package #id_package input[type="radio"]:checked {
  border-color: var(--primary);
  background: radial-gradient(circle, var(--primary) 0 42%, transparent 45%), var(--surface-strong);
  box-shadow: inset 0 0 0 3px var(--surface-strong);
}

.field-package #id_package input[type="radio"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 32%, transparent);
  outline-offset: 2px;
}

.field-package #id_package input[type="radio"]:disabled ~ *,
.field-package #id_package label:has(input[type="radio"]:disabled) {
  opacity: 0.6;
  cursor: default;
}

.field-package #id_package label:has(input[type="radio"]:disabled):hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.rsvp-status-actions {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.rsvp-status-actions p {
  margin: 0;
}

.invitation-card-inner {
  display: grid;
  width: 100%;
  gap: 10px;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.invitation-card-heading {
  display: grid;
  gap: 7px;
  justify-items: center;
}

.invitation-card-heading h1 {
  font-size: var(--card-heading-size, 67px);
  max-width: 16ch;
  line-height: 1;
}

.invitation-card-subtitle {
  max-width: 30ch;
  font-size: var(--card-guest-size, 31px);
  font-weight: 900;
  line-height: 1.25;
  color: var(--card-muted, rgba(255, 248, 232, 0.78));
}

.invitation-guest-block,
.invitation-host-block {
  display: grid;
  gap: 4px;
  width: 100%;
  justify-items: center;
  padding: 10px 12px;
  border: 1px solid var(--card-panel-border, rgba(245, 208, 122, 0.28));
  border-radius: 16px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.invitation-guest-block span,
.invitation-host-block span,
.invitation-detail-grid span {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
  font-size: calc(var(--card-detail-size, 22px) * 0.58);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invitation-host-block span {
  font-size: calc(var(--card-host-size, 25px) * 0.52);
}

.invitation-guest-block strong {
  font-size: 1.3rem;
  line-height: 1.06;
}

.invitation-host-block strong {
  font-size: var(--card-host-size, 25px);
  line-height: 1.18;
}

.invitation-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.invitation-detail-grid p {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 62px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.16));
  border-radius: 14px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.22));
}

.invitation-detail-grid strong {
  font-size: var(--card-detail-size, 22px);
  line-height: 1.22;
}

.public-invite .form-shell label,
.form-shell label {
  font-weight: 800;
}

.narrow {
  max-width: 760px;
}

.event-form [data-contribution-field][hidden] {
  display: none !important;
}

.event-form [data-contribution-field] {
  justify-items: center;
  text-align: center;
}

.event-photo-picker {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
}

.event-photo-picker:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 14%, transparent);
}

.form-field.has-error .event-photo-picker,
.form-field.has-client-error .event-photo-picker {
  border-color: var(--red);
}

.event-photo-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 154px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, var(--primary) 4%);
}

.event-photo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 154px;
  object-fit: cover;
}

.event-photo-placeholder {
  display: grid;
  justify-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.event-photo-placeholder span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--primary);
  background: var(--surface);
  font-size: 1.7rem;
  line-height: 1;
}

.event-photo-placeholder strong,
.event-photo-details > strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.event-photo-placeholder small,
.event-photo-filename {
  color: var(--muted);
  font-size: 0.82rem;
}

.event-photo-details {
  display: grid;
  align-content: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
}

.event-photo-details > strong,
.event-photo-details .helptext {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.event-photo-button {
  margin: 0;
  min-height: 42px;
  cursor: pointer;
}

.event-photo-button.is-focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 32%, transparent);
  outline-offset: 2px;
}

.event-photo-filename {
  flex: 1 1 150px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-photo-input {
  position: absolute;
  width: 1px !important;
  min-height: 1px !important;
  height: 1px;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .auth-shell {
    padding-inline: 12px;
  }

  .event-form {
    width: 100%;
    padding: 16px;
  }

  .event-form .form-field > label {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .event-photo-picker {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px;
  }

  .event-photo-preview,
  .event-photo-preview img {
    min-height: 150px;
  }

  .event-photo-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .event-photo-button {
    width: 100%;
    justify-content: center;
  }
}

.pricing-note {
  width: min(calc(100% - 36px), 760px);
  margin: 10px auto 28px;
  text-align: center;
}

.pricing-note .eyebrow {
  margin-inline: auto;
}

.form-shell {
  width: min(100%, 560px);
}

.account-settings-layout .form-shell {
  width: 100%;
}

.wide-form {
  width: min(100%, 860px);
}

.event-form {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: clip;
}

.form-shell p {
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
}

.form-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0 0 14px;
}

.form-field > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.required-marker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--blue-deep);
  background: rgba(245, 208, 122, 0.12);
  border: 1px solid rgba(245, 208, 122, 0.24);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-error-summary {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(180, 35, 24, 0.22);
  background: rgba(255, 251, 250, 0.94);
  color: var(--red);
}

.form-error-summary strong {
  display: block;
  margin-bottom: 4px;
  color: var(--red);
}

.form-error-summary p {
  color: var(--red);
}

.form-error-summary p {
  margin: 0;
}

.form-error-links {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.form-error-links a {
  color: var(--red);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.form-error-links a:hover,
.form-error-links a:focus-visible {
  text-decoration: underline;
}

.form-field.has-error input:not([type="radio"]):not([type="checkbox"]),
.form-field.has-client-error input:not([type="radio"]):not([type="checkbox"]),
.form-field.has-error select,
.form-field.has-client-error select,
.form-field.has-error textarea,
.form-field.has-client-error textarea,
.form-field.has-error #id_package label,
.form-field.has-client-error #id_package label,
.was-validated input:not([type="radio"]):not([type="checkbox"]):invalid,
.was-validated select:invalid,
.was-validated textarea:invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 5px rgba(180, 35, 24, 0.08);
}

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

textarea {
  min-height: 104px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(79, 124, 255, 0.3);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 6px rgba(79, 124, 255, 0.08);
  transform: translateY(-1px);
}

input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  appearance: auto;
  color-scheme: dark;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  filter: invert(78%) sepia(52%) saturate(416%) hue-rotate(357deg) brightness(105%) contrast(93%);
}

p:has(.tz-phone-input),
.form-field:has(.tz-phone-input) {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
}

p:has(.tz-phone-input) label,
.form-field:has(.tz-phone-input) label {
  grid-column: 1 / -1;
  grid-row: 1;
}

p:has(.tz-phone-input) .helptext,
p:has(.tz-phone-input) .errorlist,
.form-field:has(.tz-phone-input) .helptext,
.form-field:has(.tz-phone-input) .errorlist {
  grid-column: 1 / -1;
  grid-row: 3;
}

p:has(.tz-phone-input)::before,
.form-field:has(.tz-phone-input)::before {
  content: "🇹🇿 Tanzania +255";
  display: inline-flex;
  align-items: center;
  grid-column: 1;
  grid-row: 2;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 800;
  white-space: nowrap;
}

.tz-phone-input {
  grid-column: 2;
  grid-row: 2;
  border-radius: 0 12px 12px 0;
}

.helptext,
small,
.list-row span,
.guest-summary span {
  color: var(--muted);
}

.errorlist {
  color: var(--red);
  padding-left: 18px;
}

.table-panel {
  overflow-x: auto;
  margin-bottom: 24px;
}

.table-panel.flat {
  box-shadow: none;
  margin-top: 14px;
}

/* Payment approvals: inset panel headings/intro from the edges, center footer link */
.payment-approvals-page .table-panel > h2 {
  margin: 0;
  padding: 20px clamp(16px, 3vw, 22px) 10px;
}

.payment-approvals-page .table-panel > p {
  margin: 0 0 10px;
  padding: 0 clamp(16px, 3vw, 22px);
}

.payment-approvals-page .approvals-footer {
  margin: 8px 0 24px;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

th,
td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, rgba(57, 212, 143, 0.08), rgba(79, 124, 255, 0.08));
}

tbody tr:hover td {
  background: linear-gradient(90deg, rgba(57, 212, 143, 0.05), rgba(79, 124, 255, 0.05));
}

.list {
  display: grid;
  gap: 8px;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px auto;
  gap: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.filter-bar--inline {
  grid-template-columns: minmax(0, 460px) auto auto;
  justify-content: start;
  align-items: center;
}

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 clamp(18px, 5vw, 0px) 24px;
}

.tab-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.package-command {
  width: min(1240px, calc(100% - 24px));
  margin: 0 auto 24px;
}

.package-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.package-command-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.operation-grid {
  width: min(1240px, calc(100% - 24px));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 auto 24px;
}

.package-command .operation-grid {
  width: 100%;
  margin: 0 0 22px;
}

/* Compact button grid for the event overview tools */
.action-grid {
  width: min(1240px, calc(100% - 24px));
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.action-grid .button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.button.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.limit-card,
.operation-card {
  display: grid;
  gap: 12px;
}

.limit-card {
  min-height: 160px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.limit-card strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.limit-card p,
.operation-card p {
  margin: 0;
}

.feature-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Messages page: align every block to the page width, keep an even vertical
   rhythm, balance the three stat cards, and let the forms fill their columns. */
.event-messages-page .page-main > .panel {
  width: min(1240px, calc(100% - 24px));
  margin-inline: auto;
}

.event-messages-page .page-main > * + * {
  margin-top: 22px;
}

.event-messages-page .feature-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-messages-page .form-shell {
  width: 100%;
}

@media (max-width: 720px) {
  .event-messages-page .feature-status-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Message templates: preview cards + editor with live preview ─────── */
.messages-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.messages-section-head h2 {
  margin: 6px 0 4px;
}

.messages-section-head p {
  margin: 0;
  color: var(--muted);
}

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

.template-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
}

.template-card-head {
  display: grid;
  gap: 8px;
}

.template-card-head strong {
  font-size: 1.02rem;
}

.template-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-card-actions .button {
  min-height: 38px;
}

.template-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
}

/* Chat-style preview bubble shared by the cards and the editor */
.message-preview-device {
  padding: 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(57, 212, 143, 0.12), transparent 60%),
    color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px solid var(--line);
}

.message-preview-bubble {
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-preview-bubble[data-empty="true"] {
  color: var(--muted);
  font-style: italic;
}

.message-template-page .template-editor {
  width: min(1240px, calc(100% - 24px));
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: start;
}

.template-editor-form {
  width: 100%;
  display: grid;
  gap: 10px;
}

.template-editor-form > label {
  font-weight: 800;
  margin-top: 6px;
}

.template-editor-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.template-editor-row > div {
  display: grid;
  gap: 6px;
}

.template-editor-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-weight: 700;
}

.template-editor-check input {
  width: auto;
}

.template-variable-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}

.template-chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink);
  font-size: 0.78rem;
  font-family: monospace;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.template-chip:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
}

.template-editor-preview {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 12px;
}

.message-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.template-variable-legend {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.template-variable-legend > p {
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.template-variable-legend ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.template-variable-legend li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.template-variable-legend code {
  font-size: 0.78rem;
  color: var(--accent);
}

.template-variable-legend span {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

.badge-muted {
  opacity: 0.66;
}

@media (max-width: 920px) {
  .message-template-page .template-editor {
    grid-template-columns: 1fr;
  }

  .template-editor-preview {
    position: static;
  }
}

.feature-status {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: rgba(255, 255, 255, 0.56);
}

.feature-status span {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.feature-status.included span {
  color: #064e3b;
  background: #d1fadf;
}

.feature-status.locked span {
  color: #7a271a;
  background: #fee4e2;
}

.operations-actions,
.compact-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.compact-form select {
  flex: 1 1 240px;
}

.compact-form .button {
  width: auto;
}

.split.flush {
  width: 100%;
  padding: 0;
}

.operations-list {
  margin-bottom: 18px;
}

#id_package {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#id_package li {
  margin: 0;
}

#id_package label {
  min-width: 0;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#id_package label > * {
  min-width: 0;
}

#id_package input {
  width: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  accent-color: #d9ad55;
}

#id_package label:has(input:checked) {
  border-color: rgba(245, 208, 122, 0.7);
  box-shadow: 0 0 0 4px rgba(245, 208, 122, 0.12);
}

#id_package label:hover {
  transform: translateY(-2px);
}

.event-form .field-package #id_package input[type="radio"] {
  width: 14px;
  min-width: 14px;
  min-height: 14px;
  inline-size: 14px;
  block-size: 14px;
  padding: 0;
  border-width: 1.5px;
  box-shadow: none;
}

.event-form .field-package #id_package input[type="radio"]:checked {
  background: radial-gradient(circle, var(--primary) 0 44%, transparent 48%), var(--surface-strong);
  box-shadow: none;
}

.scanner-box {
  min-height: 420px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: #172026;
}

.scanner-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-help {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px;
  border-radius: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
}

.scanner-form {
  gap: 14px;
}

.scanner-instructions {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.55;
}

.scanner-camera {
  position: relative;
  min-height: min(58vh, 430px);
  overflow: hidden;
  border: 1px solid rgba(245, 208, 122, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(245, 208, 122, 0.12), transparent 28%),
    linear-gradient(145deg, #050403, #171006);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 210, 0.06);
}

.scanner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.28;
  transition: opacity 180ms ease;
}

.scanner-video video,
.scanner-video canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.scanner-video img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: #050403;
}

.scanner-video br,
.scanner-video button,
.scanner-video select,
.scanner-video a {
  display: none !important;
}

.scanner-camera.is-active .scanner-video {
  opacity: 1;
}

.scanner-camera-placeholder {
  position: absolute;
  inset: 18px;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px dashed rgba(245, 208, 122, 0.34);
  border-radius: 18px;
  color: #fff8e8;
  text-align: center;
  background: rgba(5, 4, 3, 0.34);
  transition: opacity 180ms ease;
}

.scanner-camera-placeholder strong {
  color: #fff2bc;
  font-size: 1.1rem;
}

.scanner-camera-placeholder span {
  color: rgba(255, 248, 232, 0.74);
}

.scanner-camera.is-active .scanner-camera-placeholder {
  opacity: 0;
  pointer-events: none;
}

.scanner-controls {
  display: grid;
  gap: 10px;
}

.scanner-start-button {
  min-height: 54px;
  font-size: 1rem;
}

.scanner-status {
  display: block;
  min-height: 1.35em;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.scanner-status[data-tone="success"] {
  color: #2f7a45;
}

.scanner-status[data-tone="warning"] {
  color: #b7791f;
}

.scanner-status[data-tone="error"] {
  color: var(--red);
}

.scanner-permission-help {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.scanner-permission-help[hidden] {
  display: none;
}

.scanner-live-result {
  position: absolute;
  inset: 16px;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(245, 208, 122, 0.24);
  color: #fff8e8;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(5, 4, 3, 0.9), rgba(23, 16, 6, 0.82));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.scanner-live-result[hidden] {
  display: none;
}

.scanner-live-result h3,
.scanner-live-result p {
  margin: 0;
}

.scanner-live-result h3 {
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.1;
  color: #fff2bc;
}

.scanner-live-result p {
  max-width: 36rem;
  color: rgba(255, 248, 232, 0.84);
  font-weight: 800;
  line-height: 1.45;
}

.scanner-live-result.success {
  border-color: rgba(47, 122, 69, 0.32);
  background:
    radial-gradient(circle at 50% 0%, rgba(69, 190, 107, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(9, 54, 25, 0.94), rgba(5, 4, 3, 0.82));
}

.scanner-live-result.warning {
  border-color: rgba(183, 121, 31, 0.32);
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 208, 122, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(91, 58, 11, 0.94), rgba(5, 4, 3, 0.82));
}

.scanner-live-result.error {
  border-color: rgba(180, 35, 24, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(91, 18, 18, 0.94), rgba(5, 4, 3, 0.82));
}

.scanner-live-result-details {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.scanner-live-guest {
  color: #ffffff;
  font-size: clamp(1.08rem, 3vw, 1.45rem);
  font-weight: 900;
}

.scanner-live-capacity {
  padding: 10px 14px;
  border-radius: 999px;
  color: #172026;
  background: #fff2bc;
  font-size: clamp(0.98rem, 2.8vw, 1.18rem);
  font-weight: 950;
}

.scanner-live-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.scanner-result-ok {
  min-height: 52px;
  width: min(100%, 320px);
  font-size: 1rem;
}

.scanner-fallbacks {
  display: grid;
  gap: 12px;
}

.scanner-fallbacks p {
  margin: 0;
}

.scanner-fallbacks input[type="file"] {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.result-card.success {
  border-color: #abefc6;
  background: #f6fef9;
}

.result-card.warning {
  border-color: #fecdca;
  background: #fffbfa;
}

.guest-summary {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.invitation-card {
  min-height: 0;
}

.card-editor-head .button-row {
  align-items: center;
}

.cardkit-editor {
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cardkit-controls {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.cardkit-control-head,
.cardkit-layer-title,
.cardkit-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cardkit-control-head h2,
.cardkit-stage-toolbar h2 {
  margin: 0;
}

.cardkit-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cardkit-template-tile {
  position: relative;
  min-height: 126px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #fff8e8;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.cardkit-template-tile::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  pointer-events: none;
}

.cardkit-template-tile span,
.cardkit-template-tile small,
.cardkit-template-tile strong {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  color: var(--card-ink, #fff8e8);
  text-shadow: var(--card-text-shadow, 0 2px 14px rgba(5, 4, 3, 0.48));
}

.cardkit-template-tile span,
.cardkit-template-tile small {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cardkit-template-tile strong {
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--swatch-title-surface, rgba(5, 4, 3, 0.28));
  font-size: 0.92rem;
  line-height: 1.1;
}

.cardkit-template-tile.is-selected {
  outline: 3px solid var(--secondary, #d9ad55);
  outline-offset: 2px;
}

.cardkit-template-tile.is-locked {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.6;
}

.cardkit-layer-stack {
  display: grid;
  gap: 12px;
}

.cardkit-layer {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.cardkit-layer-title span {
  font-weight: 900;
}

.file-upload-field {
  display: grid;
  gap: 6px;
}

.image-uploader {
  position: relative;
  cursor: pointer;
  border: 2px dashed var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 180ms ease;
}

.image-uploader:hover {
  border-color: var(--primary);
}

.image-uploader-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.image-uploader-display {
  position: relative;
  min-height: 110px;
}

.image-uploader-display img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.image-uploader-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 110px;
  color: var(--muted);
  text-align: center;
}

.image-uploader-empty span {
  font-size: 0.85rem;
  font-weight: 600;
}

.image-uploader-empty small {
  font-size: 0.75rem;
}

.image-uploader-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 180ms ease;
}

.image-uploader:hover .image-uploader-overlay {
  opacity: 1;
}

.image-uploader-overlay--ready {
  opacity: 1;
  background: rgba(16, 100, 60, 0.72);
}

.cardkit-layer-title small,
.cardkit-layer > small {
  color: var(--muted);
}

.cardkit-layer label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.cardkit-layer input,
.cardkit-layer textarea,
.cardkit-layer select {
  width: 100%;
}

.cardkit-layer input[type="color"] {
  width: 100%;
  min-height: 44px;
  padding: 4px;
}

.cardkit-static-field {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 66%, transparent);
}

.cardkit-static-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cardkit-static-field strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.cardkit-color-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cardkit-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
}

.cardkit-segmented button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.cardkit-segmented button.is-active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cardkit-segmented--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cardkit-field-hint {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.field-errors,
.cardkit-layer .errorlist {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #fecdca;
  border-radius: 8px;
  color: #7a271a;
  background: #fffbfa;
  font-size: 0.84rem;
  font-weight: 800;
  list-style: none;
}

.cardkit-stage-wrap {
  display: grid;
  gap: 14px;
}

.cardkit-stage-toolbar {
  min-height: 76px;
}

.cardkit-layout-toggle {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
}

.cardkit-layout-toggle button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.cardkit-layout-toggle button.is-active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cardkit-stage {
  display: grid;
  place-items: center;
  min-height: 720px;
  padding: clamp(16px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    color-mix(in srgb, var(--surface-strong) 68%, transparent);
}

.cardkit-live-preview {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 64px;
  font-family: var(--editor-font, inherit);
  zoom: var(--card-editor-zoom, 0.42);
}

.cardkit-live-preview[data-layout="square"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1080px);
  min-height: auto;
  aspect-ratio: auto;
}

.cardkit-live-preview[data-layout="landscape"] {
  width: var(--card-design-w, 1280px);
  height: var(--card-design-h, 720px);
  min-height: auto;
  aspect-ratio: auto;
}

.cardkit-rendered[data-layout="landscape"] {
  width: var(--card-design-w, 1280px);
  height: var(--card-design-h, 720px);
  min-height: auto;
  aspect-ratio: auto;
}

.cardkit-rendered[data-layout="square"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1080px);
}

.cardkit-rendered:not([data-layout]),
.cardkit-rendered[data-layout="portrait"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
}

.public-invite .invitation-card.cardkit-rendered[data-layout="landscape"] {
  min-height: auto;
}

.cardkit-rendered {
  font-family: var(--editor-font, inherit);
  font-size: 36px;
  line-height: 1.25;
}

.cardkit-rendered .cardkit-preview-content,
.cardkit-rendered .invitation-card-inner {
  position: absolute;
  left: var(--card-info-x, 50%);
  top: var(--card-info-y, 48%);
  z-index: 3;
  width: var(--card-info-w, 62%);
  max-width: 100%;
  text-align: var(--card-info-align, center);
  transform: translate(-50%, -50%) scale(var(--card-info-scale, 1));
  transform-origin: center;
}

.cardkit-rendered .invitation-card-inner {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, var(--card-surface-opacity, 0.78));
  border: 1px solid rgba(245, 208, 122, calc(0.28 * var(--card-surface-opacity, 0.78)));
  box-shadow: 0 18px 48px rgba(0, 0, 0, calc(0.12 * var(--card-surface-opacity, 0.78)));
}

.cardkit-rendered .qr-wrap {
  position: absolute;
  left: var(--card-qr-x, 50%);
  top: var(--card-qr-y, 84%);
  z-index: 4;
  box-sizing: content-box;
  width: var(--card-qr-size, 14%);
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 18px;
  aspect-ratio: 1;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.cardkit-rendered > .helptext,
.cardkit-rendered .invitation-card-qr-help {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  width: min(82%, 420px);
  margin: 0;
  text-align: center;
  transform: translateX(-50%);
}

.cardkit-preview-qr {
  display: grid;
  place-items: center;
  border: 8px solid var(--card-qr-bg, #fff);
  background:
    linear-gradient(90deg, #111 12px, transparent 12px) 0 0 / 28px 28px,
    linear-gradient(0deg, #111 12px, transparent 12px) 0 0 / 28px 28px,
    #fff;
}

.cardkit-preview-qr span {
  display: block;
  width: 88%;
  aspect-ratio: 1;
  border: 8px solid #111;
  background: #fff;
}

.cardkit-preview-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 13px;
  width: min(100%, 430px);
}

.cardkit-preview-content h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 0.98;
}

.cardkit-preview-content p {
  margin: 0;
}

.cardkit-preview-details {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.cardkit-preview-details p {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.22));
}

.cardkit-preview-details span {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cardkit-live-preview .card-logo,
.cardkit-live-preview .card-host-photo {
  max-width: none;
  align-self: flex-start;
}

.cardkit-live-preview .card-logo {
  width: 82px;
}

.cardkit-live-preview .card-host-photo {
  width: 112px;
}

.cardkit-live-preview.template-saffron-split-bloom > .cardkit-preview-content,
.cardkit-live-preview.template-crimson-floral-save-date > .cardkit-preview-content,
.cardkit-live-preview.template-royal-plum-florals > .cardkit-preview-content,
.cardkit-live-preview.template-peacock-regalia > .cardkit-preview-content,
.cardkit-live-preview.template-savanna-heritage > .cardkit-preview-content,
.cardkit-live-preview.template-family-sendoff > .cardkit-preview-content {
  width: min(44%, 320px);
  max-width: 44%;
  align-self: flex-end;
  text-align: center;
}

.cardkit-live-preview.cardkit-rendered > .cardkit-preview-content {
  position: absolute;
  width: var(--card-info-w, 62%);
  max-width: 100%;
  align-self: auto;
  text-align: var(--card-info-align, center);
}

.cardkit-live-preview.template-aurelia-black-tie > .cardkit-preview-content,
.cardkit-live-preview.template-botanic-noir > .cardkit-preview-content,
.cardkit-live-preview.template-pearl-arch > .cardkit-preview-content {
  width: min(100%, 430px);
  max-width: 100%;
  align-self: center;
  text-align: center;
}

@media (max-width: 1040px) {
  .cardkit-editor {
    grid-template-columns: 1fr;
  }

  .cardkit-controls {
    position: static;
    max-height: none;
  }

  .cardkit-stage {
    min-height: 620px;
  }
}

@media (max-width: 680px) {
  .cardkit-template-grid,
  .cardkit-color-row {
    grid-template-columns: 1fr;
  }

  .cardkit-stage-toolbar,
  .cardkit-control-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .cardkit-layout-toggle {
    width: 100%;
  }

  .cardkit-layout-toggle button {
    width: 100%;
  }

  .cardkit-stage {
    min-height: 520px;
    padding: 12px;
  }

  .cardkit-live-preview,
  .cardkit-live-preview[data-layout="square"] {
    zoom: var(--card-editor-zoom-mobile, 0.32);
  }

  .cardkit-live-preview[data-layout="landscape"] {
    zoom: var(--card-editor-landscape-zoom-mobile, 0.29);
  }

  .cardkit-live-preview.template-saffron-split-bloom > .cardkit-preview-content,
  .cardkit-live-preview.template-crimson-floral-save-date > .cardkit-preview-content,
  .cardkit-live-preview.template-royal-plum-florals > .cardkit-preview-content,
  .cardkit-live-preview.template-peacock-regalia > .cardkit-preview-content,
  .cardkit-live-preview.template-savanna-heritage > .cardkit-preview-content,
  .cardkit-live-preview.template-family-sendoff > .cardkit-preview-content {
    width: min(58%, 360px);
    max-width: 100%;
  }
}

.card-preview,
.template-swatch {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 10%, rgba(217, 173, 85, 0.28), transparent 28%),
    linear-gradient(145deg, var(--primary, #111722), #080706);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.card-preview > *,
.template-swatch > * {
  position: relative;
  z-index: 1;
}

.card-media {
  position: relative;
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-logo {
  width: 82px;
  height: 82px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
}

.card-logo img {
  object-fit: contain;
}

.card-host-photo {
  width: 112px;
  height: 112px;
  border-radius: 32px;
}

/* Logo is freely placeable on the card via the editor (X / Y / size). */
.cardkit-rendered .card-logo {
  position: absolute;
  left: var(--card-logo-x, 50%);
  top: var(--card-logo-y, 12%);
  z-index: 4;
  width: var(--card-logo-size, 16%);
  height: auto;
  aspect-ratio: 1;
  align-self: auto;
  margin: 0;
  transform: translate(-50%, -50%);
}

.card-background-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: inherit;
  opacity: 0.34;
  box-shadow: none;
  overflow: hidden;
}

/* Background source: "template" shows the template artwork only; "custom"
   uses the uploaded photo as the full-bleed background. */
.cardkit-rendered[data-bg-source="template"] .card-background-photo {
  display: none;
}

.cardkit-rendered[data-bg-source="custom"] .card-background-photo {
  display: block;
  opacity: 1;
}

.card-background-photo img {
  object-fit: var(--card-bg-fit, cover);
  object-position: var(--card-bg-x, 50%) var(--card-bg-y, 50%);
  transform: scale(var(--card-bg-scale, 1));
}

.card-background-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5, 4, 3, 0.36), rgba(5, 4, 3, 0.76));
}

.card-media[data-image-loading].has-loading-error::before {
  content: attr(data-loading-error);
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  font-weight: 900;
  text-align: center;
}

.template-gallery {
  margin-top: 18px;
}

.template-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.template-swatch {
  border: 0;
  text-align: left;
  cursor: pointer;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 18px;
  color: #fff8e8;
}

.template-swatch:disabled {
  cursor: not-allowed;
}

.template-swatch:not(:disabled):hover,
.template-swatch:not(:disabled):focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32);
}

.template-swatch span,
.template-swatch small {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.template-swatch strong {
  color: var(--card-ink, inherit);
  font-size: 1.05rem;
  line-height: 1.08;
}

.card-preview[class*="template-"] .small-label,
.template-swatch[class*="template-"] span,
.template-swatch[class*="template-"] small {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
}

.card-preview[class*="template-"] h1,
.card-preview[class*="template-"] h2,
.card-preview[class*="template-"] p,
.card-preview[class*="template-"] strong,
.template-swatch[class*="template-"] strong {
  color: var(--card-ink, #fff8e8);
}

.card-preview[class*="template-"] .small-label,
.card-preview[class*="template-"] h1,
.card-preview[class*="template-"] h2,
.card-preview[class*="template-"] p,
.card-preview[class*="template-"] strong,
.template-swatch[class*="template-"] span,
.template-swatch[class*="template-"] small,
.template-swatch[class*="template-"] strong {
  text-shadow: var(--card-text-shadow, 0 2px 14px rgba(5, 4, 3, 0.46));
}

.card-preview[class*="template-"] p,
.card-preview[class*="template-"] strong {
  font-weight: 800;
}

.template-swatch[class*="template-"] span,
.template-swatch[class*="template-"] small,
.template-swatch[class*="template-"] strong {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--swatch-label-surface, rgba(5, 4, 3, 0.2));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.template-swatch[class*="template-"] strong {
  border-radius: 12px;
  background: var(--swatch-title-surface, rgba(5, 4, 3, 0.28));
}

.template-swatch.is-locked {
  filter: grayscale(0.35);
  opacity: 0.62;
}

.template-swatch.is-locked::after {
  content: "Upgrade";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  color: #100d07;
  background: linear-gradient(135deg, #d9ad55, #fff2bc);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.template-aurelia-black-tie {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.72);
  color: #fff8e8;
  background:
    repeating-linear-gradient(90deg, rgba(245, 208, 122, 0.08) 0 1px, transparent 1px 58px),
    linear-gradient(180deg, rgba(245, 208, 122, 0.14), transparent 36%),
    linear-gradient(145deg, #030302 0%, #171006 54%, #050403 100%);
}

.template-aurelia-black-tie::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(245, 208, 122, 0.48);
  border-radius: 22px;
  pointer-events: none;
}

.template-crimson-floral-save-date {
  --card-ink: #2c160d;
  --card-muted: rgba(78, 43, 24, 0.68);
  color: #2c160d;
  justify-content: center;
  text-align: center;
  background:
    url("../img/cards/floral-crimson-corners.fc95b227aab3.svg") left center / 50% 100% no-repeat,
    radial-gradient(circle at 8% 9%, #b51222 0 8%, #7e101b 9% 13%, transparent 14%),
    radial-gradient(circle at 18% 5%, rgba(206, 38, 34, 0.82) 0 7%, transparent 8%),
    radial-gradient(circle at 88% 92%, #9c1021 0 10%, #5d0b17 11% 16%, transparent 17%),
    radial-gradient(ellipse at 24% 17%, rgba(186, 118, 32, 0.42) 0 12%, transparent 13%),
    radial-gradient(ellipse at 76% 82%, rgba(186, 118, 32, 0.38) 0 14%, transparent 15%),
    repeating-linear-gradient(90deg, rgba(163, 103, 39, 0.12) 0 1px, transparent 1px 42px),
    linear-gradient(145deg, #fff8ec 0%, #f8e9cc 54%, #e5c996 100%);
}

.template-crimson-floral-save-date::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(157, 93, 31, 0.34);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(177, 122, 44, 0.38), transparent 16%, transparent 84%, rgba(177, 122, 44, 0.38)),
    linear-gradient(180deg, rgba(177, 122, 44, 0.28), transparent 18%, transparent 82%, rgba(177, 122, 44, 0.28));
  pointer-events: none;
}

.template-royal-plum-florals {
  --card-ink: #ffe6a3;
  --card-muted: rgba(255, 230, 163, 0.76);
  color: #ffe6a3;
  justify-content: center;
  text-align: center;
  background:
    url("../img/cards/floral-plum-corners.d4a0a35cb4ae.svg") left center / 50% 100% no-repeat,
    radial-gradient(circle at 7% 8%, #6b2179 0 12%, #351047 13% 22%, transparent 23%),
    radial-gradient(circle at 94% 10%, #7e2a85 0 13%, #2a0d3d 14% 23%, transparent 24%),
    radial-gradient(circle at 15% 96%, #8b338b 0 12%, #371044 13% 23%, transparent 24%),
    radial-gradient(circle at 91% 92%, #7b2b80 0 12%, #270b38 13% 23%, transparent 24%),
    radial-gradient(ellipse at 18% 25%, rgba(241, 200, 102, 0.62) 0 8%, transparent 9%),
    radial-gradient(ellipse at 82% 30%, rgba(241, 200, 102, 0.52) 0 9%, transparent 10%),
    repeating-linear-gradient(90deg, rgba(241, 200, 102, 0.1) 0 1px, transparent 1px 58px),
    linear-gradient(145deg, #2b0738 0%, #4a0d4f 52%, #16031f 100%);
}

.template-royal-plum-florals::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(241, 200, 102, 0.58);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 4px rgba(241, 200, 102, 0.08),
    inset 0 0 34px rgba(241, 200, 102, 0.08);
  pointer-events: none;
}

.template-peacock-regalia {
  --card-ink: #ffe7a3;
  --card-muted: rgba(255, 231, 163, 0.75);
  color: #ffe7a3;
  justify-content: center;
  text-align: center;
  background:
    url("../img/cards/peacock-regalia-frame.d63ef6a0a85f.svg") left center / 50% 100% no-repeat,
    radial-gradient(ellipse at 18% 72%, #07a968 0 4%, #1e75b8 5% 8%, #f0b84c 9% 11%, transparent 12%),
    radial-gradient(ellipse at 82% 72%, #07a968 0 4%, #1e75b8 5% 8%, #f0b84c 9% 11%, transparent 12%),
    radial-gradient(ellipse at 12% 86%, rgba(15, 166, 105, 0.74) 0 14%, transparent 15%),
    radial-gradient(ellipse at 88% 86%, rgba(15, 166, 105, 0.74) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 8%, rgba(240, 184, 76, 0.72) 0 4%, transparent 5%),
    repeating-linear-gradient(90deg, rgba(240, 184, 76, 0.12) 0 1px, transparent 1px 42px),
    linear-gradient(145deg, #4b0036 0%, #5e073f 58%, #28001f 100%);
}

.template-peacock-regalia::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px solid rgba(240, 184, 76, 0.54);
  border-radius: 20px;
  background:
    radial-gradient(circle at 13% 22%, rgba(240, 184, 76, 0.72) 0 2%, transparent 3%),
    radial-gradient(circle at 87% 22%, rgba(240, 184, 76, 0.72) 0 2%, transparent 3%),
    linear-gradient(90deg, transparent 0 20%, rgba(240, 184, 76, 0.22) 20% 21%, transparent 21% 79%, rgba(240, 184, 76, 0.22) 79% 80%, transparent 80%);
  pointer-events: none;
}

.template-saffron-split-bloom {
  --card-ink: #fff2d2;
  --card-muted: rgba(255, 242, 210, 0.72);
  color: #fff2d2;
  align-items: flex-end;
  text-align: center;
  background:
    url("../img/cards/saffron-split-bloom.8417c70ab423.svg") left center / 50% 100% no-repeat,
    linear-gradient(90deg, transparent 0 48%, #77471f 48% 100%),
    radial-gradient(circle at 18% 24%, #f08d24 0 9%, #dc5f22 10% 14%, transparent 15%),
    radial-gradient(circle at 30% 38%, rgba(255, 186, 68, 0.78) 0 8%, transparent 9%),
    radial-gradient(ellipse at 24% 72%, rgba(80, 128, 67, 0.48) 0 16%, transparent 17%),
    linear-gradient(145deg, #fff1d7 0%, #f7deb6 48%, #77471f 49%, #4f2d18 100%);
}

.template-saffron-split-bloom::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 18px;
  border: 1px solid rgba(117, 71, 31, 0.32);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 46%, rgba(255, 255, 255, 0.04) 46% 100%),
    repeating-linear-gradient(135deg, rgba(117, 71, 31, 0.12) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

.template-saffron-split-bloom > * {
  max-width: 46%;
}

.template-saffron-split-bloom h1,
.template-saffron-split-bloom h2,
.template-saffron-split-bloom p,
.template-saffron-split-bloom strong {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.card-preview.template-aurelia-black-tie,
.card-preview.template-crimson-floral-save-date,
.card-preview.template-royal-plum-florals,
.card-preview.template-peacock-regalia,
.card-preview.template-botanic-noir,
.card-preview.template-pearl-arch,
.card-preview.template-savanna-heritage,
.card-preview.template-family-sendoff {
  padding: clamp(34px, 7vw, 64px);
}

.card-preview.template-aurelia-black-tie > *,
.card-preview.template-crimson-floral-save-date > *,
.card-preview.template-royal-plum-florals > *,
.card-preview.template-peacock-regalia > *,
.card-preview.template-botanic-noir > *,
.card-preview.template-pearl-arch > *,
.card-preview.template-savanna-heritage > *,
.card-preview.template-family-sendoff > * {
  width: min(100%, 430px);
  align-self: center;
  text-align: center;
}

.card-preview.template-aurelia-black-tie::after,
.card-preview.template-crimson-floral-save-date::after,
.card-preview.template-royal-plum-florals::after,
.card-preview.template-peacock-regalia::after,
.card-preview.template-botanic-noir::after,
.card-preview.template-pearl-arch::after,
.card-preview.template-savanna-heritage::after,
.card-preview.template-family-sendoff::after {
  content: "";
  position: absolute;
  inset: clamp(54px, 12%, 92px) clamp(28px, 9%, 58px);
  z-index: 0;
  border: 1px solid var(--card-panel-border, rgba(245, 208, 122, 0.28));
  border-radius: 26px;
  background: var(--card-panel, rgba(5, 4, 3, 0.42));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.card-preview.template-crimson-floral-save-date {
  --card-panel: rgba(255, 250, 240, 0.78);
  --card-panel-border: rgba(157, 93, 31, 0.38);
}

.card-preview.template-botanic-noir,
.card-preview.template-pearl-arch {
  --card-panel: rgba(255, 250, 238, 0.72);
  --card-panel-border: rgba(80, 61, 34, 0.25);
}

.card-preview.template-royal-plum-florals,
.card-preview.template-peacock-regalia,
.card-preview.template-aurelia-black-tie {
  --card-panel: rgba(8, 4, 10, 0.58);
  --card-panel-border: rgba(245, 208, 122, 0.36);
}

.card-preview.template-savanna-heritage,
.card-preview.template-family-sendoff {
  --card-panel: rgba(15, 8, 4, 0.64);
  --card-panel-border: rgba(245, 208, 122, 0.34);
}

.card-preview.template-saffron-split-bloom::after {
  content: "";
  position: absolute;
  inset: clamp(46px, 11%, 84px) 30px clamp(46px, 11%, 84px) 51%;
  z-index: 0;
  border: 1px solid rgba(255, 242, 210, 0.22);
  border-radius: 22px;
  background: rgba(58, 31, 15, 0.7);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.card-preview.template-saffron-split-bloom > * {
  width: min(44%, 300px);
  align-self: flex-end;
}

.card-preview.template-saffron-split-bloom,
.card-preview.template-crimson-floral-save-date,
.card-preview.template-royal-plum-florals,
.card-preview.template-peacock-regalia,
.card-preview.template-savanna-heritage,
.card-preview.template-family-sendoff {
  align-items: flex-end;
  padding: clamp(34px, 6vw, 60px) 30px;
}

.card-preview.template-saffron-split-bloom::after,
.card-preview.template-crimson-floral-save-date::after,
.card-preview.template-royal-plum-florals::after,
.card-preview.template-peacock-regalia::after,
.card-preview.template-savanna-heritage::after,
.card-preview.template-family-sendoff::after {
  inset: clamp(46px, 11%, 84px) 30px clamp(46px, 11%, 84px) 51%;
  border-radius: 22px;
}

.card-preview.template-saffron-split-bloom > *,
.card-preview.template-crimson-floral-save-date > *,
.card-preview.template-royal-plum-florals > *,
.card-preview.template-peacock-regalia > *,
.card-preview.template-savanna-heritage > *,
.card-preview.template-family-sendoff > * {
  width: min(44%, 320px);
  max-width: 44%;
  align-self: flex-end;
  text-align: center;
}

.card-preview.template-crimson-floral-save-date::after {
  background: rgba(255, 250, 240, 0.84);
  box-shadow: 0 18px 54px rgba(92, 46, 18, 0.14);
}

.card-preview.template-royal-plum-florals::after,
.card-preview.template-peacock-regalia::after,
.card-preview.template-savanna-heritage::after,
.card-preview.template-family-sendoff::after {
  background: rgba(8, 4, 10, 0.72);
}

.template-swatch.template-crimson-floral-save-date,
.template-swatch.template-royal-plum-florals,
.template-swatch.template-peacock-regalia,
.template-swatch.template-saffron-split-bloom,
.template-swatch.template-savanna-heritage,
.template-swatch.template-family-sendoff {
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

.template-swatch.template-crimson-floral-save-date > *,
.template-swatch.template-royal-plum-florals > *,
.template-swatch.template-peacock-regalia > *,
.template-swatch.template-saffron-split-bloom > *,
.template-swatch.template-savanna-heritage > *,
.template-swatch.template-family-sendoff > * {
  width: 54%;
  max-width: 54%;
  align-self: flex-end;
}

@media (max-width: 680px) {
  .card-preview.template-saffron-split-bloom,
  .card-preview.template-crimson-floral-save-date,
  .card-preview.template-royal-plum-florals,
  .card-preview.template-peacock-regalia,
  .card-preview.template-savanna-heritage,
  .card-preview.template-family-sendoff {
    align-items: flex-end;
    padding: clamp(36px, 10vw, 56px) 22px;
  }

  .card-preview.template-saffron-split-bloom::after,
  .card-preview.template-crimson-floral-save-date::after,
  .card-preview.template-royal-plum-florals::after,
  .card-preview.template-peacock-regalia::after,
  .card-preview.template-savanna-heritage::after,
  .card-preview.template-family-sendoff::after {
    inset: clamp(54px, 13%, 84px) 18px clamp(42px, 10%, 68px) 40%;
  }

  .card-preview.template-saffron-split-bloom > *,
  .card-preview.template-crimson-floral-save-date > *,
  .card-preview.template-royal-plum-florals > *,
  .card-preview.template-peacock-regalia > *,
  .card-preview.template-savanna-heritage > *,
  .card-preview.template-family-sendoff > * {
    width: min(58%, 360px);
    max-width: 100%;
    align-self: flex-end;
  }
}

.template-botanic-noir {
  --card-ink: #183024;
  --card-muted: rgba(24, 48, 36, 0.68);
  color: #183024;
  background:
    repeating-linear-gradient(135deg, rgba(40, 96, 68, 0.08) 0 1px, transparent 1px 24px),
    linear-gradient(145deg, #fff4df 0%, #e9f2df 54%, #d3c3a5 100%);
}

.template-botanic-noir::before {
  content: "";
  position: absolute;
  right: -28px;
  top: -44px;
  width: 210px;
  height: 330px;
  border-radius: 48% 52% 42% 58%;
  border: 1px solid rgba(38, 89, 64, 0.24);
  background:
    repeating-linear-gradient(90deg, rgba(44, 118, 82, 0.18) 0 2px, transparent 2px 18px),
    rgba(255, 255, 255, 0.2);
  transform: rotate(17deg);
}

.template-pearl-arch {
  --card-ink: #201407;
  --card-muted: rgba(32, 20, 7, 0.66);
  color: #201407;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(145deg, #fff8e8 0%, #d9c7a4 48%, #8d6425 100%);
}

.template-pearl-arch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  width: min(72%, 330px);
  height: 82%;
  border: 2px solid rgba(141, 100, 37, 0.46);
  border-radius: 999px 999px 26px 26px;
  transform: translateX(-50%);
}

.template-pearl-arch .small-label,
.template-pearl-arch p,
.template-pearl-arch strong,
.template-pearl-arch h1,
.template-pearl-arch h2 {
  color: #201407;
}

.template-savanna-heritage {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.74);
  color: #fff8e8;
  background:
    url("../img/cards/heritage-strip.b9a890b88589.svg") left center / 50% 100% no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 248, 232, 0.06) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(135deg, rgba(245, 208, 122, 0.14) 0 2px, transparent 2px 18px),
    linear-gradient(145deg, #4f1f11 0%, #a14c1d 44%, #162f2b 100%);
}

.template-savanna-heritage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(245, 208, 122, 0.24);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(5, 4, 3, 0.34), transparent 22%, transparent 78%, rgba(5, 4, 3, 0.34));
  pointer-events: none;
}

.template-cinematic-photo-luxe {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.76);
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(5, 4, 3, 0.04), rgba(5, 4, 3, 0.82)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px),
    linear-gradient(145deg, #0d2437 0%, #31485a 42%, #0b0905 100%);
}

.template-cinematic-photo-luxe::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(2px);
}

.template-birthday-glow {
  --card-ink: #321223;
  --card-muted: rgba(50, 18, 35, 0.66);
  color: #321223;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.32) 0 8px, transparent 8px 28px),
    repeating-linear-gradient(135deg, rgba(238, 98, 112, 0.18) 0 2px, transparent 2px 18px),
    linear-gradient(145deg, #ffe3ec 0%, #ffd36d 46%, #92dfcd 100%);
}

.template-birthday-glow::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(50, 18, 35, 0.32);
  border-radius: 22px;
  pointer-events: none;
}

.template-graduation-day {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.74);
  color: #fff8e8;
  background:
    linear-gradient(132deg, transparent 0 58%, rgba(244, 209, 123, 0.9) 58% 64%, transparent 64%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 42px),
    linear-gradient(145deg, #07172d 0%, #153d4c 62%, #07111f 100%);
}

.template-graduation-day::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(244, 209, 123, 0.42);
  transform: rotate(45deg);
}

.template-corporate-summit {
  --card-ink: #112236;
  --card-muted: rgba(17, 34, 54, 0.64);
  color: #112236;
  background:
    linear-gradient(90deg, rgba(39, 91, 134, 0.14), transparent 32%),
    repeating-linear-gradient(0deg, rgba(17, 34, 54, 0.08) 0 1px, transparent 1px 34px),
    linear-gradient(145deg, #f8fbff 0%, #d9e7ef 52%, #b7c8d0 100%);
}

.template-corporate-summit::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  background: linear-gradient(180deg, #1f5f8b, #2f8f83, #f0c96d);
}

.template-family-sendoff {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.76);
  color: #fff8e8;
  background:
    url("../img/cards/heritage-strip.b9a890b88589.svg") left center / 50% 100% no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 248, 232, 0.09) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(135deg, rgba(244, 209, 123, 0.16) 0 2px, transparent 2px 24px),
    linear-gradient(145deg, #0c4a48 0%, #b45322 48%, #21140a 100%);
}

.template-family-sendoff::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(245, 208, 122, 0.24);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(5, 4, 3, 0.34), transparent 22%, transparent 78%, rgba(5, 4, 3, 0.34));
  pointer-events: none;
}

.template-memorial-calm {
  --card-ink: #28313a;
  --card-muted: rgba(40, 49, 58, 0.64);
  color: #28313a;
  background:
    linear-gradient(90deg, rgba(94, 113, 89, 0.14), transparent 42%),
    repeating-linear-gradient(90deg, rgba(40, 49, 58, 0.04) 0 1px, transparent 1px 56px),
    linear-gradient(145deg, #f3f1ec 0%, #dce3dc 52%, #bcc7c0 100%);
}

.template-memorial-calm::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-left: 3px solid rgba(94, 113, 89, 0.42);
  border-bottom: 1px solid rgba(40, 49, 58, 0.14);
  pointer-events: none;
}

.template-red-pearl-frame {
  --card-ink: #30130f;
  --card-muted: rgba(75, 42, 38, 0.72);
  --card-readable-surface: rgba(255, 255, 255, 0.72);
  --card-panel-border: rgba(167, 24, 24, 0.18);
  --card-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 26px rgba(80, 0, 0, 0.12);
  color: #30130f;
  background:
    var(--card-template-red-pearl-frame) var(--card-bg-x, 50%) var(--card-bg-y, 50%) /
      calc(100% * var(--card-bg-scale, 1)) calc(100% * var(--card-bg-scale, 1)) no-repeat,
    #fbfaf8;
}

.template-red-pearl-frame::before,
.template-red-pearl-frame::after {
  content: none;
}

.template-red-pearl-frame .small-label,
.template-red-pearl-frame p,
.template-red-pearl-frame strong,
.template-red-pearl-frame h1,
.template-red-pearl-frame h2 {
  color: var(--card-ink, #30130f);
  text-shadow: var(--card-text-shadow);
}

.template-red-pearl-frame .cardkit-preview-content,
.template-red-pearl-frame .invitation-card-inner {
  box-shadow: none;
}

.template-gold-heart-floral-frame {
  --card-ink: #2f2111;
  --card-muted: rgba(74, 53, 28, 0.72);
  --card-readable-surface: rgba(255, 255, 255, 0.68);
  --card-panel-border: rgba(184, 123, 21, 0.16);
  --card-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 24px rgba(132, 72, 5, 0.1);
  color: #2f2111;
  background:
    var(--card-template-gold-heart-floral-frame) var(--card-bg-x, 50%) var(--card-bg-y, 50%) /
      calc(100% * var(--card-bg-scale, 1)) calc(100% * var(--card-bg-scale, 1)) no-repeat,
    #fbfaf8;
}

.template-champagne-floral-arch {
  --card-ink: #36271a;
  --card-muted: rgba(82, 62, 44, 0.7);
  --card-readable-surface: rgba(255, 255, 255, 0.64);
  --card-panel-border: rgba(178, 119, 33, 0.14);
  --card-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94), 0 12px 24px rgba(93, 54, 19, 0.08);
  color: #36271a;
  background:
    var(--card-template-champagne-floral-arch) var(--card-bg-x, 50%) var(--card-bg-y, 50%) /
      calc(100% * var(--card-bg-scale, 1)) calc(100% * var(--card-bg-scale, 1)) no-repeat,
    #fbfaf8;
}

.template-gold-heart-floral-frame::before,
.template-gold-heart-floral-frame::after,
.template-champagne-floral-arch::before,
.template-champagne-floral-arch::after {
  content: none;
}

.template-gold-heart-floral-frame .small-label,
.template-gold-heart-floral-frame p,
.template-gold-heart-floral-frame strong,
.template-gold-heart-floral-frame h1,
.template-gold-heart-floral-frame h2,
.template-champagne-floral-arch .small-label,
.template-champagne-floral-arch p,
.template-champagne-floral-arch strong,
.template-champagne-floral-arch h1,
.template-champagne-floral-arch h2 {
  color: var(--card-ink, #36271a);
  text-shadow: var(--card-text-shadow);
}

.template-gold-heart-floral-frame .cardkit-preview-content,
.template-gold-heart-floral-frame .invitation-card-inner,
.template-champagne-floral-arch .cardkit-preview-content,
.template-champagne-floral-arch .invitation-card-inner {
  box-shadow: none;
}

.template-black-gold-horizontal-frame {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.72);
  --card-readable-surface: rgba(9, 9, 14, 0.46);
  --card-panel-border: rgba(245, 208, 122, 0.28);
  --card-text-shadow: 0 2px 16px rgba(0, 0, 0, 0.66), 0 0 1px rgba(0, 0, 0, 0.82);
  --card-chip-border: rgba(245, 208, 122, 0.22);
  --card-qr-bg: rgba(255, 248, 232, 0.96);
  --card-qr-ink: #050403;
  color: #fff8e8;
  background:
    var(--card-template-black-gold-horizontal-frame) var(--card-bg-x, 50%) var(--card-bg-y, 50%) /
      calc(100% * var(--card-bg-scale, 1)) calc(100% * var(--card-bg-scale, 1)) no-repeat,
    #10121d;
}

.template-black-gold-horizontal-frame::before,
.template-black-gold-horizontal-frame::after {
  content: none;
}

.template-black-gold-horizontal-frame .small-label,
.template-black-gold-horizontal-frame p,
.template-black-gold-horizontal-frame strong,
.template-black-gold-horizontal-frame h1,
.template-black-gold-horizontal-frame h2 {
  color: var(--card-ink, #fff8e8);
  text-shadow: var(--card-text-shadow);
}

.template-black-gold-horizontal-frame .cardkit-preview-content,
.template-black-gold-horizontal-frame .invitation-card-inner {
  border-radius: 8px;
  background: var(--card-readable-surface);
}

.template-aurelia-black-tie,
.template-royal-plum-florals,
.template-peacock-regalia,
.template-saffron-split-bloom,
.template-cinematic-photo-luxe,
.template-graduation-day,
.template-savanna-heritage,
.template-family-sendoff {
  --card-text-shadow: 0 2px 16px rgba(5, 4, 3, 0.68), 0 0 1px rgba(5, 4, 3, 0.78);
  --swatch-label-surface: rgba(5, 4, 3, 0.28);
  --swatch-title-surface: rgba(5, 4, 3, 0.38);
  --card-readable-surface: rgba(5, 4, 3, 0.34);
  --card-title-surface: rgba(5, 4, 3, 0.42);
  --card-chip-ink: #fff8e8;
  --card-chip-border: rgba(255, 248, 232, 0.2);
  --card-qr-bg: rgba(255, 248, 232, 0.95);
  --card-qr-ink: #050403;
}

.template-crimson-floral-save-date,
.template-botanic-noir,
.template-pearl-arch,
.template-birthday-glow,
.template-corporate-summit,
.template-memorial-calm {
  --card-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 0 18px rgba(255, 255, 255, 0.46);
  --swatch-label-surface: rgba(255, 250, 240, 0.58);
  --swatch-title-surface: rgba(255, 250, 240, 0.68);
  --card-readable-surface: rgba(255, 250, 240, 0.68);
  --card-title-surface: rgba(255, 250, 240, 0.78);
  --card-chip-ink: var(--card-ink, #201407);
  --card-chip-border: rgba(58, 42, 24, 0.14);
  --card-qr-bg: rgba(255, 255, 255, 0.96);
  --card-qr-ink: #111111;
}

.inline-action-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.device-limit-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.device-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 18px;
}

.device-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(36, 60, 89, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
}

.device-card > div {
  min-width: 0;
}

.selectable-device-card {
  cursor: pointer;
}

.device-card-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.device-card strong,
.device-card small {
  display: block;
}

.device-card small {
  margin-top: 5px;
  color: var(--muted);
}

.status-pill {
  display: inline-flex;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--blue-deep);
  background: rgba(245, 208, 122, 0.18);
  border: 1px solid rgba(245, 208, 122, 0.34);
  font-size: 0.72rem;
  font-weight: 900;
}

@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-sidebar {
    position: static;
  }

  .settings-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .settings-shell {
    padding-inline: 12px;
  }

  .settings-menu {
    grid-template-columns: 1fr;
  }

  .settings-password-row,
  .device-card {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-actions,
  .settings-detail-actions,
  .logout-actions,
  .settings-password-row .button,
  .device-card .button {
    width: 100%;
  }

  .settings-detail-card,
  .logout-card {
    padding: 20px;
  }

  .settings-detail-back {
    justify-self: stretch;
    text-align: center;
  }

  .logout-actions {
    display: grid;
  }

  .settings-section-card {
    padding: 14px;
  }
}

.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.danger-link {
  color: var(--red);
}

.danger-button {
  border-color: rgba(180, 35, 24, 0.42);
  color: #fff8e8;
  background: linear-gradient(135deg, #5f1712, #b42318);
}

.payment-summary-card,
.refund-policy-card,
.refund-panel {
  border-color: rgba(217, 173, 85, 0.36);
}

.payment-method-card {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(217, 173, 85, 0.32);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.payment-method-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.payment-method-head img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.payment-method-head strong,
.payment-method-head span {
  display: block;
}

.payment-reference-form p {
  flex: 1 1 220px;
  margin: 0;
}

.sms-copy-panel {
  margin-top: 6px;
}

.sms-copy-panel summary {
  cursor: pointer;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
}

.sms-copy-panel p {
  max-width: 360px;
  margin: 6px 0 0;
  padding: 10px;
  border: 1px solid rgba(217, 173, 85, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.card-dashboard-section {
  align-items: stretch;
}

.dashboard-card-preview {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
  min-height: 0;
  justify-self: center;
  align-self: start;
  padding: 64px;
  zoom: var(--card-dashboard-zoom, 0.26);
}

.dashboard-card-preview[data-layout="square"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1080px);
}

.dashboard-card-preview[data-layout="landscape"] {
  width: var(--card-design-w, 1280px);
  height: var(--card-design-h, 720px);
  zoom: var(--card-dashboard-landscape-zoom, 0.3);
}

.dashboard-card-preview .invitation-card-heading,
.dashboard-card-preview .invitation-card-subtitle {
  width: 100%;
}

.dashboard-card-preview .invitation-card-heading h1 {
  width: 100%;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.dashboard-card-preview .invitation-card-subtitle {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

.qr-wrap {
  width: fit-content;
  max-width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 18px;
  color: #050403;
  background: #fff;
  box-shadow: 0 14px 34px rgba(5, 4, 3, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.qr-wrap svg,
.qr-wrap canvas,
.qr-wrap img.qr-code-image {
  display: block;
  width: 100%;
  height: 100%;
  color: #050403;
  background: #fff;
  border-radius: 10px;
  image-rendering: pixelated;
  object-fit: contain;
  shape-rendering: crispEdges;
}

.qr-wrap svg path {
  fill: #050403;
}

html[data-theme="noir"] .qr-wrap {
  color: #050403;
  background: #fff;
}

.card-preview[class*="template-"] .qr-wrap {
  color: #050403;
  background: #fff;
  box-shadow: 0 14px 34px rgba(5, 4, 3, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.invitation-card .qr-wrap {
  border-radius: 10px;
}

.invitation-card .qr-wrap svg,
.invitation-card .qr-wrap canvas,
.invitation-card .qr-wrap img.qr-code-image {
  width: 100%;
  height: auto;
  display: block;
}

.invitation-card .qr-wrap + .helptext {
  max-width: 30ch;
  margin-top: 2px !important;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
}

.invitation-card[class*="template-"] h1,
.invitation-card[class*="template-"] h2,
.invitation-card[class*="template-"] p,
.invitation-card[class*="template-"] .small-label,
.invitation-card[class*="template-"] .status-chip {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 12px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.26));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.invitation-card[class*="template-"] h1,
.invitation-card[class*="template-"] h2 {
  padding: 6px 10px;
  border-radius: 16px;
  background: var(--card-title-surface, var(--card-readable-surface, rgba(5, 4, 3, 0.32)));
}

.invitation-card[class*="template-"] .status-chip {
  color: var(--card-chip-ink, var(--card-ink, #fff8e8));
  border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.18));
}

.invitation-card[class*="template-"] .qr-wrap + .helptext {
  color: var(--card-ink, #fff8e8);
  font-weight: 800;
}

.public-invite .invitation-card[class*="template-"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 64px;
}

.invitation-card[class*="template-"] .invitation-card-inner {
  width: 100%;
  align-self: center;
  text-align: center;
}

.invitation-card[class*="template-"] .invitation-card-heading h1 {
  width: fit-content;
  max-width: 16ch;
}

.invitation-card[class*="template-"] .invitation-card-subtitle {
  width: fit-content;
  max-width: 40ch;
}

.invitation-card[class*="template-"] .invite-description {
  width: 100%;
  max-width: 100%;
}

.invitation-card[class*="template-"] .invitation-guest-block,
.invitation-card[class*="template-"] .invitation-host-block {
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
}

.invitation-card[class*="template-"] .invitation-detail-grid {
  width: 100%;
}

.invitation-card[class*="template-"] .invitation-detail-grid p {
  width: auto;
  max-width: none;
  min-height: 62px;
  padding: 9px 10px;
  border-radius: 14px;
}

.public-invite .invitation-card[class*="template-"] .qr-wrap {
  width: var(--card-qr-size, 14%);
  align-self: center;
}

.cardkit-rendered.invitation-card[class*="template-"] .invitation-card-inner {
  position: absolute;
  left: var(--card-info-x, 50%);
  top: var(--card-info-y, 48%);
  width: var(--card-info-w, 62%);
  max-width: 100%;
  align-self: auto;
  text-align: var(--card-info-align, center);
  transform: translate(-50%, -50%) scale(var(--card-info-scale, 1));
}

.cardkit-rendered.invitation-card .qr-wrap svg,
.cardkit-rendered.invitation-card .qr-wrap canvas,
.cardkit-rendered.invitation-card .qr-wrap img.qr-code-image {
  width: 100%;
  height: 100%;
}

.invitation-card-frame.is-exporting .card-media,
.invitation-card-frame.is-exporting .card-media img {
  min-width: 0;
  max-width: none;
}

.warning-text {
  color: var(--red);
  font-weight: 800;
}

code {
  padding: 2px 6px;
  border-radius: 8px;
  background: #eef2f6;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(20px, -18px, 0);
  }
}

@keyframes float-card {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes cinematic-zoom {
  from {
    transform: scale(1.04);
  }

  to {
    transform: scale(1.12);
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 1280px) {
  .video-hero-content {
    top: clamp(52px, 7svh, 92px);
  }

  .video-hero h1 {
    font-size: 5.8rem;
  }
}

@media (max-width: 900px) {
  .site-footer,
.dashboard-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero,
  .split,
  .operation-grid,
  .scanner-layout,
  .public-invite,
  .section-grid,
  .section-grid.four,
  .content-grid,
  .pricing-grid,
  .timeline-grid,
  .hero-points-grid,
  .auth-layout,
  .feature-banner,
  .section-intro-split,
  .summary-heading,
  .summary-list {
    grid-template-columns: 1fr;
  }

  .summary-list {
    border-top: 0;
    gap: 18px;
  }

  .summary-list article {
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-right: 0;
  }

  .hero,
  .band,
  .workflow,
  .page-hero,
  .dashboard-head,
  .package-command,
  .metric-grid,
  .content-grid,
  .pricing-grid,
  .split,
  .scanner-layout,
  .public-invite,
  .table-panel,
  .tab-nav,
  .action-grid,
  .site-footer,
  .messages {
    width: min(100%, calc(100% - 18px));
  }

  .hero {
    padding-bottom: 34px;
  }

  .video-hero {
    min-height: max(100svh, 900px);
    padding: 0;
  }

  .video-hero h1 {
    font-size: 3.4rem;
  }

  .video-hero-content {
    top: clamp(42px, 7svh, 76px);
  }

  .hero-visual {
    min-height: 500px;
  }

  .hero-note.one {
    top: 22px;
    left: 10px;
  }

  .hero-note.two {
    right: 12px;
    bottom: 18px;
  }

  .metric-grid,
  .metric-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-bar,
  .filter-bar--inline {
    grid-template-columns: 1fr;
  }

  .package-command-head {
    flex-direction: column;
  }

  .feature-status-grid {
    grid-template-columns: 1fr;
  }

  .template-swatch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-form {
    order: 1;
  }

  .auth-story {
    order: 2;
  }

  #id_package {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  html,
  body {
    min-height: 100dvh;
    background: var(--bg, #050403);
  }

  main:not(.top-menu-bar),
  .page-main {
    background: var(--bg, #050403);
  }

  .home-page,
  .home-page main:not(.top-menu-bar),
  .home-page .page-main {
    min-height: 100dvh;
    background: var(--bg, #050403);
  }

  body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: env(safe-area-inset-top);
    background: var(--bg, #050403);
    pointer-events: none;
  }

  .site-footer {
    display: none;
  }

  .brand {
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .brand-logo {
    height: 36px;
    flex: 0 0 auto;
  }

  .brand-name {
    min-width: 0;
    font-size: 0.9rem;
    white-space: normal;
  }

  .site-nav {
    gap: 5px;
    justify-content: stretch;
    width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    padding: 5px;
    border-radius: 18px;
  }

  .site-nav .inline-form {
    flex: 1 1 calc(33.333% - 5px);
    min-width: 0;
  }

  .site-nav a,
  .site-nav .link-button {
    flex: 1 1 calc(33.333% - 5px);
    min-width: 0;
    min-height: 34px;
    padding: 0 7px;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  .site-nav .link-button {
    width: 100%;
  }

  .theme-switcher,
  .language-switcher {
    width: 100%;
  }

  .theme-select,
  .language-select {
    width: 100%;
    max-width: none;
    min-height: 36px;
    font-size: 0.78rem;
  }

  .metric-grid,
  .metric-grid.compact,
  .metric-strip {
    grid-template-columns: 1fr;
  }

  .template-swatch-grid {
    grid-template-columns: 1fr;
  }

  .actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .button,
  .nav-cta {
    width: 100%;
  }

  .hero {
    margin-top: 18px;
    padding: 74px 18px 28px;
    border-radius: 28px;
  }

  .video-hero {
    margin-top: 0;
    min-height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
  }

  .home-page .video-hero {
    margin-top: 0;
  }

  .video-hero h1 {
    font-size: 1.9rem;
    line-height: 1.05;
  }

  .video-hero-content {
    top: 34px;
    padding: 0 16px;
  }

  .video-hero-content > p:not(.eyebrow) {
    font-size: 0.9rem;
    line-height: 1.42;
    margin-top: 12px;
  }

  .video-hero-actions {
    position: relative;
    align-items: stretch;
    flex-direction: column;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 16px;
    gap: 10px;
  }

  .video-hero-actions .button {
    min-height: 42px;
  }

  .video-hero-actions .button {
    width: 100%;
  }

  .hero-visual {
    min-height: auto;
    padding: 16px;
  }

  .hero-showcase {
    padding: 8px;
  }

  .hero-note {
    position: static;
    margin-top: 12px;
    max-width: none;
  }

  .auth-story {
    padding: 24px;
  }
}

body:not(.login-page) {
  --bg: #080705;
  --surface: rgba(23, 20, 14, 0.86);
  --surface-strong: rgba(34, 29, 18, 0.94);
  --surface-dark: #090806;
  --surface-dark-2: #17130d;
  --ink: #fff8e8;
  --muted: #c9b98f;
  --line: rgba(213, 175, 92, 0.22);
  --line-strong: rgba(245, 208, 122, 0.36);
  --blue: #d9ad55;
  --blue-deep: #f4d17b;
  --green: #b88a3c;
  --green-deep: #d9ad55;
  --sky: rgba(244, 209, 123, 0.14);
  --mint: rgba(70, 82, 47, 0.22);
  --red: #ffb4a8;
  --success: #9ee6b4;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.36);
  --background: #080705;
  --foreground: #fff8e8;
  --card: rgba(23, 20, 14, 0.86);
  --card-foreground: #fff8e8;
  --primary: #d9ad55;
  --primary-foreground: #0b0905;
  --secondary: #b88a3c;
  --accent: #f5d07a;
  --border: rgba(245, 208, 122, 0.24);
  --muted-foreground: #c9b98f;
  --gradient-start: #050403;
  --gradient-end: #171109;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 6%, rgba(244, 209, 123, 0.16), transparent 26%),
    radial-gradient(circle at 85% 12%, rgba(93, 82, 45, 0.22), transparent 28%),
    linear-gradient(180deg, #050403 0%, #0c0905 42%, #171109 100%);
}

body:not(.login-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(245, 208, 122, 0.07), transparent 24%, rgba(255, 255, 255, 0.025) 46%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(245, 208, 122, 0.045) 0 1px, transparent 1px 120px);
  opacity: 0.55;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.7) 52%, transparent 100%);
}

body:not(.login-page) a {
  color: #f4d17b;
}

body:not(.login-page) .page-grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(245, 208, 122, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 208, 122, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
}

body:not(.login-page) .site-footer {
  border-color: rgba(245, 208, 122, 0.34);
  background:
    linear-gradient(180deg, rgba(25, 20, 11, 0.9), rgba(11, 9, 6, 0.86));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body:not(.login-page) .brand,
body:not(.login-page) .site-nav a,
body:not(.login-page) .link-button,
body:not(.login-page) .site-footer,
body:not(.login-page) .site-footer a {
  color: #fff8e8;
}

body:not(.login-page) .brand-name {
  color: #f4d17b;
}

body:not(.login-page) .site-nav {
  border-color: rgba(245, 208, 122, 0.18);
  background: rgba(255, 244, 210, 0.06);
}

body:not(.login-page) .site-nav a::after {
  background: linear-gradient(90deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .site-nav a:hover,
body:not(.login-page) .site-nav a:focus-visible,
body:not(.login-page) .link-button:hover,
body:not(.login-page) .link-button:focus-visible {
  background: rgba(245, 208, 122, 0.1);
}

body:not(.login-page) .button.primary,
body:not(.login-page) .nav-cta {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.48);
  background: linear-gradient(135deg, #8d6425 0%, #f0c96d 48%, #fff2bc 100%);
  box-shadow: 0 16px 34px rgba(217, 173, 85, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

body:not(.login-page) .site-nav a.nav-account-settings {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.48);
  background: linear-gradient(135deg, #8d6425 0%, #f0c96d 48%, #fff2bc 100%);
  box-shadow: 0 12px 28px rgba(217, 173, 85, 0.2);
}

body:not(.login-page) .site-nav a.nav-logout {
  color: #ffd7d2;
  border-color: rgba(255, 176, 168, 0.36);
  background: rgba(180, 35, 24, 0.16);
}

body:not(.login-page) .site-nav a.nav-logout:hover,
body:not(.login-page) .site-nav a.nav-logout:focus-visible {
  color: #fff;
  background: #b42318;
}

body:not(.login-page) .button.secondary {
  color: #f8e7b0;
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(245, 208, 122, 0.08);
}

body:not(.login-page) .button.secondary.light {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.38);
  background: rgba(5, 4, 3, 0.5);
}

body:not(.login-page) .button:hover,
body:not(.login-page) .nav-cta:hover,
body:not(.login-page) .tab-nav a:hover,
body:not(.login-page) .list-row:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46), 0 0 30px rgba(245, 208, 122, 0.1);
}

body:not(.login-page) .button:focus-visible,
body:not(.login-page) .nav-cta:focus-visible,
body:not(.login-page) .tab-nav a:focus-visible,
body:not(.login-page) a:focus-visible,
body:not(.login-page) input:focus-visible,
body:not(.login-page) select:focus-visible,
body:not(.login-page) textarea:focus-visible,
body:not(.login-page) button:focus-visible {
  outline-color: rgba(245, 208, 122, 0.5);
}

body:not(.login-page) .hero,
body:not(.login-page) .band,
body:not(.login-page) .workflow,
body:not(.login-page) .page-hero,
body:not(.login-page) .dashboard-head,
body:not(.login-page) .section-grid article,
body:not(.login-page) .panel,
body:not(.login-page) .price-card,
body:not(.login-page) .limit-card,
body:not(.login-page) .feature-status,
body:not(.login-page) .table-panel,
body:not(.login-page) .filter-bar,
body:not(.login-page) .result-card,
body:not(.login-page) .metric-grid article,
body:not(.login-page) .timeline-grid article {
  border-color: rgba(245, 208, 122, 0.24);
  background:
    linear-gradient(180deg, rgba(38, 31, 18, 0.9), rgba(13, 11, 7, 0.92));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body:not(.login-page) .hero,
body:not(.login-page) .page-hero,
body:not(.login-page) .dashboard-head {
  background:
    radial-gradient(circle at 86% 10%, rgba(245, 208, 122, 0.2), transparent 28%),
    linear-gradient(140deg, rgba(45, 34, 14, 0.96), rgba(8, 7, 5, 0.96) 62%, rgba(28, 20, 8, 0.98));
}

body:not(.login-page) .band,
body:not(.login-page) .workflow {
  background:
    linear-gradient(180deg, rgba(27, 22, 13, 0.92), rgba(8, 7, 5, 0.94)),
    linear-gradient(90deg, rgba(245, 208, 122, 0.08), transparent);
}

body:not(.login-page) .page-hero::before,
body:not(.login-page) .dashboard-head::before,
body:not(.login-page) .band::before,
body:not(.login-page) .workflow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(245, 208, 122, 0.2), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255, 244, 210, 0.045) 0 1px, transparent 1px 22px);
  opacity: 0.72;
}

body:not(.login-page) .hero-copy h1,
body:not(.login-page) .page-hero h1,
body:not(.login-page) .dashboard-head h1,
body:not(.login-page) .auth-story h1,
body:not(.login-page) .summary-heading h2,
body:not(.login-page) .section-intro h2 {
  font-family: var(--font-heading);
  color: #fff8e8;
  font-weight: 700;
  letter-spacing: -0.012em;
}

body:not(.login-page) .feature-banner h2,
body:not(.login-page) .panel h2,
body:not(.login-page) .price-card h2,
body:not(.login-page) .section-grid h3,
body:not(.login-page) .timeline-grid h3 {
  color: #f4d17b;
}

body:not(.login-page) .hero-copy p,
body:not(.login-page) .page-hero p,
body:not(.login-page) .dashboard-subtitle,
body:not(.login-page) .section-intro p,
body:not(.login-page) .feature-banner p:last-child,
body:not(.login-page) .auth-story p,
body:not(.login-page) .invite-intro,
body:not(.login-page) p {
  color: var(--muted);
}

body:not(.login-page) strong,
body:not(.login-page) h1,
body:not(.login-page) h2,
body:not(.login-page) h3,
body:not(.login-page) label,
body:not(.login-page) td {
  color: #fff8e8;
}

body:not(.login-page) .eyebrow,
body:not(.login-page) .small-label {
  color: #f4d17b;
}

body:not(.login-page) .hero-copy .eyebrow,
body:not(.login-page) .page-hero > .eyebrow,
body:not(.login-page) .dashboard-head .eyebrow,
body:not(.login-page) .pricing-note .eyebrow,
body:not(.login-page) .feature-banner .eyebrow,
body:not(.login-page) .auth-form .eyebrow {
  color: #f4d17b;
  background: transparent;
}

body:not(.login-page) .section-grid article::before,
body:not(.login-page) .price-card::before {
  background: linear-gradient(90deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .price {
  color: #fff2bc;
}

body:not(.login-page) .price-card {
  position: relative;
  overflow: hidden;
}

body:not(.login-page) .price-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.14), transparent 32%);
}

body:not(.login-page) .price-card > * {
  position: relative;
  z-index: 1;
}

body:not(.login-page) .badge,
body:not(.login-page) .price-badge,
body:not(.login-page) .status-chip {
  color: #100d07;
  border-color: rgba(255, 242, 188, 0.38);
  background: linear-gradient(135deg, #d9ad55, #fff2bc);
}

body:not(.login-page) .feature-banner {
  border-color: rgba(245, 208, 122, 0.2);
  background:
    linear-gradient(135deg, rgba(245, 208, 122, 0.12), rgba(70, 57, 30, 0.16)),
    rgba(10, 8, 5, 0.62);
}

body:not(.login-page) .feature-icon,
body:not(.login-page) .timeline-grid span {
  color: #100d07;
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .metric-grid span {
  color: #fff2bc;
}

body:not(.login-page) .metric-grid p,
body:not(.login-page) .helptext,
body:not(.login-page) small,
body:not(.login-page) .list-row span,
body:not(.login-page) .guest-summary span,
body:not(.login-page) th {
  color: var(--muted);
}

body:not(.login-page) .list-row,
body:not(.login-page) .tab-nav a {
  border-color: rgba(245, 208, 122, 0.18);
  background: rgba(255, 244, 210, 0.055);
}

body:not(.login-page) #id_package label {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.2);
  background: rgba(255, 244, 210, 0.055);
}

body:not(.login-page) #id_package label:has(input:checked) {
  border-color: rgba(245, 208, 122, 0.7);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.16), transparent 34%),
    rgba(245, 208, 122, 0.08);
}

body:not(.login-page) .limit-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(38, 31, 18, 0.88), rgba(13, 11, 7, 0.92));
}

body:not(.login-page) .limit-card strong {
  color: #fff2bc;
}

body:not(.login-page) .feature-status.included {
  border-color: rgba(158, 230, 180, 0.28);
  background: rgba(18, 55, 34, 0.38);
}

body:not(.login-page) .feature-status.locked {
  border-color: rgba(255, 180, 168, 0.26);
  background: rgba(59, 28, 20, 0.36);
}

body:not(.login-page) .feature-status.included span {
  color: #082015;
  background: #9ee6b4;
}

body:not(.login-page) .feature-status.locked span {
  color: #2c0b07;
  background: #ffb4a8;
}

body:not(.login-page) input,
body:not(.login-page) select,
body:not(.login-page) textarea {
  color: #fff8e8;
  -webkit-text-fill-color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(7, 6, 4, 0.82);
}

body:not(.login-page) p:has(.tz-phone-input)::before,
body:not(.login-page) .form-field:has(.tz-phone-input)::before {
  color: #0b0905;
  border-color: rgba(245, 208, 122, 0.38);
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) input::placeholder,
body:not(.login-page) textarea::placeholder {
  color: rgba(201, 185, 143, 0.68);
  -webkit-text-fill-color: rgba(201, 185, 143, 0.68);
}

body:not(.login-page) input:hover,
body:not(.login-page) select:hover,
body:not(.login-page) textarea:hover,
body:not(.login-page) input:focus-visible,
body:not(.login-page) select:focus-visible,
body:not(.login-page) textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.58);
  box-shadow: 0 0 0 6px rgba(245, 208, 122, 0.08);
}

body:not(.login-page) th,
body:not(.login-page) td {
  border-bottom-color: rgba(245, 208, 122, 0.16);
}

body:not(.login-page) th {
  background: linear-gradient(90deg, rgba(245, 208, 122, 0.12), rgba(245, 208, 122, 0.035));
}

body:not(.login-page) tbody tr:hover td {
  background: rgba(245, 208, 122, 0.055);
}

body:not(.login-page) code {
  color: #fff2bc;
  background: rgba(245, 208, 122, 0.12);
}

body:not(.login-page) .message {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.3);
  background: rgba(34, 29, 18, 0.94);
}

body:not(.login-page) .form-error-summary {
  color: #ffb4a8;
  border-color: rgba(255, 180, 168, 0.32);
  background: rgba(59, 28, 20, 0.42);
}

body:not(.login-page) .form-error-summary strong,
body:not(.login-page) .form-error-summary p {
  color: #ffb4a8;
}

body:not(.login-page) .required-marker {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.38);
  background: linear-gradient(135deg, #d9ad55, #fff2bc);
}

body:not(.login-page) .result-card.success {
  border-color: rgba(158, 230, 180, 0.45);
  background: rgba(14, 44, 29, 0.84);
}

body:not(.login-page) .result-card.warning {
  border-color: rgba(255, 180, 168, 0.45);
  background: rgba(56, 19, 17, 0.84);
}

body:not(.login-page) .scanner-box {
  border: 1px solid rgba(245, 208, 122, 0.24);
  background: #050403;
}

body:not(.login-page) .public-invite .panel.form-shell {
  background: var(--surface-strong);
}

body:not(.login-page) .auth-story {
  border-color: rgba(245, 208, 122, 0.24);
  background:
    radial-gradient(circle at top right, rgba(245, 208, 122, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(38, 31, 18, 0.94), rgba(9, 8, 5, 0.96));
}

body:not(.login-page) .settings-menu-button,
body:not(.login-page) .settings-section-card,
body:not(.login-page) .settings-detail-card,
body:not(.login-page) .settings-password-row,
body:not(.login-page) .settings-toggle-row,
body:not(.login-page) .device-card {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(31, 25, 14, 0.9), rgba(9, 8, 5, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body:not(.login-page) .settings-menu-button:hover,
body:not(.login-page) .settings-menu-button:focus-visible {
  border-color: rgba(245, 208, 122, 0.62);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.2), transparent 36%),
    linear-gradient(180deg, rgba(45, 34, 14, 0.94), rgba(11, 9, 6, 0.94));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 30px rgba(245, 208, 122, 0.1);
}

body:not(.login-page) .settings-menu-button strong,
body:not(.login-page) .settings-section-heading h1,
body:not(.login-page) .logout-card h1 {
  color: #f4d17b;
}

body:not(.login-page) .settings-menu-button span,
body:not(.login-page) .settings-section-heading p,
body:not(.login-page) .logout-copy,
body:not(.login-page) .settings-password-row small,
body:not(.login-page) .settings-toggle-row small {
  color: var(--muted);
}

body:not(.login-page) .settings-avatar,
body:not(.login-page) .settings-section-icon {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.46);
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.46), transparent 35%),
    linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .auth-points span,
body:not(.login-page) .hero-points span,
body:not(.login-page) .hero-note {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.22);
  background: rgba(245, 208, 122, 0.08);
}

body:not(.login-page) .showcase-frame {
  background:
    linear-gradient(145deg, #0d0a05 0%, #3c2d12 46%, #d9ad55 100%);
}

body:not(.login-page) .showcase-card {
  border-color: rgba(245, 208, 122, 0.28);
  background: linear-gradient(180deg, rgba(23, 18, 9, 0.9), rgba(5, 4, 3, 0.94));
}

body:not(.login-page) .home-summary {
  color: #fff8e8;
  background:
    radial-gradient(circle at 10% 0%, rgba(245, 208, 122, 0.14), transparent 26%),
    linear-gradient(180deg, #080705, #171109);
}

body:not(.login-page) .editorial-band {
  background: transparent;
}

body:not(.login-page) .summary-list,
body:not(.login-page) .summary-list article {
  border-color: rgba(245, 208, 122, 0.2);
}

body:not(.login-page) .summary-list p,
body:not(.login-page) .summary-list span,
body:not(.login-page) .home-summary .eyebrow {
  color: var(--muted);
}

/* Refined global navigation */

.desktop-nav {
  justify-self: center;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 4px;
  border-radius: 16px;
}

.desktop-nav .nav-link {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.desktop-nav .nav-link::after {
  left: 12px;
  right: 12px;
  bottom: 6px;
}

.navbar-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-menu {
  position: relative;
}

.account-trigger,
.mobile-menu-trigger {
  border: 1px solid var(--border);
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 84%, transparent);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 5px 10px 5px 6px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 900;
}

.account-avatar {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  color: var(--primary-foreground);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-size: 0.82rem;
  font-weight: 900;
}

.menu-chevron {
  font-size: 0.75rem;
  opacity: 0.72;
}

.account-dropdown,
.mobile-nav-panel {
  border: 1px solid var(--border);
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
  backdrop-filter: blur(22px) saturate(1.16);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: calc(var(--nav-z) + 2);
  width: min(310px, calc(100vw - 28px));
  padding: 12px;
  border-radius: 20px;
}

.dropdown-link,
.mobile-nav-links a,
.mobile-logout {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--foreground);
  font-family: var(--font-body);
  font-weight: 800;
}

.dropdown-link:hover,
.dropdown-link:focus-visible,
.mobile-nav-links a:hover,
.mobile-nav-links a:focus-visible,
.mobile-logout:hover,
.mobile-logout:focus-visible,
.account-trigger:hover,
.account-trigger:focus-visible,
.mobile-menu-trigger:hover,
.mobile-menu-trigger:focus-visible {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.dropdown-link-strong {
  color: var(--primary-foreground);
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.dropdown-link-danger,
.mobile-logout {
  color: var(--red);
}

.dropdown-divider {
  height: 1px;
  margin: 10px 0;
  background: var(--border);
}

.dropdown-label {
  margin: 0 0 8px;
  padding: 0 4px;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-preference {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.nav-preference .theme-select,
.nav-preference .language-select {
  width: 100%;
  max-width: none;
  min-height: 42px;
  border-radius: 12px;
  box-shadow: none;
}

.mobile-menu-trigger {
  display: none;
  justify-self: end;
  width: 44px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  border-radius: 14px;
}

.mobile-menu-trigger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.mobile-nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: calc(var(--nav-z) + 1);
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
}

.mobile-nav-links,
.mobile-preferences {
  display: grid;
  gap: 8px;
}

.mobile-nav-links a {
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-strong) 58%, transparent);
}

.mobile-logout {
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
  background: color-mix(in srgb, var(--red) 9%, transparent);
}

body.mobile-nav-open {
  overflow-x: hidden;
}

body:not(.login-page) .account-trigger,
body:not(.login-page) .mobile-menu-trigger {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(255, 244, 210, 0.07);
}

body:not(.login-page) .account-avatar,
body:not(.login-page) .dropdown-link-strong {
  color: #0b0905;
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .account-dropdown,
body:not(.login-page) .mobile-nav-panel {
  border-color: rgba(245, 208, 122, 0.32);
  background:
    linear-gradient(180deg, rgba(25, 20, 11, 0.96), rgba(8, 7, 5, 0.94));
}

body:not(.login-page) .dropdown-link,
body:not(.login-page) .mobile-nav-links a,
body:not(.login-page) .mobile-logout,
body:not(.login-page) .nav-preference {
  color: #fff8e8;
}

body:not(.login-page) .dropdown-label {
  color: #c9b98f;
}

@media (min-width: 921px) {
  .mobile-nav-panel {
    display: none !important;
  }
}

@media (max-width: 920px) {

  .desktop-nav,
.navbar-actions {
    display: none;
  }

  .mobile-menu-trigger {
    display: inline-flex;
  }

}

@media (max-width: 540px) {

  .mobile-nav-panel {
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Final navbar information architecture cleanup */

.desktop-nav {
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  justify-self: center;
}

.desktop-nav .nav-link {
  min-height: 36px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 0.84rem;
}

.navbar-actions {
  min-width: 0;
}

.account-trigger {
  min-height: 39px;
  padding: 4px 9px 4px 5px;
  border-radius: 12px;
  font-size: 0.84rem;
}

.account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.menu-chevron {
  position: relative;
  width: 10px;
  height: 10px;
  font-size: 0;
}

.menu-chevron::before {
  content: "";
  position: absolute;
  inset: 1px 2px 3px 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.72;
}

.account-trigger[aria-expanded="true"] .menu-chevron::before {
  transform: translateY(2px) rotate(225deg);
}

.account-dropdown {
  border-radius: 16px;
}

.dropdown-link,
.mobile-nav-links a,
.mobile-logout {
  min-height: 46px;
  border-radius: 10px;
}

.nav-preference .theme-select,
.nav-preference .language-select {
  min-height: 44px;
  border-radius: 10px;
}

@media (max-width: 920px) {

  .mobile-menu-trigger {
    display: inline-flex;
    width: 42px;
    height: 40px;
    border-radius: 11px;
    box-shadow: none;
  }

  .mobile-nav-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100dvh - 88px);
    padding: 10px;
    border-radius: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-nav-links,
  .mobile-preferences {
    gap: 7px;
  }

  .mobile-nav-links a,
  .mobile-logout {
    min-height: 48px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 0.94rem;
  }

  .nav-preference {
    margin-top: 8px;
  }
}

@media (max-width: 430px) {

  .mobile-menu-trigger {
    width: 40px;
    height: 38px;
  }

  .mobile-nav-panel {
    left: 8px;
    right: 8px;
    top: calc(env(safe-area-inset-top, 0px) + 68px);
    max-height: calc(100dvh - 82px);
  }
}

/* Mobile navbar drawer repair */
.mobile-nav-backdrop {
  display: none;
}

.mobile-nav-backdrop[hidden],
.mobile-nav-panel[hidden] {
  display: none !important;
}

@media (max-width: 920px) {
  body.mobile-nav-open {
    overflow: hidden;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--nav-z) - 1);
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.58);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    cursor: default;
  }

  .mobile-nav-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: calc(var(--nav-z) + 2);
    width: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px;
    border-color: rgba(245, 208, 122, 0.26);
    background:
      linear-gradient(180deg, rgba(15, 12, 7, 0.99), rgba(7, 6, 4, 0.99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 244, 210, 0.08);
    scrollbar-width: none;
  }

  .mobile-nav-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .mobile-nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-nav-links a,
  .mobile-logout {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(245, 208, 122, 0.16);
    color: #fff8e8;
    background: rgba(255, 244, 210, 0.055);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.15;
  }

  .mobile-nav-links a:hover,
  .mobile-nav-links a:focus-visible,
  .mobile-logout:hover,
  .mobile-logout:focus-visible {
    background: rgba(245, 208, 122, 0.12);
  }

  .mobile-preferences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(245, 208, 122, 0.16);
  }

  .mobile-preferences .nav-preference {
    margin: 0;
    gap: 6px;
  }

  .mobile-preferences .nav-preference span {
    color: #f4d17b;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .mobile-preferences .theme-select,
  .mobile-preferences .language-select {
    min-height: 42px;
    padding-left: 10px;
    padding-right: 28px;
    border-radius: 11px;
    border-color: rgba(245, 208, 122, 0.22);
    color: #fff8e8;
    background: rgba(5, 4, 3, 0.96);
    font-size: 0.82rem;
  }

  .mobile-logout {
    justify-content: center;
    width: 100%;
    margin-top: 0;
    border-color: rgba(255, 180, 168, 0.28);
    color: #ffd7d2;
    background: rgba(180, 35, 24, 0.14);
  }

  .mobile-menu-trigger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-menu-trigger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-trigger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .mobile-menu-trigger span {
    transition: transform 180ms ease, opacity 180ms ease;
  }
}

@media (max-width: 430px) {
  .mobile-nav-panel {
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    left: 7px;
    right: 7px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    padding: 10px;
    border-radius: 16px;
  }

  .mobile-nav-links {
    gap: 7px;
  }

  .mobile-nav-links a,
  .mobile-logout {
    min-height: 42px;
    padding: 0 10px;
    font-size: 0.84rem;
  }

  .mobile-preferences {
    gap: 8px;
  }

  .mobile-preferences .theme-select,
  .mobile-preferences .language-select {
    min-height: 40px;
    font-size: 0.78rem;
  }
}

/* Legacy navbar fallback kept in normal document flow. */

body:not(.home-page) .page-main {
  padding-top: 0;
}

body:not(.home-page) .messages {
  margin-top: 16px;
}

.home-page .video-hero {
  margin-top: 0;
}

@media (max-width: 920px) {

  body:not(.home-page) .page-main {
    padding-top: 0;
  }

  body:not(.home-page) .messages {
    margin-top: 12px;
  }
}

/* Legacy header fallback. Do not pin it to the viewport. */

/* Phone navigation as an off-canvas sidebar. */
@media (max-width: 920px) {
  .mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: calc(var(--nav-z) + 1) !important;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.58);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }

  .mobile-nav-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: calc(var(--nav-z) + 2) !important;
    width: 50vw !important;
    min-width: 0 !important;
    max-width: 50vw !important;
    max-height: none !important;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: rgba(245, 208, 122, 0.28);
    border-radius: 24px 0 0 24px;
    background:
      radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.12), transparent 34%),
      linear-gradient(180deg, rgba(15, 12, 7, 0.995), rgba(7, 6, 4, 0.995));
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.58), inset 1px 0 0 rgba(255, 244, 210, 0.08);
    scrollbar-width: none;
    animation: nav-sidebar-in 220ms ease-out both;
  }

  .mobile-nav-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .mobile-nav-links,
  .mobile-preferences {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .mobile-nav-links a,
  .mobile-logout {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 13px;
    font-size: 0.92rem;
    justify-content: flex-start;
  }

  .mobile-preferences {
    padding-top: 12px;
    border-top: 1px solid rgba(245, 208, 122, 0.16);
  }

  .mobile-preferences .theme-select,
  .mobile-preferences .language-select {
    min-height: 44px;
  }

}

@keyframes nav-sidebar-in {
  from {
    transform: translateX(104%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-panel {
    animation: none !important;
  }
}

/* Clean flow top menu. This replaces the old fixed site-header/site-navbar stack. */
.top-menu-bar,
.top-menu-bar * {
  box-sizing: border-box;
}

.top-menu-bar {
  position: relative !important;
  z-index: 1000 !important;
  width: min(1180px, calc(100% - 32px));
  min-height: 62px;
  margin: calc(env(safe-area-inset-top, 0px) + 8px) auto 0 !important;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  border: 1px solid rgba(245, 208, 122, 0.34);
  border-radius: 18px;
  color: #fff8e8;
  background: linear-gradient(180deg, rgba(25, 20, 11, 0.96), rgba(8, 7, 5, 0.94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 244, 210, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  overflow: visible;
}

.top-menu-bar .brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f4d17b;
}

.top-menu-bar .brand-logo {
  width: auto;
  height: 38px;
  flex: 0 0 auto;
}

.top-menu-bar .brand-name {
  max-width: 260px;
  overflow: hidden;
  color: #f4d17b;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-menu-bar .desktop-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(245, 208, 122, 0.18);
  border-radius: 14px;
  background: rgba(255, 244, 210, 0.06);
}

.top-menu-bar .desktop-nav a {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  color: #fff8e8;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.top-menu-bar .desktop-nav a:hover,
.top-menu-bar .desktop-nav a:focus-visible {
  background: rgba(245, 208, 122, 0.12);
}

.top-menu-bar .navbar-actions {
  justify-self: end;
  display: flex;
  align-items: center;
}

.top-menu-bar .account-menu {
  position: relative;
}

.top-menu-bar .account-trigger,
.top-menu-bar .mobile-menu-trigger {
  border: 1px solid rgba(245, 208, 122, 0.3);
  color: #fff8e8;
  background: rgba(255, 244, 210, 0.07);
  box-shadow: none;
}

.top-menu-bar .account-trigger {
  min-height: 40px;
  padding: 5px 10px 5px 6px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 13px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 900;
}

.top-menu-bar .account-avatar {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  color: #0b0905;
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

.top-menu-bar .menu-chevron {
  position: relative;
  width: 10px;
  height: 10px;
  font-size: 0;
}

.top-menu-bar .menu-chevron::before {
  content: "";
  position: absolute;
  inset: 1px 2px 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.72;
  transform: rotate(45deg);
}

.top-menu-bar .account-trigger[aria-expanded="true"] .menu-chevron::before {
  transform: translateY(2px) rotate(225deg);
}

.top-menu-bar .account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1002;
  width: min(310px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid rgba(245, 208, 122, 0.3);
  border-radius: 18px;
  color: #fff8e8;
  background: linear-gradient(180deg, rgba(25, 20, 11, 0.98), rgba(8, 7, 5, 0.96));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 244, 210, 0.08);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.top-menu-bar .dropdown-link,
.top-menu-bar .mobile-nav-links a,
.top-menu-bar .mobile-logout {
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  color: #fff8e8;
  font-weight: 900;
}

.top-menu-bar .dropdown-link:hover,
.top-menu-bar .dropdown-link:focus-visible {
  background: rgba(245, 208, 122, 0.12);
}

.top-menu-bar .dropdown-link-strong {
  color: #0b0905;
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

.top-menu-bar .dropdown-link-danger {
  color: #ffd7d2;
}

.top-menu-bar .dropdown-divider {
  height: 1px;
  margin: 10px 0;
  background: rgba(245, 208, 122, 0.2);
}

.top-menu-bar .dropdown-label {
  margin: 0 0 8px;
  color: #c9b98f;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.top-menu-bar .nav-preference {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  color: #fff8e8;
  font-size: 0.82rem;
  font-weight: 900;
}

.top-menu-bar .theme-select,
.top-menu-bar .language-select {
  width: 100%;
  max-width: none;
  min-height: 42px;
  border-radius: 11px;
  border-color: rgba(245, 208, 122, 0.24);
  color: #fff8e8;
  background: rgba(5, 4, 3, 0.96);
  box-shadow: none;
}

.top-menu-bar .mobile-menu-trigger,
.top-menu-bar .mobile-nav-backdrop {
  display: none;
}

.page-main {
  min-height: calc(100vh - 150px);
  position: relative;
  z-index: 1;
}

body:not(.home-page) .page-main {
  padding-top: 0;
}

body:not(.home-page) .messages {
  margin-top: 16px;
}

.home-page .video-hero {
  margin-top: 0;
}

@media (max-width: 920px) {
  .top-menu-bar {
    width: min(520px, calc(100% - 16px)) !important;
    min-height: 56px;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 15px;
  }

  .top-menu-bar .desktop-nav,
  .top-menu-bar .navbar-actions {
    display: none !important;
  }

  .top-menu-bar .brand {
    width: auto;
    min-width: 0;
    gap: 8px;
  }

  .top-menu-bar .brand-logo {
    height: 32px;
  }

  .top-menu-bar .brand-name {
    max-width: calc(100vw - 118px);
    font-size: 0.86rem;
  }

  .top-menu-bar .mobile-menu-trigger {
    width: 42px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    flex-direction: column;
    gap: 4px;
    border-radius: 11px;
  }

  .top-menu-bar .mobile-menu-trigger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .top-menu-bar .mobile-menu-trigger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .top-menu-bar .mobile-menu-trigger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .top-menu-bar .mobile-menu-trigger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .top-menu-bar .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.58);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }

  .top-menu-bar .mobile-nav-backdrop[hidden],
  .top-menu-bar .mobile-nav-panel[hidden] {
    display: none !important;
  }

  .top-menu-bar .mobile-nav-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 1002 !important;
    width: 50vw !important;
    min-width: 0 !important;
    max-width: 50vw !important;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: rgba(245, 208, 122, 0.28);
    border-radius: 24px 0 0 24px;
    background:
      radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.12), transparent 34%),
      linear-gradient(180deg, rgba(15, 12, 7, 0.995), rgba(7, 6, 4, 0.995));
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.58), inset 1px 0 0 rgba(255, 244, 210, 0.08);
    animation: nav-sidebar-in 220ms ease-out both;
  }

  .top-menu-bar .mobile-nav-links,
  .top-menu-bar .mobile-preferences {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .top-menu-bar .mobile-nav-links a,
  .top-menu-bar .mobile-logout {
    min-height: 46px;
    border: 1px solid rgba(245, 208, 122, 0.16);
    background: rgba(255, 244, 210, 0.055);
  }

  .top-menu-bar .mobile-preferences {
    padding-top: 12px;
    border-top: 1px solid rgba(245, 208, 122, 0.16);
  }

  body:not(.home-page) .page-main {
    padding-top: 0;
  }

  body:not(.home-page) .messages {
    margin-top: 12px;
  }

}

/* Home page: let the video hero sit behind the menu bar. */
html[data-theme] body.home-page {
  --home-nav-overlap: calc(env(safe-area-inset-top, 0px) + 78px);
}

html[data-theme] body.home-page .page-main {
  margin-top: calc(var(--home-nav-overlap) * -1);
}

html[data-theme] body.home-page .video-hero {
  margin-top: 0 !important;
  min-height: 100dvh !important;
  height: 100dvh;
  padding-top: var(--home-nav-overlap) !important;
}

html[data-theme] body.home-page .video-hero-media,
html[data-theme] body.home-page .video-hero-media.is-autoplay-managed {
  display: block;
  visibility: visible;
  opacity: 1;
}

html[data-theme] body.home-page .video-hero-content {
  top: calc(var(--home-nav-overlap) + clamp(14px, 4svh, 42px)) !important;
}

html[data-theme] body.home-page .top-menu-bar.top-menu-bar {
  border-color: rgba(245, 208, 122, 0.34);
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(12, 10, 6, 0.42), rgba(8, 7, 5, 0.28));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 244, 210, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

html[data-theme] body.home-page .top-menu-bar .brand,
html[data-theme] body.home-page .top-menu-bar .brand-name,
html[data-theme] body.home-page .top-menu-bar .desktop-nav a,
html[data-theme] body.home-page .top-menu-bar .dropdown-link,
html[data-theme] body.home-page .top-menu-bar .nav-preference {
  color: #fff8e8;
}

html[data-theme] body.home-page .top-menu-bar .desktop-nav,
html[data-theme] body.home-page .top-menu-bar .account-trigger {
  border-color: rgba(245, 208, 122, 0.22);
  background: rgba(255, 244, 210, 0.08);
}

html[data-theme] body.home-page .top-menu-bar .account-dropdown,
html[data-theme] body.home-page .top-menu-bar .mobile-nav-panel {
  border-color: rgba(245, 208, 122, 0.3);
  color: #fff8e8;
  background:
    radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 12, 7, 0.985), rgba(7, 6, 4, 0.985));
}

html[data-theme] body.home-page .top-menu-bar .theme-select,
html[data-theme] body.home-page .top-menu-bar .language-select {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.24);
  background: rgba(5, 4, 3, 0.96);
}

@media (max-width: 920px) {
  html[data-theme] body.home-page {
    --home-nav-overlap: calc(env(safe-area-inset-top, 0px) + 66px);
  }

  html[data-theme] body.home-page .video-hero-content {
    top: calc(var(--home-nav-overlap) + 12px) !important;
  }
}

/* Login page theme parity. The main theme blocks intentionally skip .login-page. */
body.login-page {
  --bg: #080705;
  --surface: rgba(23, 20, 14, 0.86);
  --surface-strong: rgba(34, 29, 18, 0.94);
  --surface-dark: #090806;
  --surface-dark-2: #17130d;
  --ink: #fff8e8;
  --muted: #c9b98f;
  --line: rgba(213, 175, 92, 0.22);
  --line-strong: rgba(245, 208, 122, 0.36);
  --blue: #d9ad55;
  --blue-deep: #f4d17b;
  --green: #b88a3c;
  --green-deep: #d9ad55;
  --sky: rgba(244, 209, 123, 0.14);
  --mint: rgba(70, 82, 47, 0.22);
  --red: #ffb4a8;
  --success: #9ee6b4;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.36);
  --background: #080705;
  --foreground: #fff8e8;
  --card: rgba(23, 20, 14, 0.86);
  --card-foreground: #fff8e8;
  --primary: #d9ad55;
  --primary-foreground: #0b0905;
  --secondary: #b88a3c;
  --accent: #f5d07a;
  --border: rgba(245, 208, 122, 0.24);
  --muted-foreground: #c9b98f;
  --gradient-start: #050403;
  --gradient-end: #171109;
  color: var(--foreground);
  background:
    radial-gradient(circle at 18% 6%, rgba(244, 209, 123, 0.16), transparent 26%),
    radial-gradient(circle at 85% 12%, rgba(93, 82, 45, 0.22), transparent 28%),
    linear-gradient(180deg, #050403 0%, #0c0905 42%, #171109 100%);
}

body.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(245, 208, 122, 0.07), transparent 24%, rgba(255, 255, 255, 0.025) 46%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(245, 208, 122, 0.045) 0 1px, transparent 1px 120px);
  opacity: 0.55;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.7) 52%, transparent 100%);
}

body.login-page a {
  color: #f4d17b;
}

body.login-page .page-grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(245, 208, 122, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 208, 122, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
}

body.login-page .site-footer {
  border-color: rgba(245, 208, 122, 0.34);
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(25, 20, 11, 0.9), rgba(11, 9, 6, 0.86));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body.login-page .site-footer a,
body.login-page .site-footer p {
  color: #c9b98f;
}

body.login-page .login-auth-shell {
  color: #fff8e8;
}

body.login-page .auth-form {
  border-color: rgba(245, 208, 122, 0.26);
  color: #fff8e8;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(38, 31, 18, 0.92), rgba(13, 11, 7, 0.94));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body.login-page .auth-form h2 {
  color: #fff8e8;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 0.95;
}

body.login-page .auth-form label,
body.login-page .auth-form p {
  color: #c9b98f;
}

body.login-page .login-eyebrow {
  color: #f4d17b;
  border-color: rgba(245, 208, 122, 0.24);
  background: rgba(245, 208, 122, 0.1);
}

body.login-page .login-eyebrow span + span::before {
  color: rgba(201, 185, 143, 0.7);
}

body.login-page input,
body.login-page select,
body.login-page textarea {
  color: #fff8e8;
  -webkit-text-fill-color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.26);
  background: rgba(7, 6, 4, 0.82);
  color-scheme: dark;
}

body.login-page input::placeholder,
body.login-page textarea::placeholder {
  color: rgba(201, 185, 143, 0.72);
  -webkit-text-fill-color: rgba(201, 185, 143, 0.72);
}

body.login-page input:hover,
body.login-page select:hover,
body.login-page textarea:hover,
body.login-page input:focus-visible,
body.login-page select:focus-visible,
body.login-page textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.52);
  box-shadow: 0 0 0 6px rgba(245, 208, 122, 0.12);
}

body.login-page .button.primary {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.48);
  background: linear-gradient(135deg, #8d6425 0%, #f0c96d 48%, #fff2bc 100%);
  box-shadow: 0 16px 34px rgba(217, 173, 85, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

body.login-page .message,
body.login-page .errorlist {
  color: #ffd7d2;
  border-color: rgba(255, 176, 168, 0.32);
  background: rgba(180, 35, 24, 0.14);
}

html[data-theme="noir"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="noir"] body.login-page .auth-form select,
html[data-theme="noir"] body.login-page .auth-form textarea,
html[data-theme="noir"] .auth-shell .form-shell input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="noir"] .auth-shell .form-shell select,
html[data-theme="noir"] .auth-shell .form-shell textarea {
  color: #fff8e8;
  -webkit-text-fill-color: #fff8e8;
  caret-color: #f5d07a;
  border-color: rgba(245, 208, 122, 0.32);
  background: rgba(7, 6, 4, 0.9);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}

html[data-theme="noir"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]):hover,
html[data-theme="noir"] body.login-page .auth-form select:hover,
html[data-theme="noir"] body.login-page .auth-form textarea:hover,
html[data-theme="noir"] .auth-shell .form-shell input:not([type="radio"]):not([type="checkbox"]):hover,
html[data-theme="noir"] .auth-shell .form-shell select:hover,
html[data-theme="noir"] .auth-shell .form-shell textarea:hover {
  border-color: rgba(245, 208, 122, 0.48);
}

html[data-theme="noir"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]):focus-visible,
html[data-theme="noir"] body.login-page .auth-form select:focus-visible,
html[data-theme="noir"] body.login-page .auth-form textarea:focus-visible,
html[data-theme="noir"] .auth-shell .form-shell input:not([type="radio"]):not([type="checkbox"]):focus-visible,
html[data-theme="noir"] .auth-shell .form-shell select:focus-visible,
html[data-theme="noir"] .auth-shell .form-shell textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.64);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.12), inset 0 1px 4px rgba(0, 0, 0, 0.38);
}

html[data-theme="noir"] body.login-page .auth-form input::placeholder,
html[data-theme="noir"] body.login-page .auth-form textarea::placeholder,
html[data-theme="noir"] .auth-shell .form-shell input::placeholder,
html[data-theme="noir"] .auth-shell .form-shell textarea::placeholder {
  color: rgba(201, 185, 143, 0.72);
  -webkit-text-fill-color: rgba(201, 185, 143, 0.72);
}

html[data-theme="noir"] body.login-page .auth-form input:-webkit-autofill,
html[data-theme="noir"] body.login-page .auth-form input:-webkit-autofill:hover,
html[data-theme="noir"] body.login-page .auth-form input:-webkit-autofill:focus,
html[data-theme="noir"] .auth-shell .form-shell input:-webkit-autofill,
html[data-theme="noir"] .auth-shell .form-shell input:-webkit-autofill:hover,
html[data-theme="noir"] .auth-shell .form-shell input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff8e8;
  -webkit-box-shadow: 0 0 0 1000px rgba(7, 6, 4, 0.94) inset;
  caret-color: #f5d07a;
}

.contact-action-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.contact-choice {
  position: relative;
}

.contact-choice summary {
  list-style: none;
  user-select: none;
}

.contact-choice summary::-webkit-details-marker {
  display: none;
}

.contact-choice-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  min-width: 180px;
  padding: 8px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.contact-choice-panel a {
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  color: var(--foreground);
  font-weight: 800;
}

.contact-choice-panel a:hover,
.contact-choice-panel a:focus-visible {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

@media (max-width: 540px) {
  .contact-action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .contact-action-row .button,
  .contact-choice summary {
    width: 100%;
  }

  .contact-choice-panel {
    position: static;
    margin-top: 8px;
  }
}

body.contact-page .page-main {
  min-height: 0 !important;
  overflow: visible;
}

body.contact-page .page-hero {
  overflow: visible;
  z-index: 5;
}

body.contact-page .contact-choice[open] {
  z-index: 30;
}

body.contact-page .site-footer {
  margin-top: clamp(14px, 2vw, 22px);
}

@media (max-width: 540px) {
  body.contact-page .site-footer {
    width: min(100%, calc(100% - 18px));
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  body.contact-page .site-footer nav {
    flex-wrap: wrap;
  }
}

.nav-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.top-menu-bar .nav-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-menu-bar .desktop-nav a,
.top-menu-bar .dropdown-link,
.top-menu-bar .mobile-nav-links a,
.top-menu-bar .mobile-logout,
.top-menu-bar .account-trigger {
  gap: 8px;
}

.top-menu-bar .desktop-nav a .nav-icon {
  width: 0.96rem;
  height: 0.96rem;
  opacity: 0.9;
}

.top-menu-bar .account-avatar .nav-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.15;
}

.top-menu-bar .dropdown-link .nav-icon,
.top-menu-bar .mobile-nav-links a .nav-icon,
.top-menu-bar .mobile-logout .nav-icon {
  width: 1.02rem;
  height: 1.02rem;
  opacity: 0.92;
}

.top-menu-bar .dropdown-label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.top-menu-bar .dropdown-label .nav-icon {
  width: 0.88rem;
  height: 0.88rem;
  opacity: 0.86;
}

.top-menu-bar .nav-preference-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.top-menu-bar .nav-preference-label .nav-icon {
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.9;
}

@media (max-width: 920px) {
  .top-menu-bar .mobile-nav-links a,
  .top-menu-bar .mobile-logout {
    justify-content: flex-start;
  }

  .top-menu-bar .mobile-preferences .nav-preference-label {
    justify-content: flex-start;
  }
}

.footer-cookie-button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.footer-cookie-button:hover,
.footer-cookie-button:focus-visible {
  color: var(--primary);
}

.cookie-consent {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1200;
  width: min(680px, calc(100vw - 32px));
  transition: opacity 180ms ease, transform 180ms ease;
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent.is-hiding {
  opacity: 0;
  transform: translateY(10px);
}

.cookie-consent-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(245, 208, 122, 0.28);
  border-radius: 24px;
  color: #fff8e8;
  background:
    radial-gradient(circle at 96% 0%, rgba(245, 208, 122, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(25, 20, 11, 0.98), rgba(8, 7, 5, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 244, 210, 0.1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.cookie-consent-copy h2,
.cookie-consent-copy p {
  margin: 0;
}

.cookie-consent-copy h2 {
  color: #f4d17b;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.cookie-consent-copy p:last-child {
  margin-top: 8px;
  color: #c9b98f;
}

.cookie-consent-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cookie-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(245, 208, 122, 0.18);
  border-radius: 16px;
  background: rgba(255, 244, 210, 0.055);
}

.cookie-option input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  border: 1.5px solid rgba(245, 208, 122, 0.46);
  border-radius: 6px;
  background: rgba(5, 4, 3, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.08);
  cursor: pointer;
}

.cookie-option input::before {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #100d07;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease;
}

.cookie-option input:checked {
  border-color: #f4d17b;
  background: linear-gradient(135deg, #d9ad55, #fff2bc);
}

.cookie-option input:checked::before {
  transform: rotate(45deg) scale(1);
}

.cookie-option input:focus-visible {
  outline: 3px solid rgba(245, 208, 122, 0.28);
  outline-offset: 2px;
}

.cookie-option input:disabled {
  cursor: not-allowed;
  opacity: 0.86;
}

.cookie-option strong,
.cookie-option small {
  display: block;
}

.cookie-option small {
  margin-top: 4px;
  color: #c9b98f;
  line-height: 1.45;
}

.cookie-option.is-essential {
  border-color: rgba(245, 208, 122, 0.34);
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.cookie-consent-actions .button {
  min-height: 42px;
}

@media (max-width: 720px) {
  .cookie-consent {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }

  .cookie-consent-options {
    grid-template-columns: 1fr;
  }

  .cookie-consent-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cookie-consent-actions .button {
    width: 100%;
  }
}

body:not(.login-page) .about-brand-card {
  background: transparent;
  box-shadow: none;
}

body:not(.login-page) .about-story-intro,
body:not(.login-page) .about-columns,
body:not(.login-page) .about-workflow-note,
body:not(.login-page) .about-founder-note {
  border-color: rgba(245, 208, 122, 0.18);
}

body:not(.login-page) .about-brand-card strong,
body:not(.login-page) .about-story-intro h2,
body:not(.login-page) .about-mission-grid h3,
body:not(.login-page) .about-columns h3,
body:not(.login-page) .about-workflow-note span {
  color: #f4d17b;
}

body:not(.login-page) .about-mission-grid article::before,
body:not(.login-page) .about-columns article::before {
  background: linear-gradient(90deg, #8d6425, #f5d07a, #fff2bc);
}

@media (max-width: 920px) {
  .about-frame-top,
  .about-story-intro,
  .about-mission-grid,
  .about-columns,
  .about-workflow-note {
    grid-template-columns: 1fr;
  }

  .about-brand-card {
    justify-self: stretch;
  }
}

@media (max-width: 920px) {
  .top-menu-bar .mobile-nav-panel,
  .mobile-nav-panel {
    right: 0 !important;
    left: auto !important;
    width: 50vw !important;
    min-width: 0 !important;
    max-width: 50vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .top-menu-bar .mobile-nav-links,
  .top-menu-bar .mobile-preferences,
  .mobile-nav-links,
  .mobile-preferences {
    min-width: 0 !important;
  }

  .top-menu-bar .mobile-nav-links a,
  .top-menu-bar .mobile-logout,
  .mobile-nav-links a,
  .mobile-logout {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .top-menu-bar .mobile-nav-links a span,
  .top-menu-bar .mobile-logout span,
  .mobile-nav-links a span,
  .mobile-logout span,
  .top-menu-bar .nav-preference,
  .top-menu-bar .nav-preference-label,
  .top-menu-bar .theme-select,
  .top-menu-bar .language-select {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM THEME LAYER  ·  Ventiqa
   Luxury UI refinements for Noir
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared luxury hover lift & easing ── */
.section-grid article,
.panel,
.price-card,
.result-card,
.metric-grid article,
.timeline-grid article,
.table-panel,
.tab-nav a,
.list-row,
.settings-menu-button,
.device-card {
  transition:
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.section-grid article:hover,
.price-card:hover,
.panel:hover {
  transform: translateY(-10px) scale(1.006);
}

.metric-grid article:hover {
  transform: translateY(-6px) scale(1.014);
}

.list-row {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, border-color 180ms ease, background 180ms ease;
}

input,
select,
textarea {
  border-radius: 14px;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  transform: translateY(-2px);
}

/* Shimmer keyframes */
/* The sweep is kept to a short slice at the end of the timeline so the glint
   itself stays quick (~0.9s) while the idle gap between shines runs the full
   cycle duration (see the ~15s animation durations below). */
@keyframes gold-shimmer {
  0%, 93% { transform: translateX(-150%); opacity: 0; }
  94% { opacity: 1; }
  98% { opacity: 1; }
  99%, 100% { transform: translateX(160%); opacity: 0; }
}

@keyframes sage-shimmer {
  0%, 93% { transform: translateX(-150%); opacity: 0; }
  94% { opacity: 1; }
  98% { opacity: 1; }
  99%, 100% { transform: translateX(160%); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   NOIR  ·  Obsidian & 24-Karat Metallic Gold
   ═══════════════════════════════════════════════════════════════════ */

/* Body: true obsidian with warm chromatic glow */
html[data-theme="noir"] body {
  background:
    radial-gradient(ellipse 115% 52% at 6% -6%, rgba(245, 208, 122, 0.12) 0%, transparent 46%),
    radial-gradient(ellipse 72% 42% at 96% 2%, rgba(180, 143, 52, 0.07) 0%, transparent 38%),
    radial-gradient(ellipse 55% 36% at 50% 108%, rgba(36, 60, 89, 0.1) 0%, transparent 34%),
    linear-gradient(168deg, #0e0c09 0%, #07060504 48%, #050403 100%);
}

/* Nav bar: deep obsidian glass with gold micro-border */
html[data-theme="noir"] .top-menu-bar {
  border-color: rgba(245, 208, 122, 0.22);
  background:
    radial-gradient(ellipse 80% 140% at 50% -30%, rgba(245, 208, 122, 0.07) 0%, transparent 55%),
    linear-gradient(180deg, rgba(30, 24, 13, 0.97) 0%, rgba(10, 8, 5, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(245, 208, 122, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 24px 58px rgba(0, 0, 0, 0.52),
    0 6px 18px rgba(0, 0, 0, 0.28);
}

/* CTA / primary button: genuine metallic gold with shimmer */
html[data-theme="noir"] .button.primary,
html[data-theme="noir"] .nav-cta {
  position: relative;
  overflow: hidden;
  color: #120a00;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: linear-gradient(128deg,
    #6b4416 0%,
    #b07a22 20%,
    #e8c24a 42%,
    #f6d97a 54%,
    #d4a030 70%,
    #7a5018 100%
  );
  border-color: rgba(224, 172, 58, 0.62);
  box-shadow:
    inset 0 2px 0 rgba(255, 247, 200, 0.36),
    inset 0 -1px 0 rgba(60, 36, 8, 0.38),
    0 14px 36px rgba(197, 148, 50, 0.38),
    0 4px 12px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 rgba(255, 248, 190, 0.28);
  animation: none;
}

html[data-theme="noir"] .button.primary::before,
html[data-theme="noir"] .nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 36%,
    rgba(255, 252, 228, 0.38) 50%,
    transparent 64%
  );
  transform: translateX(-150%);
  animation: gold-shimmer 15s linear infinite;
  pointer-events: none;
}

html[data-theme="noir"] .button.primary:hover,
html[data-theme="noir"] .nav-cta:hover {
  color: #0e0700;
  background: linear-gradient(128deg,
    #7a5218 0%,
    #c49030 20%,
    #f2d05e 42%,
    #fae492 54%,
    #d8a838 70%,
    #8a5c1c 100%
  );
  box-shadow:
    inset 0 2px 0 rgba(255, 247, 210, 0.44),
    inset 0 -1px 0 rgba(60, 36, 8, 0.42),
    0 18px 48px rgba(220, 168, 58, 0.46),
    0 6px 16px rgba(0, 0, 0, 0.32);
  transform: translateY(-4px);
}

/* Secondary button */
html[data-theme="noir"] .button.secondary {
  color: #d8c080;
  background: rgba(245, 208, 122, 0.07);
  border-color: rgba(245, 208, 122, 0.22);
  box-shadow: inset 0 1px 0 rgba(245, 208, 122, 0.09);
}

html[data-theme="noir"] .button.secondary:hover {
  color: #f0d870;
  background: rgba(245, 208, 122, 0.13);
  border-color: rgba(245, 208, 122, 0.36);
  box-shadow: inset 0 1px 0 rgba(245, 208, 122, 0.16), 0 12px 28px rgba(0, 0, 0, 0.26);
}

/* Cards & panels: warm obsidian glass with gold inner highlight */
html[data-theme="noir"] .section-grid article,
html[data-theme="noir"] .panel,
html[data-theme="noir"] .price-card,
html[data-theme="noir"] .table-panel,
html[data-theme="noir"] .filter-bar,
html[data-theme="noir"] .result-card,
html[data-theme="noir"] .metric-grid article,
html[data-theme="noir"] .timeline-grid article {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(245, 208, 122, 0.07) 0%, transparent 52%),
    linear-gradient(158deg, rgba(32, 26, 14, 0.9) 0%, rgba(14, 11, 6, 0.96) 100%);
  border-color: rgba(245, 208, 122, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(245, 208, 122, 0.11),
    0 22px 54px rgba(0, 0, 0, 0.38),
    0 4px 12px rgba(0, 0, 0, 0.22);
}

html[data-theme="noir"] .section-grid article:hover,
html[data-theme="noir"] .panel:hover,
html[data-theme="noir"] .price-card:hover,
html[data-theme="noir"] .metric-grid article:hover,
html[data-theme="noir"] .timeline-grid article:hover {
  border-color: rgba(245, 208, 122, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(245, 208, 122, 0.2),
    0 0 0 1px rgba(245, 208, 122, 0.07),
    0 32px 68px rgba(0, 0, 0, 0.46),
    0 8px 18px rgba(0, 0, 0, 0.28),
    0 0 40px rgba(245, 208, 122, 0.04);
}

/* Accent bars on section articles & price cards */
html[data-theme="noir"] .section-grid article::before,
html[data-theme="noir"] .price-card::before {
  background: linear-gradient(90deg, #5a3510, #c9972a, #f5d07a, #e0b040, #7a5018);
}

/* Hero & page surfaces */
html[data-theme="noir"] .hero,
html[data-theme="noir"] .band,
html[data-theme="noir"] .workflow,
html[data-theme="noir"] .page-hero,
html[data-theme="noir"] .dashboard-head {
  background:
    radial-gradient(ellipse 65% 48% at 84% 0%, rgba(245, 208, 122, 0.11) 0%, transparent 48%),
    radial-gradient(ellipse 48% 40% at 8% 104%, rgba(36, 60, 89, 0.12) 0%, transparent 38%),
    linear-gradient(152deg, rgba(30, 24, 13, 0.93) 0%, rgba(13, 10, 6, 0.97) 100%);
  border-color: rgba(245, 208, 122, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(245, 208, 122, 0.12),
    0 28px 68px rgba(0, 0, 0, 0.38);
}

/* Typography: warm cream-gold tones */
html[data-theme="noir"] body {
  color: #e0d4a8;
}

html[data-theme="noir"] h1,
html[data-theme="noir"] h2,
html[data-theme="noir"] h3,
html[data-theme="noir"] .hero-copy h1,
html[data-theme="noir"] .page-hero h1,
html[data-theme="noir"] .dashboard-head h1,
html[data-theme="noir"] strong {
  color: #f0e4c0;
}

html[data-theme="noir"] p,
html[data-theme="noir"] .metric-grid p,
html[data-theme="noir"] small,
html[data-theme="noir"] .helptext,
html[data-theme="noir"] .list-row span,
html[data-theme="noir"] .guest-summary span {
  color: #8c7c58;
}

html[data-theme="noir"] label,
html[data-theme="noir"] td {
  color: #cabb8c;
}

/* Metric numbers: warm amber gold */
html[data-theme="noir"] .metric-grid span,
html[data-theme="noir"] .price {
  color: #e8c24a;
  font-variant-numeric: tabular-nums;
}

html[data-theme="noir"] .limit-card strong {
  color: #d4a030;
}

/* Eyebrow labels use an editorial text treatment without badges or markers. */
html[data-theme="noir"] .eyebrow {
  display: inline-block;
  padding: 0;
  margin-bottom: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c49030;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.88;
}

html[data-theme="noir"] .small-label {
  color: #c49030;
}

/* Dark-section overrides */
html[data-theme="noir"] .home-summary .eyebrow {
  background: transparent;
  color: rgba(245, 208, 122, 0.76);
}

html[data-theme="noir"] .video-hero .eyebrow {
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
}

/* Accent bars on section-grid cards & price-cards */
html[data-theme="noir"] .section-grid article::before,
html[data-theme="noir"] .price-card::before {
  background: linear-gradient(90deg, #5a3510, #c9972a, #f5d07a, #d4a030);
}

/* Input fields: near-black with gold focus glow */
html[data-theme="noir"] input,
html[data-theme="noir"] select,
html[data-theme="noir"] textarea {
  color: #f0e8c8;
  border-color: rgba(245, 208, 122, 0.2);
  background: rgba(16, 12, 7, 0.9);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.28);
}

html[data-theme="noir"] input::placeholder,
html[data-theme="noir"] textarea::placeholder {
  color: rgba(160, 140, 96, 0.7);
}

html[data-theme="noir"] input:hover,
html[data-theme="noir"] select:hover,
html[data-theme="noir"] textarea:hover {
  border-color: rgba(245, 208, 122, 0.35);
}

html[data-theme="noir"] input:focus-visible,
html[data-theme="noir"] select:focus-visible,
html[data-theme="noir"] textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.52);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.2);
  outline-color: rgba(245, 208, 122, 0.3);
}

/* Payment reference form inputs */
html[data-theme="noir"] .payment-reference-form input {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.3);
  background: rgba(11, 10, 8, 0.92);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

html[data-theme="noir"] .payment-reference-form input::placeholder {
  color: rgba(201, 185, 143, 0.6);
}

html[data-theme="noir"] .payment-reference-form input:hover {
  border-color: rgba(245, 208, 122, 0.45);
}

html[data-theme="noir"] .payment-reference-form input:focus-visible {
  border-color: rgba(245, 208, 122, 0.62);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.25);
  outline-color: rgba(245, 208, 122, 0.3);
}

html[data-theme="noir"] .payment-method-card {
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(14, 11, 5, 0.7);
}

/* Table headers */
html[data-theme="noir"] th {
  color: #8b7a52;
  background: linear-gradient(90deg, rgba(245, 208, 122, 0.1), rgba(245, 208, 122, 0.04));
}

html[data-theme="noir"] td,
html[data-theme="noir"] th {
  border-bottom-color: rgba(245, 208, 122, 0.1);
}

html[data-theme="noir"] tbody tr:hover td {
  background: rgba(245, 208, 122, 0.04);
}

/* Tab nav */
html[data-theme="noir"] .tab-nav a {
  color: #9a8a60;
  border-color: rgba(245, 208, 122, 0.14);
  background: rgba(245, 208, 122, 0.05);
}

html[data-theme="noir"] .tab-nav a:hover {
  color: #e8c84a;
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(245, 208, 122, 0.1);
}

/* List rows */
html[data-theme="noir"] .list-row {
  border-color: rgba(245, 208, 122, 0.12);
  background: rgba(22, 17, 9, 0.8);
}

html[data-theme="noir"] .list-row:hover {
  border-color: rgba(245, 208, 122, 0.26);
  background: rgba(30, 23, 12, 0.88);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 208, 122, 0.07);
}

/* Badges & chips */
html[data-theme="noir"] .badge,
html[data-theme="noir"] .price-badge {
  color: #0e0800;
  background: linear-gradient(128deg, rgba(245, 208, 122, 0.92), rgba(212, 165, 55, 0.96));
  border-color: rgba(212, 165, 55, 0.5);
}

html[data-theme="noir"] .feature-icon,
html[data-theme="noir"] .timeline-grid span {
  background: linear-gradient(135deg, #6b4416, #c9972a, #e8c24a);
  box-shadow: 0 8px 24px rgba(197, 148, 50, 0.32);
}

/* Feature banner */
html[data-theme="noir"] .feature-banner {
  border-color: rgba(245, 208, 122, 0.14);
  background: linear-gradient(135deg, rgba(245, 208, 122, 0.06), rgba(36, 60, 89, 0.08));
}

html[data-theme="noir"] .feature-banner h2,
html[data-theme="noir"] .panel h2,
html[data-theme="noir"] .price-card h2,
html[data-theme="noir"] .section-grid h3,
html[data-theme="noir"] .timeline-grid h3 {
  color: #e8c24a;
}

/* Auth story panel */
html[data-theme="noir"] .auth-story {
  background:
    radial-gradient(ellipse 58% 48% at 90% 0%, rgba(245, 208, 122, 0.13) 0%, transparent 44%),
    linear-gradient(148deg, rgba(30, 24, 13, 0.93) 0%, rgba(12, 10, 6, 0.97) 100%);
  border-color: rgba(245, 208, 122, 0.16);
}

html[data-theme="noir"] .auth-points span,
html[data-theme="noir"] .hero-points span {
  color: #e0d4a8;
  border-color: rgba(245, 208, 122, 0.2);
  background: rgba(245, 208, 122, 0.07);
}

/* Settings cards */
html[data-theme="noir"] .settings-menu-button,
html[data-theme="noir"] .settings-section-card,
html[data-theme="noir"] .settings-password-row,
html[data-theme="noir"] .settings-toggle-row,
html[data-theme="noir"] .device-card {
  color: #e0d4a8;
  border-color: rgba(245, 208, 122, 0.14);
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(245, 208, 122, 0.07) 0%, transparent 42%),
    linear-gradient(158deg, rgba(30, 24, 13, 0.9) 0%, rgba(12, 10, 6, 0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(245, 208, 122, 0.09);
}

html[data-theme="noir"] .settings-menu-button:hover {
  border-color: rgba(245, 208, 122, 0.3);
  background:
    radial-gradient(ellipse 70% 58% at 100% 0%, rgba(245, 208, 122, 0.13) 0%, transparent 46%),
    linear-gradient(158deg, rgba(36, 28, 15, 0.95) 0%, rgba(14, 12, 7, 0.98) 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(245, 208, 122, 0.09);
}

html[data-theme="noir"] .settings-avatar,
html[data-theme="noir"] .settings-section-icon,
html[data-theme="noir"] .status-pill {
  color: #0e0800;
  border-color: rgba(212, 165, 55, 0.44);
  background: linear-gradient(135deg, #8d6425, #e8c24a, #f5d87a);
}

/* Site footer */
html[data-theme="noir"] .site-footer {
  background:
    linear-gradient(180deg, rgba(22, 17, 9, 0.96) 0%, rgba(8, 7, 5, 0.98) 100%);
  border-color: rgba(245, 208, 122, 0.17);
  box-shadow: inset 0 1px 0 rgba(245, 208, 122, 0.1), 0 20px 48px rgba(0, 0, 0, 0.3);
}

/* Focus rings */
html[data-theme="noir"] .button:focus-visible,
html[data-theme="noir"] .nav-cta:focus-visible,
html[data-theme="noir"] a:focus-visible,
html[data-theme="noir"] button:focus-visible {
  outline-color: rgba(245, 208, 122, 0.52);
}

/* Required marker */
html[data-theme="noir"] .required-marker {
  color: #e8c24a;
  background: rgba(245, 208, 122, 0.1);
  border-color: rgba(245, 208, 122, 0.22);
}

/* Home summary section */
html[data-theme="noir"] .home-summary {
  background:
    radial-gradient(ellipse 60% 55% at 8% 0%, rgba(245, 208, 122, 0.12) 0%, transparent 46%),
    linear-gradient(178deg, #100d06 0%, #0a0804 100%);
}

/* Scanner camera */
html[data-theme="noir"] .scanner-camera {
  background:
    radial-gradient(circle at 50% 42%, rgba(245, 208, 122, 0.14) 0%, transparent 32%),
    linear-gradient(145deg, #0e0c09, #2a1e0a);
}

/* Mobile solid bg fallback */
@media (max-width: 540px) {

  html[data-theme="noir"],
  html[data-theme="noir"] body,
  html[data-theme="noir"] main:not(.top-menu-bar),
  html[data-theme="noir"] .page-main {
    background: #050403;
  }
}

/* ── details/summary panel collapsibles ── */
details.panel > summary,
details.panel > summary::-webkit-details-marker {
  list-style: none;
}

details.panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

details.panel > summary h2 {
  margin: 0;
  flex: 1;
}

details.panel > summary::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0.6;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform 220ms ease, opacity 180ms ease;
}

details[open].panel > summary::after {
  transform: rotate(180deg);
  opacity: 0.85;
}

details.panel > summary:hover::after {
  opacity: 0.9;
}

details.panel > summary + *,
details.panel[open] > *:not(summary) {
  margin-top: 18px;
}

details.panel.refund-policy-card > summary {
  font-weight: 700;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════
   DESIGN SYSTEM V2 — Premium surfaces, curved frames,
   mosaic section, contact, form inputs, token fixes
   ═══════════════════════════════════════════════════════ */

/* ─── Global panel curves ───────────────────────────── */
.panel,
.price-card,
.table-panel,
.result-card,
.section-grid article {
  border-radius: 28px;
}

.page-hero {
  border-radius: 36px;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 68px);
}

/* ─── Premium form inputs ────────────────────────────── */
.form-shell p input,
.form-shell p select,
.form-shell p textarea,
.form-field input,
.form-field select,
.form-field textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 16%, transparent), 0 2px 8px rgba(0, 0, 0, 0.06);
}

textarea {
  min-height: 100px;
  resize: vertical;
}

html[data-theme="noir"] body:not(.login-page) .event-form input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="noir"] body:not(.login-page) .event-form select,
html[data-theme="noir"] body:not(.login-page) .event-form textarea {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.3);
  background: rgba(7, 6, 4, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.08);
  color-scheme: dark;
}

html[data-theme="noir"] body:not(.login-page) .event-form input:not([type="radio"]):not([type="checkbox"]):hover,
html[data-theme="noir"] body:not(.login-page) .event-form select:hover,
html[data-theme="noir"] body:not(.login-page) .event-form textarea:hover,
html[data-theme="noir"] body:not(.login-page) .event-form input:not([type="radio"]):not([type="checkbox"]):focus-visible,
html[data-theme="noir"] body:not(.login-page) .event-form select:focus-visible,
html[data-theme="noir"] body:not(.login-page) .event-form textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.62);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.1), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

html[data-theme="noir"] body:not(.login-page) .event-form input::placeholder,
html[data-theme="noir"] body:not(.login-page) .event-form textarea::placeholder {
  color: rgba(201, 185, 143, 0.7);
}

html[data-theme="noir"] body:not(.login-page) .event-form select option {
  color: #fff8e8;
  background: #0b0a08;
}

html[data-theme="noir"] body:not(.login-page) .event-form input:-webkit-autofill,
html[data-theme="noir"] body:not(.login-page) .event-form textarea:-webkit-autofill,
html[data-theme="noir"] body:not(.login-page) .event-form select:-webkit-autofill {
  -webkit-text-fill-color: #fff8e8;
  box-shadow: 0 0 0 1000px #0b0a08 inset;
}

.event-form .form-field input[type="checkbox"] {
  display: inline-grid;
  place-content: center;
  width: 16px;
  min-width: 16px;
  min-height: 16px;
  inline-size: 16px;
  block-size: 16px;
  padding: 0;
  margin: 2px 0 0;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  background: var(--surface-strong);
  color: var(--primary);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  cursor: pointer;
}

.event-form .form-field input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform 120ms ease;
  background: currentColor;
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 20%, 84% 8%, 35% 68%);
}

.event-form .form-field input[type="checkbox"]:checked {
  border-color: var(--primary);
}

.event-form .form-field input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.event-form .form-field input[type="checkbox"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 32%, transparent);
  outline-offset: 2px;
}

html[data-theme="noir"] body:not(.login-page) .event-form .form-field input[type="checkbox"] {
  color: #f5d07a;
  border-color: rgba(245, 208, 122, 0.48);
  background: rgba(7, 6, 4, 0.86);
}

.form-shell p label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}

/* ─── About page token fixes ─────────────────────────── */
.about-mission-grid article::before,
.about-columns article::before {
  background: var(--accent);
}

.about-columns li::marker {
  color: var(--accent);
}

.about-workflow-note span {
  color: var(--accent);
}

.about-columns {
  border-top-color: var(--line);
}

.about-workflow-note {
  border-top-color: var(--line);
}

.about-founder-note {
  border-top-color: var(--line);
}

.required-marker {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

[data-theme="noir"] .auth-story {
  border-color: var(--line);
  background:
    radial-gradient(circle at top right, rgba(201, 162, 75, 0.08), transparent 35%),
    linear-gradient(145deg, rgba(26, 20, 12, 0.96), rgba(20, 17, 10, 0.98));
}

/* ─── Home photo mosaic ──────────────────────────────── */
.home-mosaic {
  width: 100%;
  padding: clamp(40px, 6vw, 72px) clamp(18px, 5vw, 56px);
  display: grid;
  gap: 32px;
  align-items: center;
  background: var(--bg);
}

.home-mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr 1.3fr;
  grid-template-rows: 280px 200px;
  gap: 14px;
  width: min(1240px, 100%);
  margin: 0 auto;
}

.home-mosaic-panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
}

.home-mosaic-panel:nth-child(1) { grid-row: 1 / 3; border-radius: 32px 24px 24px 32px; }
.home-mosaic-panel:nth-child(2) { grid-column: 2; grid-row: 1; border-radius: 24px 24px 16px 16px; }
.home-mosaic-panel:nth-child(3) { grid-column: 3 / 5; grid-row: 1; border-radius: 24px 32px 24px 16px; }
.home-mosaic-panel:nth-child(4) { grid-column: 2 / 4; grid-row: 2; border-radius: 16px 16px 24px 24px; }

/* Rich CSS art fallbacks (replace with real event photos) */
.home-mosaic-wedding {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(201, 162, 75, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(232, 196, 106, 0.35) 0%, transparent 45%),
    linear-gradient(160deg, #2a1a08 0%, #4a2d10 40%, #1a0e05 100%);
}

.home-mosaic-graduation {
  background:
    radial-gradient(ellipse at 20% 40%, rgba(53, 90, 140, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(201, 162, 75, 0.3) 0%, transparent 45%),
    linear-gradient(135deg, #0a1628 0%, #1a2d4a 50%, #0d1e36 100%);
}

.home-mosaic-corporate {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(111, 143, 115, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(60, 80, 62, 0.4) 0%, transparent 45%),
    linear-gradient(160deg, #0e1a10 0%, #1a2e1c 50%, #0c1710 100%);
}

.home-mosaic-cultural {
  background:
    radial-gradient(ellipse at 40% 50%, rgba(180, 70, 30, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(201, 162, 75, 0.35) 0%, transparent 40%),
    linear-gradient(145deg, #1e0c05 0%, #3a1408 45%, #180a04 100%);
}

.home-mosaic-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.62) 100%);
}

.home-mosaic-label {
  position: absolute;
  bottom: 18px;
  left: 20px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.home-mosaic-caption {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.home-mosaic-caption p {
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0;
}

@media (max-width: 900px) {
  .home-mosaic-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 180px 200px;
  }

  .home-mosaic-panel:nth-child(1) { grid-row: 1 / 3; border-radius: 28px; }
  .home-mosaic-panel:nth-child(2) { grid-column: 2; grid-row: 1; border-radius: 24px; }
  .home-mosaic-panel:nth-child(3) { grid-column: 1 / 3; grid-row: 3; border-radius: 24px; }
  .home-mosaic-panel:nth-child(4) { grid-column: 2; grid-row: 2; border-radius: 24px; }
}

@media (max-width: 560px) {
  .home-mosaic-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px 180px;
  }

  .home-mosaic-caption {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── Contact page premium ───────────────────────────── */
.contact-hero {
  width: min(1240px, calc(100% - 24px));
  margin: 40px auto 0;
  padding: clamp(52px, 8vw, 100px) clamp(28px, 6vw, 80px);
  border-radius: 40px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  box-shadow: var(--shadow);
}

[data-theme="noir"] .contact-hero {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(201, 162, 75, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(26, 20, 12, 0.96), rgba(14, 11, 7, 0.98));
}

.contact-hero-inner {
  max-width: 680px;
}

.contact-hero h1 {
  margin: 12px 0 18px;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 0.96;
}

.contact-hero-accent {
  color: var(--accent);
  display: block;
}

.contact-hero-body {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 52ch;
  margin: 0;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.contact-card {
  display: grid;
  gap: 8px;
  padding: 28px 24px;
  border-radius: 24px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: var(--shadow-soft);
  list-style: none;
}

.contact-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.contact-card-primary {
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.contact-card-details > summary {
  list-style: none;
  display: grid;
  gap: 8px;
  cursor: pointer;
}

.contact-card-details > summary::-webkit-details-marker { display: none; }

.contact-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  margin-bottom: 6px;
}

.contact-card-label {
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--ink);
}

.contact-card-sub {
  font-size: 0.84rem;
  color: var(--muted);
}

.contact-choice-panel {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.contact-choice-panel a {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 160ms ease, color 160ms ease;
}

.contact-choice-panel a:hover {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-hero {
    border-radius: 28px;
  }
}

/* ─── Footer copy line (handled above) ──────────────── */

/* ─── Organic dividers on public panels ──────────────── */
.page-hero.about-unified-frame {
  border-radius: 36px;
  overflow: hidden;
}

.about-columns {
  border-top-color: var(--line);
}

/* ═══════════════════════════════════════════════════════════════════
   APP PAGES  ·  Layout & Roundness Refresh
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Rounder surfaces ───────────────────────────────── */
.panel,
.price-card,
.table-panel,
.result-card,
.section-grid article,
.filter-bar,
.metric-grid article {
  border-radius: 28px;
}

.list-row {
  border-radius: 16px;
  padding: 14px 18px;
}

.feature-status {
  border-radius: 18px;
  padding: 16px;
}

.feature-status-grid {
  gap: 12px;
}

/* ─── Calmer hover for data panels ──────────────────── */
.section-grid article:hover,
.price-card:hover,
.panel:hover {
  transform: translateY(-4px) scale(1.001);
  box-shadow: var(--shadow);
}

.metric-grid article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.table-panel:hover {
  transform: none;
  box-shadow: var(--shadow);
}

/* ─── Dashboard header: top-aligned ─────────────────── */
.dashboard-head {
  align-items: flex-start;
}

/* ─── Tab navigation: unified pill bar ──────────────── */
.tab-nav {
  gap: 5px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.tab-nav a {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 18px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
}

.tab-nav a:hover {
  background: var(--surface-strong);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  color: var(--ink);
  transform: none;
}

/* ─── Operation grid: fluid auto-fill columns ────────── */
.operation-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ─── Event cards grid on main dashboard: fluid ─────── */
.content-grid.operations-list {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* ─── Metric grid inside a panel: adaptive wrap ─────── */
.panel .metric-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  padding: 0;
  margin: 12px 0 0;
}

/* ─── Filter bar: rounder, better padding ────────────── */
.filter-bar {
  border-radius: 28px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

/* ─── Form inputs in filter bars ────────────────────── */
.filter-bar input,
.filter-bar select,
input[type="search"] {
  border-radius: 16px;
}

.dashboard-head + .filter-bar--inline {
  margin-top: 34px;
}

.filter-bar.filter-bar--inline {
  width: min(700px, calc(100% - 24px));
  margin-right: auto;
  margin-left: auto;
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

.filter-bar--inline input[type="search"] {
  min-width: 0;
}

.message-channel-grid {
  width: min(1240px, calc(100% - 24px));
  margin: 26px auto 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.message-channel-card {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
}

.message-channel-card span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.message-channel-card strong {
  font-size: 1.08rem;
}

.message-channel-card small {
  color: var(--muted);
}

.message-channel-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

@media (max-width: 720px) {
  .filter-bar.filter-bar--inline {
    width: min(100%, calc(100% - 18px));
    grid-template-columns: 1fr;
  }

  .message-channel-grid {
    width: min(100%, calc(100% - 18px));
    grid-template-columns: 1fr;
  }
}

.code-block {
  max-width: 100%;
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  background: rgba(0, 0, 0, 0.22);
  font: 600 0.88rem/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

/* ─── Feedback: severity / risk badges — Noir (default) ─── */
body:not(.login-page) .badge.badge--high,
body:not(.login-page) .badge.badge--critical {
  color: #ffb3ad;
  background: rgba(180, 35, 24, 0.30);
  border-color: rgba(255, 100, 90, 0.28);
}

body:not(.login-page) .badge.badge--medium {
  color: #fcd34d;
  background: rgba(146, 64, 14, 0.28);
  border-color: rgba(217, 155, 38, 0.28);
}

body:not(.login-page) .badge.badge--low {
  color: #9ee6b4;
  background: rgba(6, 118, 71, 0.25);
  border-color: rgba(30, 160, 90, 0.28);
}

/* ─── Feedback: workflow notice — Noir (default) ─── */
.workflow-notice {
  margin: 0 clamp(18px, 5vw, 28px) 24px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(245, 208, 122, 0.28);
  background: rgba(245, 208, 122, 0.08);
  font-size: 0.88rem;
  line-height: 1.5;
}

.workflow-notice strong {
  display: block;
  margin-bottom: 4px;
  color: #f4d17b;
}

.workflow-notice p {
  margin: 0;
  color: #c9b98f;
}

/* ─── Feedback: summary body prose — Noir (default) ─── */
body:not(.login-page) .summary-body,
body:not(.login-page) .summary-body p {
  color: #fff8e8;
  font-size: 0.94rem;
  line-height: 1.7;
}

body:not(.login-page) .summary-body p {
  margin: 0 0 12px;
}

/* ─── Scroll-safe mobile small screens ──────────────── */
@media (max-width: 540px) {
  .home-mosaic {
    padding: 24px 14px 32px;
  }

  .home-mosaic-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 180px);
  }

  .home-mosaic-panel:nth-child(1),
  .home-mosaic-panel:nth-child(2),
  .home-mosaic-panel:nth-child(3),
  .home-mosaic-panel:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
    border-radius: 22px;
  }
}

/* ════════════════════════════════════════════════════════════
   SITE-WIDE SUBTLE POLISH
   Theme-neutral refinements driven by existing tokens so every
   theme adapts automatically. No layout,
   DOM, or backend impact; no new continuous animations.
   ════════════════════════════════════════════════════════════ */

/* ── Branded text selection ── */
::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
::-moz-selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Themed slim scrollbars ── */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 48%, transparent) transparent;
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid transparent;
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 66%, transparent);
  background-clip: padding-box;
}

/* ── Consistent, modern keyboard focus ring on interactive elements
   (sets only width/style/offset; theme rules keep supplying the
   accent outline-color, so both themes stay correct) ── */
body:not(.login-page) .button:focus-visible,
body:not(.login-page) .nav-cta:focus-visible,
body:not(.login-page) .account-trigger:focus-visible,
body:not(.login-page) .mobile-menu-trigger:focus-visible,
body:not(.login-page) .tab-nav a:focus-visible,
body:not(.login-page) .dropdown-link:focus-visible,
body.login-page .button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
  outline-offset: 3px;
}

/* ── Refined card hover: add a faint accent edge on top of the
   existing shadow lift, for a premium "glow" without motion cost.
   Two scopes so each theme's base border-color is overridden on
   hover at matching-or-higher specificity. ── */
body:not(.login-page) .panel:hover,
body:not(.login-page) .section-grid article:hover,
body:not(.login-page) .price-card:hover,
body:not(.login-page) .result-card:hover,
body:not(.login-page) .metric-grid article:hover,
body:not(.login-page) .timeline-grid article:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

/* ── List rows: gentle accent edge on hover to match cards ── */
body:not(.login-page) .list-row:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* ── Disabled controls: clearer, consistent affordance ── */
.button:disabled,
.button[disabled],
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Respect reduced-motion: neutralize hover transforms ── */
@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .nav-cta:hover,
  .panel:hover,
  .section-grid article:hover,
  .price-card:hover,
  .result-card:hover,
  .metric-grid article:hover,
  .timeline-grid article:hover,
  .table-panel:hover,
  .list-row:hover {
    transform: none;
  }
}

/* ── Brand-tinted native controls (checkboxes, radios, range, progress) ── */
body {
  accent-color: var(--accent);
}

/* ── Branded text caret in fields ── */
input,
textarea {
  caret-color: var(--accent);
}

/* ── Tabular figures so numeric data aligns cleanly in dashboards ── */
table,
td,
th,
.metric-grid,
.metric-grid span,
.limit-card strong,
.price,
.list-row span,
.badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Gentle table zebra striping (kept below hover specificity so row
   hover still reads on every row) ── */
tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ── Tame browser autofill so saved logins/details keep the themed
   field look instead of the default yellow box ── */
body:not(.login-page) input:-webkit-autofill,
body:not(.login-page) input:-webkit-autofill:hover,
body:not(.login-page) input:-webkit-autofill:focus,
body:not(.login-page) textarea:-webkit-autofill,
body:not(.login-page) select:-webkit-autofill,
body.login-page input:-webkit-autofill,
body.login-page input:-webkit-autofill:hover,
body.login-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff8e8;
  -webkit-box-shadow: 0 0 0 1000px rgba(7, 6, 4, 0.92) inset;
  caret-color: #fff8e8;
  transition: background-color 9999s ease-in-out 0s;
}

/* Final noir form-control guardrail. Several page-specific form blocks
   sit late in this stylesheet, so keep this near the end to prevent white
   native fields with unreadable light text across guest/admin panels. */
html[data-theme="noir"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]),
html[data-theme="noir"] select,
html[data-theme="noir"] textarea {
  color: #fff8e8;
  -webkit-text-fill-color: #fff8e8;
  caret-color: #f5d07a;
  border-color: rgba(245, 208, 122, 0.32);
  background: rgba(7, 6, 4, 0.92);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}

html[data-theme="noir"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"])::placeholder,
html[data-theme="noir"] textarea::placeholder {
  color: rgba(201, 185, 143, 0.72);
  -webkit-text-fill-color: rgba(201, 185, 143, 0.72);
}

html[data-theme="noir"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]):hover,
html[data-theme="noir"] select:hover,
html[data-theme="noir"] textarea:hover {
  border-color: rgba(245, 208, 122, 0.48);
}

html[data-theme="noir"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]):focus-visible,
html[data-theme="noir"] select:focus-visible,
html[data-theme="noir"] textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.64);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.12), inset 0 1px 4px rgba(0, 0, 0, 0.38);
}

html[data-theme="noir"] select option {
  color: #fff8e8;
  background: #090806;
}

html[data-theme="noir"] input:-webkit-autofill,
html[data-theme="noir"] input:-webkit-autofill:hover,
html[data-theme="noir"] input:-webkit-autofill:focus,
html[data-theme="noir"] textarea:-webkit-autofill,
html[data-theme="noir"] textarea:-webkit-autofill:hover,
html[data-theme="noir"] textarea:-webkit-autofill:focus,
html[data-theme="noir"] select:-webkit-autofill,
html[data-theme="noir"] select:-webkit-autofill:hover,
html[data-theme="noir"] select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff8e8;
  -webkit-box-shadow: 0 0 0 1000px rgba(7, 6, 4, 0.94) inset;
  caret-color: #f5d07a;
}

/* ═══════════════════════════════════════════════════════════════════
   Systematic event UI: shared subnav, lifecycle stepper, nav-card stats
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Event subnav: single navigation system per event ── */
.event-subnav {
  margin-top: 18px;
  margin-bottom: 22px;
  align-items: center;
}

.tab-nav a.is-active {
  color: var(--accent-contrast);
  background: var(--accent);
  box-shadow: var(--shadow-soft);
}

.tab-nav a.is-active:hover {
  color: var(--accent-contrast);
  background: var(--accent-hover);
}

.subnav-lock-note {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
}

/* ─── Lifecycle stepper: where you are, what is next ──── */
.lifecycle-panel {
  display: grid;
  gap: 16px;
}

.lifecycle-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lifecycle-step {
  display: grid;
  gap: 6px;
  justify-items: start;
  align-content: start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.lifecycle-step strong {
  font-size: 0.88rem;
  line-height: 1.2;
}

.lifecycle-step small {
  color: var(--muted);
  line-height: 1.35;
}

.lifecycle-marker {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  background: transparent;
}

.lifecycle-step.is-done {
  opacity: 0.86;
}

.lifecycle-step.is-done .lifecycle-marker {
  color: var(--accent-contrast);
  border-color: transparent;
  background: var(--accent);
}

.lifecycle-step.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-soft);
  background: var(--surface-strong);
}

.lifecycle-step.is-current .lifecycle-marker {
  color: var(--accent);
  border-color: var(--accent);
}

.lifecycle-step.is-upcoming {
  opacity: 0.62;
}

.lifecycle-hint {
  margin: 0;
  color: var(--muted);
}

.lifecycle-hint strong {
  color: var(--ink);
}

/* ─── Nav cards: every card shows the number it names ─── */
.nav-card-stat {
  margin: 0;
  color: var(--muted);
}

.nav-card-stat strong {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ink);
}

.section-nav-grid .operation-card h2 {
  font-size: 1.2rem;
  margin: 0;
}

/* ─── Collapsed billing details on event overview ─────── */
.billing-details > summary {
  cursor: pointer;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.billing-details[open] > summary {
  margin-bottom: 14px;
}

.billing-details h3 {
  margin: 18px 0 6px;
  font-size: 1.02rem;
}

/* ── Event overview: one tidy column, page-width blocks, even rhythm ── */
.event-overview-page .panel {
  width: min(1240px, calc(100% - 24px));
  margin-inline: auto;
}

.event-overview-page .page-main > * + * {
  margin-top: 22px;
}

/* Workspace pages: match the event dashboard rhythm and keep tools compact. */
:is(.event-admin-page, .dashboard-page) .page-main > .dashboard-head,
:is(.event-admin-page, .dashboard-page) .page-main > .event-subnav,
:is(.event-admin-page, .dashboard-page) .page-main > .filter-bar,
:is(.event-admin-page, .dashboard-page) .page-main > .panel,
:is(.event-admin-page, .dashboard-page) .page-main > .table-panel,
:is(.event-admin-page, .dashboard-page) .page-main > .split,
:is(.event-admin-page, .dashboard-page) .page-main > .content-grid,
:is(.event-admin-page, .dashboard-page) .page-main > .metric-grid,
:is(.event-admin-page, .dashboard-page) .page-main > .scanner-layout,
:is(.event-admin-page, .dashboard-page) .page-main > .auth-shell,
:is(.event-admin-page, .dashboard-page) .page-main > .template-editor,
:is(.event-admin-page, .dashboard-page) .page-main > .workflow-notice,
:is(.event-admin-page, .dashboard-page) .page-main > .result-card,
:is(.event-admin-page, .dashboard-page) .page-main > .message-channel-grid {
  width: min(1240px, calc(100% - 24px));
  margin-inline: auto;
}

:is(.event-admin-page, .dashboard-page) .page-main > * + * {
  margin-top: 22px;
}

:is(.event-admin-page, .dashboard-page) .page-main > .table-panel,
:is(.event-admin-page, .dashboard-page) .page-main > .content-grid,
:is(.event-admin-page, .dashboard-page) .page-main > .filter-bar,
:is(.event-admin-page, .dashboard-page) .page-main > .workflow-notice {
  margin-bottom: 0;
}

:is(.event-admin-page, .dashboard-page) .page-main > .auth-shell {
  padding: 0;
}

:is(.event-admin-page, .dashboard-page) .filter-bar {
  width: min(940px, calc(100% - 24px));
  grid-template-columns: minmax(220px, 360px) minmax(150px, 180px) minmax(150px, 180px) auto auto;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

:is(.event-admin-page, .dashboard-page) .filter-bar input[type="search"] {
  min-width: 0;
  width: 100%;
}

:is(.event-admin-page, .dashboard-page) .filter-bar .button {
  min-height: 44px;
  white-space: nowrap;
}

:is(.event-admin-page, .dashboard-page) .filter-bar.filter-bar--inline {
  width: min(700px, calc(100% - 24px));
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

:is(.event-admin-page, .dashboard-page) .dashboard-head + .filter-bar.filter-bar--inline {
  margin-top: 32px;
}

.event-guests-page .filter-bar {
  width: min(960px, calc(100% - 24px));
  grid-template-columns: minmax(220px, 340px) minmax(140px, 170px) minmax(150px, 190px) auto auto;
}

.event-feedback-page .filter-bar {
  width: min(980px, calc(100% - 24px));
}

.ai-work-page .filter-bar,
.suggestions-page .filter-bar {
  width: min(760px, calc(100% - 24px));
  grid-template-columns: minmax(150px, 180px) minmax(150px, 180px) auto auto;
}

.event-reports-page .split {
  align-items: stretch;
}

.event-card-page .page-main > .cardkit-editor {
  width: min(1480px, calc(100% - 24px));
  margin-inline: auto;
}

.event-whatsapp-messages-page .feature-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.event-whatsapp-messages-page .operations-actions {
  gap: 12px;
  margin-top: 16px;
}

.event-whatsapp-messages-page .operations-actions .inline-action-form {
  margin: 0;
}

.event-whatsapp-messages-page .operations-actions .button {
  min-height: 44px;
  white-space: normal;
}

.guest-options-cell {
  min-width: 150px;
}

.guest-channel-form {
  display: grid;
  grid-template-columns: minmax(128px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 220px;
  max-width: 290px;
}

.guest-channel-form select {
  min-height: 38px;
  padding: 8px 34px 8px 10px;
  border-radius: 10px;
  font-size: 0.86rem;
}

.guest-channel-save {
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 0.82rem;
}

.guest-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.guest-options-panel {
  position: relative;
  width: max-content;
  min-width: 132px;
  max-width: 220px;
}

.guest-options-panel > summary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.guest-options-panel > summary::-webkit-details-marker {
  display: none;
}

.guest-options-panel > summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.guest-options-panel[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.guest-options-menu {
  display: grid;
  gap: 6px;
  min-width: 210px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.guest-options-menu a,
.guest-options-menu .link-button {
  width: 100%;
  min-height: 38px;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink);
  text-align: left;
  font-size: 0.86rem;
}

.guest-options-menu .inline-action-form {
  width: 100%;
}

.guest-options-menu small {
  display: block;
  padding: 8px 10px;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 760px) {
  .guest-form-grid {
    grid-template-columns: 1fr;
  }

  .guest-channel-form {
    max-width: 100%;
  }
}

body:not(.home-page) .page-main {
  padding-top: clamp(18px, 2.5vw, 34px);
}

.public-invite .invite-rail {
  align-items: center;
}

.public-invite .invite-rail-head,
.public-invite .panel.form-shell {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.public-invite .invite-rail-head,
.public-invite .panel.form-shell {
  justify-items: center;
}

.public-invite .panel.form-shell {
  display: grid;
  gap: 14px;
}

.public-invite .panel.form-shell h2,
.public-invite .invite-deadline,
.public-invite .warning-text {
  margin-left: auto;
  margin-right: auto;
}

.public-invite .invite-identity {
  width: 100%;
  justify-content: center;
}

.public-invite .invite-identity-chip {
  margin-left: 0;
}

.public-invite .panel.form-shell > .button,
.public-invite .public-card-offline-actions {
  width: min(100%, 360px);
}

.public-invite .panel.form-shell .form-field,
.public-invite .rsvp-confirmation-row {
  width: 100%;
}

.public-invite .panel.form-shell > .button {
  justify-content: center;
}

.public-invite .public-card-offline-actions {
  justify-items: center;
  margin-left: auto;
  margin-right: auto;
}

.public-invite .rsvp-inline-status,
.public-invite .rsvp-status-card {
  width: min(100%, 420px);
  text-align: center;
}

/* Keep the package & billing summary compact instead of full-width rows */
.billing-details .list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.billing-details .compact-form {
  max-width: 520px;
}

@media (max-width: 920px) {
  .lifecycle-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billing-details .list {
    grid-template-columns: 1fr;
  }

  .subnav-lock-note {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  :is(.event-admin-page, .dashboard-page) .page-main > .dashboard-head,
  :is(.event-admin-page, .dashboard-page) .page-main > .event-subnav,
  :is(.event-admin-page, .dashboard-page) .page-main > .filter-bar,
  :is(.event-admin-page, .dashboard-page) .page-main > .panel,
  :is(.event-admin-page, .dashboard-page) .page-main > .table-panel,
  :is(.event-admin-page, .dashboard-page) .page-main > .split,
  :is(.event-admin-page, .dashboard-page) .page-main > .content-grid,
  :is(.event-admin-page, .dashboard-page) .page-main > .metric-grid,
  :is(.event-admin-page, .dashboard-page) .page-main > .scanner-layout,
  :is(.event-admin-page, .dashboard-page) .page-main > .auth-shell,
  :is(.event-admin-page, .dashboard-page) .page-main > .template-editor,
  :is(.event-admin-page, .dashboard-page) .page-main > .workflow-notice,
  :is(.event-admin-page, .dashboard-page) .page-main > .result-card,
  :is(.event-admin-page, .dashboard-page) .page-main > .message-channel-grid,
  .event-card-page .page-main > .cardkit-editor {
    width: min(100%, calc(100% - 18px));
  }

  :is(.event-admin-page, .dashboard-page) .page-main > * + * {
    margin-top: 18px;
  }

  :is(.event-admin-page, .dashboard-page) .filter-bar,
  .event-guests-page .filter-bar,
  .event-feedback-page .filter-bar,
  .ai-work-page .filter-bar,
  .suggestions-page .filter-bar {
    grid-template-columns: 1fr;
  }

  :is(.event-admin-page, .dashboard-page) .filter-bar .button,
  .event-whatsapp-messages-page .operations-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════
   GLASS THEME — full glassmorphism refinement
   Mirrors the Silver Sage component coverage, but every surface is
   translucent + blurred so the colourful backdrop reads through.
   Scoped to body:not(.login-page) at the end of the file so it
   outranks the default (Noir) body block and re-declares the
   palette that block would otherwise force onto Glass.
   ════════════════════════════════════════════════════════════ */
html[data-theme="glass"] {
  background: #16306e;
}

html[data-theme="glass"] body:not(.login-page) {
  --bg: #e8edfb;
  --surface: rgba(255, 255, 255, 0.42);
  --surface-strong: rgba(255, 255, 255, 0.60);
  --surface-dark: rgba(255, 255, 255, 0.30);
  --surface-dark-2: rgba(255, 255, 255, 0.22);
  --ink: #1b2230;
  --muted: #4c5670;
  --line: rgba(255, 255, 255, 0.60);
  --line-strong: rgba(255, 255, 255, 0.85);
  --blue: #4f7cf0;
  --blue-deep: #2f53b8;
  --green: #2f9e7e;
  --green-deep: #1f7a60;
  --sky: rgba(99, 102, 241, 0.12);
  --mint: rgba(45, 212, 191, 0.16);
  --red: #d6455e;
  --success: #1f9e6f;
  --shadow: 0 28px 80px rgba(40, 50, 90, 0.22);
  --shadow-soft: 0 18px 44px rgba(40, 50, 90, 0.14);
  --background: #e8edfb;
  --foreground: #1b2230;
  --card: rgba(255, 255, 255, 0.42);
  --card-foreground: #1b2230;
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --secondary: #2f9e7e;
  --accent: #6366f1;
  --border: rgba(255, 255, 255, 0.60);
  --muted-foreground: #4c5670;
  --gradient-start: #eef2ff;
  --gradient-end: #ecfdf7;
  color: var(--foreground);
  background-color: #16306e;
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    url("../img/glass-bg.498407b2cc52.jpg");
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    image-set(url("../img/glass-bg.8c7a1a985cd7.webp") type("image/webp"), url("../img/glass-bg.498407b2cc52.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Pin the backdrop on capable, non-touch viewports so the blur reads while
   scrolling. Skipped on touch/small screens where fixed backgrounds jank. */
@media (min-width: 900px) and (hover: hover) {
  html[data-theme="glass"] body:not(.login-page) {
    background-attachment: fixed;
  }
}

html[data-theme="glass"] body:not(.login-page)::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 30%, rgba(255, 255, 255, 0.18) 52%, transparent 78%);
  opacity: 0.5;
}

html[data-theme="glass"] body:not(.login-page) a {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .page-grid {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
}

/* ── Frosted chrome: header, footer, nav ── */
html[data-theme="glass"] body:not(.login-page) .site-footer {
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 18px 48px rgba(40, 50, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="glass"] body:not(.login-page) .brand,
html[data-theme="glass"] body:not(.login-page) .site-nav a,
html[data-theme="glass"] body:not(.login-page) .link-button,
html[data-theme="glass"] body:not(.login-page) .site-footer,
html[data-theme="glass"] body:not(.login-page) .site-footer a {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .brand-name,
html[data-theme="glass"] body:not(.login-page) .feature-banner h2,
html[data-theme="glass"] body:not(.login-page) .panel h2,
html[data-theme="glass"] body:not(.login-page) .price-card h2,
html[data-theme="glass"] body:not(.login-page) .section-grid h3,
html[data-theme="glass"] body:not(.login-page) .timeline-grid h3 {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .site-nav {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html[data-theme="glass"] body:not(.login-page) .site-nav a::after,
html[data-theme="glass"] body:not(.login-page) .section-grid article::before,
html[data-theme="glass"] body:not(.login-page) .price-card::before {
  background: linear-gradient(90deg, #6366f1, #ec4899, #2dd4bf);
}

html[data-theme="glass"] body:not(.login-page) .site-nav a:hover,
html[data-theme="glass"] body:not(.login-page) .site-nav a:focus-visible,
html[data-theme="glass"] body:not(.login-page) .link-button:hover,
html[data-theme="glass"] body:not(.login-page) .link-button:focus-visible {
  background: rgba(99, 102, 241, 0.14);
}

/* ── Primary actions: tinted glass ── */
html[data-theme="glass"] body:not(.login-page) .button.primary,
html[data-theme="glass"] body:not(.login-page) .nav-cta,
html[data-theme="glass"] body:not(.login-page) .site-nav a.nav-account-settings {
  color: #ffffff;
  border-color: rgba(99, 102, 241, 0.5);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.92) 0%, rgba(139, 92, 246, 0.92) 52%, rgba(236, 72, 153, 0.88) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 34px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme="glass"] body:not(.login-page) .site-nav a.nav-logout {
  color: #a01b34;
  border-color: rgba(214, 69, 94, 0.3);
  background: rgba(255, 255, 255, 0.4);
}

html[data-theme="glass"] body:not(.login-page) .site-nav a.nav-logout:hover,
html[data-theme="glass"] body:not(.login-page) .site-nav a.nav-logout:focus-visible {
  color: #ffffff;
  background: #d6455e;
}

html[data-theme="glass"] body:not(.login-page) .button.secondary,
html[data-theme="glass"] body:not(.login-page) .button.secondary.light {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="glass"] body:not(.login-page) .button:hover,
html[data-theme="glass"] body:not(.login-page) .nav-cta:hover,
html[data-theme="glass"] body:not(.login-page) .tab-nav a:hover,
html[data-theme="glass"] body:not(.login-page) .list-row:hover {
  box-shadow: 0 18px 42px rgba(40, 50, 90, 0.16), 0 0 30px rgba(99, 102, 241, 0.22);
}

html[data-theme="glass"] body:not(.login-page) .button:focus-visible,
html[data-theme="glass"] body:not(.login-page) .nav-cta:focus-visible,
html[data-theme="glass"] body:not(.login-page) .tab-nav a:focus-visible,
html[data-theme="glass"] body:not(.login-page) a:focus-visible,
html[data-theme="glass"] body:not(.login-page) input:focus-visible,
html[data-theme="glass"] body:not(.login-page) select:focus-visible,
html[data-theme="glass"] body:not(.login-page) textarea:focus-visible,
html[data-theme="glass"] body:not(.login-page) button:focus-visible {
  outline-color: rgba(99, 102, 241, 0.5);
}

/* ── Core surfaces: frosted glass panels ── */
html[data-theme="glass"] body:not(.login-page) .hero,
html[data-theme="glass"] body:not(.login-page) .band,
html[data-theme="glass"] body:not(.login-page) .workflow,
html[data-theme="glass"] body:not(.login-page) .page-hero,
html[data-theme="glass"] body:not(.login-page) .dashboard-head,
html[data-theme="glass"] body:not(.login-page) .section-grid article,
html[data-theme="glass"] body:not(.login-page) .panel,
html[data-theme="glass"] body:not(.login-page) .price-card,
html[data-theme="glass"] body:not(.login-page) .limit-card,
html[data-theme="glass"] body:not(.login-page) .feature-status,
html[data-theme="glass"] body:not(.login-page) .table-panel,
html[data-theme="glass"] body:not(.login-page) .filter-bar,
html[data-theme="glass"] body:not(.login-page) .result-card,
html[data-theme="glass"] body:not(.login-page) .metric-grid article,
html[data-theme="glass"] body:not(.login-page) .timeline-grid article {
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.32));
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-theme="glass"] body:not(.login-page) .hero,
html[data-theme="glass"] body:not(.login-page) .page-hero,
html[data-theme="glass"] body:not(.login-page) .dashboard-head {
  background:
    radial-gradient(circle at 86% 10%, rgba(99, 102, 241, 0.26), transparent 32%),
    radial-gradient(circle at 8% 90%, rgba(45, 212, 191, 0.22), transparent 34%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34) 62%, rgba(255, 255, 255, 0.28));
}

html[data-theme="glass"] body:not(.login-page) .band,
html[data-theme="glass"] body:not(.login-page) .workflow {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.3)),
    linear-gradient(90deg, rgba(99, 102, 241, 0.12), transparent);
}

html[data-theme="glass"] body:not(.login-page) .page-hero::before,
html[data-theme="glass"] body:not(.login-page) .dashboard-head::before,
html[data-theme="glass"] body:not(.login-page) .band::before,
html[data-theme="glass"] body:not(.login-page) .workflow::before {
  background:
    linear-gradient(90deg, rgba(99, 102, 241, 0.16), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 22px);
}

/* ── Type colours ── */
html[data-theme="glass"] body:not(.login-page) .hero-copy h1,
html[data-theme="glass"] body:not(.login-page) .page-hero h1,
html[data-theme="glass"] body:not(.login-page) .dashboard-head h1,
html[data-theme="glass"] body:not(.login-page) .auth-story h1,
html[data-theme="glass"] body:not(.login-page) .summary-heading h2,
html[data-theme="glass"] body:not(.login-page) .section-intro h2,
html[data-theme="glass"] body:not(.login-page) strong,
html[data-theme="glass"] body:not(.login-page) h1,
html[data-theme="glass"] body:not(.login-page) h2,
html[data-theme="glass"] body:not(.login-page) h3,
html[data-theme="glass"] body:not(.login-page) label,
html[data-theme="glass"] body:not(.login-page) td {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .hero-copy p,
html[data-theme="glass"] body:not(.login-page) .page-hero p,
html[data-theme="glass"] body:not(.login-page) .dashboard-subtitle,
html[data-theme="glass"] body:not(.login-page) .section-intro p,
html[data-theme="glass"] body:not(.login-page) .feature-banner p:last-child,
html[data-theme="glass"] body:not(.login-page) .auth-story p,
html[data-theme="glass"] body:not(.login-page) .invite-intro,
html[data-theme="glass"] body:not(.login-page) p,
html[data-theme="glass"] body:not(.login-page) .metric-grid p,
html[data-theme="glass"] body:not(.login-page) .helptext,
html[data-theme="glass"] body:not(.login-page) small,
html[data-theme="glass"] body:not(.login-page) .list-row span,
html[data-theme="glass"] body:not(.login-page) .guest-summary span,
html[data-theme="glass"] body:not(.login-page) th {
  color: var(--muted);
}

html[data-theme="glass"] body:not(.login-page) .eyebrow,
html[data-theme="glass"] body:not(.login-page) .small-label,
html[data-theme="glass"] body:not(.login-page) .hero-copy .eyebrow,
html[data-theme="glass"] body:not(.login-page) .page-hero > .eyebrow,
html[data-theme="glass"] body:not(.login-page) .dashboard-head .eyebrow,
html[data-theme="glass"] body:not(.login-page) .pricing-note .eyebrow,
html[data-theme="glass"] body:not(.login-page) .feature-banner .eyebrow,
html[data-theme="glass"] body:not(.login-page) .auth-form .eyebrow {
  color: #4f46e5;
  background: transparent;
}

html[data-theme="glass"] body:not(.login-page) .price,
html[data-theme="glass"] body:not(.login-page) .metric-grid span,
html[data-theme="glass"] body:not(.login-page) .limit-card strong {
  color: #4f46e5;
}

/* ── Accent chips, badges, icons ── */
html[data-theme="glass"] body:not(.login-page) .badge,
html[data-theme="glass"] body:not(.login-page) .price-badge,
html[data-theme="glass"] body:not(.login-page) .status-chip,
html[data-theme="glass"] body:not(.login-page) .feature-icon,
html[data-theme="glass"] body:not(.login-page) .timeline-grid span,
html[data-theme="glass"] body:not(.login-page) .required-marker,
html[data-theme="glass"] body:not(.login-page) p:has(.tz-phone-input)::before,
html[data-theme="glass"] body:not(.login-page) .form-field:has(.tz-phone-input)::before {
  color: #ffffff;
  border-color: rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] body:not(.login-page) .feature-banner,
html[data-theme="glass"] body:not(.login-page) .list-row,
html[data-theme="glass"] body:not(.login-page) .tab-nav a {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="glass"] body:not(.login-page) #id_package label {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-theme="glass"] body:not(.login-page) #id_package label:has(input:checked),
html[data-theme="glass"] body:not(.login-page) .limit-card {
  border-color: rgba(99, 102, 241, 0.45);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.42);
}

html[data-theme="glass"] body:not(.login-page) #id_package label:has(input:checked) {
  color: #14213a;
  border-color: rgba(99, 102, 241, 0.6);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.42));
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="glass"] body:not(.login-page) #id_package input {
  accent-color: #6366f1;
}

html[data-theme="glass"] body:not(.login-page) .feature-status.included {
  border-color: rgba(31, 158, 111, 0.3);
  background: rgba(209, 250, 229, 0.5);
}

html[data-theme="glass"] body:not(.login-page) .feature-status.locked {
  border-color: rgba(214, 69, 94, 0.28);
  background: rgba(254, 226, 226, 0.5);
}

html[data-theme="glass"] body:not(.login-page) .feature-status.included span {
  color: #ffffff;
  background: #1f9e6f;
}

html[data-theme="glass"] body:not(.login-page) .feature-status.locked span {
  color: #ffffff;
  background: #d6455e;
}

/* ── Form controls: frosted, readable ── */
html[data-theme="glass"] body:not(.login-page) input,
html[data-theme="glass"] body:not(.login-page) select,
html[data-theme="glass"] body:not(.login-page) textarea {
  color: #1b2230;
  -webkit-text-fill-color: #1b2230;
  border-color: rgba(99, 102, 241, 0.32);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-theme="glass"] body:not(.login-page) input::placeholder,
html[data-theme="glass"] body:not(.login-page) textarea::placeholder {
  color: rgba(76, 86, 112, 0.7);
  -webkit-text-fill-color: rgba(76, 86, 112, 0.7);
}

html[data-theme="glass"] body:not(.login-page) input:hover,
html[data-theme="glass"] body:not(.login-page) select:hover,
html[data-theme="glass"] body:not(.login-page) textarea:hover,
html[data-theme="glass"] body:not(.login-page) input:focus-visible,
html[data-theme="glass"] body:not(.login-page) select:focus-visible,
html[data-theme="glass"] body:not(.login-page) textarea:focus-visible {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.14);
}

/* ── Tables, code, messages ── */
html[data-theme="glass"] body:not(.login-page) th,
html[data-theme="glass"] body:not(.login-page) td {
  border-bottom-color: rgba(99, 102, 241, 0.16);
}

html[data-theme="glass"] body:not(.login-page) th {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.14), rgba(255, 255, 255, 0.3));
}

html[data-theme="glass"] body:not(.login-page) tbody tr:hover td,
html[data-theme="glass"] body:not(.login-page) code {
  background: rgba(99, 102, 241, 0.1);
}

html[data-theme="glass"] body:not(.login-page) code {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .message {
  color: #15543c;
  border-color: rgba(31, 158, 111, 0.28);
  background: rgba(236, 253, 245, 0.6);
}

html[data-theme="glass"] body:not(.login-page) .form-error-summary {
  color: #a01b34;
  border-color: rgba(214, 69, 94, 0.3);
  background: rgba(254, 242, 244, 0.6);
}

html[data-theme="glass"] body:not(.login-page) .form-error-summary strong,
html[data-theme="glass"] body:not(.login-page) .form-error-summary p {
  color: #a01b34;
}

html[data-theme="glass"] body:not(.login-page) .result-card.success {
  border-color: rgba(31, 158, 111, 0.34);
  background: rgba(220, 250, 235, 0.55);
}

html[data-theme="glass"] body:not(.login-page) .result-card.warning {
  border-color: rgba(214, 69, 94, 0.34);
  background: rgba(255, 235, 238, 0.55);
}

/* ── Settings + account surfaces ── */
html[data-theme="glass"] body:not(.login-page) .settings-menu-button,
html[data-theme="glass"] body:not(.login-page) .settings-section-card,
html[data-theme="glass"] body:not(.login-page) .settings-detail-card,
html[data-theme="glass"] body:not(.login-page) .settings-password-row,
html[data-theme="glass"] body:not(.login-page) .settings-toggle-row,
html[data-theme="glass"] body:not(.login-page) .device-card {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-theme="glass"] body:not(.login-page) .settings-menu-button:hover,
html[data-theme="glass"] body:not(.login-page) .settings-menu-button:focus-visible {
  border-color: rgba(99, 102, 241, 0.45);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.24), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.42));
  box-shadow: 0 18px 42px rgba(40, 50, 90, 0.16), 0 0 30px rgba(99, 102, 241, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .settings-menu-button strong,
html[data-theme="glass"] body:not(.login-page) .settings-section-heading h1,
html[data-theme="glass"] body:not(.login-page) .logout-card h1 {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .settings-menu-button span,
html[data-theme="glass"] body:not(.login-page) .settings-section-heading p,
html[data-theme="glass"] body:not(.login-page) .logout-copy,
html[data-theme="glass"] body:not(.login-page) .settings-password-row small,
html[data-theme="glass"] body:not(.login-page) .settings-toggle-row small,
html[data-theme="glass"] body:not(.login-page) .device-card small {
  color: var(--muted);
}

html[data-theme="glass"] body:not(.login-page) .settings-avatar,
html[data-theme="glass"] body:not(.login-page) .settings-section-icon,
html[data-theme="glass"] body:not(.login-page) .status-pill {
  color: #ffffff;
  border-color: rgba(99, 102, 241, 0.34);
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.32), transparent 35%),
    linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* ── Auth + showcase ── */
html[data-theme="glass"] body:not(.login-page) .auth-story {
  border-color: rgba(255, 255, 255, 0.5);
  background:
    radial-gradient(circle at top right, rgba(99, 102, 241, 0.2), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}

html[data-theme="glass"] body:not(.login-page) .auth-points span,
html[data-theme="glass"] body:not(.login-page) .hero-points span,
html[data-theme="glass"] body:not(.login-page) .hero-note {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.38);
}

html[data-theme="glass"] body:not(.login-page) .showcase-frame {
  background: linear-gradient(145deg, #c7d2fe 0%, #a5b4fc 46%, #6366f1 100%);
}

html[data-theme="glass"] body:not(.login-page) .showcase-card {
  border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.36));
}

/* ── Video hero (kept dark for legible overlay text) ── */
html[data-theme="glass"] body:not(.login-page) .video-hero {
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.4), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(45, 212, 191, 0.3), transparent 28%),
    linear-gradient(140deg, #1e2440 0%, #312e81 48%, #0f172a 100%);
}

html[data-theme="glass"] body:not(.login-page) .video-hero .eyebrow,
html[data-theme="glass"] body:not(.login-page) .video-hero h1,
html[data-theme="glass"] body:not(.login-page) .video-hero-content > p:not(.eyebrow) {
  color: #ffffff;
}

html[data-theme="glass"] body:not(.login-page) .video-hero .button.secondary.light {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(49, 46, 129, 0.45);
}

/* ── Home summary band (dark by design) ── */
html[data-theme="glass"] body:not(.login-page) .home-summary {
  color: #ffffff;
  background:
    radial-gradient(circle at 10% 0%, rgba(129, 140, 248, 0.28), transparent 28%),
    linear-gradient(180deg, #1e2440, #312e81);
}

html[data-theme="glass"] body:not(.login-page) .home-summary h2,
html[data-theme="glass"] body:not(.login-page) .home-summary h3,
html[data-theme="glass"] body:not(.login-page) .home-summary strong {
  color: #ffffff;
}

html[data-theme="glass"] body:not(.login-page) .summary-list,
html[data-theme="glass"] body:not(.login-page) .summary-list article {
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .summary-list p,
html[data-theme="glass"] body:not(.login-page) .summary-list span,
html[data-theme="glass"] body:not(.login-page) .home-summary .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

/* ── Preference selects ── */
html[data-theme="glass"] body:not(.login-page) .theme-select,
html[data-theme="glass"] body:not(.login-page) .language-select {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Scanner / check-in surfaces ── */
html[data-theme="glass"] body:not(.login-page) .scanner-box {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

html[data-theme="glass"] body:not(.login-page) .scanner-camera {
  border-color: rgba(99, 102, 241, 0.3);
  background:
    radial-gradient(circle at 50% 42%, rgba(99, 102, 241, 0.18), transparent 28%),
    linear-gradient(145deg, #1e2440, #312e81);
}

html[data-theme="glass"] body:not(.login-page) .scanner-camera-placeholder {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(20, 24, 48, 0.42);
}

html[data-theme="glass"] body:not(.login-page) .scanner-camera-placeholder strong {
  color: #ffffff;
}

html[data-theme="glass"] body:not(.login-page) .scanner-camera-placeholder span {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="glass"] body:not(.login-page) .scanner-live-result {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(30, 36, 64, 0.94), rgba(15, 23, 42, 0.86));
}

html[data-theme="glass"] body:not(.login-page) .scanner-live-result h3 {
  color: #f4f6ff;
}

html[data-theme="glass"] body:not(.login-page) .scanner-live-result p {
  color: rgba(255, 255, 255, 0.86);
}

html[data-theme="glass"] body:not(.login-page) .scanner-live-capacity {
  color: #1b2230;
  background: rgba(224, 231, 255, 0.7);
}

html[data-theme="glass"] body:not(.login-page) .scanner-fallbacks input[type="file"] {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 540px) {
  /* Keep the photo backdrop on mobile: fall the content containers back to
     transparent so the body image shows (it scrolls rather than fixes here). */
  html[data-theme="glass"] {
    background: #16306e;
  }

  html[data-theme="glass"] main:not(.top-menu-bar),
  html[data-theme="glass"] .page-main,
  html[data-theme="glass"] .home-page main:not(.top-menu-bar),
  html[data-theme="glass"] .home-page .page-main {
    background: transparent;
  }

  html[data-theme="glass"] body::after {
    background: rgba(22, 48, 110, 0.92);
  }

  html[data-theme="glass"] .theme-switcher,
  html[data-theme="glass"] .language-switcher {
    width: 100%;
  }

  html[data-theme="glass"] .theme-select,
  html[data-theme="glass"] .language-select {
    width: 100%;
    max-width: none;
  }

}

/* ════════════════════════════════════════════════════════════
   GLASS — navigation system (top menu bar, account dropdown,
   mobile nav) + luxury refinements. This is the chrome shown on
   every page, so it needs the same frosted treatment as panels.
   ════════════════════════════════════════════════════════════ */

/* ── Account dropdown / mobile menu chrome ── */
html[data-theme="glass"] body:not(.login-page) .account-trigger,
html[data-theme="glass"] body:not(.login-page) .mobile-menu-trigger {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html[data-theme="glass"] body:not(.login-page) .account-avatar,
html[data-theme="glass"] body:not(.login-page) .dropdown-link-strong {
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] body:not(.login-page) .account-dropdown,
html[data-theme="glass"] body:not(.login-page) .mobile-nav-panel {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52));
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: 0 24px 60px rgba(40, 50, 90, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html[data-theme="glass"] body:not(.login-page) .dropdown-link,
html[data-theme="glass"] body:not(.login-page) .mobile-nav-links a,
html[data-theme="glass"] body:not(.login-page) .mobile-logout,
html[data-theme="glass"] body:not(.login-page) .nav-preference {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .dropdown-link:hover,
html[data-theme="glass"] body:not(.login-page) .dropdown-link:focus-visible,
html[data-theme="glass"] body:not(.login-page) .mobile-nav-links a:hover,
html[data-theme="glass"] body:not(.login-page) .mobile-nav-links a:focus-visible {
  background: rgba(99, 102, 241, 0.14);
}

html[data-theme="glass"] body:not(.login-page) .dropdown-link-danger {
  color: #a01b34;
}

html[data-theme="glass"] body:not(.login-page) .dropdown-divider {
  background: rgba(99, 102, 241, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .dropdown-label {
  color: #4c5670;
}

/* ── Top menu bar (primary navbar) ── */
html[data-theme="glass"] body:not(.login-page) .top-menu-bar {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 18px 44px rgba(40, 50, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .brand,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .desktop-nav a,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .nav-preference {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .brand-name {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .desktop-nav {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.32);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .account-trigger {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(255, 255, 255, 0.42);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .desktop-nav a:hover,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .desktop-nav a:focus-visible,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link:hover,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link:focus-visible {
  background: rgba(99, 102, 241, 0.14);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .account-avatar,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link-strong {
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .account-dropdown {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52));
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link-danger {
  color: #a01b34;
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-divider {
  background: rgba(99, 102, 241, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-label {
  color: #4c5670;
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .theme-select,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .language-select {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.5);
}

/* ── Luxury refinement: glinting primary action + richer hovers ── */
html[data-theme="glass"] body:not(.login-page) .button.primary,
html[data-theme="glass"] body:not(.login-page) .nav-cta {
  position: relative;
  overflow: hidden;
}

html[data-theme="glass"] body:not(.login-page) .button.primary::before,
html[data-theme="glass"] body:not(.login-page) .nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, 0.4) 50%, transparent 64%);
  transform: translateX(-150%);
  animation: sage-shimmer 16s linear infinite;
  pointer-events: none;
}

html[data-theme="glass"] body:not(.login-page) .button.primary:hover,
html[data-theme="glass"] body:not(.login-page) .nav-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(99, 102, 241, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

html[data-theme="glass"] body:not(.login-page) .section-grid article:hover,
html[data-theme="glass"] body:not(.login-page) .panel:hover,
html[data-theme="glass"] body:not(.login-page) .price-card:hover,
html[data-theme="glass"] body:not(.login-page) .metric-grid article:hover,
html[data-theme="glass"] body:not(.login-page) .timeline-grid article:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(99, 102, 241, 0.06),
    0 30px 66px rgba(40, 50, 90, 0.2),
    0 6px 16px rgba(99, 102, 241, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass"] body:not(.login-page) .button.primary::before,
  html[data-theme="glass"] body:not(.login-page) .nav-cta::before {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════
   GLASS — remaining page surfaces (cookie banner, about, feedback,
   QR, video hero, mobile preferences) so no Noir leaks
   through on secondary pages.
   ════════════════════════════════════════════════════════════ */

/* ── Cookie consent banner (shown to every new visitor) ── */
html[data-theme="glass"] .cookie-consent-card {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.6);
  background:
    radial-gradient(circle at 96% 0%, rgba(99, 102, 241, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: 0 24px 70px rgba(40, 50, 90, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="glass"] .cookie-consent-copy h2 {
  color: #4f46e5;
}

html[data-theme="glass"] .cookie-consent-copy p:last-child,
html[data-theme="glass"] .cookie-option small {
  color: #4c5670;
}

html[data-theme="glass"] .cookie-option {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.5);
}

html[data-theme="glass"] .cookie-option.is-essential {
  border-color: rgba(99, 102, 241, 0.3);
}

html[data-theme="glass"] .cookie-option input {
  border-color: rgba(99, 102, 241, 0.46);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="glass"] .cookie-option input:checked {
  border-color: #6366f1;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] .cookie-option input:checked::before {
  border-color: #ffffff;
}

html[data-theme="glass"] .cookie-option input:focus-visible {
  outline-color: rgba(99, 102, 241, 0.28);
}

/* ── About page ── */
html[data-theme="glass"] body:not(.login-page) .about-brand-card {
  background: transparent;
  box-shadow: none;
}

html[data-theme="glass"] body:not(.login-page) .about-story-intro,
html[data-theme="glass"] body:not(.login-page) .about-columns,
html[data-theme="glass"] body:not(.login-page) .about-workflow-note,
html[data-theme="glass"] body:not(.login-page) .about-founder-note {
  border-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="glass"] body:not(.login-page) .about-brand-card strong,
html[data-theme="glass"] body:not(.login-page) .about-story-intro h2,
html[data-theme="glass"] body:not(.login-page) .about-mission-grid h3,
html[data-theme="glass"] body:not(.login-page) .about-columns h3,
html[data-theme="glass"] body:not(.login-page) .about-workflow-note span {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .about-mission-grid article::before,
html[data-theme="glass"] body:not(.login-page) .about-columns article::before {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

/* ── Feedback page ── */
html[data-theme="glass"] body:not(.login-page) .workflow-notice {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.1);
}

html[data-theme="glass"] body:not(.login-page) .workflow-notice strong {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .workflow-notice p {
  color: #4c5670;
}

html[data-theme="glass"] body:not(.login-page) .code-block {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(99, 102, 241, 0.08);
}

html[data-theme="glass"] body:not(.login-page) .summary-body,
html[data-theme="glass"] body:not(.login-page) .summary-body p {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .badge.badge--high,
html[data-theme="glass"] body:not(.login-page) .badge.badge--critical {
  color: #7a271a;
  background: #fee4e2;
  border-color: rgba(180, 35, 24, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .badge.badge--medium {
  color: #92400e;
  background: #fef3c7;
  border-color: rgba(146, 64, 14, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .badge.badge--low {
  color: #054f31;
  background: #d1fadf;
  border-color: rgba(5, 79, 49, 0.2);
}

/* ── QR code stays on solid white for scannability ── */
html[data-theme="glass"] .qr-wrap {
  color: #050403;
  background: #ffffff;
}

/* ── Video hero (home) keeps a dark, indigo-tinted overlay ── */
html[data-theme="glass"] body:not(.login-page) .video-hero-overlay {
  background:
    linear-gradient(180deg, rgba(20, 24, 48, 0.64) 0%, rgba(20, 24, 48, 0.3) 42%, rgba(20, 24, 48, 0.72) 100%),
    linear-gradient(90deg, rgba(20, 24, 48, 0.5), rgba(20, 24, 48, 0.08) 50%, rgba(20, 24, 48, 0.48));
}

html[data-theme="glass"] body.home-page .video-hero-footer,
html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-brand strong,
html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-desc,
html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-nav a,
html[data-theme="glass"] body.home-page .video-hero-footer .footer-cookie-button {
  color: #ffffff;
}

html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-copy,
html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-attr {
  color: rgba(255, 255, 255, 0.6);
}

html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-nav a:hover,
html[data-theme="glass"] body.home-page .video-hero-footer .footer-cookie-button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

/* ── Mobile preferences in the slide-out menu ── */
html[data-theme="glass"] body:not(.login-page) .mobile-preferences {
  border-top-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="glass"] body:not(.login-page) .mobile-preferences .nav-preference span {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .mobile-preferences .theme-select,
html[data-theme="glass"] body:not(.login-page) .mobile-preferences .language-select {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.5);
}

/* ════════════════════════════════════════════════════════════
   GLASS — login page. The login body re-declares the palette to
   Noir by default, so Glass needs its own override (mirrors
   the Silver Sage login block) or the sign-in screen stays dark.
   ════════════════════════════════════════════════════════════ */
html[data-theme="glass"] body.login-page {
  --bg: #e8edfb;
  --surface: rgba(255, 255, 255, 0.42);
  --surface-strong: rgba(255, 255, 255, 0.60);
  --surface-dark: rgba(255, 255, 255, 0.30);
  --surface-dark-2: rgba(255, 255, 255, 0.22);
  --ink: #1b2230;
  --muted: #4c5670;
  --line: rgba(255, 255, 255, 0.60);
  --line-strong: rgba(255, 255, 255, 0.85);
  --blue: #4f7cf0;
  --blue-deep: #2f53b8;
  --green: #2f9e7e;
  --green-deep: #1f7a60;
  --sky: rgba(99, 102, 241, 0.12);
  --mint: rgba(45, 212, 191, 0.16);
  --red: #d6455e;
  --success: #1f9e6f;
  --shadow: 0 28px 80px rgba(40, 50, 90, 0.22);
  --shadow-soft: 0 18px 44px rgba(40, 50, 90, 0.14);
  --background: #e8edfb;
  --foreground: #1b2230;
  --card: rgba(255, 255, 255, 0.42);
  --card-foreground: #1b2230;
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --secondary: #2f9e7e;
  --accent: #6366f1;
  --border: rgba(255, 255, 255, 0.60);
  --muted-foreground: #4c5670;
  --gradient-start: #eef2ff;
  --gradient-end: #ecfdf7;
  color: var(--foreground);
  background-color: #16306e;
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    url("../img/glass-bg.498407b2cc52.jpg");
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    image-set(url("../img/glass-bg.8c7a1a985cd7.webp") type("image/webp"), url("../img/glass-bg.498407b2cc52.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 900px) and (hover: hover) {
  html[data-theme="glass"] body.login-page {
    background-attachment: fixed;
  }
}

html[data-theme="glass"] body.login-page::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 30%, rgba(255, 255, 255, 0.18) 52%, transparent 78%);
  opacity: 0.5;
}

html[data-theme="glass"] body.login-page a {
  color: #4f46e5;
}

html[data-theme="glass"] body.login-page .page-grid {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
}

/* Login navbar */
html[data-theme="glass"] body.login-page .top-menu-bar {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 18px 44px rgba(40, 50, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="glass"] body.login-page .top-menu-bar .brand,
html[data-theme="glass"] body.login-page .top-menu-bar .brand-name,
html[data-theme="glass"] body.login-page .top-menu-bar .desktop-nav a,
html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-nav-links a,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-logout,
html[data-theme="glass"] body.login-page .top-menu-bar .nav-preference {
  color: #1b2230;
}

html[data-theme="glass"] body.login-page .top-menu-bar .desktop-nav,
html[data-theme="glass"] body.login-page .top-menu-bar .account-trigger,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-menu-trigger {
  border-color: rgba(255, 255, 255, 0.5);
  color: #1b2230;
  background: rgba(255, 255, 255, 0.42);
}

html[data-theme="glass"] body.login-page .top-menu-bar .account-avatar,
html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link-strong {
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] body.login-page .top-menu-bar .account-dropdown,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-nav-panel {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background:
    radial-gradient(circle at 80% 0%, rgba(99, 102, 241, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52));
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
}

html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-label {
  color: #4c5670;
}

html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-divider {
  background: rgba(99, 102, 241, 0.2);
}

html[data-theme="glass"] body.login-page .top-menu-bar .mobile-preferences {
  border-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="glass"] body.login-page .top-menu-bar .desktop-nav a:hover,
html[data-theme="glass"] body.login-page .top-menu-bar .desktop-nav a:focus-visible,
html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link:hover,
html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link:focus-visible {
  background: rgba(99, 102, 241, 0.14);
}

html[data-theme="glass"] body.login-page .top-menu-bar .mobile-nav-links a,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-logout {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.42);
}

html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link-danger {
  color: #a01b34;
}

html[data-theme="glass"] body.login-page .top-menu-bar .theme-select,
html[data-theme="glass"] body.login-page .top-menu-bar .language-select {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.5);
}

/* Login footer */
html[data-theme="glass"] body.login-page .site-footer {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 18px 48px rgba(40, 50, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="glass"] body.login-page .site-footer a,
html[data-theme="glass"] body.login-page .site-footer p {
  color: #4c5670;
}

/* Auth shell + form */
html[data-theme="glass"] body.login-page .login-auth-shell {
  color: #1b2230;
}

html[data-theme="glass"] body.login-page .auth-form {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.36));
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="glass"] body.login-page .auth-form h2,
html[data-theme="glass"] body.login-page .auth-form label {
  color: #1b2230;
}

html[data-theme="glass"] body.login-page .auth-form p {
  color: #4c5670;
}

html[data-theme="glass"] body.login-page .login-eyebrow {
  color: #4f46e5;
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(99, 102, 241, 0.12);
}

html[data-theme="glass"] body.login-page .login-eyebrow span + span::before {
  color: rgba(76, 86, 112, 0.72);
}

/* Login inputs (also covers .auth-shell .form-shell parity) */
html[data-theme="glass"] body.login-page input,
html[data-theme="glass"] body.login-page select,
html[data-theme="glass"] body.login-page textarea,
html[data-theme="glass"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="glass"] body.login-page .auth-form select,
html[data-theme="glass"] body.login-page .auth-form textarea {
  color: #1b2230;
  -webkit-text-fill-color: #1b2230;
  caret-color: #6366f1;
  border-color: rgba(99, 102, 241, 0.32);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 3px rgba(40, 50, 90, 0.05);
  color-scheme: light;
}

html[data-theme="glass"] body.login-page input::placeholder,
html[data-theme="glass"] body.login-page textarea::placeholder {
  color: rgba(76, 86, 112, 0.72);
  -webkit-text-fill-color: rgba(76, 86, 112, 0.72);
}

html[data-theme="glass"] body.login-page input:hover,
html[data-theme="glass"] body.login-page select:hover,
html[data-theme="glass"] body.login-page textarea:hover,
html[data-theme="glass"] body.login-page input:focus-visible,
html[data-theme="glass"] body.login-page select:focus-visible,
html[data-theme="glass"] body.login-page textarea:focus-visible {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.14);
}

html[data-theme="glass"] body.login-page input:-webkit-autofill,
html[data-theme="glass"] body.login-page input:-webkit-autofill:hover,
html[data-theme="glass"] body.login-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1b2230;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.78) inset;
  caret-color: #6366f1;
}

html[data-theme="glass"] body.login-page .button.primary {
  color: #ffffff;
  border-color: rgba(99, 102, 241, 0.5);
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 52%, #ec4899 100%);
  box-shadow: 0 16px 34px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme="glass"] body.login-page .message {
  color: #15543c;
  border-color: rgba(31, 158, 111, 0.28);
  background: rgba(236, 253, 245, 0.7);
}

html[data-theme="glass"] body.login-page .errorlist {
  color: #a01b34;
  border-color: rgba(214, 69, 94, 0.3);
  background: rgba(254, 242, 244, 0.7);
}

/* ════════════════════════════════════════════════════════════
   GLASS — components only the default (Noir) styled. These
   have NO Silver Sage override either, so they hardcode gold and
   leaked into Glass. Found by auditing against Noir, the
   most complete theme. (RSVP / payment / SMS — guest-facing.)
   ════════════════════════════════════════════════════════════ */

/* RSVP status (shown to guests) — base/pending state was gold */
html[data-theme="glass"] body:not(.login-page) .rsvp-status-card {
  border-color: rgba(99, 102, 241, 0.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

html[data-theme="glass"] body:not(.login-page) .rsvp-inline-status {
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html[data-theme="glass"] body:not(.login-page) .rsvp-inline-status.is-pending {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.1);
}

/* Payment + refund surfaces */
html[data-theme="glass"] body:not(.login-page) .payment-method-card {
  border-color: rgba(99, 102, 241, 0.32);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

html[data-theme="glass"] body:not(.login-page) .payment-summary-card,
html[data-theme="glass"] body:not(.login-page) .refund-policy-card,
html[data-theme="glass"] body:not(.login-page) .refund-panel {
  border-color: rgba(99, 102, 241, 0.36);
}

html[data-theme="glass"] body:not(.login-page) .sms-copy-panel summary {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .sms-copy-panel p {
  border-color: rgba(99, 102, 241, 0.22);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Danger button: red is semantic, just drop the warm cream text */
html[data-theme="glass"] body:not(.login-page) .danger-button {
  color: #ffffff;
}

/* ════════════════════════════════════════════════════════════
   GLASS — home page nav. Over the video the navbar must read as the
   Glass theme (frosted blue, indigo accents) — NOT the shared gold
   cinematic look. A blue tint + blur + light text keep it legible
   over any video frame. End-of-file + doubled specificity so this
   beats the theme-agnostic home block and the inline critical CSS.
   ════════════════════════════════════════════════════════════ */
html[data-theme="glass"] body.home-page .top-menu-bar.top-menu-bar {
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  background: linear-gradient(180deg, rgba(34, 44, 92, 0.46), rgba(20, 28, 66, 0.40));
  box-shadow: 0 18px 48px rgba(10, 16, 40, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
}

html[data-theme="glass"] body.home-page .top-menu-bar .brand,
html[data-theme="glass"] body.home-page .top-menu-bar .desktop-nav a,
html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-link,
html[data-theme="glass"] body.home-page .top-menu-bar .mobile-nav-links a,
html[data-theme="glass"] body.home-page .top-menu-bar .mobile-logout,
html[data-theme="glass"] body.home-page .top-menu-bar .nav-preference {
  color: #ffffff;
}

html[data-theme="glass"] body.home-page .top-menu-bar .brand-name {
  color: #c7d2fe;
}

html[data-theme="glass"] body.home-page .top-menu-bar .desktop-nav,
html[data-theme="glass"] body.home-page .top-menu-bar .account-trigger,
html[data-theme="glass"] body.home-page .top-menu-bar .mobile-menu-trigger {
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="glass"] body.home-page .top-menu-bar .desktop-nav a:hover,
html[data-theme="glass"] body.home-page .top-menu-bar .desktop-nav a:focus-visible,
html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-link:hover,
html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-link:focus-visible {
  background: rgba(99, 102, 241, 0.32);
}

html[data-theme="glass"] body.home-page .top-menu-bar .account-dropdown,
html[data-theme="glass"] body.home-page .top-menu-bar .mobile-nav-panel {
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  background:
    radial-gradient(circle at 80% 0%, rgba(99, 102, 241, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(26, 34, 74, 0.86), rgba(16, 22, 54, 0.82));
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
}

html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-label {
  color: rgba(255, 255, 255, 0.66);
}

html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-divider {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-link-danger {
  color: #ffb4c0;
}

/* account-avatar / dropdown-link-strong keep Glass's indigo from the main block. */

html[data-theme="glass"] body.home-page .top-menu-bar .theme-select,
html[data-theme="glass"] body.home-page .top-menu-bar .language-select {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(20, 28, 64, 0.85);
  color-scheme: dark;
}

/* ════════════════════════════════════════════════════════════
   NOIR — photographic backgrounds, mapped per page.
   • main/default pages → gold silk ribbons (dark centre for content)
   • contact page       → gold chevron frame
   • login page         → atmospheric gold dust
   A soft obsidian scrim keeps the dark panels and cream text legible
   while the gold detail still reads. High specificity + end-of-file
   order so these beat the luxury obsidian-gradient body rules above.
   ════════════════════════════════════════════════════════════ */
html[data-theme="noir"] body:not(.login-page):not(.contact-page) {
  background-color: #050403;
  background-image:
    linear-gradient(180deg, rgba(8, 6, 3, 0.42) 0%, rgba(5, 4, 3, 0.58) 100%),
    url("../img/noir-main.c9a378c1980f.jpg");
  background-image:
    linear-gradient(180deg, rgba(8, 6, 3, 0.42) 0%, rgba(5, 4, 3, 0.58) 100%),
    image-set(url("../img/noir-main.2acf4d7c7d9d.webp") type("image/webp"), url("../img/noir-main.c9a378c1980f.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

html[data-theme="noir"] body.contact-page {
  background-color: #050403;
  background-image:
    linear-gradient(180deg, rgba(8, 6, 3, 0.40) 0%, rgba(5, 4, 3, 0.56) 100%),
    url("../img/noir-contact.9d4fb1e75da2.jpg");
  background-image:
    linear-gradient(180deg, rgba(8, 6, 3, 0.40) 0%, rgba(5, 4, 3, 0.56) 100%),
    image-set(url("../img/noir-contact.a7196d957eaa.webp") type("image/webp"), url("../img/noir-contact.9d4fb1e75da2.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

html[data-theme="noir"] body.login-page {
  background-color: #050403;
  background-image:
    linear-gradient(180deg, rgba(5, 4, 3, 0.52) 0%, rgba(5, 4, 3, 0.40) 55%, rgba(5, 4, 3, 0.58) 100%),
    url("../img/noir-login.89f5a36c815c.jpg");
  background-image:
    linear-gradient(180deg, rgba(5, 4, 3, 0.52) 0%, rgba(5, 4, 3, 0.40) 55%, rgba(5, 4, 3, 0.58) 100%),
    image-set(url("../img/noir-login.650c16c8566f.webp") type("image/webp"), url("../img/noir-login.89f5a36c815c.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Pin the backdrop on capable, non-touch viewports. */
@media (min-width: 900px) and (hover: hover) {
  html[data-theme="noir"] body:not(.login-page):not(.contact-page),
  html[data-theme="noir"] body.contact-page,
  html[data-theme="noir"] body.login-page {
    background-attachment: fixed;
  }
}

/* Mobile: let the content containers fall back to transparent so the body
   photo shows (it scrolls here rather than fixing). */
@media (max-width: 540px) {
  html[data-theme="noir"] main:not(.top-menu-bar),
  html[data-theme="noir"] .page-main,
  html[data-theme="noir"] .home-page main:not(.top-menu-bar),
  html[data-theme="noir"] .home-page .page-main {
    background: transparent;
  }
}

/* ════════════════════════════════════════════════════════════
   CLAY THEME — claymorphism. Opaque pastel surfaces that look
   soft-extruded ("puffy") via a coloured outer drop + light/dark
   insets, generous radii, no translucency. Scoped to
   body:not(.login-page) at end-of-file so it outranks the default
   (Noir) body block and re-declares the palette.
   ════════════════════════════════════════════════════════════ */
html[data-theme="clay"] {
  background: #f1e4ea;
}

html[data-theme="clay"] body:not(.login-page) {
  --bg: #f1e4ea;
  --surface: #faf0f4;
  --surface-strong: #fdf7f9;
  --surface-dark: #ecd9e1;
  --surface-dark-2: #e3ccd6;
  --ink: #4a2740;
  --muted: #8a6079;
  --line: #f0d8e2;
  --line-strong: #ffffff;
  --blue: #5b8def;
  --blue-deep: #3a64c4;
  --green: #1fb89a;
  --green-deep: #138a73;
  --sky: #eef1fe;
  --mint: #e3f6f1;
  --red: #ff6b81;
  --success: #16a34a;
  --background: #f1e4ea;
  --foreground: #4a2740;
  --card: #faf0f4;
  --card-foreground: #4a2740;
  --primary: #e8568f;
  --primary-foreground: #ffffff;
  --secondary: #1fb89a;
  --accent: #e8568f;
  --border: #f0d8e2;
  --muted-foreground: #8a6079;
  --gradient-start: #faeaf1;
  --gradient-end: #fdecf3;
  color: var(--foreground);
  background-color: #d94f86;
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    url("../img/clay-bg.86e1b6062d4f.jpg");
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    image-set(url("../img/clay-bg.400981ca1deb.webp") type("image/webp"), url("../img/clay-bg.86e1b6062d4f.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 900px) and (hover: hover) {
  html[data-theme="clay"] body:not(.login-page) {
    background-attachment: fixed;
  }
}

html[data-theme="clay"] body:not(.login-page)::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 32%, rgba(255, 255, 255, 0.18) 56%, transparent 80%);
  opacity: 0.5;
}

html[data-theme="clay"] body:not(.login-page) a {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .page-grid {
  opacity: 0.10;
  background-image:
    linear-gradient(rgba(232, 86, 143, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 86, 143, 0.08) 1px, transparent 1px);
}

/* ── Chrome: header, footer, nav (puffy clay) ── */
html[data-theme="clay"] body:not(.login-page) .site-footer {
  border: 1px solid #ffffff;
  border-radius: 26px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .brand,
html[data-theme="clay"] body:not(.login-page) .site-nav a,
html[data-theme="clay"] body:not(.login-page) .link-button,
html[data-theme="clay"] body:not(.login-page) .site-footer,
html[data-theme="clay"] body:not(.login-page) .site-footer a {
  color: #4a2740;
}

html[data-theme="clay"] body:not(.login-page) .brand-name,
html[data-theme="clay"] body:not(.login-page) .feature-banner h2,
html[data-theme="clay"] body:not(.login-page) .panel h2,
html[data-theme="clay"] body:not(.login-page) .price-card h2,
html[data-theme="clay"] body:not(.login-page) .section-grid h3,
html[data-theme="clay"] body:not(.login-page) .timeline-grid h3 {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .site-nav {
  border: none;
  border-radius: 18px;
  background: #f1dfe8;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.4), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] body:not(.login-page) .site-nav a::after,
html[data-theme="clay"] body:not(.login-page) .section-grid article::before,
html[data-theme="clay"] body:not(.login-page) .price-card::before {
  background: linear-gradient(90deg, #e8568f, #ff8aa6, #2bc7a6);
}

html[data-theme="clay"] body:not(.login-page) .site-nav a:hover,
html[data-theme="clay"] body:not(.login-page) .site-nav a:focus-visible,
html[data-theme="clay"] body:not(.login-page) .link-button:hover,
html[data-theme="clay"] body:not(.login-page) .link-button:focus-visible {
  background: rgba(232, 86, 143, 0.12);
}

/* ── Primary actions: puffy clay button ── */
html[data-theme="clay"] body:not(.login-page) .button.primary,
html[data-theme="clay"] body:not(.login-page) .nav-cta,
html[data-theme="clay"] body:not(.login-page) .site-nav a.nav-account-settings {
  color: #ffffff;
  border: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #ee6fa0 0%, #e8568f 50%, #cf3f78 100%);
  box-shadow:
    8px 10px 20px rgba(207, 63, 120, 0.40),
    -5px -6px 14px rgba(255, 255, 255, 0.55),
    inset 2px 2px 5px rgba(255, 255, 255, 0.45),
    inset -3px -4px 8px rgba(175, 45, 100, 0.55);
}

html[data-theme="clay"] body:not(.login-page) .button.primary:hover,
html[data-theme="clay"] body:not(.login-page) .nav-cta:hover {
  transform: translateY(-3px);
}

html[data-theme="clay"] body:not(.login-page) .button.primary:active,
html[data-theme="clay"] body:not(.login-page) .nav-cta:active {
  transform: translateY(1px);
  box-shadow:
    inset 4px 4px 10px rgba(175, 45, 100, 0.6),
    inset -3px -3px 8px rgba(255, 255, 255, 0.35);
}

html[data-theme="clay"] body:not(.login-page) .site-nav a.nav-logout {
  color: #c2334a;
  border: none;
  border-radius: 14px;
  background: #f6dde2;
  box-shadow: inset 2px 2px 5px rgba(194, 51, 74, 0.18), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
}

html[data-theme="clay"] body:not(.login-page) .site-nav a.nav-logout:hover,
html[data-theme="clay"] body:not(.login-page) .site-nav a.nav-logout:focus-visible {
  color: #ffffff;
  background: #ff6b81;
}

html[data-theme="clay"] body:not(.login-page) .button.secondary,
html[data-theme="clay"] body:not(.login-page) .button.secondary.light {
  color: #7a4060;
  border: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #fcf1f6, #f1dde8);
  box-shadow: var(--shadow-lift);
}

html[data-theme="clay"] body:not(.login-page) .button:focus-visible,
html[data-theme="clay"] body:not(.login-page) .nav-cta:focus-visible,
html[data-theme="clay"] body:not(.login-page) .tab-nav a:focus-visible,
html[data-theme="clay"] body:not(.login-page) a:focus-visible,
html[data-theme="clay"] body:not(.login-page) input:focus-visible,
html[data-theme="clay"] body:not(.login-page) select:focus-visible,
html[data-theme="clay"] body:not(.login-page) textarea:focus-visible,
html[data-theme="clay"] body:not(.login-page) button:focus-visible {
  outline-color: rgba(232, 86, 143, 0.55);
}

/* ── Core surfaces: puffy clay cards ── */
html[data-theme="clay"] body:not(.login-page) .hero,
html[data-theme="clay"] body:not(.login-page) .band,
html[data-theme="clay"] body:not(.login-page) .workflow,
html[data-theme="clay"] body:not(.login-page) .page-hero,
html[data-theme="clay"] body:not(.login-page) .dashboard-head,
html[data-theme="clay"] body:not(.login-page) .section-grid article,
html[data-theme="clay"] body:not(.login-page) .panel,
html[data-theme="clay"] body:not(.login-page) .price-card,
html[data-theme="clay"] body:not(.login-page) .limit-card,
html[data-theme="clay"] body:not(.login-page) .feature-status,
html[data-theme="clay"] body:not(.login-page) .table-panel,
html[data-theme="clay"] body:not(.login-page) .filter-bar,
html[data-theme="clay"] body:not(.login-page) .result-card,
html[data-theme="clay"] body:not(.login-page) .metric-grid article,
html[data-theme="clay"] body:not(.login-page) .timeline-grid article {
  border: 1px solid #ffffff;
  border-radius: 28px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .hero,
html[data-theme="clay"] body:not(.login-page) .page-hero,
html[data-theme="clay"] body:not(.login-page) .dashboard-head {
  background:
    radial-gradient(circle at 88% 8%, rgba(240, 130, 178, 0.22), transparent 36%),
    radial-gradient(circle at 6% 92%, rgba(64, 220, 200, 0.18), transparent 38%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
}

html[data-theme="clay"] body:not(.login-page) .band,
html[data-theme="clay"] body:not(.login-page) .workflow {
  background: linear-gradient(145deg, #fcf0f5, #f4e0ea);
}

html[data-theme="clay"] body:not(.login-page) .page-hero::before,
html[data-theme="clay"] body:not(.login-page) .dashboard-head::before,
html[data-theme="clay"] body:not(.login-page) .band::before,
html[data-theme="clay"] body:not(.login-page) .workflow::before {
  background: linear-gradient(90deg, rgba(240, 130, 178, 0.14), transparent 40%);
  opacity: 0.5;
}

/* ── Type colours ── */
html[data-theme="clay"] body:not(.login-page) .hero-copy h1,
html[data-theme="clay"] body:not(.login-page) .page-hero h1,
html[data-theme="clay"] body:not(.login-page) .dashboard-head h1,
html[data-theme="clay"] body:not(.login-page) .auth-story h1,
html[data-theme="clay"] body:not(.login-page) .summary-heading h2,
html[data-theme="clay"] body:not(.login-page) .section-intro h2,
html[data-theme="clay"] body:not(.login-page) strong,
html[data-theme="clay"] body:not(.login-page) h1,
html[data-theme="clay"] body:not(.login-page) h2,
html[data-theme="clay"] body:not(.login-page) h3,
html[data-theme="clay"] body:not(.login-page) label,
html[data-theme="clay"] body:not(.login-page) td {
  color: #4a2740;
}

html[data-theme="clay"] body:not(.login-page) .hero-copy p,
html[data-theme="clay"] body:not(.login-page) .page-hero p,
html[data-theme="clay"] body:not(.login-page) .dashboard-subtitle,
html[data-theme="clay"] body:not(.login-page) .section-intro p,
html[data-theme="clay"] body:not(.login-page) .feature-banner p:last-child,
html[data-theme="clay"] body:not(.login-page) .auth-story p,
html[data-theme="clay"] body:not(.login-page) .invite-intro,
html[data-theme="clay"] body:not(.login-page) p,
html[data-theme="clay"] body:not(.login-page) .metric-grid p,
html[data-theme="clay"] body:not(.login-page) .helptext,
html[data-theme="clay"] body:not(.login-page) small,
html[data-theme="clay"] body:not(.login-page) .list-row span,
html[data-theme="clay"] body:not(.login-page) .guest-summary span,
html[data-theme="clay"] body:not(.login-page) th {
  color: var(--muted);
}

html[data-theme="clay"] body:not(.login-page) .eyebrow,
html[data-theme="clay"] body:not(.login-page) .small-label,
html[data-theme="clay"] body:not(.login-page) .hero-copy .eyebrow,
html[data-theme="clay"] body:not(.login-page) .page-hero > .eyebrow,
html[data-theme="clay"] body:not(.login-page) .dashboard-head .eyebrow,
html[data-theme="clay"] body:not(.login-page) .pricing-note .eyebrow,
html[data-theme="clay"] body:not(.login-page) .feature-banner .eyebrow,
html[data-theme="clay"] body:not(.login-page) .auth-form .eyebrow {
  color: #cf3f78;
  background: transparent;
}

html[data-theme="clay"] body:not(.login-page) .price,
html[data-theme="clay"] body:not(.login-page) .metric-grid span,
html[data-theme="clay"] body:not(.login-page) .limit-card strong {
  color: #cf3f78;
}

/* ── Accent chips, badges, icons (small puffy) ── */
html[data-theme="clay"] body:not(.login-page) .badge,
html[data-theme="clay"] body:not(.login-page) .price-badge,
html[data-theme="clay"] body:not(.login-page) .status-chip,
html[data-theme="clay"] body:not(.login-page) .feature-icon,
html[data-theme="clay"] body:not(.login-page) .timeline-grid span,
html[data-theme="clay"] body:not(.login-page) .required-marker,
html[data-theme="clay"] body:not(.login-page) p:has(.tz-phone-input)::before,
html[data-theme="clay"] body:not(.login-page) .form-field:has(.tz-phone-input)::before {
  color: #ffffff;
  border: none;
  background: linear-gradient(145deg, #f08bb2, #e8568f);
  box-shadow: 3px 4px 10px rgba(207, 63, 120, 0.34), inset 1px 1px 3px rgba(255, 255, 255, 0.5);
}

html[data-theme="clay"] body:not(.login-page) .feature-banner,
html[data-theme="clay"] body:not(.login-page) .list-row,
html[data-theme="clay"] body:not(.login-page) .tab-nav a {
  border: 1px solid #ffffff;
  border-radius: 18px;
  background: linear-gradient(145deg, #fcf0f5, #f5e1ea);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) #id_package label {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 18px;
  background: linear-gradient(145deg, #fcf0f5, #f5e1ea);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) #id_package label:has(input:checked),
html[data-theme="clay"] body:not(.login-page) .limit-card {
  border-color: rgba(232, 86, 143, 0.4);
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 86, 143, 0.16), transparent 36%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
}

html[data-theme="clay"] body:not(.login-page) #id_package label:has(input:checked) {
  color: #3c1f33;
  box-shadow: var(--shadow-lift);
}

html[data-theme="clay"] body:not(.login-page) #id_package input {
  accent-color: #e8568f;
}

html[data-theme="clay"] body:not(.login-page) .feature-status.included {
  border-color: rgba(31, 184, 154, 0.32);
  background: #d8f5ee;
}

html[data-theme="clay"] body:not(.login-page) .feature-status.locked {
  border-color: rgba(255, 107, 129, 0.3);
  background: #fde2e7;
}

html[data-theme="clay"] body:not(.login-page) .feature-status.included span {
  color: #ffffff;
  background: #1fb89a;
}

html[data-theme="clay"] body:not(.login-page) .feature-status.locked span {
  color: #ffffff;
  background: #ff6b81;
}

/* ── Form controls: recessed (pressed-in) clay ── */
html[data-theme="clay"] body:not(.login-page) input,
html[data-theme="clay"] body:not(.login-page) select,
html[data-theme="clay"] body:not(.login-page) textarea {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  border-radius: 14px;
  background: #f3e1ea;
  box-shadow: inset 4px 4px 9px rgba(200, 140, 170, 0.45), inset -4px -4px 9px rgba(255, 255, 255, 0.92);
}

html[data-theme="clay"] body:not(.login-page) input::placeholder,
html[data-theme="clay"] body:not(.login-page) textarea::placeholder {
  color: rgba(138, 96, 121, 0.72);
  -webkit-text-fill-color: rgba(138, 96, 121, 0.72);
}

html[data-theme="clay"] body:not(.login-page) input:hover,
html[data-theme="clay"] body:not(.login-page) select:hover,
html[data-theme="clay"] body:not(.login-page) textarea:hover,
html[data-theme="clay"] body:not(.login-page) input:focus-visible,
html[data-theme="clay"] body:not(.login-page) select:focus-visible,
html[data-theme="clay"] body:not(.login-page) textarea:focus-visible {
  box-shadow: inset 4px 4px 9px rgba(200, 140, 170, 0.5), inset -4px -4px 9px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(232, 86, 143, 0.18);
}

/* ── Tables, code, messages ── */
html[data-theme="clay"] body:not(.login-page) th,
html[data-theme="clay"] body:not(.login-page) td {
  border-bottom-color: rgba(232, 86, 143, 0.16);
}

html[data-theme="clay"] body:not(.login-page) th {
  background: linear-gradient(90deg, rgba(232, 86, 143, 0.12), rgba(255, 255, 255, 0.3));
}

html[data-theme="clay"] body:not(.login-page) tbody tr:hover td,
html[data-theme="clay"] body:not(.login-page) code {
  background: rgba(232, 86, 143, 0.1);
}

html[data-theme="clay"] body:not(.login-page) code {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .message {
  color: #0f6b51;
  border: none;
  border-radius: 16px;
  background: #d8f5ee;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .form-error-summary {
  color: #c2334a;
  border: none;
  border-radius: 16px;
  background: #fde2e7;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .form-error-summary strong,
html[data-theme="clay"] body:not(.login-page) .form-error-summary p {
  color: #c2334a;
}

html[data-theme="clay"] body:not(.login-page) .result-card.success {
  border-color: rgba(31, 184, 154, 0.34);
  background: #dcf6ef;
}

html[data-theme="clay"] body:not(.login-page) .result-card.warning {
  border-color: rgba(255, 107, 129, 0.34);
  background: #fde4e9;
}

/* ── Settings + account surfaces ── */
html[data-theme="clay"] body:not(.login-page) .settings-menu-button,
html[data-theme="clay"] body:not(.login-page) .settings-section-card,
html[data-theme="clay"] body:not(.login-page) .settings-detail-card,
html[data-theme="clay"] body:not(.login-page) .settings-password-row,
html[data-theme="clay"] body:not(.login-page) .settings-toggle-row,
html[data-theme="clay"] body:not(.login-page) .device-card {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 86, 143, 0.12), transparent 36%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .settings-menu-button:hover,
html[data-theme="clay"] body:not(.login-page) .settings-menu-button:focus-visible {
  box-shadow: var(--shadow-lift);
}

html[data-theme="clay"] body:not(.login-page) .settings-menu-button strong,
html[data-theme="clay"] body:not(.login-page) .settings-section-heading h1,
html[data-theme="clay"] body:not(.login-page) .logout-card h1 {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .settings-menu-button span,
html[data-theme="clay"] body:not(.login-page) .settings-section-heading p,
html[data-theme="clay"] body:not(.login-page) .logout-copy,
html[data-theme="clay"] body:not(.login-page) .settings-password-row small,
html[data-theme="clay"] body:not(.login-page) .settings-toggle-row small,
html[data-theme="clay"] body:not(.login-page) .device-card small {
  color: var(--muted);
}

html[data-theme="clay"] body:not(.login-page) .settings-avatar,
html[data-theme="clay"] body:not(.login-page) .settings-section-icon,
html[data-theme="clay"] body:not(.login-page) .status-pill {
  color: #ffffff;
  border: none;
  background: linear-gradient(145deg, #f08bb2, #e8568f);
  box-shadow: 4px 5px 12px rgba(207, 63, 120, 0.34), inset 1px 1px 3px rgba(255, 255, 255, 0.5);
}

/* ── Auth + showcase ── */
html[data-theme="clay"] body:not(.login-page) .auth-story {
  border: 1px solid #ffffff;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(232, 86, 143, 0.18), transparent 40%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .auth-points span,
html[data-theme="clay"] body:not(.login-page) .hero-points span,
html[data-theme="clay"] body:not(.login-page) .hero-note {
  color: #4a2740;
  border: none;
  border-radius: 14px;
  background: #f9e7f0;
  box-shadow: inset 2px 2px 5px rgba(200, 140, 170, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.85);
}

html[data-theme="clay"] body:not(.login-page) .showcase-frame {
  background: linear-gradient(145deg, #fbc2da 0%, #f593ba 46%, #e8568f 100%);
}

html[data-theme="clay"] body:not(.login-page) .showcase-card {
  border: 1px solid #ffffff;
  border-radius: 24px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

/* ── Video hero (kept rich for legible overlay text) ── */
html[data-theme="clay"] body:not(.login-page) .video-hero {
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 18%, rgba(240, 130, 178, 0.5), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(255, 138, 166, 0.4), transparent 30%),
    linear-gradient(140deg, #6e2d52 0%, #a23a72 48%, #4a1a36 100%);
}

html[data-theme="clay"] body:not(.login-page) .video-hero .eyebrow,
html[data-theme="clay"] body:not(.login-page) .video-hero h1,
html[data-theme="clay"] body:not(.login-page) .video-hero-content > p:not(.eyebrow) {
  color: #ffffff;
}

html[data-theme="clay"] body:not(.login-page) .video-hero .button.secondary.light {
  color: #ffffff;
  border: none;
  background: rgba(150, 58, 108, 0.5);
}

html[data-theme="clay"] body:not(.login-page) .video-hero-overlay {
  background:
    linear-gradient(180deg, rgba(82, 26, 56, 0.62) 0%, rgba(82, 26, 56, 0.28) 42%, rgba(82, 26, 56, 0.7) 100%),
    linear-gradient(90deg, rgba(82, 26, 56, 0.48), rgba(82, 26, 56, 0.06) 50%, rgba(82, 26, 56, 0.46));
}

/* ── Home summary band ── */
html[data-theme="clay"] body:not(.login-page) .home-summary {
  color: #ffffff;
  background:
    radial-gradient(circle at 10% 0%, rgba(245, 158, 196, 0.32), transparent 30%),
    linear-gradient(180deg, #6e2d52, #a23a72);
}

html[data-theme="clay"] body:not(.login-page) .home-summary h2,
html[data-theme="clay"] body:not(.login-page) .home-summary h3,
html[data-theme="clay"] body:not(.login-page) .home-summary strong {
  color: #ffffff;
}

html[data-theme="clay"] body:not(.login-page) .summary-list,
html[data-theme="clay"] body:not(.login-page) .summary-list article {
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="clay"] body:not(.login-page) .summary-list p,
html[data-theme="clay"] body:not(.login-page) .summary-list span,
html[data-theme="clay"] body:not(.login-page) .home-summary .eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

/* ── Preference selects (recessed clay) ── */
html[data-theme="clay"] body:not(.login-page) .theme-select,
html[data-theme="clay"] body:not(.login-page) .language-select {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  border-radius: 12px;
  background: #f3e1ea;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.42), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

/* ════════════════════════════════════════════════════════════
   CLAY — navigation (top menu bar, account dropdown, mobile nav).
   Puffy pastel clay; opaque so it reads over content and the video.
   ════════════════════════════════════════════════════════════ */
html[data-theme="clay"] body:not(.login-page) .top-menu-bar {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .brand,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .desktop-nav a,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .mobile-nav-links a,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .mobile-logout,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .nav-preference {
  color: #4a2740;
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .brand-name {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .desktop-nav {
  border: none;
  background: #f1dfe8;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.38), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .account-trigger,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .mobile-menu-trigger {
  color: #4a2740;
  border: none;
  border-radius: 13px;
  background: linear-gradient(145deg, #fcf0f5, #f1dde8);
  box-shadow: 5px 6px 14px rgba(182, 110, 145, 0.26), -4px -5px 12px rgba(255, 255, 255, 0.75), inset 1px 1px 3px rgba(255, 255, 255, 0.7);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .desktop-nav a:hover,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .desktop-nav a:focus-visible,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link:hover,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link:focus-visible {
  background: rgba(232, 86, 143, 0.14);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .account-avatar,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link-strong {
  color: #ffffff;
  border: none;
  background: linear-gradient(145deg, #f08bb2, #e8568f);
  box-shadow: 3px 4px 9px rgba(207, 63, 120, 0.32), inset 1px 1px 3px rgba(255, 255, 255, 0.5);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .account-dropdown,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .mobile-nav-panel {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-label {
  color: #8a6079;
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-divider {
  background: rgba(232, 86, 143, 0.2);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link-danger {
  color: #c2334a;
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .theme-select,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .language-select {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  border-radius: 12px;
  background: #f3e1ea;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.42), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

/* Home page: clay is opaque, so the same puffy pastel nav reads over the
   video. Re-assert with doubled specificity to beat the shared gold
   cinematic home nav + inline critical CSS. */
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .brand,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .desktop-nav a,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .dropdown-link,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .mobile-nav-links a,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .mobile-logout,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .nav-preference {
  color: #4a2740;
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .brand-name {
  color: #cf3f78;
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .desktop-nav {
  border: none;
  background: #f1dfe8;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.38), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .account-trigger,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .mobile-menu-trigger {
  color: #4a2740;
  border: none;
  background: linear-gradient(145deg, #fcf0f5, #f1dde8);
  box-shadow: 5px 6px 14px rgba(182, 110, 145, 0.26), -4px -5px 12px rgba(255, 255, 255, 0.75), inset 1px 1px 3px rgba(255, 255, 255, 0.7);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .account-dropdown,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .mobile-nav-panel {
  color: #4a2740;
  border: 1px solid #ffffff;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .dropdown-label {
  color: #8a6079;
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .dropdown-divider {
  background: rgba(232, 86, 143, 0.2);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .dropdown-link-danger {
  color: #c2334a;
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .theme-select,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .language-select {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  background: #f3e1ea;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.42), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

/* ════════════════════════════════════════════════════════════
   CLAY — login page. The login body re-declares the palette to
   Noir by default, so Clay needs its own override.
   ════════════════════════════════════════════════════════════ */
html[data-theme="clay"] body.login-page {
  --bg: #f1e4ea;
  --surface: #faf0f4;
  --surface-strong: #fdf7f9;
  --ink: #4a2740;
  --muted: #8a6079;
  --line: #f0d8e2;
  --blue: #5b8def;
  --green: #1fb89a;
  --red: #ff6b81;
  --success: #16a34a;
  --background: #f1e4ea;
  --foreground: #4a2740;
  --card: #faf0f4;
  --card-foreground: #4a2740;
  --primary: #e8568f;
  --primary-foreground: #ffffff;
  --secondary: #1fb89a;
  --accent: #e8568f;
  --border: #f0d8e2;
  --muted-foreground: #8a6079;
  --gradient-start: #faeaf1;
  --gradient-end: #fdecf3;
  color: var(--foreground);
  background-color: #d94f86;
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    url("../img/clay-bg.86e1b6062d4f.jpg");
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    image-set(url("../img/clay-bg.400981ca1deb.webp") type("image/webp"), url("../img/clay-bg.86e1b6062d4f.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 900px) and (hover: hover) {
  html[data-theme="clay"] body.login-page {
    background-attachment: fixed;
  }
}

html[data-theme="clay"] body.login-page::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 32%, rgba(255, 255, 255, 0.18) 56%, transparent 80%);
  opacity: 0.5;
}

html[data-theme="clay"] body.login-page a {
  color: #cf3f78;
}

html[data-theme="clay"] body.login-page .top-menu-bar {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body.login-page .top-menu-bar .brand,
html[data-theme="clay"] body.login-page .top-menu-bar .desktop-nav a,
html[data-theme="clay"] body.login-page .top-menu-bar .dropdown-link,
html[data-theme="clay"] body.login-page .top-menu-bar .mobile-nav-links a,
html[data-theme="clay"] body.login-page .top-menu-bar .nav-preference {
  color: #4a2740;
}

html[data-theme="clay"] body.login-page .top-menu-bar .brand-name {
  color: #cf3f78;
}

html[data-theme="clay"] body.login-page .top-menu-bar .desktop-nav,
html[data-theme="clay"] body.login-page .top-menu-bar .account-trigger,
html[data-theme="clay"] body.login-page .top-menu-bar .mobile-menu-trigger {
  color: #4a2740;
  border: none;
  background: linear-gradient(145deg, #fcf0f5, #f1dde8);
  box-shadow: 5px 6px 14px rgba(182, 110, 145, 0.24), -4px -5px 12px rgba(255, 255, 255, 0.72), inset 1px 1px 3px rgba(255, 255, 255, 0.7);
}

html[data-theme="clay"] body.login-page .top-menu-bar .account-avatar,
html[data-theme="clay"] body.login-page .top-menu-bar .dropdown-link-strong {
  color: #ffffff;
  background: linear-gradient(145deg, #f08bb2, #e8568f);
}

html[data-theme="clay"] body.login-page .top-menu-bar .account-dropdown,
html[data-theme="clay"] body.login-page .top-menu-bar .mobile-nav-panel {
  color: #4a2740;
  border: 1px solid #ffffff;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow);
}

html[data-theme="clay"] body.login-page .top-menu-bar .theme-select,
html[data-theme="clay"] body.login-page .top-menu-bar .language-select {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  background: #f3e1ea;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.42), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] body.login-page .site-footer {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 24px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body.login-page .site-footer a,
html[data-theme="clay"] body.login-page .site-footer p {
  color: #8a6079;
}

html[data-theme="clay"] body.login-page .login-auth-shell {
  color: #4a2740;
}

html[data-theme="clay"] body.login-page .auth-form {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 86, 143, 0.16), transparent 36%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow);
}

html[data-theme="clay"] body.login-page .auth-form h2,
html[data-theme="clay"] body.login-page .auth-form label {
  color: #4a2740;
}

html[data-theme="clay"] body.login-page .auth-form p {
  color: #8a6079;
}

html[data-theme="clay"] body.login-page .login-eyebrow {
  color: #cf3f78;
  border: none;
  background: #f6e1ed;
  box-shadow: inset 2px 2px 5px rgba(200, 140, 170, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.85);
}

html[data-theme="clay"] body.login-page input,
html[data-theme="clay"] body.login-page select,
html[data-theme="clay"] body.login-page textarea,
html[data-theme="clay"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="clay"] body.login-page .auth-form select,
html[data-theme="clay"] body.login-page .auth-form textarea {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  caret-color: #e8568f;
  border: none;
  border-radius: 14px;
  background: #f3e1ea;
  box-shadow: inset 4px 4px 9px rgba(200, 140, 170, 0.45), inset -4px -4px 9px rgba(255, 255, 255, 0.92);
  color-scheme: light;
}

html[data-theme="clay"] body.login-page input::placeholder,
html[data-theme="clay"] body.login-page textarea::placeholder {
  color: rgba(138, 96, 121, 0.72);
  -webkit-text-fill-color: rgba(138, 96, 121, 0.72);
}

html[data-theme="clay"] body.login-page input:-webkit-autofill,
html[data-theme="clay"] body.login-page input:-webkit-autofill:hover,
html[data-theme="clay"] body.login-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: #4a2740;
  -webkit-box-shadow: 0 0 0 1000px #f3e1ea inset;
  caret-color: #e8568f;
}

html[data-theme="clay"] body.login-page .button.primary {
  color: #ffffff;
  border: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #ee6fa0 0%, #e8568f 50%, #cf3f78 100%);
  box-shadow:
    8px 10px 20px rgba(207, 63, 120, 0.40),
    -5px -6px 14px rgba(255, 255, 255, 0.5),
    inset 2px 2px 5px rgba(255, 255, 255, 0.45),
    inset -3px -4px 8px rgba(175, 45, 100, 0.55);
}

html[data-theme="clay"] body.login-page .message {
  color: #0f6b51;
  border: none;
  border-radius: 16px;
  background: #d8f5ee;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body.login-page .errorlist {
  color: #c2334a;
  border: none;
  border-radius: 16px;
  background: #fde2e7;
  box-shadow: var(--shadow-soft);
}

/* ════════════════════════════════════════════════════════════
   CLAY — secondary page surfaces (cookie banner, about, feedback,
   RSVP, payment, scanner) so no Noir leaks through.
   ════════════════════════════════════════════════════════════ */

/* Cookie consent */
html[data-theme="clay"] .cookie-consent-card {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 26px;
  background:
    radial-gradient(circle at 96% 0%, rgba(232, 86, 143, 0.16), transparent 32%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow);
}

html[data-theme="clay"] .cookie-consent-copy h2 {
  color: #cf3f78;
}

html[data-theme="clay"] .cookie-consent-copy p:last-child,
html[data-theme="clay"] .cookie-option small {
  color: #8a6079;
}

html[data-theme="clay"] .cookie-option {
  border: none;
  border-radius: 16px;
  background: #f7e6ee;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.36), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] .cookie-option.is-essential {
  box-shadow: inset 3px 3px 7px rgba(232, 86, 143, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] .cookie-option input {
  border: none;
  background: #ecd7e0;
  box-shadow: inset 2px 2px 4px rgba(200, 140, 170, 0.5);
}

html[data-theme="clay"] .cookie-option input:checked {
  background: linear-gradient(145deg, #f08bb2, #e8568f);
  box-shadow: 2px 2px 6px rgba(207, 63, 120, 0.4);
}

html[data-theme="clay"] .cookie-option input:checked::before {
  border-color: #ffffff;
}

html[data-theme="clay"] .cookie-option input:focus-visible {
  outline-color: rgba(232, 86, 143, 0.4);
}

/* About page */
html[data-theme="clay"] body:not(.login-page) .about-brand-card {
  background: transparent;
  box-shadow: none;
}

html[data-theme="clay"] body:not(.login-page) .about-story-intro,
html[data-theme="clay"] body:not(.login-page) .about-columns,
html[data-theme="clay"] body:not(.login-page) .about-workflow-note,
html[data-theme="clay"] body:not(.login-page) .about-founder-note {
  border-color: #ffffff;
}

html[data-theme="clay"] body:not(.login-page) .about-brand-card strong,
html[data-theme="clay"] body:not(.login-page) .about-story-intro h2,
html[data-theme="clay"] body:not(.login-page) .about-mission-grid h3,
html[data-theme="clay"] body:not(.login-page) .about-columns h3,
html[data-theme="clay"] body:not(.login-page) .about-workflow-note span {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .about-mission-grid article::before,
html[data-theme="clay"] body:not(.login-page) .about-columns article::before {
  background: linear-gradient(90deg, #e8568f, #f08bb2);
}

/* Feedback page */
html[data-theme="clay"] body:not(.login-page) .workflow-notice {
  border: none;
  border-radius: 16px;
  background: #f7e6ee;
  box-shadow: inset 2px 2px 6px rgba(200, 140, 170, 0.3), inset -2px -2px 6px rgba(255, 255, 255, 0.85);
}

html[data-theme="clay"] body:not(.login-page) .workflow-notice strong {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .workflow-notice p {
  color: #8a6079;
}

html[data-theme="clay"] body:not(.login-page) .code-block {
  color: #4a2740;
  border: none;
  border-radius: 14px;
  background: #f7e6ee;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.34), inset -3px -3px 7px rgba(255, 255, 255, 0.88);
}

html[data-theme="clay"] body:not(.login-page) .summary-body,
html[data-theme="clay"] body:not(.login-page) .summary-body p {
  color: #4a2740;
}

html[data-theme="clay"] body:not(.login-page) .badge.badge--high,
html[data-theme="clay"] body:not(.login-page) .badge.badge--critical {
  color: #7a271a;
  background: #fee4e2;
  border-color: rgba(180, 35, 24, 0.2);
}

html[data-theme="clay"] body:not(.login-page) .badge.badge--medium {
  color: #92400e;
  background: #fef3c7;
  border-color: rgba(146, 64, 14, 0.2);
}

html[data-theme="clay"] body:not(.login-page) .badge.badge--low {
  color: #054f31;
  background: #d1fadf;
  border-color: rgba(5, 79, 49, 0.2);
}

/* RSVP status (guest-facing) */
html[data-theme="clay"] body:not(.login-page) .rsvp-status-card {
  border: none;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 86, 143, 0.16), transparent 36%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .rsvp-inline-status {
  border: none;
  border-radius: 18px;
  background: #f7e6ee;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.32), inset -3px -3px 7px rgba(255, 255, 255, 0.88);
}

html[data-theme="clay"] body:not(.login-page) .rsvp-inline-status.is-pending {
  background: rgba(232, 86, 143, 0.12);
}

/* Payment + refund */
html[data-theme="clay"] body:not(.login-page) .payment-method-card {
  border: 1px solid #ffffff;
  border-radius: 18px;
  background: linear-gradient(145deg, #fcf0f5, #f5e1ea);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .payment-summary-card,
html[data-theme="clay"] body:not(.login-page) .refund-policy-card,
html[data-theme="clay"] body:not(.login-page) .refund-panel {
  border-color: rgba(232, 86, 143, 0.32);
}

html[data-theme="clay"] body:not(.login-page) .sms-copy-panel summary {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .sms-copy-panel p {
  border: none;
  border-radius: 12px;
  background: #f7e6ee;
  box-shadow: inset 2px 2px 6px rgba(200, 140, 170, 0.3), inset -2px -2px 6px rgba(255, 255, 255, 0.85);
}

html[data-theme="clay"] body:not(.login-page) .danger-button {
  color: #ffffff;
  border: none;
  background: linear-gradient(145deg, #ff8194, #ff6b81);
  box-shadow: 6px 7px 16px rgba(214, 69, 94, 0.34), inset 1px 1px 3px rgba(255, 255, 255, 0.4);
}

/* Scanner / check-in */
html[data-theme="clay"] body:not(.login-page) .scanner-box {
  border: 1px solid #ffffff;
  border-radius: 24px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .scanner-camera {
  border-color: rgba(232, 86, 143, 0.3);
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 86, 143, 0.18), transparent 28%),
    linear-gradient(145deg, #6e2d52, #a23a72);
}

html[data-theme="clay"] body:not(.login-page) .scanner-camera-placeholder {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(82, 26, 56, 0.42);
}

html[data-theme="clay"] body:not(.login-page) .scanner-camera-placeholder strong {
  color: #ffffff;
}

html[data-theme="clay"] body:not(.login-page) .scanner-camera-placeholder span {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="clay"] body:not(.login-page) .scanner-live-result {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 86, 143, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(110, 45, 80, 0.94), rgba(82, 26, 56, 0.86));
}

html[data-theme="clay"] body:not(.login-page) .scanner-live-result h3 {
  color: #fff0f7;
}

html[data-theme="clay"] body:not(.login-page) .scanner-live-result p {
  color: rgba(255, 255, 255, 0.86);
}

html[data-theme="clay"] body:not(.login-page) .scanner-live-capacity {
  color: #4a2740;
  background: #f3e0ec;
}

html[data-theme="clay"] body:not(.login-page) .scanner-fallbacks input[type="file"] {
  border: none;
  background: #f7e6ee;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.34), inset -3px -3px 7px rgba(255, 255, 255, 0.88);
}

/* Mobile: clay backdrop scrolls; keep containers transparent. */
@media (max-width: 540px) {
  html[data-theme="clay"] main:not(.top-menu-bar),
  html[data-theme="clay"] .page-main,
  html[data-theme="clay"] .home-page main:not(.top-menu-bar),
  html[data-theme="clay"] .home-page .page-main {
    background: transparent;
  }
}