/*
 * Gemeinsames Aussehen von Startseite, Anmeldung und Verwaltung.
 * Das Werkzeug unter /app trägt seine Regeln selbst; die Farbwerte sind dieselben.
 */
:root{
  color-scheme: light;
  --ground:#E7EBF1; --surface:#FFFFFF; --surface-2:#F1F4F9; --surface-3:#E2E8F0;
  --line:#D1D8E2; --line-strong:#AFBACA;
  --ink:#0F1922; --muted:#52606D; --faint:#8391A0;
  --accent:#15537D; --accent-ink:#FFFFFF; --accent-soft:#DEEAF3;
  --measure:#A05A0E; --measure-soft:#F7ECDC;
  --red:#C1272D; --danger:#9C332C; --ok:#2B7757; --ok-soft:#E1F1EA;
  --paper:#FFFFFF; --paper-ink:#0F1922; --paper-grid:rgba(22,32,44,.13); --paper-grid-major:rgba(22,32,44,.26);
  --shadow-1: 0 1px 2px rgba(15,25,34,.07);
  --shadow-2: 0 2px 4px rgba(15,25,34,.06), 0 12px 28px rgba(15,25,34,.13);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0E141B; --surface:#161F29; --surface-2:#1C2733; --surface-3:#24313F;
    --line:#2A3846; --line-strong:#3C4C5D;
    --ink:#E3EAF1; --muted:#9AA9B8; --faint:#6B7B8A;
    --accent:#6FB4E6; --accent-ink:#08131C; --accent-soft:#16303F;
    --measure:#E0993F; --measure-soft:#332512;
    --red:#D9474C; --danger:#E0736B; --ok:#5CBB8F; --ok-soft:#173327;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0E141B; --surface:#161F29; --surface-2:#1C2733; --surface-3:#24313F;
  --line:#2A3846; --line-strong:#3C4C5D;
  --ink:#E3EAF1; --muted:#9AA9B8; --faint:#6B7B8A;
  --accent:#6FB4E6; --accent-ink:#08131C; --accent-soft:#16303F;
  --measure:#E0993F; --measure-soft:#332512;
  --red:#D9474C; --danger:#E0736B; --ok:#5CBB8F; --ok-soft:#173327;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img, svg{max-width:100%}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

.display{font-family:"Archivo", system-ui, sans-serif; font-variation-settings:"wdth" 112; font-weight:700;
  letter-spacing:-.02em; line-height:1.04; text-wrap:balance; margin:0}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"Archivo", system-ui, sans-serif; font-variation-settings:"wdth" 108; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}

.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand svg{display:block; color:var(--accent)}
.brand b{font-family:"Archivo", system-ui, sans-serif; font-variation-settings:"wdth" 112; font-weight:700;
  font-size:15px; letter-spacing:.14em; text-transform:uppercase}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer;
  font:inherit; font-weight:500; font-size:15px; text-decoration:none; white-space:nowrap;
}
.btn:hover{border-color:var(--line-strong); background:var(--surface-3)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.sm{padding:6px 10px; font-size:13px; border-radius:7px}
.btn.warn{color:var(--danger)}
.btn.warn:hover{border-color:var(--danger)}
.btn:disabled{opacity:.5; cursor:default}

label.field{display:flex; flex-direction:column; gap:5px}
label.field > span{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:600}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search]{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:15px;
}
input:focus{outline:none; border-color:var(--accent); background:var(--surface)}
input[type=checkbox]{accent-color:var(--accent); width:16px; height:16px; margin:2px 0 0; flex-shrink:0}
.check{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--muted); line-height:1.45; cursor:pointer}

.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-2)}
.note{font-size:13.5px; color:var(--muted); line-height:1.5; margin:0}
.err{color:var(--danger); font-size:13.5px; min-height:1.2em; margin:0}

.pill{display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600;
  border:1px solid transparent; white-space:nowrap}
.pill i{width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.pending{color:var(--measure); background:var(--measure-soft)}
.pill.active{color:var(--ok); background:var(--ok-soft)}
.pill.blocked{color:var(--danger); background:var(--surface-3)}
.pill.admin{color:var(--accent); background:var(--accent-soft)}