/**
 * Auto-generated theme tokens — PostgreSQL themes table (derived artifact)
 * Do not edit manually. Regenerated by themeCatalogSyncService.
 */

/* ── Boardroom Navy ── */
:is(body[data-user-theme="boardroom-navy"], #card-shell[data-design="boardroom-navy"], .theme-preview-shell[data-design="boardroom-navy"]) {
  --bg-primary: #07111f;
  --bg-secondary: #0d1b2e;
  --bg-gradient-mid: #10233c;
  --card-bg: #0f2035;
  --surface: rgba(15, 32, 53, 0.88);
  --surface-glass: rgba(15,32,53,0.84);
  --button-bg: #142b47;
  --button-hover: #142b47;
  --text-primary: #f8fafc;
  --text-secondary: #b6c4d8;
  --text-tertiary: #64748b;
  --accent: #3b82f6;
  --accent-light: rgba(59, 130, 246, 0.28);
  --accent-subtle: rgba(59, 130, 246, 0.12);
  --accent-border: rgba(59, 130, 246, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(59, 130, 246, 0.14);
  --icon-color: #3b82f6;
  --contact-icon-bg-start: #2563eb;
  --contact-icon-bg-end: #0f4ea8;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #60a5fa;
  --avatar-ring-end: #1d4ed8;
  --avatar-ring-glow: rgba(59, 130, 246, 0.35);
  --avatar-border: #07111f;
  --avatar-placeholder-start: #0f2035;
  --avatar-placeholder-end: #0d1b2e;
  --avatar-placeholder-text: #f8fafc;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0d1b2e;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(59, 130, 246, 0.15);
  --menu-bg: rgba(7, 17, 31, 0.98);
  --menu-border: rgba(59, 130, 246, 0.28);
  --menu-hover: rgba(59, 130, 246, 0.1);
  --modal-bg-start: #0f2035;
  --modal-bg-end: #07111f;
  --modal-border: rgba(59, 130, 246, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(59, 130, 246, 0.55);
  --drop-target-ring: rgba(59, 130, 246, 0.65);
  --add-btn-border: rgba(59, 130, 246, 0.38);
  --add-btn-bg: rgba(59, 130, 246, 0.06);
  --add-btn-bg-hover: rgba(59, 130, 246, 0.12);
  --drag-handle-bg: rgba(59, 130, 246, 0.12);
  --move-btn-bg: rgba(59, 130, 246, 0.16);
  --move-btn-bg-hover: rgba(59, 130, 246, 0.28);
  --move-btn-border: rgba(13, 27, 46, 0.92);
  --apply-disabled-bg: rgba(59, 130, 246, 0.22);
  --apply-disabled-text: rgba(248, 250, 252, 0.55);
  --qr-image-bg: #f8fafc;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #60a5fa;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Sterling Graphite ── */
:is(body[data-user-theme="sterling-graphite"], #card-shell[data-design="sterling-graphite"], .theme-preview-shell[data-design="sterling-graphite"]) {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-gradient-mid: #273244;
  --card-bg: #182230;
  --surface: rgba(24, 34, 48, 0.88);
  --surface-glass: rgba(24,34,48,0.86);
  --button-bg: #273244;
  --button-hover: #273244;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #64748b;
  --accent: #94a3b8;
  --accent-light: rgba(148, 163, 184, 0.28);
  --accent-subtle: rgba(148, 163, 184, 0.12);
  --accent-border: rgba(148, 163, 184, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(148, 163, 184, 0.14);
  --icon-color: #94a3b8;
  --contact-icon-bg-start: #64748b;
  --contact-icon-bg-end: #334155;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #cbd5e1;
  --avatar-ring-end: #64748b;
  --avatar-ring-glow: rgba(148, 163, 184, 0.35);
  --avatar-border: #111827;
  --avatar-placeholder-start: #182230;
  --avatar-placeholder-end: #1f2937;
  --avatar-placeholder-text: #f8fafc;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1f2937;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(148, 163, 184, 0.15);
  --menu-bg: rgba(17, 24, 39, 0.98);
  --menu-border: rgba(148, 163, 184, 0.28);
  --menu-hover: rgba(148, 163, 184, 0.1);
  --modal-bg-start: #182230;
  --modal-bg-end: #111827;
  --modal-border: rgba(148, 163, 184, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(148, 163, 184, 0.55);
  --drop-target-ring: rgba(148, 163, 184, 0.65);
  --add-btn-border: rgba(148, 163, 184, 0.38);
  --add-btn-bg: rgba(148, 163, 184, 0.06);
  --add-btn-bg-hover: rgba(148, 163, 184, 0.12);
  --drag-handle-bg: rgba(148, 163, 184, 0.12);
  --move-btn-bg: rgba(148, 163, 184, 0.16);
  --move-btn-bg-hover: rgba(148, 163, 184, 0.28);
  --move-btn-border: rgba(31, 41, 55, 0.92);
  --apply-disabled-bg: rgba(148, 163, 184, 0.22);
  --apply-disabled-text: rgba(248, 250, 252, 0.55);
  --qr-image-bg: #f8fafc;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #cbd5e1;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Capital Sage ── */
:is(body[data-user-theme="capital-sage"], #card-shell[data-design="capital-sage"], .theme-preview-shell[data-design="capital-sage"]) {
  --bg-primary: #f5f1e8;
  --bg-secondary: #e8efe8;
  --bg-gradient-mid: #d9e5dd;
  --card-bg: #fffdf7;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,253,247,0.92);
  --button-bg: #e4ece6;
  --button-hover: #e4ece6;
  --text-primary: #17231d;
  --text-secondary: #526258;
  --text-tertiary: #64748b;
  --accent: #5f8575;
  --accent-light: rgba(95, 133, 117, 0.18);
  --accent-subtle: rgba(95, 133, 117, 0.1);
  --accent-border: rgba(95, 133, 117, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(95, 133, 117, 0.12);
  --icon-color: #5f8575;
  --contact-icon-bg-start: #5f8575;
  --contact-icon-bg-end: #3f6658;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #7fa394;
  --avatar-ring-end: #4f7566;
  --avatar-ring-glow: rgba(95, 133, 117, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fffdf7;
  --avatar-placeholder-end: #e8efe8;
  --avatar-placeholder-text: #17231d;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #e8efe8;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(95, 133, 117, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(95, 133, 117, 0.2);
  --menu-hover: rgba(95, 133, 117, 0.08);
  --modal-bg-start: #fffdf7;
  --modal-bg-end: #f5f1e8;
  --modal-border: rgba(95, 133, 117, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(95, 133, 117, 0.45);
  --drop-target-ring: rgba(95, 133, 117, 0.55);
  --add-btn-border: rgba(95, 133, 117, 0.35);
  --add-btn-bg: rgba(95, 133, 117, 0.06);
  --add-btn-bg-hover: rgba(95, 133, 117, 0.12);
  --drag-handle-bg: rgba(95, 133, 117, 0.1);
  --move-btn-bg: rgba(95, 133, 117, 0.12);
  --move-btn-bg-hover: rgba(95, 133, 117, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(95, 133, 117, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #7fa394;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Harbor Steel ── */
:is(body[data-user-theme="harbor-steel"], #card-shell[data-design="harbor-steel"], .theme-preview-shell[data-design="harbor-steel"]) {
  --bg-primary: #1e293b;
  --bg-secondary: #0f172a;
  --bg-gradient-mid: #26364d;
  --card-bg: #243449;
  --surface: rgba(36, 52, 73, 0.88);
  --surface-glass: rgba(36,52,73,0.84);
  --button-bg: #26364d;
  --button-hover: #26364d;
  --text-primary: #f8fafc;
  --text-secondary: #b8c7d9;
  --text-tertiary: #64748b;
  --accent: #2dd4bf;
  --accent-light: rgba(45, 212, 191, 0.28);
  --accent-subtle: rgba(45, 212, 191, 0.12);
  --accent-border: rgba(45, 212, 191, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(45, 212, 191, 0.14);
  --icon-color: #2dd4bf;
  --contact-icon-bg-start: #14b8a6;
  --contact-icon-bg-end: #0f766e;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #5eead4;
  --avatar-ring-end: #14b8a6;
  --avatar-ring-glow: rgba(45, 212, 191, 0.35);
  --avatar-border: #1e293b;
  --avatar-placeholder-start: #243449;
  --avatar-placeholder-end: #0f172a;
  --avatar-placeholder-text: #f8fafc;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0f172a;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(45, 212, 191, 0.15);
  --menu-bg: rgba(30, 41, 59, 0.98);
  --menu-border: rgba(45, 212, 191, 0.28);
  --menu-hover: rgba(45, 212, 191, 0.1);
  --modal-bg-start: #243449;
  --modal-bg-end: #1e293b;
  --modal-border: rgba(45, 212, 191, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(45, 212, 191, 0.55);
  --drop-target-ring: rgba(45, 212, 191, 0.65);
  --add-btn-border: rgba(45, 212, 191, 0.38);
  --add-btn-bg: rgba(45, 212, 191, 0.06);
  --add-btn-bg-hover: rgba(45, 212, 191, 0.12);
  --drag-handle-bg: rgba(45, 212, 191, 0.12);
  --move-btn-bg: rgba(45, 212, 191, 0.16);
  --move-btn-bg-hover: rgba(45, 212, 191, 0.28);
  --move-btn-border: rgba(15, 23, 42, 0.92);
  --apply-disabled-bg: rgba(45, 212, 191, 0.22);
  --apply-disabled-text: rgba(248, 250, 252, 0.55);
  --qr-image-bg: #f8fafc;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #5eead4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Alpine Ledger ── */
:is(body[data-user-theme="alpine-ledger"], #card-shell[data-design="alpine-ledger"], .theme-preview-shell[data-design="alpine-ledger"]) {
  --bg-primary: #edf7f3;
  --bg-secondary: #dcefe9;
  --bg-gradient-mid: #c8e2da;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #dcefe9;
  --button-hover: #dcefe9;
  --text-primary: #0f241f;
  --text-secondary: #47645d;
  --text-tertiary: #64748b;
  --accent: #0f766e;
  --accent-light: rgba(15, 118, 110, 0.18);
  --accent-subtle: rgba(15, 118, 110, 0.1);
  --accent-border: rgba(15, 118, 110, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(15, 118, 110, 0.12);
  --icon-color: #0f766e;
  --contact-icon-bg-start: #0f766e;
  --contact-icon-bg-end: #115e59;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #2dd4bf;
  --avatar-ring-end: #0f766e;
  --avatar-ring-glow: rgba(15, 118, 110, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #dcefe9;
  --avatar-placeholder-text: #0f241f;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #dcefe9;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(15, 118, 110, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(15, 118, 110, 0.2);
  --menu-hover: rgba(15, 118, 110, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #edf7f3;
  --modal-border: rgba(15, 118, 110, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(15, 118, 110, 0.45);
  --drop-target-ring: rgba(15, 118, 110, 0.55);
  --add-btn-border: rgba(15, 118, 110, 0.35);
  --add-btn-bg: rgba(15, 118, 110, 0.06);
  --add-btn-bg-hover: rgba(15, 118, 110, 0.12);
  --drag-handle-bg: rgba(15, 118, 110, 0.1);
  --move-btn-bg: rgba(15, 118, 110, 0.12);
  --move-btn-bg-hover: rgba(15, 118, 110, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(15, 118, 110, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #2dd4bf;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Copper Brief ── */
:is(body[data-user-theme="copper-brief"], #card-shell[data-design="copper-brief"], .theme-preview-shell[data-design="copper-brief"]) {
  --bg-primary: #211915;
  --bg-secondary: #35241a;
  --bg-gradient-mid: #432c1f;
  --card-bg: #2a1d17;
  --surface: rgba(42, 29, 23, 0.88);
  --surface-glass: rgba(42,29,23,0.86);
  --button-bg: #3b281d;
  --button-hover: #3b281d;
  --text-primary: #fff7ed;
  --text-secondary: #d7c0ad;
  --text-tertiary: #64748b;
  --accent: #c4773f;
  --accent-light: rgba(196, 119, 63, 0.28);
  --accent-subtle: rgba(196, 119, 63, 0.12);
  --accent-border: rgba(196, 119, 63, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(196, 119, 63, 0.14);
  --icon-color: #c4773f;
  --contact-icon-bg-start: #c4773f;
  --contact-icon-bg-end: #9a4f24;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f0a66d;
  --avatar-ring-end: #c4773f;
  --avatar-ring-glow: rgba(196, 119, 63, 0.35);
  --avatar-border: #211915;
  --avatar-placeholder-start: #2a1d17;
  --avatar-placeholder-end: #35241a;
  --avatar-placeholder-text: #fff7ed;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #35241a;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(196, 119, 63, 0.15);
  --menu-bg: rgba(33, 25, 21, 0.98);
  --menu-border: rgba(196, 119, 63, 0.28);
  --menu-hover: rgba(196, 119, 63, 0.1);
  --modal-bg-start: #2a1d17;
  --modal-bg-end: #211915;
  --modal-border: rgba(196, 119, 63, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(196, 119, 63, 0.55);
  --drop-target-ring: rgba(196, 119, 63, 0.65);
  --add-btn-border: rgba(196, 119, 63, 0.38);
  --add-btn-bg: rgba(196, 119, 63, 0.06);
  --add-btn-bg-hover: rgba(196, 119, 63, 0.12);
  --drag-handle-bg: rgba(196, 119, 63, 0.12);
  --move-btn-bg: rgba(196, 119, 63, 0.16);
  --move-btn-bg-hover: rgba(196, 119, 63, 0.28);
  --move-btn-border: rgba(53, 36, 26, 0.92);
  --apply-disabled-bg: rgba(196, 119, 63, 0.22);
  --apply-disabled-text: rgba(255, 247, 237, 0.55);
  --qr-image-bg: #fff7ed;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f0a66d;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Summit Blueprint ── */
:is(body[data-user-theme="summit-blueprint"], #card-shell[data-design="summit-blueprint"], .theme-preview-shell[data-design="summit-blueprint"]) {
  --bg-primary: #0f2544;
  --bg-secondary: #102a4f;
  --bg-gradient-mid: #173966;
  --card-bg: #132d4f;
  --surface: rgba(19, 45, 79, 0.88);
  --surface-glass: rgba(19,45,79,0.84);
  --button-bg: #173966;
  --button-hover: #173966;
  --text-primary: #f0f9ff;
  --text-secondary: #afd4e8;
  --text-tertiary: #64748b;
  --accent: #22d3ee;
  --accent-light: rgba(34, 211, 238, 0.28);
  --accent-subtle: rgba(34, 211, 238, 0.12);
  --accent-border: rgba(34, 211, 238, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(34, 211, 238, 0.14);
  --icon-color: #22d3ee;
  --contact-icon-bg-start: #0891b2;
  --contact-icon-bg-end: #0e7490;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #67e8f9;
  --avatar-ring-end: #0891b2;
  --avatar-ring-glow: rgba(34, 211, 238, 0.35);
  --avatar-border: #0f2544;
  --avatar-placeholder-start: #132d4f;
  --avatar-placeholder-end: #102a4f;
  --avatar-placeholder-text: #f0f9ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #102a4f;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(34, 211, 238, 0.15);
  --menu-bg: rgba(15, 37, 68, 0.98);
  --menu-border: rgba(34, 211, 238, 0.28);
  --menu-hover: rgba(34, 211, 238, 0.1);
  --modal-bg-start: #132d4f;
  --modal-bg-end: #0f2544;
  --modal-border: rgba(34, 211, 238, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(34, 211, 238, 0.55);
  --drop-target-ring: rgba(34, 211, 238, 0.65);
  --add-btn-border: rgba(34, 211, 238, 0.38);
  --add-btn-bg: rgba(34, 211, 238, 0.06);
  --add-btn-bg-hover: rgba(34, 211, 238, 0.12);
  --drag-handle-bg: rgba(34, 211, 238, 0.12);
  --move-btn-bg: rgba(34, 211, 238, 0.16);
  --move-btn-bg-hover: rgba(34, 211, 238, 0.28);
  --move-btn-border: rgba(16, 42, 79, 0.92);
  --apply-disabled-bg: rgba(34, 211, 238, 0.22);
  --apply-disabled-text: rgba(240, 249, 255, 0.55);
  --qr-image-bg: #f0f9ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #67e8f9;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Regent Burgundy ── */
:is(body[data-user-theme="regent-burgundy"], #card-shell[data-design="regent-burgundy"], .theme-preview-shell[data-design="regent-burgundy"]) {
  --bg-primary: #3b0f1d;
  --bg-secondary: #240a13;
  --bg-gradient-mid: #521629;
  --card-bg: #451323;
  --surface: rgba(69, 19, 35, 0.88);
  --surface-glass: rgba(69,19,35,0.84);
  --button-bg: #5a1a2e;
  --button-hover: #5a1a2e;
  --text-primary: #fff7ed;
  --text-secondary: #e8c8bb;
  --text-tertiary: #64748b;
  --accent: #b58a3a;
  --accent-light: rgba(181, 138, 58, 0.28);
  --accent-subtle: rgba(181, 138, 58, 0.12);
  --accent-border: rgba(181, 138, 58, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(181, 138, 58, 0.14);
  --icon-color: #b58a3a;
  --contact-icon-bg-start: #b58a3a;
  --contact-icon-bg-end: #8a5f1f;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #e0b963;
  --avatar-ring-end: #b58a3a;
  --avatar-ring-glow: rgba(181, 138, 58, 0.35);
  --avatar-border: #3b0f1d;
  --avatar-placeholder-start: #451323;
  --avatar-placeholder-end: #240a13;
  --avatar-placeholder-text: #fff7ed;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #240a13;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(181, 138, 58, 0.15);
  --menu-bg: rgba(59, 15, 29, 0.98);
  --menu-border: rgba(181, 138, 58, 0.28);
  --menu-hover: rgba(181, 138, 58, 0.1);
  --modal-bg-start: #451323;
  --modal-bg-end: #3b0f1d;
  --modal-border: rgba(181, 138, 58, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(181, 138, 58, 0.55);
  --drop-target-ring: rgba(181, 138, 58, 0.65);
  --add-btn-border: rgba(181, 138, 58, 0.38);
  --add-btn-bg: rgba(181, 138, 58, 0.06);
  --add-btn-bg-hover: rgba(181, 138, 58, 0.12);
  --drag-handle-bg: rgba(181, 138, 58, 0.12);
  --move-btn-bg: rgba(181, 138, 58, 0.16);
  --move-btn-bg-hover: rgba(181, 138, 58, 0.28);
  --move-btn-border: rgba(36, 10, 19, 0.92);
  --apply-disabled-bg: rgba(181, 138, 58, 0.22);
  --apply-disabled-text: rgba(255, 247, 237, 0.55);
  --qr-image-bg: #fff7ed;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #e0b963;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Trustline Azure ── */
:is(body[data-user-theme="trustline-azure"], #card-shell[data-design="trustline-azure"], .theme-preview-shell[data-design="trustline-azure"]) {
  --bg-primary: #eff6ff;
  --bg-secondary: #dbeafe;
  --bg-gradient-mid: #e8f2ff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #dbeafe;
  --button-hover: #dbeafe;
  --text-primary: #0c1a2e;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --accent: #0284c7;
  --accent-light: rgba(2, 132, 199, 0.18);
  --accent-subtle: rgba(2, 132, 199, 0.1);
  --accent-border: rgba(2, 132, 199, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(2, 132, 199, 0.12);
  --icon-color: #0284c7;
  --contact-icon-bg-start: #0284c7;
  --contact-icon-bg-end: #0369a1;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #38bdf8;
  --avatar-ring-end: #0284c7;
  --avatar-ring-glow: rgba(2, 132, 199, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #dbeafe;
  --avatar-placeholder-text: #0c1a2e;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #dbeafe;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(2, 132, 199, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(2, 132, 199, 0.2);
  --menu-hover: rgba(2, 132, 199, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #eff6ff;
  --modal-border: rgba(2, 132, 199, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(2, 132, 199, 0.45);
  --drop-target-ring: rgba(2, 132, 199, 0.55);
  --add-btn-border: rgba(2, 132, 199, 0.35);
  --add-btn-bg: rgba(2, 132, 199, 0.06);
  --add-btn-bg-hover: rgba(2, 132, 199, 0.12);
  --drag-handle-bg: rgba(2, 132, 199, 0.1);
  --move-btn-bg: rgba(2, 132, 199, 0.12);
  --move-btn-bg-hover: rgba(2, 132, 199, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(2, 132, 199, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #38bdf8;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Midnight Boardroom ── */
:is(body[data-user-theme="midnight-boardroom"], #card-shell[data-design="midnight-boardroom"], .theme-preview-shell[data-design="midnight-boardroom"]) {
  --bg-primary: #020617;
  --bg-secondary: #0f172a;
  --bg-gradient-mid: #1e293b;
  --card-bg: #0b1220;
  --surface: rgba(11, 18, 32, 0.88);
  --surface-glass: rgba(11,18,32,0.86);
  --button-bg: #1e293b;
  --button-hover: #1e293b;
  --text-primary: #f8fafc;
  --text-secondary: #b6c2d1;
  --text-tertiary: #64748b;
  --accent: #94a3b8;
  --accent-light: rgba(148, 163, 184, 0.28);
  --accent-subtle: rgba(148, 163, 184, 0.12);
  --accent-border: rgba(148, 163, 184, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(148, 163, 184, 0.14);
  --icon-color: #94a3b8;
  --contact-icon-bg-start: #64748b;
  --contact-icon-bg-end: #334155;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #e2e8f0;
  --avatar-ring-end: #94a3b8;
  --avatar-ring-glow: rgba(148, 163, 184, 0.35);
  --avatar-border: #020617;
  --avatar-placeholder-start: #0b1220;
  --avatar-placeholder-end: #0f172a;
  --avatar-placeholder-text: #f8fafc;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0f172a;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(148, 163, 184, 0.15);
  --menu-bg: rgba(2, 6, 23, 0.98);
  --menu-border: rgba(148, 163, 184, 0.28);
  --menu-hover: rgba(148, 163, 184, 0.1);
  --modal-bg-start: #0b1220;
  --modal-bg-end: #020617;
  --modal-border: rgba(148, 163, 184, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(148, 163, 184, 0.55);
  --drop-target-ring: rgba(148, 163, 184, 0.65);
  --add-btn-border: rgba(148, 163, 184, 0.38);
  --add-btn-bg: rgba(148, 163, 184, 0.06);
  --add-btn-bg-hover: rgba(148, 163, 184, 0.12);
  --drag-handle-bg: rgba(148, 163, 184, 0.12);
  --move-btn-bg: rgba(148, 163, 184, 0.16);
  --move-btn-bg-hover: rgba(148, 163, 184, 0.28);
  --move-btn-border: rgba(15, 23, 42, 0.92);
  --apply-disabled-bg: rgba(148, 163, 184, 0.22);
  --apply-disabled-text: rgba(248, 250, 252, 0.55);
  --qr-image-bg: #f8fafc;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #e2e8f0;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Velvet Noir ── */
:is(body[data-user-theme="velvet-noir"], #card-shell[data-design="velvet-noir"], .theme-preview-shell[data-design="velvet-noir"]) {
  --bg-primary: #0d0508;
  --bg-secondary: #1a0710;
  --bg-gradient-mid: #2a0b18;
  --card-bg: #17070d;
  --surface: rgba(23, 7, 13, 0.88);
  --surface-glass: rgba(23,7,13,0.88);
  --button-bg: #2a0b18;
  --button-hover: #2a0b18;
  --text-primary: #fff7f7;
  --text-secondary: #d8a7ae;
  --text-tertiary: #64748b;
  --accent: #b91c1c;
  --accent-light: rgba(185, 28, 28, 0.28);
  --accent-subtle: rgba(185, 28, 28, 0.12);
  --accent-border: rgba(185, 28, 28, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(185, 28, 28, 0.14);
  --icon-color: #b91c1c;
  --contact-icon-bg-start: #b91c1c;
  --contact-icon-bg-end: #7f1d1d;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f87171;
  --avatar-ring-end: #b91c1c;
  --avatar-ring-glow: rgba(185, 28, 28, 0.35);
  --avatar-border: #0d0508;
  --avatar-placeholder-start: #17070d;
  --avatar-placeholder-end: #1a0710;
  --avatar-placeholder-text: #fff7f7;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1a0710;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(185, 28, 28, 0.15);
  --menu-bg: rgba(13, 5, 8, 0.98);
  --menu-border: rgba(185, 28, 28, 0.28);
  --menu-hover: rgba(185, 28, 28, 0.1);
  --modal-bg-start: #17070d;
  --modal-bg-end: #0d0508;
  --modal-border: rgba(185, 28, 28, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(185, 28, 28, 0.55);
  --drop-target-ring: rgba(185, 28, 28, 0.65);
  --add-btn-border: rgba(185, 28, 28, 0.38);
  --add-btn-bg: rgba(185, 28, 28, 0.06);
  --add-btn-bg-hover: rgba(185, 28, 28, 0.12);
  --drag-handle-bg: rgba(185, 28, 28, 0.12);
  --move-btn-bg: rgba(185, 28, 28, 0.16);
  --move-btn-bg-hover: rgba(185, 28, 28, 0.28);
  --move-btn-border: rgba(26, 7, 16, 0.92);
  --apply-disabled-bg: rgba(185, 28, 28, 0.22);
  --apply-disabled-text: rgba(255, 247, 247, 0.55);
  --qr-image-bg: #fff7f7;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f87171;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Champagne Atelier ── */
:is(body[data-user-theme="champagne-atelier"], #card-shell[data-design="champagne-atelier"], .theme-preview-shell[data-design="champagne-atelier"]) {
  --bg-primary: #fbf3df;
  --bg-secondary: #efe1c2;
  --bg-gradient-mid: #f7ead0;
  --card-bg: #fffaf0;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,250,240,0.94);
  --button-bg: #efe1c2;
  --button-hover: #efe1c2;
  --text-primary: #2d2415;
  --text-secondary: #765f3a;
  --text-tertiary: #64748b;
  --accent: #b9852d;
  --accent-light: rgba(185, 133, 45, 0.18);
  --accent-subtle: rgba(185, 133, 45, 0.1);
  --accent-border: rgba(185, 133, 45, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(185, 133, 45, 0.12);
  --icon-color: #b9852d;
  --contact-icon-bg-start: #d6ad60;
  --contact-icon-bg-end: #a87121;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #efc879;
  --avatar-ring-end: #b9852d;
  --avatar-ring-glow: rgba(185, 133, 45, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fffaf0;
  --avatar-placeholder-end: #efe1c2;
  --avatar-placeholder-text: #2d2415;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #efe1c2;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(185, 133, 45, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(185, 133, 45, 0.2);
  --menu-hover: rgba(185, 133, 45, 0.08);
  --modal-bg-start: #fffaf0;
  --modal-bg-end: #fbf3df;
  --modal-border: rgba(185, 133, 45, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(185, 133, 45, 0.45);
  --drop-target-ring: rgba(185, 133, 45, 0.55);
  --add-btn-border: rgba(185, 133, 45, 0.35);
  --add-btn-bg: rgba(185, 133, 45, 0.06);
  --add-btn-bg-hover: rgba(185, 133, 45, 0.12);
  --drag-handle-bg: rgba(185, 133, 45, 0.1);
  --move-btn-bg: rgba(185, 133, 45, 0.12);
  --move-btn-bg-hover: rgba(185, 133, 45, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(185, 133, 45, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #efc879;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Gilded Pearl ── */
:is(body[data-user-theme="gilded-pearl"], #card-shell[data-design="gilded-pearl"], .theme-preview-shell[data-design="gilded-pearl"]) {
  --bg-primary: #fffdf5;
  --bg-secondary: #f4ecd7;
  --bg-gradient-mid: #fbf6e8;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #f4ecd7;
  --button-hover: #f4ecd7;
  --text-primary: #272217;
  --text-secondary: #71664b;
  --text-tertiary: #64748b;
  --accent: #c9a227;
  --accent-light: rgba(201, 162, 39, 0.18);
  --accent-subtle: rgba(201, 162, 39, 0.1);
  --accent-border: rgba(201, 162, 39, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(201, 162, 39, 0.12);
  --icon-color: #c9a227;
  --contact-icon-bg-start: #c9a227;
  --contact-icon-bg-end: #92730f;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #e8c95a;
  --avatar-ring-end: #b08b16;
  --avatar-ring-glow: rgba(201, 162, 39, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #f4ecd7;
  --avatar-placeholder-text: #272217;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f4ecd7;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(201, 162, 39, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(201, 162, 39, 0.2);
  --menu-hover: rgba(201, 162, 39, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fffdf5;
  --modal-border: rgba(201, 162, 39, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(201, 162, 39, 0.45);
  --drop-target-ring: rgba(201, 162, 39, 0.55);
  --add-btn-border: rgba(201, 162, 39, 0.35);
  --add-btn-bg: rgba(201, 162, 39, 0.06);
  --add-btn-bg-hover: rgba(201, 162, 39, 0.12);
  --drag-handle-bg: rgba(201, 162, 39, 0.1);
  --move-btn-bg: rgba(201, 162, 39, 0.12);
  --move-btn-bg-hover: rgba(201, 162, 39, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(201, 162, 39, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #e8c95a;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Opera Plum ── */
:is(body[data-user-theme="opera-plum"], #card-shell[data-design="opera-plum"], .theme-preview-shell[data-design="opera-plum"]) {
  --bg-primary: #2a102c;
  --bg-secondary: #18091b;
  --bg-gradient-mid: #3a1840;
  --card-bg: #321337;
  --surface: rgba(50, 19, 55, 0.88);
  --surface-glass: rgba(50,19,55,0.86);
  --button-bg: #44204a;
  --button-hover: #44204a;
  --text-primary: #fff5fb;
  --text-secondary: #dcb6cf;
  --text-tertiary: #64748b;
  --accent: #d084a6;
  --accent-light: rgba(208, 132, 166, 0.28);
  --accent-subtle: rgba(208, 132, 166, 0.12);
  --accent-border: rgba(208, 132, 166, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(208, 132, 166, 0.14);
  --icon-color: #d084a6;
  --contact-icon-bg-start: #d084a6;
  --contact-icon-bg-end: #a8557a;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f0a8c8;
  --avatar-ring-end: #d084a6;
  --avatar-ring-glow: rgba(208, 132, 166, 0.35);
  --avatar-border: #2a102c;
  --avatar-placeholder-start: #321337;
  --avatar-placeholder-end: #18091b;
  --avatar-placeholder-text: #fff5fb;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #18091b;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(208, 132, 166, 0.15);
  --menu-bg: rgba(42, 16, 44, 0.98);
  --menu-border: rgba(208, 132, 166, 0.28);
  --menu-hover: rgba(208, 132, 166, 0.1);
  --modal-bg-start: #321337;
  --modal-bg-end: #2a102c;
  --modal-border: rgba(208, 132, 166, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(208, 132, 166, 0.55);
  --drop-target-ring: rgba(208, 132, 166, 0.65);
  --add-btn-border: rgba(208, 132, 166, 0.38);
  --add-btn-bg: rgba(208, 132, 166, 0.06);
  --add-btn-bg-hover: rgba(208, 132, 166, 0.12);
  --drag-handle-bg: rgba(208, 132, 166, 0.12);
  --move-btn-bg: rgba(208, 132, 166, 0.16);
  --move-btn-bg-hover: rgba(208, 132, 166, 0.28);
  --move-btn-border: rgba(24, 9, 27, 0.92);
  --apply-disabled-bg: rgba(208, 132, 166, 0.22);
  --apply-disabled-text: rgba(255, 245, 251, 0.55);
  --qr-image-bg: #fff5fb;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f0a8c8;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Sable Rose ── */
:is(body[data-user-theme="sable-rose"], #card-shell[data-design="sable-rose"], .theme-preview-shell[data-design="sable-rose"]) {
  --bg-primary: #251613;
  --bg-secondary: #3a231e;
  --bg-gradient-mid: #4b2d27;
  --card-bg: #30201c;
  --surface: rgba(48, 32, 28, 0.88);
  --surface-glass: rgba(48,32,28,0.86);
  --button-bg: #4b2d27;
  --button-hover: #4b2d27;
  --text-primary: #fff7f4;
  --text-secondary: #d8b9b0;
  --text-tertiary: #64748b;
  --accent: #be7d8f;
  --accent-light: rgba(190, 125, 143, 0.28);
  --accent-subtle: rgba(190, 125, 143, 0.12);
  --accent-border: rgba(190, 125, 143, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(190, 125, 143, 0.14);
  --icon-color: #be7d8f;
  --contact-icon-bg-start: #be7d8f;
  --contact-icon-bg-end: #91546a;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #e8a9b8;
  --avatar-ring-end: #be7d8f;
  --avatar-ring-glow: rgba(190, 125, 143, 0.35);
  --avatar-border: #251613;
  --avatar-placeholder-start: #30201c;
  --avatar-placeholder-end: #3a231e;
  --avatar-placeholder-text: #fff7f4;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #3a231e;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(190, 125, 143, 0.15);
  --menu-bg: rgba(37, 22, 19, 0.98);
  --menu-border: rgba(190, 125, 143, 0.28);
  --menu-hover: rgba(190, 125, 143, 0.1);
  --modal-bg-start: #30201c;
  --modal-bg-end: #251613;
  --modal-border: rgba(190, 125, 143, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(190, 125, 143, 0.55);
  --drop-target-ring: rgba(190, 125, 143, 0.65);
  --add-btn-border: rgba(190, 125, 143, 0.38);
  --add-btn-bg: rgba(190, 125, 143, 0.06);
  --add-btn-bg-hover: rgba(190, 125, 143, 0.12);
  --drag-handle-bg: rgba(190, 125, 143, 0.12);
  --move-btn-bg: rgba(190, 125, 143, 0.16);
  --move-btn-bg-hover: rgba(190, 125, 143, 0.28);
  --move-btn-border: rgba(58, 35, 30, 0.92);
  --apply-disabled-bg: rgba(190, 125, 143, 0.22);
  --apply-disabled-text: rgba(255, 247, 244, 0.55);
  --qr-image-bg: #fff7f4;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #e8a9b8;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Porcelain Gold ── */
:is(body[data-user-theme="porcelain-gold"], #card-shell[data-design="porcelain-gold"], .theme-preview-shell[data-design="porcelain-gold"]) {
  --bg-primary: #f7f4ee;
  --bg-secondary: #e9e1d2;
  --bg-gradient-mid: #f1ece3;
  --card-bg: #fffefa;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,254,250,0.94);
  --button-bg: #e9e1d2;
  --button-hover: #e9e1d2;
  --text-primary: #1f2933;
  --text-secondary: #6b6257;
  --text-tertiary: #64748b;
  --accent: #b7791f;
  --accent-light: rgba(183, 121, 31, 0.18);
  --accent-subtle: rgba(183, 121, 31, 0.1);
  --accent-border: rgba(183, 121, 31, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(183, 121, 31, 0.12);
  --icon-color: #b7791f;
  --contact-icon-bg-start: #b7791f;
  --contact-icon-bg-end: #8a5a14;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #d6a84c;
  --avatar-ring-end: #a96c18;
  --avatar-ring-glow: rgba(183, 121, 31, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fffefa;
  --avatar-placeholder-end: #e9e1d2;
  --avatar-placeholder-text: #1f2933;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #e9e1d2;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(183, 121, 31, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(183, 121, 31, 0.2);
  --menu-hover: rgba(183, 121, 31, 0.08);
  --modal-bg-start: #fffefa;
  --modal-bg-end: #f7f4ee;
  --modal-border: rgba(183, 121, 31, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(183, 121, 31, 0.45);
  --drop-target-ring: rgba(183, 121, 31, 0.55);
  --add-btn-border: rgba(183, 121, 31, 0.35);
  --add-btn-bg: rgba(183, 121, 31, 0.06);
  --add-btn-bg-hover: rgba(183, 121, 31, 0.12);
  --drag-handle-bg: rgba(183, 121, 31, 0.1);
  --move-btn-bg: rgba(183, 121, 31, 0.12);
  --move-btn-bg-hover: rgba(183, 121, 31, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(183, 121, 31, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #d6a84c;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Maison Aubergine ── */
:is(body[data-user-theme="maison-aubergine"], #card-shell[data-design="maison-aubergine"], .theme-preview-shell[data-design="maison-aubergine"]) {
  --bg-primary: #1c1230;
  --bg-secondary: #120b21;
  --bg-gradient-mid: #2b1b49;
  --card-bg: #24173b;
  --surface: rgba(36, 23, 59, 0.88);
  --surface-glass: rgba(36,23,59,0.86);
  --button-bg: #332253;
  --button-hover: #332253;
  --text-primary: #faf7ff;
  --text-secondary: #c9b8eb;
  --text-tertiary: #64748b;
  --accent: #a78bfa;
  --accent-light: rgba(167, 139, 250, 0.28);
  --accent-subtle: rgba(167, 139, 250, 0.12);
  --accent-border: rgba(167, 139, 250, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(167, 139, 250, 0.14);
  --icon-color: #a78bfa;
  --contact-icon-bg-start: #8b5cf6;
  --contact-icon-bg-end: #6d28d9;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #8b5cf6;
  --avatar-ring-glow: rgba(167, 139, 250, 0.35);
  --avatar-border: #1c1230;
  --avatar-placeholder-start: #24173b;
  --avatar-placeholder-end: #120b21;
  --avatar-placeholder-text: #faf7ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #120b21;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(167, 139, 250, 0.15);
  --menu-bg: rgba(28, 18, 48, 0.98);
  --menu-border: rgba(167, 139, 250, 0.28);
  --menu-hover: rgba(167, 139, 250, 0.1);
  --modal-bg-start: #24173b;
  --modal-bg-end: #1c1230;
  --modal-border: rgba(167, 139, 250, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(167, 139, 250, 0.55);
  --drop-target-ring: rgba(167, 139, 250, 0.65);
  --add-btn-border: rgba(167, 139, 250, 0.38);
  --add-btn-bg: rgba(167, 139, 250, 0.06);
  --add-btn-bg-hover: rgba(167, 139, 250, 0.12);
  --drag-handle-bg: rgba(167, 139, 250, 0.12);
  --move-btn-bg: rgba(167, 139, 250, 0.16);
  --move-btn-bg-hover: rgba(167, 139, 250, 0.28);
  --move-btn-border: rgba(18, 11, 33, 0.92);
  --apply-disabled-bg: rgba(167, 139, 250, 0.22);
  --apply-disabled-text: rgba(250, 247, 255, 0.55);
  --qr-image-bg: #faf7ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Atlas Champagne ── */
:is(body[data-user-theme="atlas-champagne"], #card-shell[data-design="atlas-champagne"], .theme-preview-shell[data-design="atlas-champagne"]) {
  --bg-primary: #faf6ef;
  --bg-secondary: #f0e6d6;
  --bg-gradient-mid: #f7efe4;
  --card-bg: #fffefb;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,254,251,0.94);
  --button-bg: #f0e6d6;
  --button-hover: #f0e6d6;
  --text-primary: #2a2218;
  --text-secondary: #6f5f4f;
  --text-tertiary: #64748b;
  --accent: #b8864a;
  --accent-light: rgba(184, 134, 74, 0.18);
  --accent-subtle: rgba(184, 134, 74, 0.1);
  --accent-border: rgba(184, 134, 74, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(184, 134, 74, 0.12);
  --icon-color: #b8864a;
  --contact-icon-bg-start: #d4a574;
  --contact-icon-bg-end: #a66f35;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #e8c89a;
  --avatar-ring-end: #c49a5c;
  --avatar-ring-glow: rgba(184, 134, 74, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fffefb;
  --avatar-placeholder-end: #f0e6d6;
  --avatar-placeholder-text: #2a2218;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f0e6d6;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(184, 134, 74, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(184, 134, 74, 0.2);
  --menu-hover: rgba(184, 134, 74, 0.08);
  --modal-bg-start: #fffefb;
  --modal-bg-end: #faf6ef;
  --modal-border: rgba(184, 134, 74, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(184, 134, 74, 0.45);
  --drop-target-ring: rgba(184, 134, 74, 0.55);
  --add-btn-border: rgba(184, 134, 74, 0.35);
  --add-btn-bg: rgba(184, 134, 74, 0.06);
  --add-btn-bg-hover: rgba(184, 134, 74, 0.12);
  --drag-handle-bg: rgba(184, 134, 74, 0.1);
  --move-btn-bg: rgba(184, 134, 74, 0.12);
  --move-btn-bg-hover: rgba(184, 134, 74, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(184, 134, 74, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #e8c89a;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Noir Silk ── */
:is(body[data-user-theme="noir-silk"], #card-shell[data-design="noir-silk"], .theme-preview-shell[data-design="noir-silk"]) {
  --bg-primary: #09090b;
  --bg-secondary: #18181b;
  --bg-gradient-mid: #27272a;
  --card-bg: #111113;
  --surface: rgba(17, 17, 19, 0.88);
  --surface-glass: rgba(17,17,19,0.88);
  --button-bg: #27272a;
  --button-hover: #27272a;
  --text-primary: #fafafa;
  --text-secondary: #c8c8ce;
  --text-tertiary: #64748b;
  --accent: #d4d4d8;
  --accent-light: rgba(212, 212, 216, 0.28);
  --accent-subtle: rgba(212, 212, 216, 0.12);
  --accent-border: rgba(212, 212, 216, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(212, 212, 216, 0.14);
  --icon-color: #d4d4d8;
  --contact-icon-bg-start: #a1a1aa;
  --contact-icon-bg-end: #52525b;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f4f4f5;
  --avatar-ring-end: #a1a1aa;
  --avatar-ring-glow: rgba(212, 212, 216, 0.35);
  --avatar-border: #09090b;
  --avatar-placeholder-start: #111113;
  --avatar-placeholder-end: #18181b;
  --avatar-placeholder-text: #fafafa;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #18181b;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(212, 212, 216, 0.15);
  --menu-bg: rgba(9, 9, 11, 0.98);
  --menu-border: rgba(212, 212, 216, 0.28);
  --menu-hover: rgba(212, 212, 216, 0.1);
  --modal-bg-start: #111113;
  --modal-bg-end: #09090b;
  --modal-border: rgba(212, 212, 216, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(212, 212, 216, 0.55);
  --drop-target-ring: rgba(212, 212, 216, 0.65);
  --add-btn-border: rgba(212, 212, 216, 0.38);
  --add-btn-bg: rgba(212, 212, 216, 0.06);
  --add-btn-bg-hover: rgba(212, 212, 216, 0.12);
  --drag-handle-bg: rgba(212, 212, 216, 0.12);
  --move-btn-bg: rgba(212, 212, 216, 0.16);
  --move-btn-bg-hover: rgba(212, 212, 216, 0.28);
  --move-btn-border: rgba(24, 24, 27, 0.92);
  --apply-disabled-bg: rgba(212, 212, 216, 0.22);
  --apply-disabled-text: rgba(250, 250, 250, 0.55);
  --qr-image-bg: #fafafa;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f4f4f5;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Linen Air ── */
:is(body[data-user-theme="linen-air"], #card-shell[data-design="linen-air"], .theme-preview-shell[data-design="linen-air"]) {
  --bg-primary: #f8f6ef;
  --bg-secondary: #eef1f5;
  --bg-gradient-mid: #f3f4f2;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #eef1f5;
  --button-hover: #eef1f5;
  --text-primary: #182032;
  --text-secondary: #596273;
  --text-tertiary: #64748b;
  --accent: #7aa2f7;
  --accent-light: rgba(122, 162, 247, 0.18);
  --accent-subtle: rgba(122, 162, 247, 0.1);
  --accent-border: rgba(122, 162, 247, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(122, 162, 247, 0.12);
  --icon-color: #7aa2f7;
  --contact-icon-bg-start: #7aa2f7;
  --contact-icon-bg-end: #4f78d8;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #a7c2ff;
  --avatar-ring-end: #7aa2f7;
  --avatar-ring-glow: rgba(122, 162, 247, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #eef1f5;
  --avatar-placeholder-text: #182032;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #eef1f5;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(122, 162, 247, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(122, 162, 247, 0.2);
  --menu-hover: rgba(122, 162, 247, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f8f6ef;
  --modal-border: rgba(122, 162, 247, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(122, 162, 247, 0.45);
  --drop-target-ring: rgba(122, 162, 247, 0.55);
  --add-btn-border: rgba(122, 162, 247, 0.35);
  --add-btn-bg: rgba(122, 162, 247, 0.06);
  --add-btn-bg-hover: rgba(122, 162, 247, 0.12);
  --drag-handle-bg: rgba(122, 162, 247, 0.1);
  --move-btn-bg: rgba(122, 162, 247, 0.12);
  --move-btn-bg-hover: rgba(122, 162, 247, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(122, 162, 247, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #a7c2ff;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Paper Mist ── */
:is(body[data-user-theme="paper-mist"], #card-shell[data-design="paper-mist"], .theme-preview-shell[data-design="paper-mist"]) {
  --bg-primary: #fafafa;
  --bg-secondary: #eef4f1;
  --bg-gradient-mid: #f3f7f5;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.96);
  --button-bg: #eef4f1;
  --button-hover: #eef4f1;
  --text-primary: #17211e;
  --text-secondary: #5d6864;
  --text-tertiary: #64748b;
  --accent: #86b3a5;
  --accent-light: rgba(134, 179, 165, 0.18);
  --accent-subtle: rgba(134, 179, 165, 0.1);
  --accent-border: rgba(134, 179, 165, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(134, 179, 165, 0.12);
  --icon-color: #86b3a5;
  --contact-icon-bg-start: #86b3a5;
  --contact-icon-bg-end: #5f8f82;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #add2c8;
  --avatar-ring-end: #86b3a5;
  --avatar-ring-glow: rgba(134, 179, 165, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #eef4f1;
  --avatar-placeholder-text: #17211e;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #eef4f1;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(134, 179, 165, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(134, 179, 165, 0.2);
  --menu-hover: rgba(134, 179, 165, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fafafa;
  --modal-border: rgba(134, 179, 165, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(134, 179, 165, 0.45);
  --drop-target-ring: rgba(134, 179, 165, 0.55);
  --add-btn-border: rgba(134, 179, 165, 0.35);
  --add-btn-bg: rgba(134, 179, 165, 0.06);
  --add-btn-bg-hover: rgba(134, 179, 165, 0.12);
  --drag-handle-bg: rgba(134, 179, 165, 0.1);
  --move-btn-bg: rgba(134, 179, 165, 0.12);
  --move-btn-bg-hover: rgba(134, 179, 165, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(134, 179, 165, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #add2c8;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Soft Graphite ── */
:is(body[data-user-theme="soft-graphite"], #card-shell[data-design="soft-graphite"], .theme-preview-shell[data-design="soft-graphite"]) {
  --bg-primary: #e8eaed;
  --bg-secondary: #f6f7f8;
  --bg-gradient-mid: #eef0f2;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #e5e7eb;
  --button-hover: #e5e7eb;
  --text-primary: #161a20;
  --text-secondary: #5b6470;
  --text-tertiary: #64748b;
  --accent: #3b82f6;
  --accent-light: rgba(59, 130, 246, 0.18);
  --accent-subtle: rgba(59, 130, 246, 0.1);
  --accent-border: rgba(59, 130, 246, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(59, 130, 246, 0.12);
  --icon-color: #3b82f6;
  --contact-icon-bg-start: #3b82f6;
  --contact-icon-bg-end: #2563eb;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #93c5fd;
  --avatar-ring-end: #3b82f6;
  --avatar-ring-glow: rgba(59, 130, 246, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #f6f7f8;
  --avatar-placeholder-text: #161a20;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f6f7f8;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(59, 130, 246, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(59, 130, 246, 0.2);
  --menu-hover: rgba(59, 130, 246, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #e8eaed;
  --modal-border: rgba(59, 130, 246, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(59, 130, 246, 0.45);
  --drop-target-ring: rgba(59, 130, 246, 0.55);
  --add-btn-border: rgba(59, 130, 246, 0.35);
  --add-btn-bg: rgba(59, 130, 246, 0.06);
  --add-btn-bg-hover: rgba(59, 130, 246, 0.12);
  --drag-handle-bg: rgba(59, 130, 246, 0.1);
  --move-btn-bg: rgba(59, 130, 246, 0.12);
  --move-btn-bg-hover: rgba(59, 130, 246, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(59, 130, 246, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #93c5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Oat Canvas ── */
:is(body[data-user-theme="oat-canvas"], #card-shell[data-design="oat-canvas"], .theme-preview-shell[data-design="oat-canvas"]) {
  --bg-primary: #f5efe4;
  --bg-secondary: #eadfce;
  --bg-gradient-mid: #f0e7d8;
  --card-bg: #fffaf2;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,250,242,0.94);
  --button-bg: #eadfce;
  --button-hover: #eadfce;
  --text-primary: #2a2119;
  --text-secondary: #756556;
  --text-tertiary: #64748b;
  --accent: #c8794a;
  --accent-light: rgba(200, 121, 74, 0.18);
  --accent-subtle: rgba(200, 121, 74, 0.1);
  --accent-border: rgba(200, 121, 74, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(200, 121, 74, 0.12);
  --icon-color: #c8794a;
  --contact-icon-bg-start: #c8794a;
  --contact-icon-bg-end: #a5572f;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #e0a47e;
  --avatar-ring-end: #c8794a;
  --avatar-ring-glow: rgba(200, 121, 74, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fffaf2;
  --avatar-placeholder-end: #eadfce;
  --avatar-placeholder-text: #2a2119;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #eadfce;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(200, 121, 74, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(200, 121, 74, 0.2);
  --menu-hover: rgba(200, 121, 74, 0.08);
  --modal-bg-start: #fffaf2;
  --modal-bg-end: #f5efe4;
  --modal-border: rgba(200, 121, 74, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(200, 121, 74, 0.45);
  --drop-target-ring: rgba(200, 121, 74, 0.55);
  --add-btn-border: rgba(200, 121, 74, 0.35);
  --add-btn-bg: rgba(200, 121, 74, 0.06);
  --add-btn-bg-hover: rgba(200, 121, 74, 0.12);
  --drag-handle-bg: rgba(200, 121, 74, 0.1);
  --move-btn-bg: rgba(200, 121, 74, 0.12);
  --move-btn-bg-hover: rgba(200, 121, 74, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(200, 121, 74, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #e0a47e;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Pearl Frost ── */
:is(body[data-user-theme="pearl-frost"], #card-shell[data-design="pearl-frost"], .theme-preview-shell[data-design="pearl-frost"]) {
  --bg-primary: #f4fbff;
  --bg-secondary: #e5f5fb;
  --bg-gradient-mid: #eef9fd;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.96);
  --button-bg: #e5f5fb;
  --button-hover: #e5f5fb;
  --text-primary: #102030;
  --text-secondary: #557084;
  --text-tertiary: #64748b;
  --accent: #38bdf8;
  --accent-light: rgba(56, 189, 248, 0.18);
  --accent-subtle: rgba(56, 189, 248, 0.1);
  --accent-border: rgba(56, 189, 248, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(56, 189, 248, 0.12);
  --icon-color: #38bdf8;
  --contact-icon-bg-start: #38bdf8;
  --contact-icon-bg-end: #0284c7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #7dd3fc;
  --avatar-ring-end: #38bdf8;
  --avatar-ring-glow: rgba(56, 189, 248, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #e5f5fb;
  --avatar-placeholder-text: #102030;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #e5f5fb;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(56, 189, 248, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(56, 189, 248, 0.2);
  --menu-hover: rgba(56, 189, 248, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f4fbff;
  --modal-border: rgba(56, 189, 248, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(56, 189, 248, 0.45);
  --drop-target-ring: rgba(56, 189, 248, 0.55);
  --add-btn-border: rgba(56, 189, 248, 0.35);
  --add-btn-bg: rgba(56, 189, 248, 0.06);
  --add-btn-bg-hover: rgba(56, 189, 248, 0.12);
  --drag-handle-bg: rgba(56, 189, 248, 0.1);
  --move-btn-bg: rgba(56, 189, 248, 0.12);
  --move-btn-bg-hover: rgba(56, 189, 248, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(56, 189, 248, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #7dd3fc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Cloud Line ── */
:is(body[data-user-theme="cloud-line"], #card-shell[data-design="cloud-line"], .theme-preview-shell[data-design="cloud-line"]) {
  --bg-primary: #f8fafc;
  --bg-secondary: #edf0ff;
  --bg-gradient-mid: #f3f5ff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.96);
  --button-bg: #edf0ff;
  --button-hover: #edf0ff;
  --text-primary: #151827;
  --text-secondary: #5f6478;
  --text-tertiary: #64748b;
  --accent: #6366f1;
  --accent-light: rgba(99, 102, 241, 0.18);
  --accent-subtle: rgba(99, 102, 241, 0.1);
  --accent-border: rgba(99, 102, 241, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(99, 102, 241, 0.12);
  --icon-color: #6366f1;
  --contact-icon-bg-start: #6366f1;
  --contact-icon-bg-end: #4f46e5;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #a5b4fc;
  --avatar-ring-end: #6366f1;
  --avatar-ring-glow: rgba(99, 102, 241, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #edf0ff;
  --avatar-placeholder-text: #151827;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #edf0ff;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(99, 102, 241, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(99, 102, 241, 0.2);
  --menu-hover: rgba(99, 102, 241, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f8fafc;
  --modal-border: rgba(99, 102, 241, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(99, 102, 241, 0.45);
  --drop-target-ring: rgba(99, 102, 241, 0.55);
  --add-btn-border: rgba(99, 102, 241, 0.35);
  --add-btn-bg: rgba(99, 102, 241, 0.06);
  --add-btn-bg-hover: rgba(99, 102, 241, 0.12);
  --drag-handle-bg: rgba(99, 102, 241, 0.1);
  --move-btn-bg: rgba(99, 102, 241, 0.12);
  --move-btn-bg-hover: rgba(99, 102, 241, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(99, 102, 241, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #a5b4fc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Stone Whisper ── */
:is(body[data-user-theme="stone-whisper"], #card-shell[data-design="stone-whisper"], .theme-preview-shell[data-design="stone-whisper"]) {
  --bg-primary: #eeebe5;
  --bg-secondary: #dfdbd3;
  --bg-gradient-mid: #e8e4dc;
  --card-bg: #fbfaf7;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(251,250,247,0.94);
  --button-bg: #dfdbd3;
  --button-hover: #dfdbd3;
  --text-primary: #28241e;
  --text-secondary: #6c665e;
  --text-tertiary: #64748b;
  --accent: #d49a3a;
  --accent-light: rgba(212, 154, 58, 0.18);
  --accent-subtle: rgba(212, 154, 58, 0.1);
  --accent-border: rgba(212, 154, 58, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(212, 154, 58, 0.12);
  --icon-color: #d49a3a;
  --contact-icon-bg-start: #d49a3a;
  --contact-icon-bg-end: #aa7424;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #e7bd72;
  --avatar-ring-end: #d49a3a;
  --avatar-ring-glow: rgba(212, 154, 58, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fbfaf7;
  --avatar-placeholder-end: #dfdbd3;
  --avatar-placeholder-text: #28241e;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #dfdbd3;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(212, 154, 58, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(212, 154, 58, 0.2);
  --menu-hover: rgba(212, 154, 58, 0.08);
  --modal-bg-start: #fbfaf7;
  --modal-bg-end: #eeebe5;
  --modal-border: rgba(212, 154, 58, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(212, 154, 58, 0.45);
  --drop-target-ring: rgba(212, 154, 58, 0.55);
  --add-btn-border: rgba(212, 154, 58, 0.35);
  --add-btn-bg: rgba(212, 154, 58, 0.06);
  --add-btn-bg-hover: rgba(212, 154, 58, 0.12);
  --drag-handle-bg: rgba(212, 154, 58, 0.1);
  --move-btn-bg: rgba(212, 154, 58, 0.12);
  --move-btn-bg-hover: rgba(212, 154, 58, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(212, 154, 58, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #e7bd72;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Frost Sage ── */
:is(body[data-user-theme="frost-sage"], #card-shell[data-design="frost-sage"], .theme-preview-shell[data-design="frost-sage"]) {
  --bg-primary: #f3f8f5;
  --bg-secondary: #e2eee8;
  --bg-gradient-mid: #ebf3ef;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #e2eee8;
  --button-hover: #e2eee8;
  --text-primary: #18231f;
  --text-secondary: #5b6a65;
  --text-tertiary: #64748b;
  --accent: #6aa58f;
  --accent-light: rgba(106, 165, 143, 0.18);
  --accent-subtle: rgba(106, 165, 143, 0.1);
  --accent-border: rgba(106, 165, 143, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(106, 165, 143, 0.12);
  --icon-color: #6aa58f;
  --contact-icon-bg-start: #6aa58f;
  --contact-icon-bg-end: #4d8371;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #9ac8b8;
  --avatar-ring-end: #6aa58f;
  --avatar-ring-glow: rgba(106, 165, 143, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #e2eee8;
  --avatar-placeholder-text: #18231f;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #e2eee8;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(106, 165, 143, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(106, 165, 143, 0.2);
  --menu-hover: rgba(106, 165, 143, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f3f8f5;
  --modal-border: rgba(106, 165, 143, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(106, 165, 143, 0.45);
  --drop-target-ring: rgba(106, 165, 143, 0.55);
  --add-btn-border: rgba(106, 165, 143, 0.35);
  --add-btn-bg: rgba(106, 165, 143, 0.06);
  --add-btn-bg-hover: rgba(106, 165, 143, 0.12);
  --drag-handle-bg: rgba(106, 165, 143, 0.1);
  --move-btn-bg: rgba(106, 165, 143, 0.12);
  --move-btn-bg-hover: rgba(106, 165, 143, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(106, 165, 143, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #9ac8b8;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Quiet Lilac ── */
:is(body[data-user-theme="quiet-lilac"], #card-shell[data-design="quiet-lilac"], .theme-preview-shell[data-design="quiet-lilac"]) {
  --bg-primary: #f7f4ff;
  --bg-secondary: #ebe5fb;
  --bg-gradient-mid: #f1edff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #ebe5fb;
  --button-hover: #ebe5fb;
  --text-primary: #211b31;
  --text-secondary: #665d78;
  --text-tertiary: #64748b;
  --accent: #8b5cf6;
  --accent-light: rgba(139, 92, 246, 0.18);
  --accent-subtle: rgba(139, 92, 246, 0.1);
  --accent-border: rgba(139, 92, 246, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(139, 92, 246, 0.12);
  --icon-color: #8b5cf6;
  --contact-icon-bg-start: #8b5cf6;
  --contact-icon-bg-end: #7c3aed;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #8b5cf6;
  --avatar-ring-glow: rgba(139, 92, 246, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #ebe5fb;
  --avatar-placeholder-text: #211b31;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ebe5fb;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(139, 92, 246, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(139, 92, 246, 0.2);
  --menu-hover: rgba(139, 92, 246, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f7f4ff;
  --modal-border: rgba(139, 92, 246, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(139, 92, 246, 0.45);
  --drop-target-ring: rgba(139, 92, 246, 0.55);
  --add-btn-border: rgba(139, 92, 246, 0.35);
  --add-btn-bg: rgba(139, 92, 246, 0.06);
  --add-btn-bg-hover: rgba(139, 92, 246, 0.12);
  --drag-handle-bg: rgba(139, 92, 246, 0.1);
  --move-btn-bg: rgba(139, 92, 246, 0.12);
  --move-btn-bg-hover: rgba(139, 92, 246, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(139, 92, 246, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Blank Slate ── */
:is(body[data-user-theme="blank-slate"], #card-shell[data-design="blank-slate"], .theme-preview-shell[data-design="blank-slate"]) {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-gradient-mid: #f1f5f9;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.98);
  --button-bg: #f1f5f9;
  --button-hover: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #64748b;
  --accent: #64748b;
  --accent-light: rgba(100, 116, 139, 0.18);
  --accent-subtle: rgba(100, 116, 139, 0.1);
  --accent-border: rgba(100, 116, 139, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(100, 116, 139, 0.12);
  --icon-color: #64748b;
  --contact-icon-bg-start: #94a3b8;
  --contact-icon-bg-end: #64748b;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #cbd5e1;
  --avatar-ring-end: #94a3b8;
  --avatar-ring-glow: rgba(100, 116, 139, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #f8fafc;
  --avatar-placeholder-text: #0f172a;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f8fafc;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(100, 116, 139, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(100, 116, 139, 0.2);
  --menu-hover: rgba(100, 116, 139, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #ffffff;
  --modal-border: rgba(100, 116, 139, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(100, 116, 139, 0.45);
  --drop-target-ring: rgba(100, 116, 139, 0.55);
  --add-btn-border: rgba(100, 116, 139, 0.35);
  --add-btn-bg: rgba(100, 116, 139, 0.06);
  --add-btn-bg-hover: rgba(100, 116, 139, 0.12);
  --drag-handle-bg: rgba(100, 116, 139, 0.1);
  --move-btn-bg: rgba(100, 116, 139, 0.12);
  --move-btn-bg-hover: rgba(100, 116, 139, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(100, 116, 139, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #cbd5e1;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Paper Gray ── */
:is(body[data-user-theme="paper-gray"], #card-shell[data-design="paper-gray"], .theme-preview-shell[data-design="paper-gray"]) {
  --bg-primary: #f4f4f5;
  --bg-secondary: #e4e4e7;
  --bg-gradient-mid: #ececee;
  --card-bg: #fafafa;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(250,250,250,0.96);
  --button-bg: #e4e4e7;
  --button-hover: #e4e4e7;
  --text-primary: #18181b;
  --text-secondary: #71717a;
  --text-tertiary: #64748b;
  --accent: #3f3f46;
  --accent-light: rgba(63, 63, 70, 0.18);
  --accent-subtle: rgba(63, 63, 70, 0.1);
  --accent-border: rgba(63, 63, 70, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(63, 63, 70, 0.12);
  --icon-color: #3f3f46;
  --contact-icon-bg-start: #52525b;
  --contact-icon-bg-end: #3f3f46;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #a1a1aa;
  --avatar-ring-end: #71717a;
  --avatar-ring-glow: rgba(63, 63, 70, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fafafa;
  --avatar-placeholder-end: #e4e4e7;
  --avatar-placeholder-text: #18181b;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #e4e4e7;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(63, 63, 70, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(63, 63, 70, 0.2);
  --menu-hover: rgba(63, 63, 70, 0.08);
  --modal-bg-start: #fafafa;
  --modal-bg-end: #f4f4f5;
  --modal-border: rgba(63, 63, 70, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(63, 63, 70, 0.45);
  --drop-target-ring: rgba(63, 63, 70, 0.55);
  --add-btn-border: rgba(63, 63, 70, 0.35);
  --add-btn-bg: rgba(63, 63, 70, 0.06);
  --add-btn-bg-hover: rgba(63, 63, 70, 0.12);
  --drag-handle-bg: rgba(63, 63, 70, 0.1);
  --move-btn-bg: rgba(63, 63, 70, 0.12);
  --move-btn-bg-hover: rgba(63, 63, 70, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(63, 63, 70, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #a1a1aa;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Neon Console ── */
:is(body[data-user-theme="neon-console"], #card-shell[data-design="neon-console"], .theme-preview-shell[data-design="neon-console"]) {
  --bg-primary: #06120b;
  --bg-secondary: #091b11;
  --bg-gradient-mid: #0d2818;
  --card-bg: #0a1c12;
  --surface: rgba(10, 28, 18, 0.88);
  --surface-glass: rgba(10,28,18,0.84);
  --button-bg: #0d2818;
  --button-hover: #0d2818;
  --text-primary: #f0fff7;
  --text-secondary: #9be8bd;
  --text-tertiary: #64748b;
  --accent: #39ff88;
  --accent-light: rgba(57, 255, 136, 0.28);
  --accent-subtle: rgba(57, 255, 136, 0.12);
  --accent-border: rgba(57, 255, 136, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(57, 255, 136, 0.14);
  --icon-color: #39ff88;
  --contact-icon-bg-start: #22c55e;
  --contact-icon-bg-end: #15803d;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #86efac;
  --avatar-ring-end: #22c55e;
  --avatar-ring-glow: rgba(57, 255, 136, 0.35);
  --avatar-border: #06120b;
  --avatar-placeholder-start: #0a1c12;
  --avatar-placeholder-end: #091b11;
  --avatar-placeholder-text: #f0fff7;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #091b11;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(57, 255, 136, 0.15);
  --menu-bg: rgba(6, 18, 11, 0.98);
  --menu-border: rgba(57, 255, 136, 0.28);
  --menu-hover: rgba(57, 255, 136, 0.1);
  --modal-bg-start: #0a1c12;
  --modal-bg-end: #06120b;
  --modal-border: rgba(57, 255, 136, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(57, 255, 136, 0.55);
  --drop-target-ring: rgba(57, 255, 136, 0.65);
  --add-btn-border: rgba(57, 255, 136, 0.38);
  --add-btn-bg: rgba(57, 255, 136, 0.06);
  --add-btn-bg-hover: rgba(57, 255, 136, 0.12);
  --drag-handle-bg: rgba(57, 255, 136, 0.12);
  --move-btn-bg: rgba(57, 255, 136, 0.16);
  --move-btn-bg-hover: rgba(57, 255, 136, 0.28);
  --move-btn-border: rgba(9, 27, 17, 0.92);
  --apply-disabled-bg: rgba(57, 255, 136, 0.22);
  --apply-disabled-text: rgba(240, 255, 247, 0.55);
  --qr-image-bg: #f0fff7;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #86efac;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Circuit Cyan ── */
:is(body[data-user-theme="circuit-cyan"], #card-shell[data-design="circuit-cyan"], .theme-preview-shell[data-design="circuit-cyan"]) {
  --bg-primary: #071923;
  --bg-secondary: #0a2530;
  --bg-gradient-mid: #0d3342;
  --card-bg: #0b2634;
  --surface: rgba(11, 38, 52, 0.88);
  --surface-glass: rgba(11,38,52,0.84);
  --button-bg: #0d3342;
  --button-hover: #0d3342;
  --text-primary: #ecfeff;
  --text-secondary: #a5dce7;
  --text-tertiary: #64748b;
  --accent: #06b6d4;
  --accent-light: rgba(6, 182, 212, 0.28);
  --accent-subtle: rgba(6, 182, 212, 0.12);
  --accent-border: rgba(6, 182, 212, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(6, 182, 212, 0.14);
  --icon-color: #06b6d4;
  --contact-icon-bg-start: #06b6d4;
  --contact-icon-bg-end: #087f9b;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #67e8f9;
  --avatar-ring-end: #06b6d4;
  --avatar-ring-glow: rgba(6, 182, 212, 0.35);
  --avatar-border: #071923;
  --avatar-placeholder-start: #0b2634;
  --avatar-placeholder-end: #0a2530;
  --avatar-placeholder-text: #ecfeff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0a2530;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(6, 182, 212, 0.15);
  --menu-bg: rgba(7, 25, 35, 0.98);
  --menu-border: rgba(6, 182, 212, 0.28);
  --menu-hover: rgba(6, 182, 212, 0.1);
  --modal-bg-start: #0b2634;
  --modal-bg-end: #071923;
  --modal-border: rgba(6, 182, 212, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(6, 182, 212, 0.55);
  --drop-target-ring: rgba(6, 182, 212, 0.65);
  --add-btn-border: rgba(6, 182, 212, 0.38);
  --add-btn-bg: rgba(6, 182, 212, 0.06);
  --add-btn-bg-hover: rgba(6, 182, 212, 0.12);
  --drag-handle-bg: rgba(6, 182, 212, 0.12);
  --move-btn-bg: rgba(6, 182, 212, 0.16);
  --move-btn-bg-hover: rgba(6, 182, 212, 0.28);
  --move-btn-border: rgba(10, 37, 48, 0.92);
  --apply-disabled-bg: rgba(6, 182, 212, 0.22);
  --apply-disabled-text: rgba(236, 254, 255, 0.55);
  --qr-image-bg: #ecfeff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #67e8f9;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Orbital Indigo ── */
:is(body[data-user-theme="orbital-indigo"], #card-shell[data-design="orbital-indigo"], .theme-preview-shell[data-design="orbital-indigo"]) {
  --bg-primary: #0b1025;
  --bg-secondary: #101742;
  --bg-gradient-mid: #18215b;
  --card-bg: #11183a;
  --surface: rgba(17, 24, 58, 0.88);
  --surface-glass: rgba(17,24,58,0.84);
  --button-bg: #18215b;
  --button-hover: #18215b;
  --text-primary: #f5f7ff;
  --text-secondary: #b8c0e8;
  --text-tertiary: #64748b;
  --accent: #818cf8;
  --accent-light: rgba(129, 140, 248, 0.28);
  --accent-subtle: rgba(129, 140, 248, 0.12);
  --accent-border: rgba(129, 140, 248, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(129, 140, 248, 0.14);
  --icon-color: #818cf8;
  --contact-icon-bg-start: #6366f1;
  --contact-icon-bg-end: #4338ca;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #a5b4fc;
  --avatar-ring-end: #6366f1;
  --avatar-ring-glow: rgba(129, 140, 248, 0.35);
  --avatar-border: #0b1025;
  --avatar-placeholder-start: #11183a;
  --avatar-placeholder-end: #101742;
  --avatar-placeholder-text: #f5f7ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #101742;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(129, 140, 248, 0.15);
  --menu-bg: rgba(11, 16, 37, 0.98);
  --menu-border: rgba(129, 140, 248, 0.28);
  --menu-hover: rgba(129, 140, 248, 0.1);
  --modal-bg-start: #11183a;
  --modal-bg-end: #0b1025;
  --modal-border: rgba(129, 140, 248, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(129, 140, 248, 0.55);
  --drop-target-ring: rgba(129, 140, 248, 0.65);
  --add-btn-border: rgba(129, 140, 248, 0.38);
  --add-btn-bg: rgba(129, 140, 248, 0.06);
  --add-btn-bg-hover: rgba(129, 140, 248, 0.12);
  --drag-handle-bg: rgba(129, 140, 248, 0.12);
  --move-btn-bg: rgba(129, 140, 248, 0.16);
  --move-btn-bg-hover: rgba(129, 140, 248, 0.28);
  --move-btn-border: rgba(16, 23, 66, 0.92);
  --apply-disabled-bg: rgba(129, 140, 248, 0.22);
  --apply-disabled-text: rgba(245, 247, 255, 0.55);
  --qr-image-bg: #f5f7ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #a5b4fc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Pixel Mint ── */
:is(body[data-user-theme="pixel-mint"], #card-shell[data-design="pixel-mint"], .theme-preview-shell[data-design="pixel-mint"]) {
  --bg-primary: #081616;
  --bg-secondary: #0b2423;
  --bg-gradient-mid: #103432;
  --card-bg: #0d2424;
  --surface: rgba(13, 36, 36, 0.88);
  --surface-glass: rgba(13,36,36,0.84);
  --button-bg: #103432;
  --button-hover: #103432;
  --text-primary: #f0fdfa;
  --text-secondary: #a9d9d3;
  --text-tertiary: #64748b;
  --accent: #5eead4;
  --accent-light: rgba(94, 234, 212, 0.28);
  --accent-subtle: rgba(94, 234, 212, 0.12);
  --accent-border: rgba(94, 234, 212, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(94, 234, 212, 0.14);
  --icon-color: #5eead4;
  --contact-icon-bg-start: #14b8a6;
  --contact-icon-bg-end: #0f766e;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #99f6e4;
  --avatar-ring-end: #14b8a6;
  --avatar-ring-glow: rgba(94, 234, 212, 0.35);
  --avatar-border: #081616;
  --avatar-placeholder-start: #0d2424;
  --avatar-placeholder-end: #0b2423;
  --avatar-placeholder-text: #f0fdfa;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0b2423;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(94, 234, 212, 0.15);
  --menu-bg: rgba(8, 22, 22, 0.98);
  --menu-border: rgba(94, 234, 212, 0.28);
  --menu-hover: rgba(94, 234, 212, 0.1);
  --modal-bg-start: #0d2424;
  --modal-bg-end: #081616;
  --modal-border: rgba(94, 234, 212, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(94, 234, 212, 0.55);
  --drop-target-ring: rgba(94, 234, 212, 0.65);
  --add-btn-border: rgba(94, 234, 212, 0.38);
  --add-btn-bg: rgba(94, 234, 212, 0.06);
  --add-btn-bg-hover: rgba(94, 234, 212, 0.12);
  --drag-handle-bg: rgba(94, 234, 212, 0.12);
  --move-btn-bg: rgba(94, 234, 212, 0.16);
  --move-btn-bg-hover: rgba(94, 234, 212, 0.28);
  --move-btn-border: rgba(11, 36, 35, 0.92);
  --apply-disabled-bg: rgba(94, 234, 212, 0.22);
  --apply-disabled-text: rgba(240, 253, 250, 0.55);
  --qr-image-bg: #f0fdfa;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #99f6e4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Chrome Pulse ── */
:is(body[data-user-theme="chrome-pulse"], #card-shell[data-design="chrome-pulse"], .theme-preview-shell[data-design="chrome-pulse"]) {
  --bg-primary: #15171c;
  --bg-secondary: #22252d;
  --bg-gradient-mid: #2e323c;
  --card-bg: #1d2027;
  --surface: rgba(29, 32, 39, 0.88);
  --surface-glass: rgba(29,32,39,0.86);
  --button-bg: #2e323c;
  --button-hover: #2e323c;
  --text-primary: #f8fafc;
  --text-secondary: #c6ccd6;
  --text-tertiary: #64748b;
  --accent: #f43f5e;
  --accent-light: rgba(244, 63, 94, 0.28);
  --accent-subtle: rgba(244, 63, 94, 0.12);
  --accent-border: rgba(244, 63, 94, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(244, 63, 94, 0.14);
  --icon-color: #f43f5e;
  --contact-icon-bg-start: #f43f5e;
  --contact-icon-bg-end: #be123c;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fb7185;
  --avatar-ring-end: #f43f5e;
  --avatar-ring-glow: rgba(244, 63, 94, 0.35);
  --avatar-border: #15171c;
  --avatar-placeholder-start: #1d2027;
  --avatar-placeholder-end: #22252d;
  --avatar-placeholder-text: #f8fafc;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #22252d;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(244, 63, 94, 0.15);
  --menu-bg: rgba(21, 23, 28, 0.98);
  --menu-border: rgba(244, 63, 94, 0.28);
  --menu-hover: rgba(244, 63, 94, 0.1);
  --modal-bg-start: #1d2027;
  --modal-bg-end: #15171c;
  --modal-border: rgba(244, 63, 94, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(244, 63, 94, 0.55);
  --drop-target-ring: rgba(244, 63, 94, 0.65);
  --add-btn-border: rgba(244, 63, 94, 0.38);
  --add-btn-bg: rgba(244, 63, 94, 0.06);
  --add-btn-bg-hover: rgba(244, 63, 94, 0.12);
  --drag-handle-bg: rgba(244, 63, 94, 0.12);
  --move-btn-bg: rgba(244, 63, 94, 0.16);
  --move-btn-bg-hover: rgba(244, 63, 94, 0.28);
  --move-btn-border: rgba(34, 37, 45, 0.92);
  --apply-disabled-bg: rgba(244, 63, 94, 0.22);
  --apply-disabled-text: rgba(248, 250, 252, 0.55);
  --qr-image-bg: #f8fafc;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fb7185;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Ion Violet ── */
:is(body[data-user-theme="ion-violet"], #card-shell[data-design="ion-violet"], .theme-preview-shell[data-design="ion-violet"]) {
  --bg-primary: #0f102a;
  --bg-secondary: #18133f;
  --bg-gradient-mid: #24195c;
  --card-bg: #17163a;
  --surface: rgba(23, 22, 58, 0.88);
  --surface-glass: rgba(23,22,58,0.84);
  --button-bg: #24195c;
  --button-hover: #24195c;
  --text-primary: #fbf7ff;
  --text-secondary: #d1b7eb;
  --text-tertiary: #64748b;
  --accent: #c084fc;
  --accent-light: rgba(192, 132, 252, 0.28);
  --accent-subtle: rgba(192, 132, 252, 0.12);
  --accent-border: rgba(192, 132, 252, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(192, 132, 252, 0.14);
  --icon-color: #c084fc;
  --contact-icon-bg-start: #a855f7;
  --contact-icon-bg-end: #7e22ce;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #d8b4fe;
  --avatar-ring-end: #a855f7;
  --avatar-ring-glow: rgba(192, 132, 252, 0.35);
  --avatar-border: #0f102a;
  --avatar-placeholder-start: #17163a;
  --avatar-placeholder-end: #18133f;
  --avatar-placeholder-text: #fbf7ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #18133f;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(192, 132, 252, 0.15);
  --menu-bg: rgba(15, 16, 42, 0.98);
  --menu-border: rgba(192, 132, 252, 0.28);
  --menu-hover: rgba(192, 132, 252, 0.1);
  --modal-bg-start: #17163a;
  --modal-bg-end: #0f102a;
  --modal-border: rgba(192, 132, 252, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(192, 132, 252, 0.55);
  --drop-target-ring: rgba(192, 132, 252, 0.65);
  --add-btn-border: rgba(192, 132, 252, 0.38);
  --add-btn-bg: rgba(192, 132, 252, 0.06);
  --add-btn-bg-hover: rgba(192, 132, 252, 0.12);
  --drag-handle-bg: rgba(192, 132, 252, 0.12);
  --move-btn-bg: rgba(192, 132, 252, 0.16);
  --move-btn-bg-hover: rgba(192, 132, 252, 0.28);
  --move-btn-border: rgba(24, 19, 63, 0.92);
  --apply-disabled-bg: rgba(192, 132, 252, 0.22);
  --apply-disabled-text: rgba(251, 247, 255, 0.55);
  --qr-image-bg: #fbf7ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #d8b4fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Holo Slate ── */
:is(body[data-user-theme="holo-slate"], #card-shell[data-design="holo-slate"], .theme-preview-shell[data-design="holo-slate"]) {
  --bg-primary: #1e293b;
  --bg-secondary: #0f172a;
  --bg-gradient-mid: #20354b;
  --card-bg: #172436;
  --surface: rgba(23, 36, 54, 0.88);
  --surface-glass: rgba(23,36,54,0.84);
  --button-bg: #20354b;
  --button-hover: #20354b;
  --text-primary: #f8fafc;
  --text-secondary: #b8c7da;
  --text-tertiary: #64748b;
  --accent: #38bdf8;
  --accent-light: rgba(56, 189, 248, 0.28);
  --accent-subtle: rgba(56, 189, 248, 0.12);
  --accent-border: rgba(56, 189, 248, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(56, 189, 248, 0.14);
  --icon-color: #38bdf8;
  --contact-icon-bg-start: #38bdf8;
  --contact-icon-bg-end: #34d399;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #7dd3fc;
  --avatar-ring-end: #34d399;
  --avatar-ring-glow: rgba(56, 189, 248, 0.35);
  --avatar-border: #1e293b;
  --avatar-placeholder-start: #172436;
  --avatar-placeholder-end: #0f172a;
  --avatar-placeholder-text: #f8fafc;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0f172a;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(56, 189, 248, 0.15);
  --menu-bg: rgba(30, 41, 59, 0.98);
  --menu-border: rgba(56, 189, 248, 0.28);
  --menu-hover: rgba(56, 189, 248, 0.1);
  --modal-bg-start: #172436;
  --modal-bg-end: #1e293b;
  --modal-border: rgba(56, 189, 248, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(56, 189, 248, 0.55);
  --drop-target-ring: rgba(56, 189, 248, 0.65);
  --add-btn-border: rgba(56, 189, 248, 0.38);
  --add-btn-bg: rgba(56, 189, 248, 0.06);
  --add-btn-bg-hover: rgba(56, 189, 248, 0.12);
  --drag-handle-bg: rgba(56, 189, 248, 0.12);
  --move-btn-bg: rgba(56, 189, 248, 0.16);
  --move-btn-bg-hover: rgba(56, 189, 248, 0.28);
  --move-btn-border: rgba(15, 23, 42, 0.92);
  --apply-disabled-bg: rgba(56, 189, 248, 0.22);
  --apply-disabled-text: rgba(248, 250, 252, 0.55);
  --qr-image-bg: #f8fafc;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #7dd3fc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Code Ember ── */
:is(body[data-user-theme="code-ember"], #card-shell[data-design="code-ember"], .theme-preview-shell[data-design="code-ember"]) {
  --bg-primary: #111215;
  --bg-secondary: #1e1712;
  --bg-gradient-mid: #302014;
  --card-bg: #1b1714;
  --surface: rgba(27, 23, 20, 0.88);
  --surface-glass: rgba(27,23,20,0.86);
  --button-bg: #302014;
  --button-hover: #302014;
  --text-primary: #fff7ed;
  --text-secondary: #d7c1ad;
  --text-tertiary: #64748b;
  --accent: #fb923c;
  --accent-light: rgba(251, 146, 60, 0.28);
  --accent-subtle: rgba(251, 146, 60, 0.12);
  --accent-border: rgba(251, 146, 60, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 146, 60, 0.14);
  --icon-color: #fb923c;
  --contact-icon-bg-start: #fb923c;
  --contact-icon-bg-end: #ea580c;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fdba74;
  --avatar-ring-end: #fb923c;
  --avatar-ring-glow: rgba(251, 146, 60, 0.35);
  --avatar-border: #111215;
  --avatar-placeholder-start: #1b1714;
  --avatar-placeholder-end: #1e1712;
  --avatar-placeholder-text: #fff7ed;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1e1712;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 146, 60, 0.15);
  --menu-bg: rgba(17, 18, 21, 0.98);
  --menu-border: rgba(251, 146, 60, 0.28);
  --menu-hover: rgba(251, 146, 60, 0.1);
  --modal-bg-start: #1b1714;
  --modal-bg-end: #111215;
  --modal-border: rgba(251, 146, 60, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 146, 60, 0.55);
  --drop-target-ring: rgba(251, 146, 60, 0.65);
  --add-btn-border: rgba(251, 146, 60, 0.38);
  --add-btn-bg: rgba(251, 146, 60, 0.06);
  --add-btn-bg-hover: rgba(251, 146, 60, 0.12);
  --drag-handle-bg: rgba(251, 146, 60, 0.12);
  --move-btn-bg: rgba(251, 146, 60, 0.16);
  --move-btn-bg-hover: rgba(251, 146, 60, 0.28);
  --move-btn-border: rgba(30, 23, 18, 0.92);
  --apply-disabled-bg: rgba(251, 146, 60, 0.22);
  --apply-disabled-text: rgba(255, 247, 237, 0.55);
  --qr-image-bg: #fff7ed;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fdba74;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Synth Wave ── */
:is(body[data-user-theme="synth-wave"], #card-shell[data-design="synth-wave"], .theme-preview-shell[data-design="synth-wave"]) {
  --bg-primary: #1a0a2e;
  --bg-secondary: #240f3d;
  --bg-gradient-mid: #35145c;
  --card-bg: #281042;
  --surface: rgba(40, 16, 66, 0.88);
  --surface-glass: rgba(40,16,66,0.84);
  --button-bg: #35145c;
  --button-hover: #35145c;
  --text-primary: #fdf4ff;
  --text-secondary: #d8b8e8;
  --text-tertiary: #64748b;
  --accent: #f472b6;
  --accent-light: rgba(244, 114, 182, 0.28);
  --accent-subtle: rgba(244, 114, 182, 0.12);
  --accent-border: rgba(244, 114, 182, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(244, 114, 182, 0.14);
  --icon-color: #f472b6;
  --contact-icon-bg-start: #f472b6;
  --contact-icon-bg-end: #06b6d4;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f9a8d4;
  --avatar-ring-end: #67e8f9;
  --avatar-ring-glow: rgba(244, 114, 182, 0.35);
  --avatar-border: #1a0a2e;
  --avatar-placeholder-start: #281042;
  --avatar-placeholder-end: #240f3d;
  --avatar-placeholder-text: #fdf4ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #240f3d;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(244, 114, 182, 0.15);
  --menu-bg: rgba(26, 10, 46, 0.98);
  --menu-border: rgba(244, 114, 182, 0.28);
  --menu-hover: rgba(244, 114, 182, 0.1);
  --modal-bg-start: #281042;
  --modal-bg-end: #1a0a2e;
  --modal-border: rgba(244, 114, 182, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(244, 114, 182, 0.55);
  --drop-target-ring: rgba(244, 114, 182, 0.65);
  --add-btn-border: rgba(244, 114, 182, 0.38);
  --add-btn-bg: rgba(244, 114, 182, 0.06);
  --add-btn-bg-hover: rgba(244, 114, 182, 0.12);
  --drag-handle-bg: rgba(244, 114, 182, 0.12);
  --move-btn-bg: rgba(244, 114, 182, 0.16);
  --move-btn-bg-hover: rgba(244, 114, 182, 0.28);
  --move-btn-border: rgba(36, 15, 61, 0.92);
  --apply-disabled-bg: rgba(244, 114, 182, 0.22);
  --apply-disabled-text: rgba(253, 244, 255, 0.55);
  --qr-image-bg: #fdf4ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f9a8d4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Laser Grid ── */
:is(body[data-user-theme="laser-grid"], #card-shell[data-design="laser-grid"], .theme-preview-shell[data-design="laser-grid"]) {
  --bg-primary: #02040a;
  --bg-secondary: #061018;
  --bg-gradient-mid: #0c1f38;
  --card-bg: #081428;
  --surface: rgba(8, 20, 40, 0.88);
  --surface-glass: rgba(8,20,40,0.84);
  --button-bg: #0c1f38;
  --button-hover: #0c1f38;
  --text-primary: #eff6ff;
  --text-secondary: #9eb8e8;
  --text-tertiary: #64748b;
  --accent: #3b82f6;
  --accent-light: rgba(59, 130, 246, 0.28);
  --accent-subtle: rgba(59, 130, 246, 0.12);
  --accent-border: rgba(59, 130, 246, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(59, 130, 246, 0.14);
  --icon-color: #3b82f6;
  --contact-icon-bg-start: #2563eb;
  --contact-icon-bg-end: #1d4ed8;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #60a5fa;
  --avatar-ring-end: #3b82f6;
  --avatar-ring-glow: rgba(59, 130, 246, 0.35);
  --avatar-border: #02040a;
  --avatar-placeholder-start: #081428;
  --avatar-placeholder-end: #061018;
  --avatar-placeholder-text: #eff6ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #061018;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(59, 130, 246, 0.15);
  --menu-bg: rgba(2, 4, 10, 0.98);
  --menu-border: rgba(59, 130, 246, 0.28);
  --menu-hover: rgba(59, 130, 246, 0.1);
  --modal-bg-start: #081428;
  --modal-bg-end: #02040a;
  --modal-border: rgba(59, 130, 246, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(59, 130, 246, 0.55);
  --drop-target-ring: rgba(59, 130, 246, 0.65);
  --add-btn-border: rgba(59, 130, 246, 0.38);
  --add-btn-bg: rgba(59, 130, 246, 0.06);
  --add-btn-bg-hover: rgba(59, 130, 246, 0.12);
  --drag-handle-bg: rgba(59, 130, 246, 0.12);
  --move-btn-bg: rgba(59, 130, 246, 0.16);
  --move-btn-bg-hover: rgba(59, 130, 246, 0.28);
  --move-btn-border: rgba(6, 16, 24, 0.92);
  --apply-disabled-bg: rgba(59, 130, 246, 0.22);
  --apply-disabled-text: rgba(239, 246, 255, 0.55);
  --qr-image-bg: #eff6ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #60a5fa;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Prism Pop ── */
:is(body[data-user-theme="prism-pop"], #card-shell[data-design="prism-pop"], .theme-preview-shell[data-design="prism-pop"]) {
  --bg-primary: #2b103f;
  --bg-secondary: #42145d;
  --bg-gradient-mid: #5b1a79;
  --card-bg: #3a1555;
  --surface: rgba(58, 21, 85, 0.88);
  --surface-glass: rgba(58,21,85,0.84);
  --button-bg: #5b1a79;
  --button-hover: #5b1a79;
  --text-primary: #fff7fb;
  --text-secondary: #eab8d4;
  --text-tertiary: #64748b;
  --accent: #ec4899;
  --accent-light: rgba(236, 72, 153, 0.28);
  --accent-subtle: rgba(236, 72, 153, 0.12);
  --accent-border: rgba(236, 72, 153, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(236, 72, 153, 0.14);
  --icon-color: #ec4899;
  --contact-icon-bg-start: #ec4899;
  --contact-icon-bg-end: #8b5cf6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f9a8d4;
  --avatar-ring-end: #a78bfa;
  --avatar-ring-glow: rgba(236, 72, 153, 0.35);
  --avatar-border: #2b103f;
  --avatar-placeholder-start: #3a1555;
  --avatar-placeholder-end: #42145d;
  --avatar-placeholder-text: #fff7fb;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #42145d;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(236, 72, 153, 0.15);
  --menu-bg: rgba(43, 16, 63, 0.98);
  --menu-border: rgba(236, 72, 153, 0.28);
  --menu-hover: rgba(236, 72, 153, 0.1);
  --modal-bg-start: #3a1555;
  --modal-bg-end: #2b103f;
  --modal-border: rgba(236, 72, 153, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(236, 72, 153, 0.55);
  --drop-target-ring: rgba(236, 72, 153, 0.65);
  --add-btn-border: rgba(236, 72, 153, 0.38);
  --add-btn-bg: rgba(236, 72, 153, 0.06);
  --add-btn-bg-hover: rgba(236, 72, 153, 0.12);
  --drag-handle-bg: rgba(236, 72, 153, 0.12);
  --move-btn-bg: rgba(236, 72, 153, 0.16);
  --move-btn-bg-hover: rgba(236, 72, 153, 0.28);
  --move-btn-border: rgba(66, 20, 93, 0.92);
  --apply-disabled-bg: rgba(236, 72, 153, 0.22);
  --apply-disabled-text: rgba(255, 247, 251, 0.55);
  --qr-image-bg: #fff7fb;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f9a8d4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Coral Studio ── */
:is(body[data-user-theme="coral-studio"], #card-shell[data-design="coral-studio"], .theme-preview-shell[data-design="coral-studio"]) {
  --bg-primary: #fff1e8;
  --bg-secondary: #ffe1d7;
  --bg-gradient-mid: #ffe9df;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #ffe1d7;
  --button-hover: #ffe1d7;
  --text-primary: #33201d;
  --text-secondary: #77564f;
  --text-tertiary: #64748b;
  --accent: #fb7185;
  --accent-light: rgba(251, 113, 133, 0.18);
  --accent-subtle: rgba(251, 113, 133, 0.1);
  --accent-border: rgba(251, 113, 133, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(251, 113, 133, 0.12);
  --icon-color: #fb7185;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #f97316;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fda4af;
  --avatar-ring-end: #fb7185;
  --avatar-ring-glow: rgba(251, 113, 133, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #ffe1d7;
  --avatar-placeholder-text: #33201d;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ffe1d7;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(251, 113, 133, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(251, 113, 133, 0.2);
  --menu-hover: rgba(251, 113, 133, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fff1e8;
  --modal-border: rgba(251, 113, 133, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(251, 113, 133, 0.45);
  --drop-target-ring: rgba(251, 113, 133, 0.55);
  --add-btn-border: rgba(251, 113, 133, 0.35);
  --add-btn-bg: rgba(251, 113, 133, 0.06);
  --add-btn-bg-hover: rgba(251, 113, 133, 0.12);
  --drag-handle-bg: rgba(251, 113, 133, 0.1);
  --move-btn-bg: rgba(251, 113, 133, 0.12);
  --move-btn-bg-hover: rgba(251, 113, 133, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(251, 113, 133, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fda4af;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Mango Ink ── */
:is(body[data-user-theme="mango-ink"], #card-shell[data-design="mango-ink"], .theme-preview-shell[data-design="mango-ink"]) {
  --bg-primary: #111827;
  --bg-secondary: #1d2433;
  --bg-gradient-mid: #2c3240;
  --card-bg: #1a2030;
  --surface: rgba(26, 32, 48, 0.88);
  --surface-glass: rgba(26,32,48,0.86);
  --button-bg: #2c3240;
  --button-hover: #2c3240;
  --text-primary: #fffbea;
  --text-secondary: #d6cfaa;
  --text-tertiary: #64748b;
  --accent: #facc15;
  --accent-light: rgba(250, 204, 21, 0.28);
  --accent-subtle: rgba(250, 204, 21, 0.12);
  --accent-border: rgba(250, 204, 21, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(250, 204, 21, 0.14);
  --icon-color: #facc15;
  --contact-icon-bg-start: #facc15;
  --contact-icon-bg-end: #f59e0b;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fde68a;
  --avatar-ring-end: #facc15;
  --avatar-ring-glow: rgba(250, 204, 21, 0.35);
  --avatar-border: #111827;
  --avatar-placeholder-start: #1a2030;
  --avatar-placeholder-end: #1d2433;
  --avatar-placeholder-text: #fffbea;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1d2433;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(250, 204, 21, 0.15);
  --menu-bg: rgba(17, 24, 39, 0.98);
  --menu-border: rgba(250, 204, 21, 0.28);
  --menu-hover: rgba(250, 204, 21, 0.1);
  --modal-bg-start: #1a2030;
  --modal-bg-end: #111827;
  --modal-border: rgba(250, 204, 21, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(250, 204, 21, 0.55);
  --drop-target-ring: rgba(250, 204, 21, 0.65);
  --add-btn-border: rgba(250, 204, 21, 0.38);
  --add-btn-bg: rgba(250, 204, 21, 0.06);
  --add-btn-bg-hover: rgba(250, 204, 21, 0.12);
  --drag-handle-bg: rgba(250, 204, 21, 0.12);
  --move-btn-bg: rgba(250, 204, 21, 0.16);
  --move-btn-bg-hover: rgba(250, 204, 21, 0.28);
  --move-btn-border: rgba(29, 36, 51, 0.92);
  --apply-disabled-bg: rgba(250, 204, 21, 0.22);
  --apply-disabled-text: rgba(255, 251, 234, 0.55);
  --qr-image-bg: #fffbea;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fde68a;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Cerulean Dream ── */
:is(body[data-user-theme="cerulean-dream"], #card-shell[data-design="cerulean-dream"], .theme-preview-shell[data-design="cerulean-dream"]) {
  --bg-primary: #e0f7ff;
  --bg-secondary: #cceefd;
  --bg-gradient-mid: #d7f4ff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #cceefd;
  --button-hover: #cceefd;
  --text-primary: #0d2535;
  --text-secondary: #426679;
  --text-tertiary: #64748b;
  --accent: #0ea5e9;
  --accent-light: rgba(14, 165, 233, 0.18);
  --accent-subtle: rgba(14, 165, 233, 0.1);
  --accent-border: rgba(14, 165, 233, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(14, 165, 233, 0.12);
  --icon-color: #0ea5e9;
  --contact-icon-bg-start: #0ea5e9;
  --contact-icon-bg-end: #0284c7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #7dd3fc;
  --avatar-ring-end: #0ea5e9;
  --avatar-ring-glow: rgba(14, 165, 233, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #cceefd;
  --avatar-placeholder-text: #0d2535;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #cceefd;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(14, 165, 233, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(14, 165, 233, 0.2);
  --menu-hover: rgba(14, 165, 233, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #e0f7ff;
  --modal-border: rgba(14, 165, 233, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(14, 165, 233, 0.45);
  --drop-target-ring: rgba(14, 165, 233, 0.55);
  --add-btn-border: rgba(14, 165, 233, 0.35);
  --add-btn-bg: rgba(14, 165, 233, 0.06);
  --add-btn-bg-hover: rgba(14, 165, 233, 0.12);
  --drag-handle-bg: rgba(14, 165, 233, 0.1);
  --move-btn-bg: rgba(14, 165, 233, 0.12);
  --move-btn-bg-hover: rgba(14, 165, 233, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(14, 165, 233, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #7dd3fc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Fuchsia Canvas ── */
:is(body[data-user-theme="fuchsia-canvas"], #card-shell[data-design="fuchsia-canvas"], .theme-preview-shell[data-design="fuchsia-canvas"]) {
  --bg-primary: #24102f;
  --bg-secondary: #351348;
  --bg-gradient-mid: #4a1762;
  --card-bg: #30133e;
  --surface: rgba(48, 19, 62, 0.88);
  --surface-glass: rgba(48,19,62,0.84);
  --button-bg: #4a1762;
  --button-hover: #4a1762;
  --text-primary: #fff5ff;
  --text-secondary: #e0b4e8;
  --text-tertiary: #64748b;
  --accent: #d946ef;
  --accent-light: rgba(217, 70, 239, 0.28);
  --accent-subtle: rgba(217, 70, 239, 0.12);
  --accent-border: rgba(217, 70, 239, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(217, 70, 239, 0.14);
  --icon-color: #d946ef;
  --contact-icon-bg-start: #d946ef;
  --contact-icon-bg-end: #a21caf;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f0abfc;
  --avatar-ring-end: #d946ef;
  --avatar-ring-glow: rgba(217, 70, 239, 0.35);
  --avatar-border: #24102f;
  --avatar-placeholder-start: #30133e;
  --avatar-placeholder-end: #351348;
  --avatar-placeholder-text: #fff5ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #351348;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(217, 70, 239, 0.15);
  --menu-bg: rgba(36, 16, 47, 0.98);
  --menu-border: rgba(217, 70, 239, 0.28);
  --menu-hover: rgba(217, 70, 239, 0.1);
  --modal-bg-start: #30133e;
  --modal-bg-end: #24102f;
  --modal-border: rgba(217, 70, 239, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(217, 70, 239, 0.55);
  --drop-target-ring: rgba(217, 70, 239, 0.65);
  --add-btn-border: rgba(217, 70, 239, 0.38);
  --add-btn-bg: rgba(217, 70, 239, 0.06);
  --add-btn-bg-hover: rgba(217, 70, 239, 0.12);
  --drag-handle-bg: rgba(217, 70, 239, 0.12);
  --move-btn-bg: rgba(217, 70, 239, 0.16);
  --move-btn-bg-hover: rgba(217, 70, 239, 0.28);
  --move-btn-border: rgba(53, 19, 72, 0.92);
  --apply-disabled-bg: rgba(217, 70, 239, 0.22);
  --apply-disabled-text: rgba(255, 245, 255, 0.55);
  --qr-image-bg: #fff5ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f0abfc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Amber Graffiti ── */
:is(body[data-user-theme="amber-graffiti"], #card-shell[data-design="amber-graffiti"], .theme-preview-shell[data-design="amber-graffiti"]) {
  --bg-primary: #18130b;
  --bg-secondary: #2a1e0d;
  --bg-gradient-mid: #3c2a10;
  --card-bg: #241a0e;
  --surface: rgba(36, 26, 14, 0.88);
  --surface-glass: rgba(36,26,14,0.86);
  --button-bg: #3c2a10;
  --button-hover: #3c2a10;
  --text-primary: #fffbeb;
  --text-secondary: #dec99d;
  --text-tertiary: #64748b;
  --accent: #f59e0b;
  --accent-light: rgba(245, 158, 11, 0.28);
  --accent-subtle: rgba(245, 158, 11, 0.12);
  --accent-border: rgba(245, 158, 11, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(245, 158, 11, 0.14);
  --icon-color: #f59e0b;
  --contact-icon-bg-start: #f59e0b;
  --contact-icon-bg-end: #d97706;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fbbf24;
  --avatar-ring-end: #f59e0b;
  --avatar-ring-glow: rgba(245, 158, 11, 0.35);
  --avatar-border: #18130b;
  --avatar-placeholder-start: #241a0e;
  --avatar-placeholder-end: #2a1e0d;
  --avatar-placeholder-text: #fffbeb;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #2a1e0d;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(245, 158, 11, 0.15);
  --menu-bg: rgba(24, 19, 11, 0.98);
  --menu-border: rgba(245, 158, 11, 0.28);
  --menu-hover: rgba(245, 158, 11, 0.1);
  --modal-bg-start: #241a0e;
  --modal-bg-end: #18130b;
  --modal-border: rgba(245, 158, 11, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(245, 158, 11, 0.55);
  --drop-target-ring: rgba(245, 158, 11, 0.65);
  --add-btn-border: rgba(245, 158, 11, 0.38);
  --add-btn-bg: rgba(245, 158, 11, 0.06);
  --add-btn-bg-hover: rgba(245, 158, 11, 0.12);
  --drag-handle-bg: rgba(245, 158, 11, 0.12);
  --move-btn-bg: rgba(245, 158, 11, 0.16);
  --move-btn-bg-hover: rgba(245, 158, 11, 0.28);
  --move-btn-border: rgba(42, 30, 13, 0.92);
  --apply-disabled-bg: rgba(245, 158, 11, 0.22);
  --apply-disabled-text: rgba(255, 251, 235, 0.55);
  --qr-image-bg: #fffbeb;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fbbf24;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Electric Lime ── */
:is(body[data-user-theme="electric-lime"], #card-shell[data-design="electric-lime"], .theme-preview-shell[data-design="electric-lime"]) {
  --bg-primary: #102015;
  --bg-secondary: #172d1d;
  --bg-gradient-mid: #214229;
  --card-bg: #17291c;
  --surface: rgba(23, 41, 28, 0.88);
  --surface-glass: rgba(23,41,28,0.84);
  --button-bg: #214229;
  --button-hover: #214229;
  --text-primary: #f7fee7;
  --text-secondary: #c7dda2;
  --text-tertiary: #64748b;
  --accent: #a3e635;
  --accent-light: rgba(163, 230, 53, 0.28);
  --accent-subtle: rgba(163, 230, 53, 0.12);
  --accent-border: rgba(163, 230, 53, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(163, 230, 53, 0.14);
  --icon-color: #a3e635;
  --contact-icon-bg-start: #a3e635;
  --contact-icon-bg-end: #65a30d;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #bef264;
  --avatar-ring-end: #a3e635;
  --avatar-ring-glow: rgba(163, 230, 53, 0.35);
  --avatar-border: #102015;
  --avatar-placeholder-start: #17291c;
  --avatar-placeholder-end: #172d1d;
  --avatar-placeholder-text: #f7fee7;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #172d1d;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(163, 230, 53, 0.15);
  --menu-bg: rgba(16, 32, 21, 0.98);
  --menu-border: rgba(163, 230, 53, 0.28);
  --menu-hover: rgba(163, 230, 53, 0.1);
  --modal-bg-start: #17291c;
  --modal-bg-end: #102015;
  --modal-border: rgba(163, 230, 53, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(163, 230, 53, 0.55);
  --drop-target-ring: rgba(163, 230, 53, 0.65);
  --add-btn-border: rgba(163, 230, 53, 0.38);
  --add-btn-bg: rgba(163, 230, 53, 0.06);
  --add-btn-bg-hover: rgba(163, 230, 53, 0.12);
  --drag-handle-bg: rgba(163, 230, 53, 0.12);
  --move-btn-bg: rgba(163, 230, 53, 0.16);
  --move-btn-bg-hover: rgba(163, 230, 53, 0.28);
  --move-btn-border: rgba(23, 45, 29, 0.92);
  --apply-disabled-bg: rgba(163, 230, 53, 0.22);
  --apply-disabled-text: rgba(247, 254, 231, 0.55);
  --qr-image-bg: #f7fee7;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #bef264;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Rosewave ── */
:is(body[data-user-theme="rosewave"], #card-shell[data-design="rosewave"], .theme-preview-shell[data-design="rosewave"]) {
  --bg-primary: #221135;
  --bg-secondary: #32184f;
  --bg-gradient-mid: #48216e;
  --card-bg: #2c1644;
  --surface: rgba(44, 22, 68, 0.88);
  --surface-glass: rgba(44,22,68,0.84);
  --button-bg: #48216e;
  --button-hover: #48216e;
  --text-primary: #fff7fb;
  --text-secondary: #dab8d0;
  --text-tertiary: #64748b;
  --accent: #fb7185;
  --accent-light: rgba(251, 113, 133, 0.28);
  --accent-subtle: rgba(251, 113, 133, 0.12);
  --accent-border: rgba(251, 113, 133, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 113, 133, 0.14);
  --icon-color: #fb7185;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #7c3aed;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fda4af;
  --avatar-ring-end: #a78bfa;
  --avatar-ring-glow: rgba(251, 113, 133, 0.35);
  --avatar-border: #221135;
  --avatar-placeholder-start: #2c1644;
  --avatar-placeholder-end: #32184f;
  --avatar-placeholder-text: #fff7fb;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #32184f;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 113, 133, 0.15);
  --menu-bg: rgba(34, 17, 53, 0.98);
  --menu-border: rgba(251, 113, 133, 0.28);
  --menu-hover: rgba(251, 113, 133, 0.1);
  --modal-bg-start: #2c1644;
  --modal-bg-end: #221135;
  --modal-border: rgba(251, 113, 133, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 113, 133, 0.55);
  --drop-target-ring: rgba(251, 113, 133, 0.65);
  --add-btn-border: rgba(251, 113, 133, 0.38);
  --add-btn-bg: rgba(251, 113, 133, 0.06);
  --add-btn-bg-hover: rgba(251, 113, 133, 0.12);
  --drag-handle-bg: rgba(251, 113, 133, 0.12);
  --move-btn-bg: rgba(251, 113, 133, 0.16);
  --move-btn-bg-hover: rgba(251, 113, 133, 0.28);
  --move-btn-border: rgba(50, 24, 79, 0.92);
  --apply-disabled-bg: rgba(251, 113, 133, 0.22);
  --apply-disabled-text: rgba(255, 247, 251, 0.55);
  --qr-image-bg: #fff7fb;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fda4af;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Cobalt Muse ── */
:is(body[data-user-theme="cobalt-muse"], #card-shell[data-design="cobalt-muse"], .theme-preview-shell[data-design="cobalt-muse"]) {
  --bg-primary: #123c8c;
  --bg-secondary: #0b255a;
  --bg-gradient-mid: #174aa8;
  --card-bg: #113779;
  --surface: rgba(17, 55, 121, 0.88);
  --surface-glass: rgba(17,55,121,0.84);
  --button-bg: #174aa8;
  --button-hover: #174aa8;
  --text-primary: #f8fbff;
  --text-secondary: #bfd0ef;
  --text-tertiary: #64748b;
  --accent: #fbbf24;
  --accent-light: rgba(251, 191, 36, 0.28);
  --accent-subtle: rgba(251, 191, 36, 0.12);
  --accent-border: rgba(251, 191, 36, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 191, 36, 0.14);
  --icon-color: #fbbf24;
  --contact-icon-bg-start: #fbbf24;
  --contact-icon-bg-end: #f97316;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fde68a;
  --avatar-ring-end: #fbbf24;
  --avatar-ring-glow: rgba(251, 191, 36, 0.35);
  --avatar-border: #123c8c;
  --avatar-placeholder-start: #113779;
  --avatar-placeholder-end: #0b255a;
  --avatar-placeholder-text: #f8fbff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0b255a;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 191, 36, 0.15);
  --menu-bg: rgba(18, 60, 140, 0.98);
  --menu-border: rgba(251, 191, 36, 0.28);
  --menu-hover: rgba(251, 191, 36, 0.1);
  --modal-bg-start: #113779;
  --modal-bg-end: #123c8c;
  --modal-border: rgba(251, 191, 36, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 191, 36, 0.55);
  --drop-target-ring: rgba(251, 191, 36, 0.65);
  --add-btn-border: rgba(251, 191, 36, 0.38);
  --add-btn-bg: rgba(251, 191, 36, 0.06);
  --add-btn-bg-hover: rgba(251, 191, 36, 0.12);
  --drag-handle-bg: rgba(251, 191, 36, 0.12);
  --move-btn-bg: rgba(251, 191, 36, 0.16);
  --move-btn-bg-hover: rgba(251, 191, 36, 0.28);
  --move-btn-border: rgba(11, 37, 90, 0.92);
  --apply-disabled-bg: rgba(251, 191, 36, 0.22);
  --apply-disabled-text: rgba(248, 251, 255, 0.55);
  --qr-image-bg: #f8fbff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fde68a;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Tropical Punch ── */
:is(body[data-user-theme="tropical-punch"], #card-shell[data-design="tropical-punch"], .theme-preview-shell[data-design="tropical-punch"]) {
  --bg-primary: #3b0f2e;
  --bg-secondary: #4c1538;
  --bg-gradient-mid: #6b1d4f;
  --card-bg: #45132f;
  --surface: rgba(69, 19, 47, 0.88);
  --surface-glass: rgba(69,19,47,0.84);
  --button-bg: #6b1d4f;
  --button-hover: #6b1d4f;
  --text-primary: #fff7ed;
  --text-secondary: #e8b8d0;
  --text-tertiary: #64748b;
  --accent: #facc15;
  --accent-light: rgba(250, 204, 21, 0.28);
  --accent-subtle: rgba(250, 204, 21, 0.12);
  --accent-border: rgba(250, 204, 21, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(250, 204, 21, 0.14);
  --icon-color: #facc15;
  --contact-icon-bg-start: #ec4899;
  --contact-icon-bg-end: #f97316;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fde047;
  --avatar-ring-end: #fb7185;
  --avatar-ring-glow: rgba(250, 204, 21, 0.35);
  --avatar-border: #3b0f2e;
  --avatar-placeholder-start: #45132f;
  --avatar-placeholder-end: #4c1538;
  --avatar-placeholder-text: #fff7ed;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #4c1538;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(250, 204, 21, 0.15);
  --menu-bg: rgba(59, 15, 46, 0.98);
  --menu-border: rgba(250, 204, 21, 0.28);
  --menu-hover: rgba(250, 204, 21, 0.1);
  --modal-bg-start: #45132f;
  --modal-bg-end: #3b0f2e;
  --modal-border: rgba(250, 204, 21, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(250, 204, 21, 0.55);
  --drop-target-ring: rgba(250, 204, 21, 0.65);
  --add-btn-border: rgba(250, 204, 21, 0.38);
  --add-btn-bg: rgba(250, 204, 21, 0.06);
  --add-btn-bg-hover: rgba(250, 204, 21, 0.12);
  --drag-handle-bg: rgba(250, 204, 21, 0.12);
  --move-btn-bg: rgba(250, 204, 21, 0.16);
  --move-btn-bg-hover: rgba(250, 204, 21, 0.28);
  --move-btn-border: rgba(76, 21, 56, 0.92);
  --apply-disabled-bg: rgba(250, 204, 21, 0.22);
  --apply-disabled-text: rgba(255, 247, 237, 0.55);
  --qr-image-bg: #fff7ed;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fde047;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Ink Splash ── */
:is(body[data-user-theme="ink-splash"], #card-shell[data-design="ink-splash"], .theme-preview-shell[data-design="ink-splash"]) {
  --bg-primary: #312e81;
  --bg-secondary: #1e1b4b;
  --bg-gradient-mid: #4338ca;
  --card-bg: #25206a;
  --surface: rgba(37, 32, 106, 0.88);
  --surface-glass: rgba(37,32,106,0.84);
  --button-bg: #4338ca;
  --button-hover: #4338ca;
  --text-primary: #faf5ff;
  --text-secondary: #c7c3e8;
  --text-tertiary: #64748b;
  --accent: #fb7185;
  --accent-light: rgba(251, 113, 133, 0.28);
  --accent-subtle: rgba(251, 113, 133, 0.12);
  --accent-border: rgba(251, 113, 133, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 113, 133, 0.14);
  --icon-color: #fb7185;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #818cf8;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fda4af;
  --avatar-ring-end: #a5b4fc;
  --avatar-ring-glow: rgba(251, 113, 133, 0.35);
  --avatar-border: #312e81;
  --avatar-placeholder-start: #25206a;
  --avatar-placeholder-end: #1e1b4b;
  --avatar-placeholder-text: #faf5ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1e1b4b;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 113, 133, 0.15);
  --menu-bg: rgba(49, 46, 129, 0.98);
  --menu-border: rgba(251, 113, 133, 0.28);
  --menu-hover: rgba(251, 113, 133, 0.1);
  --modal-bg-start: #25206a;
  --modal-bg-end: #312e81;
  --modal-border: rgba(251, 113, 133, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 113, 133, 0.55);
  --drop-target-ring: rgba(251, 113, 133, 0.65);
  --add-btn-border: rgba(251, 113, 133, 0.38);
  --add-btn-bg: rgba(251, 113, 133, 0.06);
  --add-btn-bg-hover: rgba(251, 113, 133, 0.12);
  --drag-handle-bg: rgba(251, 113, 133, 0.12);
  --move-btn-bg: rgba(251, 113, 133, 0.16);
  --move-btn-bg-hover: rgba(251, 113, 133, 0.28);
  --move-btn-border: rgba(30, 27, 75, 0.92);
  --apply-disabled-bg: rgba(251, 113, 133, 0.22);
  --apply-disabled-text: rgba(250, 245, 255, 0.55);
  --qr-image-bg: #faf5ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fda4af;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Velvet Nocturne ── */
:is(body[data-user-theme="velvet-nocturne"], #card-shell[data-design="velvet-nocturne"], .theme-preview-shell[data-design="velvet-nocturne"]) {
  --bg-primary: #07030f;
  --bg-secondary: #12091f;
  --bg-gradient-mid: #1f1035;
  --card-bg: #13091f;
  --surface: rgba(19, 9, 31, 0.88);
  --surface-glass: rgba(19,9,31,0.88);
  --button-bg: #1f1035;
  --button-hover: #1f1035;
  --text-primary: #faf7ff;
  --text-secondary: #c4b5d8;
  --text-tertiary: #64748b;
  --accent: #8b5cf6;
  --accent-light: rgba(139, 92, 246, 0.28);
  --accent-subtle: rgba(139, 92, 246, 0.12);
  --accent-border: rgba(139, 92, 246, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(139, 92, 246, 0.14);
  --icon-color: #8b5cf6;
  --contact-icon-bg-start: #8b5cf6;
  --contact-icon-bg-end: #6d28d9;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #8b5cf6;
  --avatar-ring-glow: rgba(139, 92, 246, 0.35);
  --avatar-border: #07030f;
  --avatar-placeholder-start: #13091f;
  --avatar-placeholder-end: #12091f;
  --avatar-placeholder-text: #faf7ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #12091f;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(139, 92, 246, 0.15);
  --menu-bg: rgba(7, 3, 15, 0.98);
  --menu-border: rgba(139, 92, 246, 0.28);
  --menu-hover: rgba(139, 92, 246, 0.1);
  --modal-bg-start: #13091f;
  --modal-bg-end: #07030f;
  --modal-border: rgba(139, 92, 246, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(139, 92, 246, 0.55);
  --drop-target-ring: rgba(139, 92, 246, 0.65);
  --add-btn-border: rgba(139, 92, 246, 0.38);
  --add-btn-bg: rgba(139, 92, 246, 0.06);
  --add-btn-bg-hover: rgba(139, 92, 246, 0.12);
  --drag-handle-bg: rgba(139, 92, 246, 0.12);
  --move-btn-bg: rgba(139, 92, 246, 0.16);
  --move-btn-bg-hover: rgba(139, 92, 246, 0.28);
  --move-btn-border: rgba(18, 9, 31, 0.92);
  --apply-disabled-bg: rgba(139, 92, 246, 0.22);
  --apply-disabled-text: rgba(250, 247, 255, 0.55);
  --qr-image-bg: #faf7ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Obsidian Aurora ── */
:is(body[data-user-theme="obsidian-aurora"], #card-shell[data-design="obsidian-aurora"], .theme-preview-shell[data-design="obsidian-aurora"]) {
  --bg-primary: #050807;
  --bg-secondary: #081411;
  --bg-gradient-mid: #0d241d;
  --card-bg: #0a1513;
  --surface: rgba(10, 21, 19, 0.88);
  --surface-glass: rgba(10,21,19,0.88);
  --button-bg: #0d241d;
  --button-hover: #0d241d;
  --text-primary: #effff9;
  --text-secondary: #a5d8c5;
  --text-tertiary: #64748b;
  --accent: #34d399;
  --accent-light: rgba(52, 211, 153, 0.28);
  --accent-subtle: rgba(52, 211, 153, 0.12);
  --accent-border: rgba(52, 211, 153, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(52, 211, 153, 0.14);
  --icon-color: #34d399;
  --contact-icon-bg-start: #34d399;
  --contact-icon-bg-end: #059669;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #86efac;
  --avatar-ring-end: #34d399;
  --avatar-ring-glow: rgba(52, 211, 153, 0.35);
  --avatar-border: #050807;
  --avatar-placeholder-start: #0a1513;
  --avatar-placeholder-end: #081411;
  --avatar-placeholder-text: #effff9;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #081411;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(52, 211, 153, 0.15);
  --menu-bg: rgba(5, 8, 7, 0.98);
  --menu-border: rgba(52, 211, 153, 0.28);
  --menu-hover: rgba(52, 211, 153, 0.1);
  --modal-bg-start: #0a1513;
  --modal-bg-end: #050807;
  --modal-border: rgba(52, 211, 153, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(52, 211, 153, 0.55);
  --drop-target-ring: rgba(52, 211, 153, 0.65);
  --add-btn-border: rgba(52, 211, 153, 0.38);
  --add-btn-bg: rgba(52, 211, 153, 0.06);
  --add-btn-bg-hover: rgba(52, 211, 153, 0.12);
  --drag-handle-bg: rgba(52, 211, 153, 0.12);
  --move-btn-bg: rgba(52, 211, 153, 0.16);
  --move-btn-bg-hover: rgba(52, 211, 153, 0.28);
  --move-btn-border: rgba(8, 20, 17, 0.92);
  --apply-disabled-bg: rgba(52, 211, 153, 0.22);
  --apply-disabled-text: rgba(239, 255, 249, 0.55);
  --qr-image-bg: #effff9;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #86efac;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Carbon Violet ── */
:is(body[data-user-theme="carbon-violet"], #card-shell[data-design="carbon-violet"], .theme-preview-shell[data-design="carbon-violet"]) {
  --bg-primary: #141416;
  --bg-secondary: #202024;
  --bg-gradient-mid: #2b2a31;
  --card-bg: #1d1d21;
  --surface: rgba(29, 29, 33, 0.88);
  --surface-glass: rgba(29,29,33,0.86);
  --button-bg: #2b2a31;
  --button-hover: #2b2a31;
  --text-primary: #fafafa;
  --text-secondary: #c7c5d0;
  --text-tertiary: #64748b;
  --accent: #a855f7;
  --accent-light: rgba(168, 85, 247, 0.28);
  --accent-subtle: rgba(168, 85, 247, 0.12);
  --accent-border: rgba(168, 85, 247, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(168, 85, 247, 0.14);
  --icon-color: #a855f7;
  --contact-icon-bg-start: #a855f7;
  --contact-icon-bg-end: #7e22ce;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #d8b4fe;
  --avatar-ring-end: #a855f7;
  --avatar-ring-glow: rgba(168, 85, 247, 0.35);
  --avatar-border: #141416;
  --avatar-placeholder-start: #1d1d21;
  --avatar-placeholder-end: #202024;
  --avatar-placeholder-text: #fafafa;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #202024;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(168, 85, 247, 0.15);
  --menu-bg: rgba(20, 20, 22, 0.98);
  --menu-border: rgba(168, 85, 247, 0.28);
  --menu-hover: rgba(168, 85, 247, 0.1);
  --modal-bg-start: #1d1d21;
  --modal-bg-end: #141416;
  --modal-border: rgba(168, 85, 247, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(168, 85, 247, 0.55);
  --drop-target-ring: rgba(168, 85, 247, 0.65);
  --add-btn-border: rgba(168, 85, 247, 0.38);
  --add-btn-bg: rgba(168, 85, 247, 0.06);
  --add-btn-bg-hover: rgba(168, 85, 247, 0.12);
  --drag-handle-bg: rgba(168, 85, 247, 0.12);
  --move-btn-bg: rgba(168, 85, 247, 0.16);
  --move-btn-bg-hover: rgba(168, 85, 247, 0.28);
  --move-btn-border: rgba(32, 32, 36, 0.92);
  --apply-disabled-bg: rgba(168, 85, 247, 0.22);
  --apply-disabled-text: rgba(250, 250, 250, 0.55);
  --qr-image-bg: #fafafa;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #d8b4fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Eclipse Amber ── */
:is(body[data-user-theme="eclipse-amber"], #card-shell[data-design="eclipse-amber"], .theme-preview-shell[data-design="eclipse-amber"]) {
  --bg-primary: #0b0906;
  --bg-secondary: #1a1308;
  --bg-gradient-mid: #2b1e0a;
  --card-bg: #17100a;
  --surface: rgba(23, 16, 10, 0.88);
  --surface-glass: rgba(23,16,10,0.88);
  --button-bg: #2b1e0a;
  --button-hover: #2b1e0a;
  --text-primary: #fff8eb;
  --text-secondary: #d8c29e;
  --text-tertiary: #64748b;
  --accent: #f59e0b;
  --accent-light: rgba(245, 158, 11, 0.28);
  --accent-subtle: rgba(245, 158, 11, 0.12);
  --accent-border: rgba(245, 158, 11, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(245, 158, 11, 0.14);
  --icon-color: #f59e0b;
  --contact-icon-bg-start: #f59e0b;
  --contact-icon-bg-end: #b45309;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fbbf24;
  --avatar-ring-end: #f59e0b;
  --avatar-ring-glow: rgba(245, 158, 11, 0.35);
  --avatar-border: #0b0906;
  --avatar-placeholder-start: #17100a;
  --avatar-placeholder-end: #1a1308;
  --avatar-placeholder-text: #fff8eb;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1a1308;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(245, 158, 11, 0.15);
  --menu-bg: rgba(11, 9, 6, 0.98);
  --menu-border: rgba(245, 158, 11, 0.28);
  --menu-hover: rgba(245, 158, 11, 0.1);
  --modal-bg-start: #17100a;
  --modal-bg-end: #0b0906;
  --modal-border: rgba(245, 158, 11, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(245, 158, 11, 0.55);
  --drop-target-ring: rgba(245, 158, 11, 0.65);
  --add-btn-border: rgba(245, 158, 11, 0.38);
  --add-btn-bg: rgba(245, 158, 11, 0.06);
  --add-btn-bg-hover: rgba(245, 158, 11, 0.12);
  --drag-handle-bg: rgba(245, 158, 11, 0.12);
  --move-btn-bg: rgba(245, 158, 11, 0.16);
  --move-btn-bg-hover: rgba(245, 158, 11, 0.28);
  --move-btn-border: rgba(26, 19, 8, 0.92);
  --apply-disabled-bg: rgba(245, 158, 11, 0.22);
  --apply-disabled-text: rgba(255, 248, 235, 0.55);
  --qr-image-bg: #fff8eb;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fbbf24;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Noir Emerald ── */
:is(body[data-user-theme="noir-emerald"], #card-shell[data-design="noir-emerald"], .theme-preview-shell[data-design="noir-emerald"]) {
  --bg-primary: #07110d;
  --bg-secondary: #0d1f17;
  --bg-gradient-mid: #123323;
  --card-bg: #0d1d16;
  --surface: rgba(13, 29, 22, 0.88);
  --surface-glass: rgba(13,29,22,0.86);
  --button-bg: #123323;
  --button-hover: #123323;
  --text-primary: #ecfdf5;
  --text-secondary: #a9d4c2;
  --text-tertiary: #64748b;
  --accent: #10b981;
  --accent-light: rgba(16, 185, 129, 0.28);
  --accent-subtle: rgba(16, 185, 129, 0.12);
  --accent-border: rgba(16, 185, 129, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(16, 185, 129, 0.14);
  --icon-color: #10b981;
  --contact-icon-bg-start: #10b981;
  --contact-icon-bg-end: #047857;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #6ee7b7;
  --avatar-ring-end: #10b981;
  --avatar-ring-glow: rgba(16, 185, 129, 0.35);
  --avatar-border: #07110d;
  --avatar-placeholder-start: #0d1d16;
  --avatar-placeholder-end: #0d1f17;
  --avatar-placeholder-text: #ecfdf5;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0d1f17;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(16, 185, 129, 0.15);
  --menu-bg: rgba(7, 17, 13, 0.98);
  --menu-border: rgba(16, 185, 129, 0.28);
  --menu-hover: rgba(16, 185, 129, 0.1);
  --modal-bg-start: #0d1d16;
  --modal-bg-end: #07110d;
  --modal-border: rgba(16, 185, 129, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(16, 185, 129, 0.55);
  --drop-target-ring: rgba(16, 185, 129, 0.65);
  --add-btn-border: rgba(16, 185, 129, 0.38);
  --add-btn-bg: rgba(16, 185, 129, 0.06);
  --add-btn-bg-hover: rgba(16, 185, 129, 0.12);
  --drag-handle-bg: rgba(16, 185, 129, 0.12);
  --move-btn-bg: rgba(16, 185, 129, 0.16);
  --move-btn-bg-hover: rgba(16, 185, 129, 0.28);
  --move-btn-border: rgba(13, 31, 23, 0.92);
  --apply-disabled-bg: rgba(16, 185, 129, 0.22);
  --apply-disabled-text: rgba(236, 253, 245, 0.55);
  --qr-image-bg: #ecfdf5;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #6ee7b7;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Blue Hour ── */
:is(body[data-user-theme="blue-hour"], #card-shell[data-design="blue-hour"], .theme-preview-shell[data-design="blue-hour"]) {
  --bg-primary: #081225;
  --bg-secondary: #0d1c36;
  --bg-gradient-mid: #132a4d;
  --card-bg: #0e1d35;
  --surface: rgba(14, 29, 53, 0.88);
  --surface-glass: rgba(14,29,53,0.86);
  --button-bg: #132a4d;
  --button-hover: #132a4d;
  --text-primary: #f0f9ff;
  --text-secondary: #b2cfe3;
  --text-tertiary: #64748b;
  --accent: #38bdf8;
  --accent-light: rgba(56, 189, 248, 0.28);
  --accent-subtle: rgba(56, 189, 248, 0.12);
  --accent-border: rgba(56, 189, 248, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(56, 189, 248, 0.14);
  --icon-color: #38bdf8;
  --contact-icon-bg-start: #38bdf8;
  --contact-icon-bg-end: #0284c7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #7dd3fc;
  --avatar-ring-end: #38bdf8;
  --avatar-ring-glow: rgba(56, 189, 248, 0.35);
  --avatar-border: #081225;
  --avatar-placeholder-start: #0e1d35;
  --avatar-placeholder-end: #0d1c36;
  --avatar-placeholder-text: #f0f9ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0d1c36;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(56, 189, 248, 0.15);
  --menu-bg: rgba(8, 18, 37, 0.98);
  --menu-border: rgba(56, 189, 248, 0.28);
  --menu-hover: rgba(56, 189, 248, 0.1);
  --modal-bg-start: #0e1d35;
  --modal-bg-end: #081225;
  --modal-border: rgba(56, 189, 248, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(56, 189, 248, 0.55);
  --drop-target-ring: rgba(56, 189, 248, 0.65);
  --add-btn-border: rgba(56, 189, 248, 0.38);
  --add-btn-bg: rgba(56, 189, 248, 0.06);
  --add-btn-bg-hover: rgba(56, 189, 248, 0.12);
  --drag-handle-bg: rgba(56, 189, 248, 0.12);
  --move-btn-bg: rgba(56, 189, 248, 0.16);
  --move-btn-bg-hover: rgba(56, 189, 248, 0.28);
  --move-btn-border: rgba(13, 28, 54, 0.92);
  --apply-disabled-bg: rgba(56, 189, 248, 0.22);
  --apply-disabled-text: rgba(240, 249, 255, 0.55);
  --qr-image-bg: #f0f9ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #7dd3fc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Ruby Shadow ── */
:is(body[data-user-theme="ruby-shadow"], #card-shell[data-design="ruby-shadow"], .theme-preview-shell[data-design="ruby-shadow"]) {
  --bg-primary: #12070b;
  --bg-secondary: #220b12;
  --bg-gradient-mid: #35101c;
  --card-bg: #1f0b11;
  --surface: rgba(31, 11, 17, 0.88);
  --surface-glass: rgba(31,11,17,0.88);
  --button-bg: #35101c;
  --button-hover: #35101c;
  --text-primary: #fff1f4;
  --text-secondary: #d7aab5;
  --text-tertiary: #64748b;
  --accent: #e11d48;
  --accent-light: rgba(225, 29, 72, 0.28);
  --accent-subtle: rgba(225, 29, 72, 0.12);
  --accent-border: rgba(225, 29, 72, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(225, 29, 72, 0.14);
  --icon-color: #e11d48;
  --contact-icon-bg-start: #e11d48;
  --contact-icon-bg-end: #9f1239;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fb7185;
  --avatar-ring-end: #e11d48;
  --avatar-ring-glow: rgba(225, 29, 72, 0.35);
  --avatar-border: #12070b;
  --avatar-placeholder-start: #1f0b11;
  --avatar-placeholder-end: #220b12;
  --avatar-placeholder-text: #fff1f4;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #220b12;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(225, 29, 72, 0.15);
  --menu-bg: rgba(18, 7, 11, 0.98);
  --menu-border: rgba(225, 29, 72, 0.28);
  --menu-hover: rgba(225, 29, 72, 0.1);
  --modal-bg-start: #1f0b11;
  --modal-bg-end: #12070b;
  --modal-border: rgba(225, 29, 72, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(225, 29, 72, 0.55);
  --drop-target-ring: rgba(225, 29, 72, 0.65);
  --add-btn-border: rgba(225, 29, 72, 0.38);
  --add-btn-bg: rgba(225, 29, 72, 0.06);
  --add-btn-bg-hover: rgba(225, 29, 72, 0.12);
  --drag-handle-bg: rgba(225, 29, 72, 0.12);
  --move-btn-bg: rgba(225, 29, 72, 0.16);
  --move-btn-bg-hover: rgba(225, 29, 72, 0.28);
  --move-btn-border: rgba(34, 11, 18, 0.92);
  --apply-disabled-bg: rgba(225, 29, 72, 0.22);
  --apply-disabled-text: rgba(255, 241, 244, 0.55);
  --qr-image-bg: #fff1f4;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fb7185;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Deep Space ── */
:is(body[data-user-theme="deep-space"], #card-shell[data-design="deep-space"], .theme-preview-shell[data-design="deep-space"]) {
  --bg-primary: #050816;
  --bg-secondary: #0b1025;
  --bg-gradient-mid: #131b3d;
  --card-bg: #0b1020;
  --surface: rgba(11, 16, 32, 0.88);
  --surface-glass: rgba(11,16,32,0.88);
  --button-bg: #131b3d;
  --button-hover: #131b3d;
  --text-primary: #f8f7ff;
  --text-secondary: #c3bddb;
  --text-tertiary: #64748b;
  --accent: #c084fc;
  --accent-light: rgba(192, 132, 252, 0.28);
  --accent-subtle: rgba(192, 132, 252, 0.12);
  --accent-border: rgba(192, 132, 252, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(192, 132, 252, 0.14);
  --icon-color: #c084fc;
  --contact-icon-bg-start: #c084fc;
  --contact-icon-bg-end: #6366f1;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #d8b4fe;
  --avatar-ring-end: #818cf8;
  --avatar-ring-glow: rgba(192, 132, 252, 0.35);
  --avatar-border: #050816;
  --avatar-placeholder-start: #0b1020;
  --avatar-placeholder-end: #0b1025;
  --avatar-placeholder-text: #f8f7ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0b1025;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(192, 132, 252, 0.15);
  --menu-bg: rgba(5, 8, 22, 0.98);
  --menu-border: rgba(192, 132, 252, 0.28);
  --menu-hover: rgba(192, 132, 252, 0.1);
  --modal-bg-start: #0b1020;
  --modal-bg-end: #050816;
  --modal-border: rgba(192, 132, 252, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(192, 132, 252, 0.55);
  --drop-target-ring: rgba(192, 132, 252, 0.65);
  --add-btn-border: rgba(192, 132, 252, 0.38);
  --add-btn-bg: rgba(192, 132, 252, 0.06);
  --add-btn-bg-hover: rgba(192, 132, 252, 0.12);
  --drag-handle-bg: rgba(192, 132, 252, 0.12);
  --move-btn-bg: rgba(192, 132, 252, 0.16);
  --move-btn-bg-hover: rgba(192, 132, 252, 0.28);
  --move-btn-border: rgba(11, 16, 37, 0.92);
  --apply-disabled-bg: rgba(192, 132, 252, 0.22);
  --apply-disabled-text: rgba(248, 247, 255, 0.55);
  --qr-image-bg: #f8f7ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #d8b4fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Ink Teal ── */
:is(body[data-user-theme="ink-teal"], #card-shell[data-design="ink-teal"], .theme-preview-shell[data-design="ink-teal"]) {
  --bg-primary: #06131a;
  --bg-secondary: #0a2028;
  --bg-gradient-mid: #0e3038;
  --card-bg: #0a1f27;
  --surface: rgba(10, 31, 39, 0.88);
  --surface-glass: rgba(10,31,39,0.86);
  --button-bg: #0e3038;
  --button-hover: #0e3038;
  --text-primary: #f0fdfa;
  --text-secondary: #aed8d3;
  --text-tertiary: #64748b;
  --accent: #2dd4bf;
  --accent-light: rgba(45, 212, 191, 0.28);
  --accent-subtle: rgba(45, 212, 191, 0.12);
  --accent-border: rgba(45, 212, 191, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(45, 212, 191, 0.14);
  --icon-color: #2dd4bf;
  --contact-icon-bg-start: #2dd4bf;
  --contact-icon-bg-end: #0d9488;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #99f6e4;
  --avatar-ring-end: #2dd4bf;
  --avatar-ring-glow: rgba(45, 212, 191, 0.35);
  --avatar-border: #06131a;
  --avatar-placeholder-start: #0a1f27;
  --avatar-placeholder-end: #0a2028;
  --avatar-placeholder-text: #f0fdfa;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0a2028;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(45, 212, 191, 0.15);
  --menu-bg: rgba(6, 19, 26, 0.98);
  --menu-border: rgba(45, 212, 191, 0.28);
  --menu-hover: rgba(45, 212, 191, 0.1);
  --modal-bg-start: #0a1f27;
  --modal-bg-end: #06131a;
  --modal-border: rgba(45, 212, 191, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(45, 212, 191, 0.55);
  --drop-target-ring: rgba(45, 212, 191, 0.65);
  --add-btn-border: rgba(45, 212, 191, 0.38);
  --add-btn-bg: rgba(45, 212, 191, 0.06);
  --add-btn-bg-hover: rgba(45, 212, 191, 0.12);
  --drag-handle-bg: rgba(45, 212, 191, 0.12);
  --move-btn-bg: rgba(45, 212, 191, 0.16);
  --move-btn-bg-hover: rgba(45, 212, 191, 0.28);
  --move-btn-border: rgba(10, 32, 40, 0.92);
  --apply-disabled-bg: rgba(45, 212, 191, 0.22);
  --apply-disabled-text: rgba(240, 253, 250, 0.55);
  --qr-image-bg: #f0fdfa;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #99f6e4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Void Plasma ── */
:is(body[data-user-theme="void-plasma"], #card-shell[data-design="void-plasma"], .theme-preview-shell[data-design="void-plasma"]) {
  --bg-primary: #030712;
  --bg-secondary: #0a0618;
  --bg-gradient-mid: #1a0b2e;
  --card-bg: #080514;
  --surface: rgba(8, 5, 20, 0.88);
  --surface-glass: rgba(8,5,20,0.88);
  --button-bg: #1a0b2e;
  --button-hover: #1a0b2e;
  --text-primary: #fdf4ff;
  --text-secondary: #c4a8d8;
  --text-tertiary: #64748b;
  --accent: #d946ef;
  --accent-light: rgba(217, 70, 239, 0.28);
  --accent-subtle: rgba(217, 70, 239, 0.12);
  --accent-border: rgba(217, 70, 239, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(217, 70, 239, 0.14);
  --icon-color: #d946ef;
  --contact-icon-bg-start: #d946ef;
  --contact-icon-bg-end: #a21caf;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f0abfc;
  --avatar-ring-end: #d946ef;
  --avatar-ring-glow: rgba(217, 70, 239, 0.35);
  --avatar-border: #030712;
  --avatar-placeholder-start: #080514;
  --avatar-placeholder-end: #0a0618;
  --avatar-placeholder-text: #fdf4ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0a0618;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(217, 70, 239, 0.15);
  --menu-bg: rgba(3, 7, 18, 0.98);
  --menu-border: rgba(217, 70, 239, 0.28);
  --menu-hover: rgba(217, 70, 239, 0.1);
  --modal-bg-start: #080514;
  --modal-bg-end: #030712;
  --modal-border: rgba(217, 70, 239, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(217, 70, 239, 0.55);
  --drop-target-ring: rgba(217, 70, 239, 0.65);
  --add-btn-border: rgba(217, 70, 239, 0.38);
  --add-btn-bg: rgba(217, 70, 239, 0.06);
  --add-btn-bg-hover: rgba(217, 70, 239, 0.12);
  --drag-handle-bg: rgba(217, 70, 239, 0.12);
  --move-btn-bg: rgba(217, 70, 239, 0.16);
  --move-btn-bg-hover: rgba(217, 70, 239, 0.28);
  --move-btn-border: rgba(10, 6, 24, 0.92);
  --apply-disabled-bg: rgba(217, 70, 239, 0.22);
  --apply-disabled-text: rgba(253, 244, 255, 0.55);
  --qr-image-bg: #fdf4ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f0abfc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Storm Charcoal ── */
:is(body[data-user-theme="storm-charcoal"], #card-shell[data-design="storm-charcoal"], .theme-preview-shell[data-design="storm-charcoal"]) {
  --bg-primary: #0a0a0a;
  --bg-secondary: #171717;
  --bg-gradient-mid: #262626;
  --card-bg: #121212;
  --surface: rgba(18, 18, 18, 0.88);
  --surface-glass: rgba(18,18,18,0.88);
  --button-bg: #262626;
  --button-hover: #262626;
  --text-primary: #fafafa;
  --text-secondary: #c2c2c2;
  --text-tertiary: #64748b;
  --accent: #94a3b8;
  --accent-light: rgba(148, 163, 184, 0.28);
  --accent-subtle: rgba(148, 163, 184, 0.12);
  --accent-border: rgba(148, 163, 184, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(148, 163, 184, 0.14);
  --icon-color: #94a3b8;
  --contact-icon-bg-start: #64748b;
  --contact-icon-bg-end: #475569;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #cbd5e1;
  --avatar-ring-end: #94a3b8;
  --avatar-ring-glow: rgba(148, 163, 184, 0.35);
  --avatar-border: #0a0a0a;
  --avatar-placeholder-start: #121212;
  --avatar-placeholder-end: #171717;
  --avatar-placeholder-text: #fafafa;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #171717;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(148, 163, 184, 0.15);
  --menu-bg: rgba(10, 10, 10, 0.98);
  --menu-border: rgba(148, 163, 184, 0.28);
  --menu-hover: rgba(148, 163, 184, 0.1);
  --modal-bg-start: #121212;
  --modal-bg-end: #0a0a0a;
  --modal-border: rgba(148, 163, 184, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(148, 163, 184, 0.55);
  --drop-target-ring: rgba(148, 163, 184, 0.65);
  --add-btn-border: rgba(148, 163, 184, 0.38);
  --add-btn-bg: rgba(148, 163, 184, 0.06);
  --add-btn-bg-hover: rgba(148, 163, 184, 0.12);
  --drag-handle-bg: rgba(148, 163, 184, 0.12);
  --move-btn-bg: rgba(148, 163, 184, 0.16);
  --move-btn-bg-hover: rgba(148, 163, 184, 0.28);
  --move-btn-border: rgba(23, 23, 23, 0.92);
  --apply-disabled-bg: rgba(148, 163, 184, 0.22);
  --apply-disabled-text: rgba(250, 250, 250, 0.55);
  --qr-image-bg: #fafafa;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #cbd5e1;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Moss Garden ── */
:is(body[data-user-theme="moss-garden"], #card-shell[data-design="moss-garden"], .theme-preview-shell[data-design="moss-garden"]) {
  --bg-primary: #17220f;
  --bg-secondary: #213114;
  --bg-gradient-mid: #2f461b;
  --card-bg: #223119;
  --surface: rgba(34, 49, 25, 0.88);
  --surface-glass: rgba(34,49,25,0.84);
  --button-bg: #2f461b;
  --button-hover: #2f461b;
  --text-primary: #f7fee7;
  --text-secondary: #c2d6a8;
  --text-tertiary: #64748b;
  --accent: #65a30d;
  --accent-light: rgba(101, 163, 13, 0.28);
  --accent-subtle: rgba(101, 163, 13, 0.12);
  --accent-border: rgba(101, 163, 13, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(101, 163, 13, 0.14);
  --icon-color: #65a30d;
  --contact-icon-bg-start: #65a30d;
  --contact-icon-bg-end: #3f6212;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #a3e635;
  --avatar-ring-end: #65a30d;
  --avatar-ring-glow: rgba(101, 163, 13, 0.35);
  --avatar-border: #17220f;
  --avatar-placeholder-start: #223119;
  --avatar-placeholder-end: #213114;
  --avatar-placeholder-text: #f7fee7;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #213114;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(101, 163, 13, 0.15);
  --menu-bg: rgba(23, 34, 15, 0.98);
  --menu-border: rgba(101, 163, 13, 0.28);
  --menu-hover: rgba(101, 163, 13, 0.1);
  --modal-bg-start: #223119;
  --modal-bg-end: #17220f;
  --modal-border: rgba(101, 163, 13, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(101, 163, 13, 0.55);
  --drop-target-ring: rgba(101, 163, 13, 0.65);
  --add-btn-border: rgba(101, 163, 13, 0.38);
  --add-btn-bg: rgba(101, 163, 13, 0.06);
  --add-btn-bg-hover: rgba(101, 163, 13, 0.12);
  --drag-handle-bg: rgba(101, 163, 13, 0.12);
  --move-btn-bg: rgba(101, 163, 13, 0.16);
  --move-btn-bg-hover: rgba(101, 163, 13, 0.28);
  --move-btn-border: rgba(33, 49, 20, 0.92);
  --apply-disabled-bg: rgba(101, 163, 13, 0.22);
  --apply-disabled-text: rgba(247, 254, 231, 0.55);
  --qr-image-bg: #f7fee7;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #a3e635;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Desert Sand ── */
:is(body[data-user-theme="desert-sand"], #card-shell[data-design="desert-sand"], .theme-preview-shell[data-design="desert-sand"]) {
  --bg-primary: #f5e6c8;
  --bg-secondary: #ead3a8;
  --bg-gradient-mid: #f0dcb9;
  --card-bg: #fff8ea;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,248,234,0.94);
  --button-bg: #ead3a8;
  --button-hover: #ead3a8;
  --text-primary: #302313;
  --text-secondary: #795d36;
  --text-tertiary: #64748b;
  --accent: #d97706;
  --accent-light: rgba(217, 119, 6, 0.18);
  --accent-subtle: rgba(217, 119, 6, 0.1);
  --accent-border: rgba(217, 119, 6, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(217, 119, 6, 0.12);
  --icon-color: #d97706;
  --contact-icon-bg-start: #d97706;
  --contact-icon-bg-end: #b45309;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fbbf24;
  --avatar-ring-end: #d97706;
  --avatar-ring-glow: rgba(217, 119, 6, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fff8ea;
  --avatar-placeholder-end: #ead3a8;
  --avatar-placeholder-text: #302313;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ead3a8;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(217, 119, 6, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(217, 119, 6, 0.2);
  --menu-hover: rgba(217, 119, 6, 0.08);
  --modal-bg-start: #fff8ea;
  --modal-bg-end: #f5e6c8;
  --modal-border: rgba(217, 119, 6, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(217, 119, 6, 0.45);
  --drop-target-ring: rgba(217, 119, 6, 0.55);
  --add-btn-border: rgba(217, 119, 6, 0.35);
  --add-btn-bg: rgba(217, 119, 6, 0.06);
  --add-btn-bg-hover: rgba(217, 119, 6, 0.12);
  --drag-handle-bg: rgba(217, 119, 6, 0.1);
  --move-btn-bg: rgba(217, 119, 6, 0.12);
  --move-btn-bg-hover: rgba(217, 119, 6, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(217, 119, 6, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fbbf24;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Rainforest Canopy ── */
:is(body[data-user-theme="rainforest-canopy"], #card-shell[data-design="rainforest-canopy"], .theme-preview-shell[data-design="rainforest-canopy"]) {
  --bg-primary: #052e1a;
  --bg-secondary: #073d24;
  --bg-gradient-mid: #0b5631;
  --card-bg: #0a3a24;
  --surface: rgba(10, 58, 36, 0.88);
  --surface-glass: rgba(10,58,36,0.84);
  --button-bg: #0b5631;
  --button-hover: #0b5631;
  --text-primary: #f0fdf4;
  --text-secondary: #a6d9ba;
  --text-tertiary: #64748b;
  --accent: #22c55e;
  --accent-light: rgba(34, 197, 94, 0.28);
  --accent-subtle: rgba(34, 197, 94, 0.12);
  --accent-border: rgba(34, 197, 94, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(34, 197, 94, 0.14);
  --icon-color: #22c55e;
  --contact-icon-bg-start: #22c55e;
  --contact-icon-bg-end: #15803d;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #86efac;
  --avatar-ring-end: #22c55e;
  --avatar-ring-glow: rgba(34, 197, 94, 0.35);
  --avatar-border: #052e1a;
  --avatar-placeholder-start: #0a3a24;
  --avatar-placeholder-end: #073d24;
  --avatar-placeholder-text: #f0fdf4;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #073d24;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(34, 197, 94, 0.15);
  --menu-bg: rgba(5, 46, 26, 0.98);
  --menu-border: rgba(34, 197, 94, 0.28);
  --menu-hover: rgba(34, 197, 94, 0.1);
  --modal-bg-start: #0a3a24;
  --modal-bg-end: #052e1a;
  --modal-border: rgba(34, 197, 94, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(34, 197, 94, 0.55);
  --drop-target-ring: rgba(34, 197, 94, 0.65);
  --add-btn-border: rgba(34, 197, 94, 0.38);
  --add-btn-bg: rgba(34, 197, 94, 0.06);
  --add-btn-bg-hover: rgba(34, 197, 94, 0.12);
  --drag-handle-bg: rgba(34, 197, 94, 0.12);
  --move-btn-bg: rgba(34, 197, 94, 0.16);
  --move-btn-bg-hover: rgba(34, 197, 94, 0.28);
  --move-btn-border: rgba(7, 61, 36, 0.92);
  --apply-disabled-bg: rgba(34, 197, 94, 0.22);
  --apply-disabled-text: rgba(240, 253, 244, 0.55);
  --qr-image-bg: #f0fdf4;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #86efac;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Glacier Lake ── */
:is(body[data-user-theme="glacier-lake"], #card-shell[data-design="glacier-lake"], .theme-preview-shell[data-design="glacier-lake"]) {
  --bg-primary: #e7f8fb;
  --bg-secondary: #cceff4;
  --bg-gradient-mid: #d9f5f8;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #cceff4;
  --button-hover: #cceff4;
  --text-primary: #0e2930;
  --text-secondary: #4d6c74;
  --text-tertiary: #64748b;
  --accent: #0891b2;
  --accent-light: rgba(8, 145, 178, 0.18);
  --accent-subtle: rgba(8, 145, 178, 0.1);
  --accent-border: rgba(8, 145, 178, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(8, 145, 178, 0.12);
  --icon-color: #0891b2;
  --contact-icon-bg-start: #0891b2;
  --contact-icon-bg-end: #0e7490;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #67e8f9;
  --avatar-ring-end: #0891b2;
  --avatar-ring-glow: rgba(8, 145, 178, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #cceff4;
  --avatar-placeholder-text: #0e2930;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #cceff4;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(8, 145, 178, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(8, 145, 178, 0.2);
  --menu-hover: rgba(8, 145, 178, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #e7f8fb;
  --modal-border: rgba(8, 145, 178, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(8, 145, 178, 0.45);
  --drop-target-ring: rgba(8, 145, 178, 0.55);
  --add-btn-border: rgba(8, 145, 178, 0.35);
  --add-btn-bg: rgba(8, 145, 178, 0.06);
  --add-btn-bg-hover: rgba(8, 145, 178, 0.12);
  --drag-handle-bg: rgba(8, 145, 178, 0.1);
  --move-btn-bg: rgba(8, 145, 178, 0.12);
  --move-btn-bg-hover: rgba(8, 145, 178, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(8, 145, 178, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #67e8f9;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Terracotta Bloom ── */
:is(body[data-user-theme="terracotta-bloom"], #card-shell[data-design="terracotta-bloom"], .theme-preview-shell[data-design="terracotta-bloom"]) {
  --bg-primary: #fff0e5;
  --bg-secondary: #f3d5c1;
  --bg-gradient-mid: #fae2d2;
  --card-bg: #fffaf5;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,250,245,0.94);
  --button-bg: #f3d5c1;
  --button-hover: #f3d5c1;
  --text-primary: #331d14;
  --text-secondary: #765142;
  --text-tertiary: #64748b;
  --accent: #c2410c;
  --accent-light: rgba(194, 65, 12, 0.18);
  --accent-subtle: rgba(194, 65, 12, 0.1);
  --accent-border: rgba(194, 65, 12, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(194, 65, 12, 0.12);
  --icon-color: #c2410c;
  --contact-icon-bg-start: #c2410c;
  --contact-icon-bg-end: #9a3412;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fb923c;
  --avatar-ring-end: #c2410c;
  --avatar-ring-glow: rgba(194, 65, 12, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fffaf5;
  --avatar-placeholder-end: #f3d5c1;
  --avatar-placeholder-text: #331d14;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f3d5c1;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(194, 65, 12, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(194, 65, 12, 0.2);
  --menu-hover: rgba(194, 65, 12, 0.08);
  --modal-bg-start: #fffaf5;
  --modal-bg-end: #fff0e5;
  --modal-border: rgba(194, 65, 12, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(194, 65, 12, 0.45);
  --drop-target-ring: rgba(194, 65, 12, 0.55);
  --add-btn-border: rgba(194, 65, 12, 0.35);
  --add-btn-bg: rgba(194, 65, 12, 0.06);
  --add-btn-bg-hover: rgba(194, 65, 12, 0.12);
  --drag-handle-bg: rgba(194, 65, 12, 0.1);
  --move-btn-bg: rgba(194, 65, 12, 0.12);
  --move-btn-bg-hover: rgba(194, 65, 12, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(194, 65, 12, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fb923c;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Pine Mist ── */
:is(body[data-user-theme="pine-mist"], #card-shell[data-design="pine-mist"], .theme-preview-shell[data-design="pine-mist"]) {
  --bg-primary: #e8f2e1;
  --bg-secondary: #d7e8ce;
  --bg-gradient-mid: #e0edda;
  --card-bg: #fbfff8;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(251,255,248,0.94);
  --button-bg: #d7e8ce;
  --button-hover: #d7e8ce;
  --text-primary: #1d2a17;
  --text-secondary: #5b6b52;
  --text-tertiary: #64748b;
  --accent: #4d7c0f;
  --accent-light: rgba(77, 124, 15, 0.18);
  --accent-subtle: rgba(77, 124, 15, 0.1);
  --accent-border: rgba(77, 124, 15, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(77, 124, 15, 0.12);
  --icon-color: #4d7c0f;
  --contact-icon-bg-start: #4d7c0f;
  --contact-icon-bg-end: #365314;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #84cc16;
  --avatar-ring-end: #4d7c0f;
  --avatar-ring-glow: rgba(77, 124, 15, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fbfff8;
  --avatar-placeholder-end: #d7e8ce;
  --avatar-placeholder-text: #1d2a17;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #d7e8ce;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(77, 124, 15, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(77, 124, 15, 0.2);
  --menu-hover: rgba(77, 124, 15, 0.08);
  --modal-bg-start: #fbfff8;
  --modal-bg-end: #e8f2e1;
  --modal-border: rgba(77, 124, 15, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(77, 124, 15, 0.45);
  --drop-target-ring: rgba(77, 124, 15, 0.55);
  --add-btn-border: rgba(77, 124, 15, 0.35);
  --add-btn-bg: rgba(77, 124, 15, 0.06);
  --add-btn-bg-hover: rgba(77, 124, 15, 0.12);
  --drag-handle-bg: rgba(77, 124, 15, 0.1);
  --move-btn-bg: rgba(77, 124, 15, 0.12);
  --move-btn-bg-hover: rgba(77, 124, 15, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(77, 124, 15, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #84cc16;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Coral Reef ── */
:is(body[data-user-theme="coral-reef"], #card-shell[data-design="coral-reef"], .theme-preview-shell[data-design="coral-reef"]) {
  --bg-primary: #0b3b3a;
  --bg-secondary: #0f5652;
  --bg-gradient-mid: #14716c;
  --card-bg: #104946;
  --surface: rgba(16, 73, 70, 0.88);
  --surface-glass: rgba(16,73,70,0.84);
  --button-bg: #14716c;
  --button-hover: #14716c;
  --text-primary: #f0fdfa;
  --text-secondary: #b5d9d5;
  --text-tertiary: #64748b;
  --accent: #fb7185;
  --accent-light: rgba(251, 113, 133, 0.28);
  --accent-subtle: rgba(251, 113, 133, 0.12);
  --accent-border: rgba(251, 113, 133, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 113, 133, 0.14);
  --icon-color: #fb7185;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #14b8a6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fda4af;
  --avatar-ring-end: #5eead4;
  --avatar-ring-glow: rgba(251, 113, 133, 0.35);
  --avatar-border: #0b3b3a;
  --avatar-placeholder-start: #104946;
  --avatar-placeholder-end: #0f5652;
  --avatar-placeholder-text: #f0fdfa;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0f5652;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 113, 133, 0.15);
  --menu-bg: rgba(11, 59, 58, 0.98);
  --menu-border: rgba(251, 113, 133, 0.28);
  --menu-hover: rgba(251, 113, 133, 0.1);
  --modal-bg-start: #104946;
  --modal-bg-end: #0b3b3a;
  --modal-border: rgba(251, 113, 133, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 113, 133, 0.55);
  --drop-target-ring: rgba(251, 113, 133, 0.65);
  --add-btn-border: rgba(251, 113, 133, 0.38);
  --add-btn-bg: rgba(251, 113, 133, 0.06);
  --add-btn-bg-hover: rgba(251, 113, 133, 0.12);
  --drag-handle-bg: rgba(251, 113, 133, 0.12);
  --move-btn-bg: rgba(251, 113, 133, 0.16);
  --move-btn-bg-hover: rgba(251, 113, 133, 0.28);
  --move-btn-border: rgba(15, 86, 82, 0.92);
  --apply-disabled-bg: rgba(251, 113, 133, 0.22);
  --apply-disabled-text: rgba(240, 253, 250, 0.55);
  --qr-image-bg: #f0fdfa;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fda4af;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Lavender Field ── */
:is(body[data-user-theme="lavender-field"], #card-shell[data-design="lavender-field"], .theme-preview-shell[data-design="lavender-field"]) {
  --bg-primary: #f0f7ea;
  --bg-secondary: #e5daf7;
  --bg-gradient-mid: #eeeaf7;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #e5daf7;
  --button-hover: #e5daf7;
  --text-primary: #221f2f;
  --text-secondary: #625d72;
  --text-tertiary: #64748b;
  --accent: #8b5cf6;
  --accent-light: rgba(139, 92, 246, 0.18);
  --accent-subtle: rgba(139, 92, 246, 0.1);
  --accent-border: rgba(139, 92, 246, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(139, 92, 246, 0.12);
  --icon-color: #8b5cf6;
  --contact-icon-bg-start: #8b5cf6;
  --contact-icon-bg-end: #6aa84f;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #8b5cf6;
  --avatar-ring-glow: rgba(139, 92, 246, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #e5daf7;
  --avatar-placeholder-text: #221f2f;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #e5daf7;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(139, 92, 246, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(139, 92, 246, 0.2);
  --menu-hover: rgba(139, 92, 246, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f0f7ea;
  --modal-border: rgba(139, 92, 246, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(139, 92, 246, 0.45);
  --drop-target-ring: rgba(139, 92, 246, 0.55);
  --add-btn-border: rgba(139, 92, 246, 0.35);
  --add-btn-bg: rgba(139, 92, 246, 0.06);
  --add-btn-bg-hover: rgba(139, 92, 246, 0.12);
  --drag-handle-bg: rgba(139, 92, 246, 0.1);
  --move-btn-bg: rgba(139, 92, 246, 0.12);
  --move-btn-bg-hover: rgba(139, 92, 246, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(139, 92, 246, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Amber Grove ── */
:is(body[data-user-theme="amber-grove"], #card-shell[data-design="amber-grove"], .theme-preview-shell[data-design="amber-grove"]) {
  --bg-primary: #1a2e05;
  --bg-secondary: #274106;
  --bg-gradient-mid: #3f6212;
  --card-bg: #22330a;
  --surface: rgba(34, 51, 10, 0.88);
  --surface-glass: rgba(34,51,10,0.84);
  --button-bg: #3f6212;
  --button-hover: #3f6212;
  --text-primary: #fefce8;
  --text-secondary: #c5d89a;
  --text-tertiary: #64748b;
  --accent: #f59e0b;
  --accent-light: rgba(245, 158, 11, 0.28);
  --accent-subtle: rgba(245, 158, 11, 0.12);
  --accent-border: rgba(245, 158, 11, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(245, 158, 11, 0.14);
  --icon-color: #f59e0b;
  --contact-icon-bg-start: #f59e0b;
  --contact-icon-bg-end: #84cc16;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fde047;
  --avatar-ring-end: #a3e635;
  --avatar-ring-glow: rgba(245, 158, 11, 0.35);
  --avatar-border: #1a2e05;
  --avatar-placeholder-start: #22330a;
  --avatar-placeholder-end: #274106;
  --avatar-placeholder-text: #fefce8;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #274106;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(245, 158, 11, 0.15);
  --menu-bg: rgba(26, 46, 5, 0.98);
  --menu-border: rgba(245, 158, 11, 0.28);
  --menu-hover: rgba(245, 158, 11, 0.1);
  --modal-bg-start: #22330a;
  --modal-bg-end: #1a2e05;
  --modal-border: rgba(245, 158, 11, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(245, 158, 11, 0.55);
  --drop-target-ring: rgba(245, 158, 11, 0.65);
  --add-btn-border: rgba(245, 158, 11, 0.38);
  --add-btn-bg: rgba(245, 158, 11, 0.06);
  --add-btn-bg-hover: rgba(245, 158, 11, 0.12);
  --drag-handle-bg: rgba(245, 158, 11, 0.12);
  --move-btn-bg: rgba(245, 158, 11, 0.16);
  --move-btn-bg-hover: rgba(245, 158, 11, 0.28);
  --move-btn-border: rgba(39, 65, 6, 0.92);
  --apply-disabled-bg: rgba(245, 158, 11, 0.22);
  --apply-disabled-text: rgba(254, 252, 232, 0.55);
  --qr-image-bg: #fefce8;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fde047;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── River Stone ── */
:is(body[data-user-theme="river-stone"], #card-shell[data-design="river-stone"], .theme-preview-shell[data-design="river-stone"]) {
  --bg-primary: #f5f5f4;
  --bg-secondary: #e7e5e4;
  --bg-gradient-mid: #ecebea;
  --card-bg: #fafaf9;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(250,250,249,0.94);
  --button-bg: #e7e5e4;
  --button-hover: #e7e5e4;
  --text-primary: #1c1917;
  --text-secondary: #78716c;
  --text-tertiary: #64748b;
  --accent: #57534e;
  --accent-light: rgba(87, 83, 78, 0.18);
  --accent-subtle: rgba(87, 83, 78, 0.1);
  --accent-border: rgba(87, 83, 78, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(87, 83, 78, 0.12);
  --icon-color: #57534e;
  --contact-icon-bg-start: #57534e;
  --contact-icon-bg-end: #44403c;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #a8a29e;
  --avatar-ring-end: #78716c;
  --avatar-ring-glow: rgba(87, 83, 78, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #fafaf9;
  --avatar-placeholder-end: #e7e5e4;
  --avatar-placeholder-text: #1c1917;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #e7e5e4;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(87, 83, 78, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(87, 83, 78, 0.2);
  --menu-hover: rgba(87, 83, 78, 0.08);
  --modal-bg-start: #fafaf9;
  --modal-bg-end: #f5f5f4;
  --modal-border: rgba(87, 83, 78, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(87, 83, 78, 0.45);
  --drop-target-ring: rgba(87, 83, 78, 0.55);
  --add-btn-border: rgba(87, 83, 78, 0.35);
  --add-btn-bg: rgba(87, 83, 78, 0.06);
  --add-btn-bg-hover: rgba(87, 83, 78, 0.12);
  --drag-handle-bg: rgba(87, 83, 78, 0.1);
  --move-btn-bg: rgba(87, 83, 78, 0.12);
  --move-btn-bg-hover: rgba(87, 83, 78, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(87, 83, 78, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #a8a29e;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Prism Glass ── */
:is(body[data-user-theme="prism-glass"], #card-shell[data-design="prism-glass"], .theme-preview-shell[data-design="prism-glass"]) {
  --bg-primary: #ecfeff;
  --bg-secondary: #e9d5ff;
  --bg-gradient-mid: #dbeafe;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.72);
  --button-bg: #e9d5ff;
  --button-hover: #e9d5ff;
  --text-primary: #182033;
  --text-secondary: #5f667a;
  --text-tertiary: #64748b;
  --accent: #8b5cf6;
  --accent-light: rgba(139, 92, 246, 0.18);
  --accent-subtle: rgba(139, 92, 246, 0.1);
  --accent-border: rgba(139, 92, 246, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(139, 92, 246, 0.12);
  --icon-color: #8b5cf6;
  --contact-icon-bg-start: #8b5cf6;
  --contact-icon-bg-end: #38bdf8;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #7dd3fc;
  --avatar-ring-glow: rgba(139, 92, 246, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #e9d5ff;
  --avatar-placeholder-text: #182033;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #e9d5ff;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(139, 92, 246, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(139, 92, 246, 0.2);
  --menu-hover: rgba(139, 92, 246, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #ecfeff;
  --modal-border: rgba(139, 92, 246, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(139, 92, 246, 0.45);
  --drop-target-ring: rgba(139, 92, 246, 0.55);
  --add-btn-border: rgba(139, 92, 246, 0.35);
  --add-btn-bg: rgba(139, 92, 246, 0.06);
  --add-btn-bg-hover: rgba(139, 92, 246, 0.12);
  --drag-handle-bg: rgba(139, 92, 246, 0.1);
  --move-btn-bg: rgba(139, 92, 246, 0.12);
  --move-btn-bg-hover: rgba(139, 92, 246, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(139, 92, 246, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Arctic Glass ── */
:is(body[data-user-theme="arctic-glass"], #card-shell[data-design="arctic-glass"], .theme-preview-shell[data-design="arctic-glass"]) {
  --bg-primary: #f0f9ff;
  --bg-secondary: #dff3fb;
  --bg-gradient-mid: #e9f8ff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.68);
  --button-bg: #dff3fb;
  --button-hover: #dff3fb;
  --text-primary: #102533;
  --text-secondary: #527084;
  --text-tertiary: #64748b;
  --accent: #22d3ee;
  --accent-light: rgba(34, 211, 238, 0.18);
  --accent-subtle: rgba(34, 211, 238, 0.1);
  --accent-border: rgba(34, 211, 238, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(34, 211, 238, 0.12);
  --icon-color: #22d3ee;
  --contact-icon-bg-start: #22d3ee;
  --contact-icon-bg-end: #0284c7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #67e8f9;
  --avatar-ring-end: #22d3ee;
  --avatar-ring-glow: rgba(34, 211, 238, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #dff3fb;
  --avatar-placeholder-text: #102533;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #dff3fb;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(34, 211, 238, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(34, 211, 238, 0.2);
  --menu-hover: rgba(34, 211, 238, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f0f9ff;
  --modal-border: rgba(34, 211, 238, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(34, 211, 238, 0.45);
  --drop-target-ring: rgba(34, 211, 238, 0.55);
  --add-btn-border: rgba(34, 211, 238, 0.35);
  --add-btn-bg: rgba(34, 211, 238, 0.06);
  --add-btn-bg-hover: rgba(34, 211, 238, 0.12);
  --drag-handle-bg: rgba(34, 211, 238, 0.1);
  --move-btn-bg: rgba(34, 211, 238, 0.12);
  --move-btn-bg-hover: rgba(34, 211, 238, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(34, 211, 238, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #67e8f9;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Opal Haze ── */
:is(body[data-user-theme="opal-haze"], #card-shell[data-design="opal-haze"], .theme-preview-shell[data-design="opal-haze"]) {
  --bg-primary: #fff7ed;
  --bg-secondary: #ccfbf1;
  --bg-gradient-mid: #fdeff6;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.7);
  --button-bg: #fdeff6;
  --button-hover: #fdeff6;
  --text-primary: #2c2030;
  --text-secondary: #6f6573;
  --text-tertiary: #64748b;
  --accent: #f472b6;
  --accent-light: rgba(244, 114, 182, 0.18);
  --accent-subtle: rgba(244, 114, 182, 0.1);
  --accent-border: rgba(244, 114, 182, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(244, 114, 182, 0.12);
  --icon-color: #f472b6;
  --contact-icon-bg-start: #f472b6;
  --contact-icon-bg-end: #14b8a6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f9a8d4;
  --avatar-ring-end: #5eead4;
  --avatar-ring-glow: rgba(244, 114, 182, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #ccfbf1;
  --avatar-placeholder-text: #2c2030;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ccfbf1;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(244, 114, 182, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(244, 114, 182, 0.2);
  --menu-hover: rgba(244, 114, 182, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fff7ed;
  --modal-border: rgba(244, 114, 182, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(244, 114, 182, 0.45);
  --drop-target-ring: rgba(244, 114, 182, 0.55);
  --add-btn-border: rgba(244, 114, 182, 0.35);
  --add-btn-bg: rgba(244, 114, 182, 0.06);
  --add-btn-bg-hover: rgba(244, 114, 182, 0.12);
  --drag-handle-bg: rgba(244, 114, 182, 0.1);
  --move-btn-bg: rgba(244, 114, 182, 0.12);
  --move-btn-bg-hover: rgba(244, 114, 182, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(244, 114, 182, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f9a8d4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Smoked Crystal ── */
:is(body[data-user-theme="smoked-crystal"], #card-shell[data-design="smoked-crystal"], .theme-preview-shell[data-design="smoked-crystal"]) {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-gradient-mid: #2a3546;
  --card-bg: #18212e;
  --surface: rgba(24, 33, 46, 0.88);
  --surface-glass: rgba(24,33,46,0.58);
  --button-bg: #2a3546;
  --button-hover: #2a3546;
  --text-primary: #f8fafc;
  --text-secondary: #c8d2e1;
  --text-tertiary: #64748b;
  --accent: #93c5fd;
  --accent-light: rgba(147, 197, 253, 0.28);
  --accent-subtle: rgba(147, 197, 253, 0.12);
  --accent-border: rgba(147, 197, 253, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(147, 197, 253, 0.14);
  --icon-color: #93c5fd;
  --contact-icon-bg-start: #60a5fa;
  --contact-icon-bg-end: #64748b;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #bfdbfe;
  --avatar-ring-end: #93c5fd;
  --avatar-ring-glow: rgba(147, 197, 253, 0.35);
  --avatar-border: #111827;
  --avatar-placeholder-start: #18212e;
  --avatar-placeholder-end: #1f2937;
  --avatar-placeholder-text: #f8fafc;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1f2937;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(147, 197, 253, 0.15);
  --menu-bg: rgba(17, 24, 39, 0.98);
  --menu-border: rgba(147, 197, 253, 0.28);
  --menu-hover: rgba(147, 197, 253, 0.1);
  --modal-bg-start: #18212e;
  --modal-bg-end: #111827;
  --modal-border: rgba(147, 197, 253, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(147, 197, 253, 0.55);
  --drop-target-ring: rgba(147, 197, 253, 0.65);
  --add-btn-border: rgba(147, 197, 253, 0.38);
  --add-btn-bg: rgba(147, 197, 253, 0.06);
  --add-btn-bg-hover: rgba(147, 197, 253, 0.12);
  --drag-handle-bg: rgba(147, 197, 253, 0.12);
  --move-btn-bg: rgba(147, 197, 253, 0.16);
  --move-btn-bg-hover: rgba(147, 197, 253, 0.28);
  --move-btn-border: rgba(31, 41, 55, 0.92);
  --apply-disabled-bg: rgba(147, 197, 253, 0.22);
  --apply-disabled-text: rgba(248, 250, 252, 0.55);
  --qr-image-bg: #f8fafc;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #bfdbfe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Sapphire Glass ── */
:is(body[data-user-theme="sapphire-glass"], #card-shell[data-design="sapphire-glass"], .theme-preview-shell[data-design="sapphire-glass"]) {
  --bg-primary: #0b1f4d;
  --bg-secondary: #081536;
  --bg-gradient-mid: #11306f;
  --card-bg: #0e285c;
  --surface: rgba(14, 40, 92, 0.88);
  --surface-glass: rgba(14,40,92,0.56);
  --button-bg: #11306f;
  --button-hover: #11306f;
  --text-primary: #f0f9ff;
  --text-secondary: #b8cceb;
  --text-tertiary: #64748b;
  --accent: #38bdf8;
  --accent-light: rgba(56, 189, 248, 0.28);
  --accent-subtle: rgba(56, 189, 248, 0.12);
  --accent-border: rgba(56, 189, 248, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(56, 189, 248, 0.14);
  --icon-color: #38bdf8;
  --contact-icon-bg-start: #38bdf8;
  --contact-icon-bg-end: #2563eb;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #7dd3fc;
  --avatar-ring-end: #60a5fa;
  --avatar-ring-glow: rgba(56, 189, 248, 0.35);
  --avatar-border: #0b1f4d;
  --avatar-placeholder-start: #0e285c;
  --avatar-placeholder-end: #081536;
  --avatar-placeholder-text: #f0f9ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #081536;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(56, 189, 248, 0.15);
  --menu-bg: rgba(11, 31, 77, 0.98);
  --menu-border: rgba(56, 189, 248, 0.28);
  --menu-hover: rgba(56, 189, 248, 0.1);
  --modal-bg-start: #0e285c;
  --modal-bg-end: #0b1f4d;
  --modal-border: rgba(56, 189, 248, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(56, 189, 248, 0.55);
  --drop-target-ring: rgba(56, 189, 248, 0.65);
  --add-btn-border: rgba(56, 189, 248, 0.38);
  --add-btn-bg: rgba(56, 189, 248, 0.06);
  --add-btn-bg-hover: rgba(56, 189, 248, 0.12);
  --drag-handle-bg: rgba(56, 189, 248, 0.12);
  --move-btn-bg: rgba(56, 189, 248, 0.16);
  --move-btn-bg-hover: rgba(56, 189, 248, 0.28);
  --move-btn-border: rgba(8, 21, 54, 0.92);
  --apply-disabled-bg: rgba(56, 189, 248, 0.22);
  --apply-disabled-text: rgba(240, 249, 255, 0.55);
  --qr-image-bg: #f0f9ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #7dd3fc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Rose Quartz Glass ── */
:is(body[data-user-theme="rose-quartz-glass"], #card-shell[data-design="rose-quartz-glass"], .theme-preview-shell[data-design="rose-quartz-glass"]) {
  --bg-primary: #fff1f2;
  --bg-secondary: #ffe4e6;
  --bg-gradient-mid: #fff7f7;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.7);
  --button-bg: #ffe4e6;
  --button-hover: #ffe4e6;
  --text-primary: #301c24;
  --text-secondary: #795a64;
  --text-tertiary: #64748b;
  --accent: #fb7185;
  --accent-light: rgba(251, 113, 133, 0.18);
  --accent-subtle: rgba(251, 113, 133, 0.1);
  --accent-border: rgba(251, 113, 133, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(251, 113, 133, 0.12);
  --icon-color: #fb7185;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #e11d48;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fda4af;
  --avatar-ring-end: #fb7185;
  --avatar-ring-glow: rgba(251, 113, 133, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #ffe4e6;
  --avatar-placeholder-text: #301c24;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ffe4e6;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(251, 113, 133, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(251, 113, 133, 0.2);
  --menu-hover: rgba(251, 113, 133, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fff1f2;
  --modal-border: rgba(251, 113, 133, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(251, 113, 133, 0.45);
  --drop-target-ring: rgba(251, 113, 133, 0.55);
  --add-btn-border: rgba(251, 113, 133, 0.35);
  --add-btn-bg: rgba(251, 113, 133, 0.06);
  --add-btn-bg-hover: rgba(251, 113, 133, 0.12);
  --drag-handle-bg: rgba(251, 113, 133, 0.1);
  --move-btn-bg: rgba(251, 113, 133, 0.12);
  --move-btn-bg-hover: rgba(251, 113, 133, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(251, 113, 133, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fda4af;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Emerald Pane ── */
:is(body[data-user-theme="emerald-pane"], #card-shell[data-design="emerald-pane"], .theme-preview-shell[data-design="emerald-pane"]) {
  --bg-primary: #052e25;
  --bg-secondary: #073b30;
  --bg-gradient-mid: #0b5645;
  --card-bg: #0a3c32;
  --surface: rgba(10, 60, 50, 0.88);
  --surface-glass: rgba(10,60,50,0.56);
  --button-bg: #0b5645;
  --button-hover: #0b5645;
  --text-primary: #ecfdf5;
  --text-secondary: #a8d9c8;
  --text-tertiary: #64748b;
  --accent: #34d399;
  --accent-light: rgba(52, 211, 153, 0.28);
  --accent-subtle: rgba(52, 211, 153, 0.12);
  --accent-border: rgba(52, 211, 153, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(52, 211, 153, 0.14);
  --icon-color: #34d399;
  --contact-icon-bg-start: #34d399;
  --contact-icon-bg-end: #059669;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #86efac;
  --avatar-ring-end: #34d399;
  --avatar-ring-glow: rgba(52, 211, 153, 0.35);
  --avatar-border: #052e25;
  --avatar-placeholder-start: #0a3c32;
  --avatar-placeholder-end: #073b30;
  --avatar-placeholder-text: #ecfdf5;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #073b30;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(52, 211, 153, 0.15);
  --menu-bg: rgba(5, 46, 37, 0.98);
  --menu-border: rgba(52, 211, 153, 0.28);
  --menu-hover: rgba(52, 211, 153, 0.1);
  --modal-bg-start: #0a3c32;
  --modal-bg-end: #052e25;
  --modal-border: rgba(52, 211, 153, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(52, 211, 153, 0.55);
  --drop-target-ring: rgba(52, 211, 153, 0.65);
  --add-btn-border: rgba(52, 211, 153, 0.38);
  --add-btn-bg: rgba(52, 211, 153, 0.06);
  --add-btn-bg-hover: rgba(52, 211, 153, 0.12);
  --drag-handle-bg: rgba(52, 211, 153, 0.12);
  --move-btn-bg: rgba(52, 211, 153, 0.16);
  --move-btn-bg-hover: rgba(52, 211, 153, 0.28);
  --move-btn-border: rgba(7, 59, 48, 0.92);
  --apply-disabled-bg: rgba(52, 211, 153, 0.22);
  --apply-disabled-text: rgba(236, 253, 245, 0.55);
  --qr-image-bg: #ecfdf5;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #86efac;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Champagne Glass ── */
:is(body[data-user-theme="champagne-glass"], #card-shell[data-design="champagne-glass"], .theme-preview-shell[data-design="champagne-glass"]) {
  --bg-primary: #fff7e6;
  --bg-secondary: #f3dfb5;
  --bg-gradient-mid: #fff0cf;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.68);
  --button-bg: #f3dfb5;
  --button-hover: #f3dfb5;
  --text-primary: #2b2418;
  --text-secondary: #736246;
  --text-tertiary: #64748b;
  --accent: #d6ad60;
  --accent-light: rgba(214, 173, 96, 0.18);
  --accent-subtle: rgba(214, 173, 96, 0.1);
  --accent-border: rgba(214, 173, 96, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(214, 173, 96, 0.12);
  --icon-color: #d6ad60;
  --contact-icon-bg-start: #d6ad60;
  --contact-icon-bg-end: #b9852d;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #efc879;
  --avatar-ring-end: #d6ad60;
  --avatar-ring-glow: rgba(214, 173, 96, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #f3dfb5;
  --avatar-placeholder-text: #2b2418;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f3dfb5;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(214, 173, 96, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(214, 173, 96, 0.2);
  --menu-hover: rgba(214, 173, 96, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fff7e6;
  --modal-border: rgba(214, 173, 96, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(214, 173, 96, 0.45);
  --drop-target-ring: rgba(214, 173, 96, 0.55);
  --add-btn-border: rgba(214, 173, 96, 0.35);
  --add-btn-bg: rgba(214, 173, 96, 0.06);
  --add-btn-bg-hover: rgba(214, 173, 96, 0.12);
  --drag-handle-bg: rgba(214, 173, 96, 0.1);
  --move-btn-bg: rgba(214, 173, 96, 0.12);
  --move-btn-bg-hover: rgba(214, 173, 96, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(214, 173, 96, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #efc879;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Violet Glass ── */
:is(body[data-user-theme="violet-glass"], #card-shell[data-design="violet-glass"], .theme-preview-shell[data-design="violet-glass"]) {
  --bg-primary: #2e1065;
  --bg-secondary: #1e0b43;
  --bg-gradient-mid: #3b1580;
  --card-bg: #32116f;
  --surface: rgba(50, 17, 111, 0.88);
  --surface-glass: rgba(50,17,111,0.56);
  --button-bg: #3b1580;
  --button-hover: #3b1580;
  --text-primary: #faf5ff;
  --text-secondary: #d4bee8;
  --text-tertiary: #64748b;
  --accent: #c084fc;
  --accent-light: rgba(192, 132, 252, 0.28);
  --accent-subtle: rgba(192, 132, 252, 0.12);
  --accent-border: rgba(192, 132, 252, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(192, 132, 252, 0.14);
  --icon-color: #c084fc;
  --contact-icon-bg-start: #c084fc;
  --contact-icon-bg-end: #8b5cf6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #d8b4fe;
  --avatar-ring-end: #c084fc;
  --avatar-ring-glow: rgba(192, 132, 252, 0.35);
  --avatar-border: #2e1065;
  --avatar-placeholder-start: #32116f;
  --avatar-placeholder-end: #1e0b43;
  --avatar-placeholder-text: #faf5ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1e0b43;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(192, 132, 252, 0.15);
  --menu-bg: rgba(46, 16, 101, 0.98);
  --menu-border: rgba(192, 132, 252, 0.28);
  --menu-hover: rgba(192, 132, 252, 0.1);
  --modal-bg-start: #32116f;
  --modal-bg-end: #2e1065;
  --modal-border: rgba(192, 132, 252, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(192, 132, 252, 0.55);
  --drop-target-ring: rgba(192, 132, 252, 0.65);
  --add-btn-border: rgba(192, 132, 252, 0.38);
  --add-btn-bg: rgba(192, 132, 252, 0.06);
  --add-btn-bg-hover: rgba(192, 132, 252, 0.12);
  --drag-handle-bg: rgba(192, 132, 252, 0.12);
  --move-btn-bg: rgba(192, 132, 252, 0.16);
  --move-btn-bg-hover: rgba(192, 132, 252, 0.28);
  --move-btn-border: rgba(30, 11, 67, 0.92);
  --apply-disabled-bg: rgba(192, 132, 252, 0.22);
  --apply-disabled-text: rgba(250, 245, 255, 0.55);
  --qr-image-bg: #faf5ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #d8b4fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Copper Glass ── */
:is(body[data-user-theme="copper-glass"], #card-shell[data-design="copper-glass"], .theme-preview-shell[data-design="copper-glass"]) {
  --bg-primary: #2b170f;
  --bg-secondary: #3b2115;
  --bg-gradient-mid: #56301d;
  --card-bg: #3a2116;
  --surface: rgba(58, 33, 22, 0.88);
  --surface-glass: rgba(58,33,22,0.56);
  --button-bg: #56301d;
  --button-hover: #56301d;
  --text-primary: #fff7ed;
  --text-secondary: #dbc0ad;
  --text-tertiary: #64748b;
  --accent: #fb923c;
  --accent-light: rgba(251, 146, 60, 0.28);
  --accent-subtle: rgba(251, 146, 60, 0.12);
  --accent-border: rgba(251, 146, 60, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 146, 60, 0.14);
  --icon-color: #fb923c;
  --contact-icon-bg-start: #fb923c;
  --contact-icon-bg-end: #c2410c;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fdba74;
  --avatar-ring-end: #fb923c;
  --avatar-ring-glow: rgba(251, 146, 60, 0.35);
  --avatar-border: #2b170f;
  --avatar-placeholder-start: #3a2116;
  --avatar-placeholder-end: #3b2115;
  --avatar-placeholder-text: #fff7ed;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #3b2115;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 146, 60, 0.15);
  --menu-bg: rgba(43, 23, 15, 0.98);
  --menu-border: rgba(251, 146, 60, 0.28);
  --menu-hover: rgba(251, 146, 60, 0.1);
  --modal-bg-start: #3a2116;
  --modal-bg-end: #2b170f;
  --modal-border: rgba(251, 146, 60, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 146, 60, 0.55);
  --drop-target-ring: rgba(251, 146, 60, 0.65);
  --add-btn-border: rgba(251, 146, 60, 0.38);
  --add-btn-bg: rgba(251, 146, 60, 0.06);
  --add-btn-bg-hover: rgba(251, 146, 60, 0.12);
  --drag-handle-bg: rgba(251, 146, 60, 0.12);
  --move-btn-bg: rgba(251, 146, 60, 0.16);
  --move-btn-bg-hover: rgba(251, 146, 60, 0.28);
  --move-btn-border: rgba(59, 33, 21, 0.92);
  --apply-disabled-bg: rgba(251, 146, 60, 0.22);
  --apply-disabled-text: rgba(255, 247, 237, 0.55);
  --qr-image-bg: #fff7ed;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fdba74;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Frost Prism ── */
:is(body[data-user-theme="frost-prism"], #card-shell[data-design="frost-prism"], .theme-preview-shell[data-design="frost-prism"]) {
  --bg-primary: #f8fafc;
  --bg-secondary: #e0f2fe;
  --bg-gradient-mid: #fae8ff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.65);
  --button-bg: #e0f2fe;
  --button-hover: #e0f2fe;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #64748b;
  --accent: #0ea5e9;
  --accent-light: rgba(14, 165, 233, 0.18);
  --accent-subtle: rgba(14, 165, 233, 0.1);
  --accent-border: rgba(14, 165, 233, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(14, 165, 233, 0.12);
  --icon-color: #0ea5e9;
  --contact-icon-bg-start: #0ea5e9;
  --contact-icon-bg-end: #a855f7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #7dd3fc;
  --avatar-ring-end: #d8b4fe;
  --avatar-ring-glow: rgba(14, 165, 233, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #e0f2fe;
  --avatar-placeholder-text: #0f172a;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #e0f2fe;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(14, 165, 233, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(14, 165, 233, 0.2);
  --menu-hover: rgba(14, 165, 233, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f8fafc;
  --modal-border: rgba(14, 165, 233, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(14, 165, 233, 0.45);
  --drop-target-ring: rgba(14, 165, 233, 0.55);
  --add-btn-border: rgba(14, 165, 233, 0.35);
  --add-btn-bg: rgba(14, 165, 233, 0.06);
  --add-btn-bg-hover: rgba(14, 165, 233, 0.12);
  --drag-handle-bg: rgba(14, 165, 233, 0.1);
  --move-btn-bg: rgba(14, 165, 233, 0.12);
  --move-btn-bg-hover: rgba(14, 165, 233, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(14, 165, 233, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #7dd3fc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Midnight Glass ── */
:is(body[data-user-theme="midnight-glass"], #card-shell[data-design="midnight-glass"], .theme-preview-shell[data-design="midnight-glass"]) {
  --bg-primary: #0c0a14;
  --bg-secondary: #16121f;
  --bg-gradient-mid: #221830;
  --card-bg: #12101a;
  --surface: rgba(18, 16, 26, 0.88);
  --surface-glass: rgba(18,16,26,0.55);
  --button-bg: #221830;
  --button-hover: #221830;
  --text-primary: #faf5ff;
  --text-secondary: #c8bdd8;
  --text-tertiary: #64748b;
  --accent: #a78bfa;
  --accent-light: rgba(167, 139, 250, 0.28);
  --accent-subtle: rgba(167, 139, 250, 0.12);
  --accent-border: rgba(167, 139, 250, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(167, 139, 250, 0.14);
  --icon-color: #a78bfa;
  --contact-icon-bg-start: #a78bfa;
  --contact-icon-bg-end: #6366f1;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #818cf8;
  --avatar-ring-glow: rgba(167, 139, 250, 0.35);
  --avatar-border: #0c0a14;
  --avatar-placeholder-start: #12101a;
  --avatar-placeholder-end: #16121f;
  --avatar-placeholder-text: #faf5ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #16121f;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(167, 139, 250, 0.15);
  --menu-bg: rgba(12, 10, 20, 0.98);
  --menu-border: rgba(167, 139, 250, 0.28);
  --menu-hover: rgba(167, 139, 250, 0.1);
  --modal-bg-start: #12101a;
  --modal-bg-end: #0c0a14;
  --modal-border: rgba(167, 139, 250, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(167, 139, 250, 0.55);
  --drop-target-ring: rgba(167, 139, 250, 0.65);
  --add-btn-border: rgba(167, 139, 250, 0.38);
  --add-btn-bg: rgba(167, 139, 250, 0.06);
  --add-btn-bg-hover: rgba(167, 139, 250, 0.12);
  --drag-handle-bg: rgba(167, 139, 250, 0.12);
  --move-btn-bg: rgba(167, 139, 250, 0.16);
  --move-btn-bg-hover: rgba(167, 139, 250, 0.28);
  --move-btn-border: rgba(22, 18, 31, 0.92);
  --apply-disabled-bg: rgba(167, 139, 250, 0.22);
  --apply-disabled-text: rgba(250, 245, 255, 0.55);
  --qr-image-bg: #faf5ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Seoul Aura ── */
:is(body[data-user-theme="seoul-aura"], #card-shell[data-design="seoul-aura"], .theme-preview-shell[data-design="seoul-aura"]) {
  --bg-primary: #281044;
  --bg-secondary: #35145b;
  --bg-gradient-mid: #482077;
  --card-bg: #331654;
  --surface: rgba(51, 22, 84, 0.88);
  --surface-glass: rgba(51,22,84,0.84);
  --button-bg: #482077;
  --button-hover: #482077;
  --text-primary: #fbf7ff;
  --text-secondary: #d7bceb;
  --text-tertiary: #64748b;
  --accent: #c084fc;
  --accent-light: rgba(192, 132, 252, 0.28);
  --accent-subtle: rgba(192, 132, 252, 0.12);
  --accent-border: rgba(192, 132, 252, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(192, 132, 252, 0.14);
  --icon-color: #c084fc;
  --contact-icon-bg-start: #c084fc;
  --contact-icon-bg-end: #ec4899;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #d8b4fe;
  --avatar-ring-end: #f9a8d4;
  --avatar-ring-glow: rgba(192, 132, 252, 0.35);
  --avatar-border: #281044;
  --avatar-placeholder-start: #331654;
  --avatar-placeholder-end: #35145b;
  --avatar-placeholder-text: #fbf7ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #35145b;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(192, 132, 252, 0.15);
  --menu-bg: rgba(40, 16, 68, 0.98);
  --menu-border: rgba(192, 132, 252, 0.28);
  --menu-hover: rgba(192, 132, 252, 0.1);
  --modal-bg-start: #331654;
  --modal-bg-end: #281044;
  --modal-border: rgba(192, 132, 252, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(192, 132, 252, 0.55);
  --drop-target-ring: rgba(192, 132, 252, 0.65);
  --add-btn-border: rgba(192, 132, 252, 0.38);
  --add-btn-bg: rgba(192, 132, 252, 0.06);
  --add-btn-bg-hover: rgba(192, 132, 252, 0.12);
  --drag-handle-bg: rgba(192, 132, 252, 0.12);
  --move-btn-bg: rgba(192, 132, 252, 0.16);
  --move-btn-bg-hover: rgba(192, 132, 252, 0.28);
  --move-btn-border: rgba(53, 20, 91, 0.92);
  --apply-disabled-bg: rgba(192, 132, 252, 0.22);
  --apply-disabled-text: rgba(251, 247, 255, 0.55);
  --qr-image-bg: #fbf7ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #d8b4fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Purple Satellite ── */
:is(body[data-user-theme="purple-satellite"], #card-shell[data-design="purple-satellite"], .theme-preview-shell[data-design="purple-satellite"]) {
  --bg-primary: #0f102a;
  --bg-secondary: #19143f;
  --bg-gradient-mid: #251e59;
  --card-bg: #1a1739;
  --surface: rgba(26, 23, 57, 0.88);
  --surface-glass: rgba(26,23,57,0.84);
  --button-bg: #251e59;
  --button-hover: #251e59;
  --text-primary: #f8f7ff;
  --text-secondary: #c3b9e0;
  --text-tertiary: #64748b;
  --accent: #8b5cf6;
  --accent-light: rgba(139, 92, 246, 0.28);
  --accent-subtle: rgba(139, 92, 246, 0.12);
  --accent-border: rgba(139, 92, 246, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(139, 92, 246, 0.14);
  --icon-color: #8b5cf6;
  --contact-icon-bg-start: #8b5cf6;
  --contact-icon-bg-end: #6366f1;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #8b5cf6;
  --avatar-ring-glow: rgba(139, 92, 246, 0.35);
  --avatar-border: #0f102a;
  --avatar-placeholder-start: #1a1739;
  --avatar-placeholder-end: #19143f;
  --avatar-placeholder-text: #f8f7ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #19143f;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(139, 92, 246, 0.15);
  --menu-bg: rgba(15, 16, 42, 0.98);
  --menu-border: rgba(139, 92, 246, 0.28);
  --menu-hover: rgba(139, 92, 246, 0.1);
  --modal-bg-start: #1a1739;
  --modal-bg-end: #0f102a;
  --modal-border: rgba(139, 92, 246, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(139, 92, 246, 0.55);
  --drop-target-ring: rgba(139, 92, 246, 0.65);
  --add-btn-border: rgba(139, 92, 246, 0.38);
  --add-btn-bg: rgba(139, 92, 246, 0.06);
  --add-btn-bg-hover: rgba(139, 92, 246, 0.12);
  --drag-handle-bg: rgba(139, 92, 246, 0.12);
  --move-btn-bg: rgba(139, 92, 246, 0.16);
  --move-btn-bg-hover: rgba(139, 92, 246, 0.28);
  --move-btn-border: rgba(25, 20, 63, 0.92);
  --apply-disabled-bg: rgba(139, 92, 246, 0.22);
  --apply-disabled-text: rgba(248, 247, 255, 0.55);
  --qr-image-bg: #f8f7ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Mikrokosmos Night ── */
:is(body[data-user-theme="mikrokosmos-night"], #card-shell[data-design="mikrokosmos-night"], .theme-preview-shell[data-design="mikrokosmos-night"]) {
  --bg-primary: #05081f;
  --bg-secondary: #0b1033;
  --bg-gradient-mid: #151b4f;
  --card-bg: #0c1238;
  --surface: rgba(12, 18, 56, 0.88);
  --surface-glass: rgba(12,18,56,0.86);
  --button-bg: #151b4f;
  --button-hover: #151b4f;
  --text-primary: #f8f7ff;
  --text-secondary: #c9c1df;
  --text-tertiary: #64748b;
  --accent: #a78bfa;
  --accent-light: rgba(167, 139, 250, 0.28);
  --accent-subtle: rgba(167, 139, 250, 0.12);
  --accent-border: rgba(167, 139, 250, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(167, 139, 250, 0.14);
  --icon-color: #a78bfa;
  --contact-icon-bg-start: #a78bfa;
  --contact-icon-bg-end: #60a5fa;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #93c5fd;
  --avatar-ring-glow: rgba(167, 139, 250, 0.35);
  --avatar-border: #05081f;
  --avatar-placeholder-start: #0c1238;
  --avatar-placeholder-end: #0b1033;
  --avatar-placeholder-text: #f8f7ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0b1033;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(167, 139, 250, 0.15);
  --menu-bg: rgba(5, 8, 31, 0.98);
  --menu-border: rgba(167, 139, 250, 0.28);
  --menu-hover: rgba(167, 139, 250, 0.1);
  --modal-bg-start: #0c1238;
  --modal-bg-end: #05081f;
  --modal-border: rgba(167, 139, 250, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(167, 139, 250, 0.55);
  --drop-target-ring: rgba(167, 139, 250, 0.65);
  --add-btn-border: rgba(167, 139, 250, 0.38);
  --add-btn-bg: rgba(167, 139, 250, 0.06);
  --add-btn-bg-hover: rgba(167, 139, 250, 0.12);
  --drag-handle-bg: rgba(167, 139, 250, 0.12);
  --move-btn-bg: rgba(167, 139, 250, 0.16);
  --move-btn-bg-hover: rgba(167, 139, 250, 0.28);
  --move-btn-border: rgba(11, 16, 51, 0.92);
  --apply-disabled-bg: rgba(167, 139, 250, 0.22);
  --apply-disabled-text: rgba(248, 247, 255, 0.55);
  --qr-image-bg: #f8f7ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Idol Gold ── */
:is(body[data-user-theme="idol-gold"], #card-shell[data-design="idol-gold"], .theme-preview-shell[data-design="idol-gold"]) {
  --bg-primary: #3b0764;
  --bg-secondary: #280448;
  --bg-gradient-mid: #50108a;
  --card-bg: #3f0a6b;
  --surface: rgba(63, 10, 107, 0.88);
  --surface-glass: rgba(63,10,107,0.84);
  --button-bg: #50108a;
  --button-hover: #50108a;
  --text-primary: #fff7ed;
  --text-secondary: #dbc4e8;
  --text-tertiary: #64748b;
  --accent: #fbbf24;
  --accent-light: rgba(251, 191, 36, 0.28);
  --accent-subtle: rgba(251, 191, 36, 0.12);
  --accent-border: rgba(251, 191, 36, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 191, 36, 0.14);
  --icon-color: #fbbf24;
  --contact-icon-bg-start: #fbbf24;
  --contact-icon-bg-end: #a855f7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fde68a;
  --avatar-ring-end: #c084fc;
  --avatar-ring-glow: rgba(251, 191, 36, 0.35);
  --avatar-border: #3b0764;
  --avatar-placeholder-start: #3f0a6b;
  --avatar-placeholder-end: #280448;
  --avatar-placeholder-text: #fff7ed;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #280448;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 191, 36, 0.15);
  --menu-bg: rgba(59, 7, 100, 0.98);
  --menu-border: rgba(251, 191, 36, 0.28);
  --menu-hover: rgba(251, 191, 36, 0.1);
  --modal-bg-start: #3f0a6b;
  --modal-bg-end: #3b0764;
  --modal-border: rgba(251, 191, 36, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 191, 36, 0.55);
  --drop-target-ring: rgba(251, 191, 36, 0.65);
  --add-btn-border: rgba(251, 191, 36, 0.38);
  --add-btn-bg: rgba(251, 191, 36, 0.06);
  --add-btn-bg-hover: rgba(251, 191, 36, 0.12);
  --drag-handle-bg: rgba(251, 191, 36, 0.12);
  --move-btn-bg: rgba(251, 191, 36, 0.16);
  --move-btn-bg-hover: rgba(251, 191, 36, 0.28);
  --move-btn-border: rgba(40, 4, 72, 0.92);
  --apply-disabled-bg: rgba(251, 191, 36, 0.22);
  --apply-disabled-text: rgba(255, 247, 237, 0.55);
  --qr-image-bg: #fff7ed;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fde68a;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Army Bloom ── */
:is(body[data-user-theme="army-bloom"], #card-shell[data-design="army-bloom"], .theme-preview-shell[data-design="army-bloom"]) {
  --bg-primary: #f5f3ff;
  --bg-secondary: #fce7f3;
  --bg-gradient-mid: #f4eaff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #fce7f3;
  --button-hover: #fce7f3;
  --text-primary: #241832;
  --text-secondary: #6b5a78;
  --text-tertiary: #64748b;
  --accent: #a855f7;
  --accent-light: rgba(168, 85, 247, 0.18);
  --accent-subtle: rgba(168, 85, 247, 0.1);
  --accent-border: rgba(168, 85, 247, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(168, 85, 247, 0.12);
  --icon-color: #a855f7;
  --contact-icon-bg-start: #a855f7;
  --contact-icon-bg-end: #f472b6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #d8b4fe;
  --avatar-ring-end: #f9a8d4;
  --avatar-ring-glow: rgba(168, 85, 247, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #fce7f3;
  --avatar-placeholder-text: #241832;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #fce7f3;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(168, 85, 247, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(168, 85, 247, 0.2);
  --menu-hover: rgba(168, 85, 247, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f5f3ff;
  --modal-border: rgba(168, 85, 247, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(168, 85, 247, 0.45);
  --drop-target-ring: rgba(168, 85, 247, 0.55);
  --add-btn-border: rgba(168, 85, 247, 0.35);
  --add-btn-bg: rgba(168, 85, 247, 0.06);
  --add-btn-bg-hover: rgba(168, 85, 247, 0.12);
  --drag-handle-bg: rgba(168, 85, 247, 0.1);
  --move-btn-bg: rgba(168, 85, 247, 0.12);
  --move-btn-bg-hover: rgba(168, 85, 247, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(168, 85, 247, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #d8b4fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Moonchild Lilac ── */
:is(body[data-user-theme="moonchild-lilac"], #card-shell[data-design="moonchild-lilac"], .theme-preview-shell[data-design="moonchild-lilac"]) {
  --bg-primary: #1e1b4b;
  --bg-secondary: #15133a;
  --bg-gradient-mid: #2d2a69;
  --card-bg: #242058;
  --surface: rgba(36, 32, 88, 0.88);
  --surface-glass: rgba(36,32,88,0.84);
  --button-bg: #2d2a69;
  --button-hover: #2d2a69;
  --text-primary: #fbfaff;
  --text-secondary: #cdc7e7;
  --text-tertiary: #64748b;
  --accent: #c4b5fd;
  --accent-light: rgba(196, 181, 253, 0.28);
  --accent-subtle: rgba(196, 181, 253, 0.12);
  --accent-border: rgba(196, 181, 253, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(196, 181, 253, 0.14);
  --icon-color: #c4b5fd;
  --contact-icon-bg-start: #c4b5fd;
  --contact-icon-bg-end: #818cf8;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #ddd6fe;
  --avatar-ring-end: #c4b5fd;
  --avatar-ring-glow: rgba(196, 181, 253, 0.35);
  --avatar-border: #1e1b4b;
  --avatar-placeholder-start: #242058;
  --avatar-placeholder-end: #15133a;
  --avatar-placeholder-text: #fbfaff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #15133a;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(196, 181, 253, 0.15);
  --menu-bg: rgba(30, 27, 75, 0.98);
  --menu-border: rgba(196, 181, 253, 0.28);
  --menu-hover: rgba(196, 181, 253, 0.1);
  --modal-bg-start: #242058;
  --modal-bg-end: #1e1b4b;
  --modal-border: rgba(196, 181, 253, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(196, 181, 253, 0.55);
  --drop-target-ring: rgba(196, 181, 253, 0.65);
  --add-btn-border: rgba(196, 181, 253, 0.38);
  --add-btn-bg: rgba(196, 181, 253, 0.06);
  --add-btn-bg-hover: rgba(196, 181, 253, 0.12);
  --drag-handle-bg: rgba(196, 181, 253, 0.12);
  --move-btn-bg: rgba(196, 181, 253, 0.16);
  --move-btn-bg-hover: rgba(196, 181, 253, 0.28);
  --move-btn-border: rgba(21, 19, 58, 0.92);
  --apply-disabled-bg: rgba(196, 181, 253, 0.22);
  --apply-disabled-text: rgba(251, 250, 255, 0.55);
  --qr-image-bg: #fbfaff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #ddd6fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Dream Glow ── */
:is(body[data-user-theme="dream-glow"], #card-shell[data-design="dream-glow"], .theme-preview-shell[data-design="dream-glow"]) {
  --bg-primary: #24104f;
  --bg-secondary: #33176d;
  --bg-gradient-mid: #452197;
  --card-bg: #30165f;
  --surface: rgba(48, 22, 95, 0.88);
  --surface-glass: rgba(48,22,95,0.84);
  --button-bg: #452197;
  --button-hover: #452197;
  --text-primary: #f5fdff;
  --text-secondary: #c5c6e8;
  --text-tertiary: #64748b;
  --accent: #67e8f9;
  --accent-light: rgba(103, 232, 249, 0.28);
  --accent-subtle: rgba(103, 232, 249, 0.12);
  --accent-border: rgba(103, 232, 249, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(103, 232, 249, 0.14);
  --icon-color: #67e8f9;
  --contact-icon-bg-start: #67e8f9;
  --contact-icon-bg-end: #a78bfa;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #a5f3fc;
  --avatar-ring-end: #c4b5fd;
  --avatar-ring-glow: rgba(103, 232, 249, 0.35);
  --avatar-border: #24104f;
  --avatar-placeholder-start: #30165f;
  --avatar-placeholder-end: #33176d;
  --avatar-placeholder-text: #f5fdff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #33176d;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(103, 232, 249, 0.15);
  --menu-bg: rgba(36, 16, 79, 0.98);
  --menu-border: rgba(103, 232, 249, 0.28);
  --menu-hover: rgba(103, 232, 249, 0.1);
  --modal-bg-start: #30165f;
  --modal-bg-end: #24104f;
  --modal-border: rgba(103, 232, 249, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(103, 232, 249, 0.55);
  --drop-target-ring: rgba(103, 232, 249, 0.65);
  --add-btn-border: rgba(103, 232, 249, 0.38);
  --add-btn-bg: rgba(103, 232, 249, 0.06);
  --add-btn-bg-hover: rgba(103, 232, 249, 0.12);
  --drag-handle-bg: rgba(103, 232, 249, 0.12);
  --move-btn-bg: rgba(103, 232, 249, 0.16);
  --move-btn-bg-hover: rgba(103, 232, 249, 0.28);
  --move-btn-border: rgba(51, 23, 109, 0.92);
  --apply-disabled-bg: rgba(103, 232, 249, 0.22);
  --apply-disabled-text: rgba(245, 253, 255, 0.55);
  --qr-image-bg: #f5fdff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #a5f3fc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Serendipity Rose ── */
:is(body[data-user-theme="serendipity-rose"], #card-shell[data-design="serendipity-rose"], .theme-preview-shell[data-design="serendipity-rose"]) {
  --bg-primary: #581c87;
  --bg-secondary: #3b0d5f;
  --bg-gradient-mid: #6b21a8;
  --card-bg: #4c1675;
  --surface: rgba(76, 22, 117, 0.88);
  --surface-glass: rgba(76,22,117,0.84);
  --button-bg: #6b21a8;
  --button-hover: #6b21a8;
  --text-primary: #fff7fb;
  --text-secondary: #e3bfd6;
  --text-tertiary: #64748b;
  --accent: #fb7185;
  --accent-light: rgba(251, 113, 133, 0.28);
  --accent-subtle: rgba(251, 113, 133, 0.12);
  --accent-border: rgba(251, 113, 133, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 113, 133, 0.14);
  --icon-color: #fb7185;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #a855f7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fda4af;
  --avatar-ring-end: #c084fc;
  --avatar-ring-glow: rgba(251, 113, 133, 0.35);
  --avatar-border: #581c87;
  --avatar-placeholder-start: #4c1675;
  --avatar-placeholder-end: #3b0d5f;
  --avatar-placeholder-text: #fff7fb;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #3b0d5f;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 113, 133, 0.15);
  --menu-bg: rgba(88, 28, 135, 0.98);
  --menu-border: rgba(251, 113, 133, 0.28);
  --menu-hover: rgba(251, 113, 133, 0.1);
  --modal-bg-start: #4c1675;
  --modal-bg-end: #581c87;
  --modal-border: rgba(251, 113, 133, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 113, 133, 0.55);
  --drop-target-ring: rgba(251, 113, 133, 0.65);
  --add-btn-border: rgba(251, 113, 133, 0.38);
  --add-btn-bg: rgba(251, 113, 133, 0.06);
  --add-btn-bg-hover: rgba(251, 113, 133, 0.12);
  --drag-handle-bg: rgba(251, 113, 133, 0.12);
  --move-btn-bg: rgba(251, 113, 133, 0.16);
  --move-btn-bg-hover: rgba(251, 113, 133, 0.28);
  --move-btn-border: rgba(59, 13, 95, 0.92);
  --apply-disabled-bg: rgba(251, 113, 133, 0.22);
  --apply-disabled-text: rgba(255, 247, 251, 0.55);
  --qr-image-bg: #fff7fb;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fda4af;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Magic Shop ── */
:is(body[data-user-theme="magic-shop"], #card-shell[data-design="magic-shop"], .theme-preview-shell[data-design="magic-shop"]) {
  --bg-primary: #4c1d95;
  --bg-secondary: #35136d;
  --bg-gradient-mid: #5b25ad;
  --card-bg: #431987;
  --surface: rgba(67, 25, 135, 0.88);
  --surface-glass: rgba(67,25,135,0.84);
  --button-bg: #5b25ad;
  --button-hover: #5b25ad;
  --text-primary: #fff7ed;
  --text-secondary: #dfc3df;
  --text-tertiary: #64748b;
  --accent: #fdba74;
  --accent-light: rgba(253, 186, 116, 0.28);
  --accent-subtle: rgba(253, 186, 116, 0.12);
  --accent-border: rgba(253, 186, 116, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(253, 186, 116, 0.14);
  --icon-color: #fdba74;
  --contact-icon-bg-start: #fdba74;
  --contact-icon-bg-end: #a78bfa;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fed7aa;
  --avatar-ring-end: #c4b5fd;
  --avatar-ring-glow: rgba(253, 186, 116, 0.35);
  --avatar-border: #4c1d95;
  --avatar-placeholder-start: #431987;
  --avatar-placeholder-end: #35136d;
  --avatar-placeholder-text: #fff7ed;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #35136d;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(253, 186, 116, 0.15);
  --menu-bg: rgba(76, 29, 149, 0.98);
  --menu-border: rgba(253, 186, 116, 0.28);
  --menu-hover: rgba(253, 186, 116, 0.1);
  --modal-bg-start: #431987;
  --modal-bg-end: #4c1d95;
  --modal-border: rgba(253, 186, 116, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(253, 186, 116, 0.55);
  --drop-target-ring: rgba(253, 186, 116, 0.65);
  --add-btn-border: rgba(253, 186, 116, 0.38);
  --add-btn-bg: rgba(253, 186, 116, 0.06);
  --add-btn-bg-hover: rgba(253, 186, 116, 0.12);
  --drag-handle-bg: rgba(253, 186, 116, 0.12);
  --move-btn-bg: rgba(253, 186, 116, 0.16);
  --move-btn-bg-hover: rgba(253, 186, 116, 0.28);
  --move-btn-border: rgba(53, 19, 109, 0.92);
  --apply-disabled-bg: rgba(253, 186, 116, 0.22);
  --apply-disabled-text: rgba(255, 247, 237, 0.55);
  --qr-image-bg: #fff7ed;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fed7aa;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Cloud Nine ── */
:is(body[data-user-theme="cloud-nine"], #card-shell[data-design="cloud-nine"], .theme-preview-shell[data-design="cloud-nine"]) {
  --bg-primary: #fdf4ff;
  --bg-secondary: #ede9fe;
  --bg-gradient-mid: #f5f3ff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #ede9fe;
  --button-hover: #ede9fe;
  --text-primary: #2e1065;
  --text-secondary: #6b5b7a;
  --text-tertiary: #64748b;
  --accent: #8b5cf6;
  --accent-light: rgba(139, 92, 246, 0.18);
  --accent-subtle: rgba(139, 92, 246, 0.1);
  --accent-border: rgba(139, 92, 246, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(139, 92, 246, 0.12);
  --icon-color: #8b5cf6;
  --contact-icon-bg-start: #8b5cf6;
  --contact-icon-bg-end: #ec4899;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #f9a8d4;
  --avatar-ring-glow: rgba(139, 92, 246, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #ede9fe;
  --avatar-placeholder-text: #2e1065;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ede9fe;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(139, 92, 246, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(139, 92, 246, 0.2);
  --menu-hover: rgba(139, 92, 246, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fdf4ff;
  --modal-border: rgba(139, 92, 246, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(139, 92, 246, 0.45);
  --drop-target-ring: rgba(139, 92, 246, 0.55);
  --add-btn-border: rgba(139, 92, 246, 0.35);
  --add-btn-bg: rgba(139, 92, 246, 0.06);
  --add-btn-bg-hover: rgba(139, 92, 246, 0.12);
  --drag-handle-bg: rgba(139, 92, 246, 0.1);
  --move-btn-bg: rgba(139, 92, 246, 0.12);
  --move-btn-bg-hover: rgba(139, 92, 246, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(139, 92, 246, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Galaxy Heart ── */
:is(body[data-user-theme="galaxy-heart"], #card-shell[data-design="galaxy-heart"], .theme-preview-shell[data-design="galaxy-heart"]) {
  --bg-primary: #1e1b4b;
  --bg-secondary: #312e81;
  --bg-gradient-mid: #4c1d95;
  --card-bg: #2a2560;
  --surface: rgba(42, 37, 96, 0.88);
  --surface-glass: rgba(42,37,96,0.84);
  --button-bg: #4c1d95;
  --button-hover: #4c1d95;
  --text-primary: #fdf2f8;
  --text-secondary: #d8c4e8;
  --text-tertiary: #64748b;
  --accent: #f472b6;
  --accent-light: rgba(244, 114, 182, 0.28);
  --accent-subtle: rgba(244, 114, 182, 0.12);
  --accent-border: rgba(244, 114, 182, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(244, 114, 182, 0.14);
  --icon-color: #f472b6;
  --contact-icon-bg-start: #f472b6;
  --contact-icon-bg-end: #a855f7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f9a8d4;
  --avatar-ring-end: #c084fc;
  --avatar-ring-glow: rgba(244, 114, 182, 0.35);
  --avatar-border: #1e1b4b;
  --avatar-placeholder-start: #2a2560;
  --avatar-placeholder-end: #312e81;
  --avatar-placeholder-text: #fdf2f8;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #312e81;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(244, 114, 182, 0.15);
  --menu-bg: rgba(30, 27, 75, 0.98);
  --menu-border: rgba(244, 114, 182, 0.28);
  --menu-hover: rgba(244, 114, 182, 0.1);
  --modal-bg-start: #2a2560;
  --modal-bg-end: #1e1b4b;
  --modal-border: rgba(244, 114, 182, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(244, 114, 182, 0.55);
  --drop-target-ring: rgba(244, 114, 182, 0.65);
  --add-btn-border: rgba(244, 114, 182, 0.38);
  --add-btn-bg: rgba(244, 114, 182, 0.06);
  --add-btn-bg-hover: rgba(244, 114, 182, 0.12);
  --drag-handle-bg: rgba(244, 114, 182, 0.12);
  --move-btn-bg: rgba(244, 114, 182, 0.16);
  --move-btn-bg-hover: rgba(244, 114, 182, 0.28);
  --move-btn-border: rgba(49, 46, 129, 0.92);
  --apply-disabled-bg: rgba(244, 114, 182, 0.22);
  --apply-disabled-text: rgba(253, 242, 248, 0.55);
  --qr-image-bg: #fdf2f8;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f9a8d4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Pink Venom Noir ── */
:is(body[data-user-theme="pink-venom-noir"], #card-shell[data-design="pink-venom-noir"], .theme-preview-shell[data-design="pink-venom-noir"]) {
  --bg-primary: #08080c;
  --bg-secondary: #121218;
  --bg-gradient-mid: #1c1c26;
  --card-bg: #0f0f14;
  --surface: rgba(15, 15, 20, 0.88);
  --surface-glass: rgba(15, 15, 20, 0.88);
  --button-bg: #1c1c26;
  --button-hover: #262632;
  --text-primary: #fafafa;
  --text-secondary: #b8adb3;
  --text-tertiary: #64748b;
  --accent: #e8178a;
  --accent-light: rgba(232, 23, 138, 0.28);
  --accent-subtle: rgba(232, 23, 138, 0.12);
  --accent-border: rgba(232, 23, 138, 0.42);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(232, 23, 138, 0.14);
  --icon-color: #e8178a;
  --contact-icon-bg-start: #e8178a;
  --contact-icon-bg-end: #be185d;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #ff4da6;
  --avatar-ring-end: #e8178a;
  --avatar-ring-glow: rgba(232, 23, 138, 0.38);
  --avatar-border: #08080c;
  --avatar-placeholder-start: #0f0f14;
  --avatar-placeholder-end: #121218;
  --avatar-placeholder-text: #fafafa;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #121218;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(232, 23, 138, 0.15);
  --menu-bg: rgba(8, 8, 12, 0.98);
  --menu-border: rgba(232, 23, 138, 0.28);
  --menu-hover: rgba(232, 23, 138, 0.1);
  --modal-bg-start: #0f0f14;
  --modal-bg-end: #08080c;
  --modal-border: rgba(232, 23, 138, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(232, 23, 138, 0.55);
  --drop-target-ring: rgba(232, 23, 138, 0.65);
  --add-btn-border: rgba(232, 23, 138, 0.38);
  --add-btn-bg: rgba(232, 23, 138, 0.06);
  --add-btn-bg-hover: rgba(232, 23, 138, 0.12);
  --drag-handle-bg: rgba(232, 23, 138, 0.12);
  --move-btn-bg: rgba(232, 23, 138, 0.16);
  --move-btn-bg-hover: rgba(232, 23, 138, 0.28);
  --move-btn-border: rgba(18, 18, 24, 0.92);
  --apply-disabled-bg: rgba(232, 23, 138, 0.22);
  --apply-disabled-text: rgba(250, 250, 250, 0.55);
  --qr-image-bg: #fafafa;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #ff4da6;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Rose Matte Runway ── */
:is(body[data-user-theme="rose-matte-runway"], #card-shell[data-design="rose-matte-runway"], .theme-preview-shell[data-design="rose-matte-runway"]) {
  --bg-primary: #faf7f8;
  --bg-secondary: #f5eef1;
  --bg-gradient-mid: #fceef3;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255, 255, 255, 0.94);
  --button-bg: #f5eef1;
  --button-hover: #eddfe6;
  --text-primary: #111111;
  --text-secondary: #5c5258;
  --text-tertiary: #64748b;
  --accent: #d4147a;
  --accent-light: rgba(212, 20, 122, 0.18);
  --accent-subtle: rgba(212, 20, 122, 0.1);
  --accent-border: rgba(212, 20, 122, 0.32);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(212, 20, 122, 0.12);
  --icon-color: #d4147a;
  --contact-icon-bg-start: #111111;
  --contact-icon-bg-end: #d4147a;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f472b6;
  --avatar-ring-end: #111111;
  --avatar-ring-glow: rgba(212, 20, 122, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #f5eef1;
  --avatar-placeholder-text: #111111;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f5eef1;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 12px 32px rgba(17, 17, 17, 0.08), 0 0 0 1px rgba(212, 20, 122, 0.12);
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(212, 20, 122, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(212, 20, 122, 0.2);
  --menu-hover: rgba(212, 20, 122, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #faf7f8;
  --modal-border: rgba(212, 20, 122, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(212, 20, 122, 0.45);
  --drop-target-ring: rgba(212, 20, 122, 0.55);
  --add-btn-border: rgba(212, 20, 122, 0.35);
  --add-btn-bg: rgba(212, 20, 122, 0.06);
  --add-btn-bg-hover: rgba(212, 20, 122, 0.12);
  --drag-handle-bg: rgba(212, 20, 122, 0.1);
  --move-btn-bg: rgba(212, 20, 122, 0.12);
  --move-btn-bg-hover: rgba(212, 20, 122, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(212, 20, 122, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f472b6;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Chrome Glam Stage ── */
:is(body[data-user-theme="chrome-glam-stage"], #card-shell[data-design="chrome-glam-stage"], .theme-preview-shell[data-design="chrome-glam-stage"]) {
  --bg-primary: #0c0c10;
  --bg-secondary: #16161c;
  --bg-gradient-mid: #22222c;
  --card-bg: #121218;
  --surface: rgba(18, 18, 24, 0.88);
  --surface-glass: rgba(18, 18, 24, 0.9);
  --button-bg: #22222c;
  --button-hover: #22222c;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #64748b;
  --accent: #c0c4cc;
  --accent-light: rgba(192, 196, 204, 0.28);
  --accent-subtle: rgba(192, 196, 204, 0.12);
  --accent-border: rgba(192, 196, 204, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(192, 196, 204, 0.14);
  --icon-color: #c0c4cc;
  --contact-icon-bg-start: #e4e4e7;
  --contact-icon-bg-end: #ff3d9a;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fafafa;
  --avatar-ring-end: #ff3d9a;
  --avatar-ring-glow: rgba(255, 61, 154, 0.32);
  --avatar-border: #0c0c10;
  --avatar-placeholder-start: #121218;
  --avatar-placeholder-end: #16161c;
  --avatar-placeholder-text: #f4f4f5;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #16161c;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(192, 196, 204, 0.15);
  --menu-bg: rgba(12, 12, 16, 0.98);
  --menu-border: rgba(192, 196, 204, 0.28);
  --menu-hover: rgba(192, 196, 204, 0.1);
  --modal-bg-start: #121218;
  --modal-bg-end: #0c0c10;
  --modal-border: rgba(192, 196, 204, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(192, 196, 204, 0.55);
  --drop-target-ring: rgba(192, 196, 204, 0.65);
  --add-btn-border: rgba(192, 196, 204, 0.38);
  --add-btn-bg: rgba(192, 196, 204, 0.06);
  --add-btn-bg-hover: rgba(192, 196, 204, 0.12);
  --drag-handle-bg: rgba(192, 196, 204, 0.12);
  --move-btn-bg: rgba(192, 196, 204, 0.16);
  --move-btn-bg-hover: rgba(192, 196, 204, 0.28);
  --move-btn-border: rgba(22, 22, 28, 0.92);
  --apply-disabled-bg: rgba(192, 196, 204, 0.22);
  --apply-disabled-text: rgba(244, 244, 245, 0.55);
  --qr-image-bg: #f4f4f5;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fafafa;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Rose Gold VIP ── */
:is(body[data-user-theme="rose-gold-vip"], #card-shell[data-design="rose-gold-vip"], .theme-preview-shell[data-design="rose-gold-vip"]) {
  --bg-primary: #1a1416;
  --bg-secondary: #241c20;
  --bg-gradient-mid: #2f252a;
  --card-bg: #20181c;
  --surface: rgba(32, 24, 28, 0.88);
  --surface-glass: rgba(32, 24, 28, 0.88);
  --button-bg: #2f252a;
  --button-hover: #2f252a;
  --text-primary: #fdf8f6;
  --text-secondary: #c9b0a8;
  --text-tertiary: #64748b;
  --accent: #e8b4a0;
  --accent-light: rgba(232, 180, 160, 0.28);
  --accent-subtle: rgba(232, 180, 160, 0.12);
  --accent-border: rgba(232, 180, 160, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(232, 180, 160, 0.14);
  --icon-color: #e8b4a0;
  --contact-icon-bg-start: #e8b4a0;
  --contact-icon-bg-end: #c27866;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f5d0c5;
  --avatar-ring-end: #e8b4a0;
  --avatar-ring-glow: rgba(232, 180, 160, 0.35);
  --avatar-border: #1a1416;
  --avatar-placeholder-start: #20181c;
  --avatar-placeholder-end: #241c20;
  --avatar-placeholder-text: #fdf8f6;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #241c20;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(232, 180, 160, 0.15);
  --menu-bg: rgba(26, 20, 22, 0.98);
  --menu-border: rgba(232, 180, 160, 0.28);
  --menu-hover: rgba(232, 180, 160, 0.1);
  --modal-bg-start: #20181c;
  --modal-bg-end: #1a1416;
  --modal-border: rgba(232, 180, 160, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(232, 180, 160, 0.55);
  --drop-target-ring: rgba(232, 180, 160, 0.65);
  --add-btn-border: rgba(232, 180, 160, 0.38);
  --add-btn-bg: rgba(232, 180, 160, 0.06);
  --add-btn-bg-hover: rgba(232, 180, 160, 0.12);
  --drag-handle-bg: rgba(232, 180, 160, 0.12);
  --move-btn-bg: rgba(232, 180, 160, 0.16);
  --move-btn-bg-hover: rgba(232, 180, 160, 0.28);
  --move-btn-border: rgba(36, 28, 32, 0.92);
  --apply-disabled-bg: rgba(232, 180, 160, 0.22);
  --apply-disabled-text: rgba(253, 248, 246, 0.55);
  --qr-image-bg: #fdf8f6;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f5d0c5;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Cyber Pop Neon ── */
:is(body[data-user-theme="cyber-pop-neon"], #card-shell[data-design="cyber-pop-neon"], .theme-preview-shell[data-design="cyber-pop-neon"]) {
  --bg-primary: #0a0a14;
  --bg-secondary: #10101c;
  --bg-gradient-mid: #181828;
  --card-bg: #0e0e18;
  --surface: rgba(14, 14, 24, 0.88);
  --surface-glass: rgba(14, 14, 24, 0.88);
  --button-bg: #181828;
  --button-hover: #181828;
  --text-primary: #f0f0ff;
  --text-secondary: #9898b8;
  --text-tertiary: #64748b;
  --accent: #ff0080;
  --accent-light: rgba(255, 0, 128, 0.28);
  --accent-subtle: rgba(255, 0, 128, 0.12);
  --accent-border: rgba(255, 0, 128, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(255, 0, 128, 0.14);
  --icon-color: #ff0080;
  --contact-icon-bg-start: #ff0080;
  --contact-icon-bg-end: #7c3aed;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #ff4da6;
  --avatar-ring-end: #a855f7;
  --avatar-ring-glow: rgba(255, 0, 128, 0.35);
  --avatar-border: #0a0a14;
  --avatar-placeholder-start: #0e0e18;
  --avatar-placeholder-end: #10101c;
  --avatar-placeholder-text: #f0f0ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #10101c;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(255, 0, 128, 0.15);
  --menu-bg: rgba(10, 10, 20, 0.98);
  --menu-border: rgba(255, 0, 128, 0.28);
  --menu-hover: rgba(255, 0, 128, 0.1);
  --modal-bg-start: #0e0e18;
  --modal-bg-end: #0a0a14;
  --modal-border: rgba(255, 0, 128, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(255, 0, 128, 0.55);
  --drop-target-ring: rgba(255, 0, 128, 0.65);
  --add-btn-border: rgba(255, 0, 128, 0.38);
  --add-btn-bg: rgba(255, 0, 128, 0.06);
  --add-btn-bg-hover: rgba(255, 0, 128, 0.12);
  --drag-handle-bg: rgba(255, 0, 128, 0.12);
  --move-btn-bg: rgba(255, 0, 128, 0.16);
  --move-btn-bg-hover: rgba(255, 0, 128, 0.28);
  --move-btn-border: rgba(16, 16, 28, 0.92);
  --apply-disabled-bg: rgba(255, 0, 128, 0.22);
  --apply-disabled-text: rgba(240, 240, 255, 0.55);
  --qr-image-bg: #f0f0ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #ff4da6;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Backstage Glow ── */
:is(body[data-user-theme="backstage-glow"], #card-shell[data-design="backstage-glow"], .theme-preview-shell[data-design="backstage-glow"]) {
  --bg-primary: #0f0a0a;
  --bg-secondary: #1a1212;
  --bg-gradient-mid: #261818;
  --card-bg: #161010;
  --surface: rgba(22, 16, 16, 0.88);
  --surface-glass: rgba(22, 16, 16, 0.88);
  --button-bg: #261818;
  --button-hover: #261818;
  --text-primary: #fef3e2;
  --text-secondary: #c4a08a;
  --text-tertiary: #64748b;
  --accent: #fbbf24;
  --accent-light: rgba(251, 191, 36, 0.28);
  --accent-subtle: rgba(251, 191, 36, 0.12);
  --accent-border: rgba(251, 191, 36, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 191, 36, 0.14);
  --icon-color: #fbbf24;
  --contact-icon-bg-start: #fbbf24;
  --contact-icon-bg-end: #be185d;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fde68a;
  --avatar-ring-end: #f472b6;
  --avatar-ring-glow: rgba(251, 191, 36, 0.35);
  --avatar-border: #0f0a0a;
  --avatar-placeholder-start: #161010;
  --avatar-placeholder-end: #1a1212;
  --avatar-placeholder-text: #fef3e2;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1a1212;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 191, 36, 0.15);
  --menu-bg: rgba(15, 10, 10, 0.98);
  --menu-border: rgba(251, 191, 36, 0.28);
  --menu-hover: rgba(251, 191, 36, 0.1);
  --modal-bg-start: #161010;
  --modal-bg-end: #0f0a0a;
  --modal-border: rgba(251, 191, 36, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 191, 36, 0.55);
  --drop-target-ring: rgba(251, 191, 36, 0.65);
  --add-btn-border: rgba(251, 191, 36, 0.38);
  --add-btn-bg: rgba(251, 191, 36, 0.06);
  --add-btn-bg-hover: rgba(251, 191, 36, 0.12);
  --drag-handle-bg: rgba(251, 191, 36, 0.12);
  --move-btn-bg: rgba(251, 191, 36, 0.16);
  --move-btn-bg-hover: rgba(251, 191, 36, 0.28);
  --move-btn-border: rgba(26, 18, 18, 0.92);
  --apply-disabled-bg: rgba(251, 191, 36, 0.22);
  --apply-disabled-text: rgba(254, 243, 226, 0.55);
  --qr-image-bg: #fef3e2;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fde68a;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Couture Champagne ── */
:is(body[data-user-theme="couture-champagne"], #card-shell[data-design="couture-champagne"], .theme-preview-shell[data-design="couture-champagne"]) {
  --bg-primary: #fdf8f6;
  --bg-secondary: #fef3c7;
  --bg-gradient-mid: #fce7f3;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255, 255, 255, 0.95);
  --button-bg: #fef3c7;
  --button-hover: #fef3c7;
  --text-primary: #292524;
  --text-secondary: #78716c;
  --text-tertiary: #64748b;
  --accent: #9d174d;
  --accent-light: rgba(157, 23, 77, 0.18);
  --accent-subtle: rgba(157, 23, 77, 0.1);
  --accent-border: rgba(157, 23, 77, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(157, 23, 77, 0.12);
  --icon-color: #9d174d;
  --contact-icon-bg-start: #b45309;
  --contact-icon-bg-end: #be185d;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fde68a;
  --avatar-ring-end: #f472b6;
  --avatar-ring-glow: rgba(157, 23, 77, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #fef3c7;
  --avatar-placeholder-text: #292524;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #fef3c7;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(157, 23, 77, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(157, 23, 77, 0.2);
  --menu-hover: rgba(157, 23, 77, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fdf8f6;
  --modal-border: rgba(157, 23, 77, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(157, 23, 77, 0.45);
  --drop-target-ring: rgba(157, 23, 77, 0.55);
  --add-btn-border: rgba(157, 23, 77, 0.35);
  --add-btn-bg: rgba(157, 23, 77, 0.06);
  --add-btn-bg-hover: rgba(157, 23, 77, 0.12);
  --drag-handle-bg: rgba(157, 23, 77, 0.1);
  --move-btn-bg: rgba(157, 23, 77, 0.12);
  --move-btn-bg-hover: rgba(157, 23, 77, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(157, 23, 77, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fde68a;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Spotlight Noir ── */
:is(body[data-user-theme="spotlight-noir"], #card-shell[data-design="spotlight-noir"], .theme-preview-shell[data-design="spotlight-noir"]) {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-gradient-mid: #141414;
  --card-bg: #050505;
  --surface: rgba(5, 5, 5, 0.88);
  --surface-glass: rgba(5, 5, 5, 0.92);
  --button-bg: #141414;
  --button-hover: #141414;
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-tertiary: #64748b;
  --accent: #ffffff;
  --accent-light: rgba(255, 255, 255, 0.28);
  --accent-subtle: rgba(255, 255, 255, 0.12);
  --accent-border: rgba(255, 255, 255, 0.4);
  --accent-contrast: #000000;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(255, 255, 255, 0.14);
  --icon-color: #ffffff;
  --contact-icon-bg-start: #ffffff;
  --contact-icon-bg-end: #ff2d8b;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #ffffff;
  --avatar-ring-end: #ff2d8b;
  --avatar-ring-glow: rgba(255, 45, 139, 0.4);
  --avatar-border: #000000;
  --avatar-placeholder-start: #050505;
  --avatar-placeholder-end: #0a0a0a;
  --avatar-placeholder-text: #ffffff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #0a0a0a;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(255, 255, 255, 0.15);
  --menu-bg: rgba(0, 0, 0, 0.98);
  --menu-border: rgba(255, 255, 255, 0.28);
  --menu-hover: rgba(255, 255, 255, 0.1);
  --modal-bg-start: #050505;
  --modal-bg-end: #000000;
  --modal-border: rgba(255, 255, 255, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(255, 255, 255, 0.55);
  --drop-target-ring: rgba(255, 255, 255, 0.65);
  --add-btn-border: rgba(255, 255, 255, 0.38);
  --add-btn-bg: rgba(255, 255, 255, 0.06);
  --add-btn-bg-hover: rgba(255, 255, 255, 0.12);
  --drag-handle-bg: rgba(255, 255, 255, 0.12);
  --move-btn-bg: rgba(255, 255, 255, 0.16);
  --move-btn-bg-hover: rgba(255, 255, 255, 0.28);
  --move-btn-border: rgba(10, 10, 10, 0.92);
  --apply-disabled-bg: rgba(255, 255, 255, 0.22);
  --apply-disabled-text: rgba(255, 255, 255, 0.55);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #ffffff;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Satin Whisper ── */
:is(body[data-user-theme="satin-whisper"], #card-shell[data-design="satin-whisper"], .theme-preview-shell[data-design="satin-whisper"]) {
  --bg-primary: #fdf2f8;
  --bg-secondary: #f5f5f4;
  --bg-gradient-mid: #fce7f3;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255, 255, 255, 0.96);
  --button-bg: #f5f5f4;
  --button-hover: #f5f5f4;
  --text-primary: #44403c;
  --text-secondary: #78716c;
  --text-tertiary: #64748b;
  --accent: #db2777;
  --accent-light: rgba(219, 39, 119, 0.18);
  --accent-subtle: rgba(219, 39, 119, 0.1);
  --accent-border: rgba(219, 39, 119, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(219, 39, 119, 0.12);
  --icon-color: #db2777;
  --contact-icon-bg-start: #ec4899;
  --contact-icon-bg-end: #db2777;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fbcfe8;
  --avatar-ring-end: #f9a8d4;
  --avatar-ring-glow: rgba(219, 39, 119, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #f5f5f4;
  --avatar-placeholder-text: #44403c;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f5f5f4;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(219, 39, 119, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(219, 39, 119, 0.2);
  --menu-hover: rgba(219, 39, 119, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fdf2f8;
  --modal-border: rgba(219, 39, 119, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(219, 39, 119, 0.45);
  --drop-target-ring: rgba(219, 39, 119, 0.55);
  --add-btn-border: rgba(219, 39, 119, 0.35);
  --add-btn-bg: rgba(219, 39, 119, 0.06);
  --add-btn-bg-hover: rgba(219, 39, 119, 0.12);
  --drag-handle-bg: rgba(219, 39, 119, 0.1);
  --move-btn-bg: rgba(219, 39, 119, 0.12);
  --move-btn-bg-hover: rgba(219, 39, 119, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(219, 39, 119, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fbcfe8;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Editorial Strike ── */
:is(body[data-user-theme="editorial-strike"], #card-shell[data-design="editorial-strike"], .theme-preview-shell[data-design="editorial-strike"]) {
  --bg-primary: #111111;
  --bg-secondary: #1c1c1c;
  --bg-gradient-mid: #262626;
  --card-bg: #0a0a0a;
  --surface: rgba(10, 10, 10, 0.88);
  --surface-glass: rgba(10, 10, 10, 0.9);
  --button-bg: #262626;
  --button-hover: #262626;
  --text-primary: #fafafa;
  --text-secondary: #a3a3a3;
  --text-tertiary: #64748b;
  --accent: #ff1493;
  --accent-light: rgba(255, 20, 147, 0.28);
  --accent-subtle: rgba(255, 20, 147, 0.12);
  --accent-border: rgba(255, 20, 147, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(255, 20, 147, 0.14);
  --icon-color: #ff1493;
  --contact-icon-bg-start: #ffffff;
  --contact-icon-bg-end: #ff1493;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #ffffff;
  --avatar-ring-end: #ff1493;
  --avatar-ring-glow: rgba(255, 20, 147, 0.35);
  --avatar-border: #111111;
  --avatar-placeholder-start: #0a0a0a;
  --avatar-placeholder-end: #1c1c1c;
  --avatar-placeholder-text: #fafafa;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1c1c1c;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(255, 20, 147, 0.15);
  --menu-bg: rgba(17, 17, 17, 0.98);
  --menu-border: rgba(255, 20, 147, 0.28);
  --menu-hover: rgba(255, 20, 147, 0.1);
  --modal-bg-start: #0a0a0a;
  --modal-bg-end: #111111;
  --modal-border: rgba(255, 20, 147, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(255, 20, 147, 0.55);
  --drop-target-ring: rgba(255, 20, 147, 0.65);
  --add-btn-border: rgba(255, 20, 147, 0.38);
  --add-btn-bg: rgba(255, 20, 147, 0.06);
  --add-btn-bg-hover: rgba(255, 20, 147, 0.12);
  --drag-handle-bg: rgba(255, 20, 147, 0.12);
  --move-btn-bg: rgba(255, 20, 147, 0.16);
  --move-btn-bg-hover: rgba(255, 20, 147, 0.28);
  --move-btn-border: rgba(28, 28, 28, 0.92);
  --apply-disabled-bg: rgba(255, 20, 147, 0.22);
  --apply-disabled-text: rgba(250, 250, 250, 0.55);
  --qr-image-bg: #fafafa;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #ffffff;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Prism Glass Luxe ── */
:is(body[data-user-theme="prism-glass-luxe"], #card-shell[data-design="prism-glass-luxe"], .theme-preview-shell[data-design="prism-glass-luxe"]) {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-gradient-mid: #2a2040;
  --card-bg: #151c2e;
  --surface: rgba(21, 28, 46, 0.88);
  --surface-glass: rgba(21, 28, 46, 0.72);
  --button-bg: #2a2040;
  --button-hover: #2a2040;
  --text-primary: #f8fafc;
  --text-secondary: #b8c0d8;
  --text-tertiary: #64748b;
  --accent: #c084fc;
  --accent-light: rgba(192, 132, 252, 0.28);
  --accent-subtle: rgba(192, 132, 252, 0.12);
  --accent-border: rgba(192, 132, 252, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(192, 132, 252, 0.14);
  --icon-color: #c084fc;
  --contact-icon-bg-start: #c084fc;
  --contact-icon-bg-end: #f472b6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #ddd6fe;
  --avatar-ring-end: #f9a8d4;
  --avatar-ring-glow: rgba(192, 132, 252, 0.35);
  --avatar-border: #0f172a;
  --avatar-placeholder-start: #151c2e;
  --avatar-placeholder-end: #1e293b;
  --avatar-placeholder-text: #f8fafc;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #1e293b;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(192, 132, 252, 0.15);
  --menu-bg: rgba(15, 23, 42, 0.98);
  --menu-border: rgba(192, 132, 252, 0.28);
  --menu-hover: rgba(192, 132, 252, 0.1);
  --modal-bg-start: #151c2e;
  --modal-bg-end: #0f172a;
  --modal-border: rgba(192, 132, 252, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(192, 132, 252, 0.55);
  --drop-target-ring: rgba(192, 132, 252, 0.65);
  --add-btn-border: rgba(192, 132, 252, 0.38);
  --add-btn-bg: rgba(192, 132, 252, 0.06);
  --add-btn-bg-hover: rgba(192, 132, 252, 0.12);
  --drag-handle-bg: rgba(192, 132, 252, 0.12);
  --move-btn-bg: rgba(192, 132, 252, 0.16);
  --move-btn-bg-hover: rgba(192, 132, 252, 0.28);
  --move-btn-border: rgba(30, 41, 59, 0.92);
  --apply-disabled-bg: rgba(192, 132, 252, 0.22);
  --apply-disabled-text: rgba(248, 250, 252, 0.55);
  --qr-image-bg: #f8fafc;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #ddd6fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Plum Pulse Stage ── */
:is(body[data-user-theme="plum-pulse-stage"], #card-shell[data-design="plum-pulse-stage"], .theme-preview-shell[data-design="plum-pulse-stage"]) {
  --bg-primary: #1a0a24;
  --bg-secondary: #2d1040;
  --bg-gradient-mid: #3b1554;
  --card-bg: #240e32;
  --surface: rgba(36, 14, 50, 0.88);
  --surface-glass: rgba(36, 14, 50, 0.86);
  --button-bg: #3b1554;
  --button-hover: #3b1554;
  --text-primary: #fdf4ff;
  --text-secondary: #d8b4e8;
  --text-tertiary: #64748b;
  --accent: #e879f9;
  --accent-light: rgba(232, 121, 249, 0.28);
  --accent-subtle: rgba(232, 121, 249, 0.12);
  --accent-border: rgba(232, 121, 249, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(232, 121, 249, 0.14);
  --icon-color: #e879f9;
  --contact-icon-bg-start: #e879f9;
  --contact-icon-bg-end: #c026d3;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f0abfc;
  --avatar-ring-end: #e879f9;
  --avatar-ring-glow: rgba(232, 121, 249, 0.35);
  --avatar-border: #1a0a24;
  --avatar-placeholder-start: #240e32;
  --avatar-placeholder-end: #2d1040;
  --avatar-placeholder-text: #fdf4ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #2d1040;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(232, 121, 249, 0.15);
  --menu-bg: rgba(26, 10, 36, 0.98);
  --menu-border: rgba(232, 121, 249, 0.28);
  --menu-hover: rgba(232, 121, 249, 0.1);
  --modal-bg-start: #240e32;
  --modal-bg-end: #1a0a24;
  --modal-border: rgba(232, 121, 249, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(232, 121, 249, 0.55);
  --drop-target-ring: rgba(232, 121, 249, 0.65);
  --add-btn-border: rgba(232, 121, 249, 0.38);
  --add-btn-bg: rgba(232, 121, 249, 0.06);
  --add-btn-bg-hover: rgba(232, 121, 249, 0.12);
  --drag-handle-bg: rgba(232, 121, 249, 0.12);
  --move-btn-bg: rgba(232, 121, 249, 0.16);
  --move-btn-bg-hover: rgba(232, 121, 249, 0.28);
  --move-btn-border: rgba(45, 16, 64, 0.92);
  --apply-disabled-bg: rgba(232, 121, 249, 0.22);
  --apply-disabled-text: rgba(253, 244, 255, 0.55);
  --qr-image-bg: #fdf4ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f0abfc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Blush Petal ── */
:is(body[data-user-theme="blush-petal"], #card-shell[data-design="blush-petal"], .theme-preview-shell[data-design="blush-petal"]) {
  --bg-primary: #fff1f2;
  --bg-secondary: #ffe4e6;
  --bg-gradient-mid: #fecdd3;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #ffe4e6;
  --button-hover: #ffe4e6;
  --text-primary: #4c0519;
  --text-secondary: #9f1239;
  --text-tertiary: #64748b;
  --accent: #e11d48;
  --accent-light: rgba(225, 29, 72, 0.18);
  --accent-subtle: rgba(225, 29, 72, 0.1);
  --accent-border: rgba(225, 29, 72, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(225, 29, 72, 0.12);
  --icon-color: #e11d48;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #e11d48;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fda4af;
  --avatar-ring-end: #f43f5e;
  --avatar-ring-glow: rgba(225, 29, 72, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #ffe4e6;
  --avatar-placeholder-text: #4c0519;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ffe4e6;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(225, 29, 72, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(225, 29, 72, 0.2);
  --menu-hover: rgba(225, 29, 72, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fff1f2;
  --modal-border: rgba(225, 29, 72, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(225, 29, 72, 0.45);
  --drop-target-ring: rgba(225, 29, 72, 0.55);
  --add-btn-border: rgba(225, 29, 72, 0.35);
  --add-btn-bg: rgba(225, 29, 72, 0.06);
  --add-btn-bg-hover: rgba(225, 29, 72, 0.12);
  --drag-handle-bg: rgba(225, 29, 72, 0.1);
  --move-btn-bg: rgba(225, 29, 72, 0.12);
  --move-btn-bg-hover: rgba(225, 29, 72, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(225, 29, 72, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fda4af;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Rose Quartz ── */
:is(body[data-user-theme="rose-quartz"], #card-shell[data-design="rose-quartz"], .theme-preview-shell[data-design="rose-quartz"]) {
  --bg-primary: #fdf2f8;
  --bg-secondary: #fce7f3;
  --bg-gradient-mid: #fbcfe8;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #fce7f3;
  --button-hover: #fce7f3;
  --text-primary: #500724;
  --text-secondary: #9d174d;
  --text-tertiary: #64748b;
  --accent: #db2777;
  --accent-light: rgba(219, 39, 119, 0.18);
  --accent-subtle: rgba(219, 39, 119, 0.1);
  --accent-border: rgba(219, 39, 119, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(219, 39, 119, 0.12);
  --icon-color: #db2777;
  --contact-icon-bg-start: #f472b6;
  --contact-icon-bg-end: #db2777;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f9a8d4;
  --avatar-ring-end: #ec4899;
  --avatar-ring-glow: rgba(219, 39, 119, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #fce7f3;
  --avatar-placeholder-text: #500724;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #fce7f3;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(219, 39, 119, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(219, 39, 119, 0.2);
  --menu-hover: rgba(219, 39, 119, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fdf2f8;
  --modal-border: rgba(219, 39, 119, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(219, 39, 119, 0.45);
  --drop-target-ring: rgba(219, 39, 119, 0.55);
  --add-btn-border: rgba(219, 39, 119, 0.35);
  --add-btn-bg: rgba(219, 39, 119, 0.06);
  --add-btn-bg-hover: rgba(219, 39, 119, 0.12);
  --drag-handle-bg: rgba(219, 39, 119, 0.1);
  --move-btn-bg: rgba(219, 39, 119, 0.12);
  --move-btn-bg-hover: rgba(219, 39, 119, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(219, 39, 119, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f9a8d4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Cherry Blossom ── */
:is(body[data-user-theme="cherry-blossom"], #card-shell[data-design="cherry-blossom"], .theme-preview-shell[data-design="cherry-blossom"]) {
  --bg-primary: #fff7ed;
  --bg-secondary: #fff1f2;
  --bg-gradient-mid: #fecdd3;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.96);
  --button-bg: #fff1f2;
  --button-hover: #fff1f2;
  --text-primary: #881337;
  --text-secondary: #be123c;
  --text-tertiary: #64748b;
  --accent: #f43f5e;
  --accent-light: rgba(244, 63, 94, 0.18);
  --accent-subtle: rgba(244, 63, 94, 0.1);
  --accent-border: rgba(244, 63, 94, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(244, 63, 94, 0.12);
  --icon-color: #f43f5e;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #f43f5e;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fecdd3;
  --avatar-ring-end: #fda4af;
  --avatar-ring-glow: rgba(244, 63, 94, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #fff1f2;
  --avatar-placeholder-text: #881337;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #fff1f2;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(244, 63, 94, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(244, 63, 94, 0.2);
  --menu-hover: rgba(244, 63, 94, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fff7ed;
  --modal-border: rgba(244, 63, 94, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(244, 63, 94, 0.45);
  --drop-target-ring: rgba(244, 63, 94, 0.55);
  --add-btn-border: rgba(244, 63, 94, 0.35);
  --add-btn-bg: rgba(244, 63, 94, 0.06);
  --add-btn-bg-hover: rgba(244, 63, 94, 0.12);
  --drag-handle-bg: rgba(244, 63, 94, 0.1);
  --move-btn-bg: rgba(244, 63, 94, 0.12);
  --move-btn-bg-hover: rgba(244, 63, 94, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(244, 63, 94, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fecdd3;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Ballet Slipper ── */
:is(body[data-user-theme="ballet-slipper"], #card-shell[data-design="ballet-slipper"], .theme-preview-shell[data-design="ballet-slipper"]) {
  --bg-primary: #fdf4ff;
  --bg-secondary: #fae8ff;
  --bg-gradient-mid: #f5d0fe;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #fae8ff;
  --button-hover: #fae8ff;
  --text-primary: #701a75;
  --text-secondary: #a21caf;
  --text-tertiary: #64748b;
  --accent: #c026d3;
  --accent-light: rgba(192, 38, 211, 0.18);
  --accent-subtle: rgba(192, 38, 211, 0.1);
  --accent-border: rgba(192, 38, 211, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(192, 38, 211, 0.12);
  --icon-color: #c026d3;
  --contact-icon-bg-start: #e879f9;
  --contact-icon-bg-end: #c026d3;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f0abfc;
  --avatar-ring-end: #d946ef;
  --avatar-ring-glow: rgba(192, 38, 211, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #fae8ff;
  --avatar-placeholder-text: #701a75;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #fae8ff;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(192, 38, 211, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(192, 38, 211, 0.2);
  --menu-hover: rgba(192, 38, 211, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fdf4ff;
  --modal-border: rgba(192, 38, 211, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(192, 38, 211, 0.45);
  --drop-target-ring: rgba(192, 38, 211, 0.55);
  --add-btn-border: rgba(192, 38, 211, 0.35);
  --add-btn-bg: rgba(192, 38, 211, 0.06);
  --add-btn-bg-hover: rgba(192, 38, 211, 0.12);
  --drag-handle-bg: rgba(192, 38, 211, 0.1);
  --move-btn-bg: rgba(192, 38, 211, 0.12);
  --move-btn-bg-hover: rgba(192, 38, 211, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(192, 38, 211, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f0abfc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Flamingo Dream ── */
:is(body[data-user-theme="flamingo-dream"], #card-shell[data-design="flamingo-dream"], .theme-preview-shell[data-design="flamingo-dream"]) {
  --bg-primary: #4c0519;
  --bg-secondary: #881337;
  --bg-gradient-mid: #9f1239;
  --card-bg: #701a2e;
  --surface: rgba(112, 26, 46, 0.88);
  --surface-glass: rgba(112,26,46,0.86);
  --button-bg: #9f1239;
  --button-hover: #9f1239;
  --text-primary: #fff1f2;
  --text-secondary: #fecdd3;
  --text-tertiary: #64748b;
  --accent: #fb7185;
  --accent-light: rgba(251, 113, 133, 0.28);
  --accent-subtle: rgba(251, 113, 133, 0.12);
  --accent-border: rgba(251, 113, 133, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 113, 133, 0.14);
  --icon-color: #fb7185;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #f43f5e;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fda4af;
  --avatar-ring-end: #fb7185;
  --avatar-ring-glow: rgba(251, 113, 133, 0.35);
  --avatar-border: #4c0519;
  --avatar-placeholder-start: #701a2e;
  --avatar-placeholder-end: #881337;
  --avatar-placeholder-text: #fff1f2;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #881337;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 113, 133, 0.15);
  --menu-bg: rgba(76, 5, 25, 0.98);
  --menu-border: rgba(251, 113, 133, 0.28);
  --menu-hover: rgba(251, 113, 133, 0.1);
  --modal-bg-start: #701a2e;
  --modal-bg-end: #4c0519;
  --modal-border: rgba(251, 113, 133, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 113, 133, 0.55);
  --drop-target-ring: rgba(251, 113, 133, 0.65);
  --add-btn-border: rgba(251, 113, 133, 0.38);
  --add-btn-bg: rgba(251, 113, 133, 0.06);
  --add-btn-bg-hover: rgba(251, 113, 133, 0.12);
  --drag-handle-bg: rgba(251, 113, 133, 0.12);
  --move-btn-bg: rgba(251, 113, 133, 0.16);
  --move-btn-bg-hover: rgba(251, 113, 133, 0.28);
  --move-btn-border: rgba(136, 19, 55, 0.92);
  --apply-disabled-bg: rgba(251, 113, 133, 0.22);
  --apply-disabled-text: rgba(255, 241, 242, 0.55);
  --qr-image-bg: #fff1f2;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fda4af;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Peony Garden ── */
:is(body[data-user-theme="peony-garden"], #card-shell[data-design="peony-garden"], .theme-preview-shell[data-design="peony-garden"]) {
  --bg-primary: #fdf2f8;
  --bg-secondary: #ecfdf5;
  --bg-gradient-mid: #fce7f3;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #fce7f3;
  --button-hover: #fce7f3;
  --text-primary: #500724;
  --text-secondary: #6b7280;
  --text-tertiary: #64748b;
  --accent: #ec4899;
  --accent-light: rgba(236, 72, 153, 0.18);
  --accent-subtle: rgba(236, 72, 153, 0.1);
  --accent-border: rgba(236, 72, 153, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(236, 72, 153, 0.12);
  --icon-color: #ec4899;
  --contact-icon-bg-start: #f472b6;
  --contact-icon-bg-end: #db2777;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fbcfe8;
  --avatar-ring-end: #f9a8d4;
  --avatar-ring-glow: rgba(236, 72, 153, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #ecfdf5;
  --avatar-placeholder-text: #500724;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ecfdf5;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(236, 72, 153, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(236, 72, 153, 0.2);
  --menu-hover: rgba(236, 72, 153, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fdf2f8;
  --modal-border: rgba(236, 72, 153, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(236, 72, 153, 0.45);
  --drop-target-ring: rgba(236, 72, 153, 0.55);
  --add-btn-border: rgba(236, 72, 153, 0.35);
  --add-btn-bg: rgba(236, 72, 153, 0.06);
  --add-btn-bg-hover: rgba(236, 72, 153, 0.12);
  --drag-handle-bg: rgba(236, 72, 153, 0.1);
  --move-btn-bg: rgba(236, 72, 153, 0.12);
  --move-btn-bg-hover: rgba(236, 72, 153, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(236, 72, 153, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fbcfe8;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Cotton Candy ── */
:is(body[data-user-theme="cotton-candy"], #card-shell[data-design="cotton-candy"], .theme-preview-shell[data-design="cotton-candy"]) {
  --bg-primary: #fdf4ff;
  --bg-secondary: #ecfeff;
  --bg-gradient-mid: #fce7f3;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #fce7f3;
  --button-hover: #fce7f3;
  --text-primary: #831843;
  --text-secondary: #9d174d;
  --text-tertiary: #64748b;
  --accent: #ec4899;
  --accent-light: rgba(236, 72, 153, 0.18);
  --accent-subtle: rgba(236, 72, 153, 0.1);
  --accent-border: rgba(236, 72, 153, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(236, 72, 153, 0.12);
  --icon-color: #ec4899;
  --contact-icon-bg-start: #f472b6;
  --contact-icon-bg-end: #22d3ee;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f9a8d4;
  --avatar-ring-end: #67e8f9;
  --avatar-ring-glow: rgba(236, 72, 153, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #ecfeff;
  --avatar-placeholder-text: #831843;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ecfeff;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(236, 72, 153, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(236, 72, 153, 0.2);
  --menu-hover: rgba(236, 72, 153, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fdf4ff;
  --modal-border: rgba(236, 72, 153, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(236, 72, 153, 0.45);
  --drop-target-ring: rgba(236, 72, 153, 0.55);
  --add-btn-border: rgba(236, 72, 153, 0.35);
  --add-btn-bg: rgba(236, 72, 153, 0.06);
  --add-btn-bg-hover: rgba(236, 72, 153, 0.12);
  --drag-handle-bg: rgba(236, 72, 153, 0.1);
  --move-btn-bg: rgba(236, 72, 153, 0.12);
  --move-btn-bg-hover: rgba(236, 72, 153, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(236, 72, 153, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f9a8d4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Raspberry Cream ── */
:is(body[data-user-theme="raspberry-cream"], #card-shell[data-design="raspberry-cream"], .theme-preview-shell[data-design="raspberry-cream"]) {
  --bg-primary: #fff7ed;
  --bg-secondary: #fff1f2;
  --bg-gradient-mid: #fecdd3;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #fff1f2;
  --button-hover: #fff1f2;
  --text-primary: #4c0519;
  --text-secondary: #9f1239;
  --text-tertiary: #64748b;
  --accent: #be123c;
  --accent-light: rgba(190, 18, 60, 0.18);
  --accent-subtle: rgba(190, 18, 60, 0.1);
  --accent-border: rgba(190, 18, 60, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(190, 18, 60, 0.12);
  --icon-color: #be123c;
  --contact-icon-bg-start: #e11d48;
  --contact-icon-bg-end: #be123c;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fda4af;
  --avatar-ring-end: #f43f5e;
  --avatar-ring-glow: rgba(190, 18, 60, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #fff1f2;
  --avatar-placeholder-text: #4c0519;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #fff1f2;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(190, 18, 60, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(190, 18, 60, 0.2);
  --menu-hover: rgba(190, 18, 60, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fff7ed;
  --modal-border: rgba(190, 18, 60, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(190, 18, 60, 0.45);
  --drop-target-ring: rgba(190, 18, 60, 0.55);
  --add-btn-border: rgba(190, 18, 60, 0.35);
  --add-btn-bg: rgba(190, 18, 60, 0.06);
  --add-btn-bg-hover: rgba(190, 18, 60, 0.12);
  --drag-handle-bg: rgba(190, 18, 60, 0.1);
  --move-btn-bg: rgba(190, 18, 60, 0.12);
  --move-btn-bg-hover: rgba(190, 18, 60, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(190, 18, 60, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fda4af;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Sunset Blush ── */
:is(body[data-user-theme="sunset-blush"], #card-shell[data-design="sunset-blush"], .theme-preview-shell[data-design="sunset-blush"]) {
  --bg-primary: #881337;
  --bg-secondary: #4c0519;
  --bg-gradient-mid: #9f1239;
  --card-bg: #701a2e;
  --surface: rgba(112, 26, 46, 0.88);
  --surface-glass: rgba(112,26,46,0.85);
  --button-bg: #9f1239;
  --button-hover: #9f1239;
  --text-primary: #fff7ed;
  --text-secondary: #fecdd3;
  --text-tertiary: #64748b;
  --accent: #fb923c;
  --accent-light: rgba(251, 146, 60, 0.28);
  --accent-subtle: rgba(251, 146, 60, 0.12);
  --accent-border: rgba(251, 146, 60, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(251, 146, 60, 0.14);
  --icon-color: #fb923c;
  --contact-icon-bg-start: #fb923c;
  --contact-icon-bg-end: #f472b6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fdba74;
  --avatar-ring-end: #fb7185;
  --avatar-ring-glow: rgba(251, 146, 60, 0.35);
  --avatar-border: #881337;
  --avatar-placeholder-start: #701a2e;
  --avatar-placeholder-end: #4c0519;
  --avatar-placeholder-text: #fff7ed;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #4c0519;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(251, 146, 60, 0.15);
  --menu-bg: rgba(136, 19, 55, 0.98);
  --menu-border: rgba(251, 146, 60, 0.28);
  --menu-hover: rgba(251, 146, 60, 0.1);
  --modal-bg-start: #701a2e;
  --modal-bg-end: #881337;
  --modal-border: rgba(251, 146, 60, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(251, 146, 60, 0.55);
  --drop-target-ring: rgba(251, 146, 60, 0.65);
  --add-btn-border: rgba(251, 146, 60, 0.38);
  --add-btn-bg: rgba(251, 146, 60, 0.06);
  --add-btn-bg-hover: rgba(251, 146, 60, 0.12);
  --drag-handle-bg: rgba(251, 146, 60, 0.12);
  --move-btn-bg: rgba(251, 146, 60, 0.16);
  --move-btn-bg-hover: rgba(251, 146, 60, 0.28);
  --move-btn-border: rgba(76, 5, 25, 0.92);
  --apply-disabled-bg: rgba(251, 146, 60, 0.22);
  --apply-disabled-text: rgba(255, 247, 237, 0.55);
  --qr-image-bg: #fff7ed;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fdba74;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Magenta Muse ── */
:is(body[data-user-theme="magenta-muse"], #card-shell[data-design="magenta-muse"], .theme-preview-shell[data-design="magenta-muse"]) {
  --bg-primary: #701a75;
  --bg-secondary: #4a044e;
  --bg-gradient-mid: #86198f;
  --card-bg: #5b1164;
  --surface: rgba(91, 17, 100, 0.88);
  --surface-glass: rgba(91,17,100,0.86);
  --button-bg: #86198f;
  --button-hover: #86198f;
  --text-primary: #fdf4ff;
  --text-secondary: #f0abfc;
  --text-tertiary: #64748b;
  --accent: #e879f9;
  --accent-light: rgba(232, 121, 249, 0.28);
  --accent-subtle: rgba(232, 121, 249, 0.12);
  --accent-border: rgba(232, 121, 249, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(232, 121, 249, 0.14);
  --icon-color: #e879f9;
  --contact-icon-bg-start: #e879f9;
  --contact-icon-bg-end: #d946ef;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f0abfc;
  --avatar-ring-end: #c026d3;
  --avatar-ring-glow: rgba(232, 121, 249, 0.35);
  --avatar-border: #701a75;
  --avatar-placeholder-start: #5b1164;
  --avatar-placeholder-end: #4a044e;
  --avatar-placeholder-text: #fdf4ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #4a044e;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(232, 121, 249, 0.15);
  --menu-bg: rgba(112, 26, 117, 0.98);
  --menu-border: rgba(232, 121, 249, 0.28);
  --menu-hover: rgba(232, 121, 249, 0.1);
  --modal-bg-start: #5b1164;
  --modal-bg-end: #701a75;
  --modal-border: rgba(232, 121, 249, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(232, 121, 249, 0.55);
  --drop-target-ring: rgba(232, 121, 249, 0.65);
  --add-btn-border: rgba(232, 121, 249, 0.38);
  --add-btn-bg: rgba(232, 121, 249, 0.06);
  --add-btn-bg-hover: rgba(232, 121, 249, 0.12);
  --drag-handle-bg: rgba(232, 121, 249, 0.12);
  --move-btn-bg: rgba(232, 121, 249, 0.16);
  --move-btn-bg-hover: rgba(232, 121, 249, 0.28);
  --move-btn-border: rgba(74, 4, 78, 0.92);
  --apply-disabled-bg: rgba(232, 121, 249, 0.22);
  --apply-disabled-text: rgba(253, 244, 255, 0.55);
  --qr-image-bg: #fdf4ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f0abfc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Strawberry Milk ── */
:is(body[data-user-theme="strawberry-milk"], #card-shell[data-design="strawberry-milk"], .theme-preview-shell[data-design="strawberry-milk"]) {
  --bg-primary: #fef2f2;
  --bg-secondary: #fff1f2;
  --bg-gradient-mid: #fecdd3;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.96);
  --button-bg: #fff1f2;
  --button-hover: #fff1f2;
  --text-primary: #7f1d1d;
  --text-secondary: #be123c;
  --text-tertiary: #64748b;
  --accent: #f43f5e;
  --accent-light: rgba(244, 63, 94, 0.18);
  --accent-subtle: rgba(244, 63, 94, 0.1);
  --accent-border: rgba(244, 63, 94, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(244, 63, 94, 0.12);
  --icon-color: #f43f5e;
  --contact-icon-bg-start: #fb7185;
  --contact-icon-bg-end: #f43f5e;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fecdd3;
  --avatar-ring-end: #fda4af;
  --avatar-ring-glow: rgba(244, 63, 94, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #fff1f2;
  --avatar-placeholder-text: #7f1d1d;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #fff1f2;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(244, 63, 94, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(244, 63, 94, 0.2);
  --menu-hover: rgba(244, 63, 94, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fef2f2;
  --modal-border: rgba(244, 63, 94, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(244, 63, 94, 0.45);
  --drop-target-ring: rgba(244, 63, 94, 0.55);
  --add-btn-border: rgba(244, 63, 94, 0.35);
  --add-btn-bg: rgba(244, 63, 94, 0.06);
  --add-btn-bg-hover: rgba(244, 63, 94, 0.12);
  --drag-handle-bg: rgba(244, 63, 94, 0.1);
  --move-btn-bg: rgba(244, 63, 94, 0.12);
  --move-btn-bg-hover: rgba(244, 63, 94, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(244, 63, 94, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fecdd3;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Fuchsia Flair ── */
:is(body[data-user-theme="fuchsia-flair"], #card-shell[data-design="fuchsia-flair"], .theme-preview-shell[data-design="fuchsia-flair"]) {
  --bg-primary: #831843;
  --bg-secondary: #500724;
  --bg-gradient-mid: #9d174d;
  --card-bg: #701a40;
  --surface: rgba(112, 26, 64, 0.88);
  --surface-glass: rgba(112,26,64,0.86);
  --button-bg: #9d174d;
  --button-hover: #9d174d;
  --text-primary: #fdf4ff;
  --text-secondary: #f9a8d4;
  --text-tertiary: #64748b;
  --accent: #f0abfc;
  --accent-light: rgba(240, 171, 252, 0.28);
  --accent-subtle: rgba(240, 171, 252, 0.12);
  --accent-border: rgba(240, 171, 252, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(240, 171, 252, 0.14);
  --icon-color: #f0abfc;
  --contact-icon-bg-start: #e879f9;
  --contact-icon-bg-end: #ec4899;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f0abfc;
  --avatar-ring-end: #f472b6;
  --avatar-ring-glow: rgba(240, 171, 252, 0.35);
  --avatar-border: #831843;
  --avatar-placeholder-start: #701a40;
  --avatar-placeholder-end: #500724;
  --avatar-placeholder-text: #fdf4ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #500724;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(240, 171, 252, 0.15);
  --menu-bg: rgba(131, 24, 67, 0.98);
  --menu-border: rgba(240, 171, 252, 0.28);
  --menu-hover: rgba(240, 171, 252, 0.1);
  --modal-bg-start: #701a40;
  --modal-bg-end: #831843;
  --modal-border: rgba(240, 171, 252, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(240, 171, 252, 0.55);
  --drop-target-ring: rgba(240, 171, 252, 0.65);
  --add-btn-border: rgba(240, 171, 252, 0.38);
  --add-btn-bg: rgba(240, 171, 252, 0.06);
  --add-btn-bg-hover: rgba(240, 171, 252, 0.12);
  --drag-handle-bg: rgba(240, 171, 252, 0.12);
  --move-btn-bg: rgba(240, 171, 252, 0.16);
  --move-btn-bg-hover: rgba(240, 171, 252, 0.28);
  --move-btn-border: rgba(80, 7, 36, 0.92);
  --apply-disabled-bg: rgba(240, 171, 252, 0.22);
  --apply-disabled-text: rgba(253, 244, 255, 0.55);
  --qr-image-bg: #fdf4ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f0abfc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Amethyst Glow ── */
:is(body[data-user-theme="amethyst-glow"], #card-shell[data-design="amethyst-glow"], .theme-preview-shell[data-design="amethyst-glow"]) {
  --bg-primary: #4c1d95;
  --bg-secondary: #2e1065;
  --bg-gradient-mid: #6b21a8;
  --card-bg: #581c87;
  --surface: rgba(88, 28, 135, 0.88);
  --surface-glass: rgba(88,28,135,0.86);
  --button-bg: #6b21a8;
  --button-hover: #6b21a8;
  --text-primary: #faf5ff;
  --text-secondary: #e9d5ff;
  --text-tertiary: #64748b;
  --accent: #c084fc;
  --accent-light: rgba(192, 132, 252, 0.28);
  --accent-subtle: rgba(192, 132, 252, 0.12);
  --accent-border: rgba(192, 132, 252, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(192, 132, 252, 0.14);
  --icon-color: #c084fc;
  --contact-icon-bg-start: #c084fc;
  --contact-icon-bg-end: #a855f7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #d8b4fe;
  --avatar-ring-end: #c084fc;
  --avatar-ring-glow: rgba(192, 132, 252, 0.35);
  --avatar-border: #4c1d95;
  --avatar-placeholder-start: #581c87;
  --avatar-placeholder-end: #2e1065;
  --avatar-placeholder-text: #faf5ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #2e1065;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(192, 132, 252, 0.15);
  --menu-bg: rgba(76, 29, 149, 0.98);
  --menu-border: rgba(192, 132, 252, 0.28);
  --menu-hover: rgba(192, 132, 252, 0.1);
  --modal-bg-start: #581c87;
  --modal-bg-end: #4c1d95;
  --modal-border: rgba(192, 132, 252, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(192, 132, 252, 0.55);
  --drop-target-ring: rgba(192, 132, 252, 0.65);
  --add-btn-border: rgba(192, 132, 252, 0.38);
  --add-btn-bg: rgba(192, 132, 252, 0.06);
  --add-btn-bg-hover: rgba(192, 132, 252, 0.12);
  --drag-handle-bg: rgba(192, 132, 252, 0.12);
  --move-btn-bg: rgba(192, 132, 252, 0.16);
  --move-btn-bg-hover: rgba(192, 132, 252, 0.28);
  --move-btn-border: rgba(46, 16, 101, 0.92);
  --apply-disabled-bg: rgba(192, 132, 252, 0.22);
  --apply-disabled-text: rgba(250, 245, 255, 0.55);
  --qr-image-bg: #faf5ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #d8b4fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Lilac Lane ── */
:is(body[data-user-theme="lilac-lane"], #card-shell[data-design="lilac-lane"], .theme-preview-shell[data-design="lilac-lane"]) {
  --bg-primary: #f5f3ff;
  --bg-secondary: #ede9fe;
  --bg-gradient-mid: #ddd6fe;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #ede9fe;
  --button-hover: #ede9fe;
  --text-primary: #3b0764;
  --text-secondary: #6d28d9;
  --text-tertiary: #64748b;
  --accent: #8b5cf6;
  --accent-light: rgba(139, 92, 246, 0.18);
  --accent-subtle: rgba(139, 92, 246, 0.1);
  --accent-border: rgba(139, 92, 246, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(139, 92, 246, 0.12);
  --icon-color: #8b5cf6;
  --contact-icon-bg-start: #a78bfa;
  --contact-icon-bg-end: #8b5cf6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #ddd6fe;
  --avatar-ring-end: #c4b5fd;
  --avatar-ring-glow: rgba(139, 92, 246, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #ede9fe;
  --avatar-placeholder-text: #3b0764;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #ede9fe;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(139, 92, 246, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(139, 92, 246, 0.2);
  --menu-hover: rgba(139, 92, 246, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f5f3ff;
  --modal-border: rgba(139, 92, 246, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(139, 92, 246, 0.45);
  --drop-target-ring: rgba(139, 92, 246, 0.55);
  --add-btn-border: rgba(139, 92, 246, 0.35);
  --add-btn-bg: rgba(139, 92, 246, 0.06);
  --add-btn-bg-hover: rgba(139, 92, 246, 0.12);
  --drag-handle-bg: rgba(139, 92, 246, 0.1);
  --move-btn-bg: rgba(139, 92, 246, 0.12);
  --move-btn-bg-hover: rgba(139, 92, 246, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(139, 92, 246, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #ddd6fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Violet Hour ── */
:is(body[data-user-theme="violet-hour"], #card-shell[data-design="violet-hour"], .theme-preview-shell[data-design="violet-hour"]) {
  --bg-primary: #1e1b4b;
  --bg-secondary: #312e81;
  --bg-gradient-mid: #4c1d95;
  --card-bg: #2e2560;
  --surface: rgba(46, 37, 96, 0.88);
  --surface-glass: rgba(46,37,96,0.86);
  --button-bg: #4c1d95;
  --button-hover: #4c1d95;
  --text-primary: #f5f3ff;
  --text-secondary: #c4b5fd;
  --text-tertiary: #64748b;
  --accent: #a78bfa;
  --accent-light: rgba(167, 139, 250, 0.28);
  --accent-subtle: rgba(167, 139, 250, 0.12);
  --accent-border: rgba(167, 139, 250, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(167, 139, 250, 0.14);
  --icon-color: #a78bfa;
  --contact-icon-bg-start: #a78bfa;
  --contact-icon-bg-end: #7c3aed;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #8b5cf6;
  --avatar-ring-glow: rgba(167, 139, 250, 0.35);
  --avatar-border: #1e1b4b;
  --avatar-placeholder-start: #2e2560;
  --avatar-placeholder-end: #312e81;
  --avatar-placeholder-text: #f5f3ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #312e81;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(167, 139, 250, 0.15);
  --menu-bg: rgba(30, 27, 75, 0.98);
  --menu-border: rgba(167, 139, 250, 0.28);
  --menu-hover: rgba(167, 139, 250, 0.1);
  --modal-bg-start: #2e2560;
  --modal-bg-end: #1e1b4b;
  --modal-border: rgba(167, 139, 250, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(167, 139, 250, 0.55);
  --drop-target-ring: rgba(167, 139, 250, 0.65);
  --add-btn-border: rgba(167, 139, 250, 0.38);
  --add-btn-bg: rgba(167, 139, 250, 0.06);
  --add-btn-bg-hover: rgba(167, 139, 250, 0.12);
  --drag-handle-bg: rgba(167, 139, 250, 0.12);
  --move-btn-bg: rgba(167, 139, 250, 0.16);
  --move-btn-bg-hover: rgba(167, 139, 250, 0.28);
  --move-btn-border: rgba(49, 46, 129, 0.92);
  --apply-disabled-bg: rgba(167, 139, 250, 0.22);
  --apply-disabled-text: rgba(245, 243, 255, 0.55);
  --qr-image-bg: #f5f3ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Plum Velvet ── */
:is(body[data-user-theme="plum-velvet"], #card-shell[data-design="plum-velvet"], .theme-preview-shell[data-design="plum-velvet"]) {
  --bg-primary: #3b0764;
  --bg-secondary: #2e1065;
  --bg-gradient-mid: #581c87;
  --card-bg: #4c1675;
  --surface: rgba(76, 22, 117, 0.88);
  --surface-glass: rgba(76,22,117,0.86);
  --button-bg: #581c87;
  --button-hover: #581c87;
  --text-primary: #faf5ff;
  --text-secondary: #e9d5ff;
  --text-tertiary: #64748b;
  --accent: #d8b4fe;
  --accent-light: rgba(216, 180, 254, 0.28);
  --accent-subtle: rgba(216, 180, 254, 0.12);
  --accent-border: rgba(216, 180, 254, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(216, 180, 254, 0.14);
  --icon-color: #d8b4fe;
  --contact-icon-bg-start: #c084fc;
  --contact-icon-bg-end: #9333ea;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #e9d5ff;
  --avatar-ring-end: #c084fc;
  --avatar-ring-glow: rgba(216, 180, 254, 0.35);
  --avatar-border: #3b0764;
  --avatar-placeholder-start: #4c1675;
  --avatar-placeholder-end: #2e1065;
  --avatar-placeholder-text: #faf5ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #2e1065;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(216, 180, 254, 0.15);
  --menu-bg: rgba(59, 7, 100, 0.98);
  --menu-border: rgba(216, 180, 254, 0.28);
  --menu-hover: rgba(216, 180, 254, 0.1);
  --modal-bg-start: #4c1675;
  --modal-bg-end: #3b0764;
  --modal-border: rgba(216, 180, 254, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(216, 180, 254, 0.55);
  --drop-target-ring: rgba(216, 180, 254, 0.65);
  --add-btn-border: rgba(216, 180, 254, 0.38);
  --add-btn-bg: rgba(216, 180, 254, 0.06);
  --add-btn-bg-hover: rgba(216, 180, 254, 0.12);
  --drag-handle-bg: rgba(216, 180, 254, 0.12);
  --move-btn-bg: rgba(216, 180, 254, 0.16);
  --move-btn-bg-hover: rgba(216, 180, 254, 0.28);
  --move-btn-border: rgba(46, 16, 101, 0.92);
  --apply-disabled-bg: rgba(216, 180, 254, 0.22);
  --apply-disabled-text: rgba(250, 245, 255, 0.55);
  --qr-image-bg: #faf5ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #e9d5ff;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Orchid Bloom ── */
:is(body[data-user-theme="orchid-bloom"], #card-shell[data-design="orchid-bloom"], .theme-preview-shell[data-design="orchid-bloom"]) {
  --bg-primary: #fdf4ff;
  --bg-secondary: #fae8ff;
  --bg-gradient-mid: #f3e8ff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #fae8ff;
  --button-hover: #fae8ff;
  --text-primary: #581c87;
  --text-secondary: #7e22ce;
  --text-tertiary: #64748b;
  --accent: #a855f7;
  --accent-light: rgba(168, 85, 247, 0.18);
  --accent-subtle: rgba(168, 85, 247, 0.1);
  --accent-border: rgba(168, 85, 247, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(168, 85, 247, 0.12);
  --icon-color: #a855f7;
  --contact-icon-bg-start: #e879f9;
  --contact-icon-bg-end: #a855f7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f0abfc;
  --avatar-ring-end: #d8b4fe;
  --avatar-ring-glow: rgba(168, 85, 247, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #fae8ff;
  --avatar-placeholder-text: #581c87;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #fae8ff;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(168, 85, 247, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(168, 85, 247, 0.2);
  --menu-hover: rgba(168, 85, 247, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fdf4ff;
  --modal-border: rgba(168, 85, 247, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(168, 85, 247, 0.45);
  --drop-target-ring: rgba(168, 85, 247, 0.55);
  --add-btn-border: rgba(168, 85, 247, 0.35);
  --add-btn-bg: rgba(168, 85, 247, 0.06);
  --add-btn-bg-hover: rgba(168, 85, 247, 0.12);
  --drag-handle-bg: rgba(168, 85, 247, 0.1);
  --move-btn-bg: rgba(168, 85, 247, 0.12);
  --move-btn-bg-hover: rgba(168, 85, 247, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(168, 85, 247, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f0abfc;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Wisteria Walk ── */
:is(body[data-user-theme="wisteria-walk"], #card-shell[data-design="wisteria-walk"], .theme-preview-shell[data-design="wisteria-walk"]) {
  --bg-primary: #ede9fe;
  --bg-secondary: #f5f3ff;
  --bg-gradient-mid: #ddd6fe;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #ede9fe;
  --button-hover: #ede9fe;
  --text-primary: #4c1d95;
  --text-secondary: #6d28d9;
  --text-tertiary: #64748b;
  --accent: #7c3aed;
  --accent-light: rgba(124, 58, 237, 0.18);
  --accent-subtle: rgba(124, 58, 237, 0.1);
  --accent-border: rgba(124, 58, 237, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(124, 58, 237, 0.12);
  --icon-color: #7c3aed;
  --contact-icon-bg-start: #a78bfa;
  --contact-icon-bg-end: #7c3aed;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c4b5fd;
  --avatar-ring-end: #a78bfa;
  --avatar-ring-glow: rgba(124, 58, 237, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #f5f3ff;
  --avatar-placeholder-text: #4c1d95;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f5f3ff;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(124, 58, 237, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(124, 58, 237, 0.2);
  --menu-hover: rgba(124, 58, 237, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #ede9fe;
  --modal-border: rgba(124, 58, 237, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(124, 58, 237, 0.45);
  --drop-target-ring: rgba(124, 58, 237, 0.55);
  --add-btn-border: rgba(124, 58, 237, 0.35);
  --add-btn-bg: rgba(124, 58, 237, 0.06);
  --add-btn-bg-hover: rgba(124, 58, 237, 0.12);
  --drag-handle-bg: rgba(124, 58, 237, 0.1);
  --move-btn-bg: rgba(124, 58, 237, 0.12);
  --move-btn-bg-hover: rgba(124, 58, 237, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(124, 58, 237, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4b5fd;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Lavender Haze ── */
:is(body[data-user-theme="lavender-haze"], #card-shell[data-design="lavender-haze"], .theme-preview-shell[data-design="lavender-haze"]) {
  --bg-primary: #f8fafc;
  --bg-secondary: #f5f3ff;
  --bg-gradient-mid: #ede9fe;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.96);
  --button-bg: #ede9fe;
  --button-hover: #ede9fe;
  --text-primary: #3730a3;
  --text-secondary: #6b7280;
  --text-tertiary: #64748b;
  --accent: #8b5cf6;
  --accent-light: rgba(139, 92, 246, 0.18);
  --accent-subtle: rgba(139, 92, 246, 0.1);
  --accent-border: rgba(139, 92, 246, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(139, 92, 246, 0.12);
  --icon-color: #8b5cf6;
  --contact-icon-bg-start: #a78bfa;
  --contact-icon-bg-end: #8b5cf6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #ddd6fe;
  --avatar-ring-end: #c4b5fd;
  --avatar-ring-glow: rgba(139, 92, 246, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #f5f3ff;
  --avatar-placeholder-text: #3730a3;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f5f3ff;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(139, 92, 246, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(139, 92, 246, 0.2);
  --menu-hover: rgba(139, 92, 246, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f8fafc;
  --modal-border: rgba(139, 92, 246, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(139, 92, 246, 0.45);
  --drop-target-ring: rgba(139, 92, 246, 0.55);
  --add-btn-border: rgba(139, 92, 246, 0.35);
  --add-btn-bg: rgba(139, 92, 246, 0.06);
  --add-btn-bg-hover: rgba(139, 92, 246, 0.12);
  --drag-handle-bg: rgba(139, 92, 246, 0.1);
  --move-btn-bg: rgba(139, 92, 246, 0.12);
  --move-btn-bg-hover: rgba(139, 92, 246, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(139, 92, 246, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #ddd6fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Grape Sorbet ── */
:is(body[data-user-theme="grape-sorbet"], #card-shell[data-design="grape-sorbet"], .theme-preview-shell[data-design="grape-sorbet"]) {
  --bg-primary: #faf5ff;
  --bg-secondary: #fce7f3;
  --bg-gradient-mid: #f3e8ff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.94);
  --button-bg: #f3e8ff;
  --button-hover: #f3e8ff;
  --text-primary: #581c87;
  --text-secondary: #9d174d;
  --text-tertiary: #64748b;
  --accent: #9333ea;
  --accent-light: rgba(147, 51, 234, 0.18);
  --accent-subtle: rgba(147, 51, 234, 0.1);
  --accent-border: rgba(147, 51, 234, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(147, 51, 234, 0.12);
  --icon-color: #9333ea;
  --contact-icon-bg-start: #c084fc;
  --contact-icon-bg-end: #ec4899;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #e9d5ff;
  --avatar-ring-end: #f9a8d4;
  --avatar-ring-glow: rgba(147, 51, 234, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #fce7f3;
  --avatar-placeholder-text: #581c87;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #fce7f3;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(147, 51, 234, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(147, 51, 234, 0.2);
  --menu-hover: rgba(147, 51, 234, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #faf5ff;
  --modal-border: rgba(147, 51, 234, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(147, 51, 234, 0.45);
  --drop-target-ring: rgba(147, 51, 234, 0.55);
  --add-btn-border: rgba(147, 51, 234, 0.35);
  --add-btn-bg: rgba(147, 51, 234, 0.06);
  --add-btn-bg-hover: rgba(147, 51, 234, 0.12);
  --drag-handle-bg: rgba(147, 51, 234, 0.1);
  --move-btn-bg: rgba(147, 51, 234, 0.12);
  --move-btn-bg-hover: rgba(147, 51, 234, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(147, 51, 234, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #e9d5ff;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Mulberry Silk ── */
:is(body[data-user-theme="mulberry-silk"], #card-shell[data-design="mulberry-silk"], .theme-preview-shell[data-design="mulberry-silk"]) {
  --bg-primary: #581c87;
  --bg-secondary: #3b0764;
  --bg-gradient-mid: #6b21a8;
  --card-bg: #4c1675;
  --surface: rgba(76, 22, 117, 0.88);
  --surface-glass: rgba(76,22,117,0.86);
  --button-bg: #6b21a8;
  --button-hover: #6b21a8;
  --text-primary: #fdf4ff;
  --text-secondary: #e9d5ff;
  --text-tertiary: #64748b;
  --accent: #f0abfc;
  --accent-light: rgba(240, 171, 252, 0.28);
  --accent-subtle: rgba(240, 171, 252, 0.12);
  --accent-border: rgba(240, 171, 252, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(240, 171, 252, 0.14);
  --icon-color: #f0abfc;
  --contact-icon-bg-start: #e879f9;
  --contact-icon-bg-end: #a855f7;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #f9a8d4;
  --avatar-ring-end: #d8b4fe;
  --avatar-ring-glow: rgba(240, 171, 252, 0.35);
  --avatar-border: #581c87;
  --avatar-placeholder-start: #4c1675;
  --avatar-placeholder-end: #3b0764;
  --avatar-placeholder-text: #fdf4ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #3b0764;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(240, 171, 252, 0.15);
  --menu-bg: rgba(88, 28, 135, 0.98);
  --menu-border: rgba(240, 171, 252, 0.28);
  --menu-hover: rgba(240, 171, 252, 0.1);
  --modal-bg-start: #4c1675;
  --modal-bg-end: #581c87;
  --modal-border: rgba(240, 171, 252, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(240, 171, 252, 0.55);
  --drop-target-ring: rgba(240, 171, 252, 0.65);
  --add-btn-border: rgba(240, 171, 252, 0.38);
  --add-btn-bg: rgba(240, 171, 252, 0.06);
  --add-btn-bg-hover: rgba(240, 171, 252, 0.12);
  --drag-handle-bg: rgba(240, 171, 252, 0.12);
  --move-btn-bg: rgba(240, 171, 252, 0.16);
  --move-btn-bg-hover: rgba(240, 171, 252, 0.28);
  --move-btn-border: rgba(59, 7, 100, 0.92);
  --apply-disabled-bg: rgba(240, 171, 252, 0.22);
  --apply-disabled-text: rgba(253, 244, 255, 0.55);
  --qr-image-bg: #fdf4ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #f9a8d4;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Iris Dawn ── */
:is(body[data-user-theme="iris-dawn"], #card-shell[data-design="iris-dawn"], .theme-preview-shell[data-design="iris-dawn"]) {
  --bg-primary: #fdf4ff;
  --bg-secondary: #eef2ff;
  --bg-gradient-mid: #e0e7ff;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.95);
  --button-bg: #eef2ff;
  --button-hover: #eef2ff;
  --text-primary: #312e81;
  --text-secondary: #6b7280;
  --text-tertiary: #64748b;
  --accent: #6366f1;
  --accent-light: rgba(99, 102, 241, 0.18);
  --accent-subtle: rgba(99, 102, 241, 0.1);
  --accent-border: rgba(99, 102, 241, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(99, 102, 241, 0.12);
  --icon-color: #6366f1;
  --contact-icon-bg-start: #818cf8;
  --contact-icon-bg-end: #8b5cf6;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #c7d2fe;
  --avatar-ring-end: #c4b5fd;
  --avatar-ring-glow: rgba(99, 102, 241, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #eef2ff;
  --avatar-placeholder-text: #312e81;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #eef2ff;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(99, 102, 241, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(99, 102, 241, 0.2);
  --menu-hover: rgba(99, 102, 241, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #fdf4ff;
  --modal-border: rgba(99, 102, 241, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(99, 102, 241, 0.45);
  --drop-target-ring: rgba(99, 102, 241, 0.55);
  --add-btn-border: rgba(99, 102, 241, 0.35);
  --add-btn-bg: rgba(99, 102, 241, 0.06);
  --add-btn-bg-hover: rgba(99, 102, 241, 0.12);
  --drag-handle-bg: rgba(99, 102, 241, 0.1);
  --move-btn-bg: rgba(99, 102, 241, 0.12);
  --move-btn-bg-hover: rgba(99, 102, 241, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(99, 102, 241, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c7d2fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Heather Mist ── */
:is(body[data-user-theme="heather-mist"], #card-shell[data-design="heather-mist"], .theme-preview-shell[data-design="heather-mist"]) {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-gradient-mid: #e2e8f0;
  --card-bg: #ffffff;
  --surface: rgba(255,255,255,0.98);
  --surface-glass: rgba(255,255,255,0.96);
  --button-bg: #f1f5f9;
  --button-hover: #f1f5f9;
  --text-primary: #1e1b4b;
  --text-secondary: #64748b;
  --text-tertiary: #64748b;
  --accent: #7c3aed;
  --accent-light: rgba(124, 58, 237, 0.18);
  --accent-subtle: rgba(124, 58, 237, 0.1);
  --accent-border: rgba(124, 58, 237, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: rgba(124, 58, 237, 0.12);
  --icon-color: #7c3aed;
  --contact-icon-bg-start: #a78bfa;
  --contact-icon-bg-end: #7c3aed;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #ddd6fe;
  --avatar-ring-end: #a78bfa;
  --avatar-ring-glow: rgba(124, 58, 237, 0.35);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #ffffff;
  --avatar-placeholder-end: #f1f5f9;
  --avatar-placeholder-text: #1e1b4b;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.5);
  --page-bg: #f1f5f9;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-float: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-button: rgba(124, 58, 237, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(124, 58, 237, 0.2);
  --menu-hover: rgba(124, 58, 237, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f8fafc;
  --modal-border: rgba(124, 58, 237, 0.15);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(124, 58, 237, 0.45);
  --drop-target-ring: rgba(124, 58, 237, 0.55);
  --add-btn-border: rgba(124, 58, 237, 0.35);
  --add-btn-bg: rgba(124, 58, 237, 0.06);
  --add-btn-bg-hover: rgba(124, 58, 237, 0.12);
  --drag-handle-bg: rgba(124, 58, 237, 0.1);
  --move-btn-bg: rgba(124, 58, 237, 0.12);
  --move-btn-bg-hover: rgba(124, 58, 237, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(124, 58, 237, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --qr-image-bg: #ffffff;
  --pill-border: rgba(15, 23, 42, 0.1);
  --action-border: rgba(15, 23, 42, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #ddd6fe;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Royal Violet ── */
:is(body[data-user-theme="royal-violet"], #card-shell[data-design="royal-violet"], .theme-preview-shell[data-design="royal-violet"]) {
  --bg-primary: #5b21b6;
  --bg-secondary: #3b0764;
  --bg-gradient-mid: #6d28d9;
  --card-bg: #4c1d95;
  --surface: rgba(76, 29, 149, 0.88);
  --surface-glass: rgba(76,29,149,0.86);
  --button-bg: #6d28d9;
  --button-hover: #6d28d9;
  --text-primary: #faf5ff;
  --text-secondary: #e9d5ff;
  --text-tertiary: #64748b;
  --accent: #eab308;
  --accent-light: rgba(234, 179, 8, 0.28);
  --accent-subtle: rgba(234, 179, 8, 0.12);
  --accent-border: rgba(234, 179, 8, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(234, 179, 8, 0.14);
  --icon-color: #eab308;
  --contact-icon-bg-start: #c084fc;
  --contact-icon-bg-end: #eab308;
  --contact-icon-color: #ffffff;
  --avatar-ring-start: #fde047;
  --avatar-ring-end: #c084fc;
  --avatar-ring-glow: rgba(234, 179, 8, 0.35);
  --avatar-border: #5b21b6;
  --avatar-placeholder-start: #4c1d95;
  --avatar-placeholder-end: #3b0764;
  --avatar-placeholder-text: #faf5ff;
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.5);
  --page-bg: #3b0764;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: rgba(234, 179, 8, 0.15);
  --menu-bg: rgba(91, 33, 182, 0.98);
  --menu-border: rgba(234, 179, 8, 0.28);
  --menu-hover: rgba(234, 179, 8, 0.1);
  --modal-bg-start: #4c1d95;
  --modal-bg-end: #5b21b6;
  --modal-border: rgba(234, 179, 8, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(234, 179, 8, 0.55);
  --drop-target-ring: rgba(234, 179, 8, 0.65);
  --add-btn-border: rgba(234, 179, 8, 0.38);
  --add-btn-bg: rgba(234, 179, 8, 0.06);
  --add-btn-bg-hover: rgba(234, 179, 8, 0.12);
  --drag-handle-bg: rgba(234, 179, 8, 0.12);
  --move-btn-bg: rgba(234, 179, 8, 0.16);
  --move-btn-bg-hover: rgba(234, 179, 8, 0.28);
  --move-btn-border: rgba(59, 7, 100, 0.92);
  --apply-disabled-bg: rgba(234, 179, 8, 0.22);
  --apply-disabled-text: rgba(250, 245, 255, 0.55);
  --qr-image-bg: #faf5ff;
  --pill-border: rgba(255, 255, 255, 0.08);
  --action-border: rgba(255, 255, 255, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #fde047;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* Card shell background — light themes */
#card-shell[data-design="white"],
.theme-preview-shell[data-design="white"],
#card-shell[data-design="capital-sage"],
.theme-preview-shell[data-design="capital-sage"],
#card-shell[data-design="alpine-ledger"],
.theme-preview-shell[data-design="alpine-ledger"],
#card-shell[data-design="trustline-azure"],
.theme-preview-shell[data-design="trustline-azure"],
#card-shell[data-design="ivory-prestige"],
.theme-preview-shell[data-design="ivory-prestige"],
#card-shell[data-design="royal-ivory"],
.theme-preview-shell[data-design="royal-ivory"],
#card-shell[data-design="champagne-atelier"],
.theme-preview-shell[data-design="champagne-atelier"],
#card-shell[data-design="gilded-pearl"],
.theme-preview-shell[data-design="gilded-pearl"],
#card-shell[data-design="porcelain-gold"],
.theme-preview-shell[data-design="porcelain-gold"],
#card-shell[data-design="atlas-champagne"],
.theme-preview-shell[data-design="atlas-champagne"],
#card-shell[data-design="arctic-white"],
.theme-preview-shell[data-design="arctic-white"],
#card-shell[data-design="linen-air"],
.theme-preview-shell[data-design="linen-air"],
#card-shell[data-design="paper-mist"],
.theme-preview-shell[data-design="paper-mist"],
#card-shell[data-design="soft-graphite"],
.theme-preview-shell[data-design="soft-graphite"],
#card-shell[data-design="oat-canvas"],
.theme-preview-shell[data-design="oat-canvas"],
#card-shell[data-design="pearl-frost"],
.theme-preview-shell[data-design="pearl-frost"],
#card-shell[data-design="cloud-line"],
.theme-preview-shell[data-design="cloud-line"],
#card-shell[data-design="stone-whisper"],
.theme-preview-shell[data-design="stone-whisper"],
#card-shell[data-design="frost-sage"],
.theme-preview-shell[data-design="frost-sage"],
#card-shell[data-design="quiet-lilac"],
.theme-preview-shell[data-design="quiet-lilac"],
#card-shell[data-design="blank-slate"],
.theme-preview-shell[data-design="blank-slate"],
#card-shell[data-design="paper-gray"],
.theme-preview-shell[data-design="paper-gray"],
#card-shell[data-design="coral-studio"],
.theme-preview-shell[data-design="coral-studio"],
#card-shell[data-design="cerulean-dream"],
.theme-preview-shell[data-design="cerulean-dream"],
#card-shell[data-design="desert-sand"],
.theme-preview-shell[data-design="desert-sand"],
#card-shell[data-design="glacier-lake"],
.theme-preview-shell[data-design="glacier-lake"],
#card-shell[data-design="terracotta-bloom"],
.theme-preview-shell[data-design="terracotta-bloom"],
#card-shell[data-design="pine-mist"],
.theme-preview-shell[data-design="pine-mist"],
#card-shell[data-design="lavender-field"],
.theme-preview-shell[data-design="lavender-field"],
#card-shell[data-design="river-stone"],
.theme-preview-shell[data-design="river-stone"],
#card-shell[data-design="prism-glass"],
.theme-preview-shell[data-design="prism-glass"],
#card-shell[data-design="arctic-glass"],
.theme-preview-shell[data-design="arctic-glass"],
#card-shell[data-design="opal-haze"],
.theme-preview-shell[data-design="opal-haze"],
#card-shell[data-design="rose-quartz-glass"],
.theme-preview-shell[data-design="rose-quartz-glass"],
#card-shell[data-design="champagne-glass"],
.theme-preview-shell[data-design="champagne-glass"],
#card-shell[data-design="frost-prism"],
.theme-preview-shell[data-design="frost-prism"],
#card-shell[data-design="army-bloom"],
.theme-preview-shell[data-design="army-bloom"],
#card-shell[data-design="cloud-nine"],
.theme-preview-shell[data-design="cloud-nine"],
#card-shell[data-design="rose-matte-runway"],
.theme-preview-shell[data-design="rose-matte-runway"],
#card-shell[data-design="couture-champagne"],
.theme-preview-shell[data-design="couture-champagne"],
#card-shell[data-design="satin-whisper"],
.theme-preview-shell[data-design="satin-whisper"],
#card-shell[data-design="blush-petal"],
.theme-preview-shell[data-design="blush-petal"],
#card-shell[data-design="rose-quartz"],
.theme-preview-shell[data-design="rose-quartz"],
#card-shell[data-design="cherry-blossom"],
.theme-preview-shell[data-design="cherry-blossom"],
#card-shell[data-design="ballet-slipper"],
.theme-preview-shell[data-design="ballet-slipper"],
#card-shell[data-design="peony-garden"],
.theme-preview-shell[data-design="peony-garden"],
#card-shell[data-design="cotton-candy"],
.theme-preview-shell[data-design="cotton-candy"],
#card-shell[data-design="raspberry-cream"],
.theme-preview-shell[data-design="raspberry-cream"],
#card-shell[data-design="strawberry-milk"],
.theme-preview-shell[data-design="strawberry-milk"],
#card-shell[data-design="lilac-lane"],
.theme-preview-shell[data-design="lilac-lane"],
#card-shell[data-design="orchid-bloom"],
.theme-preview-shell[data-design="orchid-bloom"],
#card-shell[data-design="wisteria-walk"],
.theme-preview-shell[data-design="wisteria-walk"],
#card-shell[data-design="lavender-haze"],
.theme-preview-shell[data-design="lavender-haze"],
#card-shell[data-design="grape-sorbet"],
.theme-preview-shell[data-design="grape-sorbet"],
#card-shell[data-design="iris-dawn"],
.theme-preview-shell[data-design="iris-dawn"],
#card-shell[data-design="heather-mist"],
.theme-preview-shell[data-design="heather-mist"] {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* Card shell background — rich dark gradients */
#card-shell[data-design="boardroom-navy"],
.theme-preview-shell[data-design="boardroom-navy"],
#card-shell[data-design="sterling-graphite"],
.theme-preview-shell[data-design="sterling-graphite"],
#card-shell[data-design="harbor-steel"],
.theme-preview-shell[data-design="harbor-steel"],
#card-shell[data-design="copper-brief"],
.theme-preview-shell[data-design="copper-brief"],
#card-shell[data-design="summit-blueprint"],
.theme-preview-shell[data-design="summit-blueprint"],
#card-shell[data-design="regent-burgundy"],
.theme-preview-shell[data-design="regent-burgundy"],
#card-shell[data-design="midnight-boardroom"],
.theme-preview-shell[data-design="midnight-boardroom"],
#card-shell[data-design="executive-onyx"],
.theme-preview-shell[data-design="executive-onyx"],
#card-shell[data-design="velvet-noir"],
.theme-preview-shell[data-design="velvet-noir"],
#card-shell[data-design="opera-plum"],
.theme-preview-shell[data-design="opera-plum"],
#card-shell[data-design="sable-rose"],
.theme-preview-shell[data-design="sable-rose"],
#card-shell[data-design="maison-aubergine"],
.theme-preview-shell[data-design="maison-aubergine"],
#card-shell[data-design="noir-silk"],
.theme-preview-shell[data-design="noir-silk"],
#card-shell[data-design="meridian-slate"],
.theme-preview-shell[data-design="meridian-slate"],
#card-shell[data-design="quantum-grid"],
.theme-preview-shell[data-design="quantum-grid"],
#card-shell[data-design="neon-console"],
.theme-preview-shell[data-design="neon-console"],
#card-shell[data-design="circuit-cyan"],
.theme-preview-shell[data-design="circuit-cyan"],
#card-shell[data-design="orbital-indigo"],
.theme-preview-shell[data-design="orbital-indigo"],
#card-shell[data-design="pixel-mint"],
.theme-preview-shell[data-design="pixel-mint"],
#card-shell[data-design="chrome-pulse"],
.theme-preview-shell[data-design="chrome-pulse"],
#card-shell[data-design="ion-violet"],
.theme-preview-shell[data-design="ion-violet"],
#card-shell[data-design="holo-slate"],
.theme-preview-shell[data-design="holo-slate"],
#card-shell[data-design="code-ember"],
.theme-preview-shell[data-design="code-ember"],
#card-shell[data-design="synth-wave"],
.theme-preview-shell[data-design="synth-wave"],
#card-shell[data-design="laser-grid"],
.theme-preview-shell[data-design="laser-grid"],
#card-shell[data-design="prism-pop"],
.theme-preview-shell[data-design="prism-pop"],
#card-shell[data-design="mango-ink"],
.theme-preview-shell[data-design="mango-ink"],
#card-shell[data-design="fuchsia-canvas"],
.theme-preview-shell[data-design="fuchsia-canvas"],
#card-shell[data-design="amber-graffiti"],
.theme-preview-shell[data-design="amber-graffiti"],
#card-shell[data-design="electric-lime"],
.theme-preview-shell[data-design="electric-lime"],
#card-shell[data-design="rosewave"],
.theme-preview-shell[data-design="rosewave"],
#card-shell[data-design="cobalt-muse"],
.theme-preview-shell[data-design="cobalt-muse"],
#card-shell[data-design="tropical-punch"],
.theme-preview-shell[data-design="tropical-punch"],
#card-shell[data-design="ink-splash"],
.theme-preview-shell[data-design="ink-splash"],
#card-shell[data-design="velvet-nocturne"],
.theme-preview-shell[data-design="velvet-nocturne"],
#card-shell[data-design="obsidian-aurora"],
.theme-preview-shell[data-design="obsidian-aurora"],
#card-shell[data-design="carbon-violet"],
.theme-preview-shell[data-design="carbon-violet"],
#card-shell[data-design="eclipse-amber"],
.theme-preview-shell[data-design="eclipse-amber"],
#card-shell[data-design="noir-emerald"],
.theme-preview-shell[data-design="noir-emerald"],
#card-shell[data-design="blue-hour"],
.theme-preview-shell[data-design="blue-hour"],
#card-shell[data-design="ruby-shadow"],
.theme-preview-shell[data-design="ruby-shadow"],
#card-shell[data-design="deep-space"],
.theme-preview-shell[data-design="deep-space"],
#card-shell[data-design="ink-teal"],
.theme-preview-shell[data-design="ink-teal"],
#card-shell[data-design="void-plasma"],
.theme-preview-shell[data-design="void-plasma"],
#card-shell[data-design="storm-charcoal"],
.theme-preview-shell[data-design="storm-charcoal"],
#card-shell[data-design="moss-garden"],
.theme-preview-shell[data-design="moss-garden"],
#card-shell[data-design="rainforest-canopy"],
.theme-preview-shell[data-design="rainforest-canopy"],
#card-shell[data-design="coral-reef"],
.theme-preview-shell[data-design="coral-reef"],
#card-shell[data-design="amber-grove"],
.theme-preview-shell[data-design="amber-grove"],
#card-shell[data-design="smoked-crystal"],
.theme-preview-shell[data-design="smoked-crystal"],
#card-shell[data-design="sapphire-glass"],
.theme-preview-shell[data-design="sapphire-glass"],
#card-shell[data-design="emerald-pane"],
.theme-preview-shell[data-design="emerald-pane"],
#card-shell[data-design="violet-glass"],
.theme-preview-shell[data-design="violet-glass"],
#card-shell[data-design="copper-glass"],
.theme-preview-shell[data-design="copper-glass"],
#card-shell[data-design="midnight-glass"],
.theme-preview-shell[data-design="midnight-glass"],
#card-shell[data-design="borahae-luxe"],
.theme-preview-shell[data-design="borahae-luxe"],
#card-shell[data-design="seoul-aura"],
.theme-preview-shell[data-design="seoul-aura"],
#card-shell[data-design="purple-satellite"],
.theme-preview-shell[data-design="purple-satellite"],
#card-shell[data-design="mikrokosmos-night"],
.theme-preview-shell[data-design="mikrokosmos-night"],
#card-shell[data-design="idol-gold"],
.theme-preview-shell[data-design="idol-gold"],
#card-shell[data-design="moonchild-lilac"],
.theme-preview-shell[data-design="moonchild-lilac"],
#card-shell[data-design="dream-glow"],
.theme-preview-shell[data-design="dream-glow"],
#card-shell[data-design="serendipity-rose"],
.theme-preview-shell[data-design="serendipity-rose"],
#card-shell[data-design="magic-shop"],
.theme-preview-shell[data-design="magic-shop"],
#card-shell[data-design="galaxy-heart"],
.theme-preview-shell[data-design="galaxy-heart"],
#card-shell[data-design="pink-venom-noir"],
.theme-preview-shell[data-design="pink-venom-noir"],
#card-shell[data-design="chrome-glam-stage"],
.theme-preview-shell[data-design="chrome-glam-stage"],
#card-shell[data-design="rose-gold-vip"],
.theme-preview-shell[data-design="rose-gold-vip"],
#card-shell[data-design="cyber-pop-neon"],
.theme-preview-shell[data-design="cyber-pop-neon"],
#card-shell[data-design="backstage-glow"],
.theme-preview-shell[data-design="backstage-glow"],
#card-shell[data-design="spotlight-noir"],
.theme-preview-shell[data-design="spotlight-noir"],
#card-shell[data-design="editorial-strike"],
.theme-preview-shell[data-design="editorial-strike"],
#card-shell[data-design="prism-glass-luxe"],
.theme-preview-shell[data-design="prism-glass-luxe"],
#card-shell[data-design="plum-pulse-stage"],
.theme-preview-shell[data-design="plum-pulse-stage"],
#card-shell[data-design="flamingo-dream"],
.theme-preview-shell[data-design="flamingo-dream"],
#card-shell[data-design="sunset-blush"],
.theme-preview-shell[data-design="sunset-blush"],
#card-shell[data-design="magenta-muse"],
.theme-preview-shell[data-design="magenta-muse"],
#card-shell[data-design="fuchsia-flair"],
.theme-preview-shell[data-design="fuchsia-flair"],
#card-shell[data-design="amethyst-glow"],
.theme-preview-shell[data-design="amethyst-glow"],
#card-shell[data-design="violet-hour"],
.theme-preview-shell[data-design="violet-hour"],
#card-shell[data-design="plum-velvet"],
.theme-preview-shell[data-design="plum-velvet"],
#card-shell[data-design="mulberry-silk"],
.theme-preview-shell[data-design="mulberry-silk"],
#card-shell[data-design="royal-violet"],
.theme-preview-shell[data-design="royal-violet"] {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-gradient-mid) 45%, var(--bg-secondary) 100%);
}