:root{--nav-b:max(22px,calc(env(safe-area-inset-bottom) - 12px));--nav-h:64px;--nav-top:calc(var(--nav-b) + var(--nav-h));--bg:#F7F6F2;--card:#fff;--ink:#2b2118;--muted:#8a7a6b;--accent:#e4572e;--green:#2a9d5c;--red:#d64045;--gold:#f2a541;--line:#efe3d6;--chip:#f6ebdf;--shadow:0 8px 24px rgba(60,30,10,.15)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body{overscroll-behavior:none}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;background:var(--bg)}
header h1{font-size:20px;margin:0;letter-spacing:-.5px}
header h1 span{color:var(--accent)}
header .wk{font-size:13px;color:var(--muted);margin-left:auto;text-align:right}
.pill{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--chip);color:var(--ink);border:0}
.pill.on{background:#ffe1d6;color:var(--accent);font-weight:600}
main{padding:0 14px calc(var(--nav-top) + 18px);max-width:560px;margin:0 auto}
.view{display:none}.view.active{display:block}
.seg{display:flex;background:var(--chip);border-radius:12px;padding:3px;margin:4px 0 8px}
.seg button{flex:1;border:0;background:none;padding:8px;border-radius:9px;font-weight:600;color:var(--muted);font-size:14px}
.seg button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{font-size:12px;padding:4px 10px;border-radius:99px;background:var(--chip);border:1px solid transparent;color:var(--ink)}
.chip.full{background:#dff3e7;color:var(--green)}
.chip.need{border-color:var(--accent);color:var(--accent);background:#fff}
button.chip.sel{background:var(--accent);color:#fff}
.stack{position:relative;height:clamp(260px,calc(100vh - 340px - env(safe-area-inset-top)),520px);height:clamp(260px,calc(100svh - 340px - env(safe-area-inset-top)),520px);margin:6px 0 10px;touch-action:none}
.card{position:absolute;inset:0;background:var(--card);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;user-select:none;will-change:transform;transition:transform .25s ease}
.card.dragging{transition:none}
.card.behind{transform:scale(.95) translateY(10px);filter:brightness(.97)}
.card .img{flex:1;background:#eadccd center/cover no-repeat;position:relative;min-height:0}
.card .img::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.card h2{position:absolute;left:16px;right:56px;bottom:12px;margin:0;color:#fff;font-size:23px;line-height:1.15;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.card .meta{padding:10px 14px 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px}
.card .meta .stars{color:var(--gold);font-weight:700}
.badge{position:absolute;z-index:3;font-size:12px;font-weight:700;padding:5px 9px;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.badge.price{top:12px;left:12px;background:#ffd84d;color:#3b2a00;max-width:65%}
.badge.fav{top:12px;right:12px;color:var(--accent)}
.badge.partner{top:46px;right:12px;background:var(--green);color:#fff}
.stamp{position:absolute;top:40px;z-index:4;font-size:30px;font-weight:900;padding:4px 14px;border:4px solid;border-radius:10px;opacity:0;transform:rotate(-12deg)}
.stamp.yes{left:20px;color:var(--green);border-color:var(--green)}
.stamp.no{right:20px;color:var(--red);border-color:var(--red);transform:rotate(12deg)}
.stamp.like{left:50%;top:auto;bottom:90px;transform:translateX(-50%);color:var(--accent);border-color:var(--accent)}
.info-btn{position:absolute;right:12px;bottom:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-weight:800;font-size:16px}
.actions{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:4px}
.actions button{border:0;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;font-size:28px}
.actions .no{width:66px;height:66px;color:var(--red)}
.actions .yes{width:66px;height:66px;color:var(--green)}
.actions .like{width:54px;height:54px;color:var(--accent);font-size:24px}
.actions .undo{width:42px;height:42px;font-size:18px;color:var(--muted)}
.actions button:active{transform:scale(.92)}
.empty{text-align:center;padding:40px 16px;color:var(--muted)}
.empty .big{font-size:48px}
.btn{display:inline-block;border:0;border-radius:12px;padding:11px 16px;font-weight:700;font-size:15px;background:var(--accent);color:#fff;text-decoration:none}
.btn.ghost{background:var(--chip);color:var(--ink)}
.btn.small{padding:6px 10px;font-size:13px;border-radius:9px}
.btn.block{display:block;width:100%;margin:8px 0}
.list{background:#fff;border-radius:16px;box-shadow:0 2px 10px rgba(60,30,10,.06);overflow:hidden;margin:8px 0 16px}
.row{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row img{width:58px;height:58px;border-radius:10px;object-fit:cover;background:#eee;flex:none}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:12px;color:var(--muted)}
.step{display:flex;align-items:center;gap:4px}
.step button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:17px;line-height:1}
.step span{min-width:22px;text-align:center;font-weight:700}
h3{margin:18px 0 6px;font-size:16px}
.muted{color:var(--muted);font-size:13px}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(30,15,5,.55);display:none;align-items:flex-end;justify-content:center}
.overlay.show{display:flex}
.sheet{background:#fff;width:100%;max-width:560px;max-height:85vh;overflow:auto;overflow-x:hidden;border-radius:20px 20px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));touch-action:pan-y;transition:transform .25s ease,opacity .25s ease;will-change:transform}
.sheet.dragging{transition:none;touch-action:none;-webkit-user-select:none;user-select:none}
.sheet img,.sheet a{-webkit-user-drag:none}
.sheet a,.sheet button{-webkit-touch-callout:none}
.sheet h2{margin:0 0 6px;font-size:20px;padding-right:48px}
.sheet ul{padding-left:18px;margin:6px 0}
.sheet-x{position:sticky;top:8px;float:right;z-index:6;width:40px;height:40px;margin:-4px -6px 4px 8px;border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 1px 8px rgba(40,20,5,.14);font-size:28px;line-height:1;font-weight:400;color:#666;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.sheet-x:active{background:#f0e8df;color:#222}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-top) + 14px);transform:translateX(-50%);background:#2b2118;color:#fff;padding:9px 14px;border-radius:12px;font-size:14px;z-index:70;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90%}
.toast.show{opacity:1}
.progress{height:8px;background:var(--chip);border-radius:9px;overflow:hidden;margin:8px 0}
.progress div{height:100%;background:var(--accent);transition:width .3s}
.tag{font-size:11px;background:#ffd84d;color:#3b2a00;padding:1px 6px;border-radius:6px;font-weight:700;white-space:nowrap}
.warn{font-size:11px;background:#ffe0e0;color:#8a1c1c;padding:1px 6px;border-radius:6px}
.rule{font-size:11px;color:#17663b;font-weight:700}
label.field{display:block;margin:12px 0}
label.field span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
input[type=number],input[type=text],input[type=password],input[type=search],select{width:100%;padding:11px;border-radius:11px;border:1px solid var(--line);font-size:16px;background:#fff}
input[type=range]{width:100%}
.switch{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:14px;padding:12px 14px;margin:8px 0;box-shadow:0 2px 10px rgba(60,30,10,.06)}
.switch input{width:48px;height:28px;accent-color:var(--accent)}
.shop .row{align-items:flex-start}
.shop input[type=checkbox]{width:22px;height:22px;margin-top:2px;accent-color:var(--green)}
.shop .done .t{text-decoration:line-through;color:var(--muted)}
pre.md{white-space:pre-wrap;font-size:12px;background:#fff;padding:10px;border-radius:12px;max-height:50vh;overflow:auto}
.login{max-width:380px;margin:12vh auto 0;padding:0 20px;text-align:center}
.login .logo{width:96px;height:96px;border-radius:24px}
.users{display:flex;gap:10px;justify-content:center;margin:16px 0}
.users button{flex:1;padding:14px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:700;font-size:16px}
.users button.sel{border-color:var(--accent);color:var(--accent)}
.err{color:var(--red);min-height:20px;font-size:14px}

/* pantry list (v4) */
.phelp{font-size:13px;margin:-4px 0 8px}
.plist{margin:0 -14px}
.psec{position:relative}
.psech{position:sticky;top:var(--hdr,52px);z-index:3;margin:0;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--line);font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink)}
.psech small{color:var(--muted);font-weight:500;margin-left:4px}
.prow{display:flex;align-items:center;gap:12px;padding:11px 8px 11px 16px;background:#fff;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:background .15s}
.prow:active{background:#fbf3ea}
.pchk{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid #d9c9b8;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff}
.pmain{flex:1;min-width:0}
.pname{font-size:16px;font-weight:650;line-height:1.25}
.pamt{color:var(--accent);font-weight:700;font-size:14px;white-space:nowrap}
.pdish{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phint{background:#fde6dc;color:#9a3412;font-weight:600;padding:0 6px;border-radius:99px}
.pmore{flex:none;border:0;background:none;font-size:22px;line-height:1;color:var(--muted);padding:6px 10px;border-radius:10px}
.pmore:active{background:var(--chip)}
.prow.skip{background:#f4f4f4}
.prow.skip .pchk{background:#bbb;border-color:#bbb}
.prow.skip .plabel,.prow.skip .pamt{text-decoration:line-through;color:#aaa}
.prow.skip .pname{color:#aaa}
.prow.anyway .pchk{border-color:var(--gold);background:#fff6e0}
.pbadge{font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;vertical-align:2px;white-space:nowrap}
.pbadge.anyway{background:#fff1cc;color:#7a5600}
.pbadge.skip{background:#e6e6e6;color:#555;text-decoration:none}
.pfoot{position:sticky;bottom:calc(var(--nav-top) + 12px);z-index:4;margin:0 -14px;padding:6px 14px 0;background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -6px 14px rgba(60,30,10,.06);text-align:center}
.pfoot .btn.block{margin:4px 0 0}
.pfoot .muted{display:block;font-size:12px;margin-bottom:4px}
.pmenu{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.pmenu button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px 14px;text-align:left;font-size:16px}
.pmenu button small{display:block;color:var(--muted);font-size:12px;margin-left:24px}
.pmenu button.sel{border-color:var(--accent);background:#fff1ea}
.pmenu button.ghost{color:var(--muted)}
.srcb{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:1px 6px;border-radius:6px;vertical-align:1px;background:#e30613;color:#fff}
.srcb.koket{background:#1f3b2d;color:#f3e9d2}
.small-note{font-size:12px;margin:2px 0 8px}

/* v6: Varför? + matsvinn on cards */
.whyline{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:0 14px 10px;margin-top:-6px;font-size:12.5px;line-height:1.3}
.whyline:empty{display:none}
.whyline .wm{color:#5b4a3a}
.whyline .wn{color:#17663b;font-weight:600}
.why-btn{border:0;background:var(--chip);color:var(--ink);font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;margin-left:auto}
.whyrow{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.whyrow .pts{flex:none;width:44px;text-align:right;font-weight:800;color:var(--green)}
.whyrow .pts.neg{color:var(--red)}
.whyrow.total{border-bottom:0;font-weight:800}
.whyrow.total .pts{color:var(--ink)}
/* week: day select, ratings, waste */
.daysel{width:auto;display:inline-block;padding:2px 22px 2px 6px;font-size:12px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600}
.famr{margin-top:2px}
.famstars{color:var(--gold)}
.wastelist .s{margin-top:3px;font-size:13px;color:var(--ink)}
.wastelist .s .muted{font-size:12px}
.heart{color:var(--accent)}
/* rating overlay */
.rate{position:fixed;inset:0;z-index:55;background:rgba(30,15,5,.6);display:none;align-items:flex-end;justify-content:center}
.rate.show{display:flex;animation:pop .2s ease}
.ratebox{background:#fff;width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom));max-height:96vh;overflow:auto}
.rate-top{display:flex;justify-content:space-between;align-items:center}
.rate-x{border:0;background:none;color:var(--muted);font-size:14px;padding:6px}
.rate-img{height:150px;border-radius:16px;background:#eadccd center/cover no-repeat;margin:6px 0 10px}
.rate-q{margin:0;color:var(--muted);font-size:14px}
.rate-title{margin:2px 0 4px;font-size:21px;line-height:1.2}
.rate-others{margin:0 0 4px}
.rate-stars{display:flex;justify-content:center;gap:6px;margin:10px 0 12px}
.rate-stars button{border:0;background:none;font-size:44px;line-height:1;color:#e6d8c8;padding:0 2px;transition:transform .1s}
.rate-stars button.on{color:var(--gold)}
.rate-stars button:active{transform:scale(1.15)}
.rate-seg{display:flex;gap:8px;margin:8px 0}
.rate-seg button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px 6px;font-size:15px;font-weight:650;color:var(--ink)}
.rate-seg button.on{border-color:var(--accent);background:#fff1ea;color:var(--accent)}
.btn:disabled{opacity:.45}
.linkbtn{display:block;margin:2px auto 0;border:0;background:none;color:var(--muted);font-size:14px;text-decoration:underline;padding:8px}
/* cookbook */
#cbSearch{margin:4px 0 2px}
.cbbar{display:flex;gap:10px;margin:2px 0 6px}
.cbbar label{flex:1;font-size:12px;color:var(--muted)}
.cbbar select{padding:7px 8px;font-size:14px;margin-top:2px}
.cbrow{cursor:pointer}
.cbrow .t{white-space:nowrap}
.hist{background:#fbf6f0;border-radius:12px;padding:4px 12px 8px;margin:10px 0}
.hist h3{margin:8px 0 4px}
.hist p{margin:4px 0;font-size:14px}
.hist li{font-size:13px;margin:3px 0}
.weeknav{display:flex;gap:10px;margin:6px 0 18px}.weeknav .btn{flex:1;padding:12px 8px;font-size:15px}.weeknav .btn:disabled{opacity:.45}
/* v8: week lifecycle (planering → skafferikoll → Klar) */
[hidden]{display:none!important}
.lockbanner{background:#dff3e7;color:#1d6b40;border-radius:14px;padding:10px 12px;margin:8px 0 4px;font-size:14px;line-height:1.35}
.lockbanner:empty{display:none}
.lockbanner b{color:#145232}
.lockbox{margin:20px 0 10px;padding:4px 14px 10px;background:#fff;border-radius:16px;border:2px solid var(--green);box-shadow:0 2px 10px rgba(60,30,10,.06)}
.lockbox h3{margin-top:10px}
.btn.primary{background:var(--green);font-size:17px;padding:14px 16px}
.btn.danger{background:var(--red);color:#fff}
.btn:disabled{opacity:.5}
.empty.locked{padding:28px 16px}
.empty.locked h2{color:var(--ink);margin:6px 0 4px}
.empty.locked .sum{color:var(--ink);font-size:15px;margin:6px 0 2px}
.empty.locked .btn{margin-top:14px;font-size:17px;padding:14px 22px}
.prow.ro{cursor:default}
.wkstatus{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:12px;margin:4px 0 6px}
.wkstatus span{padding:3px 8px;border-radius:99px;background:var(--chip);color:var(--muted)}
.wkstatus span.done{background:#dff3e7;color:var(--green)}
.wkstatus span.cur{background:#ffe1d6;color:var(--accent);font-weight:700}
.wkstatus i{color:var(--muted);font-style:normal}
body.wk-locked .wkedit{display:none}
details.advanced{margin:26px 0 8px;font-size:13px;color:var(--muted)}
details.advanced summary{cursor:pointer;padding:6px 0}
details.advanced .linkbtn{color:var(--red)}
.dangerbox{border-left:4px solid var(--red);background:#fff3f3;padding:8px 10px;border-radius:8px;font-size:14px;margin:8px 0}

/* Upptäck (discovery) in Kokbok */
#cbMode{margin-top:2px}
.dnote{margin:0 0 4px;text-align:center}
.stack.dstack{height:clamp(240px,calc(100vh - 390px - env(safe-area-inset-top)),480px);height:clamp(240px,calc(100svh - 390px - env(safe-area-inset-top)),480px)}
.actions .super{width:54px;height:54px;color:#d99a00;font-size:24px}
.actions .save{font-size:30px}
.dlabels{display:flex;justify-content:center;gap:34px;margin:6px 0 0 54px;font-size:11.5px;color:var(--muted)}
.stamp.like.super{color:#d99a00;border-color:#d99a00}
.dtoast{display:flex;align-items:center;gap:12px;pointer-events:none}
.dtoast.show{pointer-events:auto}
.dtoast button{border:0;background:none;color:#ffd84d;font-weight:800;font-size:14px;padding:2px 4px}
.slike{color:#d99a00}
/* Planeringsläge (v12) */
#pmSeg button:disabled,#pmSolo button:disabled{opacity:.55}
#pmSolo{margin-top:0}
.chip.pmq{font-weight:700}
.empty.pm-done h2,.empty.pm-solo h2{font-size:20px}
.empty.pm-done .linkbtn,.empty.pm-solo .linkbtn{display:block;margin:10px auto 0}

/* v13: floating menu bar (Omni style) – 4 labelled pills + search circle; Mer = gear in the header */
.navbar{position:fixed;z-index:40;left:12px;right:12px;bottom:var(--nav-b);max-width:536px;margin:0 auto;display:flex;gap:8px;align-items:center;pointer-events:none}
.navbar>*{pointer-events:auto}
.navbar .tabs,.navbar .searchbtn{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 6px 22px rgba(60,30,10,.16),0 0 0 1px rgba(60,30,10,.06)}
.navbar .tabs{flex:1;display:flex;height:var(--nav-h);border-radius:32px;padding:4px;gap:2px}
.navbar .tabs button{position:relative;flex:1;min-width:44px;height:56px;border:0;border-radius:28px;background:none;color:#5C534A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:600;line-height:1;padding:0;transition:background .15s}
.navbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.navbar .tabs button.active{background:#FBEAE4;color:#A53A22}
.navbar .tabs button.active svg{color:#C2462B}
.navbar .tabs button:active{background:#f6e3dc}
.navbar .searchbtn{flex:none;width:var(--nav-h);height:var(--nav-h);border:0;border-radius:50%;display:grid;place-items:center;color:#5C534A;padding:0}
.navbar .searchbtn.active{background:#FBEAE4;color:#C2462B}
.navbar .searchbtn svg{width:25px;height:25px}
.lockdot{position:absolute;top:7px;left:calc(50% + 9px);width:10px;height:10px;border-radius:50%;background:#3d8b5a;box-shadow:0 0 0 2px #fff}
header .gear{flex:none;width:44px;height:44px;margin:-6px -8px -6px 0;border:0;border-radius:50%;background:none;color:#5C534A;display:grid;place-items:center;padding:0}
header .gear svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
header .gear.active{background:#FBEAE4;color:#C2462B}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vtitle{font-size:20px;margin:6px 0 0}
/* Inköp: Skafferikoll | Inköpslista */
.subview{display:none}.subview.active{display:block}
#inkopSeg{position:sticky;top:var(--hdr,52px);z-index:5;margin:2px 0 6px;box-shadow:0 0 0 6px var(--bg)}
body.fixedbtn .toast{bottom:calc(var(--nav-top) + 12px + 76px)}
#inkopSeg small{font-weight:500;color:var(--muted);font-size:12px;margin-left:3px}
#v-inkop .psech{top:calc(var(--hdr,52px) + 46px)}
.pcount{margin:2px 0 4px}
.pcount:empty{display:none}
/* Sök & Upptäck */
.srtop{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
.srfield{flex:1;position:relative;display:block}
.srfield svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:19px;height:19px;fill:none;stroke:#8a7a6b;stroke-width:2;stroke-linecap:round}
.srfield input{padding-left:40px;border:1.5px solid #e2b9a9}
.srfield input:focus{outline:none;border-color:#C2462B;box-shadow:0 0 0 3px #FBEAE4}
.srcancel{border:0;background:none;color:#A53A22;font-weight:700;font-size:15px;padding:10px 2px;min-height:44px}
.srback b{font-size:18px}
.backbtn{width:44px;height:44px;margin-left:-10px;border:0;background:none;font-size:32px;line-height:1;color:var(--ink);padding:0 0 4px}
.srnote{margin-left:auto}
.dcard{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;border-radius:16px;padding:12px;background:linear-gradient(135deg,#fdeee2,#fbe3d4);color:var(--ink);font-size:15px;margin:4px 0 10px;box-shadow:0 2px 10px rgba(60,30,10,.06)}
.dcard small{color:#5b4a3a;font-size:13px}
.dcard-img{flex:none;width:56px;height:56px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:28px}
.dcard-go{color:#A53A22;font-weight:700;font-size:14px}
.srsec{font-size:12px;color:var(--muted);margin:12px 2px 4px;text-transform:none}
.srrow{cursor:pointer}
.srrow mark{background:#fdf0c4;color:inherit;border-radius:3px;padding:0 1px}
.srrow .chev{color:var(--muted);font-size:20px}
/* ---- v14 Kokbok → veckans plan (design/kokbok, all tap targets >= 44 px) */
#navbar .tabs button[data-badge]::after{content:attr(data-badge);position:absolute;top:3px;left:calc(50% + 6px);min-width:22px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:800;line-height:18px;text-align:center;white-space:nowrap;box-shadow:0 0 0 2px #fff;pointer-events:none}
.cbsticky{position:sticky;top:var(--hdr,52px);z-index:4;margin:0 -14px;padding:2px 14px 4px;background:var(--bg);transition:background .2s,box-shadow .2s}
.cbsticky.glass{background:rgba(255,248,241,.82);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 6px 14px -10px rgba(60,30,10,.35)}
.cbtitle{display:flex;align-items:center;gap:8px}.cbtitle h3{flex:1;margin:8px 0 4px}
.cbviewseg{display:flex;background:var(--chip);border-radius:12px;padding:2px}
.cbviewseg button{width:44px;height:44px;border:0;background:none;border-radius:10px;font-size:18px;color:var(--muted)}
.cbviewseg button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.cbchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:4px -14px;padding:0 14px}
.cbchips::-webkit-scrollbar{display:none}
.cbchips .chip{flex:none;min-height:44px;padding:0 14px;font-size:14px;font-weight:600;display:inline-flex;align-items:center}
.cbtip{display:flex;align-items:center;gap:6px;background:#ffe9df;color:#8a3416;border-radius:14px;padding:0 0 0 12px;margin:6px 0;font-size:14px}
.cbtip span{flex:1;padding:8px 0}.cbtip button{width:44px;height:44px;border:0;background:none;font-size:18px;color:#8a3416;flex:none}
.cbhint{font-size:13px;color:var(--muted);margin:4px 2px 6px}
.cbsec{margin:10px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cbtopstrip{display:flex;gap:10px;overflow-x:auto;margin:0 -14px 8px;padding:0 14px 4px;scrollbar-width:none}
.cbtopstrip .cbcard{flex:none;width:150px}
.cbgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:4px}
.cbgrid .empty,.cbgrid .cbletter{grid-column:1/-1}
.cbcard{cursor:pointer;min-width:0}
.cbcard .cbimg{position:relative;aspect-ratio:1/1;border-radius:18px;background:#eadccd center/cover no-repeat;box-shadow:0 2px 10px rgba(60,30,10,.1)}
.cbcard .t{white-space:normal;font-weight:700;font-size:15px;line-height:1.25;margin-top:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cbcard .s{font-size:13px;color:var(--muted)}
.cbbadge{position:absolute;top:8px;left:8px;font-size:12px;font-weight:700;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.92)}
.cbwk{position:absolute;top:8px;left:8px;font-size:12px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--green);color:#fff}
.cbbadge+.cbwk{top:36px}
.cbplus{position:absolute;right:8px;bottom:8px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--accent);font-size:26px;font-weight:400;line-height:1;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.18);padding:0}
.cbplus.done{background:var(--green);color:#fff;font-size:20px;font-weight:800}
.cblistwrap{background:none;box-shadow:none;border-radius:0}
.cbswipe{position:relative;overflow:hidden;border-radius:16px;margin:0 0 8px;background:#fff}
.cbsw-bg{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-weight:800;color:#fff;background:#999}
.cbswipe.add .cbsw-bg{background:var(--green)}.cbswipe.hide .cbsw-bg{background:#7c6f64}
.cbswipe.add .cbsw-bg .r,.cbswipe.hide .cbsw-bg .l{visibility:hidden}
.cbswipe:not(.add):not(.hide) .cbsw-bg{visibility:hidden}
.row.cblist{position:relative;background:#fff;border:0;border-radius:16px;touch-action:pan-y;transition:transform .18s ease;padding:10px 10px 10px 12px;margin-right:0}
.row.cblist.dragging{transition:none}
.row.cblist .t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.row.cblist .cbplus{position:static;flex:none;margin-left:2px;background:#fff1ea;box-shadow:none}
.row.cblist .cbplus.done{background:var(--green)}
.cbok{color:var(--green)}
.cbletter{position:sticky;top:calc(var(--hdr,52px) + 108px);z-index:3;background:var(--bg);font-weight:800;font-size:15px;padding:6px 4px;color:var(--accent)}
.cbletter span{color:var(--muted);font-weight:500;font-size:12px}
.cbaz{position:fixed;right:max(2px,env(safe-area-inset-right));top:calc(var(--hdr,52px) + 130px);bottom:calc(var(--nav-top) + 14px);width:44px;z-index:30;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:4px 0;font-size:10.5px;font-weight:700;color:var(--accent);opacity:0;pointer-events:none;transition:opacity .15s ease;touch-action:none;user-select:none;-webkit-user-select:none}
.cbaz.show{opacity:1;pointer-events:auto}
.cbaz span{flex:1;display:flex;align-items:center;line-height:1}.cbaz span.off{color:#cdbfb2}
.cbaz.active{background:rgba(228,87,46,.08);border-radius:22px}
body:not(.view-cookbook) .cbaz{display:none}
.cbazb{position:fixed;right:64px;width:56px;height:56px;border-radius:50% 50% 8px 50%;background:var(--accent);color:#fff;font-size:28px;font-weight:800;display:grid;place-items:center;z-index:31;opacity:0;pointer-events:none;transition:opacity .1s;box-shadow:var(--shadow)}
.cbazb.show{opacity:1}
.cbtoast{position:fixed;left:12px;right:12px;max-width:536px;margin:0 auto;bottom:calc(var(--nav-top) + 12px);z-index:70;display:flex;align-items:center;gap:8px;background:#2b2118;color:#fff;border-radius:16px;padding:6px 6px 6px 12px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.cbtoast.show{opacity:1;transform:none;pointer-events:auto}
.cbtoast .ok{width:26px;height:26px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-weight:800;flex:none}
.cbtoast .grow{flex:1;min-width:0}.cbtoast b{display:block;font-size:14px}.cbtoast small{font-size:12px;opacity:.8}
.cbtoast button{min-height:44px;min-width:44px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:14px;padding:0 12px}
.cbtoast button:last-child{background:none;color:#ffd84d}
.kb .kbhead{display:flex;gap:12px;align-items:center;margin:4px 0 10px}
.kb .kbhead img{width:60px;height:60px;border-radius:14px;object-fit:cover;flex:none}
.kb .kbhead h2{margin:0;padding:0;font-size:19px}
.kblbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:8px 2px}
.kblbl.split{display:flex;justify-content:space-between;align-items:center}
.kblink{border:0;background:none;color:var(--accent);font-weight:700;font-size:13px;min-height:44px;padding:0 4px;text-transform:none;letter-spacing:0}
.kbmenu,.kbswap,.kbextra{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;border:0;border-radius:16px;margin:0 0 10px;padding:10px 14px;text-align:left;font-size:16px;color:var(--ink);background:#e7f3eb}
.kbmenu .ic,.kbextra .ic{font-size:22px;width:28px;text-align:center;flex:none}
.kbmenu .grow,.kbswap .grow,.kbextra .grow{flex:1;min-width:0}
.kbmenu b,.kbswap b,.kbextra b{display:block}
.kbmenu small,.kbswap small,.kbextra small{display:block;font-size:13px;opacity:.8}
.kbmenu.vardag{background:#fbe6dd}
.kbmenu.sel{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(228,87,46,.3)}
.kbmenu.helg.sel{background:var(--green);box-shadow:0 6px 16px rgba(42,157,92,.3)}
.kbmenu .chk{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;font-weight:800;flex:none}
.kbmenu.helg .chk{color:var(--green)}
.kbmenu:disabled{background:#eee9e4;color:#9a8f86;box-shadow:none}
.kbrow{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:4px 0 10px}
.kbday{position:relative;display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:14px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.1);font-size:16px}
.kbday select{position:absolute;inset:0;opacity:0;width:100%;height:100%;font-size:16px}
.kbstep{display:flex;align-items:center;background:var(--chip);border-radius:14px}
.kbstep button{width:44px;height:44px;border:0;background:none;font-size:22px;color:var(--ink)}
.kbstep span{min-width:64px;text-align:center}
.kbcancel{display:block;width:100%;min-height:48px;border:0;border-radius:14px;background:#f1ebe4;color:#6b5f55;font-weight:700;font-size:16px;margin-top:4px}
.kbnote{display:flex;gap:10px;align-items:flex-start;background:#f3ecfa;border-radius:14px;padding:12px 14px;margin:0 0 10px;font-size:15px}
.kbnote .ic{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.08);display:grid;place-items:center;font-size:13px;font-weight:800}
.kbnote.warn{background:#f8efcf;color:#5d4500}.kbnote.warn .ic{background:#7a5c00;color:#fff}
.kbswap{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.kbswap img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.kbswap .sw{font-size:20px;color:var(--muted)}
.kbextra{background:#f1ebe4}.kbextra .ic{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:20px;display:grid;place-items:center}
.kbdays{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.kbdaybtn{min-height:56px;border:0;border-radius:14px;background:var(--chip);text-align:left;padding:8px 12px;color:var(--ink)}
.kbdaybtn small{display:block;font-size:12px;color:var(--muted)}.kbdaybtn.sel{background:var(--accent);color:#fff}.kbdaybtn.sel small{color:#fff}
.kbdone{text-align:center;position:relative;overflow:hidden;padding-top:8px}
.kbdone .big{font-size:52px}.kbdone h2{padding:0;font-size:24px}
.kbdone .linkbtn{min-height:44px}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;opacity:0;animation:kbconf 1.6s ease-in forwards}
@keyframes kbconf{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(260px) rotate(540deg)}}
#cbList.azon{padding-right:40px}
.kbdone>*:not(.confetti){position:relative;z-index:1}
/* ---- v15 Inställningar (grouped menu + sub pages), KB-18/KB-20, compact Veckan */
#cbSearch,#cbSort,#cbCuisine{min-height:44px;box-sizing:border-box}
.toast.top{bottom:auto;top:calc(env(safe-area-inset-top) + 12px)}
.sgh{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 4px 6px}
.smenu,.sbox{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sbox{padding:4px 14px 14px;margin-bottom:8px}
.sbox h3:first-child{margin-top:10px}
.srow{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;box-sizing:border-box}
.smenu .srow:last-child{border-bottom:0}
.sbox .srow.static{padding:8px 0}
.srow.static{cursor:default}
.srow .grow{display:flex;flex-direction:column;min-width:0}
.srow small{color:var(--muted);font-size:13px}
.sic{width:36px;height:36px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center;flex:none}
.sval{font-weight:600;white-space:nowrap}
.chev{color:var(--muted);font-size:20px}
.flash{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.subhead{display:flex;align-items:center;gap:10px;min-height:48px;margin-bottom:6px}
.backlink{min-height:44px;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0 6px 0 0}
.subbody{padding-bottom:110px}
.subfoot{position:sticky;bottom:calc(var(--nav-top) + 12px);padding:8px 0 0;background:var(--bg)}
.subfoot .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sbig{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0}
.sbig span{display:flex;flex-direction:column;align-items:center}
.sbig b{font-size:56px;line-height:1}
.sbig small{color:var(--muted)}
.sstep{min-width:44px;min-height:44px;border-radius:50%;border:0;background:var(--chip);font-size:22px;font-weight:600;color:var(--ink);cursor:pointer}
.sstep:disabled{opacity:.35;cursor:default}
.sstepper{display:flex;align-items:center;gap:8px}
.snum{min-width:22px;text-align:center;font-weight:700;font-size:18px}
.squick{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.sopt{flex:1;min-height:44px;min-width:44px;border:2px solid var(--line);border-radius:12px;background:var(--card);font:inherit;font-weight:600;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 10px}
.sopt small{font-weight:400;font-size:12px;color:var(--muted)}
.sopt.sel{border-color:#2F7352;background:#e7f1eb;color:#1f4f38}
.sopt:disabled{opacity:.45}
.sscope{display:flex;gap:8px;margin:14px 0}
.sdays{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:52px;padding:8px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);font:inherit;color:var(--ink);cursor:pointer;margin:6px 0}
.sdays small{color:var(--muted)}
.lnk{color:var(--accent)}
.ssum{margin:12px 0;padding:10px 14px;border-radius:14px;background:var(--chip);display:flex;flex-direction:column}
.ssum.ok{background:#e7f1eb;color:#1f4f38}
.ssum small{color:var(--muted)}
.sdaygrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0}
.sday{min-height:64px;min-width:44px;border:2px solid var(--line);border-radius:12px;background:var(--card);font:inherit;font-weight:700;color:var(--ink);cursor:pointer;padding:0}
.sday.sel{background:#2F7352;border-color:#2F7352;color:#fff}
.snote{background:#fff3d6;border-radius:14px;padding:12px 14px;margin:6px 0 4px;font-size:15px}
.stog input{width:24px;height:24px;min-width:44px;min-height:44px;margin:0;accent-color:#6B635B}
.sradio.sel{background:#e7f1eb}
.sradio .chk{color:#2F7352;font-weight:700;min-width:16px}
.chip.ejm{background:#f1ece6;color:var(--muted)}
.wkhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.wkhead h3{margin-right:auto}
.wkchip{min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line);background:var(--card);font:inherit;font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(60,30,10,.06)}
.wkchip b{color:var(--accent)}
.frirow{display:flex;gap:16px;align-items:center;min-height:28px;padding:2px 14px;border-bottom:1px dashed var(--line);font-size:13px;color:var(--muted)}
.frirow b{min-width:56px;font-size:12px;letter-spacing:.04em}
.srow .grow{flex:1}

/* ---- v17 Veckan "hög" rows (design/veckan-ihop/rad-spec.md, Alternativ hög) */
#v-week .vhead{display:flex;align-items:baseline;justify-content:space-between;margin:2px 6px 0}
#v-week .vhead h3{font-size:28px;line-height:34px;font-weight:720;letter-spacing:-.5px;margin:0}
#v-week .vhead #weekLbl{font-size:14px;color:#554E47}
#v-week .wkchip{margin:6px 6px 10px;display:inline-block;line-height:44px;height:44px;border:0;background:#fff;box-shadow:0 1px 2px rgba(31,27,23,.06),0 0 0 1px rgba(31,27,23,.04);font-size:13.5px;font-weight:650;color:#554E47}
.vlist{display:flex;flex-direction:column;gap:6px;margin:0 6px 16px}
.vrow{display:flex;align-items:center;gap:10px;height:70px;padding:8px;border-radius:20px;background:#fff;box-shadow:0 2px 6px rgba(31,27,23,.05),0 10px 24px rgba(31,27,23,.08);width:100%;cursor:pointer}
.vdate{flex:none;width:50px;height:54px;border-radius:14px;background:#EFEAE2;display:flex;flex-direction:column;align-items:center;justify-content:center}
.vdate small{font-size:11.5px;line-height:13px;font-weight:700;letter-spacing:.04em;color:#6B635B}
.vdate b{font-size:20px;line-height:22px;font-weight:720;color:#1F1B17}
.vimg{position:relative;flex:none;width:54px;height:54px}
.vimg img{width:54px;height:54px;border-radius:13px;object-fit:cover;background:#eee;display:block}
.vav{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;border-radius:50%;border:2px solid #fff;color:#fff;font:normal 800 11px/16px -apple-system,sans-serif;text-align:center;box-sizing:border-box}
.vrow .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.vt{font-size:16px;line-height:20px;font-weight:650;color:#1F1B17;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcat{display:flex;align-items:center;min-width:0;margin-top:2px;font-size:12.5px;color:#6B635B}
.vcm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vswp{flex:none;margin-left:6px;font-size:10.5px;font-weight:650;padding:1px 6px;border-radius:10px;background:#F6EBCB;color:#6A5210;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbyt{flex:none;height:44px;padding:0 10px;border:0;border-radius:14px;background:#EFEAE2;color:#554E47;font:inherit;font-size:13px;font-weight:700;display:flex;align-items:center;gap:4px;cursor:pointer}
.vrow.fri{cursor:default;box-shadow:none;background:transparent;border:1px dashed var(--line);min-height:0;font-size:14px;color:var(--muted)}
.vrow.fri .vdate{background:#fff}
.vacts{display:flex;gap:8px;margin:8px 0}.vacts .btn{flex:1;min-height:44px}
.vsheet .kbhead.vopen{width:100%;border:0;background:none;text-align:left;font:inherit;padding:0;cursor:pointer}
.vsheet .step button{width:44px;height:44px}
.vsheet .btn.block{min-height:44px}
.cbreplace{display:flex;align-items:center;gap:8px;margin:6px 0;padding:8px 12px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(31,27,23,.06),0 0 0 1px rgba(31,27,23,.04);font-size:14px}
.cbreplace[hidden]{display:none}
.cbreplace .btn.small{min-height:44px}

/* ---- A-10 swipe flow (v18): MÅN–SÖN strip, Fördelning row F, toast on the card, "Veckan är klar!", week switcher */
:root{--sage:#2F7352;--sage-soft:#E3EEE7;--ink-3:#8A8279}
@media (display-mode: standalone){:root{--standalone:1}}
.actions .yes{background:var(--sage);color:#fff}
.stamp.yes{color:var(--sage);border-color:var(--sage)}
.strip{margin:4px 0 2px}
.stripc{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:8px 10px 10px}
.striphd{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--ink-3);margin:0 2px 6px;letter-spacing:.02em}
.striphd .sfill{color:var(--sage)}
.striprow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dp{position:relative;height:44px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink-3);background:#F1EFE9}
.dp b{font-size:15px;color:var(--ink);line-height:1.1}
.dp.f{background:var(--sage);color:#DDEBE2}.dp.f b{color:#fff}
.dp.t{background:#fff;box-shadow:inset 0 0 0 2px var(--sage)}
.dp.off{background:transparent;box-shadow:inset 0 0 0 1px #E4E0D8;opacity:.6}
.dp .dav{position:absolute;top:-5px;right:-4px;width:16px;height:16px;border-radius:50%;color:#fff;font:800 9px/16px system-ui;text-align:center;font-style:normal;box-shadow:0 0 0 2px #fff}
.dp.new::after{content:"";position:absolute;inset:-2px;border-radius:14px;box-shadow:0 0 0 2px var(--sage);animation:dpulse .45s ease-out forwards}
@keyframes dpulse{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.25)}}
.catf{position:relative;height:28px;margin-top:4px;display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;justify-content:center;cursor:pointer}
.catf::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.catf.none{cursor:default}
.catf .cg{display:flex;align-items:center;gap:4px;flex:none}
.catf .ci{display:flex;color:#6B645C}
.catf .rings{display:flex}
.catf .rings i{border-radius:50%;box-sizing:border-box;flex:none;border:1.25px solid #A79F94}
.catf .rings i.on{background:var(--sage);border-color:var(--sage)}
.catf .caret{color:var(--ink-3);font-size:11px;margin-left:-4px}
.badge.fills{left:12px;top:12px;right:auto;background:rgba(255,255,255,.94);color:var(--sage);font-weight:700}
.stackwrap{position:relative}
.swtoast{position:absolute;left:10px;right:10px;top:10px;z-index:40;display:flex;align-items:center;gap:8px;background:#2b2118;color:#fff;border-radius:16px;padding:6px 6px 6px 10px;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s;pointer-events:none}
.swtoast.show{opacity:1;transform:none;pointer-events:auto}
.swtoast .ok{width:30px;height:30px;border-radius:50%;background:var(--sage);display:grid;place-items:center;font-weight:800;flex:none}
.swtoast .grow{flex:1;min-width:0}.swtoast b{display:block;font-size:14px}.swtoast small{display:block;font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swtoast button{min-height:44px;min-width:44px;border:0;border-radius:12px;background:none;color:#F2A48F;font-weight:700;font-size:14px;padding:0 12px}
.swtoast.info{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.swtoast.info .ok{background:#F1EFE9;color:var(--ink);font-style:italic}
.swtoast.info button{color:var(--ink)}
.empty.klar{background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:24px 22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:380px}
.empty.klar h2{font-size:28px;margin:18px 0 4px}
.klarok{width:72px;height:72px;border-radius:50%;background:var(--sage);color:#fff;font-size:36px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 8px var(--sage-soft)}
.klarbtns{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:10px;padding-top:18px}
.klarbtns .btn{min-height:48px}
.klarbtns .btn.primary{background:var(--accent);color:#fff}
.btn.outline{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #D9D3C8}
.klarbtns .linkbtn{min-height:44px;color:var(--ink);font-weight:600}
.wksw{text-align:center;margin:2px 0 10px}
.wksw .wsl{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--ink-3)}
.wsrow{display:flex;align-items:center;justify-content:center;gap:8px}
.wsch{width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:var(--shadow);font-size:24px;color:var(--ink)}
.wsch:disabled{opacity:.35;box-shadow:none;background:#EEEBE4}
.wstitle{min-height:44px;border:0;background:none;font-size:32px;line-height:36px;font-weight:800;color:var(--ink);padding:0 6px}
.wstitle small{font-size:16px;color:var(--ink-3)}
.wsst{font-size:13px;color:var(--ink-3)}.wsst .full{color:var(--sage);font-weight:700}
.wspick{display:flex;width:100%;align-items:center;text-align:left;gap:8px}
.wspick small{display:block;font-weight:500}
.fdrow{display:flex;align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--line)}
.fdic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--sage-soft);color:var(--sage)}
.fdic.done{background:var(--sage);color:#fff}
.fdrow b.ok{color:var(--sage)}
.empty.klar h2{color:var(--ink)}
#v-swipe .stack{height:clamp(240px,calc(100vh - 445px - env(safe-area-inset-top)),470px);height:clamp(240px,calc(100svh - 445px - env(safe-area-inset-top)),470px)}
.img:has(.badge.fills) .badge.price{top:50px}
/* ---- Swipefix (v19): swipe screen exactly per design/swipe-flode/swipe-flode-slutlig.html (alternativ F) */
#v-swipe .stripc{padding:10px}
#v-swipe .dp{height:46px;font-size:10.5px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
#v-swipe .dp b{font-size:13px;font-weight:750}
#v-swipe .dp.f{background:var(--sage);box-shadow:none;color:#fff}#v-swipe .dp.f b{color:#fff}
#v-swipe .dp.t{background:var(--sage-soft);color:var(--sage);box-shadow:inset 0 0 0 2px var(--sage)}#v-swipe .dp.t b{color:var(--sage)}
#v-swipe .dp .dav{right:-5px;top:-6px}
#v-swipe .catf{gap:16px}
#v-swipe .stack{margin:12px 0 0;height:362px}
#v-swipe .stack .card{border-radius:28px;background:#2b2118;display:block}
/* swipe-feedback (v20): Tinder-classic deck. Pivot far below the card; fly-out 0.2s ease-in; glide back ease-out (no bounce);
   the card behind sits still at scale .95 and grows to 1.0 (soft ease-out) while the top card flies out */
#v-swipe .stack .card{transform-origin:50% 160%;transition:none}
#v-swipe .stack .card.back{transition:transform .3s cubic-bezier(.25,.8,.35,1)}
#v-swipe .stack .card.fly{transition:transform .2s cubic-bezier(.55,0,1,.45)}
#v-swipe .stack .card.behind{transform:scale(.95);transform-origin:50% 50%;transition:none;pointer-events:none}
#v-swipe .stack .card.promote{transform-origin:50% 50%;animation:msGrow .26s cubic-bezier(.22,.61,.36,1)}
@keyframes msGrow{from{transform:scale(.95)}to{transform:scale(1)}}
#v-swipe .stack .card .lbls,#v-swipe .stack .card .cbot{transition:opacity .2s ease-out}
#v-swipe .stack .card.behind .lbls,#v-swipe .stack .card.behind .cbot{opacity:0}
#v-swipe .card .stamp{top:56px;font-size:32px;letter-spacing:.5px;padding:4px 16px;border-width:4px;background:rgba(255,255,255,.12);will-change:opacity}
#v-swipe .card .stamp.yes{left:22px;color:#2FB062;border-color:#2FB062;transform:rotate(-14deg)}
#v-swipe .card .stamp.no{right:22px;color:#E5484D;border-color:#E5484D;transform:rotate(14deg)}
#v-swipe .card .cimg{position:absolute;inset:0;background:#eadccd 50% 40%/cover no-repeat}
#v-swipe .card .cscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,15,0) 35%,rgba(20,17,15,.72) 100%)}
#v-swipe .card .lbls{position:absolute;left:14px;top:14px;right:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:2}
#v-swipe .card .lbl{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
#v-swipe .card .lbl svg{flex:none}
#v-swipe .card .lbl.fills{background:rgba(227,239,231,.95);color:#2F7352}
#v-swipe .card .lbl.price{background:rgba(255,255,255,.95);color:var(--ink);display:block;line-height:32px}
#v-swipe .card .lbl.price svg{vertical-align:-2px;margin-right:6px}
#v-swipe .card .lbl.fav{background:rgba(255,255,255,.95);color:#B03E25}
#v-swipe .card .cbot{position:absolute;left:18px;right:18px;bottom:18px;z-index:2}
#v-swipe .card .cbot h2{position:static;margin:0;font-family:"Bricolage Grotesque",var(--disp,system-ui),sans-serif;font-size:28px;line-height:32px;font-weight:720;color:#fff;text-shadow:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#v-swipe .card .gchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#v-swipe .card .gchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:600;border:0}
#v-swipe .card .gchip svg{color:#fff}
#v-swipe .actions{gap:18px;margin-top:18px}
#v-swipe .actions .undo{width:48px;height:48px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,17,15,.08),0 2px 8px rgba(20,17,15,.06)}
#v-swipe .actions .no{width:64px;height:64px;background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(20,17,15,.08),0 8px 20px rgba(20,17,15,.08)}
#v-swipe .actions .yes{width:72px;height:72px;background:#2F7352;color:#fff;box-shadow:0 8px 24px rgba(47,115,82,.35)}
#v-swipe .swtoast{left:14px;right:14px;top:14px}
/* v21: the Ångra toast lives ABOVE the card (reserved band between strip/category row and the card): never covers card or stamps, no layout jump */
#v-swipe .stackwrap{position:relative;padding-top:54px}
#v-swipe .swtoast{left:14px;right:14px;top:4px;min-height:46px;padding:0 4px 0 8px;border-radius:14px}
#v-swipe .swtoast .ok{width:26px;height:26px}
#v-swipe .swtoast button{min-height:40px}
/* short screens: no reserved band (the card keeps its height); the toast overlays the category row above the card instead */
@media (max-height:740px){#v-swipe .stackwrap{padding-top:0}#v-swipe .swtoast{top:-48px}}