:root {
  --panel: rgba(255, 247, 251, 0.84);
  --rose-400: #ff5f9f;
  --rose-500: #ff3f8a;
  --rose-600: #e32873;
  --rose-700: #bf1b5d;
  --berry-700: #811344;
  --text-main: #250f1b;
  --text-soft: #705063;
  --shadow-xl: 0 28px 55px -20px rgba(61, 11, 41, 0.45);
  --shadow-lg: 0 20px 30px -16px rgba(227, 40, 115, 0.38);
  --radius-xl: 30px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at top left, rgba(255, 140, 182, 0.35), transparent 28%),
    radial-gradient(circle at top right, rgba(255, 92, 156, 0.16), transparent 20%),
    linear-gradient(135deg, #f6dfea 0%, #f0c9df 18%, #d87aa9 55%, #9f2e66 100%);
  overflow-x: hidden;
}
.bg-hearts span { position: fixed; top: -5vh; color: rgba(255,255,255,0.22); font-size: clamp(18px,2vw,28px); animation: drift linear infinite; pointer-events:none; }
.bg-hearts span:nth-child(1) { left: 8%; animation-duration: 16s; }
.bg-hearts span:nth-child(2) { left: 24%; animation-duration: 13s; animation-delay: -3s; }
.bg-hearts span:nth-child(3) { left: 48%; animation-duration: 18s; animation-delay: -6s; }
.bg-hearts span:nth-child(4) { left: 72%; animation-duration: 15s; animation-delay: -8s; }
.bg-hearts span:nth-child(5) { left: 88%; animation-duration: 12s; animation-delay: -4s; }
.page-shell { max-width: 1110px; margin: 0 auto; padding: 24px 18px 36px; }
.hero { display:flex; align-items:center; justify-content:center; gap:16px; text-align:center; margin:6px 0 22px; }
.heart-badge { width:58px; height:58px; display:grid; place-items:center; border-radius:999px; background:linear-gradient(180deg,var(--rose-500),var(--rose-600)); color:white; font-size:24px; box-shadow:0 18px 36px -12px rgba(227,40,115,.55); }
h1 { margin:0; font-size:clamp(2rem, 4vw, 3.2rem); color:#1c0720; }
.subtitle { margin:8px 0 0; color:rgba(64,10,37,.72); font-size:1.08rem; }
.screen { display:none; }
.screen.active { display:block; }
.screen.transition-in { animation: cardIn .55s cubic-bezier(.2,.8,.2,1); }
.screen.transition-out { animation: cardOut .32s ease both; }
.card { background:var(--panel); border:1px solid rgba(255,255,255,.28); backdrop-filter: blur(18px); border-radius:34px; box-shadow:var(--shadow-xl); overflow:hidden; }
.ask-card { display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:28px; }
.pill { display:inline-block; padding:9px 13px; border-radius:999px; background:linear-gradient(180deg, rgba(255,191,221,.72), rgba(255,215,233,.92)); color:var(--rose-700); font-weight:700; font-size:14px; margin-bottom:14px; }
.intro-copy { display:flex; flex-direction:column; justify-content:center; }
.intro-copy h2 { margin:0; font-size: clamp(2rem,3vw,2.7rem); line-height:1.05; }
.intro-copy p { margin-top:18px; color:var(--text-soft); line-height:1.7; font-size:1.08rem; max-width:40ch; }
.button-arena { position:relative; min-height:340px; border-radius:var(--radius-xl); background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,240,246,.92)); border:1px solid rgba(255,130,181,.32); overflow:hidden; }
.button-stack { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.btn { border:0; border-radius:18px; padding:14px 20px; font-size:16px; font-weight:800; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px) scale(1.01); }
.btn-primary { background:linear-gradient(180deg,var(--rose-500),var(--rose-600)); color:white; box-shadow:0 16px 28px -10px rgba(227,40,115,.5); }
.btn-secondary { background:rgba(255,255,255,.92); color:var(--berry-700); border:1px solid rgba(255,129,173,.28); box-shadow:0 10px 20px -15px rgba(52,13,36,.5); }
.btn-accent { background:linear-gradient(180deg,#d946ef,#b21bce); color:white; box-shadow:0 16px 28px -14px rgba(178,27,206,.55); }
.btn-big { padding:18px 32px; font-size:20px; }
.btn-full { width:100%; padding:16px 22px; }
.pulse-glow { animation: pulseGlow 2.2s ease-in-out infinite; }
.floating-no { position:absolute; left:calc(50% + 78px); top:calc(50% + 26px); will-change:transform; transition: transform .18s cubic-bezier(.2,.9,.2,1.08), box-shadow .2s ease; }
.pick-card { padding:24px; }
.card-header h2 { margin:0; font-size:2.1rem; }
.card-header p { margin:8px 0 0; color:var(--text-soft); }
.booking-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.left-pane, .right-pane { border-radius:var(--radius-xl); padding:20px; }
.left-pane { background:linear-gradient(180deg, rgba(255,240,247,.7), rgba(255,251,253,.96)); border:1px solid rgba(255,93,159,.18); }
.right-pane { display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(180deg, rgba(255,252,254,.92), rgba(255,230,243,.84)); border:1px solid rgba(255,255,255,.3); }
label { display:block; margin:10px 0 8px; font-weight:700; }
input[type="text"], input[type="date"], .time-select { width:100%; padding:14px 16px; font-size:16px; border-radius:18px; border:1px solid rgba(255,118,171,.24); background:white; outline:none; transition:border-color .16s ease, box-shadow .16s ease; }
input[type="text"]:focus, input[type="date"]:focus, .time-select:focus { border-color: var(--rose-400); box-shadow: 0 0 0 4px rgba(255, 95, 159, 0.12); }
.times-wrap { margin-top:18px; padding:16px; border-radius:24px; background:rgba(255,255,255,.96); border:1px solid rgba(255,127,177,.18); }
.times-header { font-weight:800; margin-bottom:12px; }
.time-select { appearance:none; -webkit-appearance:none; -moz-appearance:none; background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,245,250,0.96)); color:var(--berry-700); font-weight:700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75); }
.summary-copy, .backend-note { color:var(--text-soft); line-height:1.55; }
.summary-box { margin-top:16px; padding:16px; border-radius:22px; background:rgba(255,255,255,.95); border:1px solid rgba(217,70,239,.15); }
.summary-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
.summary-row span { color:var(--text-soft); }
.done-card { max-width:720px; margin:0 auto; text-align:center; padding:42px 30px; }
.success-icon { width:76px; height:76px; margin:0 auto 18px; border-radius:999px; display:grid; place-items:center; background:linear-gradient(180deg, rgba(255,193,219,.95), rgba(255,223,236,.92)); color:var(--rose-700); font-size:34px; font-weight:900; box-shadow:0 14px 26px -14px rgba(227,40,115,.45); }
.status-box { margin:22px auto 0; background:rgba(255,245,249,.95); border:1px solid rgba(255,127,177,.2); color:var(--berry-700); padding:14px 16px; border-radius:18px; max-width:600px; }
.done-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:22px; }
.reveal-up { animation: revealUp .8s cubic-bezier(.2,.8,.2,1); }
@keyframes revealUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
@keyframes cardIn { 0% { opacity:0; transform:translateY(18px) scale(.985); filter:blur(4px);} 100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0);} }
@keyframes cardOut { 0% { opacity:1; transform:translateY(0) scale(1);} 100% { opacity:0; transform:translateY(-10px) scale(.99);} }
@keyframes pulseGlow { 0%,100% { box-shadow:0 16px 28px -10px rgba(227,40,115,.50);} 50% { box-shadow:0 18px 34px -10px rgba(227,40,115,.68);} }
@keyframes drift { from { transform:translateY(-5vh) rotate(0deg); opacity:0;} 10% { opacity:1;} to { transform:translateY(110vh) rotate(12deg); opacity:0;} }
@media (max-width: 860px) { .ask-card, .booking-grid { grid-template-columns:1fr; } .button-arena { min-height:300px; } .floating-no { left:calc(50% + 36px); } }
@media (max-width: 520px) { .page-shell { padding:14px 12px 26px; } .card, .ask-card, .pick-card, .done-card { border-radius:26px; } .btn-big { font-size:18px; padding:16px 24px; } .floating-no { left:calc(50% + 10px); top:calc(50% + 56px); } }