/* Vem tar med / BringList — "Anslagstavla"-identitet.
   Korktavla + roterade post-it-lappar med pins/tejp. Bricolage Grotesque (rubriker/labels)
   x Nunito (brödtext) x Gochi Hand (handskrift). All app-funktion oförändrad — bara reskin. */
:root {
  --cork:#dccaa4; --cork-dark:#c2a878;
  --note-mint:#bfe6c8; --note-coral:#f7b6a4; --note-sky:#a9d3ef; --note-yellow:#f4e08a;
  --pin:#d4483b; --pin-dark:#7d271f;
  --paper:#faf6ee; --panel:#faf6ee; --ink:#33302b; --muted:#5f5646; --line:#e3d9c4;
  --accent:#d4483b; --accent-ink:#b53a2f; --good:#4e9d61; --danger:#c04a2e; --warm:#d99a24;
  --serif:'Bricolage Grotesque',system-ui,sans-serif;   /* display/labels */
  --sans:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hand:'Gochi Hand',cursive;
}
*{box-sizing:border-box}
html,body{margin:0}
/* Bakgrundsbas även på html: annars lyser UA-vitt igenom under/bakom body när
   sidan är kortare än viewporten eller vid overscroll (ljus rand under korken). */
html{scroll-behavior:smooth;background:var(--cork);min-height:100%}
body{
  min-height:100vh;
  color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(80,50,20,.07), transparent 55%),
    var(--cork);
  overflow-x:hidden;
}
/* cork speckle */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.32;z-index:0;
  background-image:radial-gradient(rgba(90,60,25,.35) 1px, transparent 1.4px),radial-gradient(rgba(255,240,210,.30) 1px, transparent 1.4px);
  background-size:9px 9px, 13px 13px;background-position:0 0, 4px 6px;}
a{color:var(--accent-ink)}
.hand{font-family:var(--hand)}
.wrap{max-width:1000px;margin:0 auto;padding:22px 20px 72px;position:relative;z-index:1}
.narrow{max-width:440px;margin:0 auto}

/* Topbar — träribba */
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;
  background:linear-gradient(#8a6a3f,#755733);border-bottom:3px solid #5a4327;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.logo{display:flex;align-items:baseline;gap:10px;cursor:pointer}
.logo b{font-family:var(--serif);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;color:var(--paper);display:inline-flex;align-items:center;gap:9px}
.logo span{color:rgba(250,246,238,.82);font-size:.85rem;font-family:var(--hand)}
.topbar .right{display:flex;align-items:center;gap:12px;font-size:.9rem}
.topbar .right .muted{color:rgba(250,246,238,.9)}

/* Mat-nischen (vemtarvad.se): ingen träribba — bara den centrerade titeln i handstil
   med subtil markerad platta bakom, mot korken. Knapparna ligger uppe till höger. */
.topbar-mat{position:relative;z-index:2;padding:20px 20px 6px;text-align:center}
.topbar-mat-right{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:10px;font-size:.9rem;flex-wrap:wrap;justify-content:flex-end;max-width:60%}
/* Kontrast: texten här står direkt mot korken (ingen mörk träribba på mat-nischen)
   — ljus paper-färg blev oläslig när korken ljusnades (#dccaa4). Mörk text i stället. */
.topbar-mat-right .muted{color:var(--ink);opacity:.85}
.topbar-mat-right .linkbtn{color:var(--ink);opacity:.85}
.topbar-mat-right .linkbtn:hover{color:var(--pin);opacity:1}
.mat-wordmark{margin:14px 0 0;cursor:pointer;line-height:1.05}
.mat-mark-plate{font-family:var(--hand);font-weight:400;font-size:clamp(2.4rem,7vw,3.6rem);color:var(--ink);
  display:inline-block;padding:.05em .32em .12em;position:relative}
.mat-mark-plate::before{content:"";position:absolute;inset:.18em -.04em .16em;z-index:-1;
  background:var(--note-yellow);opacity:.82;transform:rotate(-1.2deg);border-radius:5px;
  box-shadow:1px 2px 4px rgba(30,18,6,.14)}
@media(max-width:560px){
  .topbar-mat{padding:16px 14px 4px}
  .topbar-mat-right{position:static;max-width:none;justify-content:center;margin-bottom:6px}
  .mat-wordmark{margin-top:4px}
}

/* Buttons — häftstift-röd primär, lapp-skuggor */
.btn{font:inherit;font-family:var(--serif);font-weight:700;font-size:.92rem;border:0;background:var(--pin);color:#fff;
  padding:10px 18px;border-radius:4px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;white-space:nowrap;
  box-shadow:3px 4px 0 var(--pin-dark);transition:transform .12s,box-shadow .12s}
.btn:hover{background:var(--accent-ink);transform:translateY(-1px);box-shadow:3px 5px 0 var(--pin-dark)}
.btn:active{transform:translateY(1px);box-shadow:2px 2px 0 var(--pin-dark)}
.btn.sm{padding:7px 13px;font-size:.85rem;box-shadow:2px 3px 0 var(--pin-dark)}
.btn.subtle{background:var(--note-sky);color:var(--ink);box-shadow:3px 4px 0 #5f97bf}
.btn.subtle:hover{background:#9bc9e9;box-shadow:3px 5px 0 #5f97bf}
.btn.sm.subtle{box-shadow:2px 3px 0 #5f97bf}
.btn.danger{background:transparent;color:var(--danger);box-shadow:none;font-weight:700}
.btn.danger:hover{background:#c04a2e14;transform:none;box-shadow:none}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}
.linkbtn{background:none;border:0;color:rgba(250,246,238,.85);cursor:pointer;font:inherit;font-weight:700;font-size:.85rem;padding:4px;text-decoration:none;display:inline-block}
.linkbtn:hover{color:var(--paper)}
/* i innehållsytor (ej på ribban) ska linkbtn synas mot kork */
.wrap .linkbtn{color:var(--ink);opacity:.85}
.wrap .linkbtn:hover{color:var(--pin);opacity:1}

/* Cards / forms — papperslappar */
.card{background:var(--paper);border-radius:4px;padding:22px;box-shadow:4px 8px 18px rgba(30,18,6,.28)}
h1{font-family:var(--serif);font-weight:800;letter-spacing:-.02em;text-wrap:balance;line-height:1.05}
h2{font-family:var(--serif);font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
h3{font-family:var(--serif);font-weight:700}
label{display:block;font-size:.85rem;font-weight:700;color:var(--muted);margin:12px 0 4px}
input,select,textarea{font:inherit;font-size:16px;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pin);box-shadow:0 0 0 3px #d4483b26}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1}
.err{color:var(--danger);font-size:.86rem;margin-top:8px;font-weight:600}
.pill{display:inline-block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--muted);background:var(--paper);border-radius:999px;padding:2px 10px;box-shadow:1px 2px 4px rgba(30,18,6,.18)}
.pill.pro{background:var(--pin);color:#fff}
.muted{color:var(--muted)}
.sm{font-size:.85rem}
.divider{border:0;border-top:2px dashed rgba(60,40,15,.28);margin:30px 0}

/* Landing */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin:26px 0 8px}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:60px}}
.hero>div:first-child{background:var(--paper);border-radius:4px;padding:36px 32px 32px;box-shadow:5px 9px 22px rgba(30,18,6,.30);position:relative;transform:rotate(-1.1deg)}
.hero>div:first-child::before{content:"";position:absolute;top:-9px;left:32px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd27a,#d99a24);box-shadow:1px 2px 3px rgba(0,0,0,.4)}
.hero>div:first-child::after{content:"";position:absolute;top:-9px;right:32px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8fd0ff,#3a86c9);box-shadow:1px 2px 3px rgba(0,0,0,.4)}
.hero .pill{background:transparent;box-shadow:none;color:var(--pin);font-family:var(--hand);font-size:1.2rem;text-transform:none;letter-spacing:0;padding:0;display:inline-block;transform:rotate(-2deg);margin-bottom:2px}
.hero h1{font-size:clamp(2.1rem,6vw,3.1rem);margin:.15em 0}
.hero h1 .u{position:relative;display:inline-block}
.hero h1 .u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:11px;background:var(--note-coral);z-index:-1;transform:rotate(-1deg);border-radius:3px}
.hero p{font-size:1.06rem;color:var(--ink);max-width:46ch}
.demo-col{position:relative}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:560px){.plan-grid{grid-template-columns:1fr}}
.plan{border-radius:4px;padding:26px 24px;background:var(--paper);box-shadow:5px 9px 20px rgba(30,18,6,.30);position:relative;transform:rotate(-1deg)}
.plan::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9fe0ac,var(--good));box-shadow:1px 2px 3px rgba(0,0,0,.4)}
.plan.pro{background:var(--note-yellow);transform:rotate(1.2deg)}
.plan.pro::before{background:radial-gradient(circle at 35% 30%,#ff8a7d,var(--pin))}
.price{font-family:var(--serif);font-weight:800;font-size:2rem;margin:6px 0;line-height:1}
.feat{list-style:none;padding:0;margin:12px 0;font-size:.92rem}
.feat li{padding:6px 0 6px 26px;position:relative}
.feat li:before{content:"";position:absolute;left:2px;top:.5em;width:14px;height:11px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M2 8l4 4 10-11' stroke='%234e9d61' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan.pro .feat li:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M2 8l4 4 10-11' stroke='%23d4483b' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* section headings on cork get paper-contrast — kräver rejäl mörk skugga mot ljusa korken */
.wrap>h2{color:var(--paper);text-shadow:0 1px 2px rgba(0,0,0,.35),2px 2px 0 rgba(0,0,0,.30)}

/* How it works — uppnålade lappar */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:860px;margin:22px auto 0}
@media(max-width:680px){.how-grid{grid-template-columns:1fr;max-width:420px}}
.how-step{background:var(--paper);border-radius:3px;padding:24px 22px;box-shadow:4px 8px 18px rgba(30,18,6,.28);position:relative;text-align:left}
.how-step:nth-child(1){transform:rotate(-1.5deg)}
.how-step:nth-child(2){transform:rotate(1deg)}
.how-step:nth-child(3){transform:rotate(-1deg)}
.how-step::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8fd0ff,#3a86c9);box-shadow:1px 2px 3px rgba(0,0,0,.4)}
.how-step:nth-child(2)::before{background:radial-gradient(circle at 35% 30%,#ff8a7d,var(--pin))}
.how-step:nth-child(3)::before{background:radial-gradient(circle at 35% 30%,#ffe08a,#d99a24)}
.how-num{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;border:0;font-family:var(--hand);color:var(--pin);font-size:2rem;line-height:1}
.how-step h3{font-family:var(--serif);font-weight:700;font-size:1.1rem;margin:8px 0 4px}
.how-step p{color:var(--ink);font-size:.94rem;margin:0}

/* Demo card — mini-anslagstavla */
.demo-card{padding:18px;transform:rotate(1deg)}
.demo-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-size:.85rem;font-weight:700}
.demo-head .muted{font-family:var(--hand);font-size:1rem;color:var(--muted)}
.demo-counter{font-family:var(--serif);font-weight:800;font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;
  color:#fff;background:var(--pin);padding:3px 10px;border-radius:5px;transform:rotate(-2deg);box-shadow:1px 2px 4px rgba(30,18,6,.28);white-space:nowrap}
/* Demo-slot på landningen: behåll den lugna kort-känslan (etikett över namn),
   opåverkad av den nya tabell-layouten i själva appen. */
.demo-slot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;cursor:default;
  border:1px solid var(--line);border-left:3px solid rgba(217,154,36,.5);border-radius:6px;padding:10px 14px;background:var(--paper)}
.demo-slot .slot-main{flex:1;min-width:0;display:flex}
.demo-slot .slot-main{flex-direction:column;align-items:stretch;gap:8px}
.demo-slot .slot-signs{margin-top:0}
.demo-slot .slot-count{min-width:auto;color:#fff;background:var(--warm);padding:3px 10px;border-radius:5px;
  font-size:.72rem;letter-spacing:.03em;text-transform:uppercase}
.demo-slot .slot-count.full{background:var(--good);color:#fff}

/* Dashboard — "Dina listor"-rubrik + skapa-knapp som en grupp */
.board-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.board-head h1{font-size:1.6rem;margin:0;color:var(--paper);text-shadow:0 1px 2px rgba(0,0,0,.35),2px 2px 0 rgba(0,0,0,.30)}

/* Överblicks-räknare — samma pin-röda "X av N tagna"-badge som demons demo-counter,
   återanvänd på list-editorns titel så in-app-vyn känns lika genomarbetad som demon. */
.board-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.board-counter{font-family:var(--serif);font-weight:800;font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;
  color:#fff;background:var(--pin);padding:3px 10px;border-radius:5px;transform:rotate(-2deg);
  box-shadow:1px 2px 4px rgba(30,18,6,.28);white-space:nowrap}

/* Dashboard tiles — lappar på anslagstavla */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 20px;margin-top:22px}
.tile{border-radius:4px;padding:18px 18px 16px;background:var(--note-yellow);cursor:pointer;display:flex;flex-direction:column;gap:4px;
  box-shadow:3px 6px 14px rgba(40,25,10,.28);position:relative;transition:transform .12s,box-shadow .12s;min-height:118px}
.tile:nth-child(2n){transform:rotate(-1deg)}
.tile:nth-child(2n+1){transform:rotate(.8deg)}
.tile::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a7d,var(--pin));box-shadow:1px 2px 3px rgba(0,0,0,.4)}
.tile:nth-child(3n+2){background:var(--note-mint)}
.tile:nth-child(3n){background:var(--note-sky)}
.tile:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:4px 10px 20px rgba(40,25,10,.32)}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tile h3{margin:2px 0 0;font-family:var(--serif);font-weight:700}
.tile-counter{flex:0 0 auto;font-family:var(--serif);font-weight:800;font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;
  color:#fff;background:var(--pin);padding:2px 8px;border-radius:5px;transform:rotate(-2deg);
  box-shadow:1px 2px 3px rgba(30,18,6,.26);white-space:nowrap;margin-top:2px}
.tile-meta{margin:4px 0 8px}
.tile>span.muted:last-child{margin-top:auto;color:var(--pin);font-weight:700}

/* Empty-state — en uppnålad lapp så tavlan inte känns glest tom */
.empty-state{display:grid;place-items:center;min-height:260px;margin-top:22px}
.empty-note{position:relative;background:var(--note-yellow);border-radius:4px;padding:26px 30px;max-width:360px;text-align:center;
  transform:rotate(-1.3deg);box-shadow:3px 7px 16px rgba(40,25,10,.28)}
.empty-note::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a7d,var(--pin));box-shadow:1px 2px 3px rgba(0,0,0,.4)}
.empty-note p{margin:0;color:var(--ink);font-size:.98rem}

/* Slot list — tabell-lika rader mot korken. Kompakt EN rad per oclaimad post;
   claimade poster får egen rad och namn-chippen bryts ner under. Mjuka hairline-ramar. */
.slots{display:flex;flex-direction:column;gap:6px;margin-top:16px}
/* Tabell-lik rad: fast 3-kolumns grid [etikett | antal | åtgärder] så allt linjerar
   rakt över rader OCH add-raden. Chips hamnar på egen rad 2 under etiketten. */
.slot:not(.demo-slot){position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;column-gap:14px;row-gap:7px;border-radius:6px;
  border:1px solid var(--line);border-left:3px solid rgba(217,154,36,.5);padding:10px 14px;background:var(--paper);
  box-shadow:0 1px 2px rgba(30,18,6,.05);transition:border-color .14s,box-shadow .14s,background .14s}
.slot:not(.demo-slot):hover{border-color:rgba(120,90,40,.2);border-left-color:var(--warm);box-shadow:0 2px 6px rgba(30,18,6,.07)}
.slot.full{border-left-color:var(--good);background:linear-gradient(0deg,#4e9d610d,#4e9d610d),var(--paper)}
/* Etikett-cellen staplar: rubrik-rad överst, ev. not-rad under (bryter inte layouten).
   Baseline-flex fungerar bara när noten får plats vågrätt — den fulla inline-input:en
   åt upp all bredd och klämde noten. Kolumn-stapel = ren, prydlig rad. */
.slot-label-wrap{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:1px;min-width:0}
.slot-label{font-family:var(--serif);font-weight:700;font-size:1rem;line-height:1.3;min-width:0}
.slot-note{display:block;font-family:var(--sans);font-weight:400;color:var(--muted);font-size:.85rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Inline-redigerbar etikett i ägar-vyn — ser ut som text tills fokus. */
.slot-label-edit{font-family:var(--serif);font-weight:700;font-size:1rem;line-height:1.3;
  border:1px solid transparent;background:transparent;color:var(--ink);border-radius:5px;padding:3px 6px;margin:-3px -6px;
  width:100%;min-width:0;transition:border-color .12s,background .12s}
.slot-label-edit:hover{border-color:var(--line)}
.slot-label-edit:focus{outline:none;border-color:var(--warm);background:#fff;box-shadow:0 1px 3px rgba(30,18,6,.10)}
.slot-signs{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;gap:6px}
.who-chip{display:inline-flex;align-items:center;gap:4px;background:var(--note-mint);color:#2c4a35;border-radius:999px;padding:2px 10px;font-size:.85rem;font-family:var(--sans);font-weight:600;max-width:100%;box-shadow:none;border:1px solid rgba(78,157,97,.28)}
.who-chip.mine{background:var(--pin);color:#fff;border-color:var(--pin)}
.chip-x{border:0;background:none;color:inherit;font-size:1rem;line-height:1;cursor:pointer;padding:0 0 0 2px;opacity:.6}
.chip-x:hover{opacity:1}
/* Antal — höger-ställd tabellcell, tabulära siffror */
.slot-count{grid-column:2;grid-row:1;justify-self:end;font-family:var(--serif);font-weight:800;font-size:.82rem;
  font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;min-width:3.2em;text-align:right}
.slot-count.full{color:var(--good);text-transform:uppercase;font-size:.72rem;letter-spacing:.04em}
/* Åtgärder — höger-kolumn, konsekvent grupp */
.slot-actions{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:6px}

/* Inline "lägg till"-rad (snabb-add) längst ner i ägar-listan.
   Egen 2-kolumns layout [input(1fr) | kontroller(auto)]: data-radernas antal-kolumn
   är tom här, så den tomma cellen togs bort → pills+knapp linjerar mot samma högerkant. */
.slot-add{border-style:dashed;border-left-style:solid;border-color:var(--line);border-left-color:rgba(217,154,36,.35);background:rgba(250,246,238,.5)}
/* :not(.demo-slot) i bas-regeln har (0,2,0)-specificitet → matcha den för att
   verkligen skriva om grid-mallen (annars blev det en 0px-spökkolumn + 14px glapp). */
.slot-add:not(.demo-slot){grid-template-columns:minmax(0,1fr) auto}
.slot-add .slot-count{display:none}
.slot-add .slot-actions{grid-column:2;justify-self:end}
.slot-add:hover{border-color:rgba(120,90,40,.25);border-left-color:var(--warm)}
.inline-add-input{width:100%;font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--ink);
  border:1px solid transparent;background:transparent;border-radius:5px;padding:4px 6px;margin:-4px -6px}
.inline-add-input::placeholder{color:var(--muted);opacity:.7;font-weight:400}
.inline-add-input:focus{outline:none}
.inline-cap{display:inline-flex;gap:4px}
.inline-cap-pill{font:inherit;font-family:var(--sans);font-weight:600;font-size:.78rem;cursor:pointer;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--muted);
  transition:border-color .12s,color .12s,background .12s}
.inline-cap-pill:hover{border-color:var(--warm);color:var(--ink)}
.inline-cap-pill.on{background:var(--warm);border-color:var(--warm);color:#fff}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--paper);color:var(--muted);border-radius:5px;cursor:pointer;padding:0;
  box-shadow:none;transition:color .12s,border-color .12s,background .12s}
.iconbtn:hover{color:var(--accent-ink);border-color:rgba(181,58,47,.5);background:#fff}
.iconbtn.danger:hover{color:var(--danger);border-color:rgba(192,74,46,.5)}
.iconbtn:active{background:var(--paper)}
.iconbtn svg{display:block}

/* Kapacitets-kontroll i post-modalen — pill-val + utfällbar antal-box */
.cap{margin-top:4px}
.cap-pills{display:flex;flex-wrap:wrap;gap:8px}
.cap-pill{font:inherit;font-family:var(--serif);font-weight:700;font-size:.85rem;cursor:pointer;
  padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--muted);
  transition:border-color .12s,color .12s,background .12s,box-shadow .12s;box-shadow:1px 2px 3px rgba(30,18,6,.1)}
.cap-pill:hover{border-color:var(--warm);color:var(--ink)}
.cap-pill.on{background:var(--warm);border-color:var(--warm);color:#fff;box-shadow:1px 2px 4px rgba(30,18,6,.22)}
.cap-count{margin-top:12px;max-width:180px}
.cap-count[hidden]{display:none}

@media(max-width:560px){
  /* Mobil: etikett + antal på rad 1, åtgärder på rad 2, chips rad 3 — fortsatt linjerat. */
  .slot:not(.demo-slot){grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:8px}
  .slot-actions{grid-column:1 / -1;grid-row:2;justify-self:start;flex-wrap:wrap}
  .slot-signs{grid-row:3}
  /* Add-raden på mobil: input full bredd rad 1, kontroller (pills+knapp) på egen rad 2.
     Egen grid-column:2/justify-self:end skulle annars klämma ihop input:en till ~60px. */
  .slot-add:not(.demo-slot){grid-template-columns:minmax(0,1fr)}
  .slot-add .slot-actions{grid-column:1 / -1;grid-row:2;justify-self:stretch;justify-content:flex-end;flex-wrap:wrap}
}

/* Public head */
.pubhead h1{line-height:1.15}

/* Share modal */
.qr-tile{display:flex;justify-content:center;padding:16px;background:#fff;border:1px solid var(--line);border-radius:4px}
.qr-tile #qr{display:flex;line-height:0}
.share-link{display:flex;gap:8px;margin-top:14px}
.share-link input{flex:1;min-width:0;font-size:16px;color:var(--muted)}
.share-link .btn{flex:0 0 auto;white-space:nowrap}
.cal-feed{margin-top:16px;padding-top:16px;border-top:2px dashed rgba(60,40,15,.25)}
.cal-feed__title{font-family:var(--serif);font-weight:700;font-size:.95rem;margin-bottom:4px}

/* Consent + install */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;background:var(--paper);border-radius:4px;box-shadow:4px 8px 24px rgba(30,18,6,.32);padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;max-width:640px;margin:0 auto}
.consent-lead{font-size:.9rem;color:var(--ink)}
.consent-btns{display:flex;gap:8px;flex:0 0 auto}
/* Diskret avvisbar install-pill. Vänsterställd + auto-bredd → krockar inte med support-bubblan
   (nere till höger). Avvisas via ×; gömmer sig i 7 dagar (anm_install_dismissed). */
.installbtn{position:fixed;left:14px;right:auto;bottom:calc(14px + env(safe-area-inset-bottom, 0px));z-index:150;display:inline-flex;align-items:center;gap:2px;padding:0;background:var(--paper);color:var(--ink);border:0;border-radius:999px;box-shadow:3px 5px 14px rgba(30,18,6,.28);font:inherit;font-weight:700;font-size:.82rem;cursor:pointer;max-width:calc(100vw - 90px)}
.installbtn .ib-main{display:inline-flex;align-items:center;gap:6px;padding:8px 6px 8px 14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.installbtn .ib-main svg{display:block;flex:0 0 auto}
.installbtn .ib-x{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:30px;margin-right:4px;border-radius:999px;font-size:1.15rem;line-height:1;color:var(--muted);opacity:.8}
.installbtn .ib-x:hover{opacity:1;background:rgba(30,18,6,.10)}
.installbtn .ib-main:hover{color:var(--pin)}
/* När consent-baren visas: lyft install-pillen ovanför den så de inte överlappar. */
body:has(.consent) .installbtn{bottom:calc(84px + env(safe-area-inset-bottom, 0px))}

/* Toast + foot */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:6px;font-size:.88rem;z-index:50;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}
/* Kontrast: mörk text mot korken (paper på #dccaa4 = 1.5:1, oläsligt i småtext). */
.foot{margin-top:36px;color:var(--muted);font-size:.82rem;text-align:center;font-weight:600}
.foot a{color:var(--pin-dark)}
#appfoot{padding:8px 16px 40px;margin-top:0}

/* SEO-collapsible-kort (dolt-men-crawlbart), matchar kork-kortens stil (boutique-override nedan) */
.seo-more{position:relative; z-index:1; max-width:560px; margin:0 auto 22px; padding:2px 20px; color:var(--muted);
  background:var(--paper); border-radius:4px; box-shadow:4px 8px 18px rgba(30,18,6,.28);}
.seo-more>summary{cursor:pointer; list-style:none; font-family:var(--serif); font-size:.95rem; font-weight:600; color:var(--ink);
  padding:15px 2px; display:flex; align-items:center; gap:7px; user-select:none;}
.seo-more>summary::-webkit-details-marker{display:none}
.seo-more>summary::after{content:"›"; display:inline-block; transition:transform .15s; font-size:1.2rem; line-height:1; color:var(--muted); margin-left:auto;}
.seo-more[open]>summary{border-bottom:1px dashed var(--line);}
.seo-more[open]>summary::after{transform:rotate(90deg);}
.seo-more>summary:hover{color:var(--ink);}
.seo-more-body{font-size:.9rem; line-height:1.6; color:var(--ink); padding:12px 2px 14px;}
.seo-more-body h1{font-size:1.15rem; margin:8px 0 6px; color:var(--ink); font-family:var(--serif);}
.seo-more-body h2{font-size:1rem; margin:18px 0 6px; color:var(--ink); font-family:var(--serif);}
.seo-more-body h3{font-size:.92rem; margin:14px 0 3px; color:var(--ink); font-family:var(--serif);}
.seo-more-body p,.seo-more-body ul,.seo-more-body ol{margin:0 0 12px;}
.seo-more-body ul,.seo-more-body ol{padding-left:20px;}
[data-skin=boutique] .seo-more{background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:none}

/* "Dina listor" — sparade i webbläsaren (landning; besökta även på dashboard) */
.saved{max-width:560px;margin:38px auto 0}
.saved-head{color:var(--paper);text-shadow:0 1px 2px rgba(0,0,0,.35),2px 2px 0 rgba(0,0,0,.30);text-align:center;margin:0 0 2px}
.saved-sub{color:var(--muted);text-align:center;font-size:.85rem;margin:0 0 14px}
.saved-rows{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.saved-row{display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:4px;padding:10px 14px;
  box-shadow:2px 4px 10px rgba(30,18,6,.22)}
.saved-link{flex:1;min-width:0;font-weight:700;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-link:hover{color:var(--pin)}
.saved-x{flex:0 0 auto;border:0;background:none;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;padding:2px 6px}
.saved-x:hover{color:var(--danger)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:#2a1c0866;display:grid;place-items:center;z-index:40;padding:16px;overflow-y:auto}
.modal{background:var(--paper);border-radius:6px;padding:24px;max-width:440px;width:100%;box-shadow:6px 12px 32px rgba(20,12,4,.4)}
.modal h2{margin:0 0 4px}
.modal.checkout-modal{max-width:480px;max-height:92vh;max-height:92dvh;overflow-y:auto}
#ec-mount{min-height:120px}

:focus-visible{outline:3px solid var(--note-yellow);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ══════════════════════════════════════════════════════════════════════
   SKIN: BOUTIQUE — svalt papper-vitt, EN återhållen salvia-accent,
   Archivo grotesk + Newsreader serif, mycket luft, editorial/register-känsla.
   Portad från önskelista-mockupen (dir3-boutique). Applicerar på HELA appen
   (topbar, kort, knappar, dashboard, publik vy, modaler) för boutique-domäner.
   All app-funktion oförändrad — bara reskin via [data-skin=boutique].
   ══════════════════════════════════════════════════════════════════════ */
[data-skin=boutique]{
  --paper:#FBFBF9; --panel:#F1F0EC; --ink:#1C1C1A; --muted:#6E6C66; --line:#DAD8D1;
  --accent:#3D4A3E; --accent-ink:#2f3a30; --accent-soft:#EDEFEA;
  --good:#3D4A3E; --danger:#8a3b2e; --warm:#3D4A3E;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hand:'Archivo',sans-serif;
}
[data-skin=boutique]{background:var(--paper)}   /* html-bas (matchar kork-fixen ovan) */
[data-skin=boutique] body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
}
[data-skin=boutique] body::before{display:none}         /* ingen kork-speckle */
[data-skin=boutique] a{color:var(--accent)}
[data-skin=boutique] .hand{font-family:var(--sans)}
[data-skin=boutique] .wrap{max-width:1040px}

/* Typografi: Newsreader-serif för rubriker, Archivo för labels/UI */
[data-skin=boutique] h1{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05}
[data-skin=boutique] h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:1.5rem}
[data-skin=boutique] h3{font-family:var(--serif);font-weight:500}
[data-skin=boutique] label{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Topbar — hårlinje, ingen träribba */
[data-skin=boutique] .topbar{
  background:var(--paper);border-bottom:1px solid var(--line);box-shadow:none;padding:20px 24px}
[data-skin=boutique] .logo b{
  font-family:var(--sans);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);gap:9px}
[data-skin=boutique] .logo span{
  color:var(--muted);font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
[data-skin=boutique] .topbar .right{font-size:.82rem}
[data-skin=boutique] .topbar .right .muted{color:var(--muted)}

/* Buttons — flata, editorial. Primär = ink; hover → salvia */
[data-skin=boutique] .btn{
  font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.03em;
  background:var(--ink);color:var(--paper);border-radius:2px;padding:13px 24px;
  box-shadow:none;transition:background .2s,transform .12s}
[data-skin=boutique] .btn:hover{background:var(--accent);transform:none;box-shadow:none}
[data-skin=boutique] .btn:active{transform:translateY(1px);box-shadow:none}
[data-skin=boutique] .btn.sm{padding:9px 16px;font-size:.78rem;box-shadow:none}
[data-skin=boutique] .btn.subtle{
  background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none}
[data-skin=boutique] .btn.subtle:hover{background:var(--ink);color:var(--paper);box-shadow:none}
[data-skin=boutique] .btn.sm.subtle{box-shadow:none}
[data-skin=boutique] .btn.danger{background:transparent;color:var(--danger);box-shadow:none}
[data-skin=boutique] .btn.danger:hover{background:transparent;color:var(--accent-ink)}
[data-skin=boutique] .linkbtn{
  color:var(--muted);font-family:var(--sans);font-weight:600;font-size:.8rem}
[data-skin=boutique] .linkbtn:hover{color:var(--ink)}
[data-skin=boutique] .wrap .linkbtn{color:var(--muted)}
[data-skin=boutique] .wrap .linkbtn:hover{color:var(--ink)}

/* Cards / forms — vit panel, hårlinje, ingen lapp-skugga */
[data-skin=boutique] .card{
  background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:none}
[data-skin=boutique] input,[data-skin=boutique] select,[data-skin=boutique] textarea{
  border:1px solid var(--line);border-radius:2px;background:#fff}
[data-skin=boutique] input:focus,[data-skin=boutique] select:focus,[data-skin=boutique] textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
[data-skin=boutique] .pill{
  background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:2px;
  box-shadow:none;font-family:var(--sans);letter-spacing:.14em}
[data-skin=boutique] .pill.pro{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-skin=boutique] .divider{border-top:1px solid var(--line)}

/* Landing hero — editorial, ingen rotation/pins */
[data-skin=boutique] .hero>div:first-child{
  background:transparent;border-radius:0;padding:0;box-shadow:none;transform:none}
[data-skin=boutique] .hero>div:first-child::before,
[data-skin=boutique] .hero>div:first-child::after{display:none}
[data-skin=boutique] .hero .pill{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);background:transparent;box-shadow:none;transform:none;padding:0;
  border:0;margin-bottom:22px}
[data-skin=boutique] .hero h1{font-size:clamp(2.4rem,6vw,3.8rem)}
[data-skin=boutique] .hero h1 .u{display:inline}
[data-skin=boutique] .hero h1 .u::after{display:none}   /* ingen handstruken understrykning */
[data-skin=boutique] .hero p{color:var(--muted);font-size:1.1rem;font-family:var(--sans)}

/* Plans — jämförelse-panel, hårlinjer */
[data-skin=boutique] .plan{
  background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:none;transform:none}
[data-skin=boutique] .plan::before{display:none}
[data-skin=boutique] .plan.pro{background:var(--panel);transform:none}
[data-skin=boutique] .plan.pro::before{display:none}
[data-skin=boutique] .price{font-family:var(--serif);font-weight:400;font-size:2.6rem}
[data-skin=boutique] .feat li:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M2 8l4 4 10-11' stroke='%233D4A3E' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-skin=boutique] .plan.pro .feat li:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M2 8l4 4 10-11' stroke='%233D4A3E' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Section-rubriker på papper (inte kork) → mörk ink, ingen skugga */
[data-skin=boutique] .wrap>h2{color:var(--ink);text-shadow:none}

/* How it works — index-lista, hårlinjer, ingen pin/rotation */
[data-skin=boutique] .how-step{
  background:transparent;border-radius:0;padding:28px 26px;box-shadow:none;transform:none;
  border-left:1px solid var(--line)}
[data-skin=boutique] .how-step:nth-child(1),
[data-skin=boutique] .how-step:nth-child(2),
[data-skin=boutique] .how-step:nth-child(3){transform:none}
[data-skin=boutique] .how-step:first-child{border-left:0;padding-left:0}
[data-skin=boutique] .how-step::before{display:none}
[data-skin=boutique] .how-step h3{font-family:var(--serif);font-weight:500;font-size:1.35rem}
[data-skin=boutique] .how-num{
  font-family:var(--sans);color:var(--accent);font-size:.8rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
[data-skin=boutique] .how-step svg{filter:grayscale(1) opacity(.9)}
@media(max-width:680px){
  [data-skin=boutique] .how-step{border-left:0;border-top:1px solid var(--line);padding-left:26px}
  [data-skin=boutique] .how-step:first-child{border-top:0}
}

/* Demo-kort — ren panel, ingen rotation/pin */
[data-skin=boutique] .demo-card{border:1px solid var(--line);background:#fff;box-shadow:none;transform:none;padding:0}
[data-skin=boutique] .demo-head{
  padding:14px 18px;border-bottom:1px solid var(--line);margin-bottom:0}
[data-skin=boutique] .demo-head .muted{font-family:var(--sans);font-size:.9rem}
[data-skin=boutique] .demo-counter{
  font-family:var(--sans);color:var(--muted);background:transparent;border:1px solid var(--line);
  border-radius:2px;transform:none;box-shadow:none;letter-spacing:.1em}
[data-skin=boutique] .demo-slot{border-left:0;border-bottom:1px solid var(--line);box-shadow:none;background:#fff;padding:14px 18px}

/* Dashboard tiles — register-rader, hårlinje, ingen färgad lapp */
[data-skin=boutique] .tile{
  background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:none}
[data-skin=boutique] .tile::before{display:none}
[data-skin=boutique] .tile:nth-child(3n+2),
[data-skin=boutique] .tile:nth-child(3n){background:#fff}
[data-skin=boutique] .tile:hover{transform:translateY(-2px);border-color:var(--accent)}
[data-skin=boutique] .tile h3{font-family:var(--serif);font-weight:500}
[data-skin=boutique] .tile>span.muted:last-child{color:var(--accent)}
/* Överblicks-räknare — flat register-badge (matchar demo-counter i boutique) */
[data-skin=boutique] .tile-counter,
[data-skin=boutique] .board-counter{
  font-family:var(--sans);font-weight:600;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:2px;transform:none;box-shadow:none;letter-spacing:.08em}

/* Board-head + empty-state — editorial, mörk ink, ingen lapp */
[data-skin=boutique] .board-head h1{color:var(--ink);text-shadow:none}
[data-skin=boutique] .empty-note{
  background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:none;transform:none}
[data-skin=boutique] .empty-note::before{display:none}
[data-skin=boutique] .empty-note p{color:var(--muted)}

/* Slots — register-rader, tunn accent-kant, ingen tejp/rotation */
[data-skin=boutique] .slot{
  background:#fff;border:1px solid var(--line);border-left:2px solid var(--line);
  border-radius:2px;box-shadow:none;transform:none}
[data-skin=boutique] .slot:nth-child(odd),
[data-skin=boutique] .slot:nth-child(even){transform:none}
[data-skin=boutique] .slot:hover{transform:none;box-shadow:none;border-color:var(--accent)}
[data-skin=boutique] .slot::before{display:none}
[data-skin=boutique] .slot.full{
  border-left-color:var(--accent);background:var(--accent-soft)}
[data-skin=boutique] .slot-label{font-family:var(--serif);font-weight:500;font-size:1.1rem}
[data-skin=boutique] .slot-note{font-family:var(--sans);color:var(--muted)}
/* Inline-fälten (etikett-edit + snabb-add) ärver annars den generiska boutique-input-ramen
   ([data-skin=boutique] input{border+bg#fff}) → varje rad såg ut som en fyrkantig formruta.
   Återställ "text tills fokus"-mönstret (samma som kork-skin + önskelistas .wf). */
[data-skin=boutique] .slot-label-edit,
[data-skin=boutique] .inline-add-input{
  border:1px solid transparent;background:transparent;border-radius:4px;box-shadow:none}
[data-skin=boutique] .slot-label-edit{font-family:var(--serif);font-weight:500;font-size:1.1rem}
[data-skin=boutique] .slot-label-edit:hover{border-color:var(--line);background:transparent}
[data-skin=boutique] .slot-label-edit:focus,
[data-skin=boutique] .inline-add-input:focus{
  border-color:var(--accent);background:#fff;box-shadow:0 1px 4px rgba(28,28,26,.08)}
[data-skin=boutique] .inline-add-input{font-family:var(--serif);font-weight:500;font-size:1.1rem}
/* Add-radens kapacitets-pills: flata boutique-pills (matchar cap-pill/register-look) */
[data-skin=boutique] .inline-cap-pill{
  font-family:var(--sans);border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--muted)}
[data-skin=boutique] .inline-cap-pill:hover{border-color:var(--accent);color:var(--ink)}
[data-skin=boutique] .inline-cap-pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
[data-skin=boutique] .slot-add{background:transparent;border-style:dashed;border-left-style:dashed}
[data-skin=boutique] .slot-add:focus-within{border-style:solid;border-left-style:solid;border-color:var(--accent)}
[data-skin=boutique] .who-chip{
  font-family:var(--sans);font-size:.8rem;background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--line);border-radius:2px;box-shadow:none}
[data-skin=boutique] .who-chip.mine{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Count-badge — flat, ingen rotation/skugga */
[data-skin=boutique] .slot-count{
  font-family:var(--sans);font-weight:600;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:2px;box-shadow:none;transform:none;letter-spacing:.08em}
[data-skin=boutique] .slot-count.full{color:var(--accent);border-color:var(--accent)}
/* Icon-knapp — hårlinje */
[data-skin=boutique] .iconbtn{
  border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:2px;box-shadow:none}
[data-skin=boutique] .iconbtn:hover{color:var(--ink);border-color:var(--ink);transform:none;background:#fff}
/* Kapacitets-pills — flata, hårlinje, salvia vid val */
[data-skin=boutique] .cap-pill{
  font-family:var(--sans);font-weight:600;font-size:.8rem;border:1px solid var(--line);border-radius:2px;
  background:#fff;color:var(--muted);box-shadow:none}
[data-skin=boutique] .cap-pill:hover{border-color:var(--accent);color:var(--ink)}
[data-skin=boutique] .cap-pill.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}
[data-skin=boutique] .tile:nth-child(2n),
[data-skin=boutique] .tile:nth-child(2n+1){transform:none}
[data-skin=boutique] .tile:hover{transform:translateY(-2px);border-color:var(--accent)}

/* Share / cal / modal — hårlinjer */
[data-skin=boutique] .qr-tile{border:1px solid var(--line);border-radius:2px}
[data-skin=boutique] .cal-feed{border-top:1px solid var(--line)}
[data-skin=boutique] .cal-feed__title{font-family:var(--serif);font-weight:500}
[data-skin=boutique] .modal{background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:0 20px 60px rgba(28,28,26,.18)}
[data-skin=boutique] .modal-bg{background:rgba(28,28,26,.4)}

/* Consent / install / toast / foot */
[data-skin=boutique] .consent{background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:none}
[data-skin=boutique] .installbtn{background:#fff;border:1px solid var(--line);box-shadow:none}
[data-skin=boutique] .installbtn .ib-main:hover{color:var(--accent)}
[data-skin=boutique] .installbtn .ib-x:hover{background:rgba(28,28,26,.06)}
[data-skin=boutique] .toast{background:var(--ink);color:var(--paper);border-radius:2px}
[data-skin=boutique] .foot{color:var(--muted);opacity:1;font-family:var(--sans)}
[data-skin=boutique] .foot a{color:var(--accent)}
/* "Dina listor" (sparade i webbläsaren) — register-rader i boutique */
[data-skin=boutique] .saved-head{color:var(--ink);text-shadow:none;font-family:var(--serif);font-weight:400}
[data-skin=boutique] .saved-sub{color:var(--muted);opacity:1}
[data-skin=boutique] .saved-row{background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:none}
[data-skin=boutique] .saved-link{font-weight:600}
[data-skin=boutique] .saved-link:hover{color:var(--accent)}

[data-skin=boutique] :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── Intervallval (månad/år) i uppgraderings-modalen ── */
.iv-pick{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.iv-opt{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:11px 12px;border:1.5px solid var(--line);border-radius:6px;cursor:pointer;background:#fff}
.iv-opt input{accent-color:var(--accent);margin:0;flex:0 0 auto}
.iv-opt .iv-name{font-weight:700}
.iv-opt .iv-price{margin-left:auto;font-size:.9rem;color:var(--muted)}
.iv-opt .iv-tag{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:2px 8px}
.iv-opt:has(input:checked){border-color:var(--accent);background:#fdf1ef}
[data-skin=boutique] .iv-opt{border-radius:2px}
[data-skin=boutique] .iv-opt .iv-tag{border-radius:2px}
/* ── Bottom-sheet swipe-ner-stäng (mobil) ── */
.modal.mdrag{transition:transform .28s cubic-bezier(.22,.61,.36,1);}
.modal .mhandle{display:none;}
@media (max-width:560px){
  .modal .mhandle{display:block; width:38px; height:4px; border-radius:999px; background:var(--line);
    margin:-8px auto 12px; touch-action:none;}
}

/* ── Egen datumväljare (dp) — konsekvent på iOS/Android/desktop ── */
.dp { position:relative; }
.dp-trigger { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; font-size:1rem; cursor:pointer; }
.dp-trigger:hover { border-color:var(--accent); }
.dp-trigger svg { flex:0 0 auto; color:var(--muted); }
.dp-label { flex:1 1 auto; }
.dp-ph { color:var(--muted); }
.dp-pop { position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:280px; max-width:calc(100vw - 32px); background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px -12px rgba(0,0,0,.35); padding:12px; }
.dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dp-title { font-weight:600; text-transform:capitalize; }
.dp-nav { border:1px solid var(--line); background:var(--paper); color:var(--ink); width:30px; height:30px; border-radius:8px; font-size:1.2rem; line-height:1; cursor:pointer; }
.dp-nav:hover { border-color:var(--accent); }
.dp-wd { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.dp-wd span { text-align:center; font-size:.72rem; color:var(--muted); padding:2px 0; }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-c { height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:.92rem; }
.dp-empty { visibility:hidden; }
.dp-day { border:0; background:transparent; color:var(--ink); cursor:pointer; }
.dp-day:hover { background:var(--line); }
.dp-today { box-shadow:inset 0 0 0 1px var(--accent); }
.dp-sel { background:var(--accent); color:#fff; }
.dp-sel:hover { background:var(--accent-ink,var(--accent)); }
.dp-foot { display:flex; justify-content:space-between; margin-top:10px; }
.dp-foot button { border:0; background:transparent; color:var(--accent-ink,var(--accent)); font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; padding:4px 6px; border-radius:6px; }
.dp-foot button:hover { background:var(--line); }

/* Låst lista — not i publik vy */
.lock-note{background:var(--note-yellow,#f4e08a);color:var(--ink);border-radius:8px;padding:9px 14px;font-size:.9rem;font-weight:600;margin-bottom:12px;text-align:center}