:root{
  --ink:#12121e; --ink2:#181828; --yta:#1e1e33; --yta2:#252540;
  --linje:#2f2f4d; --text:#e9e9f2; --dim:#9494ae; --dim2:#6f6f8c;
  --teal:#14b8a6; --teal-mork:#0d7d70; --gul:#f0b429; --rod:#ef6461;
  --gron:#4ade80; --lila:#a78bfa;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Webblasarens egen [hidden]-regel har lag specificitet och forlorar mot varje
   klassregel som sjalv satter display. Lasskarmen, panelen och toasten har alla
   display i sin klass, sa utan det har blir element.hidden = true helt verkningslost:
   appen laddar bakom en lasskarm som aldrig forsvinner. */
[hidden]{display:none !important}
html,body{background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{padding-bottom:env(safe-area-inset-bottom)}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:1.9rem;letter-spacing:-.02em;font-weight:650}
h2{font-size:1.02rem;font-weight:640;letter-spacing:-.01em}
.dim{color:var(--dim)}
.liten{font-size:.82rem;line-height:1.5}
.markning{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--teal)}

/* ------------------------------------------------------------ inloggning */
.lasskarm{position:fixed;inset:0;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,#1b1b33 0%,var(--ink) 62%);z-index:60}
.loginkort{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;
  background:var(--yta);border:1px solid var(--linje);border-radius:16px;padding:30px 26px}
.loginkort h1{margin-top:2px}
.loginkort p{margin-bottom:6px}
input,select,textarea{background:var(--ink2);border:1px solid var(--linje);
  border-radius:var(--r);padding:10px 12px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--teal)}
textarea{resize:vertical;min-height:88px;line-height:1.6}
.fel{color:var(--rod);font-size:.85rem;min-height:1.1em}

/* ------------------------------------------------------------ knappar */
.knapp{background:var(--yta2);border:1px solid var(--linje);border-radius:var(--r);
  padding:9px 15px;cursor:pointer;transition:.14s;white-space:nowrap}
.knapp:hover{border-color:var(--teal);background:#2b2b4a}
.knapp:disabled{opacity:.55;cursor:default}
.knapp.primar{background:var(--teal);border-color:var(--teal);color:#05201d;font-weight:640}
.knapp.primar:hover{background:#17cbb7}
.knapp.liten{padding:6px 11px;font-size:.84rem}
.knapp.tyst{background:transparent;color:var(--dim)}
.knapp.fara:hover{border-color:var(--rod);color:var(--rod)}

/* ------------------------------------------------------------ topp */
.topp{position:sticky;top:0;z-index:30;background:rgba(18,18,30,.93);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linje)}
.toppinner{max-width:1240px;margin:0 auto;padding:11px 20px;display:flex;
  align-items:center;gap:18px;flex-wrap:wrap}
.logga{display:flex;align-items:center;gap:9px;font-weight:640;letter-spacing:-.01em}
.prick{width:11px;height:11px;border-radius:50%;border:2.5px solid var(--teal)}
.flikar{display:flex;gap:3px;margin-right:auto}
.flik{background:none;border:none;padding:7px 13px;border-radius:8px;color:var(--dim);
  cursor:pointer;font-size:.9rem}
.flik:hover{color:var(--text)}
.flik.aktiv{background:var(--yta2);color:var(--text);font-weight:600}
.toppknappar{display:flex;gap:7px}

.innehall{max-width:1240px;margin:0 auto;padding:22px 20px 80px}
.vy{display:flex;flex-direction:column;gap:20px}

/* ------------------------------------------------------------ kpi */
.kpirad{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px}
.kpi{background:var(--yta);border:1px solid var(--linje);border-radius:var(--r);padding:14px 16px}
.kpi .tal{font-size:1.75rem;font-weight:660;letter-spacing:-.03em;line-height:1.1}
.kpi .etikett{font-family:var(--mono);font-size:.63rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--dim2);margin-top:5px}
.kpi.varm .tal{color:var(--teal)}
.kpi.kall .tal{color:var(--gul)}
.kpi.het .tal{color:var(--gron)}

/* ------------------------------------------------------------ block */
.block{background:var(--yta);border:1px solid var(--linje);border-radius:14px;padding:18px}
.blockhuvud{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.raknare{font-family:var(--mono);font-size:.72rem;background:var(--yta2);
  border:1px solid var(--linje);border-radius:20px;padding:1px 9px;color:var(--dim)}
.tvakol{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:880px){.tvakol{grid-template-columns:1fr}}

/* ------------------------------------------------------------ lista */
.lista{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.rad{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  background:var(--ink2);border:1px solid transparent;border-left:3px solid var(--linje);
  border-radius:9px;padding:10px 13px;cursor:pointer;transition:.13s;text-align:left;width:100%}
.rad:hover{border-color:var(--linje);background:var(--yta2)}

/* Vansterkanten = har du gjort nagot, inte prioritet. Orord ska sticka ut som
   ofardig, darav den streckade kanten och den dampade texten. */
.rad.orord{border-left-style:dashed;border-left-color:#4a4a68}
.rad.orord .radnamn{color:#b9b9cc}
.rad.gjort{border-left-color:var(--gul)}
.rad.svarat{border-left-color:var(--gron)}
.rad.vilar{border-left-color:#3a3a52;opacity:.55}
.pill.pri{border-color:#3a3a58;color:var(--dim2);letter-spacing:.06em}
.pill.pri.p1{color:var(--teal);border-color:#1b5f57}
.pill.pri.p2{color:var(--gul);border-color:#5c4715}

.teckenforklaring{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;
  font-size:.76rem;color:var(--dim2)}
.teckenforklaring span{display:flex;align-items:center;gap:6px}
.prov{width:14px;height:3px;border-radius:2px;display:inline-block;background:#4a4a68}
.prov.orord{background:repeating-linear-gradient(90deg,#4a4a68 0 4px,transparent 4px 7px)}
.prov.gjort{background:var(--gul)}
.prov.svarat{background:var(--gron)}
.prov.vilar{background:#3a3a52}
.stjarna{background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;
  color:var(--dim2);padding:2px;flex-shrink:0}
.stjarna.pa{color:var(--gul)}
.radtext{min-width:0}
.radnamn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radmeta{font-size:.79rem;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:1px}
.radhoger{display:flex;align-items:center;gap:7px;flex-shrink:0}
.tom{color:var(--dim2);font-size:.85rem;padding:14px 2px;font-style:italic}

.pill{font-family:var(--mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.09em;
  padding:3px 8px;border-radius:20px;border:1px solid var(--linje);color:var(--dim);white-space:nowrap}
.pill.teal{color:var(--teal);border-color:#1b5f57;background:#0f2f2b}
.pill.gul{color:var(--gul);border-color:#5c4715;background:#2e2610}
.pill.rod{color:var(--rod);border-color:#5e2b2b;background:#301a1a}
.pill.gron{color:var(--gron);border-color:#255c38;background:#12301f}
.pill.lila{color:var(--lila);border-color:#443a6b;background:#211d38}

/* ------------------------------------------------------------ filter */
.filterrad{display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  background:var(--yta);border:1px solid var(--linje);border-radius:12px;padding:12px;
  position:sticky;top:58px;z-index:20;margin-bottom:20px}
@media(max-width:640px){.filterrad{position:static}}
.filterrad input[type=search]{flex:1 1 230px;min-width:170px}
.filterrad select{width:auto;min-width:145px}
.kryss{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--dim);
  cursor:pointer;white-space:nowrap}
.kryss input{width:auto}

/* ------------------------------------------------------------ panel */
.panelbakgrund{position:fixed;inset:0;background:rgba(6,6,14,.62);z-index:40;
  backdrop-filter:blur(2px)}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);z-index:50;
  background:var(--ink2);border-left:1px solid var(--linje);overflow-y:auto;
  padding:22px 24px 60px;display:flex;flex-direction:column;gap:16px}
.panelhuvud{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.panelhuvud h2{font-size:1.35rem}
.stang{background:none;border:none;color:var(--dim);font-size:1.5rem;cursor:pointer;
  line-height:1;padding:0 4px}
.stang:hover{color:var(--text)}
.faltgrupp{display:flex;flex-direction:column;gap:5px}
.faltgrupp label{font-family:var(--mono);font-size:.63rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--dim2)}
.faltrad{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:520px){.faltrad{grid-template-columns:1fr}}
.kort{background:var(--yta);border:1px solid var(--linje);border-radius:11px;padding:14px}
.kort h3{font-size:.83rem;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.13em;color:var(--dim2);font-weight:500;margin-bottom:8px}
.meddelanderuta{background:var(--ink);border:1px solid var(--linje);border-radius:9px;
  padding:13px;white-space:pre-wrap;font-size:.9rem;line-height:1.62;color:#dcdcea}
.knapprad{display:flex;gap:8px;flex-wrap:wrap}

.tidslinje{display:flex;flex-direction:column;gap:0;margin-top:4px}
.handelse{display:grid;grid-template-columns:auto 1fr auto;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--linje);align-items:baseline}
.handelse:last-child{border-bottom:none}
.handelse .datum{font-family:var(--mono);font-size:.72rem;color:var(--dim2);white-space:nowrap}
.handelse .notis{font-size:.87rem;color:#cdcddd}
.handelseknappar{display:flex;gap:8px;align-items:center;flex-shrink:0}
.handelse .bort{background:none;border:none;color:var(--dim2);cursor:pointer;font-size:.82rem;
  padding:2px 4px;border-radius:5px}
.handelse .bort:hover{color:var(--text);background:var(--yta2)}
.handelse .bort[data-radera-handelse]:hover{color:var(--rod)}
.handelse.redigeras{display:grid;grid-template-columns:1fr;background:var(--ink2);
  border:1px solid var(--teal);border-radius:10px;padding:13px;margin:6px 0}

/* ------------------------------------------------------------ statistik */
.stapelgrupp{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.stapel{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center;font-size:.85rem}
.stapelspar{background:var(--ink2);border-radius:5px;height:9px;overflow:hidden}
.stapelfyll{height:100%;background:var(--teal);border-radius:5px}
.aktivitet{display:flex;gap:5px;align-items:flex-end;height:110px;margin-top:16px}
.manad{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;
  justify-content:flex-end}
.manadstapel{width:100%;background:var(--teal);border-radius:3px 3px 0 0;min-height:2px}
.manadnamn{font-family:var(--mono);font-size:.6rem;color:var(--dim2)}

/* ------------------------------------------------------------ toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:70;
  background:var(--teal);color:#05201d;font-weight:620;padding:10px 20px;
  border-radius:22px;font-size:.88rem;box-shadow:0 8px 26px rgba(0,0,0,.45);
  max-width:min(560px,92vw);text-align:center}
.toast.fel{background:var(--rod);color:#2a0d0d}

@media(max-width:640px){
  .toppinner{padding:10px 14px;gap:11px}
  .innehall{padding:16px 14px 70px}
  .flikar{order:3;width:100%;margin-right:0}
  .panel{padding:18px 16px 60px}
  .rad{grid-template-columns:auto 1fr;gap:9px}
  .radhoger{grid-column:2;margin-top:4px;flex-wrap:wrap}
}

/* ---------------------------------------------------------- snabblogg */
.namnlista{display:flex;flex-direction:column;margin-top:5px;border:1px solid var(--linje);
  border-radius:var(--r);overflow:hidden;background:var(--yta2)}
.namnval{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 12px;background:none;border:0;border-bottom:1px solid var(--linje);
  color:var(--text);text-align:left;cursor:pointer;font:inherit}
.namnval:last-child{border-bottom:0}
.namnval.grupp{background:var(--ink2);font-weight:560}
.varning{margin-top:14px;padding:13px 15px;border:1px solid var(--gul);
  border-radius:var(--r);background:rgba(240,180,41,.09);display:flex;
  flex-direction:column;gap:8px}
.namnval:hover,.namnval.pa{background:var(--teal-mork);color:#fff}
.namnval.pa .dim,.namnval:hover .dim{color:#d8f5f0}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--yta2);
  border:1px solid var(--linje);border-radius:20px;padding:4px 6px 4px 12px;font-size:.86rem}
.chip button{background:none;border:0;color:var(--dim);cursor:pointer;font-size:1.05rem;
  line-height:1;padding:0 5px;border-radius:50%}
.chip button:hover{color:var(--rod);background:var(--ink)}

/* ---------------------------------------------------------- lankfarger
   Webblasarens egen stilmall satter farg pa a:link och a:visited. .knapp
   satter bakgrund och ram men aldrig color, sa en <a class="knapp"> foll
   tillbaka pa webblasarens bla, och lila nar lanken var besokt. Samma
   fallgrop som [hidden] hogst upp: UA-stilmallen vinner dar var CSS tiger.
   a.knapp ar mer specifik an .knapp, sa ordningen i filen spelar ingen roll. */
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
a.knapp,a.knapp:link,a.knapp:visited,a.knapp:hover,a.knapp:active{
  color:var(--text);text-decoration:none}
a.knapp.primar,a.knapp.primar:link,a.knapp.primar:visited{color:#05201d}
a.knapp.tyst,a.knapp.tyst:link,a.knapp.tyst:visited{color:var(--dim)}