@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #F8F3EE;
  --surface: #FFFDFC;
  --surface-2: #F3ECE5;
  --text: #2F2A28;
  --muted: #6E625C;
  --primary: #B7848C;
  --secondary: #7C8C7A;
  --accent: #C6A96B;
  --border: rgba(47, 42, 40, 0.10);
  --success: #4E7A5D;
  --danger: #A14E5D;
  --radius: 24px;
  --shadow: 0 10px 30px rgba(47, 42, 40, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at top, rgba(198,169,107,0.10), transparent 30%),
    linear-gradient(180deg, #FDF9F5 0%, var(--bg) 100%);
  color: var(--text);
  min-height: 100vh;
}

.container {
  width: min(1120px, 92%);
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(255, 253, 252, 0.72);
  border-bottom: 1px solid var(--border);
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}

.brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

.brand__amp {
  color: var(--primary);
  font-style: italic;
  font-weight: 400;
}

.topbar nav {
  display: flex;
  gap: 18px;
}

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.topbar nav a:hover {
  color: var(--primary);
}

.main-content {
  min-height: 80vh;
  padding: 40px 0;
}

.hero {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px 0;
}

.invite-shell {
  width: min(760px, 100%);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(18px);
  border-radius: 32px;
  box-shadow: var(--shadow);
  padding: 40px 28px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
}

.invite-shell::before,
.invite-shell::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(183,132,140,0.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.invite-shell::before {
  top: -80px;
  left: -70px;
}

.invite-shell::after {
  bottom: -100px;
  right: -70px;
}

.ornament {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.ornament-sm {
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.overline {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 10px;
  font-weight: 600;
  text-align: center;
}

.hero h1,
.invite-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.95;
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.hero p:not(.overline),
.invite-message {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 56ch;
  margin: 18px auto 0;
  text-align: left;
}

.invite-message p {
  margin: 0 0 1.1em;
  line-height: 1.8;
}

.invite-message p:last-child {
  margin-bottom: 0;
}

.invite-message strong { color: var(--text); font-weight: 600; }
.invite-message em { font-style: italic; }
.invite-message u { text-decoration: underline; }

.hero__date {
  font-size: 1.2rem;
  color: var(--secondary);
  margin-top: 15px;
  font-weight: 500;
}

.hero__venue {
  font-size: 1rem;
  color: var(--muted);
  margin-top: 5px;
}

.search-card,
.invite-card,
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.search-card {
  margin-top: 36px;
  padding: 24px;
}

.form-grid {
  display: grid;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

label {
  text-align: left;
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 20px;
  font-size: 1.05rem;
  outline: none;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

input::placeholder,
textarea::placeholder {
  color: #BBB1AC;
  transition: opacity 0.3s ease;
}

input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.5;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(183,132,140,0.12);
}

.form-group--check label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.form-group--check input[type="checkbox"] {
  width: auto;
  transform: scale(1.2);
}

button,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  padding: 0 32px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary), #c9979f);
  color: white;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(183,132,140,0.3);
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

button:hover,
.button-link:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 30px rgba(183,132,140,0.4);
}

.button-link--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

.button-link--outline:hover {
  background: var(--surface-2);
  box-shadow: none;
  transform: none;
}

.button-link--secondary {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

.button-link--secondary:hover {
  background: #ebe0d6;
  box-shadow: none;
  transform: none;
}

.btn-confirm {
  background: linear-gradient(135deg, var(--success), #669c78);
  box-shadow: 0 8px 20px rgba(78, 122, 93, 0.24);
}

.btn-confirm:hover {
  box-shadow: 0 10px 24px rgba(78, 122, 93, 0.3);
}

.btn-decline {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn-decline:hover {
  background: rgba(161, 78, 93, 0.05);
  color: var(--danger);
  border-color: var(--danger);
  box-shadow: none;
  transform: none;
}

.invite-card {
  padding: 40px 32px;
  margin: 0 auto;
  max-width: 780px;
  text-align: center;
}

.invite-head {
  text-align: center;
  margin-bottom: 30px;
}

.invite-guest-badge {
  margin-bottom: 12px;
}

.invite-guest-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--primary);
  margin-bottom: 20px;
  font-weight: 600;
}

.invite-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 36px;
  text-align: left;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  background: var(--surface-2);
  padding: 24px;
  border-radius: 20px;
}

.detail-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.detail-item__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.detail-item__label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.detail-item__value {
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.4;
}

.detail-item__sub {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 2px;
}

.badge {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(124,140,122,0.12);
  color: var(--secondary);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.badge--noiva {
  background: rgba(183,132,140,0.12);
  color: var(--primary);
}

.badge--sm {
  padding: 4px 10px;
  font-size: 0.75rem;
  margin-bottom: 0;
}

.invite-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 36px 0;
}

.meta-box {
  background: var(--surface-2);
  border-radius: 18px;
  padding: 20px;
  border: 1px solid var(--border);
}

.meta-box__label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.meta-box__value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}

.qr-box {
  margin-top: 36px;
  text-align: center;
  padding: 32px 24px;
  border: 1px dashed rgba(198,169,107,0.5);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(248,243,238,0.9));
}

.qr-frame img {
  width: min(240px, 100%);
  margin: 0 auto 16px;
  padding: 12px;
  background: white;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.qr-box__hint {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 250px;
  margin: 0 auto;
}

.rsvp-card, .rsvp-done {
  max-width: 780px;
  margin: 24px auto;
  padding: 40px 32px;
  text-align: center;
}

.rsvp-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

.admin-shell {
  display: grid;
  gap: 32px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.admin-header__sub {
  color: var(--muted);
  font-size: 1.1rem;
  margin-top: 4px;
}

.admin-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.stat-card {
  padding: 24px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.stat-card h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 500;
}

.stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: 2.2rem;
  font-family: 'Cormorant Garamond', serif;
  color: var(--text);
  line-height: 1;
}

.stat-card--success strong { color: var(--success); }
.stat-card--warning strong { color: #8B6B2A; }
.stat-card--danger strong { color: var(--danger); }
.stat-card--info strong { color: #4B7A9C; }

.table-card {
  overflow: auto;
  padding: 0;
}

.table-card .card-title {
  padding: 24px 24px 16px;
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
}

.table-scroll {
  padding: 0 24px 24px;
  overflow-x: auto;
}

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

th, td {
  text-align: left;
  padding: 16px 12px;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.td-name {
  font-weight: 500;
  color: var(--text);
}

.status {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.status.ok {
  background: rgba(78,122,93,0.12);
  color: var(--success);
}

.status.pending {
  background: rgba(198,169,107,0.16);
  color: #8B6B2A;
}

.status.no {
  background: rgba(161,78,93,0.12);
  color: var(--danger);
}

.td-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: var(--surface-2);
  border: none;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.2s ease;
  color: var(--text);
}

.action-btn:hover {
  background: #ebe0d6;
}

.action-btn--danger {
  color: var(--danger);
  background: rgba(161,78,93,0.1);
}

.action-btn--danger:hover {
  background: rgba(161,78,93,0.2);
}

.scanner-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 32px;
  border-radius: 32px;
  background: #1D1A19;
  color: #F8F3EE;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  text-align: center;
}

.scanner-shell__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.scanner-shell__hint {
  color: rgba(255,255,255,0.6);
  margin-bottom: 30px;
  font-size: 1.05rem;
}

.scanner-camera {
  margin-bottom: 24px;
}

#reader {
  overflow: hidden;
  border-radius: 24px;
  border: 2px solid rgba(255,255,255,0.1);
  margin: 0 auto;
  background: #000;
}

#reader video {
  border-radius: 22px;
  object-fit: cover;
}

.result-box {
  padding: 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  transition: all 0.3s ease;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.result-box__icon {
  font-size: 4rem;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}

.result-box h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  margin-bottom: 8px;
}

.result-box__name {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.result-box__details {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
}

.result-box--success {
  border: 1px solid rgba(78,122,93,0.45);
  background: rgba(78,122,93,0.15);
}

.result-box--success h3 {
  color: #8ed6a9;
}

.result-box--error {
  border: 1px solid rgba(161,78,93,0.45);
  background: rgba(161,78,93,0.15);
}

.result-box--error h3 {
  color: #eba2b1;
}

.result-box--pending {
  border: 1px solid rgba(198,169,107,0.45);
}

.auth-page {
  display: grid;
  place-items: center;
}

.scanner-page {
  padding: 40px 20px;
  min-height: 80vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.auth-subtitle {
  text-align: center;
  color: var(--muted);
  margin-bottom: 24px;
}

.form-card {
  max-width: 680px;
  margin: 40px auto;
  padding: 64px 56px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 32px;
}

.form-card .card-title {
  margin-top: 10px;
  margin-bottom: 32px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.form-group {
  margin-bottom: 28px;
  text-align: left; /* Keep labels and inputs left-aligned */
}

.form-group label {
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.form-card button[type="submit"] {
  width: 100%;
  margin-top: 12px;
}

.form-card .section-title {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.form-card .ornament-sm {
  text-align: center;
  margin-bottom: 15px;
}

.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.preset-item {
  padding: 40px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.3s ease;
  position: relative;
}

.preset-item:hover {
  background: #fff;
  transform: translateX(5px);
}

.preset-item:last-child {
  border-bottom: none;
}

.preset-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 24px;
}

.preset-item__header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  color: var(--primary);
  margin: 0;
  line-height: 1.1;
  font-weight: 600;
}

.preset-item__body {
  color: var(--muted);
  line-height: 2;
  margin: 0;
  font-size: 1.15rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  background: rgba(47, 42, 40, 0.02);
  padding: 24px;
  border-radius: 16px;
  border-left: 3px solid var(--accent);
  max-width: 100%;
}

/* ========================
   AUTOCOMPLETE
   ======================== */
.ac-wrap {
  position: relative;
}

.ac-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
}

.ac-list:empty {
  display: none;
}

.ac-item {
  padding: 11px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
  transition: background 0.13s;
  text-align: left;
}

.ac-item:hover,
.ac-item--active {
  background: var(--surface-2);
  color: var(--primary);
}

/* ========================
   FILE INPUT ESTILIZADO
   ======================== */
.file-input-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.file-input-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 48px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
  user-select: none;
}

.file-input-btn:hover {
  border-color: var(--accent);
  background: rgba(198,169,107,0.07);
}

.file-input-btn__icon {
  font-size: 1rem;
}

.file-input-name {
  font-size: 0.9rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.alert {
  padding: 16px 20px;
  border-radius: 16px;
  margin-top: 24px;
  font-size: 0.95rem;
}

.alert--error {
  background: rgba(161,78,93,0.08);
  color: var(--danger);
  border: 1px solid rgba(161,78,93,0.2);
}

.countdown {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 48px;
}

.countdown__item {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  min-width: 90px;
  text-align: center;
}

.countdown__num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 6px;
}

.countdown__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.1em;
  font-weight: 500;
}

.footer {
  text-align: center;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}

.footer__text {
  color: var(--muted);
  font-size: 0.95rem;
}

.fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================
   FOTO DO CASAL
   ======================== */
.couple-photo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.couple-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  box-shadow: 0 8px 32px rgba(198,169,107,0.25);
}

.countdown-done {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-style: italic;
  color: var(--primary);
  text-align: center;
  margin-top: 32px;
  animation: fadeIn 1s ease forwards;
}

/* ========================
   TABLET (≤ 1024px)
   ======================== */
@media (max-width: 1024px) {
  .form-card {
    padding: 48px 40px;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================
   MOBILE LARGE (≤ 768px)
   ======================== */
@media (max-width: 768px) {
  /* Topbar */
  .topbar .container {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }

  .topbar nav {
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .topbar nav a {
    font-size: 0.88rem;
  }

  /* Layout */
  .main-content {
    padding: 24px 0;
  }

  .hero {
    min-height: auto;
    padding: 28px 0;
  }

  .admin-shell {
    gap: 20px;
  }

  /* Cards */
  .invite-shell {
    padding: 32px 20px;
    border-radius: 24px;
  }

  .invite-card,
  .rsvp-card,
  .rsvp-done {
    padding: 32px 20px;
    border-radius: 24px;
  }

  .form-card {
    padding: 32px 20px;
    border-radius: 24px;
    margin: 20px auto;
  }

  .scanner-shell {
    padding: 28px 20px;
    border-radius: 24px;
  }

  .scanner-shell__title {
    font-size: 2rem;
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  /* RSVP */
  .rsvp-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .rsvp-actions button {
    width: 100%;
  }

  /* Countdown */
  .countdown {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .countdown__item {
    min-width: 72px;
    padding: 14px 10px;
  }

  .countdown__num {
    font-size: 2rem;
  }

  /* Admin */
  .admin-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-actions .button-link {
    font-size: 0.88rem;
    padding: 0 16px;
    min-height: 44px;
  }

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

  .stat-card {
    padding: 18px;
  }

  .stat-card strong {
    font-size: 1.9rem;
  }

  /* Table */
  .table-scroll {
    padding: 0 12px 16px;
  }

  th, td {
    padding: 12px 8px;
    font-size: 0.88rem;
  }

  /* Presets */
  .preset-item {
    padding: 24px 20px;
  }

  .preset-item__header {
    flex-direction: column;
    gap: 10px;
  }

  .preset-item__header h3 {
    font-size: 1.6rem;
  }

  .preset-item__body {
    padding: 16px;
    font-size: 1rem;
  }

  /* Invite details */
  .invite-details {
    max-width: 100%;
  }
}

/* ========================
   MOBILE SMALL (≤ 480px)
   ======================== */
@media (max-width: 480px) {
  /* Typography */
  .hero h1,
  .invite-title {
    font-size: 2.6rem;
  }

  .brand {
    font-size: 1.7rem;
  }

  .form-card .card-title {
    font-size: 2.2rem;
  }

  .invite-guest-name {
    font-size: 2rem;
  }

  /* Buttons */
  button,
  .button-link {
    font-size: 1rem;
    padding: 0 22px;
    min-height: 50px;
  }

  /* Countdown */
  .countdown {
    gap: 8px;
  }

  .countdown__item {
    min-width: 60px;
    padding: 12px 8px;
  }

  .countdown__num {
    font-size: 1.7rem;
  }

  .countdown__label {
    font-size: 0.7rem;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Invite meta */
  .invite-meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .meta-box {
    padding: 14px;
  }

  /* QR */
  .qr-box {
    padding: 20px 14px;
  }

  /* Scanner result */
  .result-box__details {
    flex-direction: column;
    gap: 6px;
  }

  /* Table */
  table {
    font-size: 0.83rem;
  }

  th, td {
    padding: 10px 6px;
  }

  .td-actions {
    flex-wrap: wrap;
    gap: 4px;
  }

  .action-btn {
    width: 32px;
    height: 32px;
    font-size: 0.88rem;
  }
}

/* ========================
   MUITO PEQUENO (≤ 360px)
   ======================== */
@media (max-width: 360px) {
  /* Topbar */
  .topbar nav {
    gap: 8px;
  }

  .topbar nav a {
    font-size: 0.82rem;
  }

  /* Typography */
  .hero h1,
  .invite-title {
    font-size: 2.1rem;
  }

  .invite-guest-name {
    font-size: 1.7rem;
  }

  /* Cards */
  .invite-card,
  .rsvp-card,
  .rsvp-done,
  .form-card,
  .invite-shell,
  .scanner-shell {
    padding: 22px 14px;
  }

  /* Countdown: vira grade 2x2 */
  .countdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .countdown__item {
    min-width: unset;
    width: 100%;
  }

  .countdown__num {
    font-size: 1.5rem;
  }

  /* Stats: 1 coluna */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Invite meta: 1 coluna */
  .invite-meta {
    grid-template-columns: 1fr;
  }

  /* Buttons */
  button,
  .button-link {
    font-size: 0.95rem;
    min-height: 48px;
  }
}

/* ========================
   DARK MODE
   Ativado via [data-theme="dark"] no <html> (toggle JS)
   OU automaticamente quando o SO usa tema escuro
   (exceto se o usuário escolheu claro explicitamente).
   ======================== */

/* — variáveis dark: preferência do sistema — */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1614;
    --surface: #231F1D;
    --surface-2: #2A2522;
    --text: #EDE8E3;
    --muted: #9E9189;
    --primary: #C9909A;
    --secondary: #8EA08C;
    --accent: #D4B872;
    --border: rgba(255,255,255,0.08);
    --success: #6AAB7A;
    --danger: #C46B7A;
    --shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
}

/* — variáveis dark: modo manual — */
:root[data-theme="dark"] {
  --bg: #1A1614;
  --surface: #231F1D;
  --surface-2: #2A2522;
  --text: #EDE8E3;
  --muted: #9E9189;
  --primary: #C9909A;
  --secondary: #8EA08C;
  --accent: #D4B872;
  --border: rgba(255,255,255,0.08);
  --success: #6AAB7A;
  --danger: #C46B7A;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* — estilos de elementos: sistema — */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body {
    background:
      radial-gradient(circle at top, rgba(212,184,114,0.06), transparent 30%),
      linear-gradient(180deg, #1E1A18 0%, var(--bg) 100%);
  }
  html:not([data-theme="light"]) .topbar {
    background: rgba(26,22,20,0.82);
  }
  html:not([data-theme="light"]) input,
  html:not([data-theme="light"]) textarea,
  html:not([data-theme="light"]) select {
    background: var(--surface-2); color: var(--text); border-color: var(--border);
  }
  html:not([data-theme="light"]) input::placeholder,
  html:not([data-theme="light"]) textarea::placeholder { color: var(--muted); }
  html:not([data-theme="light"]) .card { background: var(--surface); border-color: var(--border); }
  html:not([data-theme="light"]) .invite-shell,
  html:not([data-theme="light"]) .invite-card,
  html:not([data-theme="light"]) .rsvp-card,
  html:not([data-theme="light"]) .rsvp-done,
  html:not([data-theme="light"]) .form-card,
  html:not([data-theme="light"]) .scanner-shell { background: rgba(35,31,29,0.85); border-color: var(--border); }
  html:not([data-theme="light"]) .meta-box { background: var(--surface-2); }
  html:not([data-theme="light"]) .countdown__item { background: var(--surface); border-color: var(--border); }
  html:not([data-theme="light"]) .qr-box { background: linear-gradient(180deg, rgba(35,31,29,0.8), rgba(26,22,20,0.9)); border-color: rgba(212,184,114,0.2); }
  html:not([data-theme="light"]) .qr-frame img { background: #F8F3EE; }
  html:not([data-theme="light"]) table { color: var(--text); }
  html:not([data-theme="light"]) thead { background: var(--surface-2); }
  html:not([data-theme="light"]) tbody tr:nth-child(even) { background: var(--surface-2); }
  html:not([data-theme="light"]) tbody tr:hover { background: rgba(212,184,114,0.06); }
  html:not([data-theme="light"]) .stat-card { background: var(--surface); border-color: var(--border); }
  html:not([data-theme="light"]) .preset-item__body { background: var(--surface-2); border-color: var(--border); }
  html:not([data-theme="light"]) .result-box--success { background: rgba(106,171,122,0.12); border-color: rgba(106,171,122,0.3); }
  html:not([data-theme="light"]) .result-box--error { background: rgba(196,107,122,0.12); border-color: rgba(196,107,122,0.3); }
  html:not([data-theme="light"]) .result-box--pending { background: rgba(139,107,42,0.12); border-color: rgba(139,107,42,0.3); }
  html:not([data-theme="light"]) .ac-list { background: var(--surface); border-color: var(--border); }
  html:not([data-theme="light"]) .ac-item:hover,
  html:not([data-theme="light"]) .ac-item--active { background: var(--surface-2); }
}

/* — estilos de elementos: modo manual — */
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top, rgba(212,184,114,0.06), transparent 30%),
    linear-gradient(180deg, #1E1A18 0%, var(--bg) 100%);
}
html[data-theme="dark"] .topbar { background: rgba(26,22,20,0.82); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--muted); }
html[data-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .invite-shell,
html[data-theme="dark"] .invite-card,
html[data-theme="dark"] .rsvp-card,
html[data-theme="dark"] .rsvp-done,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .scanner-shell { background: rgba(35,31,29,0.85); border-color: var(--border); }
html[data-theme="dark"] .meta-box { background: var(--surface-2); }
html[data-theme="dark"] .countdown__item { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .qr-box { background: linear-gradient(180deg, rgba(35,31,29,0.8), rgba(26,22,20,0.9)); border-color: rgba(212,184,114,0.2); }
html[data-theme="dark"] .qr-frame img { background: #F8F3EE; }
html[data-theme="dark"] table { color: var(--text); }
html[data-theme="dark"] thead { background: var(--surface-2); }
html[data-theme="dark"] tbody tr:nth-child(even) { background: var(--surface-2); }
html[data-theme="dark"] tbody tr:hover { background: rgba(212,184,114,0.06); }
html[data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .preset-item__body { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .result-box--success { background: rgba(106,171,122,0.12); border-color: rgba(106,171,122,0.3); }
html[data-theme="dark"] .result-box--error { background: rgba(196,107,122,0.12); border-color: rgba(196,107,122,0.3); }
html[data-theme="dark"] .result-box--pending { background: rgba(139,107,42,0.12); border-color: rgba(139,107,42,0.3); }
html[data-theme="dark"] .ac-list { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .ac-item:hover,
html[data-theme="dark"] .ac-item--active { background: var(--surface-2); }

/* Botão CTA na topbar (landing) */
.btn-nav-primary {
  background: linear-gradient(135deg, var(--primary), #c9979f);
  color: white !important;
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}
.btn-nav-primary:hover { opacity: .85; }

/* — botão de toggle — */
.theme-toggle {
  background: none;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.2s, background 0.2s;
  min-height: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.theme-toggle:hover {
  opacity: 1;
  background: var(--surface-2);
}

/* ════════════════════════════════════════════════
   TEMAS DE CASAMENTO
   ════════════════════════════════════════════════ */

/* ── MODERNO ── */
html[data-wedding-theme="moderno"] {
  --bg: #F0F4F8;
  --surface: #FFFFFF;
  --surface-2: #E8EDF4;
  --text: #1A1A2E;
  --muted: #5A6A7A;
  --primary: #2563EB;
  --secondary: #3B82F6;
  --accent: #2563EB;
  --border: rgba(26,26,46,0.12);
  --success: #16A34A;
  --danger: #DC2626;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(26,26,46,0.10);
}
html[data-wedding-theme="moderno"] body {
  background: linear-gradient(180deg, #F0F4F8 0%, #E2EAF4 100%);
  font-family: 'Inter', sans-serif;
}
html[data-wedding-theme="moderno"] .brand,
html[data-wedding-theme="moderno"] .hero h1,
html[data-wedding-theme="moderno"] .invite-title,
html[data-wedding-theme="moderno"] .invite-guest-name,
html[data-wedding-theme="moderno"] .section-title,
html[data-wedding-theme="moderno"] .card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
html[data-wedding-theme="moderno"] button,
html[data-wedding-theme="moderno"] .button-link {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  box-shadow: 0 6px 20px rgba(37,99,235,0.30);
  border-radius: 8px;
}
html[data-wedding-theme="moderno"] .invite-shell {
  border-radius: 16px;
}
html[data-wedding-theme="moderno"] .overline { color: #2563EB; }
html[data-wedding-theme="moderno"] .brand__amp { color: #2563EB; }
html[data-wedding-theme="moderno"] .couple-photo { border-color: #2563EB; }
html[data-wedding-theme="moderno"] .countdown__num { color: #2563EB; }

/* ── RUSTICO ── */
html[data-wedding-theme="rustico"] {
  --bg: #F5EFE6;
  --surface: #FDFAF6;
  --surface-2: #EDE5D8;
  --text: #3D2B1F;
  --muted: #7A5C4A;
  --primary: #92400E;
  --secondary: #5C7A3E;
  --accent: #A16207;
  --border: rgba(61,43,31,0.12);
  --success: #4A7A35;
  --danger: #8B1A1A;
  --radius: 20px;
  --shadow: 0 8px 24px rgba(61,43,31,0.10);
}
html[data-wedding-theme="rustico"] body {
  background:
    radial-gradient(circle at top, rgba(160,82,45,0.08), transparent 30%),
    linear-gradient(180deg, #FDF8F2 0%, #F5EFE6 100%);
}
html[data-wedding-theme="rustico"] button,
html[data-wedding-theme="rustico"] .button-link {
  background: linear-gradient(135deg, #92400E, #A16207);
  box-shadow: 0 8px 20px rgba(146,64,14,0.28);
}
html[data-wedding-theme="rustico"] .overline { color: #A16207; }
html[data-wedding-theme="rustico"] .brand__amp { color: #92400E; }
html[data-wedding-theme="rustico"] .couple-photo { border-color: #A16207; }
html[data-wedding-theme="rustico"] .countdown__num { color: #92400E; }
html[data-wedding-theme="rustico"] .topbar { background: rgba(253,250,246,0.80); }

/* ── MINIMALISTA ── */
html[data-wedding-theme="minimalista"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F5;
  --text: #111111;
  --muted: #666666;
  --primary: #111111;
  --secondary: #444444;
  --accent: #111111;
  --border: rgba(0,0,0,0.10);
  --success: #166534;
  --danger: #991B1B;
  --radius: 8px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
}
html[data-wedding-theme="minimalista"] body {
  background: #FFFFFF;
}
html[data-wedding-theme="minimalista"] .brand {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: 0.12em;
  font-size: 1.4rem;
  text-transform: uppercase;
}
html[data-wedding-theme="minimalista"] .hero h1,
html[data-wedding-theme="minimalista"] .invite-title {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
}
html[data-wedding-theme="minimalista"] button,
html[data-wedding-theme="minimalista"] .button-link {
  background: #111111;
  box-shadow: none;
  border-radius: 4px;
}
html[data-wedding-theme="minimalista"] button:hover,
html[data-wedding-theme="minimalista"] .button-link:hover {
  background: #333333;
  transform: none;
  box-shadow: none;
}
html[data-wedding-theme="minimalista"] .invite-shell {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  box-shadow: none;
  border-radius: 4px;
}
html[data-wedding-theme="minimalista"] .overline {
  color: #666666;
  letter-spacing: 0.3em;
}
html[data-wedding-theme="minimalista"] .brand__amp { color: #666666; font-style: normal; }
html[data-wedding-theme="minimalista"] .couple-photo { border-color: #111111; }
html[data-wedding-theme="minimalista"] .countdown__num { color: #111111; }
html[data-wedding-theme="minimalista"] .topbar { background: rgba(255,255,255,0.92); }
html[data-wedding-theme="minimalista"] .card,
html[data-wedding-theme="minimalista"] .search-card,
html[data-wedding-theme="minimalista"] .invite-card { box-shadow: none; border-radius: 4px; }

/* ════════════════════════════════════════════════
   PÁGINA DO CASAL — SEÇÕES RICAS
   ════════════════════════════════════════════════ */

.couple-section {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}

.couple-section__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text);
  text-align: center;
  margin: 0 0 12px;
}

.couple-section__divider {
  width: 48px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 48px;
  border: none;
}

/* Nossa história */
.our-story-text {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--muted);
  text-align: center;
}

/* Galeria */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  background: var(--surface-2);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-item__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: white;
  font-size: 0.85rem;
  padding: 24px 12px 10px;
  text-align: center;
}

/* Timeline */
.timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 32px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-event {
  position: relative;
  margin-bottom: 48px;
}

.timeline-dot {
  position: absolute;
  left: -26px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent);
}

.timeline-date {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.timeline-event h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  margin: 0 0 8px;
  color: var(--text);
  font-weight: 600;
}

.timeline-event p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 12px;
}

.timeline-event img {
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius);
  margin-top: 12px;
}

/* Mapa */
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.map-embed iframe {
  width: 100%;
  height: 380px;
  display: block;
  border: none;
}

/* Galeria admin */
.gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.gallery-admin-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--surface-2);
}

.gallery-admin-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-admin-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.gallery-admin-item:hover .gallery-admin-item__overlay {
  opacity: 1;
}

/* Seletor de tema */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.theme-option {
  position: relative;
}

.theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.theme-option label {
  display: block;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}

.theme-option input[type="radio"]:checked + label {
  border-color: var(--primary);
  background: rgba(183,132,140,0.06);
}

.theme-option label:hover {
  border-color: var(--primary);
}

.theme-preview {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.theme-preview--classico  { background: linear-gradient(135deg, #F8F3EE, #C6A96B33); }
.theme-preview--moderno   { background: linear-gradient(135deg, #EFF6FF, #2563EB33); }
.theme-preview--rustico   { background: linear-gradient(135deg, #FDF8F2, #92400E33); }
.theme-preview--minimalista { background: #F5F5F5; border: 1px solid #E0E0E0; }

.theme-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.theme-tag {
  font-size: 0.75rem;
  color: var(--success);
  font-weight: 500;
}

/* WhatsApp bulk */
.wa-table td { vertical-align: middle; }
.wa-link-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-all-btn { margin-bottom: 16px; }

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .theme-picker { grid-template-columns: repeat(2, 1fr); }
  .timeline { padding-left: 24px; }
  .map-embed iframe { height: 260px; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .timeline-event h3 { font-size: 1.3rem; }
}

/* ════════════════════════════════════════════════
   DARK MODE POR TEMA DE CASAMENTO
   Seletores combinados garantem que o dark mode
   respeite a paleta de cada tema wedding.
   ════════════════════════════════════════════════ */

/* ── CLASSICO DARK (tema padrão — dark mode já cobre via :root[data-theme="dark"]) ── */

/* ── MODERNO DARK ── */
html[data-wedding-theme="moderno"][data-theme="dark"] {
  --bg: #0D1520;
  --surface: #131E2E;
  --surface-2: #1A2840;
  --text: #E2EAF8;
  --muted: #7A90B0;
  --primary: #60A5FA;
  --secondary: #93C5FD;
  --accent: #60A5FA;
  --border: rgba(96,165,250,0.15);
  --success: #34D399;
  --danger: #F87171;
  --shadow: 0 4px 20px rgba(0,0,0,0.35);
}
html[data-wedding-theme="moderno"][data-theme="dark"] body {
  background: linear-gradient(180deg, #0D1520 0%, #0A1018 100%);
}
html[data-wedding-theme="moderno"][data-theme="dark"] .topbar {
  background: rgba(13,21,32,0.90);
}
html[data-wedding-theme="moderno"][data-theme="dark"] button,
html[data-wedding-theme="moderno"][data-theme="dark"] .button-link {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  box-shadow: 0 6px 20px rgba(37,99,235,0.40);
}
html[data-wedding-theme="moderno"][data-theme="dark"] input,
html[data-wedding-theme="moderno"][data-theme="dark"] textarea,
html[data-wedding-theme="moderno"][data-theme="dark"] select {
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
html[data-wedding-theme="moderno"][data-theme="dark"] .card,
html[data-wedding-theme="moderno"][data-theme="dark"] .invite-shell,
html[data-wedding-theme="moderno"][data-theme="dark"] .invite-card,
html[data-wedding-theme="moderno"][data-theme="dark"] .form-card { background: var(--surface); border-color: var(--border); }
html[data-wedding-theme="moderno"][data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--border); }
html[data-wedding-theme="moderno"][data-theme="dark"] .countdown__item { background: var(--surface); border-color: var(--border); }
html[data-wedding-theme="moderno"][data-theme="dark"] table { color: var(--text); }
html[data-wedding-theme="moderno"][data-theme="dark"] thead { background: var(--surface-2); }
html[data-wedding-theme="moderno"][data-theme="dark"] tbody tr:nth-child(even) { background: var(--surface-2); }

/* ── RUSTICO DARK ── */
html[data-wedding-theme="rustico"][data-theme="dark"] {
  --bg: #150D08;
  --surface: #1E1209;
  --surface-2: #28180E;
  --text: #F0E8DC;
  --muted: #9A7A62;
  --primary: #D97706;
  --secondary: #78A55A;
  --accent: #D97706;
  --border: rgba(217,119,6,0.18);
  --success: #5AAB3A;
  --danger: #DC4040;
  --shadow: 0 8px 24px rgba(0,0,0,0.40);
}
html[data-wedding-theme="rustico"][data-theme="dark"] body {
  background: radial-gradient(circle at top, rgba(217,119,6,0.06), transparent 30%),
              linear-gradient(180deg, #1A0E07 0%, #150D08 100%);
}
html[data-wedding-theme="rustico"][data-theme="dark"] .topbar {
  background: rgba(21,13,8,0.90);
}
html[data-wedding-theme="rustico"][data-theme="dark"] button,
html[data-wedding-theme="rustico"][data-theme="dark"] .button-link {
  background: linear-gradient(135deg, #92400E, #D97706);
  box-shadow: 0 8px 20px rgba(146,64,14,0.45);
}
html[data-wedding-theme="rustico"][data-theme="dark"] input,
html[data-wedding-theme="rustico"][data-theme="dark"] textarea,
html[data-wedding-theme="rustico"][data-theme="dark"] select {
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
html[data-wedding-theme="rustico"][data-theme="dark"] .card,
html[data-wedding-theme="rustico"][data-theme="dark"] .invite-shell,
html[data-wedding-theme="rustico"][data-theme="dark"] .invite-card,
html[data-wedding-theme="rustico"][data-theme="dark"] .form-card { background: var(--surface); border-color: var(--border); }
html[data-wedding-theme="rustico"][data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--border); }
html[data-wedding-theme="rustico"][data-theme="dark"] .countdown__item { background: var(--surface); border-color: var(--border); }
html[data-wedding-theme="rustico"][data-theme="dark"] table { color: var(--text); }
html[data-wedding-theme="rustico"][data-theme="dark"] thead { background: var(--surface-2); }
html[data-wedding-theme="rustico"][data-theme="dark"] tbody tr:nth-child(even) { background: var(--surface-2); }

/* ── MINIMALISTA DARK ── */
html[data-wedding-theme="minimalista"][data-theme="dark"] {
  --bg: #0A0A0A;
  --surface: #111111;
  --surface-2: #1A1A1A;
  --text: #F0F0F0;
  --muted: #888888;
  --primary: #FFFFFF;
  --secondary: #CCCCCC;
  --accent: #FFFFFF;
  --border: rgba(255,255,255,0.10);
  --success: #5FD475;
  --danger: #F47070;
  --shadow: 0 2px 12px rgba(0,0,0,0.50);
}
html[data-wedding-theme="minimalista"][data-theme="dark"] body {
  background: #0A0A0A;
}
html[data-wedding-theme="minimalista"][data-theme="dark"] .topbar {
  background: rgba(10,10,10,0.95);
  border-bottom-color: rgba(255,255,255,0.08);
}
html[data-wedding-theme="minimalista"][data-theme="dark"] button,
html[data-wedding-theme="minimalista"][data-theme="dark"] .button-link {
  background: #FFFFFF;
  color: #111111;
  box-shadow: none;
  border-radius: 4px;
}
html[data-wedding-theme="minimalista"][data-theme="dark"] button:hover,
html[data-wedding-theme="minimalista"][data-theme="dark"] .button-link:hover {
  background: #E0E0E0;
  transform: none;
  box-shadow: none;
}
html[data-wedding-theme="minimalista"][data-theme="dark"] input,
html[data-wedding-theme="minimalista"][data-theme="dark"] textarea,
html[data-wedding-theme="minimalista"][data-theme="dark"] select {
  background: #1A1A1A; color: #F0F0F0; border-color: rgba(255,255,255,0.12);
}
html[data-wedding-theme="minimalista"][data-theme="dark"] .card,
html[data-wedding-theme="minimalista"][data-theme="dark"] .invite-shell,
html[data-wedding-theme="minimalista"][data-theme="dark"] .invite-card,
html[data-wedding-theme="minimalista"][data-theme="dark"] .form-card {
  background: #111111; border-color: rgba(255,255,255,0.08); box-shadow: none;
}
html[data-wedding-theme="minimalista"][data-theme="dark"] .stat-card {
  background: #111111; border-color: rgba(255,255,255,0.08);
}
html[data-wedding-theme="minimalista"][data-theme="dark"] .countdown__item {
  background: #111111; border-color: rgba(255,255,255,0.08);
}
html[data-wedding-theme="minimalista"][data-theme="dark"] table { color: #F0F0F0; }
html[data-wedding-theme="minimalista"][data-theme="dark"] thead { background: #1A1A1A; }
html[data-wedding-theme="minimalista"][data-theme="dark"] tbody tr:nth-child(even) { background: #161616; }
html[data-wedding-theme="minimalista"][data-theme="dark"] .overline { color: #999999; }
html[data-wedding-theme="minimalista"][data-theme="dark"] .brand__amp { color: #888888; }