* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: 'Manrope', system-ui, sans-serif; background: #12020f; color: #fff6fb; --ink: #fff6fb; --muted: #d7baca; --rose: #ff9fc2; --rose-deep: #e56b9b; --panel: rgba(54, 12, 44, 0.72); --line: rgba(255, 206, 226, 0.18); --no-offset-x: 0px; --no-offset-y: 0px; --particle: 0; }
html, body { min-height: 100%; margin: 0; background: radial-gradient(circle at 70% 0%, #4d1648 0, #1e0820 36%, #12020f 78%); }
body { overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(255, 177, 210, .85); outline-offset: 3px; }
.app { position: relative; min-height: 100vh; isolation: isolate; }
.app::before, .app::after { content: ""; position: fixed; z-index: -3; inset: -4%; pointer-events: none; }
.app::before {
  background-image: var(--theme-image);
  background-position: center;
  background-size: cover;
  opacity: .48;
  filter: saturate(1.08) contrast(1.1) brightness(.52);
  transform: scale(1.04);
  animation: theme-drift 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(ellipse 43% 48% at 50% 50%, transparent 0 54%, #000 70%);
  mask-image: radial-gradient(ellipse 43% 48% at 50% 50%, transparent 0 54%, #000 70%);
}
.app::after { z-index: -2; background: radial-gradient(ellipse 46% 48% at 50% 50%, rgba(7, 4, 16, .95) 0 52%, transparent 72%), radial-gradient(circle at 50% 25%, var(--theme-glow), transparent 38%), linear-gradient(180deg, rgba(7, 4, 17, .22), rgba(12, 4, 13, .78)); }
@keyframes theme-drift { from { transform: scale(1.04) translate3d(-.7%, -.4%, 0); } to { transform: scale(1.1) translate3d(.8%, .5%, 0); } }
body[data-butterfly-palette="emerald"] { --rose: #86e3aa; --rose-deep: #3c9b75; --line: rgba(188, 255, 207, .25); --panel: rgba(8, 37, 29, .76); --theme-glow: rgba(84, 216, 141, .22); --theme-image: url("/manus-storage/butterfly-ui-emerald-reference_d3d301a0.png"); }
body[data-butterfly-palette="aqua"] { --rose: #72e5ef; --rose-deep: #3fa2d4; --line: rgba(190, 248, 255, .25); --panel: rgba(9, 20, 51, .78); --theme-glow: rgba(88, 211, 246, .20); --theme-image: url("/manus-storage/butterfly-ui-aqua-reference_909f272d.png"); }
body[data-butterfly-palette="lavender"] { --rose: #c9a1ff; --rose-deep: #8d67ca; --line: rgba(231, 208, 255, .26); --panel: rgba(32, 15, 57, .78); --theme-glow: rgba(188, 137, 255, .21); --theme-image: url("/manus-storage/butterfly-ui-lavender-reference_5c5d63e4.png"); }
body[data-butterfly-palette="rose-gold"] { --rose: #ff9f9b; --rose-deep: #d85b75; --line: rgba(255, 213, 205, .26); --panel: rgba(59, 16, 29, .78); --theme-glow: rgba(255, 145, 131, .21); --theme-image: url("/manus-storage/butterfly-ui-rose-gold-reference_8fb8e263.png"); }
body[data-page-visible="false"] .app::before, body[data-system-reduced-motion="true"] .app::before, .reduce-motion .app::before { animation-play-state: paused; }
.glass-card, .scene-card { background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 98%, #07030d), rgba(12, 4, 18, .94)); border-color: var(--line); box-shadow: 0 32px 90px rgba(0, 0, 0, .48), 0 0 45px var(--theme-glow), inset 0 1px rgba(255,255,255,.1); }
.top-controls { backdrop-filter: blur(12px); }
@media (max-width: 680px) { .app::before { background-image: none; opacity: .18; animation: none; } .app::after { background: radial-gradient(circle at 50% 18%, var(--theme-glow), transparent 42%), linear-gradient(180deg, #120616, #08030b); } }
#bg-canvas, .ambient-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#bg-canvas { z-index: -2; }
.ambient-overlay { z-index: -1; background: linear-gradient(120deg, rgba(255, 142, 189, .05), transparent 45%, rgba(145, 70, 180, .08)); }
.scene-root { min-height: 100vh; }
.scene { display: none; min-height: 100vh; padding: 7rem 1.25rem 4rem; align-items: center; justify-content: center; }
.scene--active { display: flex; }
.scene-content { width: min(100%, 760px); }
.glass-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(74, 20, 62, .82), rgba(28, 6, 28, .78)); box-shadow: 0 32px 90px rgba(0, 0, 0, .36), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(18px); border-radius: 2rem; }
.scene-card { padding: clamp(1.5rem, 5vw, 4rem); text-align: center; }
.scene-card--wide { max-width: 960px; margin-inline: auto; }
.intro-card { padding: clamp(2rem, 7vw, 5.5rem) clamp(1.5rem, 7vw, 5rem); text-align: center; }
.intro-card--butterfly { max-width: 37rem; margin-inline: auto; }
.intro-card--welcome { max-width: 46rem; margin-inline: auto; background: linear-gradient(145deg, rgba(218, 132, 238, .65), rgba(88, 27, 100, .8)); }
.butterfly-divider { display: block; margin: .25rem 0 1.1rem; color: var(--rose); font-size: 1.15rem; text-shadow: 0 0 16px var(--theme-glow); }
.intro-line { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.8rem, 9vw, 6.5rem); line-height: .92; font-weight: 500; letter-spacing: -.04em; }
.intro-line--secondary { max-width: 30rem; margin: 1.5rem auto 2.25rem; color: var(--muted); font-size: clamp(1.2rem, 3vw, 1.65rem); line-height: 1.35; letter-spacing: 0; }
.eyebrow { margin: 0 0 .8rem; color: var(--rose); text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .18em; }
h1 { margin: 0 auto; max-width: 16ch; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.5rem, 7vw, 5rem); line-height: .95; font-weight: 500; letter-spacing: -.035em; }
.scene-copy { max-width: 38rem; margin: 1.3rem auto; color: var(--muted); line-height: 1.7; }
.scene-copy--accent { color: var(--rose); }
.romantic-btn, .ghost-btn { min-height: 3rem; border-radius: 999px; padding: .75rem 1.25rem; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.romantic-btn { border: 1px solid rgba(255, 220, 234, .2); background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #2a071d; font-weight: 800; box-shadow: 0 12px 30px rgba(229, 107, 155, .24); }
.ghost-btn { border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); }
.romantic-btn:hover, .ghost-btn:hover { transform: translateY(-2px); }
.button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.75rem; }
.invitation-card { overflow: hidden; }
.invitation-orbit { display: grid; place-items: center; width: clamp(8rem, 21vw, 11rem); aspect-ratio: 1; margin: 0 auto 1.75rem; border: 1px solid rgba(255, 226, 243, .55); border-radius: 50%; box-shadow: 0 0 0 1.25rem rgba(255, 196, 231, .07), 0 0 0 2.5rem rgba(255, 196, 231, .04); }
.invitation-orbit span { display: grid; place-items: center; width: 55%; aspect-ratio: 1.32; border-radius: 54% 46% 52% 48%; background: linear-gradient(135deg, #fa91bc, #ed557f); box-shadow: 0 12px 30px rgba(238, 85, 127, .3); font-size: clamp(2.2rem, 6vw, 4rem); transform: rotate(-12deg); }
.invitation-dedication { margin: 1.2rem 0 0; color: var(--ink); font-weight: 700; }
.invitation-actions { position: relative; min-height: 4.25rem; align-items: center; }
.invitation-yes { min-width: 13.5rem; }
.invitation-no { position: relative; min-width: 8.4rem; font-weight: 700; will-change: transform; }
.invitation-no.is-evading { transform: translate(var(--no-offset-x, 0), var(--no-offset-y, 0)); }
.invitation-response { min-height: 3.4rem; max-width: 32rem; margin: .35rem auto 0; color: #ffe2ef; font-size: .95rem; line-height: 1.55; }
.top-controls { position: fixed; z-index: 10; top: 1rem; right: 1rem; display: flex; gap: .5rem; }
.top-controls__pill { min-height: 2.5rem; padding: .5rem .85rem; font-size: .78rem; }
.field-label { display: block; margin: 1.5rem auto .5rem; color: var(--rose); font-size: .82rem; text-align: left; max-width: 30rem; }
.text-input { width: min(100%, 30rem); border: 1px solid var(--line); border-radius: 1rem; padding: .9rem 1rem; background: rgba(10, 0, 12, .42); color: var(--ink); }
.date-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 42rem; margin-inline: auto; }
.date-time-fields .field-label { max-width: none; }
.date-time-fields .text-input { width: 100%; box-sizing: border-box; }
.search-form { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.5rem auto .75rem; }
.search-form .text-input { flex: 1 1 18rem; }
.status-copy { min-height: 1.5rem; color: var(--muted); font-size: .85rem; }
.status-copy[data-kind="success"] { color: #aef2cf; }
.status-copy[data-kind="notice"] { color: #ffd4a8; }
.choice-grid, .restaurant-grid { display: grid; gap: .8rem; margin-top: 1.5rem; }
.choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.restaurant-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.choice-card, .restaurant-card { border: 1px solid var(--line); border-radius: 1.25rem; background: rgba(255,255,255,.045); color: var(--ink); text-align: left; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.choice-card { display: grid; gap: .4rem; padding: 1.25rem; }
.choice-card span:last-child, .restaurant-card__body span:not(.restaurant-card__badge) { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.choice-card__icon { color: var(--rose); font-size: 2rem; }
.choice-card:hover, .choice-card.is-selected, .restaurant-card:hover, .restaurant-card.is-selected { border-color: var(--rose); background: rgba(255, 159, 194, .12); transform: translateY(-3px); }
.scene-card--experience { max-width: 66rem; margin-inline: auto; }
.choice-grid--locations { margin-top: 1.8rem; }
.location-card { min-height: 15.25rem; overflow: hidden; padding: 0; grid-template-rows: minmax(5.25rem, 43%) 1fr; background: rgba(255, 255, 255, .07); }
.location-card__visual { position: relative; display: block; min-height: 5.25rem; background-position: center 28%; background-size: cover; filter: saturate(1.14) contrast(1.05) brightness(.72); }
.location-card__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(41, 8, 44, .82)); }
.location-card__content { display: grid; align-content: start; gap: .45rem; padding: 1rem 1.15rem 1.2rem; }
.location-card__content strong { font-size: clamp(1.08rem, 2vw, 1.35rem); }
.location-card__content > span:last-child { font-size: .92rem; line-height: 1.45; }
.location-card .choice-card__icon { font-size: 1.5rem; line-height: 1; }
.location-card--garden .location-card__visual { background-image: url("/manus-storage/butterfly-ui-rose-gold-reference_8fb8e263.png"); }
.location-card--rooftop .location-card__visual { background-image: url("/manus-storage/butterfly-ui-aqua-reference_909f272d.png"); }
.location-card--retreat .location-card__visual { background-image: url("/manus-storage/butterfly-ui-lavender-reference_5c5d63e4.png"); }
.location-card--cinema .location-card__visual { background-image: url("/manus-storage/butterfly-ui-emerald-reference_d3d301a0.png"); }
.location-card.is-selected { border-color: color-mix(in srgb, var(--rose) 86%, white); box-shadow: 0 0 0 2px rgba(255, 223, 240, .18), 0 18px 34px var(--theme-glow); }
.location-card.is-selected .location-card__visual { filter: saturate(1.25) contrast(1.08) brightness(.88); }
.experience-selection-status { min-height: 1.5rem; margin: 1rem auto 0; color: var(--rose); font-size: .9rem; font-weight: 700; }
.restaurant-card { display: grid; overflow: hidden; padding: 0; }
.restaurant-card__image { min-height: 100px; background-position: center; background-size: cover; background-color: #5e234e; }
.restaurant-card__image--fallback { background-image: radial-gradient(circle at 30% 30%, rgba(255, 180, 208, .8), transparent 15%), linear-gradient(135deg, #71395f, #2a1232 75%); }
.restaurant-card__body { display: grid; gap: .35rem; padding: 1rem; }
.restaurant-card__badge { color: var(--rose); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.restaurant-card__maps-link { color: var(--ink); text-decoration: none; }
.restaurant-card__maps-link:hover, .restaurant-card__maps-link:focus-visible { color: var(--rose); text-decoration: underline; text-underline-offset: .2em; }
.restaurant-card__actions { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: 0 1rem 1rem; }
.restaurant-card__profile-link, .restaurant-card__select { border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.2; }
.restaurant-card__profile-link { color: var(--rose); text-decoration: none; }
.restaurant-card__profile-link:hover, .restaurant-card__profile-link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.restaurant-card__select { border: 1px solid rgba(255, 206, 221, .7); background: rgba(255, 255, 255, .09); color: var(--ink); cursor: pointer; padding: .5rem .72rem; transition: transform .16s cubic-bezier(.23, 1, .32, 1), background .16s cubic-bezier(.23, 1, .32, 1); }
.restaurant-card__select:hover, .restaurant-card__select:focus-visible { background: rgba(255, 159, 194, .2); }
.restaurant-card__select:active { transform: scale(.97); }
.plan-summary { display: grid; gap: .8rem; max-width: 28rem; margin: 2rem auto; text-align: left; }
.plan-summary div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .7rem; }
.plan-summary span { color: var(--muted); font-size: .8rem; }
.plan-summary strong { text-align: right; }
.final-confirmation { position: relative; max-width: 66rem; min-height: 34rem; overflow: hidden; isolation: isolate; }
.final-confirmation::before, .final-confirmation::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(2px); }
.final-confirmation::before { width: 34rem; height: 34rem; top: -21rem; right: -10rem; background: radial-gradient(circle, color-mix(in srgb, var(--rose) 36%, transparent), transparent 67%); }
.final-confirmation::after { width: 26rem; height: 26rem; bottom: -17rem; left: -11rem; background: radial-gradient(circle, rgba(244, 204, 128, .18), transparent 69%); }
.confirmation-sequence { display: grid; min-height: 26rem; place-items: center; align-content: center; overflow: hidden; text-align: center; }
.confirmation-sequence[hidden], .confirmation-dashboard[hidden] { display: none; }
.confirmation-sequence > * { position: relative; z-index: 1; }
.confirmation-sequence__glow { position: absolute !important; width: min(54vw, 22rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 241, 197, .85) 0 3%, rgba(246, 191, 123, .42) 15%, color-mix(in srgb, var(--rose) 34%, transparent) 42%, transparent 70%); filter: blur(.4px); animation: confirmation-glow 2.8s cubic-bezier(.23, 1, .32, 1) both; }
.confirmation-sequence__seal { display: grid; width: 4.6rem; aspect-ratio: 1; margin: 0 auto 1rem; place-items: center; border: 1px solid rgba(255, 238, 195, .85); border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff7cd, #e8aa64 52%, #a84a69); box-shadow: 0 0 0 12px rgba(255, 219, 154, .07), 0 0 36px rgba(255, 209, 129, .5); color: #48172a; font-size: 2.2rem; font-weight: 900; opacity: 0; transform: scale(.78) rotate(-20deg); animation: confirmation-seal 2.8s cubic-bezier(.23, 1, .32, 1) both; }
.confirmation-sequence h1 { max-width: none; font-size: clamp(3rem, 8vw, 5.8rem); opacity: 0; animation: confirmation-copy 2.8s cubic-bezier(.23, 1, .32, 1) both; }
.confirmation-sequence p:not(.eyebrow) { margin: .65rem 0 0; color: var(--muted); opacity: 0; animation: confirmation-copy 2.8s .18s cubic-bezier(.23, 1, .32, 1) both; }
.confirmation-sequence .eyebrow { opacity: 0; animation: confirmation-copy 2.8s .08s cubic-bezier(.23, 1, .32, 1) both; }
.confirmation-sequence__particles { position: absolute; inset: 0; pointer-events: none; }
.confirmation-sequence__particles i { position: absolute; left: calc(8% + (var(--particle) * 6.25%)); top: calc(55% + ((var(--particle) % 4) * 8%)); width: .32rem; aspect-ratio: 1; border-radius: 50%; background: #ffe1a0; box-shadow: 0 0 12px #ffdc92; opacity: 0; animation: confirmation-particle 2.5s calc(var(--particle) * 55ms) ease-out both; }
.confirmation-sequence__butterflies { position: absolute !important; inset: 0; pointer-events: none; }
.confirmation-sequence__butterflies i { position: absolute; width: 2.2rem; height: 1.35rem; border-radius: 75% 25% 70% 30%; background: linear-gradient(130deg, color-mix(in srgb, var(--rose) 74%, white), var(--rose-deep)); box-shadow: 0 0 22px var(--theme-glow); opacity: 0; transform-origin: 90% 50%; }
.confirmation-sequence__butterflies i::after { content: ''; position: absolute; width: 2.05rem; height: 1.25rem; top: .12rem; left: .42rem; border-radius: 25% 75% 30% 70%; background: linear-gradient(215deg, color-mix(in srgb, var(--rose) 66%, white), var(--rose-deep)); }
.confirmation-sequence__butterflies i:nth-child(1) { left: 17%; bottom: 18%; animation: confirmation-butterfly-one 2.4s ease-in-out both; }
.confirmation-sequence__butterflies i:nth-child(2) { right: 18%; top: 20%; animation: confirmation-butterfly-two 2.55s ease-in-out both; }
.confirmation-sequence__butterflies i:nth-child(3) { left: 26%; top: 18%; transform: scale(.68); animation: confirmation-butterfly-three 2.4s .12s ease-in-out both; }
.confirmation-dashboard { animation: confirmation-dashboard-in .55s cubic-bezier(.23, 1, .32, 1) both; }
.confirmation-dashboard__header { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; text-align: left; }
.confirmation-dashboard__header .scene-copy { grid-column: 2; margin: 0; }
.confirmation-dashboard__header h1 { margin: 0; max-width: none; font-size: clamp(2.5rem, 5vw, 4.2rem); }
.confirmation-dashboard__header .eyebrow { margin-bottom: .35rem; }
.confirmation-dashboard__check { display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255, 241, 199, .65); border-radius: 50%; background: linear-gradient(135deg, #ffefb5, #e6a463); color: #451326; font-size: 1.4rem; font-weight: 900; box-shadow: 0 0 28px rgba(255, 217, 144, .4); }
.confirmation-dashboard__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.25rem; margin-top: 2rem; text-align: left; }
.confirmation-details { display: grid; align-content: start; gap: .7rem; }
.confirmation-detail { display: grid; gap: .25rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.045); }
.confirmation-detail span, .confirmation-detail small { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.confirmation-detail span { color: var(--rose); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.confirmation-detail strong { font-size: 1rem; }
.confirmation-restaurant { position: relative; display: grid; min-height: 17rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1.35rem; background: radial-gradient(circle at 74% 20%, color-mix(in srgb, var(--rose) 52%, transparent), transparent 22%), linear-gradient(145deg, #5c285c, #1a0c23); }
.confirmation-restaurant__photo { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.05) brightness(.74); }
.confirmation-restaurant__fallback { min-height: 17rem; background: radial-gradient(circle at 25% 20%, rgba(255, 217, 156, .65), transparent 10%), radial-gradient(ellipse at 70% 72%, color-mix(in srgb, var(--rose) 52%, transparent), transparent 30%), linear-gradient(145deg, #48204a, #160819); }
.confirmation-restaurant__overlay { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: .25rem; padding: 2.8rem 1.1rem 1.1rem; background: linear-gradient(transparent, rgba(12, 3, 16, .94)); }
.confirmation-restaurant__overlay span { color: var(--rose); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.confirmation-restaurant__overlay strong { font-size: 1.1rem; }
.confirmation-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.5rem; }
.confirmation-action-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.confirmation-action-status { min-height: 1.4rem; margin: .7rem 0 0; color: var(--muted); font-size: .84rem; }
.confirmation-action-status[data-kind="success"] { color: #aef2cf; }
.confirmation-action-status[data-kind="notice"] { color: #ffd4a8; }
.confirmation-email { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: end; max-width: 43rem; margin: 1.1rem auto 0; padding: 1rem; border: 1px solid var(--line); border-radius: 1.25rem; background: rgba(6, 2, 10, .2); text-align: left; }
.confirmation-email .field-label { margin: 0 0 .5rem; }
.confirmation-email .text-input { width: 100%; box-sizing: border-box; }
.confirmation-email__status { grid-column: 1 / -1; min-height: 1.2rem; margin: 0; color: var(--muted); font-size: .8rem; }
.confirmation-email__status[data-kind="sent"] { color: #aef2cf; }
.confirmation-email__status[data-kind="notice"] { color: #ffd4a8; }
.confirmation-email__status[data-kind="sending"] { color: var(--rose); }
.confirmation-email button:disabled { cursor: wait; opacity: .62; }
.confirmation-restart { margin-top: 1.4rem; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: .25em; }
.confirmation-restart:hover, .confirmation-restart:focus-visible { color: var(--ink); }
@keyframes confirmation-glow { 0% { opacity: 0; transform: scale(.18); } 26% { opacity: 1; transform: scale(.72); } 76% { opacity: .82; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.36); } }
@keyframes confirmation-seal { 0%, 34% { opacity: 0; transform: scale(.72) rotate(-20deg); } 50% { opacity: 1; transform: scale(1.15) rotate(5deg); } 66% { opacity: 1; transform: scale(1) rotate(0); } 88%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes confirmation-copy { 0%, 52% { opacity: 0; transform: translateY(14px); } 66%, 84% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes confirmation-particle { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.4); } 38% { opacity: .9; } 100% { opacity: 0; transform: translate3d(calc((var(--particle) - 7) * 9px), -105px, 0) scale(1.6); } }
@keyframes confirmation-butterfly-one { 0% { opacity: 0; transform: translate3d(-60px, 40px, 0) rotate(-32deg) scale(.58); } 42% { opacity: .95; } 100% { opacity: 0; transform: translate3d(285px, -150px, 0) rotate(18deg) scale(.9); } }
@keyframes confirmation-butterfly-two { 0% { opacity: 0; transform: translate3d(70px, -30px, 0) rotate(38deg) scale(.5); } 45% { opacity: .9; } 100% { opacity: 0; transform: translate3d(-240px, 160px, 0) rotate(-18deg) scale(.85); } }
@keyframes confirmation-butterfly-three { 0% { opacity: 0; transform: translate3d(-30px, -35px, 0) rotate(-12deg) scale(.36); } 46% { opacity: .82; } 100% { opacity: 0; transform: translate3d(170px, 138px, 0) rotate(28deg) scale(.7); } }
@keyframes confirmation-dashboard-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.app-error { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 1.25rem; background: rgba(18, 2, 15, .94); }
.app-error[hidden] { display: none; }
.app-error__card { width: min(100%, 28rem); padding: 2rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--panel); text-align: center; }
.app-error__title { font: 500 2rem/1 'Cormorant Garamond', Georgia, serif; }
.app-error__copy { color: var(--muted); line-height: 1.6; }
.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; }
.noscript-message { max-width: 40rem; margin: 2rem auto; padding: 1rem; border: 1px solid var(--rose); border-radius: 1rem; background: #2a071d; text-align: center; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
@media (max-width: 680px) { .scene { padding-top: 5rem; } .choice-grid, .date-time-fields, .confirmation-dashboard__grid { grid-template-columns: 1fr; } .location-card { min-height: 14rem; } .top-controls { left: 1rem; right: auto; } .top-controls__pill { font-size: .7rem; } .plan-summary div { display: grid; gap: .2rem; } .plan-summary strong { text-align: left; } .final-confirmation { min-height: 0; padding: 1.35rem; } .confirmation-sequence { min-height: 23rem; } .confirmation-dashboard__header { grid-template-columns: 1fr; gap: .65rem; } .confirmation-dashboard__header .scene-copy { grid-column: auto; } .confirmation-dashboard__check { width: 2.6rem; } .confirmation-restaurant { min-height: 14rem; } .confirmation-restaurant__fallback { min-height: 14rem; } .confirmation-actions > * { flex: 1 1 10rem; } .confirmation-email { grid-template-columns: 1fr; } .confirmation-email .ghost-btn { width: 100%; } }

/* ================================
   MODERN DATE & TIME PICKER
================================ */

.modern-datetime-picker {
  width: 100%;
  max-width: 760px;
  margin: 2rem auto 1.5rem;
}

.datetime-display {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.2rem;

  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.28);

  background: rgba(26, 10, 48, 0.5);
  color: #fff;

  cursor: pointer;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 0 25px rgba(255, 66, 215, 0.15),
    inset 0 0 16px rgba(255, 255, 255, 0.04);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.datetime-display:hover {
  transform: translateY(-1px);
  border-color: rgba(104, 242, 255, 0.9);

  box-shadow:
    0 0 24px rgba(104, 242, 255, 0.22),
    0 0 34px rgba(255, 66, 215, 0.14);
}

.datetime-display-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.datetime-small-label {
  font-size: 0.78rem;
  color: #66efff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#datetime-selection {
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
}

.datetime-calendar-icon {
  flex: 0 0 auto;
  font-size: 1.4rem;
  color: #78f6ff;
}


/* PICKER PANEL */

.datetime-picker-panel {
  display: none;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(180px, 0.8fr);

  gap: 1.2rem;

  margin-top: 0.8rem;
  padding: 1.1rem;

  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  background: rgba(24, 8, 44, 0.86);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(255, 62, 214, 0.12);
}

.datetime-picker-panel.active {
  display: grid;
}


/* CALENDAR */

.calendar-area {
  min-width: 0;
}

.calendar-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;

  margin-bottom: 1rem;

  color: #fff;
}

#calendar-month-year {
  text-align: center;
  font-size: 1rem;
}

.calendar-arrow {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

  color: #fff;
  font-size: 1.35rem;

  cursor: pointer;
}

.calendar-arrow:hover {
  background: rgba(255, 70, 218, 0.16);
  border-color: rgba(255, 100, 225, 0.5);
}


/* DAYS */

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.calendar-weekdays {
  margin-bottom: 0.4rem;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
}

.calendar-days button {
  width: 100%;
  aspect-ratio: 1 / 1;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 50%;

  background: transparent;

  color: #fff;
  font-size: 0.82rem;

  cursor: pointer;

  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.calendar-days button:hover {
  transform: scale(1.04);
  background: rgba(255, 72, 216, 0.16);
}

.calendar-days button.selected {
  background: linear-gradient(
    135deg,
    #ff45d6,
    #865cff
  );

  box-shadow:
    0 0 16px rgba(255, 69, 214, 0.5);

  font-weight: 700;
}

.calendar-days button.disabled {
  opacity: 0.22;
  pointer-events: none;
}


/* TIME SECTION */

.time-area {
  min-width: 0;
  padding-left: 1rem;

  border-left:
    1px solid rgba(255, 255, 255, 0.12);
}

.time-title {
  margin: 0 0 0.8rem;

  color: #66efff;

  font-size: 0.9rem;
  font-weight: 700;
}

.time-options {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0.55rem;

  max-height: 260px;
  overflow-y: auto;

  padding-right: 0.25rem;
}

.time-option {
  padding: 0.75rem 0.45rem;

  border-radius: 12px;

  border:
    1px solid rgba(255, 255, 255, 0.13);

  background:
    rgba(255, 255, 255, 0.05);

  color: #fff;

  font-size: 0.82rem;

  cursor: pointer;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.time-option:hover {
  transform: translateY(-1px);

  border-color:
    rgba(255, 83, 219, 0.65);

  background:
    rgba(255, 83, 219, 0.1);
}

.time-option.selected {
  border-color: transparent;

  background: linear-gradient(
    135deg,
    #ff45d6,
    #855dff
  );

  box-shadow:
    0 0 15px rgba(255, 69, 214, 0.4);

  font-weight: 700;
}


/* ================================
   MOBILE DATE & TIME PICKER
================================ */

@media (max-width: 680px) {

  .modern-datetime-picker {
    margin-top: 1.4rem;
  }

  .datetime-display {
    min-height: 66px;
    padding: 0.8rem 1rem;
    border-radius: 18px;
  }

  #datetime-selection {
    font-size: 0.9rem;
  }

  .datetime-picker-panel {
    grid-template-columns: 1fr;

    padding: 0.9rem;

    border-radius: 20px;
  }

  .time-area {
    padding-left: 0;
    padding-top: 1rem;

    border-left: none;

    border-top:
      1px solid rgba(255, 255, 255, 0.12);
  }

  .time-options {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    max-height: none;
  }

  .time-option {
    font-size: 0.75rem;
    padding: 0.7rem 0.3rem;
  }

}