:root{
  --bg:#fff6f9; --bg2:#ffeef4; --pink:#ff7eb0; --deep:#e75480; --rose:#ffb3cd;
  --ink:#5b3746; --ink-soft:#a97e8d; --card:rgba(255,255,255,.82);
  --shadow:0 10px 30px rgba(231,84,128,.14);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{background:linear-gradient(160deg,var(--bg),var(--bg2) 70%);overscroll-behavior:none}
body{font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(160deg,var(--bg),var(--bg2) 70%);color:var(--ink);overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:auto}
.hidden{display:none!important}
button{font-family:inherit;border:none;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:16px;color:var(--ink)}

/* soft orbs */
#orbs i{position:fixed;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;pointer-events:none}
#orbs i:nth-child(1){width:280px;height:280px;background:#ffd3e4;top:-80px;left:-80px;animation:orb 14s ease-in-out infinite}
#orbs i:nth-child(2){width:220px;height:220px;background:#ffe3d9;bottom:-60px;right:-60px;animation:orb 18s ease-in-out infinite reverse}
#orbs i:nth-child(3){width:160px;height:160px;background:#f3d9ff;top:40%;right:-40px;animation:orb 16s ease-in-out infinite 2s}
@keyframes orb{50%{transform:translate(20px,30px) scale(1.08)}}

/* falling petals */
#petals{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.petal{position:absolute;top:-24px;font-size:15px;opacity:.85;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(320deg);opacity:.4}}

/* tap bursts */
#bursts{position:fixed;inset:0;pointer-events:none;z-index:60}
.burst{position:absolute;font-size:14px;animation:burst .9s ease-out forwards}
@keyframes burst{0%{transform:translate(0,0) scale(.6);opacity:1}100%{transform:translate(var(--bx),var(--by)) scale(1.3);opacity:0}}

/* gate */
#gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,var(--bg),var(--bg2))}
.gate-card{width:100%;max-width:380px;text-align:center;animation:rise .8s cubic-bezier(.2,.9,.3,1.2)}
@keyframes rise{from{transform:translateY(30px);opacity:0}}
.gate-bloom{font-size:44px;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-6deg)}}
.brand{font-family:'Playfair Display',serif;font-size:56px;color:var(--deep);letter-spacing:-1px}
.gate-sub{color:var(--ink-soft);margin:4px 0 22px;font-weight:600}
.gate-loading{color:var(--pink);font-weight:700}
.gate-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.gate-form label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.gate-form input{display:block;width:100%;margin-top:6px;padding:14px 16px;border:2px solid #ffd9e6;border-radius:16px;background:#fff;outline:none;transition:border-color .2s, box-shadow .2s}
.gate-form input:focus{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,126,176,.15)}
.gate-msg{min-height:20px;margin-top:12px;color:var(--deep);font-weight:700;font-size:14px}
.gate-lock{margin-top:14px;color:var(--ink-soft);font-weight:700}
.btn-primary{margin-top:6px;padding:16px;border-radius:18px;background:linear-gradient(120deg,var(--pink),var(--deep));color:#fff;font-weight:900;font-size:17px;box-shadow:var(--shadow);transition:transform .15s}
.btn-primary:active{transform:scale(.95)}

/* app shell */
#app{position:relative;z-index:10;max-width:430px;margin:0 auto;min-height:100vh;padding:0 16px 96px}
#topbar{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 4px 6px}
.hello{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;min-height:34px}
.hello .caret{display:inline-block;width:2px;background:var(--pink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.together{font-weight:800;color:var(--pink);font-size:14px;margin-top:2px}
.gear{background:#fff;border-radius:50%;padding:3px;width:44px;height:44px;font-size:16px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;overflow:hidden}
.gear #gear-av,.gear img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:18px}
.flower-banner{margin:8px 0 0;padding:12px 16px;border-radius:16px;background:linear-gradient(120deg,#ffe3ee,#fff0f6);border:1px solid #ffd0e0;font-weight:800;color:var(--deep);animation:rise .5s}

/* tabs */
#tabs{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;justify-content:center}
#tabs{max-width:430px;margin:0 auto;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid #ffe0ea;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
.tab{flex:1;background:none;color:var(--ink-soft);font-weight:800;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:12px;transition:color .2s,transform .15s}
.tab span{font-size:20px}
.tab.active{color:var(--deep)}
.tab.active span{transform:translateY(-2px) scale(1.15)}
.tab:active{transform:scale(.92)}

/* cards */
.card{background:var(--card);backdrop-filter:blur(8px);border-radius:22px;padding:18px;margin-top:14px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.9);animation:rise .5s}
.card h3{font-family:'Playfair Display',serif;font-size:19px;margin-bottom:8px}
.section-label{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:22px 4px 0}

/* flower button */
.flower-card{background:linear-gradient(130deg,#ffdfeb,#ffeef7 60%,#fff);text-align:center;padding:26px 18px}
.flower-card .bloom{font-size:42px;animation:bob 2.6s ease-in-out infinite}
.flower-card p{font-family:'Playfair Display',serif;font-size:20px;margin:8px 0 14px}
.btn-flower{padding:14px 26px;border-radius:999px;background:linear-gradient(120deg,var(--pink),var(--deep));color:#fff;font-weight:900;font-size:16px;box-shadow:0 8px 24px rgba(231,84,128,.35);transition:transform .15s}
.btn-flower:active{transform:scale(.93)}

/* moments */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.tag{padding:7px 13px;border-radius:999px;background:#fff;border:2px solid #ffd9e6;font-weight:800;font-size:13px;color:var(--ink-soft);transition:all .15s}
.tag.on{background:linear-gradient(120deg,var(--pink),var(--deep));color:#fff;border-color:transparent;transform:scale(1.05)}
.moment{display:flex;gap:12px;padding:14px 0;border-bottom:1px dashed #ffd9e6}
.moment:last-child{border-bottom:none}
.moment-ico{font-size:22px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#fff0f6;border-radius:14px;flex-shrink:0}
.moment-body{flex:1;min-width:0}
.moment-text{font-weight:700;font-size:15px;line-height:1.45}
.moment-meta{font-size:12px;color:var(--ink-soft);font-weight:700;margin-top:3px}
.moment-photo{width:64px;height:64px;object-fit:cover;border-radius:14px;border:2px solid #fff;box-shadow:var(--shadow)}
.moment-del{background:none;color:#e8b7c8;font-size:14px;padding:4px}
textarea.note-in{width:100%;min-height:64px;padding:12px 14px;border:2px solid #ffd9e6;border-radius:16px;resize:vertical;outline:none;background:#fff}
textarea.note-in:focus{border-color:var(--pink)}
.mini-row{display:flex;gap:8px;margin-top:10px;align-items:center}
.mini-row input[type=date]{flex:1;padding:10px;border:2px solid #ffd9e6;border-radius:12px;background:#fff}
.btn-soft{padding:11px 16px;border-radius:14px;background:#fff;border:2px solid #ffd9e6;color:var(--deep);font-weight:800;font-size:14px;transition:transform .15s}
.btn-soft:active{transform:scale(.94)}
.btn-soft.danger{border-color:#ffc9c9;color:#d66}
.btn-add{flex:1;padding:12px;border-radius:14px;background:linear-gradient(120deg,var(--pink),var(--deep));color:#fff;font-weight:900}
.photo-strip{display:flex;gap:8px;overflow-x:auto;padding:6px 2px}
.photo-strip img{width:86px;height:86px;object-fit:cover;border-radius:16px;border:2px solid #fff;box-shadow:var(--shadow);flex-shrink:0}

/* calendar */
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.cal-head h3{font-family:'Playfair Display',serif;font-size:20px}
.cal-nav{background:#fff;border-radius:12px;padding:6px 12px;font-size:16px;color:var(--deep);box-shadow:var(--shadow)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px}
.cal-dow{text-align:center;font-size:11px;font-weight:900;color:var(--ink-soft);padding:4px 0}
.cal-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.55);font-weight:800;font-size:14px;position:relative;transition:transform .12s}
.cal-cell:active{transform:scale(.9)}
.cal-cell.other{opacity:.25}
.cal-cell.today{background:linear-gradient(130deg,var(--pink),var(--deep));color:#fff}
.cal-cell .dots{display:flex;gap:3px;margin-top:2px;height:6px}
.cal-cell .dot{width:5px;height:5px;border-radius:50%}

/* special days */
.day-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px dashed #ffd9e6}
.day-item:last-child{border:none}
.day-name{font-weight:800}
.day-date{font-size:12px;color:var(--ink-soft);font-weight:700}
.dday{font-family:'Playfair Display',serif;font-size:18px;color:var(--deep);white-space:nowrap}

/* todos */
.seg{display:flex;background:#ffeef4;border-radius:14px;padding:4px;margin-top:10px}
.seg button{flex:1;padding:9px;border-radius:11px;background:none;font-weight:900;color:var(--ink-soft);font-size:13px}
.seg button.on{background:#fff;color:var(--deep);box-shadow:var(--shadow)}
.todo{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dashed #ffd9e6}
.todo:last-child{border:none}
.todo .chk{width:24px;height:24px;border-radius:8px;border:2px solid var(--rose);background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;transition:all .15s}
.todo.done .chk{background:var(--pink);border-color:var(--pink)}
.todo.done .todo-text{text-decoration:line-through;color:var(--ink-soft)}
.todo-text{flex:1;font-weight:700;font-size:15px}
.todo-del{background:none;color:#e8b7c8}

/* sheets */
.sheet{position:fixed;inset:0;z-index:70;background:rgba(91,55,70,.3);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center}
.sheet-card{width:100%;max-width:430px;max-height:82vh;overflow-y:auto;background:#fff;border-radius:26px 26px 0 0;padding:20px;animation:sheetup .35s cubic-bezier(.2,.9,.3,1.1)}
@keyframes sheetup{from{transform:translateY(60px);opacity:0}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sheet-head h3{font-family:'Playfair Display',serif;font-size:20px}
.x{background:#ffeef4;border-radius:10px;width:32px;height:32px;color:var(--deep);font-weight:900}
.settings-body{display:flex;flex-direction:column;gap:12px}
.settings-who{font-weight:800;color:var(--deep)}
.settings-note{font-size:12px;color:var(--ink-soft);line-height:1.5}
.relink-out{font-family:monospace;font-size:22px;letter-spacing:4px;text-align:center;background:#ffeef4;border-radius:12px;padding:12px;color:var(--deep);font-weight:900}

/* toast */
.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);z-index:80;background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:800;font-size:14px;box-shadow:var(--shadow);animation:rise .3s}

.empty{text-align:center;color:var(--ink-soft);padding:22px 10px;font-weight:700}
.empty .em{font-size:30px;display:block;margin-bottom:8px}
@media (min-width:431px){body{background:#ffeef4}}

/* ---- v3 additions ---- */
/* serif only where it earns it: greeting, brand, D-numbers, hero names */
.card h3{font-family:'Nunito',sans-serif;font-weight:900;font-size:16px;letter-spacing:.01em}
.serif-lg{font-family:'Playfair Display',serif;font-size:20px}
.hintline{font-size:12px;color:var(--ink-soft);font-weight:700;margin-top:8px;line-height:1.45}
.seen{font-size:12px;color:var(--ink-soft);font-weight:700;margin-top:2px}
.btn-link{background:none;color:var(--deep);font-weight:800;font-size:13px;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.soft-hr{border:none;border-top:1px dashed #ffd9e6;margin:4px 0}

/* mood strip */
.mood-card{text-align:center;padding:14px 18px}
.mood-line{display:flex;justify-content:center;align-items:center;gap:10px;font-weight:900;font-size:15px}
.mood-line span{font-size:15px}
.mood-amp{opacity:.6}

/* miss-you pulse */
.pulse-banner{margin-top:12px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:linear-gradient(120deg,#ffe3ee,#fff);border:1px solid #ffd0e0;box-shadow:var(--shadow);cursor:pointer;animation:rise .5s}
.pulse-heart{font-size:30px;animation:beat 1.2s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.25)}60%{transform:scale(1.05)}}
.pulse-sub{font-size:12px;color:var(--ink-soft);font-weight:700}
.duo-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-miss{padding:14px 22px;border-radius:999px;background:#fff;border:2px solid var(--rose);color:var(--deep);font-weight:900;font-size:15px;transition:transform .15s}
.btn-miss:active{transform:scale(.93)}

/* big days */
.ticker-card{text-align:center;background:linear-gradient(130deg,#fff,#fff0f6)}
.ticker{font-family:'Playfair Display',serif;font-size:21px;color:var(--deep);margin:8px 0}
.ticker b{font-size:26px}
.hero-day{text-align:center;background:linear-gradient(130deg,var(--pink),var(--deep));color:#fff;padding:24px 18px}
.hero-day .hintline{color:#ffe3ee}
.hero-name{font-weight:900;font-size:18px;margin-top:6px}
.hero-dday{font-family:'Playfair Display',serif;font-size:38px;font-weight:700;margin:2px 0}
.minor-note{margin-top:14px;padding:10px 14px;border-radius:14px;background:#fff6e9;border:1px solid #ffe1b3;font-size:13px;font-weight:700;color:#a8763e;text-align:center}

/* calendar photos + gallery */
.cal-cell.has-photo{background-size:cover;background-position:center;color:#fff;text-shadow:0 1px 6px rgba(91,55,70,.7)}
.cal-cell.has-photo .cal-num{background:rgba(91,55,70,.35);border-radius:8px;padding:0 5px}
.cal-cell.today.has-photo{background-color:transparent;box-shadow:inset 0 0 0 3px var(--deep)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:2px solid #fff;box-shadow:var(--shadow)}
.mood-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:8px 0}
.mood-opt{font-size:30px;background:#fff0f6;border-radius:16px;padding:10px 14px;transition:transform .12s}
.mood-opt:active{transform:scale(1.2)}
.tag-plus{border-style:dashed}

/* promises */
.chk.pop{animation:pop .3s}
@keyframes pop{50%{transform:scale(1.3)}}
.todo.done{opacity:.65}

/* settings profile */
.profile-row{display:flex;gap:14px;align-items:center}
.avatar-btn{background:none;display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.avatar{width:64px;height:64px;border-radius:50%;background:#ffeef4;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;border:3px solid #ffd9e6}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-hint{font-size:11px;font-weight:800;color:var(--deep)}
.profile-fields{flex:1;display:flex;flex-direction:column;gap:8px}
.profile-fields label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.profile-fields input{display:block;width:100%;margin-top:3px;padding:9px 12px;border:2px solid #ffd9e6;border-radius:12px;background:#fff;font-size:15px;outline:none}
.profile-fields input:focus{border-color:var(--pink)}

/* v5: obvious calendar/memories toggle */
.seg-big{display:flex;background:#ffe3ee;border-radius:16px;padding:4px;margin:10px 0 12px;gap:4px}
.seg-big button{flex:1;padding:11px;border-radius:12px;background:transparent;font-weight:900;color:var(--ink-soft);font-size:14px;transition:all .15s}
.seg-big button.on{background:#fff;color:var(--deep);box-shadow:var(--shadow)}

/* v5: moments feed, IG/FB style */
.feed-head{display:flex;justify-content:space-between;align-items:center;margin:12px 2px 8px}
.feed-title{font-family:'Playfair Display',serif;font-size:22px;margin:0}
.fab{width:44px;height:44px;border-radius:50%;background:linear-gradient(120deg,var(--pink),var(--deep));color:#fff;font-size:24px;font-weight:900;box-shadow:var(--shadow);line-height:1;transition:transform .15s}
.fab:active{transform:scale(.9)}
.post{padding:14px 0;border-bottom:1px dashed #ffd9e6}
.post:last-child{border-bottom:none}
.post-head{display:flex;align-items:center;gap:10px}
.post-ava{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#ffe3ee;display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.post-who{font-weight:900;font-size:14px}
.post-sub{font-size:12px;color:var(--ink-soft);font-weight:700}
.post-tag{margin-left:auto;font-size:12px;background:#ffe3ee;color:var(--deep);padding:4px 10px;border-radius:999px;font-weight:900;white-space:nowrap}
.post-text{margin:8px 0 2px;font-weight:700;line-height:1.55}
.post-extra{font-size:13px;color:var(--ink-soft);font-weight:700;margin-top:4px}
.post-photos{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.post-photos img{width:100%;border-radius:14px;aspect-ratio:1;object-fit:cover;cursor:pointer}
.post-photos.single{grid-template-columns:1fr}
.post-photos.single img{aspect-ratio:auto;max-height:340px}
.post .moment-del{position:static}

/* v5: photo upload progress */
.pq{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.pq-item{font-size:12px;font-weight:800;color:var(--ink-soft)}
.pq-item span{margin-right:6px}
.pq-bar{height:6px;background:#ffe3ee;border-radius:99px;overflow:hidden;margin-top:3px}
.pq-fill{height:100%;background:linear-gradient(90deg,var(--pink),var(--deep));transition:width .2s}
.btn-add[disabled]{opacity:.5;pointer-events:none}

/* v5: mood history + sub line */
.mood-hist{margin-top:8px;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:1px}
.mood-sub{margin-top:3px;font-size:11px;color:var(--ink-soft);font-weight:700}

/* v5: two-way touch buttons */
.touch-row{display:flex;gap:8px;justify-content:center;margin:4px 0 10px}
.touch-btn{background:#fff;border:1px solid #ffd9e6;border-radius:999px;padding:9px 16px;font-weight:900;color:var(--deep);font-size:13px;box-shadow:var(--shadow);transition:transform .12s}
.touch-btn:active{transform:scale(.94)}

/* partner-feeling layout */
.mood-hero{display:flex;align-items:center;gap:14px;margin:4px 0 6px}
.mood-hero .mood-big{font-size:44px;line-height:1;filter:drop-shadow(0 3px 6px rgba(231,84,128,.25))}
.mood-hero .mood-who{font-weight:800;font-size:16px}
.mood-hero .mood-when{color:var(--ink-soft);font-weight:700;font-size:13px;margin-top:2px}
.mood-own{margin-top:6px;color:var(--ink-soft);font-weight:700;font-size:13px}
/* moments seg */
.seg-big{display:flex;gap:8px;margin-top:14px}
/* otp row */
#otp-row label{display:block}
#login-otp{letter-spacing:.5em;text-align:center;font-weight:800;font-size:22px}
/* keep-it big post button (item 9) */
#m-keep{width:100%;margin-top:14px;padding:16px;border-radius:18px;background:linear-gradient(120deg,var(--pink),var(--deep));color:#fff;font-weight:900;font-size:17px;box-shadow:var(--shadow)}
#m-keep[disabled]{opacity:.6}
/* page-tinted bursts */
.burst.b-moments{color:#c084fc}.burst.b-days{color:#f59e0b}.burst.b-us{color:#38bdf8}