:root{
  --bg1:#f9f7f3;
  --bg2:#eef2fb;
  --bg3:#f2f0fa;
  --ink:#2b233a;
  --accent:#6b7ae0;
  --accent-2:#cfd6f6;
  --card:#ffffff;
  --muted:#6a6675;
  --shadow: 0 10px 30px rgba(15,10,30,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink)}

body{
  background: linear-gradient(120deg,var(--bg1),var(--bg2),var(--bg3));
  background-size: 200% 200%;
  animation: bgShift 14s ease-in-out infinite;
}
@keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

h1, h2, .reason, .about-body em { font-family: 'Parisienne', cursive; }

.bg-hearts{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

header{padding:40px 20px 10px;text-align:center}
h1{margin:0;font-size:clamp(28px,3.5vw,42px); color:#433a57}
#subtitle{margin:8px 0 0;color:var(--muted)}
.greeting{margin:6px 0 0; color:#5a5076; font-weight:600}

main{max-width:760px;margin:20px auto 60px;padding:0 20px}
.picker{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;margin:10px 0 20px}
label{font-weight:600}
input[type="date"]{padding:10px 12px;border:2px solid var(--accent-2);border-radius:12px;background:#fff;box-shadow:var(--shadow);font-size:16px}
.hint{display:block;width:100%;text-align:center;color:var(--muted)}
.chip-btn{
  border:0;border-radius:999px;padding:8px 12px;box-shadow:var(--shadow);
  background:#fff;color:#4b4a6d;font-weight:700;cursor:pointer
}
.chip-btn:active{ transform: translateY(1px); }

.nav-hint{ text-align:center;color:var(--muted);margin:6px 0 8px }
.nav-btns{ display:flex;justify-content:center;gap:10px;margin-bottom:8px }
.nav-btns button{
  border:0;border-radius:999px;padding:10px 14px;box-shadow:var(--shadow);
  background:var(--accent);color:#fff;font-weight:700;cursor:pointer
}
.nav-btns button:disabled{ opacity:.4;cursor:not-allowed }

.card{background:linear-gradient(145deg,var(--card),#fff);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-top:10px}
.card-inner{position:relative;padding:10px 6px 4px}
.date-badge{position:absolute;top:-14px;right:-10px;background:#544a7d;color:#fff;padding:8px 12px;border-radius:999px;font-size:12px;box-shadow:var(--shadow)}
.reason{font-size:clamp(22px,2.7vw,30px);line-height:1.5;margin:20px 6px;opacity:0;transform:translateY(6px); color:#3e3654}
.reason.show{animation: reasonIn .45s ease both}
@keyframes reasonIn{ to{opacity:1; transform: translateY(0)} }
.footer-note{margin-top:16px;color:var(--muted);font-size:14px}

.special-msg{
  margin-top:14px; padding:10px 12px; border-radius:12px;
  background:#eef1ff; color:#4a4a78; border:1px solid #d9defb; box-shadow:var(--shadow);
}

.timeline{ border: none; border-radius: 16px; width:min(92vw,700px); padding:0; box-shadow: var(--shadow); }
.timeline::backdrop{ background: rgba(0,0,0,.25) }
.timeline-head{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid #e5e7fb; background:#fff
}
.timeline-head h3{ margin:0; font-size:18px; color:#4b4a6d }
.close-btn{ border:0; background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; box-shadow: var(--shadow); }
.timeline-list{
  list-style: none; margin:0; padding:12px; max-height: 60vh; overflow:auto; background:#fff;
}
.timeline-list li{
  padding:10px 12px; margin-bottom:8px; border:1px solid #e5e7fb; border-radius:12px;
  background:#fff; display:flex; gap:10px; align-items:flex-start;
}
.timeline-list .d{ font-weight:700; color:#4b4a6d; min-width:76px }

.about-body{ padding:16px; background:#fff; color:#2b233a; line-height:1.7; font-size:18px; }

footer{display:flex;justify-content:center;align-items:center;padding:22px;color:var(--muted)}

.lock {
  position: fixed; inset: 0; background: radial-gradient(1200px 900px at 50% -10%, #f2effa, #e7eafe 35%, #e9e7f6 60%, #dee4ff 100%);
  display: grid; place-items: center; z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .6s ease;
}
.lock.show { opacity: 1; pointer-events: all; }

.lock-card{
  width: min(92vw, 460px);
  background: #fff; border-radius: 20px; box-shadow: var(--shadow);
  padding: 26px 22px 20px; text-align: center; position: relative; overflow: hidden;
  animation: floatIn .6s ease both;
}
@keyframes floatIn { from{ transform: translateY(10px); opacity: 0 } to{ transform: translateY(0); opacity: 1 } }

.heart-pulse{ font-size: 44px; line-height: 1; margin-bottom: 8px; animation: beat 1s infinite ease-in-out; }
@keyframes beat { 0%, 100% { transform: scale(1) } 20% { transform: scale(1.15) } }

.hint-text{ color: var(--muted); margin: 6px 0 12px; }

.pw-row{ display:flex; gap:8px; justify-content:center; align-items:center; margin: 6px 0 12px; }
.pw-row input{
  flex:1; padding:12px 14px; border:2px solid var(--accent-2); border-radius:12px; font-size:16px; box-shadow:var(--shadow);
}
.pw-row button{ border:0; background:#fff; border-radius:12px; padding:10px 12px; box-shadow: var(--shadow); cursor:pointer; }

.unlock-btn{
  background: var(--accent); color:#fff; font-weight:700; border:0; border-radius:999px; padding:12px 18px; cursor:pointer;
  box-shadow: var(--shadow); transition: transform .06s ease;
}
.unlock-btn:active{ transform: translateY(1px); }

.error{ min-height: 20px; color:#7a2b3b; margin-top:10px; font-size:14px; }

.shake{ animation: shake .35s linear; }
@keyframes shake {
  0%,100%{ transform: translateX(0) }
  20%{ transform: translateX(-8px) }
  40%{ transform: translateX(8px) }
  60%{ transform: translateX(-6px) }
  80%{ transform: translateX(6px) }
}

.dots{ display:flex; gap:6px; justify-content:center; margin-top:12px; }
.dots span{ width:8px; height:8px; background: var(--accent); border-radius:50%; opacity:.25; animation: bounce 1s infinite ease-in-out; }
.dots span:nth-child(2){ animation-delay: .15s }
.dots span:nth-child(3){ animation-delay: .30s }
@keyframes bounce { 0%,100%{ transform: translateY(0); opacity:.25 } 50%{ transform: translateY(-6px); opacity:1 } }

.confetti{ position: fixed; inset: 0; pointer-events: none; }