.app{--side:#faf8f5;--bg:#f4f0ec;--card:#ffffff;--soft:#faf7f4;--ink:#16110e;--ink2:#3d3530;--mut:#776c66;--faint:#9b908a;--line:#e6ded7;--line-soft:#f0ebe6;--line2:#c9bcb4;--acc:#8e2f2a;--ok:#24804a;--okt:#eaf5ee;--okd:#1a5f37;--okl:#cfe7d8;--hover:#ebe5e0;--chip:#f3ece6;--badt:#fbe9e7;--badd:#9b2c22;color-scheme:light}
.app.dark{--side:#1a1613;--bg:#14110f;--card:#1d1916;--soft:#231e1a;--ink:#f2ece7;--ink2:#d3c8c1;--mut:#a2958d;--faint:#7d716a;--line:#362d28;--line-soft:#2a2420;--line2:#4d413a;--acc:#e08a7f;--ok:#5fc287;--okt:#1a3024;--okd:#8fdcab;--okl:#2c4a37;--hover:#29231f;--chip:#2c2521;--badt:#3a1d1a;--badd:#f0a39a;color-scheme:dark}
.app.dark .bd{color:#16110e;background:linear-gradient(180deg,#fbf7f3 0%,#e9e1da 100%);box-shadow:0 0 0 1px #d8cec6,inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.12),0 4px 10px -6px rgba(0,0,0,.6)}
.app.dark .fi.sel{background-color:var(--soft)}
/* Mörkt läge: behåll djupet – ljus kant upptill, mörk underkant och svarta skuggor i stället för de varma som försvinner mot mörk bakgrund */
.app.dark .bg{background:linear-gradient(180deg,#2e2722 0%,#211b17 100%);box-shadow:0 0 0 1px #3d332c,inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 0 rgba(0,0,0,.35),0 4px 10px -6px rgba(0,0,0,.7)}
.app.dark .bg:hover{background:linear-gradient(180deg,#332b25 0%,#241e1a 100%)}
.app.dark .kb,.app.dark .ib{background:linear-gradient(180deg,#2a231f 0%,#1f1a16 100%);box-shadow:0 0 0 1px #3d332c,inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px -3px rgba(0,0,0,.6)}
.app.dark .seg button.on{background:linear-gradient(180deg,#332b25 0%,#26201c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 3px rgba(0,0,0,.55)}
.app.dark .card{box-shadow:0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.04),0 10px 24px -16px rgba(0,0,0,.7)}
.app.dark .fi{box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 3px rgba(0,0,0,.35)}
.app.dark .pz-win{box-shadow:0 0 0 2px var(--line),inset 0 2px 0 rgba(255,255,255,.06),0 0 0 rgba(0,0,0,0)!important}
.app.dark .pz-edge-back{box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 12px 20px -10px rgba(0,0,0,.55)}
.app.dark .pz-dd{box-shadow:0 0 0 2px var(--line),0 40px 70px -24px rgba(0,0,0,.75)!important}
.app.dark .pz-tile,.app.dark .pz-f,.app.dark .pk-file,.app.dark .ps-ta{box-shadow:inset 0 0 0 2px var(--line),inset 0 3px 5px rgba(0,0,0,.3)}
/* Ljust läge med samma djup som mörkt: ljus överkant, mörkare underkant och en mjuk skugga under. */
.app:not(.dark) .card{box-shadow:0 0 0 1px var(--line),inset 0 1px 0 #fff,0 12px 26px -18px rgba(70,38,22,.30),0 2px 4px -2px rgba(70,38,22,.08)}
.app:not(.dark) .bg{background:linear-gradient(180deg,#fffdfb 0%,#f2ebe4 100%);box-shadow:0 0 0 1px var(--line),inset 0 1px 0 #fff,inset 0 -2px 0 rgba(70,38,22,.08),0 4px 10px -6px rgba(70,38,22,.38)}
.app:not(.dark) .bg:hover{background:linear-gradient(180deg,#fff 0%,#efe7df 100%)}
.app:not(.dark) .kb{background:linear-gradient(180deg,#fffdfb 0%,#f3ece6 100%);box-shadow:0 0 0 1px var(--line),inset 0 1px 0 #fff,0 2px 6px -3px rgba(70,38,22,.35)}
.app:not(.dark) .seg button.on{background:linear-gradient(180deg,#fff 0%,#f6f0ea 100%);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(70,38,22,.08),0 2px 4px -1px rgba(70,38,22,.22)}
.app:not(.dark) .fi{box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 3px rgba(70,38,22,.07)}
/* Sidans egen bakgrund (även det som syns när man drar förbi kanten på mobilen) följer temat.
   Färgvariablerna finns bara på .app, så färgerna står här direkt. */
html,body{background:#f4f0ec}
html:has(.app.dark),html:has(.app.dark) body{background:#14110f;color-scheme:dark}
/* Mobil: ytan ovanför sidan (statusraden i Safari) får samma färg som headern. Själva sidan har sin egen bakgrund i .app. */
@media (max-width:820px){html:has(.mh),html:has(.mh) body{background:#faf8f5}html:has(.app.dark .mh),html:has(.app.dark .mh) body{background:#1a1613}}
body{margin:0}
a{color:var(--ink)}a:hover{color:var(--acc)}
.mi{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:11px;width:100%;height:36px;padding:0 10px;border-radius:9px;color:var(--ink2);font-size:14.5px;transition:background .15s}
.mi:hover{background:var(--hover);color:var(--ink)}
.mi svg{flex:none;width:17px;height:17px;color:var(--mut)}
.mi.on{background:var(--card);color:var(--ink);font-weight:500;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(22,17,14,.05)}
.mi.on svg{color:var(--ink)}
.mi.off{color:var(--faint)}
.logo{display:block;width:72px;aspect-ratio:51/12;background:var(--ink);-webkit-mask:url(assets/ljuvla-logo.svg) center/contain no-repeat;mask:url(assets/ljuvla-logo.svg) center/contain no-repeat}
.dv{height:1px;margin:10px -12px;background:var(--line)}
/* Sidomenyn: egen ljusare yta hela vägen ner, med en linje mot innehållet */
.side{flex:1 1 240px;align-self:stretch;display:flex;flex-direction:column;gap:2px;margin:-10px 0 -10px -10px;padding:20px 12px 16px;box-sizing:border-box;background:var(--side);box-shadow:inset -1px 0 0 var(--line)}
.side .sep{margin-left:-12px;margin-right:-12px;padding-left:22px;padding-right:22px;border-top:1px solid var(--line)}
/* Kontot längst ner i sidomenyn: bild eller initialer, namn och roll. Klick öppnar kontomenyn. */
.me-btn{all:unset;box-sizing:border-box;cursor:pointer;flex:1;width:0;min-width:0;display:flex;align-items:center;gap:10px;margin:-6px 0 -6px -8px;padding:6px 8px;border-radius:10px;transition:background .15s}
.me-btn:hover{background:var(--hover)}
.me-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.me-av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--card);display:grid;place-items:center;font:600 12px "Geist Mono",monospace;overflow:hidden}
.me-av img,.av img{width:100%;height:100%;object-fit:cover;display:block}
.me-nm{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{overflow:hidden}
.acc-pic{display:flex;align-items:center;gap:16px;padding:4px 0 18px;margin-bottom:16px;border-bottom:1px solid var(--line-soft)}
.acc-pic .me-av{width:64px;height:64px;font-size:20px}
.acc-pic b,.acc-pw b{display:block;font-size:14px;font-weight:600}
.acc-pw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.acc-pw .hint{display:block;margin-top:2px}
.acc-pic .hint{display:block;margin:2px 0 10px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Mobil: en rad överst med loggan och en hamburgermeny. Sidomenyn glider in från höger under raden. */
.mh{display:none}
.mh-btn{width:40px;height:40px;border-radius:11px}
.mh-btn svg{width:20px;height:20px;overflow:visible}
.mh-btn path{transform-box:view-box;transform-origin:12px 12px;transition:transform .28s cubic-bezier(.3,.7,.2,1),opacity .2s}
.mh-btn.open .h1{transform:rotate(45deg) translateY(5px)}
.mh-btn.open .h2{opacity:0;transform:scaleX(.2)}
.mh-btn.open .h3{transform:rotate(-45deg) translateY(-5px)}
.mnb{display:none}
@keyframes mnbIn{from{opacity:0}}
@media (max-width:820px){
  .app{align-content:flex-start}
  .app:has(> .mh){padding-top:70px!important}
  /* Raden ligger överst på sidan och skrollar bort med innehållet. */
  .mh{display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;right:0;z-index:46;height:60px;box-sizing:border-box;margin:0;padding:0 12px 0 18px;background:var(--side);box-shadow:inset 0 -1px 0 var(--line)}
  .side{position:fixed;top:60px;right:0;bottom:0;z-index:45;width:min(340px,100%);margin:0;padding:10px 12px 24px;overflow-y:auto;overscroll-behavior:contain;box-shadow:inset 1px 0 0 var(--line),-30px 0 60px -30px rgba(22,17,14,.35);transform:translateX(100%);visibility:hidden;transition:transform .3s cubic-bezier(.3,.7,.2,1),visibility 0s .3s}
  .side.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.3,.7,.2,1)}
  .side .side-top,.side .side-top + .dv{display:none!important}
  .mnb{display:block;position:fixed;top:60px;left:0;right:0;bottom:0;z-index:44;background:rgba(22,17,14,.38);animation:mnbIn .3s ease}
  .side .mi{height:42px;font-size:15px}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.side,.side.open,.mh-btn path{transition:none}.mnb{animation:none}}
.mi{--kb:var(--side)}.mi:hover{--kb:var(--hover)}.mi.on{--kb:var(--card)}
.mi svg{overflow:visible}
/* ===== Mall för alla sidor =====
   Sida: rubrik (h1), ev. flikar (.seg) direkt under, sedan kort i en kolumn (.page) med 16 px mellanrum.
   Kort: .card + .ch (rubrik 15 px, till höger meta eller en liten knapp) + .cb (innehåll) eller tabell, ev. .cf (fot).
   Verktygsrad över tabeller: .tbar (sök, filter, Exportera). Tabeller: .tb, en kolumn .grow tar resten,
   belopp, gränser och datum vänsterställs som allt annat, åtgärder sist (.act). Uppgifter: .kv (etikett 280 px, värde direkt bredvid). */
html{scrollbar-gutter:stable;overflow-y:scroll}
.page{display:flex;flex-direction:column;gap:16px}
.tbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.tbar .fi{height:38px;font-size:14px}
.tbar .srch{flex:1 1 240px;position:relative}
.tbar .srch .fi{padding-left:36px}
.tbar .srch svg{position:absolute;left:13px;top:12px}
.tbar .fi.sel{flex:0 1 180px}
.tbar .meta{margin-left:auto;font-size:13px;color:var(--mut)}
.cf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 22px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--mut)}
.bd.sm,.bg.sm{height:32px;padding:0 13px;font-size:13px}
.cb > .kv{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:4px 24px;align-items:baseline}
.cb > .kv > :last-child{justify-self:start;text-align:left}
.tb th.act,.tb td.act{width:1%;white-space:nowrap;text-align:right}
/* Main: sidans innehåll. På mobil 16 px kant mot skärmen. */
.mn{flex:999 1 560px;min-width:0;box-sizing:border-box;padding:18px 10px 48px}
.ttl{margin:0;font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
/* Breda tabeller som rullar i sidled inne i kortet: en skugga visar att det finns mer. */
.tw{background:linear-gradient(90deg,var(--card) 30%,rgba(255,255,255,0)) left/32px 100% no-repeat local,linear-gradient(270deg,var(--card) 30%,rgba(255,255,255,0)) right/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(22,17,14,.13),transparent) left/10px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(22,17,14,.13),transparent) right/10px 100% no-repeat scroll}
.card > .tw:last-child{border-radius:0 0 16px 16px}
@media (max-width:640px){
  .mn{padding:16px 6px 40px}
  .ttl{font-size:26px}
  .ch{padding:14px 16px;min-height:61px}
  .cb{padding:16px}
  .cf{padding:12px 16px}
  .tbar{padding:12px 16px}
  .tbar{flex-wrap:nowrap}
  .tbar .srch{flex:1 1 0;min-width:0}
  .tbar .srch .fi{width:100%;min-width:0;text-overflow:ellipsis}
  .tbar > .bg{flex:none}
  .tbar .fi.sel{flex:1 1 140px}
  .tb th:first-child,.tb td:first-child{padding-left:16px}
  .tb th:last-child,.tb td:last-child{padding-right:16px}
  .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg button{flex:none}
  .dlg{padding:20px 18px 16px}
  .acts .bd,.acts .bg{flex:1 1 auto}
  .card[style*="padding: 36px 32px"]{padding:22px 16px!important}
  .pz{height:300px}
  /* Tabeller som blir en lista på mobil: en rad per post, cellerna radbryts och får en liten etikett. */
  .tb.stk,.tb.hs,.tbar + .tw > .tb:has(th.act){display:block;min-width:0!important;table-layout:auto!important}
  .tb.stk colgroup,.tb.stk thead,.tb.hs thead,.tbar + .tw > .tb:has(th.act) thead{display:none}
  .tb.stk tbody,.tb.hs tbody,.tbar + .tw > .tb:has(th.act) tbody{display:block}
  .tb.stk tr,.tb.hs tr,.tbar + .tw > .tb:has(th.act) tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
  .tb.stk tr:last-child,.tb.hs tr:last-child,.tbar + .tw > .tb:has(th.act) tr:last-child{border-bottom:0}
  .tb.stk td,.tb.hs td,.tbar + .tw > .tb:has(th.act) td{display:block;padding:0!important;border:0!important;background:none!important;white-space:normal!important;min-width:0!important;width:auto!important}
  .tb.stk td:first-child{flex:1 1 100%}
  .tb.stk td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font-size:12px;font-weight:400;font-family:"Schibsted Grotesk",system-ui,sans-serif;color:var(--mut)}
  .tb.stk td.act,.tb.hs td:last-child,.tbar + .tw > .tb:has(th.act) td.act{margin-left:auto}
  .tb.stk td.empty,.tb.hs td.empty,.tbar + .tw > .tb:has(th.act) td.empty{flex:1 1 100%;padding:14px 0!important}
  /* Utbetalningar och Historik: referens och belopp på första raden, beskrivningen under. */
  .tb.py td:first-child{flex:0 0 auto}
  .tb.py td:nth-child(3),.tb.hs td:nth-child(3){flex:1 1 100%;order:-1}
  .tb.py td:nth-child(1),.tb.py td:nth-child(2),.tb.hs td:nth-child(1),.tb.hs td:nth-child(2){order:-2}
  .tb.hs td:nth-child(5){display:none}
  /* Mejl, Sms, Kalkylark: mottagare och status, sedan innehållet. */
  .tbar + .tw > .tb:has(th.act) td:first-child{flex:1 1 auto}
  .tbar + .tw > .tb:has(th.act) td:nth-child(3){flex:1 1 100%}
  /* Logg: tid och användare, sedan händelsen. */
  .tb.lg td:first-child{flex:0 0 auto}
  .tb.lg td:nth-child(3){flex:1 1 100%}
}
.card.fx{display:flex;flex-direction:column}
.card.fx .cb{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.card.fx .cb p{margin:0;font-size:14px;line-height:1.55;color:var(--mut)}
.card.fx .cb button{margin-top:auto}
@media (max-width:640px){.cb > .kv{grid-template-columns:minmax(0,1fr)}}
/* Utbetalningar och Historik: lika höga rader, med eller utan knapp i sista kolumnen. */
.tb.hs tbody tr{height:59px}
/* Utbetalningar och Historik: fasta kolumnbredder, så att rubrikerna står still när man bläddrar mellan sidor
   (med automatisk tabellayout följde bredderna innehållet på varje sida). Beskrivning tar resten.
   Utan Beskrivning (skin-katalogen) fördelas bredden på de andra kolumnerna i samma proportioner. */
@media (min-width:641px){
  .tb.hs{table-layout:fixed}
  .tb.hs th{box-sizing:border-box}
  .tb.hs th:nth-child(1){width:12%}.tb.hs th:nth-child(2){width:10%}.tb.hs th:nth-child(3){width:auto}
  .tb.hs th:nth-child(4){width:14%}.tb.hs th:nth-child(5){width:9%}.tb.hs th:nth-child(6){width:11%}
  .tb.hs th:nth-child(7){width:14%}.tb.hs th:nth-child(8){width:14%}
  .tb.hs td{overflow:hidden;text-overflow:ellipsis}
  .tb.hs td:nth-child(3),.tb.hs td:nth-child(8){white-space:normal}
}
/* Utbetalningar och Historik på mobil: varje post har samma form.
   Rad 1: referens och belopp, tiden till höger. Rad 2: beskrivningen. Rad 3: mottagaren, status och kvitto eller åtgärd till höger.
   Utan beskrivning (skin-katalogen) bryter en osynlig rad efter tiden. */
@media (max-width:640px){
  .tb.hs tbody tr{height:auto;align-items:center;gap:6px 12px}
  .tb.hs td:nth-child(1){order:1}
  .tb.hs td:nth-child(2){order:2}
  .tb.hs td:nth-child(6){order:3;margin-left:auto;font-size:13px;white-space:nowrap!important}
  .tb.hs td:nth-child(3){order:4}
  .tb.hs td:nth-child(4){order:5;font-size:13.5px;color:var(--ink2)}
  .tb.hs td:nth-child(7){order:6;margin-left:auto}
  .tb.hs td:nth-child(8){order:7;margin-left:0!important}
  .tb.hs td.empty{order:0}
  .tb.hs.nodesc tbody tr::before{content:"";order:4;flex:1 1 100%;height:0;margin:-3px 0}
  /* Statusen och kvittoknappen lika höga, 28 px. */
  .tb.hs td:nth-child(7) .st{height:28px;padding:0 11px;box-sizing:border-box}
  .tb.hs td:nth-child(8) .kb{width:28px;height:28px}
  /* Ny utbetalning: Rensa fält och Förbokning på en rad, Betala ut över hela bredden under. */
  .pay-f{gap:14px;padding:14px 16px 16px}
  .pay-l{flex:1 1 100%;justify-content:space-between}
  .pay-r{flex:1 1 100%;margin-left:0!important}
  .pay-r > .hint{flex:1 1 100%}
  .pay-r > .bd.big{flex:1 1 100%;height:48px;justify-content:center}
  /* Användare: namn och Ändra överst, rollen under, inloggning och senast aktiv bredvid varandra sist. */
  .tb.us tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"nm nm act" "ro ro ro" "li la la";gap:12px 16px!important}
  .tb.us td:nth-child(1){grid-area:nm}.tb.us td:nth-child(2){grid-area:ro}.tb.us td:nth-child(3){grid-area:li}.tb.us td:nth-child(4){grid-area:la}
  .tb.us td.act{grid-area:act;align-self:start;margin-left:0!important}
  /* Fakturor: period och PDF överst, förfallodag, belopp och status under. */
  .tb.iv tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"pe pe pdf" "du be st";gap:6px 16px!important;align-items:end}
  .tb.iv td:nth-child(1){grid-area:pe;align-self:center;font-weight:500}.tb.iv td:nth-child(2){grid-area:du}.tb.iv td:nth-child(3){grid-area:be}
  .tb.iv td:nth-child(4){grid-area:st;justify-self:end}.tb.iv td:nth-child(5){grid-area:pdf;justify-self:end;margin-left:0!important}
  .tb.us td.empty,.tb.iv td.empty{grid-column:1/-1}
  /* Filter i verktygsraden: mindre luft runt texten så att "Senaste 15 dagarna" får plats. */
  .tbar .fi.sel{padding:0 30px 0 12px;background-position:right 11px center;font-size:13.5px}
}
/* Mejl, Sms och Kalkylark: samma kolumner och bredder i alla tre, en rad per post (det som inte får plats kortas). */
.tb.lt{table-layout:fixed;width:100%;min-width:760px}
.tb.lt th,.tb.lt:has(th.grow) th,.tb.lt th.act{width:auto}
.tb.lt col.c1{width:28%}.tb.lt col.c2{width:14%}.tb.lt col.c4{width:15%}.tb.lt col.c5{width:64px}
.tb.lt td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb.lt td > div{min-width:0}
.tb.lt .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb.lt button.ml{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.tb.lt button.ml:hover{text-decoration-color:currentColor}
.tb.lt button.ml:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
/* Företag med skin-katalogen (Ciscal Holding AB) har ingen Beskrivning-kolumn: referensen räcker. */
.tb.nodesc th:nth-child(3),.tb.nodesc td:nth-child(3){display:none!important}
.ub{display:flex;gap:2px}.ub i{display:block;width:3.5px;height:14px;border-radius:2px;background:var(--ok);opacity:.85}
.ic *{transform-box:fill-box;transform-origin:center}
.i-his .arc{transform-box:view-box;transform-origin:12px 12px}
.i-sms .l1,.i-sms .l2,.i-kvi .l1,.i-kvi .l2,.i-log .l1,.i-log .l2,.i-log .l3{transform-origin:0 50%}
.i-anv .case{transform-origin:50% 0}
.i-hja .tw{transform-box:view-box;transform-origin:12px 12px}
.i-hja .q{transform-origin:50% 100%}
.i-hja .ok{stroke-dasharray:8;stroke-dashoffset:8}
.i-ins .gr{transform-box:view-box;transform-origin:12px 12px}
.i-cer .gl{opacity:0;stroke-width:3;transform:translateX(-12px)}
/* Skinstugans menyikoner: delar och vilolägen för hover-animationerna (animSpec). */
.i-sgi .rays,.i-sgs .w1,.i-sgs .w2{transform-box:view-box;transform-origin:12px 12px}
.i-sga .cart{transform-box:view-box;transform-origin:9px 20px}.i-sga .item{opacity:0}
.i-sgs .w1,.i-sgs .w2{opacity:0}
.i-sgl .pl,.i-sgl .pr,.i-sgl .pc{transform-box:view-box;transform-origin:0 0}
.i-sgl .pl{transform:translate(5px,12px) scale(.62)}.i-sgl .pr{transform:translate(19px,12px) scale(.62)}.i-sgl .pc{transform:translate(12px,9px)}
.i-sgl g *{vector-effect:non-scaling-stroke}
.i-sgr .s1,.i-sgr .s2,.i-sgr .s3{opacity:0}
.i-sgv .lid{transform-box:view-box;transform-origin:3px 12px}
.i-sgk .cl{transform-box:view-box;transform-origin:5px 8px}
.i-sgf .l1,.i-sgf .l2,.i-sgf .l3{transform-origin:0 50%}
.i-sgx .scan{opacity:0}
.i-sgy .cu{transform-origin:0 50%}
.i-sgm .b1,.i-sgm .b2,.i-sgm .b3{transform-origin:50% 100%}.i-sgm .tr{stroke-dasharray:1;stroke-dashoffset:1}
@media (prefers-reduced-motion:reduce){.ic *{animation:none!important}}
.mg{padding:22px 10px 8px;font:500 11px "Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.bd{cursor:pointer;border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 14px "Schibsted Grotesk",system-ui,sans-serif;height:38px;padding:0 16px;border-radius:999px;color:#fff;background:linear-gradient(180deg,#43382f 0%,#211915 52%,#140f0c 100%);box-shadow:0 0 0 1px #0e0a08,inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.4),0 4px 10px -6px rgba(22,17,14,.6);transition:transform .15s,filter .15s,opacity .2s;white-space:nowrap}
.bd:hover{filter:brightness(1.05)}
.bd:active{filter:brightness(.94)}
/* Hover: ett mjukt ljussvep (flare) i stället för att knappen hoppar */
.bd,.bg{position:relative;overflow:hidden;isolation:isolate}
.bd::after,.bg::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-55%;width:40%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.26) 50%,transparent 100%);transform:translateX(0) skewX(-20deg);opacity:0;pointer-events:none;z-index:1}
.bg::after{background:linear-gradient(100deg,transparent 0%,rgba(142,47,42,.09) 50%,transparent 100%)}
.app.dark .bd::after{background:linear-gradient(100deg,transparent 0%,rgba(22,17,14,.10) 50%,transparent 100%)}
.app.dark .bg::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.12) 50%,transparent 100%)}
.bd:hover::after,.bg:hover::after{animation:btnFlare .75s cubic-bezier(.35,.6,.2,1) both}
@keyframes btnFlare{0%{opacity:0;transform:translateX(0) skewX(-20deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(430%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){.bd:hover::after,.bg:hover::after{animation:none}}
.bd.big{height:42px;padding:0 20px;font-size:15px}
/* BankID-loggan på knappar som startar BankID: vit på mörka knappar, BankID-blå på ljusa.
   .bd är mörk i ljust läge och ljus i mörkt läge, .bg tvärtom. */
.bid::before{content:"";flex:none;width:22px;height:22px;margin-left:-4px;background:url(assets/bankid-vit.svg) center/contain no-repeat}
.bg.bid::before,.app.dark .bd.bid::before{background-image:url(assets/bankid-bla.svg)}
.app.dark .bg.bid::before{background-image:url(assets/bankid-vit.svg)}
.bd.sm.bid::before,.bg.sm.bid::before{width:18px;height:18px}
.bd.dis{opacity:.4;pointer-events:none}
.bg{cursor:pointer;border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 14px "Schibsted Grotesk",system-ui,sans-serif;height:38px;padding:0 16px;border-radius:999px;color:var(--ink);background:linear-gradient(180deg,var(--card) 0%,var(--soft) 100%);box-shadow:0 0 0 1px var(--line),inset 0 -2px 0 rgba(22,17,14,.05),0 1px 2px rgba(22,17,14,.06);transition:transform .15s;white-space:nowrap}
.bg:hover{background:linear-gradient(180deg,var(--card) 0%,var(--soft) 70%,var(--soft) 100%)}
.bl{cursor:pointer;border:0;background:none;padding:0;font:500 13.5px "Schibsted Grotesk",system-ui,sans-serif;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.bl:hover{color:var(--acc)}
.card{background:var(--card);border-radius:16px;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(22,17,14,.04)}
.ch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;min-height:65px;padding:16px 22px;border-bottom:1px solid var(--line-soft)}
.ch h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.cb{padding:20px 22px}
.lb{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;font-weight:500;margin:0 0 7px}
.lb small{font-weight:400;font-size:12.5px;color:var(--mut)}
.fw{position:relative}
.fi{width:100%;box-sizing:border-box;height:46px;padding:0 14px;border:0;border-radius:11px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 2px rgba(22,17,14,.04);font:400 15px "Schibsted Grotesk",system-ui,sans-serif;color:var(--ink);outline:none;transition:box-shadow .2s;appearance:none;-webkit-appearance:none}
.fi.mono{font:400 15px "Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.fi::placeholder{color:var(--faint)}
.fi:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.fi.pr{padding-right:52px}
.fi.sel{background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316110e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:40px;cursor:pointer}
.ib{position:absolute;right:7px;top:7px;width:32px;height:32px;border:0;border-radius:8px;background:var(--bg);color:var(--ink2);display:grid;place-items:center;cursor:pointer}
.ib:hover{background:var(--hover)}
.ib svg{width:15px;height:15px}
.chip{position:absolute;right:8px;top:11px;height:24px;padding:0 9px;display:inline-flex;align-items:center;border-radius:7px;background:var(--chip);color:var(--acc);font:500 12px "Geist Mono",monospace}
/* Generera: en riktig knapp med upphöjd yta, mörkare vid hover och nedtryckt vid klick. */
.chip.gen{border:0;cursor:pointer;top:9px;height:28px;padding:0 11px;background:linear-gradient(180deg,#fff6f3 0%,var(--chip) 100%);box-shadow:0 0 0 1px rgba(184,78,64,.18),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1.5px 0 rgba(184,78,64,.12),0 2px 4px -2px rgba(120,40,30,.3);transition:background .15s,box-shadow .15s,transform .08s}
.chip.gen:hover{background:linear-gradient(180deg,#ffefe9 0%,#f7ddd6 100%);box-shadow:0 0 0 1px rgba(184,78,64,.32),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1.5px 0 rgba(184,78,64,.16),0 3px 7px -3px rgba(120,40,30,.4)}
.chip.gen:active{transform:translateY(1px);background:#f3d6ce;box-shadow:0 0 0 1px rgba(184,78,64,.32),inset 0 1px 2px rgba(120,40,30,.22)}
.chip.gen:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.app.dark .chip.gen{background:linear-gradient(180deg,#3d2723 0%,#2e1e1b 100%);box-shadow:0 0 0 1px #5a3a34,inset 0 1px 0 rgba(255,255,255,.08),0 2px 4px -2px rgba(0,0,0,.6)}
.app.dark .chip.gen:hover{background:linear-gradient(180deg,#4a2f2a 0%,#382420 100%)}
.app.dark .chip.gen:active{background:#2a1b18;box-shadow:0 0 0 1px #5a3a34,inset 0 1px 2px rgba(0,0,0,.5)}
.tw{overflow-x:auto}
.tb{width:100%;min-width:860px;border-collapse:collapse;font-size:14px}
.tb th{text-align:left;font-weight:500;font-size:12.5px;color:var(--mut);padding:11px 14px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.tb td{padding:14px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle;white-space:nowrap}
.tb tr:last-child td{border-bottom:0}
.tb th:first-child,.tb td:first-child{padding-left:22px}
.tb th:last-child,.tb td:last-child{padding-right:22px}
.tb tbody tr:hover td{background:var(--soft)}
.tb:has(th.grow) th{width:1%}
.tb th.grow{width:auto}
/* Prislista-animation: scenen ritas i 2x och skalas ner (skarp text i alla zoomlägen). Styrs av pzPaint(). */
.pz{position:relative;height:380px;overflow:hidden;border-radius:16px;background:radial-gradient(120% 90% at 30% 20%,var(--card) 0%,var(--soft) 60%,var(--line-soft) 100%);box-shadow:0 0 0 1px var(--line-soft);perspective:1500px;perspective-origin:50% 40%}
.pz-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;transform:rotateX(18deg) rotateY(-14deg) rotateZ(4deg) scale(.9)}
.pz-sc{position:absolute;left:50%;top:0;width:880px;height:1600px;transform-origin:0 0;transform:translate(-220px,0) scale(.5);font-size:28px;color:var(--ink)}
.pz-sc>*{position:absolute}
.pz-win{border-radius:28px;background:var(--card);box-shadow:0 0 0 2px var(--line),0 16px 28px -16px rgba(22,17,14,.18),0 60px 110px -40px rgba(22,17,14,.38)}
.pz-h{font-size:30px;font-weight:600;letter-spacing:-.01em}
.pz-sub{font-size:25px;color:var(--mut)}
.pz-lb{font-size:25px;font-weight:500;color:var(--ink2)}
.pz-tile{box-sizing:border-box;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 24px;font-size:26px;font-weight:500;color:var(--ink2)}
.pz-bdg{width:52px;height:52px;border-radius:14px;display:grid;place-items:center}
.pz-ring{border-radius:22px;box-shadow:inset 0 0 0 3px var(--ink),0 0 0 8px var(--line-soft);opacity:0}
.pz-st{display:flex;align-items:center;gap:12px;font-size:25px;color:var(--mut);opacity:0;white-space:nowrap}
.pz-ok{color:var(--okd);font-weight:500}
.pz-spin{width:22px;height:22px;border-radius:50%;border:3.2px solid var(--line2);border-top-color:var(--ink);box-sizing:border-box}
.pz-th{display:flex;justify-content:space-between;padding:0 20px;box-sizing:border-box;font-size:24px;color:var(--mut)}
.pz-row{display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-sizing:border-box;border-top:2px solid var(--line-soft);font-size:27px;opacity:0}
.pz-row b,.pz-o b,.pz-amt,.pz-chip,.pz-ba{font-weight:500;font-variant-numeric:tabular-nums}
.pz-f{box-sizing:border-box;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line);display:flex;align-items:center;padding:0 28px;overflow:hidden;white-space:nowrap}
.pz-fring{border-radius:22px;box-shadow:inset 0 0 0 3px var(--ink),0 0 0 8px var(--line-soft);opacity:0}
.pz-q{display:inline-flex;align-items:center;white-space:pre}
.pz-caret{display:inline-block;width:3px;height:36px;margin-left:2px;background:var(--ink);opacity:0}
.pz-ch,.pz-ph,.pz-amt{position:absolute;left:28px;top:26px;line-height:36px}
.pz-ch,.pz-amt{opacity:0}
.pz-ph{color:var(--faint)}
.pz-fl{position:absolute;inset:0;background:var(--okt);opacity:0}
.pz-tag{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:500;color:var(--okd);opacity:0;white-space:nowrap}
.pz-btn{overflow:hidden;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:500;color:#fff;background:linear-gradient(180deg,#43382f 0%,#211915 52%,#140f0c 100%);box-shadow:0 0 0 2px #0e0a08,inset 0 2px 0 rgba(255,255,255,.22),inset 0 -4px 0 rgba(0,0,0,.4)}
.pz-bgok{position:absolute;inset:0;border-radius:999px;background:linear-gradient(180deg,#3a9a62 0%,#24804a 55%,#1c6b3d 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.25);opacity:0}
.pz-bl{position:relative;display:flex;align-items:center;white-space:nowrap}
.pz-ba{display:inline-block;overflow:hidden;max-width:0;opacity:0}
.pz-ba>span{display:inline-block;padding-left:12px}
.pz-bspin{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;box-sizing:border-box;opacity:0}
.pz-bok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;opacity:0;white-space:nowrap}
.pz-dd{display:grid;gap:8px;padding:12px;box-sizing:border-box;border-radius:24px;background:var(--card);box-shadow:0 0 0 2px var(--line),0 28px 60px -28px rgba(22,17,14,.35);font-size:28px;opacity:0}
.pz-o{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:76px;border-radius:16px;line-height:36px}
.pz-chip{left:0;top:0;line-height:36px;white-space:nowrap;opacity:0}
.pz-chbg{position:absolute;inset:-12px -20px;border-radius:999px;background:var(--card);box-shadow:0 0 0 2px var(--line),0 20px 44px -16px rgba(22,17,14,.45);opacity:0}
.pz-rip{left:0;top:0;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--ink);opacity:0}
.pz-cu{left:0;top:0;margin:-6px 0 0 -10px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.pz-cu svg{display:block;transform-origin:10px 6px}
/* Premium: ljus, djup, ikoner */
.pz-glow{position:absolute;width:300px;height:300px;border-radius:50%;opacity:.13;filter:blur(70px);pointer-events:none}
.pz-grid{position:absolute;left:-30%;top:-30%;width:160%;height:160%;background-image:radial-gradient(circle,var(--line2) 1px,transparent 1.4px);background-size:20px 20px;opacity:.6;-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);transform:translateZ(-90px)}
.pz-sc{transform-style:preserve-3d}
.pz-win{overflow:hidden;background:linear-gradient(165deg,var(--card) 0%,var(--card) 55%,var(--soft) 100%)!important;box-shadow:0 0 0 2px var(--line),inset 0 2px 0 rgba(255,255,255,.7),0 0 0 rgba(0,0,0,0)!important}
.pz-sheen{position:absolute;top:-50%;left:0;width:45%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);mix-blend-mode:soft-light;opacity:.9;transform:translateX(-120%) rotate(18deg)}
.pz-tb{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;color:var(--card);background:linear-gradient(160deg,#43382f 0%,#16110e 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 10px 18px -8px rgba(22,17,14,.5)}
.pz-nm{display:flex;align-items:center;gap:18px}
.pz-th2{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(0,0,0,.04)}
.pz-fa{padding-left:68px!important}
.pz-fa .pz-ch{left:68px}
.pz-mag{position:absolute;left:24px;top:29px;color:var(--mut);display:flex}
.pz-arr{display:inline-flex;margin-left:14px;opacity:.85}
.pz-bglow{position:absolute;inset:8px 40px;border-radius:999px;background:#24804a;filter:blur(26px);opacity:0;transform:translateY(18px)}
.pz-bgok{overflow:hidden}
.pz-cu{filter:drop-shadow(0 10px 10px rgba(0,0,0,.22)) drop-shadow(0 2px 3px rgba(0,0,0,.2))!important}
.pz-dd{box-shadow:0 0 0 2px var(--line),0 40px 70px -24px rgba(22,17,14,.45)!important}
.pz-edge{border-radius:28px;background:linear-gradient(180deg,#dcdcde 0%,#b9babd 100%)}
.app.dark .pz-edge{background:linear-gradient(180deg,#3a3a3d 0%,#2a2a2c 100%)}
.pz-edge-back{box-shadow:0 40px 80px -30px rgba(22,17,14,.45),0 12px 20px -10px rgba(22,17,14,.25)}
/* Mejl-animation */
.pm-sw{border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.15)}
.pm-swr{border-radius:50%;box-shadow:0 0 0 4px var(--card),0 0 0 7px var(--ink)}
.pm-logo{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line);font-size:24px}
.pm-wm{font-weight:700;letter-spacing:.14em;font-size:21px}
.pm-pv{overflow:hidden;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line)}
.pm-pv>*{position:absolute}
.pm-pvh{left:0;top:0;right:0;height:48px}
.pm-pvw{left:24px;top:12px;font-size:18px;font-weight:700;letter-spacing:.16em;color:#fff}
.pm-pvs{left:24px;top:68px;right:24px;font-size:24px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.pm-mute{color:#6f6762}
.pm-mail{overflow:hidden;border-radius:48px;background:#fbfaf8;color:#16110e;opacity:0}
.pm-mh{height:104px;display:flex;align-items:flex-end;padding:0 24px 18px;box-sizing:border-box}
.pm-wm2{font-size:17px;font-weight:700;letter-spacing:.18em;color:#fff}
.pm-mb{padding:20px 24px}
.pm-from{font-size:16px;color:#776c66}
.pm-h1{margin-top:12px;font-size:26px;font-weight:600;letter-spacing:-.01em}
.pm-p{margin-top:8px;font-size:18px;line-height:1.45;color:#3d3530}
.pm-card{margin-top:20px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px #ece5df}
.pm-on{font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#776c66;margin-bottom:6px}
.pm-r{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:2px solid #f0ebe6;font-size:18px;opacity:0}
.pm-r b{font-weight:600;font-variant-numeric:tabular-nums}
.pm-tot{font-size:20px;font-weight:600}
.pm-paid{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:8px 18px;border-radius:999px;background:#eaf5ee;color:#1c6b3d;font-size:18px;font-weight:600;opacity:0}
.pm-paid svg{width:18px;height:18px}
.ps-appi{background:none!important;overflow:hidden}
.ps-appi img{width:100%;height:100%;display:block}
.ps-appw{background:#fff!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ps-appw img{width:72%;height:auto;display:block}
.pm-th{border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line),0 12px 28px -16px rgba(22,17,14,.25);overflow:hidden}
.pm-th>*{position:absolute}
.pm-ac{background:var(--ac);border-radius:4px}
.pm-dk{background:#2a2420;border-radius:4px}
.pm-ln{background:#e7e1dc;border-radius:4px}
.pm-tb2{border-radius:10px;box-shadow:inset 0 0 0 2px #ece5df}
.pm-dash{height:0;border-top:2px dashed #d8d0ca}
.pm-thn{text-align:center;font-size:24px;font-weight:500;color:var(--ink2)}
.pm-sel{border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--card);box-shadow:0 0 0 4px var(--card);opacity:0}
.pm-sel svg{width:22px;height:22px}
.pm-gbar{height:60px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px 10px;box-sizing:border-box;font-size:17px;color:#3d6fd0;background:#fbfaf8}
.pm-gbar img{width:28px;height:auto}
.pm-band{height:60px;background:#2b4f86}
.pm-logo2{width:60px;height:60px;margin:-30px auto 0;border-radius:50%;background:#2b4f86;color:#fff;display:grid;place-items:center;font-size:26px;font-weight:700;box-shadow:0 0 0 6px #fbfaf8;position:relative}
.pm-mb2{padding:12px 24px;text-align:center}
.pm-mb2 .pm-r{text-align:left}
.pm-big{margin-top:12px;font-size:40px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pm-dash2{margin:14px 0 4px;border-top:2px dashed #d8d0ca}
/* Kalkylark-animation */
.pk-file{box-sizing:border-box;display:flex;align-items:center;gap:20px;padding:0 24px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line);font-size:27px}
.pk-file img{width:26px;height:auto;display:block}
.pk-fn{flex:1;font-weight:500}
.pk-fm{font-size:24px;color:var(--mut)}
.pk-ring{border-radius:20px;box-shadow:inset 0 0 0 3px var(--ink),0 0 0 8px var(--line-soft);opacity:0}
.pk-chips{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pk-cll{font-size:24px;color:var(--mut);margin-right:4px;opacity:0}
.pk-chip{padding:8px 18px;border-radius:999px;background:var(--okt);color:var(--okd);font-size:24px;font-weight:500;opacity:0}
.pk-shh{display:flex;align-items:center;gap:16px;font-size:26px;font-weight:600}
.pk-shh img{width:24px;height:auto;display:block}
.pk-sync{display:flex;align-items:center;gap:10px;font-size:23px;color:var(--mut);opacity:0;white-space:nowrap}
.pk-tool{display:flex;align-items:center;gap:12px;padding:0 12px;box-sizing:border-box;border-radius:12px;background:var(--soft)}
.pk-tool span{width:28px;height:12px;border-radius:4px;background:var(--line2);opacity:.7}
.pk-tool span.w{width:80px}
.pk-cl,.pk-rn{display:grid;place-items:center;font-size:18px;color:var(--mut);background:var(--soft);box-shadow:inset -2px -2px 0 var(--line)}
.pk-c{box-sizing:border-box;display:flex;align-items:center;padding:0 10px;font-size:19px;white-space:nowrap;overflow:hidden;box-shadow:inset -2px -2px 0 var(--line-soft)}
.pk-hd{font-weight:600;background:var(--soft)}
.pk-r{justify-content:flex-end;font-variant-numeric:tabular-nums}
.pk-c [data-pz="nc"]{opacity:0}
.pk-nrow{background:rgba(36,128,74,.14);opacity:0}
.pk-selc{box-shadow:inset 0 0 0 3px #3b6fd8;border-radius:2px;opacity:0}
/* Sms-animation */
.pz-fd{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 40%}
.ps-sc{height:2120px}
.ps-cnt{font-size:24px;color:var(--mut);font-variant-numeric:tabular-nums}
.ps-cnt b{font-weight:500;color:var(--ink2)}
.ps-ta{box-sizing:border-box;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line);padding:24px 28px;font-size:28px;line-height:46px;overflow:hidden}
.ps-tok{display:inline-flex;align-items:center;padding:0 12px;margin:0 2px;height:40px;border-radius:12px;background:var(--soft);box-shadow:inset 0 0 0 2px var(--line2);font:500 25px 'Geist Mono',monospace;color:var(--ink2);vertical-align:2px}
.ps-tbs{display:flex;align-items:center;gap:14px;font-size:25px}
.ps-tbl{color:var(--mut);margin-right:6px}
.ps-tb{padding:8px 16px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line);font:500 24px 'Geist Mono',monospace;color:var(--ink2)}
.ps-hint{font-size:24px;color:var(--mut)}
.ps-sbtn{font-size:28px!important}
.ps-stx{position:relative}
.ps-mut{color:var(--mut)}
.ps-phg{left:0;top:0;width:880px;height:2120px;transform-style:preserve-3d}
.ps-phg>*{position:absolute}
.ps-edge{background:linear-gradient(180deg,#2c2c30 0%,#141416 100%)}
.ps-edge-back{box-shadow:0 40px 80px -30px rgba(10,10,12,.55),0 12px 20px -10px rgba(10,10,12,.35)}
.ps-ph{border-radius:60px;background:linear-gradient(160deg,#3a3a3f 0%,#18181b 45%,#0d0d0f 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.ps-scr{overflow:hidden;border-radius:48px;background:radial-gradient(120% 70% at 20% 10%,#5b6f86 0%,transparent 60%),radial-gradient(90% 60% at 90% 90%,#7a5a48 0%,transparent 60%),linear-gradient(170deg,#2a3442 0%,#151a22 100%)}
.ps-cam{border-radius:50%;background:#050506;box-shadow:inset 0 0 0 3px #222}
.ps-date{text-align:center;font-size:21px;font-weight:500;color:rgba(255,255,255,.8)}
.ps-time{text-align:center;font-size:88px;font-weight:400;letter-spacing:-.02em;color:#fff;line-height:1.1}
.ps-nt{box-sizing:border-box;padding:18px 20px 20px;border-radius:28px;background:rgba(246,244,242,.9);box-shadow:0 16px 40px -16px rgba(0,0,0,.45);color:#16110e;opacity:0}
.ps-nth{display:flex;align-items:center;gap:10px;font-size:17px;color:#6f6762;text-transform:uppercase;letter-spacing:.04em}
.ps-app{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#3fb26b,#24804a)}
.ps-app svg{width:20px;height:20px}
.ps-apn{flex:1}
.ps-snd{margin-top:12px;font-size:21px;font-weight:600}
.ps-msg{margin-top:4px;font-size:21px;line-height:1.38}
.ps-msg b{font-weight:600;border-radius:6px;padding:0 2px}
.ps-qb{border-radius:50%;background:rgba(255,255,255,.16)}
.ps-bar{border-radius:999px;background:rgba(255,255,255,.75)}
.ps-off{border-radius:48px;background:#050506}
.ps-chip{left:0;top:0;display:flex;align-items:center;gap:12px;padding:12px 24px 12px 20px;margin:-30px 0 0 -112px;border-radius:999px;background:var(--card);box-shadow:0 0 0 2px var(--line),0 20px 44px -16px rgba(22,17,14,.45);font-size:26px;font-weight:500;white-space:nowrap;color:var(--okd);opacity:0}


.m{font-family:"Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.r{text-align:right}
.mut{color:var(--mut)}
.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:500}
.st.ok{background:var(--okt);color:var(--okd)}
.st.bad{background:var(--badt);color:var(--badd)}
.st.run{background:var(--chip);color:var(--acc)}
/* En statusetikett bland uppgifter (t.ex. mejlets status) gör inte raden högre än de andra. */
.cb > .kv .st{margin:-4px 0;vertical-align:middle}
.kv .st.ok{color:var(--okd)}.kv .st.bad{color:var(--badd)}.kv .st.run{color:var(--acc)}
.st.wait{background:var(--chip);color:var(--ink2)}
.kb{width:30px;height:30px;border:0;border-radius:8px;background:var(--card);box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;cursor:pointer;color:var(--ink2)}
.kb:hover{box-shadow:0 0 0 1px var(--line2);color:var(--ink)}
.kb svg{width:15px;height:15px}
.kb{position:relative}
.av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--chip);display:grid;place-items:center;font:600 11.5px "Geist Mono",monospace;color:var(--ink2)}
.tg{all:unset;box-sizing:border-box;cursor:pointer;flex:none;position:relative;width:40px;height:24px;border-radius:999px;background:var(--line);transition:background .2s}
.tg::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tg.on{background:var(--ok)}
.tg.on::after{transform:translateX(16px)}
.tg:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.kv{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.kv:last-child{border-bottom:0}
/* Kort som bara har uppgiftsrader: raderna har egen luft, så kortet får samma lilla kant överallt. */
.cb:has(> .kv:first-child){padding-top:4px;padding-bottom:4px}
.kv span:first-child{color:var(--mut)}
.bar{height:8px;border-radius:999px;background:var(--chip);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--ink)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--hover)}
.seg button{all:unset;cursor:pointer;height:30px;padding:0 13px;border-radius:999px;font-size:13.5px;color:var(--mut)}
.seg button.on{background:var(--card);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(22,17,14,.1)}
button:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:760px){.g3{grid-template-columns:minmax(0,1fr)!important}.g2{grid-template-columns:minmax(0,1fr)!important}}
/* ===== Klickbart: dialoger, BankID, notiser, inloggning, ansökan, inställningar ===== */
.ov{position:fixed;inset:0;z-index:40;background:rgba(22,17,14,.38);display:grid;place-items:center;padding:16px;overflow-y:auto}
.ov.top{z-index:50}
/* Kvittot: ett A4-ark som skalar med bredden (1 u = 1 px på ett 794 px brett ark) */
.kq-ov{place-items:start center;padding:24px 16px;background:rgba(22,17,14,.66);z-index:60}
.kq-wrap{width:min(720px,100%)}
.kq-bar{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:14px;font-weight:500;margin-bottom:10px}
.kq-x{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.kq-x:hover{background:rgba(255,255,255,.28)}
.kq-x svg{width:18px;height:18px}
.kq-sheet{container-type:inline-size;background:#fff;border-radius:6px;box-shadow:0 30px 60px -20px rgba(22,17,14,.5);overflow:hidden}
.kq{--u:calc(100cqw / 794);aspect-ratio:210/297;box-sizing:border-box;padding:calc(var(--u)*60) calc(var(--u)*64) calc(var(--u)*48);display:flex;flex-direction:column;font-family:Inter,Arial,Helvetica,sans-serif;font-size:max(9px,calc(var(--u)*13));line-height:1.5;color:#3A3A40;text-align:left}
.kq b{font-weight:600;color:#2E2E33}
.kq-top{display:flex;justify-content:space-between;align-items:flex-start}
.kq-top h1{margin:0;font-size:calc(var(--u)*60);font-weight:700;letter-spacing:-.03em;line-height:1;color:#2E2E33}
.kq-logo{width:calc(var(--u)*92);height:calc(var(--u)*92);border-radius:50%;background:#111114;color:#fff;display:grid;place-items:center;font-weight:600;font-size:calc(var(--u)*26);letter-spacing:.02em}
.kq-two,.kq-four,.kq-foot{display:grid;gap:calc(var(--u)*24)}
.kq-two{grid-template-columns:1fr 1fr;gap:calc(var(--u)*40);margin-top:calc(var(--u)*64)}
.kq-four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:calc(var(--u)*56)}
.kq-two>div,.kq-four>div,.kq-info,.kq-foot>div{display:flex;flex-direction:column;min-width:0}
.kq-info{margin-top:calc(var(--u)*32);gap:calc(var(--u)*4)}
.kq-tab{margin-top:calc(var(--u)*36);border-top:calc(var(--u)*3) solid #111114}
.kq-row{display:grid;grid-template-columns:2.4fr .6fr .6fr 1.1fr .8fr .9fr 1.1fr;gap:calc(var(--u)*8);padding:calc(var(--u)*14) calc(var(--u)*8);border-bottom:1px solid #E4E4E7}
.kq-row>span:last-child{text-align:right}
.kq-head{font-weight:600;color:#2E2E33;border-bottom:0}
.kq-sum{align-self:flex-end;display:grid;grid-template-columns:1fr auto;gap:calc(var(--u)*12) calc(var(--u)*28);margin-top:calc(var(--u)*22);padding-right:calc(var(--u)*8);font-weight:600;color:#111114;text-align:right}
.kq-fill{flex:1}
.kq-f{color:#2E2E33}
.kq-foot{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #8E8E96;margin-top:calc(var(--u)*12);padding-top:calc(var(--u)*16);font-size:max(8px,calc(var(--u)*11));line-height:1.6}
.kq-foot b{color:#111114}
@container (max-width:520px){.kq{aspect-ratio:auto;padding:22px 18px}.kq-row{grid-template-columns:1fr auto}.kq-row>span:nth-child(2),.kq-row>span:nth-child(3),.kq-row>span:nth-child(4),.kq-row>span:nth-child(5),.kq-row>span:nth-child(6){display:none}.kq-four{grid-template-columns:1fr 1fr;row-gap:12px}.kq-foot{grid-template-columns:1fr;row-gap:10px}.kq-fill{flex:none;height:24px}}

.dlg{width:min(460px,100%);box-sizing:border-box;padding:24px 24px 20px;background:var(--card);border-radius:16px;box-shadow:0 0 0 1px var(--line),0 30px 60px -20px rgba(22,17,14,.45)}
.dlg.wide{width:min(560px,100%)}
/* Ett skickat mejl (egen sida): tillbaka till Mejl, bilagor och mejlet som mottagaren ser det. */
.crumb{display:inline-flex;align-items:center;gap:4px;margin:0 0 8px -4px;padding:4px 6px;border:0;border-radius:8px;background:none;color:var(--mut);font:500 13.5px "Schibsted Grotesk",system-ui,sans-serif;cursor:pointer}
.crumb:hover{color:var(--ink);background:var(--hover)}
.cb .att{display:inline-flex;align-items:center;gap:6px;margin-right:14px;white-space:nowrap}
.mf{display:block;width:100%;height:min(720px,75vh);border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.mtx{margin:0;max-height:520px;overflow:auto;padding:14px 16px;border-radius:12px;background:var(--hover);font:13px/1.55 "Geist Mono",monospace;white-space:pre-wrap}
.dlg h2{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.dlg .lead{margin:0 0 18px;color:var(--ink2);font-size:14.5px;line-height:1.55}
.acts{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-top:22px}
.acts .sp{margin-right:auto}
.fs{display:flex;flex-direction:column;gap:14px}
.fg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:520px){.fg2{grid-template-columns:minmax(0,1fr)}}
.note{padding:11px 13px;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:13.5px;color:var(--ink2);line-height:1.5}
.note.warn{background:var(--badt);color:var(--badd);box-shadow:none}
.note.ok{background:var(--okt);color:var(--okd);box-shadow:none}
.err{margin:0;font-size:13px;color:var(--badd)}
.hint{font-size:13px;color:var(--mut)}
.hint.bad{color:var(--badd)}
.opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:flex-start;gap:12px;width:100%;padding:13px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);background:var(--card);font-size:14px;line-height:1.45}
.opt:hover{box-shadow:inset 0 0 0 1px var(--line2)}
.opt.on{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--soft)}
.opt .dot{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);background:var(--card)}
.opt.on .dot{box-shadow:inset 0 0 0 5px var(--ink)}
.opt b{display:block;font-weight:600}
.opt small{display:block;color:var(--mut);font-size:13px}
.opt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cbx{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;cursor:pointer}
.cbx input{flex:none;width:17px;height:17px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;max-width:calc(100% - 32px);box-sizing:border-box;padding:11px 18px;border-radius:999px;background:var(--ink);color:var(--card);font-size:14px;line-height:1.4;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);animation:toastIn .25s ease}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
.sbx{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px;border-radius:12px;background:var(--chip);color:var(--ink2);font-size:13.5px;line-height:1.45}
.sbx b{font-weight:600;color:var(--ink)}
.qrb{width:188px;margin:6px auto 0;padding:14px;box-sizing:border-box;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.qrb svg{display:block;width:100%;height:auto}
.bidok{width:64px;height:64px;margin:18px auto 6px;border-radius:50%;display:grid;place-items:center;background:var(--okt);color:var(--okd)}
.bidst{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13.5px;color:var(--mut)}
.spin{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);border-top:2px solid var(--ink);box-sizing:border-box;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bd.wide,.bg.wide{width:100%}
.bg.red{color:var(--badd)}
.ro{background:var(--soft)!important;color:var(--mut)!important}
.auth{flex:1 1 100%;min-height:calc(100vh - 20px);display:grid;place-items:center;padding:24px 6px;box-sizing:border-box}
.au{padding:30px 28px 26px}
.au h1{margin:0 0 6px;font-size:25px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.au .lead{margin:0 0 22px;color:var(--ink2);font-size:14.5px;line-height:1.55}
.code{height:56px;text-align:center;font-size:24px!important;letter-spacing:.4em;padding-left:.4em}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 22px}
.steps span{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--mut)}
.steps span::before{content:"";height:4px;border-radius:99px;background:var(--line)}
.steps span.on{color:var(--ink);font-weight:500}
.steps span.on::before,.steps span.done::before{background:var(--ink)}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl li{display:flex;gap:12px;padding:10px 0;font-size:14px;line-height:1.45}
.tl i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line2);font-style:normal}
.tl li.done i{background:var(--okt);color:var(--okd);box-shadow:none}
.tl li.now i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.tl li.now i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.tl small{display:block;color:var(--mut);font-size:13px}
.empty{padding:30px 22px!important;text-align:center;color:var(--mut);white-space:normal!important}
.secret{font:500 15px "Geist Mono",monospace;letter-spacing:.08em;text-align:center;padding:10px;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-soft)}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font:500 14px "Geist Mono",monospace;text-align:center}
.codes span{padding:8px;border-radius:8px;background:var(--soft)}
.bubble{padding:12px 15px;border-radius:20px 20px 20px 6px;background:var(--soft);box-shadow:0 0 0 1px var(--line);font-size:14.5px;line-height:1.45}
.kvb{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.bg.dis{opacity:.4;pointer-events:none}
.kb.pdf{width:auto;height:30px;padding:0 9px 0 7px;margin:0;display:inline-flex;align-items:center;gap:4px;color:var(--ink2)}
.kb.pdf svg{width:15px;height:15px}
.kb.pdf span{padding:1px 4px;border-radius:4px;background:var(--acc);color:var(--card);font:600 9.5px/1.3 "Geist Mono",monospace;letter-spacing:.04em}
/* ===== Skinstugan: adminläget för företaget med Skinstugan-kopplingen (sidorna sg*, egen meny via växlaren) ===== */
.app{--wnt:#fbf0dc;--wnd:#8a5a0b}
.app.dark{--wnt:#3a2c14;--wnd:#f1c46f}
.st.att{background:var(--wnt);color:var(--wnd)}
.kv .st.att{color:var(--wnd)}
.mg{margin:2px 0 4px;padding:0 10px;font:500 11px "Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.nb{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;box-sizing:border-box;font:500 11.5px "Geist Mono",monospace;background:var(--hover);color:var(--ink2)}
.mi.on .nb{background:var(--chip)}
.nb.al,.mi.on .nb.al{background:var(--acc);color:#fff}
.app.dark .nb.al{color:#16110e}
.sgk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.sgk{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sgk .card{padding:16px 18px}
.sgk .l{font-size:13px;color:var(--mut)}
.sgk .v{margin:6px 0 3px;font:600 26px/1.15 "Schibsted Grotesk",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sgk .h{font-size:12.5px;color:var(--mut)}
/* Fakturor: generatorns facit (mål, förslag, differens) och raderna man kan ta bort */
.fkm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line-soft)}
.fkm > div{padding:14px 18px;border-right:1px solid var(--line-soft)}
.fkm > div:last-child{border-right:0}
.fkm .l{font-size:12.5px;color:var(--mut)}
.fkm .v{margin-top:4px;font:600 22px/1.2 "Schibsted Grotesk",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fkm .v.ok{color:var(--okd)}.fkm .v.att{color:var(--wnd)}
@media (max-width:640px){.fkm{grid-template-columns:minmax(0,1fr)}.fkm > div{border-right:0;border-bottom:1px solid var(--line-soft)}}
.fkf{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:16px 18px}
.fkf > div{flex:1 1 160px}
.fkp{display:inline-flex;gap:6px;align-items:center}
.fkp .fi{width:110px;height:32px}
.fks{max-width:100%;overflow-x:auto;scrollbar-width:none}
.fks::-webkit-scrollbar{display:none}
.fks button{white-space:nowrap;flex:none}
.sg2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){.sg2{grid-template-columns:minmax(0,1fr)}}
.sga{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
.sga:last-child{border-bottom:0}
.sgacts{display:inline-flex;align-items:center;gap:10px;flex:none}
.sga.sgack,.sgrc.sgack,tr.sgack{opacity:.55}
.sga.sgack > i{background:var(--line2)}
.sga.sgack:hover,.sgrc.sgack:hover,tr.sgack:hover{opacity:.85}
.sga > i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--wnd)}
.sga > i.bad{background:var(--badd)}
.sga > i.info{background:var(--acc)}
.sga > div{flex:1 1 auto;min-width:0}
.sga b{display:block;font-weight:500;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sga p{margin:2px 0 0;font-size:13px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sga .bg{flex:none}
.sgf{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:11px 18px;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink2)}
.sgf:hover{background:var(--hover);color:var(--ink)}
.sgf:last-child{border-bottom:0}
.sgf b{font:500 14px "Geist Mono",monospace;color:var(--ink)}
.sgf b.z{color:var(--faint);font-weight:400}
.sgc{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;height:128px;padding:18px 18px 8px}
.sgc span{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.sgc i{display:block;border-radius:4px 4px 2px 2px;background:var(--ok);min-height:3px}
.sgc i.r{background:var(--badd);border-radius:4px 4px 0 0;min-height:0}
.sgc i.r + i{border-radius:0 0 2px 2px}
.sgc i.z{background:var(--line)}
.sgcl{display:flex;justify-content:space-between;padding:0 18px 14px;font:12px "Geist Mono",monospace;color:var(--faint)}
.sgt{display:inline-flex;align-items:center;gap:4px}
.sgt img{width:40px;height:30px;object-fit:contain;border-radius:7px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-soft)}
.sgt small{font-size:12px;color:var(--mut)}
.sgph{flex:none;display:inline-block;width:40px;height:30px;border-radius:7px;background:repeating-linear-gradient(135deg,var(--soft) 0 6px,var(--line-soft) 6px 7px);box-shadow:inset 0 0 0 1px var(--line-soft)}
.sgit .sgph{width:64px;height:48px;border-radius:9px}
.tb tr.ck{cursor:pointer}
.tb tr.ck:hover td{background:var(--soft)}
.who b{display:block;font-weight:500}
.who small{display:block;font-size:12.5px;color:var(--mut)}
/* Långa namn (t.ex. Steam-namn) radbryts i cellen i stället för att göra tabellen bredare. */
.tb td.who{white-space:normal;overflow-wrap:anywhere;min-width:160px}
.tb td .wr{display:block;min-width:120px;max-width:240px;white-space:normal;overflow-wrap:anywhere}
.sgd{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){.sgd{grid-template-columns:minmax(0,1fr)}}
.sgap{box-shadow:0 0 0 1.5px var(--wnd),0 10px 24px -18px rgba(70,25,15,.35)}
.sgit{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line-soft)}
.sgit:last-child{border-bottom:0}
.sgit img{flex:none;width:64px;height:48px;object-fit:contain;border-radius:9px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-soft)}
.sgit div{flex:1 1 auto;min-width:0}
.sgit b{display:block;font-weight:500;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.sgit small{display:block;font-size:12.5px;color:var(--mut)}
.sgit .m{flex:none;font-weight:500}
.sgm{display:flex;flex-direction:column;gap:10px;max-height:460px;overflow-y:auto;padding:16px 18px}
.sgm .b{max-width:80%;align-self:flex-start;padding:10px 13px;border-radius:14px 14px 14px 4px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.sgm .b.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--ink);color:var(--card);box-shadow:none}
.sgm .b.sys{align-self:center;max-width:92%;padding:2px 4px;background:none;box-shadow:none;color:var(--mut);font-size:12.5px;text-align:center}
.sgm small{display:block;margin-top:4px;font-size:11.5px;opacity:.7}
.sgm .none{align-self:center;color:var(--mut);font-size:13.5px;padding:18px 0}
.sgw{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line-soft)}
.sgw textarea{flex:1 1 auto;height:46px;min-height:46px;padding:12px 14px;line-height:1.45;resize:vertical}
.sgw{flex-wrap:wrap}
.sgw .sgwr{display:flex;gap:8px;align-items:flex-end;flex:1 1 100%}
.sgatt{flex:0 0 auto;width:46px;height:46px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.sgfs{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.sgfc{display:inline-flex;align-items:center;gap:6px;max-width:240px;padding:5px 6px 5px 10px;border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:12.5px}
.sgfc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgfc button{flex:0 0 auto;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;color:var(--mut);cursor:pointer;font-size:15px;line-height:1}
.sgfc button:hover{background:var(--line-soft);color:var(--ink)}
.sgm .b .sgmf{display:flex;flex-direction:column;gap:6px;margin-top:6px;white-space:normal}
.sgm .b .sgmf button{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 10px;border:0;border-radius:10px;background:rgba(127,127,127,.14);color:inherit;font:inherit;font-size:13px;cursor:pointer;text-align:left}
.sgm .b .sgmf button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgm .b .sgmf img{display:block;max-width:100%;max-height:260px;border-radius:10px}
.sgi{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);min-height:540px}
.sgl{border-right:1px solid var(--line-soft);overflow-y:auto;max-height:72vh}
.sgl > button{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.sgl > button:hover{background:var(--hover)}
.sgl > button.on{background:var(--soft);box-shadow:inset 3px 0 0 var(--acc)}
.sgl .r1{display:flex;justify-content:space-between;gap:8px;align-items:center}
.sgl b{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgl p{margin:3px 0 0;font-size:13px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgl .st{height:20px;padding:0 8px;font-size:11.5px;flex:none}
.sgv{display:flex;flex-direction:column;min-width:0}
.sgv .hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.sgv .hd h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.sgv .hd p{margin:2px 0 0;font-size:13px;color:var(--mut)}
.sgv .sgm{flex:1 1 auto;max-height:none;min-height:220px}
.sgv .emp{margin:auto;padding:40px 20px;color:var(--mut);font-size:14px}
.sgbk{display:none}
@media (max-width:820px){
  .sgi{grid-template-columns:minmax(0,1fr);min-height:0}
  .sgl{border-right:0;max-height:none}
  .sgi.open .sgl{display:none}
  .sgi:not(.open) .sgv{display:none}
  .sgbk{display:inline-flex}
}
/* Uppgiftsraderna i en affär ligger i en smal kolumn: kortare etikett, värdet får resten. */
.sgd .cb > .kv{grid-template-columns:minmax(0,118px) minmax(0,1fr)}
.sgd .kv > span:last-child{overflow-wrap:anywhere}
.sgas{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.sg2.eq{grid-template-columns:repeat(2,minmax(0,1fr))}
.sgk.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.sg2.eq{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.sgk.three{grid-template-columns:minmax(0,1fr)}}
.kvw{grid-template-columns:minmax(0,340px) minmax(0,1fr)!important}
@media (max-width:620px){.kvw{grid-template-columns:minmax(0,1fr) auto!important}}
/* Skinstugans driftstatus i menyn: samma staplar som Hilmos, färgade per timme. */
.sgbar{display:block;height:18px;border-radius:1px;background:var(--ok)}
.sgbar.w{background:var(--wnd)}
.sgbar.b{background:var(--badd)}
.sgbar.n{background:var(--line)}
/* Återkrav: en rad per ärende med stegen under. */
.sgrc{padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.sgrc:last-child{border-bottom:0}
.sgrc b{font-weight:500;font-size:14.5px}
.sgrc p{margin:2px 0 0;font-size:13px;color:var(--mut)}
.sgst{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:12px}
.sgst span{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--faint)}
.sgst i{display:block;height:4px;border-radius:999px;background:var(--line)}
.sgst span.on{color:var(--wnd);font-weight:500}.sgst span.on i{background:var(--wnd)}
.sgst span.done{color:var(--okd)}.sgst span.done i{background:var(--ok)}
/* Inställningar: etikett till vänster, fält med enhet till höger. */
.sgset{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:12px;align-items:center;font-size:14px;color:var(--ink2)}
.sgset .fw{position:relative}
.sgset .fi{height:40px;padding-right:38px;font-size:14.5px;text-align:right}
.sgset i{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13.5px;color:var(--mut);pointer-events:none}
.sgset input::-webkit-outer-spin-button,.sgset input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sgset input[type=number]{-moz-appearance:textfield}
/* Siffror i staplade tabeller får en etikett på mobil. */
.sgml{display:none}
@media (max-width:820px){.sgml{display:inline;color:var(--mut);font:400 12px 'Schibsted Grotesk',system-ui,sans-serif;margin-right:4px}}
@media (max-width:520px){.sgset{grid-template-columns:minmax(0,1fr) 120px}}
.sgsave{position:sticky;bottom:12px;z-index:4;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding:12px 16px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 12px 28px -16px rgba(22,17,14,.35);font-size:13.5px;color:var(--mut);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.sgsave.on{opacity:1;pointer-events:auto;transform:none;color:var(--ink2)}
.sgtg{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.sgtg b{display:block;font-weight:500;font-size:14px}
.sgtg p{margin:2px 0 0;font-size:12.5px;color:var(--mut);line-height:1.45}
.sga > i.ok{background:var(--ok)}
.sga > i.na{background:var(--line2)}
.sgshot{display:block;max-width:100%;max-height:520px;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
/* Växlaren mellan verksamheterna högst upp i menyn (bara för Pascal). */
.wsw{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;margin:2px 0 4px;border-radius:12px;background:var(--hover)}
.wsw button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;height:40px;border-radius:9px;opacity:.5;transition:background .15s,opacity .15s,box-shadow .15s}
.wsw button:hover{opacity:.8}
.wsw button.on{opacity:1;background:var(--card);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(22,17,14,.08)}
.wsw button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.wsw .logo{width:62px}
.sglogo{display:block;width:84px;aspect-ratio:640/80;background:var(--ink);-webkit-mask:url(assets/skinstugan-logo.png) center/contain no-repeat;mask:url(assets/skinstugan-logo.png) center/contain no-repeat}
.wsw .sglogo{width:78px}
.sgsv{display:flex;flex-direction:column;gap:9px;margin-top:20px;padding-top:18px;padding-bottom:4px}
.sgsv .h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--mut);margin-bottom:2px}
.sgsr{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2)}
.sgsr i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.sgsr i.bad{background:var(--badd)}
.sgsr i.na{background:var(--line2)}
.sgas .bg,.sgas .bd{justify-content:center}