/* 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}
html{scroll-behavior:smooth}
body{
  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%}
.topbar-mat-right .muted{color:var(--paper)}
.topbar-mat-right a.linkbtn{color:var(--paper)}
.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;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 */
.wrap>h2{color:var(--paper);text-shadow:2px 2px 0 rgba(0,0,0,.22)}

/* 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{cursor:default}
.demo-slot .slot-count{min-width:auto}

/* 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:2px 2px 0 rgba(0,0,0,.22)}

/* Ö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 — lappar med pin-kant + post-it-hantverk */
.slots{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.slot{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-radius:4px;
  border-left:5px solid var(--warm);padding:15px 17px;background:var(--paper);
  box-shadow:3px 6px 14px rgba(30,18,6,.24);transition:transform .12s,box-shadow .12s}
.slot:nth-child(odd){transform:rotate(-.35deg)}
.slot:nth-child(even){transform:rotate(.35deg)}
.slot:hover{transform:rotate(0) translateY(-1px);box-shadow:4px 9px 18px rgba(30,18,6,.28)}
/* liten tejp-bit uppe till vänster */
.slot::before{content:"";position:absolute;top:-7px;left:15px;width:34px;height:13px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(212,224,138,.4));
  border:1px solid rgba(120,90,40,.18);border-radius:1px;transform:rotate(-4deg);
  box-shadow:0 1px 2px rgba(30,18,6,.14);opacity:.9}
.slot.full{border-left-color:var(--good);background:linear-gradient(0deg,#4e9d6114,#4e9d6114),var(--paper)}
.slot.full::before{background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(159,224,172,.45))}
.slot-main{flex:1;min-width:0}
.slot-label{font-family:var(--serif);font-weight:700;font-size:1.06rem;line-height:1.25}
.slot-note{font-family:var(--sans);font-weight:400;color:var(--muted);font-size:.92rem}
.slot-signs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.who-chip{display:inline-flex;align-items:center;gap:4px;background:var(--note-mint);color:#2c4a35;border-radius:999px;padding:3px 11px;font-size:.86rem;font-family:var(--hand);max-width:100%;box-shadow:1px 2px 3px rgba(30,18,6,.14)}
.who-chip.mine{background:var(--pin);color:#fff}
.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}
.slot-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto;text-align:right}
/* "X av Y"-badge — samma språk som demo-counter på landningen */
.slot-count{font-family:var(--serif);font-weight:800;font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;color:#fff;background:var(--warm);padding:3px 10px;border-radius:5px;
  white-space:nowrap;box-shadow:1px 2px 4px rgba(30,18,6,.22);transform:rotate(-2deg)}
.slot-count.full{background:var(--good)}
/* Ägar-actions — prydlig konsekvent grupp */
.slot-actions{display:flex;align-items:center;gap:8px}
.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:1px 2px 3px rgba(30,18,6,.14);transition:color .12s,border-color .12s,transform .12s,background .12s}
.iconbtn:hover{color:var(--accent-ink);border-color:var(--accent-ink);transform:translateY(-1px);background:#fff}
.iconbtn:active{transform:translateY(0)}
.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){
  .slot{flex-direction:column;align-items:stretch}
  .slot-side{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;flex-wrap:wrap}
  .slot-actions{flex-wrap:nowrap}
}

/* 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:.82rem;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}
.installbtn{position:fixed;left:16px;bottom:16px;z-index:150;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;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:.85rem;cursor:pointer}
.installbtn:hover{color:var(--pin)}
.installbtn svg{display:block}

/* 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}
.foot{margin-top:36px;color:var(--paper);opacity:.85;font-size:.82rem;text-align:center;font-weight:600}
.foot a{color:var(--paper)}

/* 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}

: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] 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)}
[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:hover{color:var(--accent)}
[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)}

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