:root { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; color: #30232a; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow: hidden; background: #fff2f5; }
.scene { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 20px; background: radial-gradient(circle at 50% 30%, #fff 0 12%, #ffe1e9 55%, #f8b9c8 100%); }
.scene::before { content: "♡  ·  ♡  ·  ♡"; position: fixed; inset: 8% 0 auto; text-align: center; color: rgba(196,53,86,.25); font-size: clamp(24px,6vw,54px); letter-spacing: 18px; }
.glow { position: fixed; width: 350px; height: 350px; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(60px); }
.window { position: relative; z-index: 2; width: min(92vw, 480px); background: #f7f7f7; border: 1px solid #777; border-radius: 7px; box-shadow: 0 22px 70px rgba(94,31,50,.28), 0 1px 0 #fff inset; overflow: hidden; animation: arrive .45s cubic-bezier(.2,.9,.3,1.2); }
.titlebar { height: 42px; display: flex; align-items: center; gap: 9px; padding-left: 12px; background: #fff; font-size: 14px; user-select: none; }
.app-icon { color: #d83c62; font-size: 17px; }
.close { position: absolute; top: 0; right: 0; width: 48px; height: 42px; border: 0; background: transparent; font: 25px/1 "Segoe UI"; cursor: pointer; transition: left .16s ease, top .16s ease, background .15s; }
.close:hover { background: #e81123; color: white; }
.content { min-height: 150px; display: flex; align-items: center; gap: 20px; padding: 30px 38px; background: #fafafa; }
.heart { color: #e94269; font-size: 58px; filter: drop-shadow(0 5px 8px rgba(233,66,105,.25)); animation: beat 1.2s infinite; }
h1 { margin: 0 0 9px; font-size: clamp(22px,5vw,28px); font-weight: 600; letter-spacing: 0; }
.content p { margin: 0; color: #74646b; font-size: 14px; }
.actions { display: flex; justify-content: flex-end; padding: 14px 22px; background: #eee; border-top: 1px solid #ddd; }
.ok { min-width: 94px; height: 34px; border: 1px solid #ad7482; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px #fff inset; font-weight: 600; cursor: pointer; }
.ok:hover, .ok:focus { background: #fde3ea; border-color: #d2355b; outline: 2px solid rgba(210,53,91,.25); }
.success { display: none; position: relative; z-index: 3; text-align: center; color: #9f2445; animation: arrive .6s ease both; }
.success.show { display: block; }
.success h2 { margin: 12px 0 8px; font-size: clamp(38px,9vw,66px); letter-spacing: 0; }
.success p { margin: 0 0 14px; color: #5c3943; font-size: clamp(17px,4vw,22px); }
.success span { color: #b04a65; }
.big-heart { font-size: 92px; animation: beat .8s infinite; filter: drop-shadow(0 10px 20px rgba(211,47,88,.28)); }
.confetti { position: fixed; z-index: 4; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: fall var(--time) linear forwards; }
@keyframes arrive { from { opacity: 0; transform: translateY(18px) scale(.95); } }
@keyframes beat { 50% { transform: scale(1.12); } }
@keyframes fall { to { transform: translate3d(var(--drift),110vh,0) rotate(720deg); } }
@media (max-width: 480px) { .content { padding: 28px 22px; gap: 14px; } .heart { font-size: 45px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }