/* restore — mörkt gränssnitt, allt på en skärm, inga externa beroenden. */

:root {
  --bak: #14161a;
  --panel: #1b1e24;
  --panel2: #22262e;
  --linje: #2e333d;
  --text: #e6e8ec;
  --dampad: #939aa6;
  --accent: #7fb2ff;
  --ok: #6ede8a;
  --varn: #ffcc66;
  --fel: #ff8a80;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bak);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 26px; margin: 8px 0 12px; }
h2 { font-size: 19px; margin: 32px 0 10px; border-bottom: 1px solid var(--linje); padding-bottom: 6px; }
h3 { font-size: 16px; margin: 0 0 6px; }

/* --- topp --- */

.topp {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--linje);
}
.marke { font-weight: 700; letter-spacing: .04em; color: var(--text); font-size: 17px; }
.topp nav { display: flex; gap: 16px; }
.topp nav a { color: var(--dampad); }
.topp nav a:hover { color: var(--text); text-decoration: none; }
.sokform { margin-left: auto; }
.sokform input, .stor-sok input {
  background: var(--bak); border: 1px solid var(--linje); color: var(--text);
  padding: 7px 11px; border-radius: 7px; min-width: 240px;
}
.utform { display: inline; }
.lank { background: none; border: none; color: var(--dampad); cursor: pointer; font: inherit; padding: 0; }
.lank:hover { color: var(--text); }

footer {
  max-width: 1180px; margin: 0 auto; padding: 20px; color: var(--dampad);
  font-size: 13px; border-top: 1px solid var(--linje);
}

/* --- knappar --- */

button, .knapp {
  background: var(--accent); color: #10131a; border: none; border-radius: 7px;
  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover, .knapp:hover { filter: brightness(1.1); text-decoration: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
.andra {
  background: var(--panel2); color: var(--text); border: 1px solid var(--linje);
  font-weight: 500; display: inline-block;
}
.farlig { border-color: #5a2d2d; color: var(--fel); }
.rad { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.radrubrik { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.radrubrik h1, .radrubrik h2 { margin-bottom: 0; border: none; }

/* --- tal --- */

.tal { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.talruta {
  background: var(--panel); border: 1px solid var(--linje); border-radius: 10px;
  padding: 12px 18px; min-width: 120px;
}
.talruta b { display: block; font-size: 24px; }
.talruta span { color: var(--dampad); font-size: 13px; }

/* --- kort --- */

.kort { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.kortruta {
  background: var(--panel); border: 1px solid var(--linje); border-radius: 10px;
  padding: 14px 16px; color: var(--text); display: block;
}
.kortruta:hover { border-color: var(--accent); text-decoration: none; }
.kortruta p { margin: 5px 0; font-size: 14px; }
.kortruta.liten { padding: 10px 12px; }

.ruta {
  background: var(--panel); border: 1px solid var(--linje); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}

/* --- tabeller --- */

table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linje); vertical-align: top; }
th { color: var(--dampad); font-weight: 600; font-size: 13px; }
tbody tr:hover { background: var(--panel); }
.h { text-align: right; white-space: nowrap; }

/* --- text --- */

.dampad { color: var(--dampad); }
.liten { font-size: 12.5px; }
.ingress { font-size: 17px; }
.tomt { color: var(--dampad); font-style: italic; }
.fel { color: var(--fel); }
.brodsmula { color: var(--dampad); font-size: 13px; margin: 0 0 4px; }
.kod, code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace; }
.kod, code { font-size: 13px; color: #cbd3e1; word-break: break-all; }

pre {
  background: var(--panel); border: 1px solid var(--linje); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;
  font-size: 13px; margin: 6px 0;
}
.spec { max-height: 70vh; overflow-y: auto; }

.etikett {
  display: inline-block; background: var(--panel2); border: 1px solid var(--linje);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; color: var(--dampad);
  margin: 0 4px 4px 0;
}
.etikett.hog { color: var(--ok); border-color: #2c4a34; }
.etikett.medel { color: var(--varn); border-color: #4d4227; }
.etikett.lag { color: var(--fel); border-color: #5a2d2d; }
.etikett.ai { color: var(--accent); border-color: #2b3d5c; }

.flash { list-style: none; padding: 0; margin: 0 0 16px; }
.flash li {
  border-radius: 8px; padding: 10px 14px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--linje);
}
.flash .ok { border-left: 3px solid var(--ok); }
.flash .fel { border-left: 3px solid var(--fel); color: var(--fel); }

/* --- listor --- */

.promptlista { padding-left: 22px; }
.promptlista li { margin-bottom: 14px; }
.fillista { list-style: none; padding: 0; margin: 6px 0; }
.fillista li { padding: 3px 0; border-bottom: 1px solid var(--linje); }

.lapp { margin-bottom: 12px; }
.bort { border-left: 3px solid var(--fel); }
.till { border-left: 3px solid var(--ok); }

.kopieruta { position: relative; }
.kopieruta > button, .kopieruta > a { position: relative; z-index: 1; margin: 0 6px 6px 0; }

/* --- inloggning och uppladdning --- */

.loginruta {
  max-width: 380px; margin: 12vh auto; background: var(--panel);
  border: 1px solid var(--linje); border-radius: 12px; padding: 28px;
}
.loginruta h1 { margin-top: 0; letter-spacing: .04em; }
.loginruta form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.loginruta input, .uppladdning input {
  background: var(--bak); border: 1px solid var(--linje); color: var(--text);
  padding: 9px 11px; border-radius: 7px; font: inherit;
}
.uppladdning { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 560px; }
.stor-sok { display: flex; gap: 8px; margin: 14px 0; }
label { color: var(--dampad); font-size: 14px; }