:root{
  --ink:#1F2A44; --ink2:#55607A; --cream:#FFF8EE; --coral:#FF6B4A; --coral2:#E8502F; --teal:#19B8A6;
  --note:#FFE58A; --note2:#F7D560; --card:#FFFFFF; --shadow:0 6px 0 rgba(31,42,68,.18);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --font: ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#1F2A44;color:var(--ink);font-family:var(--font);overflow:hidden;
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#app{position:relative;margin:0 auto;height:100%;max-width:520px;overflow:hidden;background:var(--cream)}
@media (min-width:560px){#app{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 80px rgba(0,0,0,.45)}
  body{background:radial-gradient(circle at 30% 20%,#2D3B5E,#141B2E)}}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:0;color:inherit}

/* ---------- HUD ---------- */
#hud{position:absolute;left:0;right:0;top:0;padding:calc(var(--safe-t) + 8px) 10px 0;pointer-events:none;z-index:5}
.hud-row{display:flex;gap:8px;align-items:flex-start}
.note{position:relative;flex:1;background:var(--note);border-radius:6px 6px 14px 6px;padding:8px 10px 6px;
  box-shadow:0 4px 0 var(--note2),0 8px 18px rgba(31,42,68,.18);transform:rotate(-1deg);pointer-events:auto;min-height:56px}
.note-pin{position:absolute;top:-5px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 2px 0 var(--coral2)}
#list{display:flex;flex-wrap:wrap;gap:4px 10px}
.li{display:flex;align-items:center;gap:4px;font-weight:800;font-size:14px;line-height:1.25;padding:2px 4px;border-radius:8px;transition:transform .2s}
.li .e{font-size:19px}
.li.target{background:rgba(255,255,255,.55)}
.li.done{opacity:.45;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--coral)}
.li.removed{opacity:.35;text-decoration:line-through}
.li.pop{animation:pop .45s}
.li.new{animation:wiggle .6s 2}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.hud-side{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto}
.timer{position:relative;width:54px;height:54px;background:#fff;border-radius:50%;box-shadow:var(--shadow)}
.timer svg{position:absolute;inset:2px;transform:rotate(-90deg)}
.timer .trk{fill:none;stroke:#EDF0F5;stroke-width:5}
.timer .arc{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-dasharray:119.4;transition:stroke .3s}
.timer.warn .arc{stroke:#F2A541}.timer.danger .arc{stroke:var(--coral)}
.timer.danger{animation:beat .8s infinite}
@keyframes beat{50%{transform:scale(1.08)}}
#timerTxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px}
.chip{background:#fff;border-radius:20px;padding:3px 9px;font-size:13px;box-shadow:0 3px 0 rgba(31,42,68,.15)}
.chip.bump{animation:pop .4s}
.icon-btn{width:36px;height:36px;border-radius:12px;background:#fff;font-size:14px;font-weight:900;box-shadow:0 3px 0 rgba(31,42,68,.15)}
.icon-btn.light{background:rgba(255,255,255,.85)}
.shop-tag{display:inline-block;margin-top:6px;background:rgba(31,42,68,.82);color:#fff;font-size:12px;font-weight:800;
  padding:4px 10px;border-radius:20px;pointer-events:none}
.hint{position:absolute;left:50%;bottom:calc(var(--safe-b) + 14px);transform:translateX(-50%);background:rgba(31,42,68,.88);color:#fff;
  font-weight:800;font-size:14px;padding:10px 16px;border-radius:24px;white-space:nowrap;z-index:6;pointer-events:none;animation:float 1.6s ease-in-out infinite}
@keyframes float{50%{transform:translate(-50%,-5px)}}
.toast{position:absolute;left:10px;right:10px;top:calc(var(--safe-t) + 8px);z-index:20;background:rgba(250,250,252,.97);border-radius:18px;
  padding:10px 14px;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:drop .45s cubic-bezier(.2,1.4,.4,1);font-size:15px;font-weight:700}
.toast-app{font-size:12px;color:var(--ink2);display:flex;gap:6px;margin-bottom:3px}
.toast-now{margin-left:auto}
@keyframes drop{from{transform:translateY(-140%)}to{transform:none}}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;overflow:auto}
.screen.dim{background:rgba(20,27,46,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);justify-content:center;padding:20px}
#home{justify-content:space-between;padding:calc(var(--safe-t) + 12px) 18px calc(var(--safe-b) + 18px);overflow:hidden}
.sky{position:absolute;inset:0;z-index:-1;transition:background 1s}
.sun{position:absolute;right:12%;top:12%;width:90px;height:90px;border-radius:50%;filter:blur(.3px)}
.home-top{width:100%;display:flex;justify-content:space-between;align-items:center}
.clock-chip{background:rgba(255,255,255,.85);border-radius:20px;padding:6px 12px;font-weight:800;font-size:14px;box-shadow:0 3px 0 rgba(31,42,68,.12)}
.logo{text-align:center;margin-top:4vh}
.logo h1{margin:6px 0 0;font-size:44px;line-height:.95;letter-spacing:-1px;color:#fff;text-shadow:0 4px 0 rgba(31,42,68,.35)}
.logo h1 span{font-size:62px;color:var(--note);display:inline-block;transform:rotate(-3deg)}
.greet{margin:12px auto 0;max-width:300px;font-weight:800;color:#fff;font-size:16px;text-shadow:0 2px 0 rgba(31,42,68,.3)}
.logo-art{position:relative;width:170px;height:96px;margin:0 auto}
.la-shelf{position:absolute;top:8px;width:46px;height:84px;border-radius:12px;background:#5B8DEF;box-shadow:inset 0 -10px 0 rgba(0,0,0,.18),0 6px 0 rgba(31,42,68,.25)}
.la-shelf::before{content:"";position:absolute;inset:8px 7px 18px;border-radius:6px;background:repeating-linear-gradient(#FFD166 0 8px,#FF8FA3 8px 16px,#7BD389 16px 24px)}
.la-shelf.a{left:8px;transform:rotate(-4deg)}.la-shelf.b{right:8px;background:#FF6B4A;transform:rotate(4deg)}
.la-dude{position:absolute;left:50%;top:26px;transform:translateX(-50%);font-size:46px;animation:peek 2.4s ease-in-out infinite}
@keyframes peek{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-42%) rotate(6deg)}}
.la-sms{position:absolute;right:46px;top:-8px;background:#fff;border-radius:12px 12px 12px 2px;font-weight:900;color:var(--teal);padding:2px 9px;box-shadow:0 3px 0 rgba(31,42,68,.2)}
.open-now{text-align:center}
.open-label{color:#fff;font-weight:800;font-size:13px;opacity:.95;text-shadow:0 1px 0 rgba(31,42,68,.3)}
.open-icons{margin-top:6px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:340px}
.open-icons span{background:rgba(255,255,255,.85);border-radius:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:18px}
.open-icons span.off{opacity:.35;filter:grayscale(1)}
.home-actions{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.btn{border-radius:18px;padding:14px 18px;font-size:17px;font-weight:900;background:#fff;box-shadow:var(--shadow);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(31,42,68,.18)}
.btn.primary{background:var(--coral);color:#fff;box-shadow:0 6px 0 var(--coral2)}
.btn.big{padding:18px;font-size:23px;display:flex;flex-direction:column;align-items:center;gap:2px;animation:breathe 2.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.03)}}
.btn small{font-size:13px;font-weight:800;opacity:.85}
.btn.ghost{background:#EEF1F6;box-shadow:0 4px 0 #D5DAE4}
.row2{display:flex;gap:12px}
.btn.card{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;font-size:15px}
.btn.card .ci{font-size:24px}
.small-link{color:#fff;text-align:center;font-weight:700;font-size:13px;opacity:.85}

/* phone */
.phone{position:relative;width:min(330px,92vw);background:#fff;border-radius:34px;padding:16px 14px 16px;border:6px solid #1F2A44;
  box-shadow:0 30px 60px rgba(0,0,0,.35);animation:rise .5s cubic-bezier(.2,1.3,.4,1)}
.phone.buzz{animation:rise .5s cubic-bezier(.2,1.3,.4,1),buzz .09s linear 5 .5s}
@keyframes rise{from{transform:translateY(60vh) rotate(6deg)}to{transform:none}}
@keyframes buzz{25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}
.phone-notch{width:90px;height:18px;background:#1F2A44;border-radius:0 0 12px 12px;margin:-16px auto 8px}
.phone-head{display:flex;gap:10px;align-items:center;border-bottom:1px solid #EEF1F6;padding-bottom:10px}
.phone-head b{display:block;font-size:17px}.phone-head small{color:var(--ink2);font-weight:700}
.avatar{width:42px;height:42px;border-radius:50%;background:#FFE7D6;display:flex;align-items:center;justify-content:center;font-size:24px}
.bubbles{display:flex;flex-direction:column;gap:8px;padding:14px 0}
.bubble{max-width:88%;background:#EEF1F6;border-radius:18px 18px 18px 4px;padding:10px 13px;font-weight:700;font-size:15px;line-height:1.35;
  opacity:0;animation:pop-in .35s forwards}
.bubble.list{animation-delay:.6s}
.bubble.list div{font-size:16px;padding:1px 0}
@keyframes pop-in{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}}
.at-shop{text-align:center;font-weight:800;font-size:14px;color:var(--ink2);margin:2px 0 12px}
.at-shop b{color:var(--ink)}
.reply{width:100%}

/* receipt */
.receipt-wrap{overflow:hidden;width:min(320px,90vw);padding-top:4px}
.receipt{background:#fff;padding:18px 18px 28px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:14px;color:#333;
  animation:print 1.1s steps(14) both;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),95% 100%,90% calc(100% - 10px),85% 100%,80% calc(100% - 10px),75% 100%,70% calc(100% - 10px),65% 100%,60% calc(100% - 10px),55% 100%,50% calc(100% - 10px),45% 100%,40% calc(100% - 10px),35% 100%,30% calc(100% - 10px),25% 100%,20% calc(100% - 10px),15% 100%,10% calc(100% - 10px),5% 100%,0 calc(100% - 10px))}
@keyframes print{from{transform:translateY(-100%)}to{transform:none}}
.receipt h3{font-family:var(--font);text-align:center;margin:0 0 2px;font-size:22px;color:var(--ink)}
.receipt .c{text-align:center}
.receipt .r{display:flex;justify-content:space-between}
.receipt hr{border:0;border-top:2px dashed #ccc;margin:10px 0}
.stars{font-size:38px;text-align:center;letter-spacing:4px;margin:6px 0}
.stars span{display:inline-block;opacity:0;animation:stamp .4s forwards}
.stars span.off{filter:grayscale(1);opacity:.25!important;animation:none}
@keyframes stamp{from{opacity:0;transform:scale(2.4) rotate(-20deg)}to{opacity:1;transform:none}}
.reply-line{font-family:var(--font);background:#E8F7F4;border-radius:14px;padding:8px 10px;font-weight:800;margin-top:10px;font-size:14px}
.new-stamp{margin-top:12px;text-align:center;font-family:var(--font);font-weight:900;color:var(--coral)}
.new-stamp .st{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:3px dashed var(--coral);
  font-size:30px;transform:rotate(-12deg);animation:stamp .5s 1.4s both}
.result-actions{display:flex;flex-direction:column;gap:10px;width:min(320px,90vw);margin-top:16px}

/* panels */
.panel-screen{background:var(--cream);padding:calc(var(--safe-t) + 12px) 14px calc(var(--safe-b) + 14px)}
.panel{width:100%;max-width:460px}
.small-panel{background:#fff;border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:10px;max-width:300px;text-align:center}
.small-panel h2{margin:0 0 6px}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.panel-head h2{margin:6px 0;font-size:26px}
.muted{color:var(--ink2);font-weight:700;font-size:14px}.small{font-size:12px}
.band-head,.stamp-row{display:grid;grid-template-columns:1fr repeat(6,38px);gap:4px;align-items:center}
.band-head{position:sticky;top:0;background:var(--cream);padding:6px 0;font-size:20px;text-align:center;z-index:1}
.stamp-grid{display:flex;flex-direction:column;gap:6px}
.stamp-row .nm{font-weight:800;font-size:13px;display:flex;align-items:center;gap:6px}
.stamp-row .nm i{font-style:normal;font-size:20px}
.stp{width:38px;height:38px;border-radius:50%;border:2px dashed #CBD2DE;display:flex;align-items:center;justify-content:center;font-size:17px}
.stp.got{border:2px solid var(--coral);background:#FFF0EB;transform:rotate(-8deg)}
.stp.closed{border-color:transparent;background:#E6E9EF;font-size:13px;opacity:.6}
.toggle{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:16px;padding:14px 16px;margin:10px 0;font-weight:800;font-size:17px;box-shadow:0 3px 0 rgba(31,42,68,.08)}
.toggle input{display:none}
.toggle i{width:50px;height:30px;border-radius:20px;background:#D5DAE4;position:relative;transition:.2s}
.toggle i::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.toggle input:checked+i{background:var(--teal)}
.toggle input:checked+i::after{left:23px}
.links{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.links a{background:#fff;border-radius:14px;padding:12px 16px;font-weight:800;color:var(--ink);text-decoration:none}
.cookie{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:50;background:#1F2A44;color:#fff;font:600 12px/1.4 system-ui;
  padding:8px 10px;border-radius:12px;max-width:94vw}
.cookie button{margin-left:6px;padding:4px 10px;border-radius:8px;background:#fff;color:#1F2A44;font-weight:800}
.cookie a{color:#9cd}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important}}