:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --cream: #0d0b14;
  --cream-2: #171322;
  --paper: #17141f;
  --ink: #f7f3ff;
  --ink-soft: rgba(247, 243, 255, 0.7);
  --muted: rgba(247, 243, 255, 0.66);
  --dark-line: rgba(255, 255, 255, 0.12);
  --policy-ink: #f7f3ff;
  --policy-muted: #aaa2b9;
  --policy-paper: #17141f;
  --policy-cream: #0d0b14;
  --policy-cream-2: #171322;
  --policy-line: rgba(255, 255, 255, 0.12);
}

.theme-toggle {
  position: fixed;
  right: 126px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 10001;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  color: #fff;
  background: rgba(30, 20, 61, 0.9);
  box-shadow: 0 14px 36px rgba(13, 7, 31, 0.28);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-2px);
  background: rgba(50, 31, 94, 0.96);
  border-color: rgba(167, 139, 250, 0.62);
  outline: none;
}

.theme-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__sun,
html[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

html[data-theme="dark"] body {
  color: #f7f3ff;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.1), transparent 36%),
    #0d0b14;
}

html[data-theme="dark"] .policy-header {
  background: rgba(13, 11, 20, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] :is(
  .features,
  .pricing,
  .feature-studio,
  .policy-article,
  .policy-next,
  .policy-contact,
  .policy-footer
) {
  background-color: #0d0b14;
}

html[data-theme="dark"] :is(
  .bento-card,
  .pricing-card,
  .package-card,
  .auth-layout,
  .auth-card,
  .create-form-card,
  .create-side-card,
  .detail-card,
  .detail-side-card,
  .gallery-hero,
  .gallery-admin-card,
  .gallery-only-section,
  .info-card,
  .policy-identity-card,
  .policy-section,
  .policy-callout,
  .policy-contact__card,
  .policy-action-box,
  .account-card,
  .account-panel,
  .account-summary-card
) {
  color: #f7f3ff;
  background: rgba(24, 20, 34, 0.94);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] :is(
  .pricing .section-head h2,
  .pricing-card h3,
  .package-card h3,
  .auth-head h1,
  .auth-card-brand,
  .create-brand,
  .create-hero h1,
  .detail-brand,
  .detail-hero h1,
  .gallery-brand,
  .gallery-hero h1,
  .policy-article h2,
  .policy-article h3,
  .policy-contact h2,
  label
) {
  color: #f7f3ff;
}

html[data-theme="dark"] :is(
  .pricing .section-head p,
  .pricing-card p,
  .package-card p,
  .auth-head p,
  .auth-bottom,
  .create-hero p,
  .detail-hero p,
  .gallery-helper-text,
  .policy-article p,
  .policy-article li,
  .policy-meta,
  .account-muted
) {
  color: rgba(247, 243, 255, 0.68);
}

html[data-theme="dark"] :is(input, textarea, select, .drop-zone, .guest-search-box) {
  color: #f7f3ff;
  background: #100d18;
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: rgba(247, 243, 255, 0.4);
}

html[data-theme="dark"] .auth-card {
  background: #17141f;
}

html[data-theme="dark"] .policy-draft-alert {
  color: #ffd7cf;
  background: rgba(255, 107, 74, 0.12);
  border-color: rgba(255, 107, 74, 0.24);
}

html[data-theme="dark"] code {
  color: #c8b6ff;
  background: rgba(124, 58, 237, 0.14);
}

/* Complete dark theme ----------------------------------------------------- */
html[data-theme="dark"] {
  --theme-bg: #0d0b14;
  --theme-bg-soft: #13101c;
  --theme-surface: #191522;
  --theme-surface-2: #211b2d;
  --flow-stage: #19142b;
  --flow-stage-raised: #211a35;
  --theme-text: #f7f3ff;
  --theme-muted: #b8afc6;
  --theme-border: rgba(255, 255, 255, 0.12);
  --theme-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
  --process-ink: var(--theme-text);
  --process-muted: var(--theme-muted);
  --flow-ink: var(--theme-text);
  --flow-muted: var(--theme-muted);
  --snap-ink: var(--theme-text);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] :is(
  .auth-page,
  .create-page,
  .event-detail-page,
  .public-gallery-page,
  .account-page,
  .policy-page
) {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

/* Navigation and fixed controls */
html[data-theme="dark"] :is(
  .create-header,
  .detail-header,
  .gallery-header,
  .account-topbar,
  .policy-header
) {
  color: var(--theme-text);
  background: rgba(13, 11, 20, 0.88);
  border-color: var(--theme-border);
}

html[data-theme="dark"] :is(
  .create-header a,
  .detail-header a,
  .gallery-header a,
  .account-topbar a,
  .policy-header a
) {
  color: var(--theme-text);
}

html[data-theme="dark"] .language-menu {
  color: var(--theme-text);
  background: rgba(25, 21, 34, 0.98);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .language-option:hover,
html[data-theme="dark"] .language-option.active {
  color: #fff;
  background: rgba(124, 58, 237, 0.28);
}

/* Home page: every light section and interactive surface */
html[data-theme="dark"] :is(
  .product-flow,
  .features,
  .feature-studio,
  .pricing,
  .live-gallery,
  .cta-section
) {
  color: var(--theme-text);
  background-color: var(--theme-bg);
}

html[data-theme="dark"] .product-flow {
  background: var(--flow-stage);
}

html[data-theme="dark"] :is(
  .product-flow__shell,
  .product-flow__step,
  .product-flow__browser,
  .product-flow__browser-bar,
  .product-flow__screen,
  .flow-form,
  .flow-code-box,
  .flow-event-card,
  .flow-upload,
  .flow-share,
  .flow-gallery,
  .feature-card,
  .bento-card,
  .feature-hero-card,
  .feature-metrics,
  .join-event-preview,
  .pricing-card,
  .package-card,
  .live-card,
  .gallery-card,
  .upload-demo,
  .feature-studio__panel
) {
  color: var(--theme-text);
  background: rgba(25, 21, 34, 0.92);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] :is(
  .flow-form-row,
  .flow-form-checks,
  .flow-gallery__top,
  .flow-gallery__status,
  .progress-box,
  .message-box
) {
  color: var(--theme-muted);
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--theme-border);
}

html[data-theme="dark"] .join-upload-modal {
  background: transparent;
}

html[data-theme="dark"] .join-upload-backdrop {
  background: rgba(8, 6, 15, 0.44);
  backdrop-filter: blur(6px) saturate(108%);
  -webkit-backdrop-filter: blur(6px) saturate(108%);
}

html[data-theme="dark"] .join-upload-panel {
  color: var(--theme-text);
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(124, 58, 237, 0.2),
      transparent 34%
    ),
    linear-gradient(155deg, #211b2d 0%, #18141f 62%, #15111c 100%);
  border-color: rgba(196, 181, 253, 0.2);
  box-shadow:
    0 32px 90px rgba(3, 2, 8, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .join-upload-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .join-upload-panel::-webkit-scrollbar-thumb {
  background: rgba(196, 181, 253, 0.32);
}

html[data-theme="dark"] .join-upload-close {
  color: #f7f3ff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .join-upload-close:hover,
html[data-theme="dark"] .join-upload-close:focus-visible {
  color: #ffffff;
  background: rgba(124, 58, 237, 0.26);
  border-color: rgba(196, 181, 253, 0.34);
  outline: none;
}

html[data-theme="dark"] :is(
  .join-upload-head h2,
  .join-upload-form label
) {
  color: var(--theme-text);
}

html[data-theme="dark"] :is(
  .join-upload-head p,
  .join-file-field span,
  .join-upload-result
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] :is(
  .join-upload-form input,
  .join-upload-form textarea,
  .join-upload-form select
) {
  color: var(--theme-text);
  background: rgba(11, 9, 17, 0.78);
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] :is(
  .join-upload-form input,
  .join-upload-form textarea,
  .join-upload-form select
):focus {
  border-color: rgba(167, 139, 250, 0.72);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
}

html[data-theme="dark"] :is(
  .join-media-type,
  .join-message-field,
  .join-file-field
) {
  color: var(--theme-text);
  background: transparent;
  border-color: transparent;
}

html[data-theme="dark"] .join-media-type > span {
  color: #f7f3ff;
}

html[data-theme="dark"] .join-media-type button {
  color: #ddd5e9;
  background: #292233;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .join-media-type button:hover {
  color: #ffffff;
  background: #352a45;
  border-color: rgba(196, 181, 253, 0.34);
}

html[data-theme="dark"] .join-media-type button.active,
html[data-theme="dark"] .join-media-type button.active:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #a33cc6);
  border-color: rgba(196, 181, 253, 0.36);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.26);
}

html[data-theme="dark"] .join-event-preview {
  color: var(--theme-text);
  background: rgba(34, 211, 197, 0.075);
  border-color: rgba(94, 234, 212, 0.2);
  box-shadow: none;
}

html[data-theme="dark"] .join-event-preview strong {
  color: #f7f3ff;
}

html[data-theme="dark"] .join-event-preview span {
  color: #afa6bd;
}

html[data-theme="dark"] .join-event-cover {
  color: #c4b5fd;
  background:
    radial-gradient(
      circle at 22% 18%,
      rgba(236, 72, 153, 0.18),
      transparent 42%
    ),
    #241d31;
  border-color: rgba(196, 181, 253, 0.18);
}

html[data-theme="dark"] .join-event-gallery-link {
  color: #ffffff;
  background: #312546;
  box-shadow: 0 12px 26px rgba(5, 3, 10, 0.3);
}

html[data-theme="dark"] .join-file-preview {
  background: rgba(11, 9, 17, 0.62);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow:
    0 16px 36px rgba(3, 2, 8, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .join-selected-header strong,
html[data-theme="dark"] .join-selected-file-info strong {
  color: #f7f3ff;
}

html[data-theme="dark"] :is(
  .join-selected-header span,
  .join-selected-file-info span,
  .join-file-helper-text
) {
  color: #aaa2b9;
}

html[data-theme="dark"] .join-selected-file-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .join-selected-file-list::-webkit-scrollbar-thumb {
  background: rgba(196, 181, 253, 0.28);
}

html[data-theme="dark"] .join-selected-file-card {
  color: var(--theme-text);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .join-clear-files-button {
  color: #d8c7ff;
  background: rgba(124, 58, 237, 0.18);
}

html[data-theme="dark"] .join-remove-file-button {
  color: #c8bed5;
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .join-remove-file-button:hover {
  color: #ffffff;
  background: rgba(236, 72, 153, 0.2);
}

html[data-theme="dark"] .join-upload-result.success {
  color: #6ee7a0;
}

html[data-theme="dark"] .join-upload-result.error {
  color: #ff8d8d;
}

html[data-theme="dark"] .join-upload-success__backdrop {
  background: rgba(5, 3, 10, 0.72);
  backdrop-filter: blur(18px) saturate(110%);
  -webkit-backdrop-filter: blur(18px) saturate(110%);
}

html[data-theme="dark"] .join-upload-success__card {
  color: var(--theme-text);
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(124, 58, 237, 0.25),
      transparent 36%
    ),
    radial-gradient(
      circle at 92% 10%,
      rgba(34, 211, 197, 0.11),
      transparent 30%
    ),
    #1b1624;
  border-color: rgba(196, 181, 253, 0.2);
  box-shadow:
    0 38px 110px rgba(3, 2, 8, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .join-upload-success__card h2 {
  color: #f8f5ff;
}

html[data-theme="dark"] .join-upload-success__card p {
  color: #b8afc5;
}

html[data-theme="dark"] .join-upload-success__brand {
  color: #c4b5fd;
}

html[data-theme="dark"] .join-upload-success__button {
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #a33cc6);
  box-shadow: 0 16px 34px rgba(7, 4, 14, 0.4);
}

html[data-theme="dark"] .join-upload-success__button:hover,
html[data-theme="dark"] .join-upload-success__button:focus-visible {
  background: linear-gradient(135deg, #8b5cf6, #c43b9a);
}

html[data-theme="dark"] :is(
  .product-flow h2,
  .product-flow h3,
  .features h2,
  .features h3,
  .feature-studio h2,
  .feature-studio h3,
  .pricing h2,
  .pricing h3,
  .live-gallery h2,
  .live-gallery h3,
  .cta-section h2,
  .product-flow__step-title,
  .product-flow__preview-title,
  .pricing-card .price
) {
  color: var(--theme-text);
}

html[data-theme="dark"] :is(
  .product-flow p,
  .features p,
  .feature-studio p,
  .pricing p,
  .live-gallery p,
  .cta-section p,
  .product-flow__step-copy,
  .product-flow__preview-copy,
  .pricing-card li
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] :is(
  .product-flow__preview,
  .product-flow__screen,
  .browser-frame,
  .demo-window,
  .feature-preview,
  .live-gallery__frame
) {
  background: var(--flow-stage);
  border-color: var(--theme-border);
}

/* Keep the complete "How it works" workspace dark. */
html[data-theme="dark"] .product-flow__shell {
  background: var(--flow-stage);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 42px 100px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .product-flow__steps {
  background: var(--flow-stage);
  border-right-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .product-flow__demo {
  background: var(--flow-stage);
}

html[data-theme="dark"] .product-flow__browser {
  background: var(--flow-stage);
  border-color: rgba(255, 255, 255, 0.13);
}

html[data-theme="dark"] .product-flow__browser-bar {
  color: var(--theme-muted);
  background: var(--flow-stage-raised);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .product-flow__browser-bar > span {
  color: var(--theme-muted);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .product-flow__browser-bar > b {
  color: var(--theme-muted);
}

/*
 * Keep every large workspace layer on one exact surface.  Smaller controls can
 * still be raised, but the shell must never look patched together at rounded
 * corners or around the browser mock-up.
 */
html[data-theme="dark"] :is(
  .product-flow__shell,
  .product-flow__steps,
  .product-flow__demo,
  .product-flow__browser,
  .product-flow__screen,
  .flow-create,
  .flow-share,
  .flow-upload,
  .flow-gallery
) {
  background-color: var(--flow-stage);
  background-image: none;
}

html[data-theme="dark"] .product-flow__step {
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .product-flow__step:hover {
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .product-flow__step.active {
  background: #241f2e;
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

/* Authentication */
html[data-theme="dark"] .auth-layout {
  background: rgba(18, 15, 26, 0.96);
}

html[data-theme="dark"] .auth-card {
  background: var(--theme-surface);
}

html[data-theme="dark"] :is(
  .auth-card-top,
  .auth-back,
  .auth-password-row button,
  .auth-bottom
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] :is(.auth-field input, .auth-field select) {
  color: var(--theme-text);
  background: #100d18;
  border-color: var(--theme-border);
}

html[data-theme="dark"] .auth-result.is-success {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
}

html[data-theme="dark"] .auth-result.is-error {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.24);
}

/* Create event, payment and success dialogs */
html[data-theme="dark"] :is(
  .create-form-card,
  .create-side-card,
  .form-section,
  .setting-card,
  .package-card,
  .payment-popup,
  .payment-summary-card,
  .payment-method-card,
  .payment-live-form,
  .payment-success-popup
) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] :is(
  .create-hero h1,
  .form-section h2,
  .setting-card strong,
  .package-card h3,
  .payment-popup h2,
  .payment-popup h3,
  .payment-success-popup h2,
  .payment-live-form label
) {
  color: var(--theme-text);
}

html[data-theme="dark"] :is(
  .create-hero p,
  .form-section p,
  .setting-card span,
  .package-card p,
  .package-card li,
  .payment-popup p,
  .payment-demo-note,
  .payment-summary-card span
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] :is(
  .create-form-card input,
  .create-form-card textarea,
  .create-form-card select,
  .payment-popup input,
  .payment-popup select
) {
  color: var(--theme-text);
  background: #100d18;
  border-color: var(--theme-border);
}

html[data-theme="dark"] :is(
  .payment-popup-close,
  .settings-modal-close,
  .gallery-lightbox-close,
  .public-lightbox-close
) {
  color: var(--theme-text);
  background: rgba(255, 255, 255, 0.09);
}

/* Event detail and public gallery */
html[data-theme="dark"] :is(
  .detail-side-card,
  .info-card,
  .upload-panel,
  .detail-card,
  .gallery-only-section,
  .participants-panel,
  .approved-gallery-panel,
  .participant-card,
  .guest-item,
  .media-card,
  .approved-gallery-card,
  .settings-modal
) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] :is(
  .gallery-lightbox-frame,
  .public-lightbox-frame
) {
  color: var(--theme-text);
  background: #0a0810;
  border-color: var(--theme-border);
}

html[data-theme="dark"] :is(
  .gallery-lightbox-arrow,
  .public-lightbox-arrow
) {
  color: var(--theme-text);
  background: rgba(25, 21, 34, 0.88);
  border-color: var(--theme-border);
}

html[data-theme="dark"] :is(
  .gallery-lightbox-backdrop,
  .public-lightbox-backdrop
) {
  background: rgba(3, 2, 8, 0.9);
}

html[data-theme="dark"] :is(
  .detail-content h1,
  .detail-content h2,
  .detail-content h3,
  .gallery-content h1,
  .gallery-content h2,
  .gallery-content h3,
  .info-card strong,
  .guest-item strong,
  .participant-card strong,
  .settings-modal h2,
  .settings-switch-row strong
) {
  color: var(--theme-text);
}

html[data-theme="dark"] :is(
  .detail-content p,
  .gallery-content p,
  .info-card span,
  .guest-item span,
  .participant-card span,
  .guest-result-count,
  .guest-empty,
  .settings-switch-row span
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] :is(
  .media-filter-bar,
  .guest-search-box,
  .photo-preview-box,
  .event-code-box,
  .qr-box,
  .settings-number-grid input
) {
  color: var(--theme-text);
  background: #100d18;
  border-color: var(--theme-border);
}

html[data-theme="dark"] :is(
  .settings-modal-overlay,
  .payment-popup-overlay,
  .payment-success-overlay
) {
  background: rgba(3, 2, 8, 0.78);
}

/* Account page has a light override block at the end of account.css. */
html[data-theme="dark"] :is(.account-content, .account-panel) {
  color: var(--theme-text);
  background: transparent;
}

html[data-theme="dark"] :is(
  .account-card,
  .account-summary-card,
  .event-card,
  .event-count-box,
  .details-grid > *,
  .password-section
) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] :is(
  .account-content h1,
  .account-content h2,
  .account-content h3,
  .event-card h3,
  .summary-item strong
) {
  color: var(--theme-text);
}

html[data-theme="dark"] :is(
  .account-muted,
  .account-content p,
  .event-card p,
  .summary-item span
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] :is(
  .account-form input,
  .account-form textarea,
  .account-form select
) {
  color: var(--theme-text);
  background: #100d18;
  border-color: var(--theme-border);
}

/* Privacy policy */
html[data-theme="dark"] :is(
  .policy-toc,
  .policy-section,
  .policy-summary-card,
  .policy-identity-card,
  .policy-callout,
  .policy-provider-card,
  .policy-action-box,
  .policy-contact__card,
  .policy-next,
  .policy-table-wrap
) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] :is(
  .policy-section h2,
  .policy-section h3,
  .policy-section strong,
  .policy-table-wrap th,
  .policy-table-wrap td,
  .policy-toc a
) {
  color: var(--theme-text);
}

html[data-theme="dark"] :is(
  .policy-section p,
  .policy-section li,
  .policy-small,
  .policy-provider-card p
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] .policy-table-wrap :is(table, th, td) {
  border-color: var(--theme-border);
  background: transparent;
}

html[data-theme="dark"] .policy-table-wrap th {
  background: rgba(124, 58, 237, 0.14);
}

html[data-theme="dark"] :is(
  .policy-toc,
  .policy-summary-grid > div,
  .policy-purpose-list > div,
  .policy-provider-grid article,
  .policy-table-wrap,
  .policy-next a
) {
  color: var(--theme-text);
  background: #17141f;
  border-color: var(--theme-border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .policy-contact__card {
  background: var(--theme-border);
  border-color: var(--theme-border);
}

html[data-theme="dark"] .policy-contact__card > div {
  color: var(--theme-text);
  background: #17141f;
}

html[data-theme="dark"] :is(
  .policy-summary-grid > div p,
  .policy-purpose-list > div p,
  .policy-provider-grid article p,
  .policy-contact__card span,
  .policy-next span,
  .policy-toc p
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] :is(
  .policy-summary-grid > div h3,
  .policy-purpose-list > div h3,
  .policy-provider-grid article h3,
  .policy-contact__card strong,
  .policy-next strong
) {
  color: var(--theme-text);
}

html[data-theme="dark"] .policy-summary-icon {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.2);
}

html[data-theme="dark"] .policy-callout {
  background: rgba(34, 211, 197, 0.09);
  border-color: rgba(34, 211, 197, 0.25);
}

html[data-theme="dark"] .policy-callout strong {
  color: #5eead4;
}

html[data-theme="dark"] code {
  color: #d8ccff;
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(167, 139, 250, 0.25);
}

/* Native controls and focus/selection */
html[data-theme="dark"] :is(input, textarea, select) {
  caret-color: #f7f3ff;
}

html[data-theme="dark"] select option {
  color: var(--theme-text);
  background: var(--theme-surface);
}

html[data-theme="dark"] ::selection {
  color: #fff;
  background: rgba(236, 72, 153, 0.5);
}

html[data-theme="dark"] :focus-visible {
  outline-color: #a78bfa;
}

/*
 * The landing header and first hero viewport are a fixed brand composition.
 * Keep their original palette in both themes; dark mode begins below the hero.
 */
html[data-theme="dark"] :is(.site-header, .hero) {
  --black: #100a24;
  --camera: #17122b;
  --camera-2: #221a3b;
  --cream: #f8f5ff;
  --cream-2: #eee7ff;
  --paper: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --ink: #201a35;
  --ink-soft: rgba(32, 26, 53, 0.68);
  --dark-line: rgba(32, 26, 53, 0.12);
  color-scheme: dark;
}

/*
 * Pricing has a full `background` gradient in the landing-page stylesheet.
 * Override the complete shorthand here (not only background-color), otherwise
 * the light gradient remains visible over the dark theme colors.
 */
html[data-theme="dark"] .pricing {
  background:
    radial-gradient(circle at 8% 12%, rgba(124, 58, 237, 0.15), transparent 28%),
    radial-gradient(circle at 92% 84%, rgba(236, 72, 153, 0.09), transparent 30%),
    var(--theme-bg);
}

html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .pricing-card-featured {
  background: rgba(25, 21, 34, 0.96);
}

html[data-theme="dark"] .pricing :is(
  .section-head h2,
  .pricing-card h3,
  .pricing-price strong
) {
  color: var(--theme-text);
}

html[data-theme="dark"] .pricing :is(
  .section-head p,
  .pricing-card p,
  .pricing-price span,
  .pricing-features li
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] .pricing-price {
  border-bottom-color: var(--theme-border);
}

html[data-theme="dark"] .pricing .btn-glass {
  color: var(--theme-text);
  background: rgba(255, 255, 255, 0.065);
  border-color: var(--theme-border);
}

html[data-theme="dark"] .pricing .btn-glass:hover {
  background: rgba(124, 58, 237, 0.16);
  border-color: rgba(167, 139, 250, 0.4);
}

/* "Every event" remains a deliberate dark brand band in both themes. */
html[data-theme="dark"] .event-types {
  color: #ffffff;
  background: #121016;
  background-image: none;
}

html[data-theme="dark"] .event-types__intro h2,
html[data-theme="dark"] .event-type-card h3 {
  color: #ffffff;
}

html[data-theme="dark"] .event-types__summary p {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .event-type-card {
  border-color: rgba(255, 255, 255, 0.11);
  background: #1d1922;
  background-image: none;
}

html[data-theme="dark"] .event-type-card:hover {
  border-color: color-mix(in srgb, var(--event-accent) 46%, transparent);
  background: #24202a;
}

html[data-theme="dark"] .event-types__cta {
  color: #17122b;
  background: #fff8ed;
}

/*
 * Keep the live-gallery preview colorful in dark mode without the bright,
 * disconnected neon blocks used by the light theme.
 */
html[data-theme="dark"] .flow-gallery__grid .flow-memory {
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 28px rgba(8, 5, 18, 0.2);
}

html[data-theme="dark"] .flow-gallery__grid .flow-memory::after {
  background: linear-gradient(
    transparent 45%,
    rgba(12, 8, 20, 0.35) 68%,
    rgba(12, 8, 20, 0.78)
  );
}

html[data-theme="dark"] .flow-gallery__grid .memory-one {
  background:
    radial-gradient(circle at 52% 37%, #d7b3a4 0 11%, transparent 12%),
    linear-gradient(140deg, #4b2b6f, #21182f);
}

html[data-theme="dark"] .flow-gallery__grid .memory-two {
  background:
    radial-gradient(circle at 64% 35%, #cfa08f 0 9%, transparent 10%),
    radial-gradient(circle at 43% 42%, #d9b5a2 0 11%, transparent 12%),
    linear-gradient(125deg, #74394f, #281a27);
}

html[data-theme="dark"] .flow-gallery__grid .memory-three {
  background: linear-gradient(140deg, #543177, #2a1c39);
}

html[data-theme="dark"] .flow-gallery__grid .memory-four {
  background: linear-gradient(145deg, #176a70, #172b34);
}

html[data-theme="dark"] .flow-gallery__grid .memory-five {
  background:
    radial-gradient(circle at 50% 42%, #d8ad91 0 13%, transparent 14%),
    linear-gradient(140deg, #a95d48, #322027);
}

/*
 * Process demo: make all four screens use the same dark canvas as the
 * reference "Create your event" screen. These rules intentionally live at
 * the end of the theme sheet so older generic surface rules cannot repaint
 * the share, upload or gallery panels.
 */
html[data-theme="dark"] :is(
  #flow-panel-create,
  #flow-panel-share,
  #flow-panel-upload,
  #flow-panel-gallery,
  #flow-panel-create .flow-create,
  #flow-panel-share .flow-share,
  #flow-panel-upload .flow-upload,
  #flow-panel-gallery .flow-gallery
) {
  background: var(--flow-stage);
  background-image: none;
  box-shadow: none;
}

html[data-theme="dark"] #flow-panel-share .flow-event-card,
html[data-theme="dark"] #flow-panel-create .flow-form {
  color: var(--theme-text);
  background: #17141f;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 55px rgba(8, 5, 17, 0.24);
}

html[data-theme="dark"] #flow-panel-share .flow-event-card b,
html[data-theme="dark"] #flow-panel-share .flow-code-box strong {
  color: #f7f3ff;
}

html[data-theme="dark"] #flow-panel-share .flow-event-card small,
html[data-theme="dark"] #flow-panel-share .flow-code-box span {
  color: rgba(247, 243, 255, 0.68);
}

html[data-theme="dark"] #flow-panel-share .flow-code-box {
  color: var(--theme-text);
  background: #211d2a;
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: none;
}

html[data-theme="dark"] #flow-panel-share .qr-code {
  background-color: #fff;
}

html[data-theme="dark"] #flow-panel-upload .drop-zone {
  color: var(--theme-text);
  background: #17141f;
  background-image: none;
  border-color: rgba(167, 139, 250, 0.36);
  box-shadow: none;
}

html[data-theme="dark"] #flow-panel-upload .drop-zone :is(strong, span, svg) {
  color: inherit;
  stroke: currentColor;
}

html[data-theme="dark"] #flow-panel-gallery .flow-gallery__top {
  color: var(--theme-text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] #flow-panel-gallery .flow-gallery__status {
  color: #8ee8dc;
  background: #211d2a;
  border-color: rgba(34, 211, 197, 0.24);
}

/*
 * Mobile navigation
 * Give both themes a deliberate menu surface while keeping the same
 * dimensions, spacing and interaction model.
 */
@media (max-width: 1100px) {
  html:not([data-theme="dark"]) .burger {
    color: #2b2140;
    background: rgba(255, 252, 247, 0.96);
    border-color: rgba(74, 50, 112, 0.18);
    box-shadow: 0 10px 28px rgba(50, 31, 78, 0.16);
  }

  html:not([data-theme="dark"]) .burger:hover,
  html:not([data-theme="dark"]) .burger:focus-visible,
  html:not([data-theme="dark"]) .burger.open {
    color: #6d35b5;
    background: #f3ecff;
    border-color: rgba(109, 53, 181, 0.34);
  }

  html:not([data-theme="dark"]) .mobile-menu {
    color: #2b2140;
    background: rgba(255, 252, 247, 0.98);
    border-color: rgba(74, 50, 112, 0.16);
    box-shadow: 0 30px 80px rgba(50, 31, 78, 0.2);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
  }

  html:not([data-theme="dark"]) .mobile-menu > a {
    color: #352847;
    background: #f7f1fb;
    border: 1px solid rgba(74, 50, 112, 0.08);
  }

  html:not([data-theme="dark"]) .mobile-menu > a:hover,
  html:not([data-theme="dark"]) .mobile-menu > a:focus-visible,
  html:not([data-theme="dark"]) .mobile-menu > a.active {
    color: #5f2aa5;
    background: #eee3fa;
    border-color: rgba(109, 53, 181, 0.22);
  }

  html:not([data-theme="dark"]) .mobile-actions {
    border-top: 1px solid rgba(74, 50, 112, 0.14);
    margin-top: 4px;
    padding-top: 12px;
  }

  html:not([data-theme="dark"]) .mobile-actions .btn-ghost {
    color: #352847;
    background: #ffffff;
    border-color: rgba(74, 50, 112, 0.2);
  }

  html:not([data-theme="dark"]) .mobile-actions .btn-ghost:hover,
  html:not([data-theme="dark"]) .mobile-actions .btn-ghost:focus-visible {
    color: #5f2aa5;
    background: #f3ecff;
    border-color: rgba(109, 53, 181, 0.34);
  }

  html:not([data-theme="dark"]) .mobile-actions .btn-hot {
    color: #ffffff;
    background: var(--snap-gradient);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(124, 58, 237, 0.22);
  }

  html[data-theme="dark"] .burger {
    color: var(--theme-text);
    background: rgba(33, 27, 45, 0.94);
    border-color: var(--theme-border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  }

  html[data-theme="dark"] .burger:hover,
  html[data-theme="dark"] .burger:focus-visible,
  html[data-theme="dark"] .burger.open {
    color: #ffffff;
    background: rgba(124, 58, 237, 0.24);
    border-color: rgba(167, 139, 250, 0.48);
  }

  html[data-theme="dark"] .mobile-menu {
    color: var(--theme-text);
    background: rgba(25, 21, 34, 0.98);
    border-color: var(--theme-border);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(22px);
  }

  html[data-theme="dark"] .mobile-menu > a {
    color: var(--theme-text);
    background: var(--theme-surface-2);
    border: 1px solid transparent;
  }

  html[data-theme="dark"] .mobile-menu > a:hover,
  html[data-theme="dark"] .mobile-menu > a:focus-visible,
  html[data-theme="dark"] .mobile-menu > a.active {
    color: #ffffff;
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(167, 139, 250, 0.28);
  }

  html[data-theme="dark"] .mobile-actions {
    border-top: 1px solid var(--theme-border);
    margin-top: 4px;
    padding-top: 12px;
  }

  html[data-theme="dark"] .mobile-actions .btn-ghost {
    color: var(--theme-text);
    background: var(--theme-surface-2);
    border-color: var(--theme-border);
  }

  html[data-theme="dark"] .mobile-actions .btn-ghost:hover,
  html[data-theme="dark"] .mobile-actions .btn-ghost:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(167, 139, 250, 0.42);
  }

  html[data-theme="dark"] .mobile-actions .btn-hot {
    color: #ffffff;
    background: var(--snap-gradient);
    border-color: transparent;
  }
}

@media (max-width: 720px) {
  .theme-toggle {
    right: 78px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .theme-toggle svg {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }
}