/* Visual polish and responsive interaction refinements */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { position: relative; min-width: 0; }
main { width: 100%; max-width: 100vw; min-width: 0; overflow-x: hidden; }
:root { --coral-dark: #a83b34; --action-coral: #c4473e; }
body { background: radial-gradient(circle at 84% 2%, rgba(255,220,208,.42), transparent 24%), var(--cream); }
.button, .brand-mark, .preview-buttons button:first-child, .response-badge { background: var(--action-coral); }
.button:hover { background: #a93730; }
.section-heading > span, .mini-label { color: #9d3933; }
.preview-top, .preview-footer { color: #625955; }
.guest-view[data-theme="rose"] { --guest-accent: #c4473e; --guest-soft: #f7d9d5; }
.guest-view[data-theme="violet"] { --guest-accent: #6752bd; --guest-soft: #dfdaf4; }
.guest-view[data-theme="sunset"] { --guest-accent: #ad5318; --guest-soft: #f3d8c5; }
.site-header {
  background: rgba(255,250,246,.76); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(234,223,216,.65); position: sticky; top: 0;
  width: 100%; max-width: none; padding-inline: max(30px, calc((100vw - 1180px)/2)); height: 76px;
}
.hero { min-height: calc(100vh - 76px); }
.invite-preview { box-shadow: 0 40px 90px rgba(84,49,40,.2), 0 0 0 8px rgba(255,255,255,.48); }
.steps article {
  background: #fffdfb; border: 1px solid #f0e4dd; border-radius: 24px;
  padding: 30px 22px 24px; box-shadow: 0 15px 40px rgba(84,49,40,.055);
}
.dashboard-stats article, .invite-card, .form-card { box-shadow: 0 12px 32px rgba(77,47,40,.055); }
.builder { width: min(100%, 1180px); max-width: 100vw; margin-inline: auto; padding-inline: clamp(16px, 3vw, 36px); }
.builder-layout {
  width: 100%; max-width: 100%; direction: ltr;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-areas: "preview form";
  gap: clamp(26px, 4vw, 52px);
}
.builder-form { grid-area: form; direction: rtl; }
.live-preview { grid-area: preview; direction: rtl; }
.builder-layout > * { min-width: 0; }
.builder-form, .live-preview, .form-card, .form-fields { min-width: 0; max-width: 100%; }
.builder-form input, .builder-form textarea { min-width: 0; }
.form-head h1, .form-head p, .form-fields h2 { overflow-wrap: anywhere; }
.guest-view { isolation: isolate; }
.guest-view::before, .guest-view::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(4px); pointer-events: none;
}
.guest-view::before { width: 320px; height: 320px; right: -110px; top: -100px; background: color-mix(in srgb, var(--guest-accent) 16%, transparent); }
.guest-view::after { width: 270px; height: 270px; left: -100px; bottom: -90px; background: color-mix(in srgb, var(--guest-accent) 12%, transparent); }
.guest-steps { border-color: rgba(255,255,255,.96); box-shadow: 0 28px 75px rgba(93,53,44,.14), inset 0 0 0 1px rgba(255,255,255,.45); }

/* A roomy, deterministic arena keeps the playful “no” button smooth. */
.yes-no-zone { height: 152px; max-width: 480px; display: block; direction: ltr; position: relative; margin: 0 auto; }
.yes-no-zone .yes-button {
  position: absolute; top: 10px; right: 28px; width: 220px; z-index: 2;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.yes-no-zone .yes-button:hover { transform: translateY(-2px); box-shadow: 0 13px 28px color-mix(in srgb, var(--guest-accent) 30%, transparent); }
.yes-no-zone .no-button {
  position: absolute; top: 10px; left: 52px; right: auto; min-width: 104px; height: 51px;
  z-index: 3; margin: 0; touch-action: none; user-select: none; will-change: left, top, transform;
  transition: left .16s cubic-bezier(.2,.9,.2,1), top .16s cubic-bezier(.2,.9,.2,1), transform .16s;
}
.playful-note { margin-top: -12px; }
.guest-option { min-height: 58px; box-shadow: 0 7px 18px rgba(78,48,40,.045); }
.calendar-field { position: relative; text-align: right; }
.field-label { display: block; color: #574d49; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.date-picker-toggle {
  width: 100%; min-height: 49px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border: 1px solid #ded2cb; border-radius: 11px; background: #fff; color: var(--ink);
  padding: 11px 14px; text-align: right; font-weight: 700;
}
.date-picker-toggle b { color: var(--guest-accent); font-size: 21px; line-height: 1; }
.date-picker-toggle[aria-expanded="true"] { border-color: var(--guest-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--guest-accent) 12%, transparent); }
.persian-calendar {
  position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: min(330px, 88vw);
  background: #fff; border: 1px solid var(--guest-soft); border-radius: 18px; padding: 13px;
  box-shadow: 0 20px 55px rgba(53,38,35,.2); direction: rtl;
}
.calendar-head { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 6px; margin-bottom: 9px; }
.calendar-head strong { text-align: center; font-size: 14px; }
.calendar-head button {
  width: 36px; height: 36px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--guest-accent) 9%, #fff);
  color: var(--guest-accent); font-size: 25px; line-height: 1;
}
.calendar-head button:disabled { opacity: .3; cursor: default; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-weekdays { margin-bottom: 5px; color: var(--muted); font-size: 10px; text-align: center; }
.calendar-day {
  aspect-ratio: 1; min-width: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink);
  display: grid; place-items: center; padding: 0; font-size: 12px; font-weight: 700;
}
.calendar-day:not(.unavailable):not(.empty):hover { background: color-mix(in srgb, var(--guest-accent) 10%, #fff); color: var(--guest-accent); }
.calendar-day.today { box-shadow: inset 0 0 0 1px var(--guest-accent); color: var(--guest-accent); }
.calendar-day.selected { background: var(--guest-accent)!important; color: #fff!important; box-shadow: none; }
.calendar-day.unavailable { color: #c8bfbb; cursor: default; }
.calendar-day.empty { display: block; }
.persian-date-note { display: block; color: var(--muted); margin: -8px auto 22px; font-size: 11px; }
.guest-option:focus-visible, .yes-button:focus-visible, .button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--guest-accent, var(--coral)) 32%, transparent); outline-offset: 3px;
}

@media (max-width: 900px) {
  .site-header { padding-inline: 24px; }
  .hero { min-height: auto; }
  .steps article { padding: 27px 20px; }
  .builder { width: 100%; max-width: 100%; margin: 0; }
  .builder-layout { display: block; width: 100%; max-width: 100%; direction: rtl; }
  .builder-form { display: block; width: 100%; max-width: 100%; }
}
@media (max-width: 1120px) {
  .builder { max-width: 760px; }
  .builder-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "preview"; }
  .live-preview { position: static; margin-top: 22px; }
  .preview-label { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 650px) {
  .site-header { height: 62px; padding-inline: 12px; margin: 0; }
  #userNav { min-width: 0; gap: 10px; }
  .user-greeting { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero { padding-top: 50px; }
  .hero-art { transform: scale(.96); }
  .guest-shell { width: calc(100% - 14px); max-width: 430px; padding-top: 54px; }
  .progress { margin: 4px 6px 12px; flex-wrap: wrap; }
  .guest-steps { padding: 22px 12px; min-height: calc(100dvh - 88px); border-radius: 23px; }
  .yes-no-zone { height: 155px; width: 100%; max-width: 350px; }
  .yes-no-zone .yes-button { width: min(205px, 64%); right: 4px; top: 8px; padding-inline: 10px; }
  .yes-no-zone .no-button { left: 4px; top: 8px; min-width: 92px; }
  .playful-note { margin-top: -10px; }
  .dashboard-stats { gap: 9px; }
  .dashboard-stats article { border-radius: 15px; }
  .invite-card { padding: 18px; }
  .invite-main p { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .form-card { border-radius: 17px; }
  .builder { padding: 20px 10px 70px; }
  .back-button { margin: 0 4px 16px; }
  .form-head { padding-inline: 4px; }
  .form-head h1 { font-size: 27px; line-height: 1.45; }
  .form-card { display: block; padding: 15px 12px; margin-block: 12px; }
  .form-step { margin-bottom: 12px; }
  .builder-form input, .builder-form textarea, .date-fields input { font-size: 16px; }
  .guest-step h1 { font-size: clamp(25px, 7.5vw, 29px); line-height: 1.4; letter-spacing: -.7px; }
  .guest-step > p { line-height: 1.8; }
  .big-question { margin-top: 20px; }
  .guest-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 20px auto; }
  .guest-option { min-height: 52px; padding: 11px 7px; font-size: 13px; }
  .transport-options { grid-template-columns: 1fr; }
  .privacy-consent { line-height: 1.8; }
  .date-fields { gap: 10px; margin: 20px auto 16px; }
  .persian-calendar { position: fixed; top: 50%; right: 50%; width: min(350px, calc(100vw - 24px)); transform: translate(50%, -50%); padding: 14px; }
  .calendar-day { font-size: 13px; border-radius: 10px; }
  .persian-date-note { margin-top: 2px; }
  .next-button { width: 100%; min-width: 0; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 36px; }
  .guest-steps { padding-inline: 12px; }
  .yes-no-zone .yes-button { font-size: 12px; }
  .yes-no-zone .no-button { font-size: 12px; min-width: 82px; }
  .choice-grid { grid-template-columns: 1fr; }
  .guest-options:not(.transport-options) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest-option { font-size: 12px; }
}

/* Theme, music and follow-up date additions */
.theme-picker { flex-wrap: wrap; row-gap: 10px; }
.theme-picker label { width: 54px; text-align: center; cursor: pointer; }
.theme-picker small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.theme.kitty { background: radial-gradient(circle at 35% 32%, #fff 0 13%, transparent 14%), linear-gradient(135deg,#ff75b5,#ffd7e9); }
.theme.bat { background: radial-gradient(circle at 50% 45%,#ffd83d 0 18%,transparent 19%),linear-gradient(135deg,#08090d,#333844); }
.theme.spider { background: linear-gradient(45deg,transparent 46%,rgba(255,255,255,.7) 47% 50%,transparent 51%),linear-gradient(135deg,#e82e3b 50%,#1454a3 51%); }

.music-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.music-options label { margin: 0; min-width: 0; }
.music-options input { position: absolute; opacity: 0; pointer-events: none; }
.music-options span {
  display: grid; place-items: center; min-height: 48px; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 8px; background: #fff; font-size: 12px; text-align: center; transition: .2s;
}
.music-options input:checked + span { border-color: var(--coral); background: #fff3ef; color: var(--coral-dark); box-shadow: inset 0 0 0 1px var(--coral); }
.music-upload { margin-top: 13px; padding: 12px; border: 1px dashed #dfcfc7; border-radius: 13px; background: #fffaf7; }
.music-upload input { margin: 0; font-size: 12px; }
.music-upload small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }

.phone[data-theme="kitty"] .phone-content { background: radial-gradient(circle at 16% 12%,#fff 0 2px,transparent 3px),linear-gradient(150deg,#fff7fb,#ffd5e8); }
.phone[data-theme="kitty"] .tiny-heart,.phone[data-theme="kitty"] small b { color: #e84091; }
.phone[data-theme="kitty"] .tiny-heart::after { content: "  🎀"; font-size: 27px; }
.phone[data-theme="kitty"] button { background: #ea4d97; }
.phone[data-theme="bat"] { background: #050609; }
.phone[data-theme="bat"] .phone-top { background: #050609; }
.phone[data-theme="bat"] .phone-content { background: radial-gradient(circle at 50% 17%,rgba(255,216,61,.15),transparent 24%),linear-gradient(155deg,#171a20,#050609); color: #f6f4e9; }
.phone[data-theme="bat"] .tiny-heart { color: #ffd83d; }
.phone[data-theme="bat"] .tiny-heart::before { content: "◆"; }
.phone[data-theme="bat"] .phone-question { color: #f6f4e9; background: #15181e; border-color: #353943; }
.phone[data-theme="bat"] button { color: #111; background: #ffd83d; }
.phone[data-theme="spider"] .phone-content { background: repeating-radial-gradient(circle at 100% 0,transparent 0 24px,rgba(255,255,255,.08) 25px 27px),linear-gradient(145deg,#a91322,#e93643 52%,#104987); color:#fff; }
.phone[data-theme="spider"] .tiny-heart { color: #fff; }
.phone[data-theme="spider"] .phone-question { color:#17233b; }
.phone[data-theme="spider"] button { background:#1259a6; }

.theme-decor { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.theme-decor i { position: absolute; display: none; opacity: .28; animation: themeFloat 8s ease-in-out infinite; }
.theme-decor i:nth-child(1) { top: 8%; left: 7%; animation-delay: -1s; }
.theme-decor i:nth-child(2) { top: 18%; right: 6%; animation-delay: -4s; transform: scale(.8); }
.theme-decor i:nth-child(3) { top: 52%; left: 4%; animation-delay: -6s; transform: scale(1.2); }
.theme-decor i:nth-child(4) { top: 67%; right: 5%; animation-delay: -2s; transform: scale(.7); }
.theme-decor i:nth-child(5) { bottom: 5%; left: 18%; animation-delay: -5s; }
.theme-decor i:nth-child(6) { bottom: 9%; right: 18%; animation-delay: -3s; transform: scale(1.25); }
@keyframes themeFloat { 0%,100% { translate: 0 0; rotate: -5deg; } 50% { translate: 0 -20px; rotate: 7deg; } }

.guest-view[data-theme="kitty"] { background: radial-gradient(circle at 20% 10%,rgba(255,255,255,.9) 0 3px,transparent 4px),linear-gradient(145deg,#fff6fb,#ffcde2); --guest-accent:#e84091; --guest-soft:#f8c9dd; }
.guest-view[data-theme="kitty"] .theme-decor i { display:block; width:46px; height:34px; }
.guest-view[data-theme="kitty"] .theme-decor i::before,.guest-view[data-theme="kitty"] .theme-decor i::after { content:""; position:absolute; top:7px; width:25px; height:20px; border-radius:70% 30% 70% 30%; background:#ee5da3; }
.guest-view[data-theme="kitty"] .theme-decor i::before { left:0; rotate:22deg; }
.guest-view[data-theme="kitty"] .theme-decor i::after { right:0; scale:-1 1; rotate:22deg; }
.guest-view[data-theme="kitty"] .theme-decor i { background:radial-gradient(circle,#fff 0 4px,#d93382 5px 7px,transparent 8px) center/18px 18px no-repeat; }

.guest-view[data-theme="bat"] { background:radial-gradient(circle at 50% -5%,rgba(255,215,55,.2),transparent 28%),linear-gradient(150deg,#16191f,#050608 70%); --guest-accent:#ffd83d; --guest-soft:#424650; color:#f7f4df; }
.guest-view[data-theme="bat"]::before,.guest-view[data-theme="bat"]::after { background:rgba(255,216,61,.1); }
.guest-view[data-theme="bat"] .guest-steps { background:rgba(21,24,29,.88); border-color:#323640; box-shadow:0 32px 90px rgba(0,0,0,.55); }
.guest-view[data-theme="bat"] .guest-step>p,.guest-view[data-theme="bat"] .progress span,.guest-view[data-theme="bat"] .playful-note,.guest-view[data-theme="bat"] .persian-date-note,.guest-view[data-theme="bat"] .guest-name-field small { color:#bbb9b0; }
.guest-view[data-theme="bat"] .big-question,.guest-view[data-theme="bat"] .guest-option,.guest-view[data-theme="bat"] input,.guest-view[data-theme="bat"] textarea,.guest-view[data-theme="bat"] .date-picker-toggle,.guest-view[data-theme="bat"] .success-summary span { background:#171a20; border-color:#393d46; color:#f7f4df; }
.guest-view[data-theme="bat"] .yes-button { color:#121212; }
.guest-view[data-theme="bat"] .no-button { background:#171a20; border-color:#393d46; color:#d8d5ca; }
.guest-view[data-theme="bat"] .persian-calendar { background:#15181d; border-color:#444850; }
.guest-view[data-theme="bat"] .calendar-day { color:#f5f1df; }
.guest-view[data-theme="bat"] .calendar-day.unavailable { color:#62646a; }
.guest-view[data-theme="bat"] .field-label { color:#ddd9cb; }
.guest-view[data-theme="bat"] .theme-decor i { display:block; width:70px; height:32px; background:#ffd83d; clip-path:polygon(0 38%,24% 15%,42% 36%,50% 0,58% 36%,76% 15%,100% 38%,82% 43%,70% 76%,54% 56%,50% 100%,46% 56%,30% 76%,18% 43%); opacity:.16; }

.guest-view[data-theme="spider"] { background:repeating-radial-gradient(circle at 0 0,transparent 0 55px,rgba(255,255,255,.08) 56px 58px),linear-gradient(145deg,#b41525 0 42%,#ed3542 43% 61%,#104b90 100%); --guest-accent:#1559a6; --guest-soft:#efb9bd; color:#17233b; }
.guest-view[data-theme="spider"]::before { background:rgba(255,255,255,.12); }
.guest-view[data-theme="spider"]::after { background:rgba(6,45,95,.2); }
.guest-view[data-theme="spider"] .guest-steps { background:rgba(255,255,255,.9); }
.guest-view[data-theme="spider"] .theme-decor i { display:block; width:76px; height:76px; border-radius:50%; opacity:.19; background:repeating-radial-gradient(circle,transparent 0 11px,#fff 12px 13px),conic-gradient(from 0deg,transparent 0 10deg,#fff 11deg 13deg,transparent 14deg 55deg,#fff 56deg 58deg,transparent 59deg); }

.music-control {
  position:fixed; z-index:12; left:18px; top:18px; width:45px; height:45px; border:1px solid color-mix(in srgb,var(--guest-accent) 28%,#fff);
  border-radius:50%; background:rgba(255,255,255,.9); color:var(--guest-accent); font-size:20px; box-shadow:0 10px 28px rgba(30,20,18,.15); backdrop-filter:blur(10px);
}
.music-control.playing { animation:musicPulse 1.5s ease-in-out infinite; }
.music-control.playing::after { content:""; position:absolute; inset:-5px; border:1px solid var(--guest-accent); border-radius:50%; opacity:.35; }
@keyframes musicPulse { 50% { transform:scale(1.07) rotate(5deg); } }
.guest-view[data-theme="bat"] .music-control { background:#171a20; color:#ffd83d; border-color:#4b4b35; }

.next-date-status:not(:empty),.next-date-result { display:flex; align-items:center; justify-content:center; gap:8px; background:color-mix(in srgb,var(--guest-accent) 9%,#fff); border:1px solid var(--guest-soft); border-radius:12px; padding:10px 13px; }
.next-date-button { border:1px solid var(--guest-accent); border-radius:13px; padding:12px 18px; background:transparent; color:var(--guest-accent); font-weight:800; }
.next-date-result { justify-content:flex-start; margin:10px 0; font-size:12px; }
.next-date-result b { color:var(--coral-dark); }

@media (max-width:650px) {
  .theme-picker { gap:8px; }
  .music-options { grid-template-columns:1fr; }
  .music-options span { min-height:44px; }
  .music-control { top:10px; left:10px; width:40px; height:40px; }
  .guest-view[data-theme="kitty"] .theme-decor i,.guest-view[data-theme="bat"] .theme-decor i,.guest-view[data-theme="spider"] .theme-decor i { transform:scale(.7); }
  .success-step .next-date-button { width:100%; }
}

/* V10: emoji tools, moderation entry points and subscription shortcuts. */
.plan-link,.dashboard-link { text-decoration:none; }
.plan-link span { display:inline-grid;place-items:center;min-width:38px;padding:3px 7px;border-radius:999px;background:#fff1cf;color:#8a6200;font-size:9px;font-weight:900;letter-spacing:.5px; }
.emoji-tools { margin-top:10px; }
.emoji-toggle { border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:11px;padding:9px 12px;font:700 12px Vazirmatn;cursor:pointer; }
.emoji-picker { margin-top:9px;padding:9px;display:flex;flex-wrap:wrap;gap:5px;border:1px solid var(--line);border-radius:13px;background:var(--paper);box-shadow:0 12px 30px rgba(42,28,25,.08); }
.emoji-picker button { width:34px;height:34px;border:0;border-radius:9px;background:#fff7f2;font-size:19px;cursor:pointer;transition:.15s; }
.emoji-picker button:hover { transform:translateY(-2px);background:#ffe9df; }
.emoji-tools>small { display:block;margin-top:6px;color:var(--muted); }
.report-invite { position:fixed;left:18px;top:18px;z-index:12;border:1px solid var(--guest-soft);border-radius:12px;padding:8px 11px;background:color-mix(in srgb,var(--guest-accent) 8%,#fff);color:var(--guest-accent);font:700 10px Vazirmatn;opacity:.72; }
.report-invite:hover { opacity:1; }
.report-trap { position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important; }
.modal select { width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:12px;font:inherit; }
.auth-marketing { margin-bottom:14px; }
html[data-color-mode="dark"] .emoji-picker button { background:#272c34; }
html[data-color-mode="dark"] .plan-link span { background:#453a20;color:#ffe099; }
@media(max-width:650px){.report-invite{top:auto;bottom:14px;left:10px}.dashboard-link{display:flex!important;align-items:center;justify-content:center}.dashboard-head-actions{display:grid!important;grid-template-columns:1fr 1fr}.dashboard-head-actions .button{grid-column:1/-1}.emoji-picker button{width:32px;height:32px}.plan-link{font-size:0}.plan-link span{font-size:9px}.memory-return{bottom:58px}}

@media (prefers-reduced-motion:reduce) {
  .theme-decor i,.music-control.playing { animation:none!important; }
}

.google-signin-area { margin: 18px 0 12px; }
#googleSignInButton { min-height: 44px; display: flex; justify-content: center; overflow: hidden; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 13px 0 0; color: #9a8e88; font-size: 11px; }
.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.auth-divider span { white-space: nowrap; }
@media (max-width:460px) { #googleSignInButton { transform-origin:center; } }

.legal-page { width:min(820px,calc(100% - 28px)); margin:45px auto 90px; }
.legal-page>h1 { font-size:clamp(34px,6vw,52px); margin:10px 0 4px; }
.legal-updated { color:var(--muted); margin-bottom:28px; }
.legal-page section { background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px 24px; margin:13px 0; box-shadow:0 10px 30px rgba(77,47,40,.045); }
.legal-page h2 { margin:0 0 8px; font-size:19px; }
.legal-page section p { color:var(--muted); line-height:2; margin:0; font-size:14px; }
footer a { color:var(--muted); text-decoration:none; }

/* Dates, memories and watch-party entry points */
.dashboard-head-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.memories-page { max-width:920px; }
.memories-head h1 { font-size:clamp(34px,6vw,48px); margin:10px 0 5px; }
.memories-head p { color:var(--muted); }
.suggestion-card { display:flex; gap:18px; align-items:center; margin:28px 0; padding:22px 25px; border-radius:21px; color:#fff; background:linear-gradient(135deg,#302a61,#6b55c9); box-shadow:0 18px 45px rgba(74,54,151,.2); }
.suggestion-card>span { display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; border-radius:18px; background:rgba(255,255,255,.15); font-size:29px; }
.suggestion-card small { color:#dcd7ff; }.suggestion-card h2 { margin:3px 0;font-size:20px }.suggestion-card p { margin:0;color:#e9e6ff;font-size:12px }
.timeline-list { position:relative; padding-right:28px; }
.timeline-list::before { content:""; position:absolute; right:8px; top:15px; bottom:15px; width:2px; background:linear-gradient(var(--coral),#dccfc8); }
.timeline-card { position:relative; margin:16px 0; }
.timeline-dot { position:absolute; right:-27px; top:26px; width:15px; height:15px; border-radius:50%; background:#fff; border:4px solid var(--coral); z-index:2; }
.timeline-card.upcoming .timeline-dot { animation:timelinePulse 1.6s ease-in-out infinite; }
@keyframes timelinePulse{50%{box-shadow:0 0 0 8px rgba(243,111,98,.13)}}
.timeline-card-body { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:0 12px 35px rgba(77,47,40,.055); }
.timeline-card-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.timeline-card-head small { color:var(--muted);font-size:11px }.timeline-card-head h2 { margin:5px 0;font-size:20px }
.mood-badge { background:#fff0eb;color:var(--coral-dark);border-radius:20px;padding:6px 10px;font-size:11px;font-weight:800 }
.timeline-countdown,.guest-countdown { direction:rtl; margin:15px 0 4px; padding:13px 15px; border-radius:13px; background:#fff1ed; color:var(--coral-dark); font-weight:900; text-align:center; }
.memory-photo { width:calc(100% + 44px); max-height:390px; object-fit:cover; display:block; margin:-22px -22px 20px; }
.memory-rating { color:#e3a81c;font-size:20px;letter-spacing:3px }.memory-note { color:var(--muted);line-height:1.9 }.memory-empty { color:#9b8e88;font-size:12px }
.response-memory { display:flex;gap:12px;align-items:center;background:#fff9f5;border-radius:12px;padding:10px;margin:10px 0 }.response-memory img{width:72px;height:72px;object-fit:cover;border-radius:10px}.response-memory b{color:#b27b00}.response-memory p{margin:4px 0 0}
.success-actions { display:flex;justify-content:center;flex-wrap:wrap;gap:9px }.guest-countdown:empty{display:none}
.memory-return { position:fixed;left:18px;bottom:18px;z-index:12;border:0;border-radius:14px;padding:11px 15px;background:var(--guest-accent);color:#fff;font-weight:800;box-shadow:0 12px 30px rgba(44,28,25,.18) }
.mood-picker { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:480px;margin:22px auto 14px }
.mood-picker button { min-width:0;border:1px solid var(--guest-soft);background:#fff;border-radius:12px;padding:10px 5px;color:var(--ink);font-size:11px;font-weight:700 }
.mood-picker button.selected { background:var(--guest-accent);color:#fff;border-color:var(--guest-accent) }
.rating-picker { display:flex;direction:ltr;justify-content:center;gap:5px;margin:13px 0 }
.rating-picker button { border:0;background:transparent;color:#d8cdc7;font-size:31px;padding:2px }
.rating-picker button.selected { color:#efb62b;transform:translateY(-2px) }
.guest-view[data-theme="bat"] .mood-picker button { background:#171a20;color:#f7f4df;border-color:#393d46 }.guest-view[data-theme="bat"] .mood-picker button.selected{background:#ffd83d;color:#111}
.watch-room-result { margin-top:15px;padding:14px;border:1px solid #d9e9df;background:#f5fff9;border-radius:14px }.watch-room-result b{display:block;margin-bottom:8px}.watch-room-result input{direction:ltr;text-align:left;margin:7px 0}.watch-room-result button{width:100%}

@media(max-width:700px){
  .dashboard-head{align-items:flex-start;gap:18px;flex-direction:column}.dashboard-head-actions{width:100%;justify-content:stretch}.dashboard-head-actions>*{flex:1;white-space:nowrap;padding-inline:9px}
  .timeline-list{padding-right:20px}.timeline-card-body{padding:17px}.timeline-dot{right:-20px}.memory-photo{width:calc(100% + 34px);margin:-17px -17px 17px}.timeline-card-head h2{font-size:17px}
  .suggestion-card{padding:18px}.suggestion-card>span{flex-basis:48px;width:48px;height:48px}.mood-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.memory-return{left:10px;bottom:10px;font-size:11px}
}

/* V9: layout guards for narrow Safari viewports and intrinsically wide controls. */
.guest-view,
.guest-shell,
.guest-steps,
.guest-step,
.date-fields,
.date-fields > *,
.calendar-field,
.date-picker-toggle,
.date-picker-toggle > span {
  min-width: 0;
  max-width: 100%;
}
.guest-view { width: 100%; max-width: 100vw; }
.guest-shell { box-sizing: border-box; }
.guest-steps { width: 100%; }
.guest-step { overflow-wrap: anywhere; }
.date-fields { width: 100%; }
.date-fields label { min-width: 0; }
.date-fields input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.date-picker-toggle > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-toggle {
  display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink);
  font-size: 18px; line-height: 1; box-shadow: 0 5px 16px rgba(50,35,30,.06);
}
.toggle-row { display:flex; gap:12px; align-items:flex-start; padding:13px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.toggle-row input { flex:0 0 auto; width:20px; height:20px; margin:1px 0 0; accent-color:var(--coral); }
.toggle-row span { min-width:0; }.toggle-row b,.toggle-row small { display:block; }.toggle-row small { margin-top:4px; color:var(--muted); font-weight:400; line-height:1.7; }
.date-approval-status:not(:empty) { margin:14px auto; max-width:470px; border:1px solid var(--guest-soft); border-radius:13px; padding:11px 13px; line-height:1.8; background:color-mix(in srgb,var(--guest-accent) 8%,#fff); }
.date-approval-status[data-status="pending_creator"] { color:#9a6d00; }
.date-approval-status[data-status="confirmed"] { color:#287451; }
.date-approval-status[data-status="change_requested"] { color:#b33d35; }
.date-decision { margin:12px 0; padding:13px; border:1px solid var(--line); border-radius:13px; background:#fffaf7; }
.date-decision p { margin:0 0 10px; }
.date-decision-actions { display:flex; flex-wrap:wrap; gap:8px; }
.date-decision-actions button { border:0; border-radius:10px; padding:9px 12px; font-size:12px; font-weight:800; }
.date-decision-actions [data-date-action="confirm"] { background:#dff3e9; color:#287451; }
.date-decision-actions [data-date-action="request_change"] { background:#fff0ec; color:#a83b34; }
.date-status-badge { display:inline-block; margin:5px 0 10px; border-radius:20px; padding:5px 10px; background:#f2eeeb; color:var(--muted); font-size:11px; font-weight:800; }

/* Dark mode covers the site chrome; invitation themes keep their own art direction. */
html[data-color-mode="dark"] {
  color-scheme: dark;
  --ink:#f4eee9; --muted:#bcb1aa; --cream:#101216; --paper:#191c22; --line:#343840;
  --coral:#f07b70; --coral-dark:#ff948a; --action-coral:#d65c52;
}
html[data-color-mode="dark"] body { background:radial-gradient(circle at 84% 2%,rgba(214,92,82,.13),transparent 25%),#101216; color:var(--ink); }
html[data-color-mode="dark"] .site-header { background:rgba(16,18,22,.82); border-color:#2a2e35; }
html[data-color-mode="dark"] .brand,
html[data-color-mode="dark"] nav a,
html[data-color-mode="dark"] .text-button,
html[data-color-mode="dark"] .watch-demo,
html[data-color-mode="dark"] label { color:var(--ink); }
html[data-color-mode="dark"] .how-section,
html[data-color-mode="dark"] .steps article,
html[data-color-mode="dark"] .dashboard-stats article,
html[data-color-mode="dark"] .invite-card,
html[data-color-mode="dark"] .form-card,
html[data-color-mode="dark"] .empty-state,
html[data-color-mode="dark"] .modal,
html[data-color-mode="dark"] .legal-page section,
html[data-color-mode="dark"] .timeline-card-body { background:#181b20; border-color:var(--line); }
html[data-color-mode="dark"] input,
html[data-color-mode="dark"] textarea,
html[data-color-mode="dark"] .outline-button,
html[data-color-mode="dark"] .choice-grid span,
html[data-color-mode="dark"] .music-options span,
html[data-color-mode="dark"] .toggle-row,
html[data-color-mode="dark"] .theme-toggle { background:#20242b; border-color:#3a3f48; color:var(--ink); }
html[data-color-mode="dark"] .radio-stack label > span { border-color:#3a3f48; background:#20242b; }
html[data-color-mode="dark"] .choice-grid input:checked + span,
html[data-color-mode="dark"] .music-options input:checked + span,
html[data-color-mode="dark"] .radio-stack input:checked + span { background:#302321; }
html[data-color-mode="dark"] .auth-tabs,
html[data-color-mode="dark"] .modal-close,
html[data-color-mode="dark"] .response-details span { background:#252930; color:var(--ink); }
html[data-color-mode="dark"] .auth-tabs button.active { background:#343942; color:#fff; }
html[data-color-mode="dark"] .date-decision { background:#20242b; }
html[data-color-mode="dark"] .timeline-dot { background:#181b20; }
html[data-color-mode="dark"] footer { border-color:var(--line); }
html[data-color-mode="dark"] .guest-view:not([data-theme="bat"]) input,
html[data-color-mode="dark"] .guest-view:not([data-theme="bat"]) textarea,
html[data-color-mode="dark"] .guest-view:not([data-theme="bat"]) .guest-option,
html[data-color-mode="dark"] .guest-view:not([data-theme="bat"]) .date-picker-toggle { background:#fff; border-color:#ded2cb; color:#28201f; }
html[data-color-mode="dark"] .guest-view:not([data-theme="bat"]) label,
html[data-color-mode="dark"] .guest-view:not([data-theme="bat"]) .field-label { color:#574d49; }

@media (max-width:650px) {
  .guest-shell { width:100%; padding-inline:7px; }
  .guest-steps { overflow:visible; }
  .date-fields { grid-template-columns:minmax(0,1fr); }
  .date-fields input[type="time"] { inline-size:100%; }
  .theme-toggle { width:34px; height:34px; flex-basis:34px; }
}

/* V11: readable dark forms and separated guest controls. */
.report-invite { left:78px; top:18px; bottom:auto; background:rgba(255,255,255,.94); color:color-mix(in srgb,var(--guest-accent) 82%,#271f1d); opacity:.92; box-shadow:0 10px 28px rgba(30,20,18,.12); backdrop-filter:blur(10px); }
.guest-view[data-theme="bat"] .report-invite { background:#171a20; color:#ffd83d; border-color:#4b4b35; }
.phone:not([data-theme="bat"]):not([data-theme="spider"]) .phone-content { color:#28201f; }
.phone:not([data-theme="bat"]):not([data-theme="spider"]) .phone-content small,
.phone:not([data-theme="bat"]):not([data-theme="spider"]) .phone-content p { color:#756a65; }
html[data-color-mode="dark"] input::placeholder,html[data-color-mode="dark"] textarea::placeholder { color:#aeb4bd; opacity:1; }
html[data-color-mode="dark"] .form-head p,html[data-color-mode="dark"] .hint,html[data-color-mode="dark"] .emoji-tools>small { color:#c6bbb5; }
html[data-color-mode="dark"] .radio-stack small,html[data-color-mode="dark"] .toggle-row small { color:#b9b0aa; }
html[data-color-mode="dark"] .phone:not([data-theme="bat"]):not([data-theme="spider"]) .phone-question { color:#28201f; }
.guest-view[data-theme="bat"] input::placeholder,.guest-view[data-theme="bat"] textarea::placeholder { color:#989b9f; opacity:1; }
@media(max-width:650px){.report-invite{left:58px;top:10px;bottom:auto}}

/* V12: keep invitation copy readable in site dark mode and reserve real space below the playful buttons. */
.guest-view:not([data-theme="bat"]) {
  --ink: #28201f;
  --muted: #756a65;
  color: #28201f;
}
.guest-view:not([data-theme="bat"]) .guest-step h1,
.guest-view:not([data-theme="bat"]) .big-question,
.guest-view:not([data-theme="bat"]) .guest-option,
.guest-view:not([data-theme="bat"]) .success-summary span {
  color: #28201f;
}
.guest-view:not([data-theme="bat"]) .guest-step > p,
.guest-view:not([data-theme="bat"]) .progress span,
.guest-view:not([data-theme="bat"]) .playful-note,
.guest-view:not([data-theme="bat"]) .persian-date-note,
.guest-view:not([data-theme="bat"]) .guest-name-field small {
  color: #756a65;
}
.playful-note {
  position: relative;
  z-index: 4;
  display: block;
  margin: 24px auto 0;
  padding-inline: 8px;
  line-height: 1.9;
  clear: both;
}
.yes-no-zone { margin-bottom: 0; }
.yes-no-zone .yes-button,
.yes-no-zone .no-button { line-height: 1.55; }
@media(max-width:650px){
  .playful-note { margin-top: 18px; }
}

/* V13: account recovery, remembered login and public social links. */
.remember-login { margin-block: 10px; }
.auth-help-link {
  display: block; width: 100%; margin: 3px 0 13px; padding: 5px; border: 0; background: transparent;
  color: var(--coral-dark); text-align: center; font-weight: 800; font-size: 12px;
}
.auth-help-link:hover { text-decoration: underline; }
.reset-request-status { line-height: 1.9; }
.reset-request-status.success { color: #287451; }
html[data-color-mode="dark"] .auth-help-link { color: #ff9b92; }
html[data-color-mode="dark"] .reset-request-status.success { color: #75d7aa; }
.password-reset-page { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 35px 15px 75px; }
.account-card { width: min(480px,100%); background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 30px; box-shadow: 0 26px 75px rgba(72,42,35,.11); }
.account-card > .brand-mark { margin-bottom: 18px; }
.account-card h1 { font-size: clamp(29px,6vw,40px); margin: 8px 0; }
.account-card > p,.reset-success p { color: var(--muted); line-height: 1.9; }
.reset-success { text-align: center; }
.reset-success > b { display: block; color: #287451; font-size: 21px; margin-bottom: 8px; }
.reset-success .button { display: block; text-decoration: none; margin-top: 18px; }
.social-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; }
.social-links a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 700; background: color-mix(in srgb,var(--paper) 86%,transparent); }
.social-links a:hover { color: var(--coral-dark); border-color: var(--coral); transform: translateY(-1px); }
.social-links a span { color: var(--coral); font-size: 14px; }
.social-links a b { font: inherit; }
#siteFooter { flex-wrap: wrap; gap: 14px; }
@media(max-width:650px){
  .account-card { padding: 24px 18px; border-radius: 21px; }
  .password-reset-page { padding-top: 25px; }
  #siteFooter .social-links { width: 100%; }
}