:root {
  --cream: #fff8ee;
  --cream-deep: #f8eddd;
  --peach: #ffc8b7;
  --peach-pale: #fff0e9;
  --strawberry: #e97c72;
  --strawberry-deep: #c85f59;
  --sage: #b9c9a6;
  --sage-deep: #829975;
  --butter: #ffe9a9;
  --cocoa: #76574b;
  --ink: #4f3b34;
  color: var(--ink);
  background: var(--cream);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--cream); }
button { font: inherit; color: #463a2c; }
button:focus-visible { outline: 3px solid var(--strawberry); outline-offset: 3px; }

.page-shell {
  position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 38px 18px;
  background: radial-gradient(circle at 18% 13%, rgba(255, 200, 183, .48), transparent 26%), radial-gradient(circle at 85% 88%, rgba(185, 201, 166, .35), transparent 23%), var(--cream);
}
.page-shell::before, .page-shell::after { position: absolute; width: 190px; height: 190px; border: 2px dashed rgba(185, 201, 166, .66); border-radius: 50%; content: ""; pointer-events: none; }
.page-shell::before { top: -90px; left: -75px; }.page-shell::after { right: -95px; bottom: -70px; }
.orbit-flower, .floating-mark, .falling-petal { position: absolute; z-index: 0; color: var(--strawberry); pointer-events: none; }.orbit-flower { top: 11%; left: 16%; font-size: 27px; animation: float 4s ease-in-out infinite; }.floating-mark { color: var(--sage-deep); animation: float 4.7s ease-in-out infinite; }.mark-one { top: 17%; right: 13%; font-size: 24px; }.mark-two { bottom: 16%; left: 12%; font-size: 20px; animation-delay: -2s; }.mark-three { right: 14%; bottom: 13%; font-size: 19px; animation-delay: -1s; }.falling-petal { top: -32px; color: #f4a693; opacity: .7; animation: petal-fall linear infinite; }

.date-pass { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; width: min(448px, 100%); min-height: 650px; overflow: hidden; border: 1px solid rgba(118, 87, 75, .18); border-radius: 30px; background: rgba(255, 255, 255, .8); box-shadow: 0 16px 35px rgba(144, 105, 88, .16); animation: card-in 560ms ease-out both; }
.date-pass::before { position: absolute; inset: 9px; z-index: -1; border: 1px solid rgba(255, 200, 183, .75); border-radius: 23px; content: ""; pointer-events: none; }
.pass-identity { position: relative; display: grid; min-height: 205px; place-items: center; padding: 26px 24px 18px; background: linear-gradient(180deg, #fff1eb, #fff9f4); border-bottom: 1px solid rgba(255, 200, 183, .42); }
.pass-identity::before { position: absolute; top: 25px; width: 96px; height: 96px; border-radius: 50%; background: var(--peach); content: ""; opacity: .55; }.pass-identity::after { position: absolute; bottom: 17px; left: 50%; width: 70px; border-bottom: 2px solid var(--sage); content: ""; transform: translateX(-50%); }
.pass-code { position: absolute; top: 20px; z-index: 1; margin: 0; color: var(--strawberry); font-size: 10px; font-weight: 800; letter-spacing: .14em; }.avatar-frame { position: relative; z-index: 1; width: 116px; height: 116px; margin-top: 15px; overflow: hidden; border: 6px solid #fff; border-radius: 50%; box-shadow: 0 8px 16px rgba(139, 100, 83, .15); animation: float 4s ease-in-out infinite; }.avatar-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }.avatar-cheer { animation: avatar-cheer 620ms cubic-bezier(.2, 1.5, .4, 1) both; }.avatar-emoji { position: absolute; top: 48%; left: 50%; z-index: 6; display: flex; align-items: center; gap: 5px; pointer-events: none; white-space: nowrap; animation: avatar-emoji 1500ms ease-out forwards; }.avatar-emoji-face { font-size: 29px; }.avatar-emoji-text { color: var(--strawberry); font-size: 14px; font-weight: 800; text-shadow: 0 1px 0 white; }.identity-note { display: none; }

.pass-content { position: relative; min-width: 0; padding: 31px 30px 34px; background: rgba(255, 255, 255, .64); }.top-flourish { width: 47px; margin: 0 auto 17px; border-top: 3px solid var(--strawberry); border-radius: 99px; }.top-flourish::after { display: block; width: 7px; height: 7px; margin: -5px auto 0; border-radius: 50%; background: var(--butter); content: ""; } h1 { margin: 0 0 13px; color: var(--ink); font-size: clamp(31px, 8vw, 40px); font-weight: 900; letter-spacing: -.075em; line-height: 1.15; text-align: center; } h1 span { display: inline-block; margin-top: 5px; font-size: .65em; letter-spacing: -.05em; }.prompt { margin: 0; color: #92766a; font-size: 15px; font-weight: 700; text-align: center; }.prompt-flourish { display: flex; width: 145px; gap: 8px; align-items: center; margin: 20px auto 8px; color: var(--strawberry); }.prompt-flourish i { flex: 1; border-top: 2px dotted var(--sage); }.prompt-flourish span { font-size: 15px; }.corner-doodles { position: absolute; top: 19px; right: 24px; width: 58px; height: 72px; pointer-events: none; }.doodle-heart, .doodle-star, .doodle-dot { position: absolute; display: grid; place-items: center; border-radius: 50%; background: white; box-shadow: 0 4px 9px rgba(129, 93, 79, .12); }.doodle-heart { top: 0; right: 0; width: 29px; height: 29px; color: var(--strawberry); font-size: 17px; }.doodle-star { bottom: 0; left: 0; width: 25px; height: 25px; color: var(--sage-deep); font-size: 15px; }.doodle-dot { right: 5px; bottom: 8px; width: 9px; height: 9px; background: var(--butter); }.dotted-route { display: none; }

.escape-zone { position: relative; display: flex; min-height: 74px; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 17px; }.accept-button, .reject-button, #confirm-time-button, #confirm-food-button, #confirm-activity-button, #save-plan-button { min-height: 48px; border: 0; cursor: pointer; font-size: 16px; font-weight: 850; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }.accept-button { padding: 11px 29px; border-radius: 999px; background: var(--strawberry); box-shadow: 0 6px 0 var(--strawberry-deep), 0 9px 15px rgba(233, 124, 114, .2); color: white; }.reject-button { padding: 11px 26px; border: 1px solid var(--sage); border-radius: 999px; background: #f7fbf3; color: var(--sage-deep); box-shadow: 0 4px 0 rgba(130, 153, 117, .18); }.accept-button:hover, #confirm-time-button:hover, #confirm-food-button:hover, #confirm-activity-button:hover, #save-plan-button:hover { background: var(--strawberry-deep); box-shadow: 0 8px 0 #a84f4b, 0 12px 18px rgba(233, 124, 114, .2); transform: translateY(-2px); }.reject-button:hover { background: var(--sage); color: white; transform: translateY(-2px); }.reject-button.is-escaping { position: fixed; z-index: 20; transition: left 160ms ease, top 160ms ease, transform 160ms ease; transform: rotate(-4deg) scale(.96); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.schedule-panel, .food-panel, .activity-panel, .summary-panel { position: relative; min-height: 387px; animation: panel-in 360ms ease-out both; }.schedule-panel { min-height: 0; }.schedule-panel h1, .food-panel h1, .activity-panel h1, .summary-panel h1 { font-size: clamp(28px, 7vw, 35px); }.schedule-panel .prompt, .food-panel .prompt, .activity-panel .prompt, .summary-panel .prompt { font-size: 14px; }.date-card-grid { display: grid; gap: 11px; margin-top: 20px; }.date-card { padding: 13px; border: 1px solid rgba(255, 200, 183, .74); border-radius: 18px; background: #fffaf6; box-shadow: 0 6px 13px rgba(142, 103, 86, .07); }.date-card:nth-child(2) { background: #f7fbf4; }.date-card h2 { display: flex; justify-content: space-between; margin: 0 0 9px; color: var(--strawberry); font-size: 14px; }.date-card h2 span { color: #917b70; font-size: 12px; }.schedule-slot { display: block; width: 100%; margin-top: 7px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: white; cursor: pointer; font-size: 14px; font-weight: 800; text-align: left; transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }.schedule-slot:hover { background: var(--peach-pale); border-color: var(--peach); box-shadow: 0 5px 11px rgba(233, 124, 114, .11); transform: translateY(-1px); }.schedule-slot.is-busy { background: #ecf4e7; color: #79916c; }.schedule-slot.is-free { background: #fff7d9; }.schedule-slot.is-adjusted { background: var(--peach-pale); }.is-adjusted .original-slot { color: #ad978e; text-decoration: line-through; }.adjusted-message { margin-left: 7px; color: var(--strawberry); font-weight: 850; }.schedule-slot.is-selected { border-color: var(--strawberry); background: var(--peach-pale); box-shadow: inset 0 0 0 1px rgba(233, 124, 114, .23); }.schedule-slot.is-selected::after { float: right; color: var(--strawberry); content: "✓"; } #confirm-time-button { position: static; display: block; width: fit-content; margin: 18px auto 0; padding: 11px 27px; border-radius: 999px; background: var(--strawberry); box-shadow: 0 6px 0 var(--strawberry-deep); color: white; } #confirm-time-button:hover { transform: translateY(-2px); } #confirm-time-button:disabled { opacity: .68; cursor: default; }

.food-heading-decoration { display: flex; width: 118px; gap: 8px; align-items: center; margin: 0 auto 8px; color: var(--strawberry); }.food-heading-decoration i { flex: 1; border-top: 2px dotted var(--sage); }.food-heading-decoration span { font-size: 15px; }.food-panel .prompt, .activity-panel .prompt { margin-bottom: 19px; }.food-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.activity-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.food-option, .activity-option { position: relative; display: flex; min-height: 104px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255, 200, 183, .66); border-radius: 19px; background: #fff; box-shadow: 0 7px 14px rgba(143, 104, 87, .08); cursor: pointer; font-size: 15px; font-weight: 850; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }.food-option:nth-child(3n + 2), .activity-option:nth-child(4n + 2) { background: #f8fbf5; }.food-option:nth-child(3n), .activity-option:nth-child(4n + 3) { background: #fffaf0; }.food-option:hover, .activity-option:hover { border-color: var(--peach); background: var(--peach-pale); box-shadow: 0 11px 19px rgba(233, 124, 114, .14); transform: translateY(-3px); }.food-option.is-selected, .activity-option.is-selected { border-color: var(--strawberry); background: var(--peach-pale); box-shadow: 0 9px 16px rgba(233, 124, 114, .16); }.food-option.is-selected::after, .activity-option.is-selected::after { position: absolute; top: 8px; right: 11px; color: var(--strawberry); content: "♥"; font-size: 16px; }.food-icon { font-size: 29px; line-height: 1; } #confirm-food-button, #confirm-activity-button { display: block; width: fit-content; margin: 19px auto 0; padding: 11px 27px; border-radius: 999px; background: var(--strawberry); box-shadow: 0 6px 0 var(--strawberry-deep); color: white; } #confirm-food-button[hidden], #confirm-activity-button[hidden] { display: block; visibility: hidden; }

.summary-panel { max-width: 360px; margin: 0 auto; }.summary-panel h1 { font-size: clamp(28px, 7vw, 34px); }.summary-list { display: grid; gap: 10px; margin: 22px 0 15px; padding: 0; list-style: none; }.summary-item { display: flex; gap: 11px; align-items: center; padding: 11px; border: 1px solid rgba(255, 200, 183, .7); border-radius: 17px; background: #fffdfb; }.summary-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 13px; background: var(--peach-pale); }.summary-text { display: grid; gap: 3px; font-size: 14px; font-weight: 800; }.summary-text b { color: var(--strawberry); font-size: 12px; }.date-countdown { margin: 15px 0 0; padding: 11px; border-radius: 13px; background: #fff6d9; color: var(--strawberry-deep); font-size: 17px; font-weight: 850; text-align: center; }.countdown-done { background: #edf6e7; color: var(--sage-deep); }.save-plan-button { display: block; width: fit-content; margin: 19px auto 0; padding: 11px 28px; border-radius: 999px; background: var(--strawberry); box-shadow: 0 6px 0 var(--strawberry-deep); color: white; }.save-plan-button:disabled { opacity: .7; cursor: wait; }

.plan-image-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(81, 57, 49, .35); backdrop-filter: blur(4px); }.plan-image-dialog { position: relative; width: min(426px, 100%); padding: 14px; border: 7px solid #fff; border-radius: 27px; background: var(--cream); box-shadow: 0 18px 40px rgba(118, 87, 75, .24); }.plan-image-dialog img { display: block; width: 100%; border-radius: 16px; }.plan-image-dialog p { margin: 12px 0 0; color: #94766a; font-size: 14px; font-weight: 750; text-align: center; }.plan-image-close { position: absolute; top: -10px; right: -8px; display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 50%; background: var(--strawberry); box-shadow: 0 4px 0 var(--strawberry-deep); color: white; cursor: pointer; font-size: 23px; line-height: 1; }.plan-image-close:hover { transform: translateY(-1px); }

.pop-heart, .burst-heart, .burst-spark, .celebration-petal { position: fixed; z-index: 70; pointer-events: none; }.pop-heart, .burst-heart { color: var(--strawberry); }.burst-spark { color: #f4bd5e; }.confetti,
.confetti-rise { position: fixed; top: -44px; z-index: 70; display: block; line-height: 1; pointer-events: none; text-shadow: 0 3px 5px rgba(118, 87, 75, .16); animation: confetti-fall 3.2s cubic-bezier(.2, .62, .35, 1) forwards; will-change: transform, opacity; }.done-flash { position: fixed; inset: 0; z-index: 65; pointer-events: none; background: rgba(255, 239, 215, .52); animation: flash 650ms ease-out forwards; }.panel-enter { animation: panel-in 360ms ease-out both; }.title-pop { animation: title-pop 470ms ease both; }.done-pop { animation: title-pop 620ms ease both; }

@keyframes card-in { from { opacity: 0; transform: translateY(17px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } } @keyframes petal-fall { to { transform: translateY(110vh) rotate(230deg); } } @keyframes confetti-fall { 0% { opacity: 0; transform: translateY(-24px) rotate(-20deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(100vh + 100px)) rotate(320deg); } } @keyframes avatar-cheer { 50% { transform: scale(1.12) rotate(5deg); } } @keyframes avatar-emoji { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20%,70% { opacity: 1; transform: translate(-50%, -14px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -42px) scale(.9); } } @keyframes title-pop { 50% { transform: translateY(-4px) scale(1.025); } } @keyframes flash { to { opacity: 0; } }

@media (max-width: 800px) { .page-shell { min-height: 100dvh; padding: 14px; place-items: start center; }.date-pass { grid-template-columns: 1fr; min-height: calc(100dvh - 28px); border-radius: 25px; }.pass-content { padding: 28px 22px 38px; }.pass-identity { min-height: 188px; }.corner-doodles { right: 17px; }.orbit-flower, .floating-mark { display: none; }.schedule-panel, .food-panel, .activity-panel, .summary-panel { min-height: 0; }.schedule-panel { padding-bottom: 70px; }.food-option, .activity-option { min-height: 98px; } }
@media (max-width: 360px) { .pass-content { padding-right: 17px; padding-left: 17px; }.food-option-grid, .activity-option-grid { gap: 8px; }.food-option, .activity-option { min-height: 91px; font-size: 14px; }.accept-button, .reject-button { padding-right: 21px; padding-left: 21px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }