:root{--bg:#FFF5F8;--pink:#FF8FB1;--peach:#FFD3BE;--ink:#5B3A48;--soft:#FFE6EE}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.45 Manrope,system-ui,sans-serif;background-image:radial-gradient(#ffdbe6 1px,transparent 1px);background-size:22px 22px}
.doodles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.8}.doodles svg{width:100%;height:100%}
.app{position:relative;z-index:1;max-width:560px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;padding:0 12px env(safe-area-inset-bottom)}
.top{display:flex;align-items:center;gap:10px;padding:12px 6px 8px}
h1{font:700 32px/1 Caveat,cursive;margin:0;color:var(--pink);text-shadow:1px 1px 0 var(--ink)}
.sub{margin:2px 0 0;font-size:13px;opacity:.75}
/* ---- mascot: living heart (hm-*) ---- */
.mascot{position:relative;width:76px;height:76px;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mascot .hm{width:100%;height:100%;overflow:visible;display:block}
.hm-float{animation:hmFloat 5.6s ease-in-out infinite}
.hm-beat{transform-origin:60px 70px;animation:hmBeat 2.4s ease-in-out infinite}
.hm-shadow{transform-origin:60px 114px;animation:hmShadow 5.6s ease-in-out infinite}
.hm-bow{transform-origin:60px 31px;animation:hmBow 3.4s ease-in-out infinite}
.hm-al{transform-origin:20px 74px;animation:hmArmL 4.2s ease-in-out infinite}.hm-ar{transform-origin:100px 74px;animation:hmArmR 4.2s ease-in-out infinite}
.hm-face{transition:transform .35s ease}.hm-look{transition:transform .25s ease-out}
.hm .hm-eye{transform-box:fill-box;transform-origin:50% 60%;transition:transform .07s ease-in}
.hm-blink .hm-eye{transform:scaleY(.08)}
.hm-mini .hm-eye{animation:hmBlink 4.6s infinite}
.hm-happy,.hm-open,.hm-o,.hm-sparks,.hm-pop{opacity:0}
.hm-open{transform-origin:60px 71.5px}.hm-sparks path{transform-box:fill-box;transform-origin:center}
.hm .hm-pop{transform-box:fill-box;transform-origin:center}
@keyframes hmFloat{0%,62%,100%{transform:translateY(0)}78%{transform:translateY(-4px)}}
@keyframes hmShadow{0%,62%,100%{transform:scale(1);opacity:1}78%{transform:scale(.86);opacity:.7}}
@keyframes hmBeat{0%,40%,100%{transform:scale(1)}8%{transform:scale(1.07,1.05)}16%{transform:scale(.99,1)}26%{transform:scale(1.045,1.035)}}
@keyframes hmBow{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}35%{transform:rotate(5deg)}48%{transform:rotate(-2deg)}60%{transform:rotate(0)}}
@keyframes hmArmL{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(14deg)}90%{transform:rotate(-4deg)}}
@keyframes hmArmR{0%,30%,60%,100%{transform:rotate(0)}40%{transform:rotate(-14deg)}50%{transform:rotate(4deg)}}
@keyframes hmBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
/* thinking: looks up & around, slow bob, "o" mouth, twinkles */
.thinking .hm-face{animation:hmThink 2.8s ease-in-out infinite}
.thinking .hm-float{animation:hmBob 2.2s ease-in-out infinite}.thinking .hm-shadow{animation:hmShadowB 2.2s ease-in-out infinite}
.thinking .hm-beat{animation:hmBeat 3.6s ease-in-out infinite}
.thinking .hm-smile{opacity:0}.thinking .hm-o{opacity:1}
.thinking .hm-al{animation:none;transform:rotate(-38deg) translate(6px,-4px)}
.thinking .hm-sparks,.talking .hm-sparks{opacity:1}
.thinking .hm-sparks path,.talking .hm-sparks path{animation:hmTwinkle 1.4s ease-in-out infinite}
.hm-sparks path:nth-child(2){animation-delay:.35s!important}.hm-sparks path:nth-child(3){animation-delay:.7s!important}.hm-sparks path:nth-child(4){animation-delay:1.05s!important}
@keyframes hmThink{0%,100%{transform:translate(3px,-3.5px)}45%{transform:translate(-3px,-4px)}60%{transform:translate(-3px,-4px)}}
@keyframes hmBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes hmShadowB{0%,100%{transform:scale(1)}50%{transform:scale(.85);opacity:.7}}
@keyframes hmTwinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
/* talking: mouth flaps, bouncy */
.talking .hm-float{animation:hmBounce .46s ease-in-out infinite}.talking .hm-shadow{animation:hmShadowT .46s ease-in-out infinite}
.talking .hm-beat{animation:hmSquash .46s ease-in-out infinite;transform-origin:60px 106px}
.talking .hm-smile{opacity:0}.talking .hm-open{opacity:1;animation:hmTalk .24s ease-in-out infinite alternate}
.talking .hm-al{animation:hmArmL .92s ease-in-out infinite}.talking .hm-ar{animation:hmArmR .92s ease-in-out infinite}
@keyframes hmBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hmShadowT{50%{transform:scale(.88);opacity:.75}}
@keyframes hmSquash{0%,100%{transform:scale(1.03,.97)}50%{transform:scale(.98,1.03)}}
@keyframes hmTalk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
/* happy (.love, kept from the old API; .happy is an alias): squish, ^^ eyes, hearts pop */
.love .hm-beat,.happy .hm-beat{animation:hmSquish 1.2s cubic-bezier(.3,1.6,.5,1);transform-origin:60px 106px}
.love .hm-float,.happy .hm-float{animation:hmHop 1.2s ease-out}
.love .hm-eyes,.happy .hm-eyes{animation:hmHide 1.3s steps(1,end)}.love .hm-happy,.happy .hm-happy{animation:hmShow 1.3s steps(1,end)}
.love .hm-smile,.happy .hm-smile{opacity:0}.love .hm-open,.happy .hm-open{opacity:1;animation:none;transform:scaleY(.8)}
.love .hm-al,.happy .hm-al{animation:hmWaveL .4s ease-in-out 3}.love .hm-ar,.happy .hm-ar{animation:hmWaveR .4s ease-in-out 3}
.love .hm-pop,.happy .hm-pop{animation:hmPop 1.3s ease-out}.love .hm-pop:nth-child(2),.happy .hm-pop:nth-child(2){animation-delay:.15s}.love .hm-pop:nth-child(3),.happy .hm-pop:nth-child(3){animation-delay:.3s}
@keyframes hmSquish{0%{transform:scale(1)}15%{transform:scale(1.18,.82)}35%{transform:scale(.9,1.12)}55%{transform:scale(1.05,.96)}75%,100%{transform:scale(1)}}
@keyframes hmHop{0%,100%{transform:translateY(0)}35%{transform:translateY(-9px)}60%{transform:translateY(0)}}
@keyframes hmHide{0%{opacity:0}100%{opacity:1}}@keyframes hmShow{0%{opacity:1}100%{opacity:0}}
@keyframes hmWaveL{50%{transform:rotate(40deg)}}@keyframes hmWaveR{50%{transform:rotate(-40deg)}}
@keyframes hmPop{0%{opacity:0;transform:translateY(14px) scale(.3)}30%{opacity:1;transform:translateY(-6px) scale(1.25)}100%{opacity:0;transform:translateY(-30px) scale(.9)}}
/* old thinking bubble, shared with shelf minis */
.dots{position:absolute;top:-4px;right:-10px;display:none;gap:3px;background:#fff;border:2px solid var(--ink);border-radius:12px 12px 12px 3px;padding:4px 6px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--pink);animation:dot 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.thinking .dots{display:flex}@keyframes dot{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@keyframes breathe{50%{transform:scale(1.03,.97)}}@keyframes bounce{50%{transform:translateY(-4px)}}
.hm-mini{overflow:visible}.empty-d .hm-mini{width:90px;height:90px}.empty-d.small .hm-mini{width:60px;height:60px}.mini .hm-mini{width:56px;height:56px}
.mini.thinking .hm-float{animation:hmBob 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hm *,.mascot .dots i{animation:none!important;transition:none!important}}
/* ---- /mascot ---- */
.chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:8px 4px 14px;scroll-behavior:smooth}
.msg{max-width:84%;padding:10px 14px;border:2.5px solid var(--ink);white-space:pre-wrap;word-wrap:break-word;box-shadow:3px 3px 0 var(--ink);animation:in .25s ease-out}
.bot{align-self:flex-start;background:#fff;border-radius:18px 22px 20px 6px/20px 16px 22px 6px;transform:rotate(-.6deg)}
.user{align-self:flex-end;background:var(--soft);border-radius:22px 18px 6px 20px/16px 22px 6px 20px;transform:rotate(.6deg)}
.msg.typing::after{content:"▍";color:var(--pink);animation:blink2 .8s infinite}@keyframes blink2{50%{opacity:0}}
@keyframes in{from{opacity:0;transform:translateY(8px) scale(.96)}}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.chips button{flex:none;font:600 14px Manrope,sans-serif;color:var(--ink);background:var(--peach);border:2px solid var(--ink);border-radius:16px 12px 16px 12px;padding:7px 12px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.chips button:nth-child(2){background:#FFD1E0}.chips button:nth-child(3){background:#FFE9B8}
.chips button:active,.bar button:active{transform:translate(2px,2px);box-shadow:none}
.bar{display:flex;align-items:flex-end;gap:8px;padding:8px 2px 12px}
.bar textarea{flex:1;resize:none;max-height:120px;font:16px Manrope,sans-serif;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:20px 16px 20px 16px;padding:10px 14px;outline:none}
.bar textarea:focus{border-color:var(--pink)}
.bar button{width:46px;height:46px;flex:none;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:50% 45% 50% 45%;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.cam{background:#fff}.send{background:var(--pink)}.send:disabled{opacity:.5}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 14px;border-radius:14px;font-size:14px;z-index:5}
.chips{flex-wrap:wrap;justify-content:center;overflow:visible}
.chips button{font-size:13px;padding:6px 10px}
.ttl{min-width:0}
.tabs{display:flex;gap:8px;padding:0 4px 6px}
.tab{flex:1;font:700 20px Caveat,cursive;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:14px 18px 12px 16px;padding:4px 0;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.tab.on{background:var(--pink);color:#fff}
.chatv{flex:1;display:flex;flex-direction:column;min-height:0}.chatv[hidden],.today[hidden]{display:none}
.today{flex:1;min-height:0;overflow-y:auto;padding:6px 4px 16px;display:flex;flex-direction:column;gap:14px}
.card{background:#fff;border:2.5px solid var(--ink);border-radius:20px 16px 22px 14px/16px 22px 14px 20px;box-shadow:3px 3px 0 var(--ink);padding:12px 14px}
.card h2{font:700 26px/1 Caveat,cursive;margin:0 0 8px;color:var(--pink)}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tlist li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:2px dashed #FFB8CD;border-radius:14px;background:var(--bg)}
.tlist .tm{font-weight:600;min-width:44px;color:var(--pink)}.tlist .ic{font-size:20px}.tlist small{display:block;opacity:.75}
.tlist .empty{border:none;background:none;opacity:.7;display:block}
.prof label{display:block;font-size:14px;font-weight:600;margin:0 0 10px}
.prof input,.prof select{display:block;width:100%;margin-top:4px;font:15px Manrope,sans-serif;color:var(--ink);background:var(--bg);border:2px solid var(--ink);border-radius:12px 14px 12px 14px;padding:8px 10px}
.save{font:600 15px Manrope,sans-serif;color:#fff;background:var(--pink);border:2.5px solid var(--ink);border-radius:16px 12px 16px 12px;padding:8px 16px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.preview{display:flex;align-items:center;gap:8px;margin:0 2px;padding:6px;background:#fff;border:2px dashed var(--pink);border-radius:14px;font-size:13px}
.preview[hidden]{display:none}.preview img{width:40px;height:40px;object-fit:cover;border-radius:8px}.preview button{margin-left:auto;border:none;background:none;font-size:16px;cursor:pointer;color:var(--ink)}
.msg img{display:block;max-width:160px;border-radius:10px;margin-bottom:6px}
/* ---- shelf ---- */
.shelfv{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}.shelfv[hidden]{display:none}
.fchips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;flex:none}
.fchips button{flex:none;font:600 13px Manrope,sans-serif;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:14px 10px 14px 10px;padding:5px 11px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.fchips button.on{background:var(--pink);color:#fff}
.grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;padding:4px 4px 90px;align-content:start}
.pc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:#fff;border:2.5px solid var(--ink);border-radius:18px 14px 20px 12px/14px 20px 12px 18px;box-shadow:3px 3px 0 var(--ink);padding:10px 6px 8px;font:13px/1.25 Manrope,sans-serif;color:var(--ink);cursor:pointer;animation:in .25s ease-out}
.pc:nth-child(3n+2){transform:rotate(.8deg)}.pc:nth-child(3n){transform:rotate(-.7deg)}
.pc b{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pc small{opacity:.7;font-size:11px}
.ph{width:64px;height:64px;display:grid;place-items:center;flex:none;border-radius:14px;background:var(--bg);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:contain;background:#fff}.ph .jar{width:52px;height:52px}
.badge{position:absolute;top:-8px;right:-6px;font-size:10px;font-weight:600;background:#fff;border:1.5px solid var(--ink);border-radius:10px;padding:1px 6px;white-space:nowrap}
.s-open{background:#FFE9B8}.s-finishing{background:#FFD3BE}.s-empty{background:#eee}.s-wishlist{background:#E8DDFF}
.addbig{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) rotate(-1deg);font:700 26px Caveat,cursive;color:#fff;background:var(--pink);border:3px solid var(--ink);border-radius:26px 20px 28px 18px;padding:6px 30px;box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.addbig:active{transform:translate(calc(-50% + 3px),3px);box-shadow:1px 1px 0 var(--ink)}
.empty-d{grid-column:1/-1;text-align:center;padding:30px 16px;opacity:.9}.empty-d .jar{width:90px;height:90px;animation:breathe 3s ease-in-out infinite}.empty-d.small{padding:14px}.empty-d.small .jar{width:60px;height:60px}
.sheet-bg{position:fixed;inset:0;background:rgba(91,58,72,.25);z-index:10}.sheet-bg[hidden],.sheet[hidden],.sv[hidden],.odate[hidden],.flyer[hidden]{display:none}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:11;max-width:560px;margin:0 auto;max-height:86dvh;display:flex;flex-direction:column;background:var(--bg);border:3px solid var(--ink);border-bottom:none;border-radius:28px 24px 0 0;padding:6px 14px calc(14px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .22s ease-out}
.sheet.up{transform:none}.grab{width:46px;height:5px;border-radius:3px;background:#FFB8CD;margin:2px auto 8px}
.sheet h2{font:700 28px/1 Caveat,cursive;color:var(--pink);margin:2px 0 10px}
.sv{display:flex;flex-direction:column;min-height:0;flex:1}
.sform{display:flex;gap:8px}.sform input{flex:1;min-width:0;font:16px Manrope,sans-serif;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:18px 14px 18px 14px;padding:10px 14px;outline:none}
.sform input:focus{border-color:var(--pink)}
.sgo,.odate button{font:600 15px Manrope,sans-serif;color:#fff;background:var(--pink);border:2.5px solid var(--ink);border-radius:16px 12px 16px 12px;padding:0 14px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.pchips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 2px;min-height:8px}
.pchip{font:600 13px Manrope,sans-serif;color:var(--ink);background:#FFD1E0;border:2px solid var(--ink);border-radius:14px;padding:3px 10px;cursor:pointer;animation:in .2s}
.pchip.category{background:#FFE9B8}.pchip span{opacity:.6;margin-left:2px}.pterm{font-size:13px;border:1.5px dashed #FFB8CD;border-radius:12px;padding:3px 9px;background:#fff}
.sres{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:6px 2px 10px;min-height:120px}
.lbl{margin:6px 0 0;font:700 20px Caveat,cursive;color:var(--ink)}.note{margin:4px 0;font-size:13px;opacity:.8}
.rc{display:flex;gap:10px;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:16px 12px 18px 10px;box-shadow:2px 2px 0 var(--ink);padding:8px;cursor:pointer;animation:in .25s ease-out}
.rc .ph{width:54px;height:54px}.rc>div{flex:1;min-width:0;font-size:14px;line-height:1.3}.rc b{font-weight:600;display:block}.rc small{display:block;opacity:.7;font-size:12px}
.rc em{display:block;font-size:12px;font-style:normal;opacity:.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.src{font-size:12px;color:#E0607F;text-decoration:none;border-bottom:1px dashed}.plus{font:700 22px Manrope;color:var(--pink)}
.rc.chosen{background:#FFE6EE;transform:scale(.97)}
.looking{display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:4px}.looking.row{flex-direction:row;justify-content:center;padding:6px 0;gap:10px}.looking p{margin:0;font-weight:600}
.mini{position:relative;width:56px;height:56px}.mini .jar{width:56px;height:56px;animation:bounce .6s ease-in-out infinite}.mini .dots{display:flex;top:-6px;right:-18px}
.asklink{margin-top:4px;background:none;border:none;font:600 14px Manrope,sans-serif;color:#E0607F;text-decoration:underline dashed;cursor:pointer;padding:8px}
.picked{display:flex;gap:12px;align-items:center;background:#fff;border:2px dashed var(--pink);border-radius:18px;padding:10px;margin-bottom:10px}.picked b{display:block}.picked small{display:block;opacity:.7}
.ok{display:inline-block;margin-top:4px;font:700 18px Caveat,cursive;color:var(--pink)}
.obtns{display:flex;flex-wrap:wrap;gap:8px}.obtns button{flex:1 1 30%;font:600 14px Manrope,sans-serif;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:16px 12px 16px 12px;padding:10px 8px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.obtns button:first-child{background:#FFD1E0}.obtns button.on{background:var(--pink);color:#fff}.obtns button:active{transform:translate(2px,2px);box-shadow:none}
.odate{display:flex;gap:8px;margin-top:10px}.odate input{flex:1;font:16px Manrope,sans-serif;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:12px;padding:8px}
.del{margin-top:14px;align-self:center;background:none;border:none;color:#B04060;font:600 14px Manrope,sans-serif;text-decoration:underline;cursor:pointer}
.flyer{position:fixed;z-index:20;display:grid;place-items:center;border-radius:14px;overflow:hidden;pointer-events:none;background:#fff;border:2px solid var(--ink)}.flyer img,.flyer svg{width:100%;height:100%;object-fit:contain}
.tab{font-size:18px}
/* ---- accounts ---- */
.top{position:relative}.ttl{flex:1}
.avatar{flex:none;width:46px;height:46px;display:grid;place-items:center;font:700 22px Caveat,cursive;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:50% 45% 50% 45%;box-shadow:2px 2px 0 var(--ink);cursor:pointer;position:relative}
.avatar span{font-size:20px;line-height:1}.avatar.in{background:var(--pink);color:#fff}.avatar.in span{font:700 26px/1 Caveat,cursive}
.avatar.warn::after{content:"";position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:#FFC36B;border:2px solid var(--ink)}
.avatar:active{transform:translate(2px,2px);box-shadow:none}
.banner{display:flex;align-items:center;gap:8px;margin:0 4px 8px;padding:8px 10px 8px 12px;background:#fff;border:2px dashed var(--pink);border-radius:16px 12px 16px 12px;font-size:14px;animation:in .25s}
.banner[hidden]{display:none}.banner span{flex:1}.banner.soft{background:var(--soft)}.banner.ok{background:#E6F8EC;border-color:#59B97A}.banner.bad{background:#FFF1D6;border-color:#F4B860}
.banner button{flex:none;font:600 13px Manrope,sans-serif;color:#fff;background:var(--pink);border:2px solid var(--ink);border-radius:12px;padding:4px 10px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.banner .bx{background:none;border:none;box-shadow:none;color:var(--ink);padding:2px 4px;font-size:15px}
.asheet .av{display:flex;flex-direction:column;min-height:0;overflow-y:auto}.asheet .av[hidden],.aform[hidden]{display:none}
.seg{display:flex;gap:0;margin:4px 0 12px;border:2.5px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:2px 2px 0 var(--ink);flex:none}
.seg button{flex:1;font:700 21px Caveat,cursive;color:var(--ink);background:#fff;border:none;padding:6px 0;cursor:pointer}.seg button.on{background:var(--pink);color:#fff}
.aform{display:flex;flex-direction:column}.aform label{display:block;font-size:14px;font-weight:600;margin:0 0 10px}.aform label i{font-weight:400;opacity:.65}
.aform input{display:block;width:100%;margin-top:4px;font:16px Manrope,sans-serif;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:14px 16px 14px 16px;padding:10px 12px;outline:none}
.aform input:focus{border-color:var(--pink)}
.pw{position:relative;display:block}.pw input{padding-right:44px}.eye{position:absolute;right:6px;top:50%;transform:translateY(-35%);border:none;background:none;font-size:18px;cursor:pointer;opacity:.5}.eye.on{opacity:1}
.abtn{font:700 24px Caveat,cursive;color:#fff;background:var(--pink);border:3px solid var(--ink);border-radius:20px 16px 22px 14px;padding:6px 18px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;margin-top:4px}
.abtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.abtn:disabled{opacity:.6}
.abtn.ghost{background:#fff;color:var(--ink);font-size:21px}.abtn.danger{background:#E0607F}
.alink{align-self:center;margin-top:8px;background:none;border:none;font:600 14px Manrope,sans-serif;color:#E0607F;text-decoration:underline dashed;cursor:pointer;padding:6px}
.alink[hidden]{display:none}
.err{margin:0 0 8px;padding:6px 10px;font-size:14px;background:#FFF1D6;border:2px solid #F4B860;border-radius:12px}.err[hidden]{display:none}
.fine{margin:8px 0 0;font-size:13px;opacity:.75;text-align:center}.fine.guest{margin-top:12px}
.meter{display:flex;align-items:center;gap:4px;margin:-4px 0 10px}.meter i{flex:1;max-width:44px;height:6px;border-radius:3px;background:#FFE0EA}.meter span{font-size:12px;margin-left:6px;opacity:.8}
.meter.s1 i:nth-child(-n+1){background:#F28C8C}.meter.s2 i:nth-child(-n+2){background:#F4B860}.meter.s3 i:nth-child(-n+3){background:#8BCB8F}.meter.s4 i:nth-child(-n+4){background:#59B97A}
.bigic{font-size:54px;text-align:center;animation:breathe 3s ease-in-out infinite}#av-sent h2,#av-delete h2{text-align:center}#av-sent p{font-size:15px;opacity:.9}
.me{display:flex;gap:12px;align-items:center;background:#fff;border:2.5px solid var(--ink);border-radius:20px 16px 22px 14px;box-shadow:3px 3px 0 var(--ink);padding:12px;margin:6px 0 14px}
.meav{width:56px;height:56px;flex:none;display:grid;place-items:center;font:700 34px/1 Caveat,cursive;color:#fff;background:var(--pink);border:2.5px solid var(--ink);border-radius:50% 45% 50% 45%}
.me b{display:block;font-size:17px}.me small{display:block;opacity:.75;word-break:break-all}
.vbadge{display:inline-block;margin-top:4px;font-size:11px;font-weight:600;background:#FFF1D6;border:1.5px solid var(--ink);border-radius:10px;padding:1px 7px}.vbadge.ok{background:#E6F8EC}
.aform.row{flex-direction:row;align-items:flex-end;gap:8px}.aform.row label{flex:1;margin:0}
.sbtn{font:600 14px Manrope,sans-serif;color:var(--ink);background:#FFE9B8;border:2.5px solid var(--ink);border-radius:14px;padding:10px 12px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.acts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
/* ---- chats ---- */
.chatbar{display:flex;align-items:center;gap:8px;padding:0 4px 6px;flex:none}
.cbtn{flex:none;width:36px;height:34px;font:700 18px Manrope,sans-serif;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:12px 10px 12px 10px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;position:relative}
.cbtn.dot::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--pink);border:2px solid var(--ink)}
.ctitle{flex:1;min-width:0;font:700 21px/1.1 Caveat,cursive;color:var(--ink);background:none;border:none;border-bottom:2px dashed #FFB8CD;padding:4px 2px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.drawer-bg{position:fixed;inset:0;background:rgba(91,58,72,.25);z-index:12}.drawer-bg[hidden],.drawer[hidden]{display:none}
.drawer{position:fixed;top:0;bottom:0;left:max(0px,calc(50% - 280px));z-index:13;width:min(320px,86vw);display:flex;flex-direction:column;background:var(--bg);border-right:3px solid var(--ink);border-radius:0 26px 26px 0;padding:14px 12px;transform:translateX(-105%);transition:transform .2s ease-out;box-shadow:4px 0 0 var(--ink)}
.drawer.in{transform:none}
.dhead{display:flex;align-items:center}.dhead h2{flex:1;margin:0;font:700 30px/1 Caveat,cursive;color:var(--pink)}.dx{background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink)}
.dnew{margin:12px 0 10px;font:700 22px Caveat,cursive;color:#fff;background:var(--pink);border:2.5px solid var(--ink);border-radius:18px 14px 18px 14px;padding:6px;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.clist{list-style:none;margin:0;padding:2px 4px 10px 0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.ci{display:flex;align-items:center;gap:2px;background:#fff;border:2px solid var(--ink);border-radius:14px 12px 16px 10px;padding:2px 4px 2px 0}
.ci.on{background:var(--soft);box-shadow:2px 2px 0 var(--ink)}.ci.unread .cname::before{content:"● ";color:var(--pink)}
.cname{flex:1;min-width:0;text-align:left;background:none;border:none;font:600 14px Manrope,sans-serif;color:var(--ink);padding:8px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cname small{display:block;font-weight:400;font-size:11px;opacity:.6}
.ced,.cdel{flex:none;background:none;border:none;font-size:15px;cursor:pointer;padding:6px;opacity:.55}.ced:hover,.cdel:hover{opacity:1}
.cren{flex:1;min-width:0;margin:4px 6px;font:600 14px Manrope,sans-serif;color:var(--ink);border:2px solid var(--pink);border-radius:10px;padding:6px 8px;outline:none}
.cempty{text-align:center;opacity:.7;padding:20px 6px;font-size:14px}
/* ---- PWA ---- */
.install{margin-top:14px;padding-top:12px;border-top:2px dashed #FFB8CD;display:flex;flex-direction:column}.install[hidden],#iosHint[hidden]{display:none}
.updtoast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%) rotate(-1deg);z-index:30;font:600 14px Manrope,sans-serif;color:#fff;background:var(--pink);border:2.5px solid var(--ink);border-radius:18px 14px 18px 14px;padding:9px 16px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;white-space:nowrap;animation:in .3s ease-out}

/* ---- markdown in assistant messages ---- */
.msg.md{white-space:normal}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p{margin:0 0 8px}
.md .mh{font-weight:800;margin:10px 0 4px;line-height:1.25}.md .mh1{font-size:1.12em}.md .mh2{font-size:1.06em}.md .mh3{font-size:1em;color:#c2577f}
.md ul,.md ol{margin:4px 0 8px;padding-left:1.25em}.md li{margin:3px 0;padding-left:2px}.md li>ul,.md li>ol{margin:2px 0}
.md ul>li::marker{color:var(--pink);font-size:1.1em}.md ol>li::marker{color:#e0628f;font-weight:700}
.md b{font-weight:800}
.md a{color:#d6457a;font-weight:600;text-decoration:underline;text-decoration-color:#ffb8cd;text-decoration-thickness:2px;text-underline-offset:2px;word-break:break-word}
.md a.cite{display:inline-block;vertical-align:super;font-size:.68em;line-height:1;min-width:1.5em;padding:2px 5px;margin-left:2px;text-align:center;text-decoration:none;color:var(--ink);background:var(--soft);border:1.5px solid var(--pink);border-radius:9px 7px 9px 7px}
.md a.cite:hover,.md a.cite:active{background:var(--pink);color:#fff}
.md code{font:.88em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--soft);border:1px solid #ffc6d7;border-radius:6px;padding:1px 4px}
.md pre{margin:6px 0 8px;background:#fff7fa;border:2px dashed #ffb8cd;border-radius:12px;padding:8px 10px;overflow-x:auto;white-space:pre}
.md pre code{background:none;border:none;padding:0;font-size:.85em}
.md blockquote{margin:6px 0 8px;padding:4px 10px;border-left:4px solid var(--pink);background:var(--bg);border-radius:0 10px 10px 0}
.md hr{border:none;border-top:2px dashed #ffb8cd;margin:10px 0}
.md .mtbl{overflow-x:auto;margin:6px 0 8px}
.md table{border-collapse:collapse;font-size:.9em}.md th,.md td{border:1.5px solid #ffc6d7;padding:4px 8px;text-align:left;vertical-align:top}.md th{background:var(--soft)}
.msg.md.typing::after{display:none}.msg.md.typing>:last-child::after{content:"▍";color:var(--pink);animation:blink2 .8s infinite}

/* ===================== authpage-v1 + mobile QA fixes (2026-10-22) ===================== */
html,body{overflow:hidden;overscroll-behavior:none}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* the app shell follows the *visual* viewport (iOS keyboard) — --vvh/--kb are set by app.js */
.app{height:var(--vvh,100dvh);padding-bottom:max(env(safe-area-inset-bottom),0px)}
body.kb .app{padding-bottom:0}
.top{padding-top:max(12px,env(safe-area-inset-top))}
.chat,.grid,.today,.sres,.clist,.asheet .av,.rbody,.gate{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Caveat has tall ascenders: line-height 1 made wrapped headings overlap each other */
h1{line-height:1.1}
.card h2,.sheet h2,.gcard h2{line-height:1.15}.dhead h2{line-height:1.1}.lbl{line-height:1.2}
.tab{line-height:1.25;min-height:40px;white-space:nowrap}
.ttl h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub{line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg{line-height:1.45}
/* chat input: one line by default, placeholder never wraps under the box, grows up to 5 lines */
.bar{align-items:flex-end;padding-bottom:10px}
.bar textarea{display:block;box-sizing:border-box;height:46px;min-height:46px;line-height:22px;padding:9.5px 14px;min-width:0;overflow-y:hidden;white-space:pre-wrap}
.bar textarea.grown{overflow-y:auto}
.bar textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9A7F8B;opacity:1}
.bar button{width:46px;height:46px}
/* tap targets ≥ 44px, 16px inputs (no iOS zoom) */
.cbtn{width:44px;height:44px;font-size:20px}
.ctitle{min-height:44px}
.eye{width:44px;height:44px;right:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:0;margin-top:2px}
.ced,.cdel{min-width:40px;min-height:44px}.dx{width:44px;height:44px;font-size:20px}
.alink{min-height:44px;padding:10px 12px}
.preview button{width:44px;height:44px}
.asklink{min-height:44px}
.fchips button{min-height:38px}.chips button{min-height:38px}
.prof input,.prof select,.cren{font-size:16px}
.prof input,.prof select{padding:10px 12px;min-height:44px}
.save,.sgo{min-height:44px}
.del{min-height:44px;padding:8px 12px}
.avatar{width:46px;height:46px}
/* ---- bottom sheets: spring in, swipe-down to dismiss (app.js), backdrop fades, no scroll bleed ---- */
.sheet-bg{opacity:0;transition:opacity .25s ease;touch-action:none}.sheet-bg.on{opacity:1}
.sheet{bottom:-40px;max-height:calc(var(--vvh,100dvh) * .88 + 40px);padding-bottom:calc(54px + env(safe-area-inset-bottom));transition:transform .42s cubic-bezier(.2,1.18,.4,1);will-change:transform;overscroll-behavior:contain}
body.kb .sheet{bottom:calc(var(--kb,0px) - 40px);padding-bottom:50px}
.sheet:not(.up){transition-timing-function:cubic-bezier(.4,0,.8,.6);transition-duration:.24s}
.sheet.drag{transition:none}
.grab{position:relative;width:56px;height:6px;margin:4px auto 10px;cursor:grab;touch-action:none}
.grab::before{content:"";position:absolute;left:-60px;right:-60px;top:-14px;bottom:-14px}
.drawer{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom));transition:transform .3s cubic-bezier(.2,1.1,.4,1)}
.drawer.drag{transition:none}
.drawer-bg{opacity:0;transition:opacity .2s}.drawer-bg.on{opacity:1}
.toast{bottom:calc(96px + env(safe-area-inset-bottom) + var(--kb,0px));max-width:calc(100vw - 32px);text-align:center;z-index:60;line-height:1.35}
.updtoast{max-width:calc(100vw - 24px);white-space:normal;text-align:center}
@media (prefers-reduced-motion:reduce){.sheet,.drawer,.gate{transition-duration:.01s!important}}
/* ---- auth page ---- */
body.gated>*:not(.gate):not(.doodles):not(.toast):not(script){display:none!important}
.gate{position:fixed;left:0;right:0;top:0;bottom:var(--kb,0px);z-index:40;overflow-y:auto;display:flex;justify-content:center;
 padding:max(14px,env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));transition:opacity .26s ease,transform .26s ease}
.gate[hidden]{display:none}.gate.leaving{opacity:0;transform:scale(1.03)}
.gwrap{width:100%;max-width:420px;margin:auto 0;display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.ghero{text-align:center}
.gmascot{width:118px;height:118px;margin:0 auto -2px;cursor:pointer}.gmascot svg{width:100%;height:100%;overflow:visible;display:block}
.gmascot .hm-eye{animation:hmBlink 4.6s infinite}
.gmascot.shy .hm-eye{animation:none;transform:scaleY(.08)}
.gmascot.shy .hm-al{animation:none;transform:rotate(-55deg) translate(4px,-6px)}.gmascot.shy .hm-ar{animation:none;transform:rotate(55deg) translate(-4px,-6px)}
.gmascot.oops{animation:gShake .45s ease}@keyframes gShake{20%,60%{transform:translateX(-6px) rotate(-3deg)}40%,80%{transform:translateX(6px) rotate(3deg)}}
.glogo{font-size:44px;line-height:1.1;margin:0}
.gsub{margin:2px 0 0;font-size:14px;opacity:.75}
.goff{margin:0;text-align:center;font-size:14px;font-weight:600;background:#FFF1D6;border:2px dashed #F4B860;border-radius:14px;padding:8px 12px}.goff[hidden]{display:none}
.gcard{background:#fff;border:3px solid var(--ink);border-radius:30px 24px 32px 22px;box-shadow:5px 5px 0 var(--ink);padding:16px 18px 18px;animation:in .3s ease-out}
.gv{display:flex;flex-direction:column}.gv[hidden],.gcard .aform[hidden]{display:none}
.gcard h2{font:700 30px/1.15 Caveat,cursive;color:var(--pink);margin:2px 0 10px}
.gcard .seg{margin-top:0}.gcard .seg button{min-height:44px;font-size:22px}
.gcard .aform input{min-height:48px;background:var(--bg)}
.gcard .abtn{min-height:50px;margin-top:6px}
.abtn.busy{position:relative;color:transparent!important}
.abtn.busy::after{content:"💗";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:20px;animation:dot 0.8s infinite}
.gcard .fine{opacity:.8}
.gload{display:flex;justify-content:center;gap:6px;margin:18px 0}.gload i{width:10px;height:10px;border-radius:50%;background:var(--pink);animation:dot 1s infinite}.gload i:nth-child(2){animation-delay:.15s}.gload i:nth-child(3){animation-delay:.3s}
#g-sent h2,#g-done h2,#g-verify h2{text-align:center}#g-sent .fine,#g-done .fine{font-size:15px}
.vto{font-size:15px;margin:0 0 6px}.vto b{word-break:break-all;opacity:1}
.otp{display:flex;gap:6px;justify-content:center;align-items:center;margin:10px 0 12px}
.otp input{flex:1 1 0;min-width:0;max-width:50px;height:58px;padding:0;text-align:center;font:700 28px/1 Manrope,system-ui,sans-serif;color:var(--ink);background:var(--bg);
 border:2.5px solid var(--ink);border-radius:14px 12px 15px 11px;box-shadow:2px 2px 0 var(--ink);outline:none;caret-color:var(--pink);-webkit-appearance:none;appearance:none}
.otp input:focus{border-color:var(--pink);background:#fff;transform:translateY(-2px)}
.otp input:not(:placeholder-shown),.otp input:valid:not([value=""]){background:#fff}
.odash{flex:none;width:8px;height:3px;border-radius:2px;background:#FFB8CD}
#codeF .err{text-align:center}
#resendB{margin-top:10px;font-size:20px;min-height:48px}#resendB:disabled{opacity:.55}
.vhint{margin:12px 0 0;font-size:13px;line-height:1.45;text-align:center;background:var(--bg);border:2px dashed #FFB8CD;border-radius:14px;padding:8px 10px}
.vchg{margin-top:12px}
.vlinks{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:4px}.vlinks .alink{margin-top:4px}
@media (max-height:700px){.gmascot{width:88px;height:88px}.glogo{font-size:38px}.gcard{padding:12px 14px 14px}.gwrap{gap:6px}}
@media (max-width:370px){.otp{gap:4px}.otp input{height:52px;font-size:24px}}
#codeF,#chgF{display:flex;flex-direction:column}.gcard .abtn{align-self:stretch}
/* small chips keep their look but get a ≥44px invisible hit area */
.pchip,.pchips2 button,.rchip,.cmp-btn,.fchips button,.chips button,.rquick button{position:relative}
.pchip::after,.pchips2 button::after,.rchip::after,.cmp-btn::after{content:"";position:absolute;left:-3px;right:-3px;top:-8px;bottom:-8px}
.rsw{min-height:44px}
#pchips{margin-bottom:8px;min-height:0}#sres .lbl{margin-top:10px}
/* ---- shelf-scroll-v1: on short phones the sheet body scrolls; grab handle pinned, last action sticky above the safe area ---- */
.sheet{max-height:calc(min(var(--vvh,100dvh) * .92, var(--vvh,100dvh) - env(safe-area-inset-top) - 14px) + 40px)}
.sheet>.grab{flex:none}
#sv-item,#sv-open{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;margin:0 -14px;padding:0 14px 2px}
#sv-search{overflow:hidden}#sv-search .sres{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#sv-item .del{position:sticky;bottom:0;align-self:stretch;flex:none;margin-top:12px;background:var(--bg);box-shadow:0 -12px 12px -4px var(--bg);z-index:1}
#sv-item>*{flex:none}

/* ---- ask-friend-v1: «Посоветоваться с подругой» in the shelf item view */
#sv-item .iact{position:sticky;bottom:0;flex:none;display:flex;flex-direction:column;align-items:stretch;margin-top:12px;padding:8px 0 calc(4px + env(safe-area-inset-bottom));background:var(--bg);box-shadow:0 -12px 12px -4px var(--bg);z-index:1}
#sv-item .iact .del{position:static;margin:4px 0 0;align-self:center;box-shadow:none;background:none}
.askf{min-height:50px;border:2.5px solid var(--ink);border-radius:18px;background:var(--pink);color:#fff;font:800 16px Manrope,sans-serif;box-shadow:3px 3px 0 var(--ink);cursor:pointer;text-shadow:0 1px 0 rgba(91,58,72,.35)}
.askf:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ---- shelf-sections-v1 */
.ssec{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:10px 2px -2px;font:700 21px/1.1 Caveat,'Comic Sans MS',cursive;color:var(--ink)}
.ssec:first-child{margin-top:2px}
.ssec .n{font:700 12px Manrope,sans-serif;background:var(--soft);border:1.5px solid var(--ink);border-radius:10px;padding:1px 8px}
.ssec::after{content:'';flex:1;border-bottom:2px dashed var(--pink);opacity:.6;order:2}
.ssec .ssbtn{order:3;font:700 13px Manrope,sans-serif;color:#fff;background:var(--pink);border:2px solid var(--ink);border-radius:14px;padding:4px 10px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.shint{grid-column:1/-1;font:13px Manrope,sans-serif;color:#9A7486;border:2px dashed #F5C2D3;border-radius:14px;padding:8px 12px;background:#fff8}
.s-wish~.pc,.s-cmp~.pc{}
.pc.sel{outline:3px solid var(--pink);outline-offset:2px;transform:translateY(-2px)}
.pc .selmark{position:absolute;top:-8px;left:-6px;width:22px;height:22px;display:grid;place-items:center;background:var(--pink);color:#fff;border:2px solid var(--ink);border-radius:50%;font:800 12px Manrope,sans-serif}
#cmpbar{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:#fff;border:2.5px solid var(--ink);border-radius:20px;box-shadow:3px 3px 0 var(--ink);padding:10px 12px}
#cmpbar>span{flex:1 1 100%;font:600 13px Manrope,sans-serif;color:var(--ink)}
#cmpbar .askf{flex:1;min-height:44px;font-size:15px}#cmpbar .askf[disabled]{opacity:.5}
#cmpbar .del{margin:0}
body.selmode #addbig{visibility:hidden}
.imove{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.imove button{flex:1 1 40%;min-height:42px;font:700 14px Manrope,sans-serif;color:var(--ink);background:var(--soft);border:2px solid var(--ink);border-radius:14px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
/* ---- desktop-compact-v1: shelf buttons from this round, compact on wide screens (phone layout unchanged) */
@media (min-width:768px) and (hover:hover){
 #cmpbar{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100vw - 32px));flex-wrap:nowrap;gap:12px;padding:8px 10px 8px 16px;border-radius:18px}
 #cmpbar>span{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #cmpbar .askf{flex:none;min-height:38px;padding:0 16px;font-size:14px;border-radius:14px;box-shadow:2px 2px 0 var(--ink)}
 #cmpbar .del{min-height:36px;padding:4px 6px;font-size:13px}
 .ssec .ssbtn{font-size:12px;padding:3px 10px;margin-left:2px}
 #sv-item .iact{align-items:center}
 #sv-item .iact .askf{min-height:40px;padding:0 22px;font-size:15px;border-radius:15px}
 #sv-item .iact .del{min-height:32px;font-size:13px}
 .imove{gap:6px}
 .imove button{flex:0 0 auto;min-height:36px;padding:0 14px;font-size:13px;border-radius:12px}
 #sv-open .obtns button{flex:1 1 30%;min-height:38px;padding:6px 8px;font-size:13px}
}
/* ---- wish-buy-v1 */
.pc .buyic{position:absolute;top:6px;right:6px;z-index:2;width:30px;height:30px;display:grid;place-items:center;font-size:16px;background:#fff;border:2px solid var(--ink);border-radius:50%;box-shadow:1.5px 1.5px 0 var(--ink);cursor:pointer}
.ibuy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 2px}
.ibuy .ga{flex:1 1 100%;display:flex;align-items:center;justify-content:center;text-decoration:none;min-height:48px}
.ibuy .mp{flex:1 1 100%;display:flex;gap:8px}
.ibuy .mp a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;font:700 14px Manrope,sans-serif;color:var(--ink);text-decoration:none;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:2px 2px 0 var(--ink)}
.ibuy a:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media (min-width:768px) and (hover:hover){
 .ibuy{gap:6px}.ibuy .ga{flex:0 0 auto;min-height:40px;padding:0 20px;font-size:15px;border-radius:15px}
 .ibuy .mp{flex:0 0 auto;gap:6px}.ibuy .mp a{flex:0 0 auto;min-height:36px;padding:0 16px;font-size:13px;border-radius:12px}
 .pc .buyic{width:26px;height:26px;font-size:14px}
}
/* ---- profile-heart-v1: red doodle heart avatar + name caption */
.avatar,.avatar.in{width:auto;height:auto;min-width:50px;min-height:48px;padding:0 0 1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:none;border:0;border-radius:0;box-shadow:none;color:#fff}
.avatar:active{transform:none;box-shadow:none}
.avatar .hrt{position:relative;display:block;width:50px;height:44px;transform-origin:50% 55%}
.avatar .hrt svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.avatar #avatarIc,.avatar.in #avatarIc{position:absolute;left:0;right:4px;top:9px;text-align:center;font:700 25px/1 Caveat,cursive;color:#fff;text-shadow:1px 1.5px 0 rgba(91,58,72,.5)}
.avatar:not(.in) #avatarIc{font:17px/1 sans-serif;top:12px}
.avatar small{display:block;max-width:66px;margin-top:-1px;font:800 11px/1.15 Manrope,sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar small[hidden]{display:none}
.avatar.warn::after{top:0;right:2px}
@keyframes avbeat{0%,100%{transform:scale(1)}25%{transform:scale(1.13)}45%{transform:scale(.97)}65%{transform:scale(1.08)}}
.avatar .hrt.beat{animation:avbeat .55s ease-out}
@media (hover:hover){.avatar:hover .hrt{animation:avbeat .55s ease-out}}
@media (prefers-reduced-motion:reduce){.avatar .hrt.beat,.avatar:hover .hrt{animation:none}}
/* ---- profile-heart-v2: no initial, Caveat caption, one centered column; caption never shifts the heart */
.avatar,.avatar.in{width:56px;min-width:56px;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.avatar.in #avatarIc{display:none}
.avatar small{flex:none;width:max-content;max-width:76px;margin:0;font:700 15px/1 Caveat,cursive;color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- profile-heart-v3: Caveat descenders/ascenders were clipped by line-height:1 + overflow:hidden (ellipsis box) */
.avatar small{line-height:1.35;padding:1px 3px 3px;margin-top:-3px}
/* ---- gadgets-v1 */
.kkind{display:flex;gap:8px;margin:0 0 10px}
.kkind button{flex:1;min-height:40px;font:700 14px Manrope,sans-serif;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.kkind button.on{background:var(--pink);color:#fff}
.badge.s-gadget{background:#C2A6FF;color:#fff}
.gattrs{margin:10px 0 4px;padding:10px 12px;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:2px 2px 0 var(--ink)}
.gattrs .grow{display:flex;gap:10px;justify-content:space-between;padding:4px 0;font:600 13px/1.3 Manrope,sans-serif;color:var(--ink);border-bottom:1px dashed var(--soft)}
.gattrs .grow:last-child{border:0}.gattrs .grow b{flex:none;color:#8C5A6E}.gattrs .grow span{text-align:right}
.gform{display:flex;flex-direction:column;gap:8px;margin:10px 0;padding:10px 12px;background:#fff;border:2px dashed var(--pink);border-radius:16px}
.gform label{display:flex;flex-direction:column;gap:4px;font:700 12px Manrope,sans-serif;color:var(--ink)}
.gform input,.gform select{min-height:44px;padding:8px 10px;font:600 16px Manrope,sans-serif;border:2px solid var(--ink);border-radius:12px;background:var(--bg)}
.gform[hidden]{display:none}
@media (min-width:768px) and (hover:hover){.kkind button{min-height:36px;font-size:13px}.gform input,.gform select{min-height:36px;font-size:14px}}
/* ---- gadget-kb-v1: iPhone keyboard stability + scrollable add-sheet for gadgets */
body.kb .sheet{max-height:calc(min(var(--vvh-s,var(--vvh,100dvh)) * .94, var(--vvh-s,var(--vvh,100dvh)) - env(safe-area-inset-top) - 8px) + 40px)}
#sv-search{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;margin:0 -14px;padding:0 14px 6px}
#sv-search>*{flex:none}
#sv-search .sres{flex:1 0 auto;overflow-y:visible;min-height:64px}
#sv-search .asklink{margin-top:auto;padding-top:6px}
/* ---- trends-drops-v1: 5 navigation tabs + Seasonal Trends accordions + Weekly Fresh Drops ---- */
.tabs{flex-wrap:wrap;gap:6px;padding:0 2px 6px}
.tab{flex:1 1 28%;min-width:96px;font:700 18px/1.15 Caveat,cursive;padding:5px 8px;white-space:nowrap;text-align:center}
.tab[data-tab="trends"],.tab[data-tab="drops"]{flex:1 1 44%}
@media (min-width:520px){
 .tabs{flex-wrap:wrap;gap:7px}
 .tab{font-size:19px;padding:5px 10px}
}
.feedv{flex:1;min-height:0;overflow-y:auto;padding:6px 4px 24px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.feedv[hidden]{display:none}
.fhero{background:linear-gradient(135deg,#fff 0%,var(--soft) 100%);border:2.5px solid var(--ink);border-radius:20px 16px 22px 14px/16px 22px 14px 20px;box-shadow:3px 3px 0 var(--ink);padding:12px 14px}
.fhero-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fhero h2{font:700 27px/1.05 Caveat,cursive;margin:0;color:var(--ink)}
.fexp-all{font:700 12px Manrope,sans-serif;color:var(--ink);background:#fff;border:1.8px solid var(--ink);border-radius:10px;padding:3px 9px;box-shadow:1.5px 1.5px 0 var(--ink);cursor:pointer}
.fexp-all:active{transform:translate(1px,1px);box-shadow:none}
.tacc-list,.dlist{display:flex;flex-direction:column;gap:10px}
.tacc{background:#fff;border:2.5px solid var(--ink);border-radius:18px 15px 20px 14px;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.tacc-hd{width:100%;display:flex;align-items:center;gap:8px;padding:11px 13px;background:#fff;border:0;font:700 16px/1.2 Manrope,sans-serif;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tacc.open .tacc-hd{background:var(--soft);border-bottom:2px dashed #FFB8CD}
.tacc-ic{font-size:20px;flex:none}
.tacc-ttl{flex:1;min-width:0;font:700 22px/1.05 Caveat,cursive;color:var(--ink)}
.tacc-chv{font-size:15px;transition:transform .2s ease;flex:none;color:var(--ink)}
.tacc.open .tacc-chv{transform:rotate(180deg)}
.tacc-bd{padding:10px 10px 12px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.tacc-bd[hidden]{display:none}
.tcard,.dcard{background:#fff;border:2px solid var(--ink);border-radius:16px 14px 18px 12px;box-shadow:2px 2px 0 var(--ink);padding:11px 12px;display:flex;flex-direction:column;gap:7px}
.tcard-top{display:flex;align-items:flex-start;gap:8px}
.trank,.drank{flex:none;font:700 13px/1 Manrope,sans-serif;background:var(--pink);color:#fff;border:1.8px solid var(--ink);border-radius:10px;padding:4px 7px;box-shadow:1.5px 1.5px 0 var(--ink)}
.ttitle,.dname{margin:0;font:700 15px/1.3 Manrope,sans-serif;color:var(--ink)}
.tcard-img,.dcard-img{position:relative;display:block;width:100%;padding:0;margin:2px 0;background:var(--soft);border:2px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:2px 2px 0 var(--ink);cursor:zoom-in}
.tcard-img[hidden],.dcard-img[hidden]{display:none}
.dcard-img{background:#fff}
.dcard-img img{display:block;width:100%;height:190px;object-fit:contain;background:#fff;padding:6px}
.tcard-img img{display:block;width:100%;height:190px;object-fit:cover;background:#f9e6ee}
@media (min-width:480px){.tcard-img img{height:220px}}
.tzoom{position:absolute;right:8px;bottom:8px;background:rgba(91,58,72,.82);color:#fff;font:600 11px/1 Manrope,sans-serif;padding:5px 8px;border-radius:99px;pointer-events:none}
.tsum,.dsum{margin:0;font:400 13.5px/1.45 Manrope,sans-serif;color:var(--ink)}
.tex{font:500 12.5px/1.35 Manrope,sans-serif;color:var(--ink);background:var(--bg);border:1.5px dashed #FFB8CD;border-radius:11px;padding:7px 9px}
.tex b{color:#C23B63}
.tcard-acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:2px}
.taskbtn,.dwishbtn{font:700 12.5px/1.1 Manrope,sans-serif;color:var(--ink);background:var(--peach);border:1.8px solid var(--ink);border-radius:12px;padding:7px 10px;box-shadow:1.5px 1.5px 0 var(--ink);cursor:pointer}
.dwishbtn{background:var(--soft)}
.dwishbtn[disabled]{opacity:.75;cursor:default}
.taskbtn:active,.dwishbtn:active{transform:translate(1.5px,1.5px);box-shadow:none}
.tsrc{margin-left:auto;font:700 12px/1.2 Manrope,sans-serif;color:#C23B63;text-decoration:none;padding:4px 2px}
.tsrc:hover{text-decoration:underline}
.dcard-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ddate,.dcat,.dprc{font:700 11.5px/1.1 Manrope,sans-serif;padding:4px 8px;border-radius:99px;border:1.5px solid var(--ink)}
.ddate{background:var(--soft);color:var(--ink)}
.dcat{background:#fff;color:#8C5A6E}
.dprc{background:#FFE9B8;color:var(--ink)}
.dbrand{font:800 12px/1.1 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#C23B63;margin-top:1px}
.zmodal{position:fixed;inset:0;z-index:60;background:rgba(45,24,34,.78);display:grid;place-items:center;padding:16px}
.zmodal[hidden]{display:none}
.zbox{position:relative;max-width:min(480px,94vw);background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:4px 4px 0 var(--ink);padding:10px;display:flex;flex-direction:column;gap:8px}
.zbox img{width:100%;max-height:72dvh;object-fit:contain;border-radius:12px;border:2px solid var(--ink);background:var(--bg)}
.zcap{margin:0;font:700 14px/1.3 Manrope,sans-serif;color:var(--ink);text-align:center;padding:0 6px 2px}
.zx{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:#fff;color:var(--ink);font:700 16px/1 sans-serif;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
/* ---- shelf-search-v2: 2-tab catalog/exact search + «Поискать по точному названию» button ---- */
.stabs{display:flex;gap:6px;margin:2px 0 10px;padding:3px;background:var(--soft);border:2px solid var(--ink);border-radius:15px;box-shadow:2px 2px 0 var(--ink)}
.stabs button{flex:1;min-height:36px;padding:5px 8px;display:flex;align-items:center;justify-content:center;gap:5px;font:700 13px/1.15 Manrope,sans-serif;color:var(--ink);background:transparent;border:1.5px solid transparent;border-radius:11px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stabs button.on{background:var(--pink);color:#fff;border-color:var(--ink);box-shadow:1.5px 1.5px 0 var(--ink)}
.stcnt{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;font:800 11px/1 Manrope,sans-serif;background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.stabs button:not(.on) .stcnt{background:rgba(255,255,255,.75)}
@keyframes stpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.75}}
.stcnt.pulse{animation:stpulse 1s infinite ease-in-out}
.exact-btn{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin:10px 0 4px;padding:11px 14px;background:linear-gradient(135deg,#FFF5F8 0%,#FFE3EC 100%);color:var(--ink);border:2.5px solid var(--ink);border-radius:18px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;text-align:center}
.exact-btn.hero{background:var(--pink);color:#fff}
.exact-btn .eb-top{font:800 15px/1.2 Manrope,sans-serif}
.exact-btn.hero .eb-top{text-shadow:0 1px 0 rgba(91,58,72,.35)}
.exact-btn .eb-sub{font:600 12px/1.25 Manrope,sans-serif;opacity:.88}
.exact-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.cat-empty{margin:6px 0;padding:14px 12px;background:#fff;border:2px dashed #F5B5C8;border-radius:18px;text-align:center}
.cat-empty-ttl{margin:0 0 4px;font:800 15px/1.25 Manrope,sans-serif;color:var(--ink)}
.cat-empty-sub{margin:0 0 8px;font:600 13px/1.35 Manrope,sans-serif;color:#8C5A6E}
/* ---- shelf-add-v3: Mechanic 1 (unified search), Mechanic 2 (target section + 1-click add), Mechanic 4 (batch add) ---- */
.ssec .sadd{order:4;width:28px;height:28px;display:inline-grid;place-items:center;padding:0;font:800 16px/1 Manrope,sans-serif;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:1.5px 1.5px 0 var(--ink);cursor:pointer;flex:none}
.ssec .sadd:active,.shint-add:active{transform:translate(1.5px,1.5px);box-shadow:none}
.shint{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.shint>span{flex:1 1 180px}
.shint-add{flex:none;font:700 12.5px/1.1 Manrope,sans-serif;color:var(--ink);background:#fff;border:1.8px solid var(--ink);border-radius:11px;padding:6px 10px;box-shadow:1.5px 1.5px 0 var(--ink);cursor:pointer}
.tsec-wrap{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.tsec-lbl{flex:none;font:800 12px/1.1 Manrope,sans-serif;color:#8C5A6E}
.tsec{flex:1;display:flex;gap:5px;overflow-x:auto;padding:2px 1px 4px;scrollbar-width:none}
.tsec::-webkit-scrollbar{display:none}
.tsec button{flex:1 0 auto;min-height:32px;padding:4px 9px;font:700 12px/1.1 Manrope,sans-serif;color:var(--ink);background:#fff;border:1.8px solid var(--ink);border-radius:99px;box-shadow:1.5px 1.5px 0 var(--ink);cursor:pointer;white-space:nowrap}
.tsec button.on{background:var(--peach);color:var(--ink);border-width:2px;box-shadow:2px 2px 0 var(--ink)}
.kkind button{font-size:13px;padding:0 6px;white-space:nowrap}
.deep-hint-btn{width:100%;display:block;margin:8px 0 4px;padding:10px 12px;background:var(--soft);color:var(--ink);border:2px dashed var(--ink);border-radius:14px;font:700 13px/1.3 Manrope,sans-serif;text-align:center;cursor:pointer}
.deep-hint-btn:active{transform:translate(1px,1px)}
.rc.chosen{background:#FFF0F5;border-color:var(--pink)}
.rc.chosen .plus{background:var(--pink);color:#fff}
.bform{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
.bform[hidden],.sform[hidden]{display:none}
.bform textarea{width:100%;min-height:78px;padding:10px 12px;font:600 14px/1.35 Manrope,sans-serif;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:inset 0 1px 2px rgba(91,58,72,.08);resize:vertical}
.bform .bgo{width:100%;min-height:44px}
.batch-list{display:flex;flex-direction:column;gap:7px;margin:4px 0 10px}
.bcard{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;user-select:none}
.bcard.on{background:#FFF8FA}
.bcard:not(.on){opacity:.62;box-shadow:none}
.bcard .bchk{width:20px;height:20px;accent-color:var(--pink);flex:none;cursor:pointer}
.bcard .ph{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--bg);border:1.8px solid var(--ink);border-radius:12px;overflow:hidden}
.bcard .ph img,.bcard .ph svg{width:34px;height:34px;object-fit:contain}
.bcard .binfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bcard .binfo b{font:800 13.5px/1.2 Manrope,sans-serif;color:var(--ink)}
.bcard .binfo small{font:600 11.5px/1.2 Manrope,sans-serif;color:#8C5A6E}
.bcard .binfo em{font:500 11.5px/1.25 Manrope,sans-serif;color:var(--ink);font-style:normal;opacity:.85}
.batch-add-btn{width:100%;margin:4px 0 6px;padding:10px 14px;font-size:14.5px}
.batch-add-btn[disabled]{opacity:.5;cursor:default}