:root { --bg:#0f1419; --card:#1a2029; --fg:#e6e9ef; --muted:#8a93a3;
  --accent:#3da5ff; --yes:#1f9d57; --no:#c0392b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
main { max-width:680px; margin:0 auto; padding:24px 16px 64px; }
h1 { font-size:1.5rem; margin:.2em 0; }
h2 { font-size:1.05rem; margin:0 0 .6em; }
.sub { color:var(--muted); margin-top:0; }
.card { background:var(--card); border:1px solid #232b36; border-radius:12px;
  padding:16px; margin:14px 0; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:6px 0; }
label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted); }
input[type=text], input[type=email], input#plz {
  background:#0d1117; border:1px solid #2b3442; color:var(--fg);
  border-radius:8px; padding:8px 10px; font-size:1rem; }
input#plz { width:120px; }
input[type=range] { accent-color:var(--accent); }
button { background:var(--accent); color:#04121f; border:0; border-radius:8px;
  padding:10px 14px; font-weight:600; cursor:pointer; font-size:.95rem; }
button:hover { filter:brightness(1.08); }
ul { list-style:none; padding:0; margin:0; }
li { padding:4px 0; border-bottom:1px solid #222b36; }
li:last-child { border-bottom:0; }
a { color:var(--accent); }
.muted { color:var(--muted); }
.ok { color:var(--yes); } .err { color:var(--no); }
.banner { border-radius:12px; padding:16px; text-align:center; font-weight:700;
  font-size:1.1rem; margin:14px 0; }
.banner.yes { background:rgba(31,157,87,.15); color:#5fe39a; border:1px solid var(--yes); }
.banner.no  { background:rgba(192,57,43,.12); color:#ff8d80; border:1px solid #5a2b27; }
.banner.unknown { background:#1a2029; color:var(--muted); }
footer { margin-top:24px; font-size:.85rem; }
details summary { cursor:pointer; color:var(--muted); }