:root{
  --bg:#f6f5f2; --yta:#ffffff; --text:#1d1d1b; --dim:#6b6a65; --linje:#e3e1db; --accent:#b3261e; --accent-text:#ffffff;
  --ok:#2e7d4f; --ok-bg:#e7f3ec; --varn:#9a6200; --varn-bg:#fdf1d8; --fel:#b3261e; --fel-bg:#fbe7e5; --info:#2f5f8f; --info-bg:#e6eef7;
  --bar:#33312d; --bar-attest:#b9b6ad;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171715; --yta:#212120; --text:#ecebe6; --dim:#a19f97; --linje:#34332f; --accent:#e5564d; --accent-text:#171715;
    --ok:#6cc38e; --ok-bg:#1d2e24; --varn:#e3b04d; --varn-bg:#2f2916; --fel:#f08a83; --fel-bg:#341d1b; --info:#8bb6e6; --info-bg:#1c2733;
    --bar:#ecebe6; --bar-attest:#77756e;
  }
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit}
.topp{background:var(--yta);border-bottom:1px solid var(--linje);position:sticky;top:0;z-index:5}
.topp .in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.varumarke{font-weight:700;letter-spacing:.01em;text-decoration:none}
.varumarke b{color:var(--accent)}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{text-decoration:none;padding:6px 10px;border-radius:6px;color:var(--dim)}
nav a:hover,nav a.pa{background:var(--bg);color:var(--text)}
.hoger{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--dim);font-size:13px}
main{max-width:1180px;margin:0 auto;padding:20px 16px 60px}
h1{font-size:24px;margin:4px 0 2px;line-height:1.25}
h2{font-size:17px;margin:28px 0 10px}
.under{color:var(--dim);margin:0 0 16px}
.demoband{background:var(--varn-bg);color:var(--varn);text-align:center;padding:6px 12px;font-size:13px}
.kort{background:var(--yta);border:1px solid var(--linje);border-radius:10px;padding:14px 16px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0}
.kpi .kort .t{color:var(--dim);font-size:12.5px;text-transform:none}
.kpi .kort .v{font-size:21px;font-weight:650;margin-top:2px}
.kpi .kort .s{color:var(--dim);font-size:12.5px;margin-top:2px}
table{width:100%;border-collapse:collapse;background:var(--yta);border:1px solid var(--linje);border-radius:10px;overflow:hidden}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--linje);vertical-align:top}
th{font-size:12.5px;color:var(--dim);font-weight:600;background:var(--bg)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;white-space:nowrap}
tfoot td{font-weight:650;background:var(--bg)}
.tabellvarv{overflow-x:auto}
.mark{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:600}
.mark.ok{background:var(--ok-bg);color:var(--ok)} .mark.varning{background:var(--varn-bg);color:var(--varn)}
.mark.fel{background:var(--fel-bg);color:var(--fel)} .mark.info{background:var(--info-bg);color:var(--info)}
.mark.neutral{background:var(--bg);color:var(--dim);border:1px solid var(--linje)}
.ruta{padding:9px 12px;border-radius:8px;margin:6px 0;font-size:14px}
.ruta.ok{background:var(--ok-bg);color:var(--ok)} .ruta.varning{background:var(--varn-bg);color:var(--varn)}
.ruta.fel{background:var(--fel-bg);color:var(--fel)} .ruta.info{background:var(--info-bg);color:var(--info)}
.stapel{height:10px;background:var(--bg);border:1px solid var(--linje);border-radius:6px;position:relative;min-width:120px;overflow:hidden}
.stapel i{position:absolute;top:0;bottom:0;left:0;background:var(--bar)}
.stapel i.a{background:repeating-linear-gradient(45deg,var(--bar-attest),var(--bar-attest) 3px,transparent 3px,transparent 6px)}
.stapel b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--accent)}
.stapel.over{border-color:var(--fel)}
button,.knapp{font:inherit;cursor:pointer;border:1px solid var(--linje);background:var(--yta);color:var(--text);padding:6px 12px;border-radius:7px;text-decoration:none;display:inline-block}
button.primar,.knapp.primar{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}
button:hover,.knapp:hover{filter:brightness(.97)}
input[type=text],input[type=password],input[type=number],textarea,select{font:inherit;color:var(--text);background:var(--yta);border:1px solid var(--linje);border-radius:7px;padding:6px 8px}
input.proc{width:68px;text-align:right}
textarea{width:100%;min-height:220px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
.flash{max-width:1180px;margin:10px auto 0;padding:0 16px}
.rad{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dim{color:var(--dim)} .liten{font-size:13px}
.tva{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:800px){.tva{grid-template-columns:1fr}}
.logga{max-width:340px;margin:12vh auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}