:root{
  --skog:#1B3B2F; --skog-djup:#12291F; --mossa:#7E9B6A; --salvia:#C7D6BB;
  --gradde:#F6F3EC; --papper:#FFFFFF; --terra:#BF5A20; --terra-ljus:#F7E7DA;
  --black:#1E241F; --dov:#6B7A6E; --linje:#DFE6E0; --linje-mjuk:#EDF1EC;
  --gul:#B98900; --gul-ljus:#FCF3DC;
  --radie:10px; --skugga:0 1px 2px rgba(27,59,47,.06),0 6px 20px rgba(27,59,47,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  background:var(--gradde); color:var(--black); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 .4em; line-height:1.25; letter-spacing:-.01em}
h2{font-size:19px} h3{font-size:16px}
p{margin:0 0 .8em}
a{color:var(--skog)}

/* ---- topp ---- */
.topp{background:var(--skog); color:#fff; position:sticky; top:0; z-index:40}
.topp-inner{max-width:1240px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.markesrad{display:flex; align-items:center; gap:12px}
.logo{width:34px; height:34px; border-radius:8px; display:block}
.markesnamn{font-size:19px; font-weight:700; letter-spacing:-.02em}
.markestagg{font-size:12px; color:var(--salvia)}
.topp-hoger{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nedrakning{font-size:12px; color:var(--salvia); background:rgba(255,255,255,.08); padding:5px 10px; border-radius:20px; white-space:nowrap}
.nedrakning strong{color:#fff}
.projektval{background:var(--skog-djup); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:7px; padding:7px 10px; font-size:13px; font-family:inherit; max-width:230px}

.flikar{max-width:1240px; margin:0 auto; padding:0 24px; display:flex; gap:2px; overflow-x:auto}
.flik{background:none; border:0; color:var(--salvia); padding:11px 15px; font-size:14px; font-family:inherit; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:7px}
.flik:hover{color:#fff}
.flik.aktiv{color:#fff; border-bottom-color:var(--mossa); font-weight:600}
.raknare{background:rgba(255,255,255,.16); border-radius:11px; padding:1px 8px; font-size:11px; font-weight:700}

/* ---- layout ---- */
main{max-width:1240px; margin:0 auto; padding:26px 24px 80px}
.vy{display:none} .vy.aktiv{display:block}
.spalt{display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start}
@media(max-width:900px){.spalt{grid-template-columns:1fr}}
.kort{background:var(--papper); border:1px solid var(--linje); border-radius:var(--radie); padding:22px; box-shadow:var(--skugga); margin-bottom:20px}
.kort.mjuk{background:var(--linje-mjuk); border-color:#DCE5DC; box-shadow:none}
.ingress{color:var(--dov); font-size:14px}
.fotnot{color:var(--dov); font-size:12.5px; font-style:italic; margin-top:14px; margin-bottom:0}

/* ---- formulär ---- */
label{display:block; font-size:12.5px; font-weight:600; color:var(--dov); margin:12px 0 5px}
input[type=text],input[type=password],input[type=date],input[type=search],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--linje); border-radius:7px;
  font-family:inherit; font-size:14px; background:#fff; color:var(--black);
}
textarea{resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--mossa); outline-offset:-1px; border-color:var(--mossa)}
.tvakol{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hjalp{font-size:12.5px; color:var(--dov); margin:6px 0 0}
.radknappar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.toppmarginal{margin-top:16px}

.knapp{background:var(--papper); border:1px solid var(--linje); border-radius:7px; padding:9px 15px; font-size:14px; font-family:inherit; cursor:pointer; color:var(--black); font-weight:500}
.knapp:hover{border-color:var(--mossa)}
.knapp.primar{background:var(--skog); color:#fff; border-color:var(--skog)}
.knapp.primar:hover{background:var(--skog-djup)}
.knapp.sekundar{background:var(--linje-mjuk)}
.knapp.fara{background:var(--terra); color:#fff; border-color:var(--terra)}
.knapp.liten{padding:6px 11px; font-size:13px; background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.22)}
.knapp.liten:hover{background:rgba(255,255,255,.18)}
.knapp:disabled{opacity:.5; cursor:default}

.valjare{display:flex; gap:3px; background:var(--linje-mjuk); padding:3px; border-radius:8px; margin:14px 0}
.lage{flex:1; background:none; border:0; padding:8px 10px; border-radius:6px; font-size:13.5px; font-family:inherit; cursor:pointer; color:var(--dov)}
.lage.aktiv{background:#fff; color:var(--black); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.07)}
.lagepanel{display:none} .lagepanel.aktiv{display:block}

.sitemap-resultat{margin-top:12px; max-height:230px; overflow:auto; border:1px solid var(--linje); border-radius:7px; padding:8px; display:none}
.sitemap-resultat.synlig{display:block}
.sitemap-rad{display:flex; align-items:flex-start; gap:8px; padding:3px 2px; font-size:12.5px; word-break:break-all}
.sitemap-rad input{width:auto; margin-top:3px; flex:0 0 auto}

/* ---- nivåer ---- */
.niva{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px}
.niva p{font-size:13px; color:var(--dov); margin:0}
.badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap; flex:0 0 auto}
.badge.forbjuden{background:var(--terra-ljus); color:var(--terra)}
.badge.kravbelagg{background:var(--gul-ljus); color:var(--gul)}
.badge.granska{background:var(--linje-mjuk); color:var(--dov)}

/* ---- sammanfattning ---- */
.sammanfattning{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px}
.statruta{background:var(--papper); border:1px solid var(--linje); border-radius:var(--radie); padding:16px 18px; box-shadow:var(--skugga)}
.statruta .tal{font-size:31px; font-weight:700; letter-spacing:-.03em; line-height:1.1}
.statruta .etikett{font-size:12.5px; color:var(--dov); margin-top:3px}
.statruta.forbjuden .tal{color:var(--terra)}
.statruta.kravbelagg .tal{color:var(--gul)}

.filterrad{display:flex; gap:9px; margin-bottom:18px; flex-wrap:wrap}
.filterrad input[type=search]{flex:1; min-width:190px}
.filterrad select{width:auto; min-width:135px}

/* ---- fynd ---- */
.fyndlista{display:flex; flex-direction:column; gap:14px}
.fynd{background:var(--papper); border:1px solid var(--linje); border-radius:var(--radie); box-shadow:var(--skugga); overflow:hidden}
.fynd.klar{opacity:.62}
.fynd-topp{display:flex; gap:12px; align-items:flex-start; padding:15px 18px; cursor:pointer}
.fynd-topp:hover{background:#FBFCFB}
.fynd-huvud{flex:1; min-width:0}
.fynd-rubrik{font-weight:650; font-size:15px; margin-bottom:3px}
.fynd-meta{font-size:12px; color:var(--dov); display:flex; gap:10px; flex-wrap:wrap}
.fynd-citat{margin-top:9px; font-size:13.5px; color:var(--black); background:var(--linje-mjuk); border-left:3px solid var(--mossa); padding:8px 11px; border-radius:0 5px 5px 0; line-height:1.5}
.fynd-citat mark{background:#FBE7A8; color:inherit; padding:0 2px; border-radius:2px; font-weight:600}
.fynd-kropp{display:none; padding:0 18px 18px; border-top:1px solid var(--linje-mjuk)}
.fynd.oppen .fynd-kropp{display:block}
.avsnitt{margin-top:15px}
.avsnitt h4{margin:0 0 5px; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mossa); font-weight:700}
.avsnitt p{font-size:13.5px; margin:0; color:var(--black)}
.avsnitt .dov{color:var(--dov)}
.statusrad{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--linje-mjuk)}
.statusrad select,.statusrad input{width:auto}
.omskrivning{width:100%; margin-top:6px; font-family:inherit}
.pill{display:inline-block; background:var(--linje-mjuk); border-radius:20px; padding:2px 9px; font-size:11.5px; color:var(--dov)}
.pill.kopplad{background:#E7F0E7; color:var(--skog); font-weight:600}
.tomt{text-align:center; padding:50px 20px; color:var(--dov)}

/* ---- belägg ---- */
.belagglista{display:flex; flex-direction:column; gap:11px}
.belagg{border:1px solid var(--linje); border-radius:8px; padding:13px 15px}
.belagg-titel{font-weight:650; font-size:14px}
.belagg-meta{font-size:12px; color:var(--dov); margin-top:3px}
.belagg-utg{color:var(--terra); font-weight:600}

/* ---- export ---- */
.exportrad{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--linje-mjuk)}
.exportrad:last-child{border-bottom:0}
.exportrad strong{display:block; font-size:14.5px}
.exportrad span{display:block; font-size:12.5px; color:var(--dov); margin-top:2px}
.statusruta{margin-top:12px; font-size:13px; padding:11px 13px; border-radius:7px; display:none}
.statusruta.synlig{display:block}
.statusruta.ok{background:#E9F2EA; color:var(--skog)}
.statusruta.fel{background:var(--terra-ljus); color:var(--terra)}
.statusruta pre{margin:7px 0 0; white-space:pre-wrap; word-break:break-word; font-size:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- regelverk ---- */
.regel{border-top:1px solid var(--linje-mjuk); padding:14px 0}
.regel:first-of-type{border-top:0}
.regel-rubrik{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.regel-rubrik strong{font-size:14.5px}
.regel-lagrum{font-size:12px; color:var(--dov); font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.regel p{font-size:13.5px; margin:7px 0 0; color:var(--dov)}

/* ---- lucka (lösenordsspärr) ---- */
/* Appen döljs i CSS, inte i JS, så att inget hinner blinka förbi innan skriptet kört. */
body[data-last="ja"] .topp,
body[data-last="ja"] main,
body[data-last="ja"] .modal{display:none !important}

.lucka{position:fixed; inset:0; background:var(--skog); display:flex; align-items:center; justify-content:center; z-index:100; padding:22px}
.lucka[hidden]{display:none}
.lucka-kort{background:var(--papper); border-radius:12px; padding:34px 32px 30px; width:100%; max-width:370px; box-shadow:0 18px 50px rgba(0,0,0,.28); text-align:center}
.lucka-logo{width:44px; height:44px; border-radius:10px; display:block; margin:0 auto 14px}
.lucka-namn{font-size:23px; font-weight:700; letter-spacing:-.02em; margin:0 0 4px}
.lucka-ingress{font-size:13.5px; color:var(--dov); margin:0 0 20px}
.lucka-kort label{text-align:left; margin-top:0}
.lucka-knapp{width:100%; margin-top:16px; padding:11px}
.lucka-fel{margin:13px 0 0; font-size:13px; color:var(--terra); font-weight:600}
.lucka-fel[hidden]{display:none}

/* ---- modal ---- */
.modal{position:fixed; inset:0; background:rgba(18,41,31,.55); display:flex; align-items:center; justify-content:center; z-index:60; padding:20px}
.modal[hidden]{display:none}
.modal-inner{background:#fff; border-radius:12px; padding:26px; max-width:640px; width:100%; max-height:86vh; overflow:auto; position:relative}
.modal-stang{position:absolute; top:12px; right:14px; background:none; border:0; font-size:26px; cursor:pointer; color:var(--dov); line-height:1}