:root{--gron:#17703B;--morkgron:#0F5229;--ljus:#EAF3ED;--gra:#5A5A5A;--linje:#C9D6CD;--falt:#F7FAF8;--rod:#B3261E;--gul:#FFF4D6;--text:#1d1d1d;--bak:#f4f6f5}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light}
body{margin:0;font-family:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.45;color:var(--text);background:var(--bak)}
a{color:var(--gron)}
header.topp{background:#fff;border-bottom:3px solid var(--gron)}
header.topp .inner{max-width:960px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
header.topp img{height:44px}
header.topp .rubrik small{display:block;color:var(--gra);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
header.topp .rubrik strong{font-size:20px;color:var(--morkgron)}
header.topp nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
main{max-width:960px;margin:0 auto;padding:20px}
h1{color:var(--morkgron);font-size:26px;margin:8px 0 4px}
h2{color:var(--gron);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--linje)}
p.ingress{color:var(--gra);margin:0 0 20px}
.kort{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:18px 20px;margin-bottom:18px}
.rad{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}
label{display:block;font-size:12.5px;color:var(--gra);margin-bottom:3px}
input,select,textarea{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--linje);border-radius:6px;background:var(--falt);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gron);outline-offset:0;border-color:var(--gron);background:#fff}
textarea{min-height:70px;resize:vertical}
.falt{margin-bottom:12px}
.hjalp{font-size:12.5px;color:var(--gra);margin-top:4px}
button,.knapp{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;font-size:15px;padding:10px 18px;border-radius:7px;border:1px solid var(--gron);background:var(--gron);color:#fff;cursor:pointer;text-decoration:none;line-height:1.2;box-shadow:0 1px 2px rgba(0,0,0,.12)}
button:hover,.knapp:hover{background:var(--morkgron)}
button:disabled{opacity:.5;cursor:default}
.sekundar{background:#fff;color:var(--gron)}
.sekundar:hover{background:var(--ljus)}
.farlig{background:#fff;color:var(--rod);border-color:var(--rod)}
.farlig:hover{background:#fbe9e7}
.liten{font-size:13px;padding:6px 11px}
.knappar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{background:var(--gron);color:#fff;text-align:left;padding:8px 8px;font-size:12.5px;font-weight:600}
td{padding:8px 8px;border-bottom:1px solid var(--linje);vertical-align:top}
td.h,th.h{text-align:right;white-space:nowrap}
tr.klick{cursor:pointer}
tr.klick:hover td{background:var(--ljus)}
.summa{font-weight:700;color:var(--morkgron);font-size:17px;text-align:right;margin-top:10px}
.mottagare{border:1px solid var(--linje);border-radius:8px;padding:12px 14px;margin-bottom:10px;background:#fff;position:relative}
.mottagare .nr{position:absolute;top:-10px;left:12px;background:var(--gron);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.mottagare .bort{position:absolute;top:8px;right:8px}
.status{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12.5px;font-weight:600;white-space:nowrap}
.status.ny{background:var(--gul);color:#7a5300}
.status.godkand{background:#e3edff;color:#1c4a9c}
.status.utbetald{background:var(--ljus);color:var(--morkgron)}
.status.avvisad{background:#fbe9e7;color:var(--rod)}
.fel{background:#fbe9e7;color:var(--rod);border:1px solid #efc4bf;padding:10px 14px;border-radius:7px;margin:10px 0}
.ok{background:var(--ljus);color:var(--morkgron);border:1px solid var(--linje);padding:10px 14px;border-radius:7px;margin:10px 0}
.notis{background:var(--gul);border:1px solid #f0dca0;padding:10px 14px;border-radius:7px;margin:0 0 16px;font-size:14px}
.filer{list-style:none;padding:0;margin:8px 0 0}
.filer li{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--linje);border-radius:6px;margin-bottom:6px;background:var(--falt);font-size:14px}
.filer li .namn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filer li .storlek{color:var(--gra);font-size:12.5px}
.filer li.laddar{opacity:.7}
.slapp{border:2px dashed var(--linje);border-radius:8px;padding:18px;text-align:center;color:var(--gra);background:var(--falt)}
.slapp.over{border-color:var(--gron);background:var(--ljus)}
.slapp input{display:none}
.flikar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.flik{padding:7px 14px;border-radius:20px;border:1px solid var(--linje);background:#fff;font-weight:600;font-size:14px;color:var(--gra);cursor:pointer;box-shadow:none}
.flik:hover{background:var(--ljus)}
.flik.aktiv{background:var(--gron);color:#fff;border-color:var(--gron)}
.flik .antal{background:rgba(0,0,0,.12);border-radius:10px;padding:0 7px;font-size:12px;margin-left:4px}
.tva{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.tva{grid-template-columns:1fr}table.rader thead{display:none}table.rader td{display:block;border:0;padding:3px 8px}table.rader tr{display:block;border-bottom:1px solid var(--linje);padding:8px 0}td.h{text-align:left}}
.nyckel{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;font-size:14.5px}
.nyckel dt{color:var(--gra)}
.nyckel dd{margin:0}
.historik{font-size:13px;color:var(--gra);list-style:none;padding:0;margin:0}
.historik li{padding:4px 0;border-bottom:1px dashed var(--linje)}
.kopiera{font-family:ui-monospace,Menlo,monospace;font-size:14px;background:var(--falt);border:1px solid var(--linje);border-radius:5px;padding:2px 7px;cursor:pointer}
.kopiera:hover{background:var(--ljus)}
.varning{color:var(--rod);font-size:13px}
.centrum{max-width:420px;margin:60px auto}
footer{color:var(--gra);font-size:12.5px;text-align:center;padding:24px}
.tyst{color:var(--gra);font-size:13.5px}
.lage{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.lage{grid-template-columns:1fr}}
.lageval{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#fff;color:var(--text);border:2px solid var(--linje);box-shadow:none;padding:12px 14px;font-weight:400}
.lageval span{font-size:13px;color:var(--gra)}
.lageval:hover{background:var(--ljus)}
.lageval.aktiv{border-color:var(--gron);background:var(--ljus)}
.lageval.aktiv strong{color:var(--morkgron)}
body.lage-eget .bara-flera,body.lage-flera .bara-eget{display:none}
.lage.tre{grid-template-columns:1fr 1fr 1fr}
@media(max-width:760px){.lage.tre{grid-template-columns:1fr}}
.liten-val{padding:9px 12px}
.bara-tavling,.bara-inkop,.bara-resa{display:none}
body.typ-tavling .bara-tavling,body.typ-inkop .bara-inkop,body.typ-resa .bara-resa{display:block}
body.lage-flera .falt.bara-eget{display:none}
.steg-rad{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.stegpunkt{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--gra);background:#fff;border:1px solid var(--linje);border-radius:20px;padding:4px 12px 4px 6px}
.stegpunkt::before{content:"";display:none}
.stegpunkt small{font-weight:500;font-size:12.5px}
.stegpunkt.aktiv{background:var(--gron);color:#fff;border-color:var(--gron)}
.stegpunkt.klar{color:var(--morkgron);background:var(--ljus);border-color:var(--ljus)}
.steg-knappar{justify-content:flex-start}
.steg-knappar #nasta,.steg-knappar #skicka{margin-left:auto}
.steg-knappar #status{order:-1;margin-left:auto}
.steg-knappar #status:empty{display:none}
.lageval{min-height:74px}
.bara-swish,.bara-konto{display:none}
body.betal-swish .bara-swish,body.betal-konto .bara-konto{display:block}