:root { --groen: #1f3b2d; --lys: #eef2ec; --graa: #595959; --roed: #9b1c1c; --gul: #f6c445; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #1a1a1a; background: #f8f8f6; line-height: 1.5; }
header { background: var(--groen); color: #fff; padding: 12px 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
header .navn { font-weight: 700; font-size: 1.1rem; }
header .under { opacity: .85; }
header .test { background: var(--gul); color: #222; font-size: .75rem; padding: 2px 8px; border-radius: 4px; }
header .logud { margin-left: auto; display: flex; gap: 10px; align-items: center; }
header .logud button { background: transparent; color: #fff; border: 1px solid #fff9; padding: 4px 10px; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
footer { text-align: center; color: var(--graa); font-size: .8rem; padding: 24px 16px; }
h1 { margin-top: 0; }
section { background: #fff; border: 1px solid #e3e6e1; border-radius: 8px; padding: 16px 20px; margin: 16px 0; }
.doer.aaben { border-left: 6px solid #2e7d32; }
.doer.lukket { border-left: 6px solid var(--graa); }
button { font: inherit; background: var(--groen); color: #fff; border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; }
button.stor { padding: 12px 22px; font-size: 1.05rem; }
table { border-collapse: collapse; }
th { text-align: left; padding: 4px 16px 4px 0; color: var(--graa); font-weight: 500; }
td { padding: 4px 0; }
.ok { background: var(--lys); padding: 10px 14px; border-radius: 6px; }
.fejl { background: #fdecec; color: var(--roed); padding: 10px 14px; border-radius: 6px; }
.kodeord code { font-size: 1.3rem; background: var(--lys); padding: 6px 10px; border-radius: 4px; }
.lille { font-size: .85rem; color: var(--graa); }
header nav { display: flex; gap: 14px; margin-left: 16px; }
header nav a { color: #fff; text-decoration: none; opacity: .9; }
header nav a:hover { text-decoration: underline; }
main:has(table.brugere) { max-width: 1100px; }
table.brugere { width: 100%; background: #fff; border: 1px solid #e3e6e1; border-radius: 8px; }
table.brugere th, table.brugere td { padding: 10px 12px; border-bottom: 1px solid #eef0ec; vertical-align: top; text-align: left; }
table.brugere tr.spaerret td { color: var(--graa); }
.handlinger form { display: inline-block; margin: 0 4px 4px 0; }
.handlinger button { padding: 4px 10px; font-size: .85rem; background: #fff; color: var(--groen); border: 1px solid var(--groen); }
.handlinger button.roed { color: var(--roed); border-color: var(--roed); }
.maerke { display: inline-block; font-size: .75rem; background: var(--lys); padding: 1px 6px; border-radius: 4px; margin-top: 4px; }
.maerke.roed { background: #fdecec; color: var(--roed); }
form.opret { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
form.opret label { display: flex; flex-direction: column; font-size: .9rem; color: var(--graa); gap: 4px; }
form.opret input, form.opret select { font: inherit; padding: 6px 8px; border: 1px solid #cfd4cc; border-radius: 6px; }
#link { word-break: break-all; font-size: .95rem; }
td.slags form { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
td.slags button { align-self: flex-start; margin-top: 4px; padding: 3px 10px; font-size: .8rem; }
fieldset.slags { grid-column: 1 / -1; border: 1px solid #cfd4cc; border-radius: 6px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
fieldset.slags legend { color: var(--graa); font-size: .9rem; }
fieldset.slags label { flex-direction: row !important; align-items: center; color: #1a1a1a !important; }
main:has(table.log) { max-width: 1100px; }
table.log tr.afvist td { background: #fff7f7; }
form.filter { display: flex; gap: 16px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
form.filter select { font: inherit; padding: 4px 6px; }