:root {
  color-scheme: light;
  --ink: #231f25;
  --muted: #716a72;
  --pink: #ff4f88;
  --pink-dark: #e93d77;
  --pink-soft: #fff0f5;
  --blue-soft: #cceefa;
  --cream: #fff0da;
  --line: #eadfe4;
  --paper: #fffefd;
  --shadow: 0 24px 70px rgba(169, 63, 105, 0.14);
  font-family: "Segoe UI", "Arial Rounded MT Bold", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 9%, rgba(184, 231, 250, .5) 0 42px, transparent 43px),
    radial-gradient(circle at 93% 34%, rgba(255, 211, 225, .56) 0 60px, transparent 61px),
    var(--paper);
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar {
  width: min(1180px, calc(100% - 40px));
  height: 82px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font-size: 23px; font-weight: 850; letter-spacing: -.7px; }
.brand span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border-radius: 12px 12px 16px 16px;
  color: white;
  background: var(--pink);
  transform: rotate(-7deg);
}
.soft-link {
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  font-size: 14px;
  font-weight: 650;
}
.home-shell {
  width: min(1180px, calc(100% - 40px));
  min-height: 700px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr .82fr;
  align-items: center;
  gap: 70px;
}
.hero-copy { padding: 50px 0 80px; }
.love-meter { display: flex; align-items: center; width: 250px; height: 38px; margin-bottom: 34px; }
.love-meter i, .love-meter span { height: 9px; border-radius: 9px; flex: 1; }
.love-meter i { background: var(--pink); }
.love-meter span { background: repeating-linear-gradient(130deg, #f9d7e2 0 5px, #fff 5px 9px); }
.love-meter b { color: var(--pink); font-size: 37px; line-height: 1; margin: 0 -1px; transform: translateY(-1px); }
.eyebrow { color: var(--pink-dark); font-size: 14px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 14px 0 22px; font-size: clamp(48px, 6vw, 82px); line-height: .96; letter-spacing: -.065em; font-weight: 880; }
h1 em { color: var(--pink); font-style: normal; }
.hero-lead { max-width: 590px; margin: 0; color: var(--muted); font-size: 19px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.primary-button {
  min-height: 58px;
  padding: 0 24px;
  border: 0;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: white;
  background: linear-gradient(135deg, #ff6d9c, var(--pink));
  box-shadow: 0 14px 35px rgba(255,79,136,.28);
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255,79,136,.34); }
.primary-button span { font-size: 24px; }
.text-button { border: 0; border-bottom: 1px dashed #c9a6b3; padding: 8px 0; background: none; color: #625a62; cursor: pointer; }
.trust-row { display: flex; gap: 10px; margin-top: 27px; flex-wrap: wrap; }
.trust-row span { padding: 8px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: #847982; font-size: 13px; }
.trust-row span::before { content: "✓"; color: var(--pink); font-weight: 900; margin-right: 6px; }

.phone-stage { position: relative; display: grid; place-items: center; padding: 30px; }
.phone-frame {
  width: min(410px, 100%);
  min-height: 650px;
  padding: 18px;
  border: 10px solid #ffc6d9;
  border-radius: 62px;
  background: linear-gradient(160deg, #ffeff5, #fff9fb);
  box-shadow: var(--shadow);
  transform: rotate(2deg);
}
.phone-speaker { height: 38px; display: flex; justify-content: center; }
.phone-speaker::before { content: ""; width: 100px; height: 20px; border-radius: 20px; background: #ffc9db; }
.phone-speaker i { position: absolute; width: 9px; height: 9px; margin: 6px 0 0 58px; border-radius: 50%; background: #d993ab; }
.invite-card {
  min-height: 555px;
  padding: 42px 30px;
  text-align: center;
  border-radius: 48px;
  background: #fff;
  clip-path: polygon(4% 0, 96% 1%, 100% 7%, 98% 15%, 100% 25%, 97% 34%, 100% 43%, 97% 53%, 100% 63%, 97% 73%, 100% 83%, 96% 100%, 4% 99%, 0 92%, 2% 82%, 0 72%, 3% 62%, 0 52%, 3% 41%, 0 31%, 2% 21%, 0 10%);
}
.tiny-sticker { display: block; font-size: 51px; filter: drop-shadow(0 8px 9px rgba(152,84,105,.13)); }
.invite-card h2 { margin: 17px 0 7px; font-size: 28px; line-height: 1.05; letter-spacing: -.035em; }
.invite-card > p { margin: 0 0 25px; color: #7d747c; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-grid div { min-height: 118px; display: grid; place-items: center; align-content: center; gap: 7px; border: 2px solid #f1cfda; border-radius: 24px; background: #fffdfd; }
.choice-grid b { font-size: 39px; }
.choice-grid span { font-size: 15px; }
.mini-date { margin-top: 17px; padding: 12px; border-radius: 14px; color: #8c6674; background: var(--pink-soft); font-size: 14px; }
.float-emoji { position: absolute; z-index: 3; display: grid; place-items: center; background: white; box-shadow: var(--shadow); }
.float-one { top: 64px; right: -8px; width: 84px; height: 84px; border-radius: 26px; font-size: 42px; transform: rotate(9deg); }
.float-two { bottom: 92px; left: -4px; width: 66px; height: 66px; border-radius: 22px; font-size: 29px; transform: rotate(-11deg); }

.moods { width: min(1050px, calc(100% - 40px)); margin: 10px auto 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.moods div { min-height: 120px; padding: 22px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.77); display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-content: center; }
.moods span { grid-row: span 2; font-size: 31px; }
.moods b { align-self: end; font-size: 16px; }
.moods small { color: var(--muted); font-size: 13px; }
.demo-modal { position: fixed; z-index: 12; left: 50%; top: 50%; width: min(440px, calc(100% - 32px)); padding: 42px; border-radius: 35px; background: white; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, -45%) scale(.96); transition: .22s ease; }
.demo-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal-backdrop { position: fixed; z-index: 11; inset: 0; background: rgba(38,27,33,.34); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: .2s ease; }
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal-close { position: absolute; right: 16px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f8f3f5; font-size: 25px; cursor: pointer; }
.demo-kiss { font-size: 64px; animation: bob 1.8s ease-in-out infinite; }
.demo-modal h2 { margin: 16px 0 10px; font-size: 27px; }
.demo-modal p { margin: 0 0 24px; color: var(--muted); line-height: 1.5; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(4deg); } }

@media (max-width: 820px) {
  body { background: var(--paper); }
  .topbar { width: calc(100% - 28px); height: 70px; }
  .soft-link { padding: 9px 12px; font-size: 13px; }
  .home-shell { width: calc(100% - 28px); margin-top: 0; grid-template-columns: 1fr; gap: 12px; }
  .hero-copy { padding: 36px 4px 20px; text-align: center; }
  .love-meter { margin: 0 auto 25px; width: 205px; }
  .eyebrow { font-size: 12px; }
  h1 { font-size: clamp(43px, 14vw, 62px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .primary-button { width: 100%; }
  .trust-row { justify-content: center; }
  .phone-stage { padding: 28px 6px 42px; }
  .phone-frame { width: min(390px, 96%); min-height: 600px; border-width: 8px; border-radius: 50px; transform: none; }
  .invite-card { min-height: 510px; padding: 34px 24px; }
  .float-one { right: 0; top: 5px; width: 63px; height: 63px; font-size: 30px; }
  .float-two { left: 0; bottom: 64px; }
  .moods { grid-template-columns: 1fr; margin-top: 22px; }
  .moods div { min-height: 92px; }
  .demo-modal { padding: 36px 26px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Shared application surfaces */
.topbar.compact { height: 68px; }
.site-footer { width: min(1050px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0 38px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: #8b8087; font-size: 13px; }
.site-footer a { text-decoration: underline; text-underline-offset: 4px; }
.secondary-button { min-height: 48px; padding: 0 19px; border: 1px solid var(--line); border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: white; color: #4d454c; font-weight: 700; cursor: pointer; }
.secondary-button.full, .primary-button.full { width: 100%; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; max-width: calc(100% - 28px); padding: 13px 18px; border-radius: 14px; color: white; background: #272027; box-shadow: 0 14px 45px rgba(24,16,21,.25); opacity: 0; transform: translate(-50%, 16px); transition: .25s ease; font-size: 14px; font-weight: 650; text-align: center; }
.toast.error { background: #a82f54; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.skeleton { border-radius: 20px; background: linear-gradient(90deg, #f7eef1 25%, #fff 50%, #f7eef1 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton.wide { width: 100%; height: 140px; }
.skeleton-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.skeleton-grid i { height: 330px; border-radius: 28px; background: #f7eef1; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Builder */
.page-builder { background: #fffdfc; }
.builder-shell { width: min(1220px, calc(100% - 40px)); margin: 24px auto 80px; display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 58px; align-items: start; }
.builder-panel { min-width: 0; }
.builder-heading .love-meter.small { width: 190px; height: 28px; margin-bottom: 24px; }
.builder-heading .love-meter.small b { font-size: 29px; }
.builder-heading > h1 { max-width: 680px; margin: 8px 0 12px; font-size: clamp(40px, 5vw, 64px); }
.builder-heading > p:last-child { margin: 0; color: var(--muted); font-size: 17px; }
.step-dots { display: flex; gap: 7px; margin: 26px 0; }
.step-dots i { width: 42px; height: 6px; border-radius: 8px; background: #ece5e8; transition: .25s ease; }
.step-dots i.active { width: 76px; background: var(--pink); }
.builder-form { display: grid; gap: 20px; }
.form-card { overflow: hidden; border: 1px solid #e9e2e5; border-radius: 30px; background: white; box-shadow: 0 12px 42px rgba(65,38,51,.045); }
.card-title { min-height: 70px; padding: 0 27px; display: flex; align-items: center; justify-content: space-between; background: #f8f5f6; font-size: 19px; font-weight: 750; }
.blue-card .card-title { background: var(--blue-soft); }
.cream-card .card-title { background: var(--cream); }
.card-title b { font-size: 14px; font-weight: 700; color: #756b72; }
.card-body { padding: 26px; }
.field-label { margin: 0 0 12px; font-size: 14px; font-weight: 750; color: #5d535a; }
.theme-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 25px; }
.theme-picker button { position: relative; min-height: 64px; padding: 9px 12px; border: 1.5px solid #e6dfe2; border-radius: 18px; display: flex; align-items: center; gap: 12px; background: white; cursor: pointer; text-align: left; color: #4e464b; }
.theme-picker button.selected { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,79,136,.1); }
.theme-picker i { width: 37px; height: 37px; flex: none; border-radius: 13px; background: linear-gradient(135deg, var(--a), var(--b)); }
.theme-picker span { font-size: 14px; font-weight: 700; }
.sticker-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 21px; }
.sticker-picker button { height: 58px; border: 1px solid #e9e2e5; border-radius: 16px; background: #fff; font-size: 27px; cursor: pointer; transition: .2s ease; }
.sticker-picker button:hover { transform: translateY(-2px); }
.sticker-picker button.selected { border: 2px solid var(--pink); background: var(--pink-soft); }
.upload-zone { min-height: 88px; padding: 15px 19px; border: 1px dashed #d9cbd0; border-radius: 21px; display: flex; align-items: center; gap: 16px; cursor: pointer; background: #fffdfd; }
.upload-zone input { position: absolute; opacity: 0; pointer-events: none; }
.upload-zone > b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #f1f7ff; font-size: 23px; }
.upload-zone > span { display: grid; font-size: 15px; font-weight: 700; }
.upload-zone small { margin-top: 3px; color: #938b91; font-size: 12px; font-weight: 500; }
.upload-zone.uploading { opacity: .5; pointer-events: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; }
.form-field { display: grid; gap: 8px; }
.form-field.full, .mode-row.full, .info-note.full { grid-column: 1 / -1; }
.form-field > span { display: flex; justify-content: space-between; color: #5d535a; font-size: 14px; font-weight: 700; }
.form-field small { color: #999096; font-weight: 500; }
.form-field input, .form-field textarea, .choice-edit input, .public-field input, .public-field textarea, .public-date-fields input { width: 100%; border: 1px solid #e4dce0; border-radius: 17px; background: #fbf9fa; color: #292328; outline: none; font-size: 16px; transition: .2s ease; }
.form-field input { height: 52px; padding: 0 15px; }
.form-field textarea { resize: vertical; min-height: 84px; padding: 14px 15px; line-height: 1.45; }
.form-field input:focus, .form-field textarea:focus, .choice-edit input:focus, .public-field input:focus, .public-field textarea:focus, .public-date-fields input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,79,136,.09); background: white; }
.mode-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mode-row > span { font-size: 14px; font-weight: 700; }
.segmented { padding: 4px; display: flex; border-radius: 14px; background: #f4f0f2; }
.segmented button { min-height: 38px; padding: 0 15px; border: 0; border-radius: 11px; background: transparent; color: #7c7379; cursor: pointer; }
.segmented button.active { background: white; color: var(--ink); box-shadow: 0 3px 12px rgba(43,29,36,.09); font-weight: 700; }
.choice-editor { display: grid; gap: 10px; }
.choice-edit { display: grid; grid-template-columns: 65px 1fr 40px; gap: 9px; }
.choice-edit input { height: 52px; padding: 0 14px; }
.choice-edit input:first-child { text-align: center; font-size: 23px; }
.choice-edit button { border: 0; border-radius: 13px; background: #f8f3f5; color: #a18f97; font-size: 22px; cursor: pointer; }
.add-choice { width: 100%; min-height: 52px; margin-top: 12px; border: 1px dashed #d9cbd0; border-radius: 16px; background: #fff; color: #5d535a; cursor: pointer; }
.info-note { margin: 0; padding: 14px 16px; border-radius: 14px; background: #f2faff; color: #60747c; font-size: 14px; line-height: 1.45; }
.ready-card { padding: 22px; border-radius: 24px; display: flex; gap: 17px; align-items: center; background: linear-gradient(135deg, #fff1f6, #fff9ed); border: 1px solid #f5dbe4; }
.ready-card > span { font-size: 38px; }
.ready-card h3 { margin: 0 0 5px; font-size: 17px; }
.ready-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.consent-row { padding: 2px 4px; display: flex; align-items: center; gap: 10px; color: #6e656b; font-size: 13px; cursor: pointer; }
.consent-row input { width: 18px; height: 18px; accent-color: var(--pink); }
.builder-nav { position: sticky; bottom: 0; z-index: 3; margin-top: 22px; padding: 14px; border: 1px solid #eee4e8; border-radius: 26px; display: flex; gap: 12px; background: rgba(255,255,255,.93); box-shadow: 0 -12px 34px rgba(70,47,58,.05); backdrop-filter: blur(12px); }
.builder-nav .primary-button { flex: 1; }
.round-back { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border: 1px solid #eadce1; border-radius: 18px; background: white; color: #4f474c; font-size: 23px; cursor: pointer; }
.builder-preview { position: sticky; top: 22px; display: grid; justify-items: center; }
.builder-preview > p { margin: 0 0 14px; padding: 7px 12px; border-radius: 99px; background: #f6f0f3; color: #83777f; font-size: 12px; }
.phone-frame.preview { width: 365px; min-height: 610px; padding: 15px; border-width: 8px; border-radius: 54px; transform: none; transition: background .25s ease, border-color .25s ease; }
.phone-frame.preview .phone-speaker { height: 33px; }
.phone-frame.preview .invite-card { min-height: 527px; padding: 35px 25px; display: flex; flex-direction: column; justify-content: center; }
.phone-frame.preview .invite-card h2 { font-size: 26px; }
.phone-frame.preview .choice-grid div { min-height: 104px; }
.preview-step { position: absolute; align-self: flex-end; top: 75px; font-size: 11px; color: #aa9da4; }
.preview-sticker { display: block; margin-bottom: 12px; font-size: 55px; filter: drop-shadow(0 8px 10px rgba(92,56,72,.1)); }
.preview-upload { width: 112px; height: 112px; margin: 0 auto 14px; border: 6px solid white; border-radius: 34px; object-fit: cover; box-shadow: 0 12px 25px rgba(67,37,51,.13); transform: rotate(-3deg); }
.dear { margin-bottom: 9px; color: #bb5278; }
.preview-buttons { margin-top: 23px; display: grid; gap: 9px; }
.preview-buttons span { min-height: 43px; padding: 0 12px; border-radius: 14px; display: grid; place-items: center; font-size: 13px; }
.preview-buttons .yes { color: white; background: var(--theme-accent, var(--pink)); }
.preview-buttons .no { color: #756c72; background: #f0ebee; }
.final-preview .mini-date { width: 100%; }
.theme-candy { --theme-accent: #ff4f88; border-color: #ffc6d9; background: linear-gradient(160deg, #ffeff5, #fff9fb); }
.theme-night { --theme-accent: #7957d5; border-color: #8372c7; background: linear-gradient(160deg, #312b4b, #191725); }
.theme-night .invite-card { color: #f8f5ff; background: #28233d; }
.theme-night .invite-card > p, .theme-night .screen-subtitle { color: #c7bddc; }
.theme-night .choice-grid div { border-color: #5b507b; background: #332d4c; }
.theme-night .mini-date { color: #d8cdf1; background: #41385f; }
.theme-mint { --theme-accent: #35ad8b; border-color: #aee8d5; background: linear-gradient(160deg, #e3faf2, #fafffd); }
.theme-mint .choice-grid div { border-color: #bfe8da; }
.theme-mint .mini-date { color: #397b68; background: #e2f7f0; }
.theme-peach { --theme-accent: #ff8069; border-color: #ffcdbd; background: linear-gradient(160deg, #fff0e8, #fff9f4); }
.theme-peach .choice-grid div { border-color: #f4d1c5; }
.theme-peach .mini-date { color: #a65f50; background: #fff0e8; }

/* Creation success */
.page-success { background: radial-gradient(circle at 15% 20%, #dff5fc 0 80px, transparent 82px), radial-gradient(circle at 90% 80%, #fff0cf 0 95px, transparent 97px), #fffdfc; }
.success-shell { width: min(670px, calc(100% - 32px)); margin: 50px auto 90px; padding: 45px; border: 1px solid #eadfe4; border-radius: 36px; background: rgba(255,255,255,.92); text-align: center; box-shadow: var(--shadow); }
.success-icon { width: 72px; height: 72px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 26px; color: white; background: var(--pink); font-size: 34px; transform: rotate(-4deg); }
.success-shell h1 { margin: 8px 0 14px; font-size: clamp(36px, 6vw, 54px); }
.success-lead { margin: 0 auto 28px; max-width: 520px; color: var(--muted); line-height: 1.5; }
.confetti { height: 0; position: relative; top: -10px; letter-spacing: 15px; font-size: 21px; animation: confetti 2.6s ease-in-out infinite; }
@keyframes confetti { 50% { transform: translateY(-7px); } }
.link-box { padding: 18px; border-radius: 21px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; background: #f9f5f7; text-align: left; }
.link-box span { grid-column: 1 / -1; color: #877b82; font-size: 12px; }
.link-box code { overflow: hidden; align-self: center; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; font-size: 14px; }
.link-box button, .recovery-box button { border: 0; background: none; color: var(--pink-dark); font-weight: 750; cursor: pointer; }
.success-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 24px; }
.recovery-box { padding: 20px; border: 1px solid #f0dfb7; border-radius: 20px; background: #fffaf0; text-align: left; }
.recovery-box p { margin: 7px 0 11px; color: #756b58; font-size: 13px; line-height: 1.45; }
.recovery-box button { padding: 0; color: #9a6921; }
.cabinet-link { display: inline-block; margin-top: 24px; color: #5b5158; font-weight: 700; }

/* Public invitation */
.page-invitation { --invite-accent: #ff4f88; --invite-soft: #fff0f5; --invite-frame: #ffc6d9; --invite-bg: #fffafd; --invite-paper: #fff; --invite-text: #241f23; --invite-muted: #776e75; min-height: 100vh; background: radial-gradient(circle at 10% 8%, rgba(195,235,249,.68) 0 42px, transparent 44px), radial-gradient(circle at 88% 76%, rgba(255,213,227,.7) 0 58px, transparent 60px), var(--invite-bg); color: var(--invite-text); }
.page-invitation.theme-night { --invite-accent: #9678f0; --invite-soft: #3e365c; --invite-frame: #7665b5; --invite-bg: #181522; --invite-paper: #28233d; --invite-text: #fbf9ff; --invite-muted: #c8bfda; background: radial-gradient(circle at 15% 10%, rgba(116,85,205,.28), transparent 27%), radial-gradient(circle at 86% 80%, rgba(255,118,170,.16), transparent 27%), #181522; }
.page-invitation.theme-mint { --invite-accent: #35ad8b; --invite-soft: #e2f7f0; --invite-frame: #aee8d5; --invite-bg: #f5fffb; --invite-paper: #fff; --invite-text: #20302b; --invite-muted: #667770; }
.page-invitation.theme-peach { --invite-accent: #ff8069; --invite-soft: #fff0e8; --invite-frame: #ffc8b6; --invite-bg: #fffaf5; --invite-paper: #fff; --invite-text: #32241f; --invite-muted: #796c67; }
.invite-loading, .invite-closed { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; }
.invite-loading span { font-size: 64px; animation: bob 1.5s ease-in-out infinite; }
.invite-loading p { color: #7d737a; }
.invite-experience { width: min(530px, 100%); min-height: 100vh; margin: 0 auto; padding: 34px 20px 25px; display: flex; flex-direction: column; justify-content: center; }
.invite-progress { position: relative; width: min(380px, calc(100% - 45px)); height: 25px; margin: 0 auto 24px; border-radius: 99px; background: repeating-linear-gradient(130deg, color-mix(in srgb, var(--invite-accent) 20%, white) 0 5px, transparent 5px 10px); }
.invite-progress i { position: absolute; left: 0; top: 8px; height: 9px; border-radius: 99px; background: var(--invite-accent); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.invite-progress b { position: absolute; top: -7px; color: var(--invite-accent); font-size: 31px; transition: left .45s cubic-bezier(.2,.8,.2,1); }
.experience-phone { width: 100%; min-height: 680px; padding: 13px; border: 8px solid var(--invite-frame); border-radius: 56px; background: color-mix(in srgb, var(--invite-frame) 25%, var(--invite-bg)); box-shadow: 0 30px 80px color-mix(in srgb, var(--invite-accent) 18%, transparent); }
.experience-speaker { position: relative; height: 39px; display: flex; justify-content: center; }
.experience-speaker::before { content: ""; width: 112px; height: 21px; border-radius: 20px; background: var(--invite-frame); }
.experience-speaker i { position: absolute; width: 8px; height: 8px; margin: 6px 0 0 62px; border-radius: 50%; background: color-mix(in srgb, var(--invite-accent) 60%, #777); }
.experience-paper { min-height: 610px; padding: 37px 31px; border-radius: 43px; display: flex; background: var(--invite-paper); clip-path: polygon(3% 0, 97% 1%, 100% 8%, 98% 17%, 100% 27%, 97% 38%, 100% 49%, 97% 60%, 100% 72%, 97% 83%, 100% 93%, 96% 100%, 3% 99%, 0 91%, 2% 82%, 0 72%, 3% 61%, 0 50%, 3% 39%, 0 28%, 2% 18%, 0 8%); }
.invite-screen { width: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; animation: screen-in .35s ease both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(9px) scale(.99); } }
.screen-number { position: absolute; align-self: flex-end; margin-top: -540px; color: color-mix(in srgb, var(--invite-muted) 70%, transparent); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.invite-sticker { margin-bottom: 9px; font-size: 66px; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--invite-accent) 20%, transparent)); animation: bob 2.2s ease-in-out infinite; }
.invite-photo { width: 150px; height: 150px; margin: 0 auto 18px; border: 7px solid var(--invite-paper); border-radius: 42px; object-fit: cover; box-shadow: 0 14px 32px color-mix(in srgb, var(--invite-accent) 23%, transparent); transform: rotate(-3deg); }
.recipient-line { margin: 0 0 7px; color: var(--invite-accent); font-weight: 750; }
.invite-screen h1 { margin: 6px 0 12px; font-size: clamp(31px, 8vw, 42px); line-height: 1.02; letter-spacing: -.055em; }
.screen-subtitle { margin: 0 auto; max-width: 360px; color: var(--invite-muted); font-size: 17px; line-height: 1.48; }
.from-line { display: block; margin-top: 12px; color: var(--invite-muted); font-size: 13px; }
.answer-buttons { position: relative; margin-top: 30px; display: grid; gap: 10px; }
.yes-answer, .no-answer, .invite-next { min-height: 54px; border: 0; border-radius: 18px; cursor: pointer; font-weight: 750; }
.yes-answer, .invite-next { color: white; background: var(--invite-accent); box-shadow: 0 12px 30px color-mix(in srgb, var(--invite-accent) 30%, transparent); }
.no-answer { color: var(--invite-muted); background: color-mix(in srgb, var(--invite-muted) 11%, transparent); transition: .42s cubic-bezier(.4,0,.2,1); }
.no-answer.vanish { opacity: 0; transform: scale(.45) rotate(8deg); }
.kiss-answer { position: absolute; left: 50%; bottom: 0; font-size: 0; opacity: 0; transform: translate(-50%, 15px) scale(.2); pointer-events: none; }
.kiss-answer.pop { opacity: 1; font-size: 57px; transform: translate(-50%, 10px) scale(1); animation: kiss-pop 1.7s ease both; }
@keyframes kiss-pop { 0% { opacity: 0; transform: translate(-50%, 28px) scale(.1) rotate(-16deg); } 35% { opacity: 1; transform: translate(-50%, -5px) scale(1.18) rotate(7deg); } 70% { transform: translate(-50%, 3px) scale(1) rotate(-3deg); } }
.mini-sticker { margin-bottom: 9px; font-size: 46px; }
.public-choices { margin: 22px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.public-choices button { position: relative; min-height: 112px; border: 2px solid color-mix(in srgb, var(--invite-accent) 28%, transparent); border-radius: 24px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--invite-text); background: color-mix(in srgb, var(--invite-paper) 92%, var(--invite-accent)); cursor: pointer; transition: .2s ease; }
.public-choices button b { font-size: 38px; }
.public-choices button span { font-size: 15px; }
.public-choices button i { position: absolute; top: 9px; right: 9px; width: 21px; height: 21px; border-radius: 50%; display: none; place-items: center; color: white; background: var(--invite-accent); font-size: 11px; font-style: normal; }
.public-choices button.selected { border-color: var(--invite-accent); background: var(--invite-soft); transform: translateY(-2px); box-shadow: 0 9px 20px color-mix(in srgb, var(--invite-accent) 13%, transparent); }
.public-choices button.selected i { display: grid; }
.invite-next { width: 100%; padding: 0 19px; font-size: 15px; }
.invite-next:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.invite-next span { margin-left: 12px; font-size: 20px; }
.invite-back { align-self: center; margin-top: 12px; border: 0; background: none; color: var(--invite-muted); cursor: pointer; font-size: 13px; }
.fixed-date { margin: 28px 0; padding: 25px 20px; border-radius: 25px; display: grid; gap: 8px; background: var(--invite-soft); }
.fixed-date b { font-size: 20px; }
.fixed-date > span { color: var(--invite-accent); font-size: 34px; font-weight: 800; }
.fixed-date small { margin-top: 5px; color: var(--invite-muted); font-size: 13px; }
.public-date-fields { margin: 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; text-align: left; }
.public-date-fields label { display: grid; gap: 7px; }
.public-date-fields label span { font-size: 12px; font-weight: 700; }
.public-date-fields input { height: 51px; padding: 0 11px; color: var(--invite-text); background: color-mix(in srgb, var(--invite-paper) 90%, var(--invite-soft)); }
.public-date-fields p { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; color: var(--invite-muted); font-size: 13px; }
.answer-summary { margin: 16px 0 20px; padding: 17px; border-radius: 20px; display: grid; gap: 5px; background: var(--invite-soft); }
.answer-summary > span { font-size: 26px; }
.answer-summary b { font-size: 14px; }
.answer-summary small { color: var(--invite-muted); text-transform: capitalize; }
.public-field { margin-bottom: 11px; display: grid; gap: 6px; text-align: left; }
.public-field > span { font-size: 12px; font-weight: 700; }
.public-field > span small { color: var(--invite-muted); font-weight: 400; }
.public-field input { height: 47px; padding: 0 13px; color: var(--invite-text); background: color-mix(in srgb, var(--invite-paper) 90%, var(--invite-soft)); }
.public-field textarea { resize: none; padding: 12px 13px; color: var(--invite-text); background: color-mix(in srgb, var(--invite-paper) 90%, var(--invite-soft)); }
.confirm-screen .invite-next { margin-top: 7px; }
.heart-burst { position: relative; margin-bottom: 22px; font-size: 83px; animation: finale-heart .6s cubic-bezier(.2,.9,.2,1) both; }
.heart-burst i, .heart-burst b { position: absolute; font-style: normal; font-size: 30px; animation: orbit 2.2s ease-in-out infinite; }
.heart-burst i { left: 23%; top: 4px; }
.heart-burst b { right: 20%; bottom: 2px; animation-delay: -.7s; }
@keyframes finale-heart { from { opacity: 0; transform: scale(.2); } 70% { transform: scale(1.15); } }
@keyframes orbit { 50% { transform: translateY(-11px) rotate(8deg); } }
.final-sign { margin-top: 27px; padding: 13px; border-radius: 17px; color: var(--invite-accent); background: var(--invite-soft); font-size: 14px; font-weight: 750; }
.tiny-brand { align-self: center; margin-top: 16px; color: var(--invite-muted); font-size: 11px; }
.tiny-brand b { color: var(--invite-accent); }
.closed-card { width: min(410px, calc(100% - 32px)); padding: 44px 30px; border-radius: 35px; background: white; box-shadow: var(--shadow); }
.closed-card > span { font-size: 65px; }
.closed-card h1 { margin: 15px 0 8px; font-size: 38px; }
.closed-card p { color: var(--muted); }
.closed-card a { display: inline-block; margin-top: 14px; color: var(--pink); font-weight: 750; }

/* Cabinet */
.page-cabinet { background: #fbf9fa; }
.cabinet-shell { width: min(1080px, calc(100% - 40px)); margin: 40px auto 90px; }
.cabinet-heading { margin-bottom: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cabinet-heading h1 { margin: 7px 0 8px; font-size: clamp(42px, 6vw, 66px); }
.cabinet-heading p:last-child { margin: 0; color: var(--muted); }
.cabinet-actions { display: flex; gap: 10px; align-items: center; }
.cabinet-actions .primary-button { min-height: 50px; }
.account-pill { min-height: 48px; padding: 0 17px; border: 1px solid #e4dce0; border-radius: 15px; background: white; color: #554c52; cursor: pointer; font-weight: 700; }
.empty-cabinet { min-height: 430px; padding: 40px; border: 1px dashed #ddcfd5; border-radius: 34px; display: grid; place-items: center; align-content: center; text-align: center; background: white; }
.empty-cabinet > div { font-size: 68px; animation: bob 2s ease-in-out infinite; }
.empty-cabinet h2 { margin: 18px 0 7px; font-size: 29px; }
.empty-cabinet p { margin: 0 0 22px; color: var(--muted); }
.invitation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dashboard-card { position: relative; padding: 24px; border: 1px solid #e6dde1; border-top: 7px solid var(--card-accent, var(--pink)); border-radius: 28px; background: white; box-shadow: 0 15px 42px rgba(60,38,48,.055); }
.theme-border-candy { --card-accent: #ff4f88; }
.theme-border-night { --card-accent: #7957d5; }
.theme-border-mint { --card-accent: #35ad8b; }
.theme-border-peach { --card-accent: #ff8069; }
.dashboard-top { display: grid; grid-template-columns: 56px 1fr 34px; gap: 13px; align-items: start; }
.dashboard-sticker { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #faf4f6; font-size: 28px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.status-sent { color: #8e6a30; background: #fff5df; }.status-sent::before { background: #dc9e3a; }
.status-opened { color: #386c81; background: #e9f8fe; }.status-opened::before { background: #48a8cd; }
.status-done { color: #9b3560; background: #ffedf4; }.status-done::before { background: var(--pink); }
.dashboard-top h2 { margin: 7px 0 3px; font-size: 20px; }
.dashboard-top p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.more-button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f8f5f6; color: #776e74; cursor: pointer; letter-spacing: 1px; }
.dashboard-meta { margin: 19px 0 14px; padding: 12px 0; border-top: 1px solid #f0e9ec; border-bottom: 1px solid #f0e9ec; display: flex; justify-content: space-between; color: #8d8389; font-size: 12px; }
.waiting-panel { min-height: 95px; padding: 18px; border-radius: 18px; display: flex; align-items: center; gap: 13px; background: #faf7f8; }
.waiting-panel > span { font-size: 28px; }
.waiting-panel p { margin: 0; color: #746a71; font-size: 13px; line-height: 1.4; }
.response-panel { padding: 17px; border-radius: 20px; background: #fff3f7; }
.response-title { margin: 0 0 12px; display: grid; grid-template-columns: 35px 1fr; }
.response-title > span { grid-row: span 2; font-size: 25px; }
.response-title b { font-size: 15px; }
.response-title small { color: #9b7a87; font-size: 10px; }
.response-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.response-choices span { padding: 7px 9px; border-radius: 10px; background: white; font-size: 12px; }
.response-date { margin: 10px 0 0; color: #6e5962; font-size: 12px; }
.response-panel blockquote { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--pink); border-radius: 0 10px 10px 0; background: rgba(255,255,255,.65); color: #6b555e; font-size: 12px; }
.secret-detail { display: block; margin-top: 9px; color: #ad6680; }
.dashboard-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.dashboard-buttons button, .dashboard-buttons a { min-height: 43px; border: 1px solid #e6dce1; border-radius: 13px; display: grid; place-items: center; background: white; color: #5a5056; cursor: pointer; font-size: 13px; font-weight: 700; }
.dashboard-buttons button { color: white; border-color: var(--card-accent); background: var(--card-accent); }
.card-menu { position: absolute; z-index: 4; top: 65px; right: 20px; width: 220px; padding: 7px; border: 1px solid #e7dde2; border-radius: 15px; display: none; background: white; box-shadow: 0 16px 40px rgba(38,25,32,.16); }
.dashboard-card.menu-open .card-menu { display: grid; }
.card-menu button { min-height: 41px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: #5d5359; cursor: pointer; font-size: 12px; }
.card-menu button:hover { background: #f8f3f5; }
.card-menu button.danger { color: #be3c62; }
.cabinet-tip { margin-top: 22px; padding: 18px 21px; border-radius: 21px; display: flex; gap: 13px; align-items: center; background: #fff8e9; color: #6e6353; }
.cabinet-tip > span { font-size: 25px; }.cabinet-tip p { margin: 0; font-size: 13px; line-height: 1.4; }
.auth-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(35,28,32,.35); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: .2s ease; }
.auth-backdrop.is-open { opacity: 1; pointer-events: auto; }
.auth-modal { position: fixed; z-index: 21; top: 50%; left: 50%; width: min(430px, calc(100% - 30px)); padding: 35px; border-radius: 30px; background: white; opacity: 0; pointer-events: none; transform: translate(-50%, -45%) scale(.97); transition: .22s ease; box-shadow: 0 30px 80px rgba(39,24,32,.22); text-align: center; }
.auth-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.auth-icon { font-size: 47px; }.auth-modal h2 { margin: 12px 0 7px; font-size: 27px; }.auth-modal > p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.auth-tabs { padding: 4px; margin-bottom: 15px; border-radius: 14px; display: grid; grid-template-columns: 1fr 1fr; background: #f5f1f3; }
.auth-tabs button { min-height: 39px; border: 0; border-radius: 11px; background: transparent; color: #7a7076; cursor: pointer; }
.auth-tabs button.active { background: white; color: #30282d; box-shadow: 0 3px 12px rgba(41,26,34,.08); font-weight: 700; }
.auth-modal form { display: grid; gap: 11px; }
.auth-modal form label { display: grid; gap: 6px; text-align: left; }
.auth-modal form label span { font-size: 12px; font-weight: 700; }
.auth-modal form input { height: 50px; padding: 0 14px; border: 1px solid #e4dce0; border-radius: 14px; outline: none; font-size: 16px; }
.auth-note { display: block; margin-top: 14px; color: #958b91; font-size: 11px; line-height: 1.4; }

/* Claim, legal and errors */
.claim-shell, .error-shell { min-height: calc(100vh - 75px); display: grid; place-items: center; align-content: center; text-align: center; padding: 25px; }
.claim-heart, .error-shell > span { font-size: 68px; animation: bob 1.8s ease-in-out infinite; }
.claim-shell h1, .error-shell h1 { margin: 17px 0 8px; font-size: clamp(36px, 7vw, 56px); }
.claim-shell p, .error-shell p { margin: 0 0 22px; color: var(--muted); }
.legal-shell { width: min(720px, calc(100% - 34px)); margin: 55px auto 90px; }
.legal-shell h1 { margin: 8px 0 26px; font-size: clamp(42px, 7vw, 68px); }
.legal-shell h2 { margin: 30px 0 8px; font-size: 20px; }
.legal-shell p { color: #655c62; line-height: 1.65; }
.legal-shell .secondary-button { margin-top: 24px; }

@media (max-width: 920px) {
  .builder-shell { width: min(720px, calc(100% - 30px)); grid-template-columns: 1fr; }
  .builder-preview { position: static; grid-row: 1; padding: 20px 0 4px; }
  .builder-preview > p { display: none; }
  .phone-frame.preview { width: 300px; min-height: 493px; border-radius: 47px; }
  .phone-frame.preview .invite-card { min-height: 415px; padding: 24px 20px; }
  .phone-frame.preview .invite-card h2 { font-size: 21px; }
  .phone-frame.preview .invite-card > p { margin-bottom: 15px; font-size: 13px; }
  .phone-frame.preview .choice-grid div { min-height: 77px; border-radius: 17px; }
  .phone-frame.preview .choice-grid b { font-size: 29px; }
  .phone-frame.preview .choice-grid span { font-size: 12px; }
  .preview-step { top: 69px; }
  .preview-sticker { font-size: 45px; }
}

@media (max-width: 700px) {
  .site-footer { flex-direction: column; gap: 9px; text-align: center; }
  .builder-shell { margin-top: 5px; gap: 25px; }
  .builder-preview { overflow: hidden; max-height: 380px; align-items: start; }
  .phone-frame.preview { transform: scale(.72); transform-origin: top center; margin-bottom: -145px; }
  .builder-heading { text-align: center; }
  .builder-heading .love-meter.small { margin-left: auto; margin-right: auto; }
  .builder-heading > h1 { font-size: 42px; }
  .step-dots { justify-content: center; }
  .form-card { border-radius: 25px; }
  .card-title { min-height: 61px; padding: 0 20px; }
  .card-body { padding: 19px; }
  .theme-picker { grid-template-columns: 1fr; }
  .sticker-picker { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full, .mode-row.full, .info-note.full { grid-column: auto; }
  .mode-row { align-items: flex-start; flex-direction: column; }
  .segmented { width: 100%; }.segmented button { flex: 1; }
  .builder-nav { border-radius: 22px; }
  .round-back { width: 53px; height: 53px; }
  .builder-nav .primary-button { min-height: 53px; }
  .success-shell { margin-top: 25px; padding: 35px 20px; border-radius: 30px; }
  .success-actions { grid-template-columns: 1fr; }
  .link-box { grid-template-columns: 1fr; text-align: center; }
  .link-box code { width: 100%; }
  .cabinet-shell { width: calc(100% - 28px); margin-top: 24px; }
  .cabinet-heading { align-items: flex-start; flex-direction: column; }
  .cabinet-heading h1 { font-size: 45px; }
  .cabinet-actions { width: 100%; }.cabinet-actions > * { flex: 1; }
  .invitation-list { grid-template-columns: 1fr; }
  .dashboard-card { padding: 20px; border-radius: 24px; }
  .auth-modal { padding: 30px 21px; }
  .skeleton-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .invite-experience { padding: 19px 9px 20px; }
  .invite-progress { margin-bottom: 12px; }
  .experience-phone { min-height: calc(100svh - 95px); padding: 9px; border-width: 6px; border-radius: 45px; }
  .experience-speaker { height: 34px; }
  .experience-paper { min-height: calc(100svh - 150px); padding: 30px 22px; border-radius: 37px; }
  .screen-number { margin-top: calc(-100svh + 205px); }
  .invite-sticker { font-size: 58px; }
  .invite-screen h1 { font-size: clamp(29px, 9vw, 38px); }
  .screen-subtitle { font-size: 15px; }
  .public-choices { gap: 8px; margin: 17px 0; }
  .public-choices button { min-height: 94px; border-radius: 20px; }
  .public-choices button b { font-size: 32px; }
  .public-choices button span { font-size: 14px; }
  .answer-buttons { margin-top: 23px; }
  .tiny-brand { margin-top: 9px; }
}