:root{--bg:#0f1419;--panel:#171e26;--panel2:#1e2731;--line:#2a3542;--text:#e6edf3;--muted:#8b98a5;--accent:#3ea6ff;--accent2:#1f7acc;--ok:#2ea043;--bad:#f85149;--esp:#e8912d;--radius:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.9rem;margin:.3em 0 .5em}h2{font-size:1.25rem;margin:1.4em 0 .6em}
.wrap{max-width:1150px;margin:0 auto;padding:0 18px}
main.wrap{padding-top:22px;padding-bottom:50px;min-height:70vh}
.muted{color:var(--muted)}.small{font-size:.85rem}.right{text-align:right;white-space:nowrap}

/* top */
.top{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar{display:flex;align-items:center;gap:18px;min-height:56px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.brand{font-weight:700;color:var(--text);font-size:1.05rem;white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--accent)}
.projmenu{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.projmenu a{color:var(--muted);padding:6px 11px;border-radius:8px;font-size:.93rem}
.projmenu a:hover{background:var(--panel2);color:var(--text);text-decoration:none}
.usermenu{display:flex;gap:8px;margin-left:auto}
.adminbar{background:var(--panel2);border-top:1px solid var(--line)}
.adminbar .wrap{display:flex;gap:18px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;font-size:.93rem}

/* knapper */
.btn{display:inline-block;background:var(--accent2);color:#fff;border:1px solid transparent;padding:9px 18px;border-radius:9px;font:inherit;font-weight:600;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--accent);text-decoration:none}
.btn.small{padding:6px 13px;font-size:.88rem}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel2);border-color:var(--muted)}
.btn.danger{background:transparent;color:var(--bad);border-color:#5b2a2a}
.btn.danger:hover{background:var(--bad);color:#fff}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.pill{border:0;border-radius:99px;padding:3px 14px;font-weight:600;cursor:pointer;font:inherit;font-size:.85rem}
.pill.on{background:#12351d;color:#56d364}.pill.off{background:#2a2f36;color:var(--muted)}

/* forside */
.hero{padding:26px 0 12px}.hero h1{font-size:2.3rem;margin:0}.hero p{color:var(--muted);margin:.3em 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px;margin-top:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.card:hover{border-color:var(--accent2);transform:translateY(-2px)}
.thumb{display:block;aspect-ratio:16/10;background:var(--panel2);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.noimg{height:100%;display:grid;place-items:center;color:var(--muted);font-size:.9rem}
.cardbody{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.cardbody h2{margin:.5em 0 .3em;font-size:1.2rem}.cardbody h2 a{color:var(--text)}
.cardbody p{color:var(--muted);margin:0 0 auto;font-size:.95rem}
.cardbody .actions{margin:16px 0 0}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:#12283d;color:var(--accent);margin-right:6px}
.badge.esp32{background:#3a2610;color:var(--esp)}.badge.draft{background:#3b1d1d;color:var(--bad)}

/* detalje */
.detail{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:start}
.shot{width:100%;border-radius:var(--radius);border:1px solid var(--line);display:block}
.prose{font-size:1.03rem;margin:12px 0}
@media(max-width:800px){.detail{grid-template-columns:1fr}}

/* kode */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-top:10px}
.tab{background:none;border:0;color:var(--muted);padding:9px 16px;cursor:pointer;font:inherit;border-bottom:2px solid transparent}
.tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.codebox{border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);border-top:0;background:#0b0f14}
.codehead{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);color:var(--muted);font-size:.85rem;gap:8px;flex-wrap:wrap}
pre.code{margin:0;padding:14px 0;overflow:auto;max-height:75vh;counter-reset:ln;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2}
pre.code code{display:block;min-width:max-content}
.l{display:block;min-height:1.55em;padding:0 16px 0 0;white-space:pre}
.l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:3.6em;padding-right:1em;text-align:right;color:#4b5866;user-select:none}

/* tabeller */
.tablewrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl th{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;background:var(--panel2)}
.tbl tr:last-child td{border-bottom:0}
.rowhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:18px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat b{display:block;font-size:2rem}.stat span{color:var(--muted);font-size:.9rem}

/* formularer */
.form{display:flex;flex-direction:column;gap:16px;max-width:820px}
.form.narrow{max-width:420px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.93rem}
input[type=text],input[type=password],input[type=number],input:not([type]),textarea,select{width:100%;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;font-weight:400}
input:focus,textarea:focus{outline:2px solid var(--accent2);border-color:transparent}
input[type=file]{font-weight:400;color:var(--muted);font-size:.9rem}
textarea.mono{font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto}
label.check{flex-direction:row;align-items:center;gap:9px;font-weight:400}
label.check.big{font-weight:600;padding-top:26px}
label.check input{width:auto}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px;display:flex;gap:26px}
legend{color:var(--muted);font-size:.85rem;padding:0 8px}
fieldset label{flex-direction:row;align-items:center;gap:8px;font-weight:600}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:640px){.row2{grid-template-columns:1fr}label.check.big{padding-top:0}}
.thumbprev{max-width:210px;border-radius:8px;border:1px solid var(--line);margin-bottom:6px;display:block}
.filesec{border-top:1px solid var(--line);padding-top:6px}
.fileblock{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:14px;background:var(--panel)}
.filehead{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;margin-bottom:10px}
@media(max-width:640px){.filehead{grid-template-columns:1fr}}
.form .only-esp,.form .only-web{display:none}
.form.is-esp .only-esp{display:revert}.form.is-web .only-web{display:revert}
.form.is-esp label.only-esp,.form.is-web label.only-web{display:flex}.form.is-esp section.only-esp{display:block}
.form.is-esp span.only-esp,.form.is-web span.only-web{display:inline}

/* beskeder / login */
.alert{padding:11px 16px;border-radius:9px;margin:0 0 16px;border:1px solid}
.alert.ok{background:#10281a;border-color:#1f5a35;color:#7ee2a0}
.alert.fejl{background:#2d1517;border-color:#6b2a2e;color:#ff9b9b}
.loginbox{max-width:390px;margin:40px auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.loginbox h1{margin-top:0}.loginbox form{display:flex;flex-direction:column;gap:16px}
.foot{border-top:1px solid var(--line);color:var(--muted);padding:18px 0;font-size:.88rem;text-align:center}

.alert.advarsel{background:#2d2410;border-color:#6b5420;color:#f2cc60}

[hidden]{display:none!important}
.capture{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--radius)}
.capture .thumbprev{flex-basis:100%}

/* Kodefarver – Notepad++-stil (lyst er standard) */
.codebox.theme-light{background:#fff;--c-fg:#000;--c-ln:#8a8a8a;--c-gut:#e4e4e4;--c-hl:#e8f2ff;
  --c-comment:#008000;--c-string:#808080;--c-number:#ff8000;--c-kw:#0000ff;--c-type:#8000ff;--c-api:#0080c0;--c-const:#b06000;--c-prep:#804000;--c-op:#000080}
.codebox.theme-dark{background:#1e1e1e;--c-fg:#dcdcdc;--c-ln:#6b7885;--c-gut:#252526;--c-hl:#2a2d2e;
  --c-comment:#6a9955;--c-string:#ce9178;--c-number:#b5cea8;--c-kw:#569cd6;--c-type:#4ec9b0;--c-api:#dcdcaa;--c-const:#4fc1ff;--c-prep:#c586c0;--c-op:#d4d4d4}
.codebox pre.code{color:var(--c-fg)}
.codebox .l::before{color:var(--c-ln);background:var(--c-gut);margin-right:.9em}
.codebox .l:hover{background:var(--c-hl)}
.t-comment{color:var(--c-comment)}
.t-string{color:var(--c-string)}
.t-number{color:var(--c-number)}
.t-kw{color:var(--c-kw);font-weight:700}
.t-type{color:var(--c-type);font-weight:700}
.t-api{color:var(--c-api)}
.t-const{color:var(--c-const)}
.t-prep{color:var(--c-prep)}
.t-op{color:var(--c-op);font-weight:700}

/* Galleri – flere screendumps */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:12px}
.gallery a{display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:2px solid var(--line);transition:border-color .15s,transform .15s}
.gallery a:hover{border-color:var(--accent);transform:translateY(-2px)}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.gal-open{cursor:zoom-in}

.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:hidden}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox::backdrop{background:rgba(5,8,12,.92)}
.lightbox img{max-width:calc(100vw - 140px);max-height:calc(100vh - 90px);border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lb-nav,.lb-close{position:fixed;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);cursor:pointer;font:inherit;line-height:1;border-radius:50%}
.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.2)}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-close{top:16px;right:16px;width:42px;height:42px;font-size:1.1rem}
.lb-count{position:fixed;bottom:18px;left:0;right:0;text-align:center;color:#cfd6de;font-size:.9rem}
@media(max-width:640px){.lightbox img{max-width:100vw;border-radius:0}.lb-nav{width:42px;height:42px;font-size:1.6rem}.lb-prev{left:6px}.lb-next{right:6px}}

/* Admin – ekstra billeder */
.ekstrasec{border-top:1px solid var(--line);padding-top:6px;display:flex;flex-direction:column;gap:12px}
.ekstrasec h2{margin:.3em 0 0}
.gallery-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gallery-edit:empty{display:none}
.gitem{display:flex;flex-direction:column;gap:6px;font-weight:400;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px}
.gitem img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;display:block}
.gitem .check{display:flex;align-items:center;gap:7px;font-size:.88rem}
.gitem .check input{width:auto}
.gitem:has(input:checked) img{opacity:.35;outline:2px solid var(--bad)}
.gitem.ny{border-style:dashed}

/* Zip-download */
.btn.download{background:#1f6f43;border-color:#1f6f43;color:#fff}
.btn.download:hover{background:#25834f}
.btn.download .dlmeta{opacity:.75;font-weight:400;font-size:.85em;margin-left:4px}
.zipinfo{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 14px}

/* Forside – mærke på projektbilledet når der er en zip til download */
.thumb{position:relative}
.dlbadge{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(20,90,55,.92);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em;
  padding:5px 10px;border-radius:99px;box-shadow:0 2px 10px rgba(0,0,0,.35);backdrop-filter:blur(4px);pointer-events:none}
.dlbadge small{font-weight:400;opacity:.8}