@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  body { margin: 0; min-height: 100vh; }
  button, input, select, textarea { font: inherit; }
  button { cursor: pointer; }
  img, svg { max-width: 100%; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --brand-900: #4c1320;
    --brand-800: #641b2b;
    --brand-700: #7a2337;
    --brand-600: #8b2e45;
    --brand-500: #a34b62;
    --brand-200: #e7c7cf;
    --brand-100: #f7edf0;
    --gray-950: #20231f;
    --gray-800: #3f443f;
    --gray-600: #686f68;
    --gray-400: #9ea59d;
    --gray-200: #dfe3de;
    --gray-100: #f2f4f1;
    --paper: #fffefb;
    --danger: #a8403d;
    --warning: #a4661d;
    --success: #3e7450;
    --shadow: 0 18px 48px rgba(47, 56, 43, .12);
    --radius: 18px;
    --radius-sm: 12px;
  }
  html[data-palette="serenity"] {
    --brand-900: #2f443a; --brand-800: #3d584b; --brand-700: #4e6d5b;
    --brand-600: #5d7c69; --brand-500: #77917f; --brand-200: #cfe0d5; --brand-100: #edf4ef;
  }
  html[data-palette="classic"] {
    --brand-900: #142a4a; --brand-800: #1b365d; --brand-700: #224575;
    --brand-600: #2b568d; --brand-500: #4770a3; --brand-200: #e5d7b7; --brand-100: #f7f2e8;
  }
  html[data-palette="terracotta"] {
    --brand-900: #5a2e26; --brand-800: #743b30; --brand-700: #8e493a;
    --brand-600: #a45743; --brand-500: #bc715b; --brand-200: #e9c9bd; --brand-100: #f8eee9;
  }
  html[data-theme="dark"] {
    color-scheme: dark;
    --paper: #1f241e;
    --gray-950: #f5f6f2;
    --gray-800: #e1e4dc;
    --gray-600: #b4b9b0;
    --gray-400: #747b73;
    --gray-200: #3b4239;
    --gray-100: #292f28;
    --brand-100: color-mix(in srgb, var(--brand-600) 17%, #1f241e);
    --brand-200: color-mix(in srgb, var(--brand-600) 30%, #1f241e);
    --shadow: 0 18px 48px rgba(0, 0, 0, .3);
  }
}

@layer base {
  body { background: var(--gray-100); color: var(--gray-950); }
  h1, h2, h3, p { margin-top: 0; }
  h1 { font-size: clamp(1.55rem, 3vw, 2.25rem); margin-bottom: .2rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1rem; }
  a { color: var(--brand-700); }
  label { display: grid; gap: .42rem; color: var(--gray-800); font-size: .88rem; font-weight: 650; }
  input, select, textarea {
    width: 100%; border: 1px solid var(--gray-200); background: var(--paper); color: var(--gray-950);
    border-radius: 11px; padding: .78rem .85rem; outline: none; transition: border-color .15s, box-shadow .15s;
  }
  input:focus, select:focus, textarea:focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 20%, transparent); }
  input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
  form[aria-busy="true"] { cursor: progress; }
  textarea { min-height: 92px; resize: vertical; }
  :focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-600) 38%, transparent); outline-offset: 2px; }
  html[data-font-pair="editorial"] h1, html[data-font-pair="editorial"] h2, html[data-font-pair="editorial"] h3 { font-family: Georgia, "Times New Roman", serif; }
  html[data-font-pair="classic"] h1, html[data-font-pair="classic"] h2, html[data-font-pair="classic"] h3 { font-family: "Times New Roman", Times, serif; letter-spacing: .015em; }
  html[data-font-pair="modern"] h1, html[data-font-pair="modern"] h2, html[data-font-pair="modern"] h3 { font-family: Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.025em; }
  html[data-font-pair="organic"] h1, html[data-font-pair="organic"] h2, html[data-font-pair="organic"] h3 { font-family: "Trebuchet MS", ui-sans-serif, system-ui, sans-serif; }
}

@layer layout {
  .login-view { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at top, var(--brand-100), var(--gray-100) 54%); }
  .login-card { width: min(430px, 100%); padding: clamp(1.35rem, 4vw, 2.25rem); border: 1px solid var(--gray-200); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
  .app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.25rem; background: var(--brand-900); color: #fff; z-index: 40; }
  .sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: .35rem .3rem 1.4rem; }
  .sidebar-brand small { display: block; opacity: .72; margin-top: .15rem; }
  .nav-list { display: grid; gap: .35rem; }
  .nav-list button { display: flex; align-items: center; gap: .8rem; border: 0; border-radius: 12px; padding: .82rem .9rem; color: rgba(255,255,255,.82); background: transparent; text-align: left; }
  .nav-list button:hover, .nav-list button.active { color: #fff; background: rgba(255,255,255,.13); }
  .sidebar-footer { margin-top: auto; display: grid; gap: .75rem; }
  .content-shell { min-width: 0; }
  .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; justify-content: space-between; min-height: 90px; padding: 1rem clamp(1rem, 3vw, 2.25rem); border-bottom: 1px solid var(--gray-200); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(14px); }
  .page-content { padding: clamp(1rem, 3vw, 2.25rem); max-width: 1500px; margin: 0 auto; }
  .grid { display: grid; gap: 1rem; }
  .grid.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
  .form-grid .span-2 { grid-column: 1 / -1; }
  .section-stack { display: grid; gap: 1rem; }
  .toolbar { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; justify-content: space-between; }
  .toolbar-group { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
  .table-wrap { overflow-x: auto; }
  .backdrop { position: fixed; inset: 0; z-index: 35; border: 0; background: rgba(0,0,0,.4); }
}

@layer components {
  .brand-mark { display: grid; place-items: center; width: 54px; aspect-ratio: 1; border-radius: 50%; background: var(--brand-600); color: #fff; font-size: 1.4rem; margin-bottom: 1.15rem; }
  .brand-mark.small { width: 38px; margin: 0; background: rgba(255,255,255,.14); }
  .eyebrow { margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 800; color: var(--brand-600); }
  .muted { color: var(--gray-600); }
  .form-stack { display: grid; gap: 1rem; margin-top: 1.5rem; }
  .button { border: 1px solid transparent; border-radius: 11px; padding: .72rem 1rem; font-weight: 750; transition: transform .12s, background .12s; }
  .button:hover { transform: translateY(-1px); }
  .button.primary { background: var(--brand-600); color: #fff; }
  .button.primary:hover { background: var(--brand-700); }
  .button.secondary { color: var(--brand-800); background: var(--brand-100); border-color: var(--brand-200); }
  .button.ghost { background: transparent; border-color: color-mix(in srgb, currentColor 25%, transparent); color: inherit; }
  .button.danger { color: #fff; background: var(--danger); }
  .button.small { padding: .48rem .68rem; font-size: .82rem; }
  .button.full { width: 100%; }
  .icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: inherit; }
  .icon-button:hover { background: var(--gray-100); }
  .card { background: var(--paper); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.1rem; box-shadow: 0 8px 24px rgba(42,50,39,.05); }
  .metric-card strong { display: block; margin-top: .35rem; font-size: clamp(1.35rem, 3vw, 2rem); }
  .metric-card small { color: var(--gray-600); }
  .hero-card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand-800), var(--brand-600)); color: #fff; padding: clamp(1.2rem, 4vw, 2rem); }
  .hero-card .eyebrow, .hero-card .muted { color: rgba(255,255,255,.78); }
  .progress { height: 9px; overflow: hidden; background: var(--gray-200); border-radius: 99px; }
  .progress > span { display: block; height: 100%; background: var(--brand-600); border-radius: inherit; }
  .badge { display: inline-flex; align-items: center; gap: .3rem; width: fit-content; padding: .28rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 800; background: var(--gray-100); color: var(--gray-800); }
  .badge.success { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--paper)); }
  .badge.warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--paper)); }
  .badge.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--paper)); }
  table { width: 100%; border-collapse: collapse; min-width: 760px; }
  th, td { padding: .82rem .72rem; text-align: left; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
  th { font-size: .75rem; color: var(--gray-600); text-transform: uppercase; letter-spacing: .06em; }
  .row-actions { display: flex; gap: .35rem; justify-content: flex-end; }
  .empty-state { text-align: center; padding: 2.4rem 1rem; color: var(--gray-600); }
  .list-card { display: grid; gap: .8rem; }
  .list-card-header { display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between; }
  .list-card-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
  .payment-list { display: grid; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--gray-200); }
  .payment-row { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .6rem; border-radius: 10px; background: var(--gray-100); }
  .check-item { display: flex; gap: .9rem; align-items: flex-start; }
  .check-item input { width: 22px; height: 22px; margin-top: .2rem; accent-color: var(--brand-600); }
  .modal { border: 0; padding: 0; background: transparent; width: min(760px, calc(100% - 1.25rem)); max-height: calc(100vh - 1.25rem); }
  .modal::backdrop { background: rgba(19,24,18,.58); backdrop-filter: blur(3px); }
  .modal-card { margin: 0; max-height: calc(100vh - 1.25rem); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--gray-200); border-radius: 22px; background: var(--paper); color: var(--gray-950); box-shadow: var(--shadow); }
  .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid var(--gray-200); }
  .modal-body { padding: 1.1rem; min-height: 0; max-height: calc(100vh - 120px); overflow: auto; scroll-padding: 1rem 0 6rem; }
  .modal-actions { display: flex; justify-content: flex-end; gap: .65rem; padding-top: 1rem; }
  .toast-region { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; display: grid; gap: .6rem; width: min(390px, calc(100% - 2rem)); }
  .toast { padding: .9rem 1rem; border-radius: 12px; color: #fff; background: var(--brand-800); box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
  .toast.error { background: var(--danger); }
  .palette-preview { display: grid; grid-template-columns: repeat(3, 42px) 1fr; gap: .5rem; align-items: center; padding: .75rem; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-100); }
  .palette-preview span { width: 42px; height: 30px; border-radius: 8px; background: var(--brand-900); }
  .palette-preview span:nth-child(2) { background: var(--brand-600); }
  .palette-preview span:nth-child(3) { background: var(--brand-200); }
  .link-history { display: grid; gap: .65rem; }
  .link-history > div { display: grid; gap: .2rem; padding: .75rem; border: 1px solid var(--gray-200); border-radius: 11px; background: var(--gray-100); }
  .member-list { display: grid; gap: .55rem; margin-top: 1rem; }
  .member-list > div { display: grid; gap: .15rem; padding: .75rem; border: 1px solid var(--gray-200); border-radius: 11px; background: var(--gray-100); }
  .rsvp-page { min-height: 100dvh; background: radial-gradient(circle at top, var(--brand-100), var(--gray-100) 58%); }
  .rsvp-shell { width: min(620px, calc(100% - 1.5rem)); margin: 0 auto; padding: clamp(1rem, 4vw, 3rem) 0; }
  .rsvp-card { display: grid; gap: 1rem; padding: clamp(1.2rem, 4vw, 2.2rem); border: 1px solid var(--gray-200); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
  .rsvp-heading { text-align: center; }
  .rsvp-heading .brand-mark { margin-inline: auto; }
  .rsvp-summary { padding: .9rem; border-radius: 12px; background: var(--brand-100); color: var(--brand-900); }
  .rsvp-choices { display: grid; gap: .65rem; margin: 0; padding: 1rem; border: 1px solid var(--gray-200); border-radius: 12px; }
  .rsvp-choices legend { padding: 0 .35rem; font-weight: 800; }
  .rsvp-choice { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .65rem; border-radius: 10px; background: var(--gray-100); }
  .rsvp-choice input { width: auto; min-height: auto; accent-color: var(--brand-600); }
  .admin-page { min-height: 100dvh; background: radial-gradient(circle at top left, var(--brand-100), var(--gray-100) 48%); }
  .admin-shell { width: min(1500px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1rem, 3vw, 2.5rem) 0; }
  .admin-shell > .login-card { margin: min(12vh, 6rem) auto 0; }
  .admin-workspace { display: grid; gap: 1.25rem; }
  .admin-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
  .admin-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 1rem; align-items: start; }
  .admin-create-card { position: sticky; top: 1rem; }
  .admin-wedding-list { display: grid; gap: .8rem; margin-top: 1rem; }
  .admin-wedding-card { display: grid; gap: .7rem; padding: 1rem; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--gray-100); }
  .admin-meta { display: flex; flex-wrap: wrap; gap: .45rem 1rem; color: var(--gray-600); font-size: .8rem; }
  .admin-actions { flex-wrap: wrap; justify-content: flex-start; }
  .secure-link-result { display: grid; gap: .65rem; margin-top: 1rem; padding: .9rem; border: 1px solid var(--brand-200); border-radius: 12px; background: var(--brand-100); }
  .secure-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
  .secure-link-row input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .76rem; }
  .onboarding-page { min-height: 100dvh; background: radial-gradient(circle at top, var(--brand-100), var(--gray-100) 58%); }
  .onboarding-shell { width: min(760px, calc(100% - 1.25rem)); margin: 0 auto; padding: clamp(.8rem, 3vw, 2rem) 0 3rem; }
  .onboarding-brand { display: flex; align-items: center; gap: .7rem; padding: .5rem 0 1rem; }
  .onboarding-brand small { display: block; color: var(--gray-600); }
  .onboarding-brand .brand-mark.small { color: #fff; background: var(--brand-600); }
  .onboarding-card { display: grid; gap: 1.25rem; padding: clamp(1.2rem, 5vw, 2.8rem); border: 1px solid var(--gray-200); border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); }
  .onboarding-heading { max-width: 620px; }
  .onboarding-heading h1 { font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1.08; }
  .onboarding-progress { display: grid; gap: .35rem; }
  .onboarding-actions { display: flex; justify-content: space-between; gap: .7rem; padding-top: .5rem; }
  .onboarding-actions .button { min-width: 120px; }
  .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; border: 0; }
  .visual-choice { position: relative; display: grid; gap: .7rem; min-height: 128px; padding: 1rem; border: 2px solid var(--gray-200); border-radius: 15px; background: var(--gray-100); cursor: pointer; }
  .visual-choice:has(input:checked) { border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 16%, transparent); }
  .visual-choice input { position: absolute; right: .75rem; top: .75rem; width: 20px; height: 20px; accent-color: var(--brand-600); }
  .palette-dots { display: flex; gap: .35rem; padding-top: 1.5rem; }
  .palette-dots i { width: 34px; height: 34px; border-radius: 50%; background: var(--preview-1); }
  .palette-dots i:nth-child(2) { background: var(--preview-2); }
  .palette-dots i:nth-child(3) { background: var(--preview-3); }
  [data-palette-preview="romance"] { --preview-1: #4c1320; --preview-2: #8b2e45; --preview-3: #e7c7cf; }
  [data-palette-preview="serenity"] { --preview-1: #2f443a; --preview-2: #5d7c69; --preview-3: #cfe0d5; }
  [data-palette-preview="classic"] { --preview-1: #142a4a; --preview-2: #2b568d; --preview-3: #e5d7b7; }
  [data-palette-preview="terracotta"] { --preview-1: #5a2e26; --preview-2: #a45743; --preview-3: #e9c9bd; }
  .font-choice strong { padding-top: 1.5rem; font-size: 1.25rem; }
  [data-font-preview="editorial"] strong { font-family: Georgia, serif; }
  [data-font-preview="classic"] strong { font-family: "Times New Roman", serif; }
  [data-font-preview="modern"] strong { font-family: Inter, system-ui, sans-serif; letter-spacing: -.025em; }
  [data-font-preview="organic"] strong { font-family: "Trebuchet MS", system-ui, sans-serif; }
  .money-control { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border: 1px solid var(--gray-200); border-radius: 11px; background: var(--paper); }
  .money-control span { padding-left: .85rem; color: var(--gray-600); }
  .money-control input { border: 0; box-shadow: none; }
  .review-list { display: grid; gap: .55rem; }
  .review-list > div { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem; border: 1px solid var(--gray-200); border-radius: 11px; background: var(--gray-100); }
  .review-list span { display: grid; gap: .15rem; }
  .review-list small { color: var(--gray-600); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
}

@layer utilities {
  [hidden] { display: none !important; }
  .mobile-only { display: none; }
  .text-right { text-align: right; }
  .nowrap { white-space: nowrap; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  @media (max-width: 67.5rem) { .grid.cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 60rem) {
    .mobile-only { display: inline-grid; }
    .app-shell { display: block; }
    .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: min(86vw, 290px); transition: transform .2s ease; }
    .sidebar.open { transform: translateX(0); }
    .topbar { min-height: 78px; }
    .topbar .button.secondary { padding-inline: .7rem; }
    .form-grid, .grid.two { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: auto; }
    .admin-grid { grid-template-columns: 1fr; }
    .admin-create-card { position: static; }
  }
  @media (max-width: 35rem) {
    .grid.cards { grid-template-columns: 1fr; }
    .page-content { padding: .8rem; }
    .topbar { padding: .75rem; gap: .55rem; }
    .topbar h1 { font-size: 1.25rem; }
    .toolbar { align-items: stretch; }
    .toolbar-group { width: 100%; }
    .toolbar-group > * { flex: 1 1 140px; }
    .payment-row { grid-template-columns: 1fr; }
    .admin-header { align-items: flex-start; flex-direction: column; }
    .choice-grid { grid-template-columns: 1fr; }
    .secure-link-row { grid-template-columns: 1fr; }
    .onboarding-card { border-radius: 19px; }
  }
  @media print {
    .sidebar, .topbar, .toolbar, .row-actions, .toast-region { display: none !important; }
    .app-shell { display: block; }
    .page-content { padding: 0; }
    .card { box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
}

@layer components {
  progress.native-progress { width: 100%; height: 10px; border: 0; border-radius: 99px; overflow: hidden; background: var(--gray-200); }
  progress.native-progress::-webkit-progress-bar { background: var(--gray-200); border-radius: 99px; }
  progress.native-progress::-webkit-progress-value { background: var(--brand-600); border-radius: 99px; }
  progress.native-progress::-moz-progress-bar { background: var(--brand-600); border-radius: 99px; }
}

@layer components {
  .system-banner {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: .8rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    background: #fff6df;
    color: #6e480d;
    font-weight: 750;
    text-align: center;
  }
  .system-banner.error { background: #fff0ef; color: var(--danger); }
  .system-banner.warning { background: #fff6df; color: #6e480d; }
  .system-banner.success { background: #edf8f0; color: var(--success); }

  .modal-heading { min-width: 0; flex: 1; }
  .modal-heading h2 { margin-bottom: .2rem; }
  .modal-header-actions { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
  .modal-status { margin: .35rem 0 0; max-width: 58ch; font-size: .82rem; line-height: 1.35; }
  .modal-status.error { color: var(--danger); font-weight: 750; }
  .modal-status.warning { color: var(--warning); font-weight: 750; }
  .modal-status.success { color: var(--success); font-weight: 750; }

  .form-alert {
    margin: 0;
    padding: .8rem .9rem;
    border-radius: 11px;
    border: 1px solid var(--gray-200);
    background: var(--gray-100);
  }
  .form-alert.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--paper)); }
  .form-alert.warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 9%, var(--paper)); }
  .form-alert.success { color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--paper)); }

  /* O botão Salvar também fica no cabeçalho do diálogo. Assim, o usuário não
     precisa percorrer formulários longos para gravar e sempre enxerga o erro. */
  #modal-save[hidden] { display: none !important; }

  @media (max-width: 35rem) {
    .modal { width: calc(100% - .5rem); max-height: calc(100dvh - .5rem); }
    .modal-card { max-height: calc(100dvh - .5rem); border-radius: 16px; }
    .modal-header { align-items: flex-start; padding: .85rem; }
    .modal-body { padding: .85rem; max-height: calc(100dvh - 100px); scroll-padding-bottom: 5.5rem; }
    .modal-header-actions .button { padding-inline: .72rem; }
  }
}

/* ========================================================================== 
   Aplicativo móvel instalável — v4.0.0
   ========================================================================== */
@layer tokens {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --mobile-nav-height: 68px;
    --mobile-fab-size: 58px;
    --visual-viewport-height: 100dvh;
  }
}

@layer base {
  html { min-height: 100%; background: var(--gray-100); }
  body { min-height: 100dvh; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
  button, a, input, select, textarea { touch-action: manipulation; }
  button, .button, input, select { min-height: 44px; }
}

@layer layout {
  .content-shell { min-height: 100dvh; }
  .connection-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 130;
    padding: calc(.7rem + var(--safe-top)) 1rem .7rem;
    background: #7a4d0f;
    color: #fff;
    text-align: center;
    font-weight: 750;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
  }
}

@layer components {
  .mobile-bottom-nav,
  .mobile-fab,
  .modal-mobile-actions { display: none; }

  .install-button { width: 100%; color: #fff; border-color: rgba(255,255,255,.22); }
  .install-dialog { border: 0; padding: 0; background: transparent; width: min(480px, calc(100% - 1.25rem)); }
  .install-dialog::backdrop { background: rgba(19,24,18,.58); backdrop-filter: blur(3px); }
  .install-card { overflow: hidden; border: 1px solid var(--gray-200); border-radius: 22px; background: var(--paper); color: var(--gray-950); box-shadow: var(--shadow); }
  .install-header { display: flex; align-items: center; gap: .8rem; padding: 1rem; border-bottom: 1px solid var(--gray-200); }
  .install-header > div { flex: 1; }
  .install-header h2 { margin: 0; }
  .install-body { padding: 1rem 1.1rem; line-height: 1.55; }
  .install-steps { display: grid; gap: .75rem; padding-left: 1.4rem; }
  .install-actions { display: flex; justify-content: flex-end; gap: .65rem; padding: 1rem; border-top: 1px solid var(--gray-200); }
  .update-toast { display: flex; gap: .75rem; align-items: center; justify-content: space-between; }

  .topbar-title { min-width: 0; }
  .mobile-fab[hidden] { display: none !important; }
}

@layer utilities {
  @media (max-width: 60rem) {
    body { padding-left: var(--safe-left); padding-right: var(--safe-right); }
    .desktop-quick-add { display: none; }
    .app-shell { min-height: 100dvh; }
    .content-shell { padding-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + 1rem); }
    .page-content { padding: .85rem; }

    .topbar {
      min-height: 64px;
      padding: calc(.55rem + var(--safe-top)) .8rem .55rem;
      background: color-mix(in srgb, var(--paper) 96%, transparent);
    }
    .topbar .eyebrow { font-size: .62rem; }
    .topbar h1 { font-size: 1.18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .sidebar {
      width: min(88vw, 330px);
      height: 100dvh;
      padding: calc(1rem + var(--safe-top)) calc(1rem + var(--safe-right)) calc(1rem + var(--safe-bottom)) calc(1rem + var(--safe-left));
      overflow-y: auto;
      box-shadow: 18px 0 40px rgba(0,0,0,.22);
    }
    .nav-list button { min-height: 48px; }

    .mobile-bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      min-height: calc(var(--mobile-nav-height) + var(--safe-bottom));
      padding: .35rem max(.35rem, var(--safe-right)) calc(.35rem + var(--safe-bottom)) max(.35rem, var(--safe-left));
      border-top: 1px solid var(--gray-200);
      background: color-mix(in srgb, var(--paper) 96%, transparent);
      backdrop-filter: blur(18px);
      box-shadow: 0 -10px 28px rgba(35,43,32,.08);
    }
    .mobile-bottom-nav button {
      display: grid;
      place-items: center;
      align-content: center;
      gap: .12rem;
      min-width: 0;
      min-height: 56px;
      padding: .2rem;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: var(--gray-600);
      font-size: .66rem;
      font-weight: 750;
    }
    .mobile-bottom-nav button.active,
    .mobile-bottom-nav button[aria-current="page"] { color: var(--brand-700); background: var(--brand-100); }
    .mobile-bottom-nav .nav-icon { display: block; font-size: 1.22rem; line-height: 1; }

    .mobile-fab {
      position: fixed;
      right: max(1rem, calc(var(--safe-right) + .75rem));
      bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + .85rem);
      z-index: 58;
      display: grid;
      place-items: center;
      width: var(--mobile-fab-size);
      height: var(--mobile-fab-size);
      min-height: var(--mobile-fab-size);
      border: 0;
      border-radius: 50%;
      background: var(--brand-600);
      color: #fff;
      box-shadow: 0 12px 28px rgba(53,64,42,.32);
      font-size: 1.8rem;
      font-weight: 500;
    }
    .mobile-fab:active { transform: scale(.96); }

    .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-card { padding: .9rem; }
    .metric-card strong { font-size: 1.35rem; }
    .hero-card { border-radius: 20px; }
    .card { border-radius: 16px; }

    .toolbar { align-items: stretch; }
    .toolbar-group { width: 100%; }
    .toolbar-group > input,
    .toolbar-group > select { flex: 1 1 160px; }
    .toolbar-group > .button { flex: 0 1 auto; }

    /* Tabelas se tornam cartões legíveis no celular. */
    .mobile-card-table { overflow: visible; }
    .mobile-card-table table,
    .mobile-card-table thead,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table th,
    .mobile-card-table td { display: block; min-width: 0; width: 100%; }
    .mobile-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .mobile-card-table tbody { display: grid; gap: .75rem; padding-top: .8rem; }
    .mobile-card-table tr { padding: .85rem; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--gray-100); }
    .mobile-card-table td { display: grid; grid-template-columns: minmax(90px, .72fr) minmax(0, 1.28fr); gap: .7rem; padding: .48rem 0; border: 0; align-items: start; }
    .mobile-card-table td::before { content: attr(data-label); color: var(--gray-600); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
    .mobile-card-table td:first-child { grid-template-columns: 1fr; padding-top: 0; }
    .mobile-card-table td:first-child::before { display: none; }
    .mobile-card-table td:last-child { grid-template-columns: 1fr; padding-bottom: 0; }
    .mobile-card-table td:last-child::before { display: none; }
    .mobile-card-table .row-actions { justify-content: stretch; }
    .mobile-card-table .row-actions .button { flex: 1; }

    /* Formulários viram uma tela de aplicativo com ação fixa inferior. */
    .modal {
      inset: 0;
      margin: 0;
      width: 100%;
      max-width: none;
      height: var(--visual-viewport-height, 100dvh);
      max-height: none;
    }
    .modal-card {
      width: 100%;
      height: 100%;
      max-height: none;
      grid-template-rows: auto minmax(0, 1fr) auto;
      border: 0;
      border-radius: 0;
    }
    .modal-header {
      padding: calc(.72rem + var(--safe-top)) .85rem .72rem;
      background: var(--paper);
    }
    .modal-header .desktop-modal-save { display: none !important; }
    .modal-body {
      max-height: none;
      padding: .9rem;
      overscroll-behavior: contain;
      scroll-padding: 1rem 0 calc(88px + var(--safe-bottom));
    }
    .modal .modal-body .modal-actions { display: none; }
    .modal-mobile-actions {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: .65rem;
      padding: .7rem .9rem calc(.7rem + var(--safe-bottom));
      border-top: 1px solid var(--gray-200);
      background: color-mix(in srgb, var(--paper) 96%, transparent);
      backdrop-filter: blur(14px);
    }
    .modal-mobile-actions[hidden] { display: none !important; }
    .modal-mobile-actions .button { min-height: 48px; }

    .install-dialog {
      inset: auto 0 0;
      margin: auto 0 0;
      width: 100%;
      max-width: none;
    }
    .install-card { border-radius: 24px 24px 0 0; padding-bottom: var(--safe-bottom); }

    .toast-region {
      right: max(.7rem, var(--safe-right));
      bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + .75rem);
      width: min(430px, calc(100% - 1.4rem - var(--safe-left) - var(--safe-right)));
    }
  }

  @media (max-width: 26.875rem) {
    .grid.cards { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .metric-card small:last-child { font-size: .72rem; }
    .topbar { gap: .4rem; }
    .page-content { padding: .7rem; }
    .card { padding: .9rem; }
    .toolbar-group > .button { flex: 1 1 120px; }
  }

  @media (max-width: 21.875rem) {
    .grid.cards { grid-template-columns: 1fr; }
    .mobile-bottom-nav button { font-size: .58rem; }
  }

  @media (display-mode: standalone) {
    .topbar { padding-top: calc(.55rem + var(--safe-top)); }
    .mobile-bottom-nav { padding-bottom: calc(.35rem + var(--safe-bottom)); }
  }

  .virtual-keyboard-open .mobile-bottom-nav,
  .virtual-keyboard-open .mobile-fab { transform: translateY(130%); pointer-events: none; }

  @media (prefers-reduced-motion: no-preference) {
    .mobile-bottom-nav,
    .mobile-fab { transition: transform .18s ease; }
  }
}

@layer components {
  .topbar-title { flex: 1; text-align: left; }
}

@layer utilities {
  @media (max-width: 60rem) {
    .page-content { padding-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + 6.5rem); }
  }
}

/* ========================================================================== 
   Escala responsiva fluida — v4.0.0
   A interface responde ao espaço disponível, ao zoom e à orientação, não a
   uma coleção de aparelhos específicos.
   ========================================================================== */
@layer tokens {
  :root {
    --page-gutter: clamp(.75rem, 2.4vw, 2.25rem);
    --section-gap: clamp(.75rem, 1.5vw, 1.25rem);
    --control-gap: clamp(.5rem, 1vw, .85rem);
    --text-body-fluid: clamp(.9375rem, .22vw + .89rem, 1.0625rem);
    --text-small-fluid: clamp(.78rem, .16vw + .74rem, .9rem);
    --sidebar-width: clamp(14.5rem, 19vw, 17.5rem);
    --content-max: 93.75rem;
    --viewport-height: 100dvh;
  }
}

@layer base {
  html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    min-width: 0;
    min-height: var(--viewport-height);
    font-size: var(--text-body-fluid);
    line-height: 1.5;
  }
  img, svg, video, canvas { max-width: 100%; height: auto; }
  main, section, article, aside, header, footer, nav, form, fieldset, div { min-width: 0; }
  input, select, textarea, button, .button { max-width: 100%; }
  button, .button { white-space: normal; }
  :where(.card, .admin-wedding-card, .list-card, .review-list, .secure-link-result, .member-list, .link-history) {
    overflow-wrap: anywhere;
  }
}

@layer layout {
  .login-view {
    min-height: var(--viewport-height);
    padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left));
  }
  .app-shell {
    min-height: var(--viewport-height);
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
  .sidebar { height: var(--viewport-height); }
  .content-shell { min-height: var(--viewport-height); }
  .page-content {
    container: page / inline-size;
    width: min(100%, var(--content-max));
    padding: var(--page-gutter);
  }
  .grid { gap: var(--section-gap); }
  .form-grid { gap: var(--control-gap); }
  .table-wrap {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
}

@layer components {
  .card { padding: clamp(.9rem, 1.2vw, 1.2rem); }
  .metric-card strong { font-size: clamp(1.25rem, 1.7vw, 2rem); }
  .row-actions, .admin-actions, .modal-actions, .install-actions { flex-wrap: wrap; }
  .list-card-header > *, .toolbar > *, .payment-row > *, .review-list > div > * { min-width: 0; }
  .modal, .modal-card { max-height: calc(var(--viewport-height) - 1.25rem); }
  .modal-body { max-height: calc(var(--viewport-height) - 7.5rem); }
  .admin-shell {
    container: admin / inline-size;
    width: min(100%, var(--content-max));
    padding: max(1rem, var(--safe-top)) max(var(--page-gutter), var(--safe-right)) max(2rem, var(--safe-bottom)) max(var(--page-gutter), var(--safe-left));
  }
  .rsvp-shell {
    container: rsvp / inline-size;
    width: min(100%, 38.75rem);
    padding: max(1rem, var(--safe-top)) max(.75rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(.75rem, var(--safe-left));
  }
  .onboarding-shell {
    container: onboarding / inline-size;
    width: min(100%, 47.5rem);
    padding: max(.8rem, var(--safe-top)) max(.625rem, var(--safe-right)) max(3rem, var(--safe-bottom)) max(.625rem, var(--safe-left));
  }
  .onboarding-card { padding: clamp(1.1rem, 4.5cqi, 2.8rem); }
  .onboarding-heading h1 { font-size: clamp(1.75rem, 7cqi, 3rem); }
  .secure-link-row > *, .admin-meta > *, .toolbar-group > * { min-width: 0; }
}

@layer utilities {
  .grid.cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  }
  .grid.two {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  }

  @container page (max-width: 46rem) {
    .grid.two { grid-template-columns: 1fr; }
    .toolbar { align-items: stretch; }
    .toolbar-group { width: 100%; }
    .toolbar-group > input,
    .toolbar-group > select { flex: 1 1 12rem; }
    .payment-row { grid-template-columns: 1fr; }
  }

  @media (max-width: 60rem) {
    .page-content { padding-inline: max(.85rem, var(--safe-left)) max(.85rem, var(--safe-right)); }
    .mobile-bottom-nav button { font-size: clamp(.68rem, 2.2vw, .78rem); }
    .admin-header { align-items: flex-start; flex-wrap: wrap; }
    .admin-header .toolbar-group { width: auto; }
    .admin-header .toolbar-group > * { flex: 1 1 8rem; }
  }

  @media (max-width: 35rem) {
    .grid.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.75rem), 1fr)); }
    .onboarding-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    .onboarding-actions .button { min-width: 0; }
    .review-list > div { align-items: flex-start; flex-direction: column; }
    .palette-dots i { width: clamp(1.75rem, 9vw, 2.125rem); height: clamp(1.75rem, 9vw, 2.125rem); }
    .admin-shell { padding-inline: max(.7rem, var(--safe-left)) max(.7rem, var(--safe-right)); }
    .rsvp-card { border-radius: clamp(1rem, 5vw, 1.5rem); }
  }

  @media (max-width: 21.875rem) {
    .grid.cards { grid-template-columns: 1fr; }
    .mobile-bottom-nav button { font-size: .62rem; }
  }

  @media (max-height: 32rem) and (orientation: landscape) {
    .login-view { place-items: start center; overflow-y: auto; }
    .sidebar { padding-top: max(.7rem, var(--safe-top)); padding-bottom: max(.7rem, var(--safe-bottom)); }
    .nav-list { gap: .15rem; }
    .nav-list button { min-height: 44px; padding-block: .55rem; }
    .sidebar-footer { gap: .35rem; }
    .onboarding-card, .rsvp-card { box-shadow: none; }
  }

  @media (prefers-contrast: more) {
    .card, input, select, textarea, .button, .modal-card, .onboarding-card, .rsvp-card { border-width: 2px; }
  }
}

@supports not (height: 100dvh) {
  @layer tokens { :root { --viewport-height: 100vh; } }
}