:root {
  --bg: #0e1013;
  --flade: #171a1f;
  --flade-hoej: #1e222a;
  --kant: #272c35;
  --kant-staerk: #38404d;
  --tekst: #e8eaed;
  --tekst-daempet: #98a1af;
  --tekst-svag: #6b7482;
  --accent: #e8c463;
  --accent-svag: #6b5a2e;
  --ok: #5dcaa5;
  --advarsel: #efaa47;
  --fejl: #e88080;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.ramme { max-width: 780px; margin: 0 auto; padding: 0 20px 80px; }

/* -- topbjælke -- */
.top {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 0 18px; margin-bottom: 24px;
  border-bottom: 1px solid var(--kant);
}
.maerke { font-size: 16px; font-weight: 500; letter-spacing: .01em; }
.maerke span { color: var(--accent); }
.faner { display: flex; gap: 18px; font-size: 14px; }
.faner a { color: var(--tekst-svag); padding-bottom: 2px; }
.faner a:hover { color: var(--tekst-daempet); }
.faner a.valgt { color: var(--tekst); border-bottom: 1px solid var(--accent); }
.top .hoejre { margin-left: auto; font-size: 13px; color: var(--tekst-svag); }

/* -- idékort på strømmen -- */
.raekke {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border: 1px solid var(--kant);
  border-radius: var(--radius); background: var(--flade);
  margin-bottom: 8px; transition: border-color .12s;
}
.raekke:hover { border-color: var(--kant-staerk); }
.raekke.venter { border-color: #4a4025; background: #1c1a14; }

.prik { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tekst-svag); }
.prik.tygger { background: var(--accent); }
.prik.moden { background: var(--ok); }
.prik.projekt { background: var(--ok); }
.prik.arkiv { background: var(--kant-staerk); }

.raekke .krop { flex: 1; min-width: 0; }
.raekke .titel { font-size: 15px; }
.raekke .under { font-size: 13px; color: var(--tekst-daempet); margin-top: 2px; }
.raekke .tid { font-size: 12px; color: var(--tekst-svag); flex: none; }

/* -- knapper -- */
button, .knap {
  font: inherit; font-size: 14px;
  background: transparent; color: var(--tekst);
  border: 1px solid var(--kant-staerk); border-radius: var(--radius);
  padding: 8px 16px; cursor: pointer; transition: background .12s, border-color .12s;
}
button:hover, .knap:hover { background: var(--flade-hoej); border-color: #4a5462; }
button:active { transform: scale(.985); }
button.primaer { border-color: var(--accent); color: var(--accent); }
button.primaer:hover { background: #221e14; }
button.lille { padding: 5px 12px; font-size: 13px; }

input[type=text], textarea {
  font: inherit; width: 100%;
  background: var(--bg); color: var(--tekst);
  border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 9px 12px;
}
input[type=text]:focus, textarea:focus {
  outline: none; border-color: var(--accent-svag);
  box-shadow: 0 0 0 2px rgba(232,196,99,.12);
}
textarea { resize: vertical; min-height: 68px; }
label { display: block; font-size: 13px; color: var(--tekst-daempet); margin-bottom: 5px; }

/* -- kort og sektioner -- */
.kort {
  border: 1px solid var(--kant); border-radius: 12px;
  background: var(--flade); padding: 18px 20px; margin-bottom: 16px;
}
.kort h2 { font-size: 15px; font-weight: 500; margin: 0 0 14px; }
h1 { font-size: 21px; font-weight: 500; margin: 0 0 4px; }
.meta { font-size: 13px; color: var(--tekst-daempet); margin-bottom: 22px; }

/* -- modningsspor -- */
.spor { border-left: 2px solid var(--kant); padding-left: 16px; }
.spor .runde { margin-bottom: 18px; }
.spor .runde:last-child { margin-bottom: 0; }
.spor .naar { font-size: 12px; color: var(--tekst-svag); }
.spor .fandt { font-size: 14px; margin-top: 3px; }

.blokerer {
  border: 1px solid #4a4025; background: #1c1a14;
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 12px;
}
.blokerer .stempel { font-size: 12px; color: var(--advarsel); }
.blokerer .hvad { font-size: 14px; margin: 3px 0 11px; }

.port { border-color: #2c4a3e; background: #12201b; }

.fejl {
  border: 1px solid #5c3535; background: #1f1414; color: var(--fejl);
  border-radius: var(--radius); padding: 12px 15px; margin-bottom: 16px; font-size: 14px;
}
.tom { color: var(--tekst-svag); font-size: 14px; padding: 28px 0; text-align: center; }
.raekkegruppe { display: flex; gap: 8px; flex-wrap: wrap; }
.felt { margin-bottom: 13px; }
.hint { font-size: 12px; color: var(--tekst-svag); margin-top: 5px; }

.tegn { font-size: 15px; flex: none; width: 16px; text-align: center; }
.tegn.ok { color: var(--ok); }
.tegn.mangler { color: var(--fejl); }
.tegn.ukendt { color: var(--tekst-svag); }