:root { --bg:#1d2433; --card:#283146; --txt:#e8eaf0; --dim:#9aa3b8; --acc:#e0b86a; --fejl:#e58b8b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt);
       font:16px/1.5 -apple-system, system-ui, sans-serif;
       padding:max(16px, env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom)); }
main { max-width:640px; margin:0 auto; }
h1 { font-size:24px; margin:8px 0 2px; }
h2 { font-size:18px; margin:24px 0 8px; }
.sub, .note { color:var(--dim); font-size:14px; }
.card { background:var(--card); border-radius:14px; padding:16px; margin-bottom:12px; }
.fil h3 { margin:0 0 4px; font-size:17px; }
.fil p { margin:0 0 10px; color:var(--dim); font-size:14px; }
.raekke { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
button, .knap { background:var(--acc); color:#1d2433; border:0; border-radius:10px;
         padding:10px 14px; font-size:15px; font-weight:600; text-decoration:none; display:inline-block; cursor:pointer; }
button.sek, .knap.sek { background:transparent; color:var(--txt); border:1px solid var(--dim); }
button:disabled { opacity:.5; }
.ok { color:var(--acc); font-size:14px; }
.fejl { color:var(--fejl); font-size:14px; }
input, textarea { width:100%; background:#1a2030; color:var(--txt); border:1px solid #3b465f;
         border-radius:10px; padding:10px; font:inherit; margin:4px 0 10px; }
#afspiller { position:fixed; left:0; right:0; bottom:0; background:#141a27; border-top:1px solid #2c3550;
         padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:none; }
#afspiller.vis { display:block; }
#afspiller strong { display:block; font-size:14px; margin-bottom:4px; }
audio { width:100%; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:6px 4px; border-bottom:1px solid #313a52; vertical-align:top; }
th { color:var(--dim); font-weight:500; }
.skjult { display:none; }
footer { margin-top:28px; }
.rul { overflow-x:auto; }
.bruger { background:var(--card); border-radius:14px; padding:14px 16px; margin-bottom:12px; }
.bruger .raekke { justify-content:space-between; align-items:flex-start; }
.knapper { display:flex; gap:6px; flex-wrap:wrap; }
.knapper button { margin:0; padding:8px 12px; font-size:14px; }
.tjekliste { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px 16px; margin-top:10px; }
.tjekliste label { display:flex; align-items:center; gap:8px; font-size:15px; cursor:pointer; }
.tjekliste input { width:18px; height:18px; margin:0; }