:root{color-scheme:light dark;--bg:#f4f5f7;--fg:#1c1e21;--card:#fff;--line:#d9dce1;--acc:#0a66c2;--bad:#b3261e}
@media (prefers-color-scheme:dark){:root{--bg:#16181c;--fg:#e8eaed;--card:#22252b;--line:#3a3f47;--acc:#6cb2ff;--bad:#ff8a80}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 -apple-system,system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)}
header{display:flex;align-items:baseline;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:var(--card)}
header h1{margin:0;font-size:1.4rem}
header button{margin-left:auto}
.sub{color:#80868b}
main{max-width:60rem;margin:0 auto;padding:1rem}
.card,.standort,.scan{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin:.8rem 0}
.standort h2{margin:.1rem 0 .3rem;font-size:1.2rem}
.scan{margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.scan .title{font-weight:600;flex:1 1 14rem}
.scan .meta{color:#80868b;font-size:.9rem;flex:1 1 100%}
.scan .links{display:flex;flex-wrap:wrap;gap:.5rem}
a,button{color:var(--acc)}
a.btn,button{display:inline-block;border:1px solid var(--acc);background:transparent;border-radius:8px;padding:.35rem .7rem;font:inherit;text-decoration:none;cursor:pointer}
button.danger{color:var(--bad);border-color:var(--bad)}
input{font:inherit;padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);min-width:14rem}
.msg{color:var(--bad)}
.ok{color:#2e7d32}
.hidden{display:none !important}
code{background:var(--bg);padding:0 .25rem;border-radius:4px}
#viewport{position:fixed;inset:3.2rem 0 0 0}
#viewport canvas{display:block;width:100%;height:100%}
#panel{position:fixed;left:.6rem;bottom:.6rem;right:.6rem;max-width:26rem;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.9rem;opacity:.95}
#panel label{margin-right:.8rem;white-space:nowrap}
#panel pre{margin:.3rem 0 0;white-space:pre-wrap}
#panel input{min-width:0}