/* Layout: one screen. Heads meet slightly above the middle on a ribbon scale; the countdown sits at the bottom. */
:root{
  --rose-ground:#e5c0bc;
  --ink:#6e2c3c;
  --ink-soft:#9a5563;
  --heart:#e0607a;
  --heart-pale:#f6a9b6;
  --paper:rgba(255,247,242,.78);
  --ribbon:rgba(110,44,60,.28);
  --plum:#7d2a6e;
  --plum-soft:#b46aa6;
  --plaque-a:#fdeef0;
  --plaque-b:#f6cfd8;
  --f-hand:"Caveat","Segoe Script","Comic Sans MS",cursive;
  --f-num:"Nunito","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;overflow:hidden;color:var(--ink);font-family:var(--f-num);font-size:15px;
  background:var(--rose-ground) url("/bg.jpg") center/cover no-repeat fixed;
  -webkit-tap-highlight-color:transparent;
}
.app{position:relative;height:100%;width:100%;overflow:hidden}

/* stage */
#stage{position:absolute;inset:0}
.head{position:absolute;left:0;top:0;will-change:transform;z-index:3;
  filter:drop-shadow(0 10px 18px rgba(110,44,60,.18))}
.head img{display:block;width:100%;height:100%;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}

#scale{position:absolute;left:0;top:0;width:100%;height:0;z-index:2;pointer-events:none;transition:opacity 1.2s}
.over #scale{opacity:0}
.ribbon{position:absolute;height:2px;background:var(--ribbon);border-radius:2px;transform:translateY(-1px)}
.tick{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--paper);border:2px solid var(--heart);box-sizing:border-box;transition:background .6s}
.tick.done{background:var(--heart)}
.tick-label{position:absolute;font-family:var(--f-hand);font-weight:700;font-size:19px;line-height:1;color:var(--ink-soft);
  white-space:nowrap;transform:translate(-50%,12px)}
.tick-label.up{transform:translate(-50%,calc(-100% - 10px))}
.tick-label.done{color:var(--heart)}
.lead{position:absolute;width:0;border-left:1px dashed var(--ink-soft);opacity:.45;transform:translateX(-.5px)}
.lead.done{border-left-color:var(--heart);opacity:.8}
.tick-label.lead-label{transform:translate(-50%,-100%)}
.tick-label.lead-label.in-r{transform:translate(-3px,-100%)}
.tick-label.lead-label.in-l{transform:translate(calc(-100% + 3px),-100%)}
.goal{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;color:var(--heart)}
.goal svg{width:100%;height:100%;display:block}

/* floating hearts */
.fh{position:absolute;left:0;top:0;pointer-events:none;z-index:1;color:var(--heart);
  animation:rise var(--d,4s) ease-out forwards;opacity:0}
.fh svg{display:block;width:100%;height:100%}
@keyframes rise{
  0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}
  15%{opacity:var(--o,.7)}
  100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,-120px)) scale(1) rotate(var(--r,0deg))}
}

/* countdown */
.timer{position:absolute;box-sizing:border-box;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0 14px}
.timer h1{margin:0;font-family:var(--f-hand);font-weight:700;font-size:clamp(28px,4.4vw,42px);line-height:1;text-wrap:balance;text-align:center}
.cells{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vw,14px);width:100%;max-width:600px}
.cell{background:var(--paper);border-radius:18px;padding:clamp(10px,1.8vw,16px) 4px clamp(8px,1.4vw,12px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 6px 18px rgba(110,44,60,.10);backdrop-filter:blur(3px)}
.num{font-weight:800;font-size:clamp(30px,6vw,54px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.unit{font-size:clamp(11px,1.4vw,13px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.when{margin:0;font-size:clamp(12px,1.5vw,14px);font-weight:600;color:var(--ink-soft);text-align:center}

/* final plaque, shown when the countdown reaches zero */
.plaque{position:relative;box-sizing:border-box;width:100%;max-width:600px;text-align:center;
  padding:clamp(26px,4vw,38px) clamp(20px,4vw,40px);border-radius:22px;
  background:linear-gradient(160deg,var(--plaque-a),var(--plaque-b));
  border:3px solid var(--plum);
  box-shadow:0 0 0 5px var(--plaque-a),0 0 0 7px var(--plum-soft),0 14px 34px rgba(110,44,60,.22);
  animation:plaque-in 1.1s cubic-bezier(.2,.9,.3,1.3) both}
.plaque::before{content:"";position:absolute;inset:8px;border:1.5px dashed var(--plum-soft);border-radius:15px;pointer-events:none}
.plaque p{margin:0;font-family:var(--f-hand);font-weight:700;font-size:clamp(32px,5.6vw,52px);line-height:1.1;color:var(--plum);text-wrap:balance}
.plaque .corner{position:absolute;width:20px;height:20px;color:var(--plum)}
.plaque .corner svg{display:block;width:100%;height:100%}
.plaque .c1{top:-11px;left:-11px}.plaque .c2{top:-11px;right:-11px}
.plaque .c3{bottom:-11px;left:-11px}.plaque .c4{bottom:-11px;right:-11px}
.plaque .bow{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:30px;height:30px;color:var(--heart);
  background:var(--plaque-a);border-radius:50%;box-shadow:0 0 0 3px var(--plum);padding:5px;box-sizing:border-box}
.plaque .bow svg{display:block;width:100%;height:100%}
@keyframes plaque-in{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.plaque{animation:none}}

@media (prefers-reduced-motion:reduce){.fh{display:none}}

*{box-sizing:border-box}
button,input,textarea,select{font:inherit;color:inherit}
:root{--nav-h:62px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}

/* views + bottom tabs */
#views{position:fixed;left:0;right:0;top:0;bottom:calc(var(--nav-h) + var(--safe-b))}
.view{position:absolute;inset:0}
#view-timer{padding-top:var(--safe-t)}
#view-timer .app{height:100%}
.page{overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-t) + 14px) max(16px,env(safe-area-inset-left,0px)) 96px max(16px,env(safe-area-inset-right,0px))}
.page>*{max-width:640px;margin-left:auto;margin-right:auto}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;
  height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:rgba(255,247,242,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 -4px 20px rgba(110,44,60,.10)}
.tabs button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:11px;font-weight:700;color:var(--ink-soft);cursor:pointer;letter-spacing:.02em}
.tabs button span{font-size:22px;line-height:1;filter:grayscale(.6);opacity:.7;transition:.2s}
.tabs button.on{color:var(--ink)}
.tabs button.on span{filter:none;opacity:1;transform:scale(1.12)}

/* generic */
.muted{color:var(--ink-soft);margin:0}
.btn{border:0;border-radius:14px;padding:11px 16px;background:var(--paper);color:var(--ink);font-weight:700;cursor:pointer;
  box-shadow:0 4px 12px rgba(110,44,60,.10)}
.btn.primary{background:var(--heart);color:#fff}
.btn.danger{background:#fff;color:#b23a48}
.btn:disabled{opacity:.55}
.row{display:flex;gap:8px;flex-wrap:wrap}
.card{background:var(--paper);border-radius:20px;padding:16px;margin-bottom:12px;box-shadow:0 6px 18px rgba(110,44,60,.10);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.card h3{margin:0;font-size:17px}
.page-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.page-head h2{margin:0;font-family:var(--f-hand);font-size:38px;line-height:1}
.empty{text-align:center;padding:30px 10px;color:var(--ink-soft);font-weight:600}
.error{color:#b23a48;font-weight:700;margin:0}

/* login */
.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;z-index:30}
.login-card{width:100%;max-width:360px;background:var(--paper);border-radius:26px;padding:28px 22px;text-align:center;
  box-shadow:0 14px 40px rgba(110,44,60,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:12px}
.login-card h1{margin:0;font-family:var(--f-hand);font-size:44px;line-height:1}
.login-heart{font-size:44px}
.who-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.who-pick button{border:2px solid transparent;border-radius:16px;padding:14px;background:#fff;font-weight:800;font-size:17px;cursor:pointer}
.who-pick button.on{border-color:var(--heart);background:#ffe9ee}
#loginForm{display:flex;flex-direction:column;gap:10px}
input[type=password],input[type=text],input[type=date],textarea,select{width:100%;border:1.5px solid rgba(110,44,60,.18);border-radius:14px;
  padding:12px 14px;background:#fff;font-size:16px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--heart)}
textarea{min-height:110px;resize:vertical}

/* think button */
.think{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:12px 24px 12px 18px;
  background:var(--heart);color:#fff;font-weight:800;font-size:17px;cursor:pointer;
  box-shadow:0 8px 22px rgba(224,96,122,.45);transition:transform .15s}
.think:active{transform:scale(.94)}
.think.cool{background:#d99aa8;box-shadow:0 4px 12px rgba(224,96,122,.25)}
.think-heart{font-size:22px;display:inline-block}
.think.pulse .think-heart{animation:beat .6s}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.5)}60%{transform:scale(.9)}}
.think-stats{margin:-4px 0 0;font-size:13px;font-weight:700;color:var(--ink-soft);text-align:center;min-height:1.2em}
.burst{position:fixed;z-index:40;pointer-events:none;font-size:22px;animation:burst 1.1s ease-out forwards}
@keyframes burst{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--bx),var(--by)) scale(1.3)}}

/* segmented */
.seg{display:inline-flex;background:var(--paper);border-radius:14px;padding:4px;gap:4px}
.seg button{border:0;background:none;border-radius:10px;padding:8px 14px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(110,44,60,.12)}

/* envelopes */
.env-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.env{position:relative;border:0;cursor:pointer;text-align:center;aspect-ratio:1.35;border-radius:16px;padding:14px 10px 12px;
  background:linear-gradient(160deg,#fff8f4,#f9dde2);box-shadow:0 6px 18px rgba(110,44,60,.13);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;color:var(--ink)}
.env::before{content:"";position:absolute;left:0;right:0;top:0;height:58%;
  background:linear-gradient(160deg,#fbe6ea,#f4c6cf);clip-path:polygon(0 0,100% 0,50% 100%);opacity:.95}
.env.opened::before{clip-path:polygon(0 0,100% 0,100% 8%,50% 0,0 8%);}
.env .seal{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);font-size:28px;filter:drop-shadow(0 3px 4px rgba(110,44,60,.25))}
.env .t{position:relative;font-family:var(--f-hand);font-size:21px;font-weight:700;line-height:1.05}
.env .s{position:relative;font-size:11px;font-weight:700;color:var(--ink-soft)}
.env .badge{position:absolute;top:8px;right:8px;background:var(--heart);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:3px 7px}
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + var(--safe-b) + 14px);z-index:15;
  border:0;border-radius:999px;padding:13px 22px;white-space:nowrap;background:var(--heart);color:#fff;font-weight:800;box-shadow:0 8px 22px rgba(224,96,122,.45);cursor:pointer}

/* timeline */
.timeline{position:relative;padding-left:44px}
.timeline::before{content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;background:var(--ribbon);border-radius:2px}
.ev{position:relative;margin-bottom:14px;cursor:pointer}
.ev .ico{position:absolute;left:-44px;top:6px;width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:0 3px 10px rgba(110,44,60,.18);border:2px solid var(--heart-pale)}
.ev .box{background:var(--paper);border-radius:18px;padding:12px 14px;box-shadow:0 6px 18px rgba(110,44,60,.10);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ev .date{font-size:12px;font-weight:800;color:var(--heart);letter-spacing:.04em;text-transform:uppercase}
.ev .ttl{font-weight:800;font-size:17px;margin:2px 0}
.ev .txt{color:var(--ink-soft);font-weight:600;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ev .ph{margin-top:8px;width:100%;max-height:200px;object-fit:cover;border-radius:12px;display:block;background:#f3dfe1}
.year{font-family:var(--f-hand);font-size:30px;font-weight:700;margin:6px 0 10px -44px}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal-back{position:absolute;inset:0;background:rgba(60,20,30,.45);animation:fade .2s}
.sheet{position:relative;width:100%;max-width:560px;max-height:92%;overflow-y:auto;background:#fff8f5;border-radius:24px 24px 0 0;
  padding:20px 18px calc(20px + var(--safe-b));animation:up .25s cubic-bezier(.2,.9,.3,1);display:flex;flex-direction:column;gap:12px}
@media (min-width:600px){.modal{align-items:center}.sheet{border-radius:24px;padding-bottom:20px}}
.sheet h3{margin:0;font-family:var(--f-hand);font-size:32px;line-height:1.05}
.sheet .x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;color:var(--ink-soft);cursor:pointer}
.sheet label{font-size:13px;font-weight:800;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}
.sheet .media img,.sheet .media video{width:100%;border-radius:14px;display:block;max-height:60vh;object-fit:contain;background:#000}
.sheet .media audio{width:100%}
.sheet .note{white-space:pre-wrap;font-size:17px;line-height:1.45;margin:0}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1.5px solid rgba(110,44,60,.15);background:#fff;border-radius:999px;padding:7px 12px;font-weight:700;cursor:pointer}
.chips button.on{border-color:var(--heart);background:#ffe9ee}
.icons{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.icons button{border:1.5px solid transparent;background:#fff;border-radius:12px;font-size:22px;padding:6px 0;cursor:pointer}
.icons button.on{border-color:var(--heart);background:#ffe9ee}
.attach{display:flex;gap:8px;flex-wrap:wrap}
.preview{font-size:13px;font-weight:700;color:var(--ink-soft)}
.preview img,.preview video{max-width:100%;max-height:180px;border-radius:12px;display:block;margin-top:6px}
.rec{background:#b23a48!important;color:#fff!important}
.progress{height:6px;border-radius:3px;background:#f3dfe1;overflow:hidden}
.progress i{display:block;height:100%;background:var(--heart);width:0;transition:width .2s}
.random-card{text-align:center;align-items:center}
.random-card .big{font-size:54px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + var(--safe-b) + 16px);z-index:60;
  background:rgba(60,20,30,.88);color:#fff;padding:10px 16px;border-radius:14px;font-weight:700;max-width:90%;text-align:center}
.banner{background:#fff;border-radius:14px;padding:8px 12px;font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 4px 12px rgba(110,44,60,.12);border:0;cursor:pointer}
.timeline.empty-tl::before{display:none}
.switch{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.switch input{width:20px;height:20px;accent-color:var(--heart)}
.quiet-times label{display:flex;align-items:center;gap:6px;font-weight:700}
.quiet-times input{width:auto;border:1.5px solid rgba(110,44,60,.18);border-radius:12px;padding:8px 10px;background:#fff;font-size:16px}
.test-shift{position:absolute;top:8px;left:8px;z-index:6;display:flex;gap:6px}
.test-shift button{border:1px dashed var(--ink-soft);background:rgba(255,255,255,.7);border-radius:10px;padding:5px 9px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.kiss{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;font-size:22px;line-height:26px;text-align:center;z-index:4;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(110,44,60,.25))}