/* css/auth.css — bootstrap-frei, zentrierte Login-Karte mit Phosphor Icons */
:root{
  --kb-red:#ff2a0a;
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --ring:#2563eb;
  --btn:#2563eb;
  --btn-text:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
}

html,body{height:100%;}
body{margin:0;background:var(--bg);}

.auth-wrap{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
}

.auth-card{
  width:min(92vw, 460px);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 24px;
}

.auth-brand{
  display:grid; place-items:center;
  gap:8px; margin-bottom:18px;
}
.kb-logo-svg{ width:92px; height:auto; }
.kb-logo-svg .bar{ fill:#fff; }

.auth-brand h1{ margin:0; font-size:22px; font-weight:700; letter-spacing:.2px; }
.auth-sub{ margin:0; color:var(--muted); }

.auth-form{ display:grid; gap:14px; margin-top:6px; }
.field{
  display:grid; grid-template-columns: 28px 1fr; align-items:center;
  gap:10px; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field:focus-within{ border-color:var(--ring); box-shadow:0 0 0 4px rgba(37,99,235,.15); }
.field i{ font-size:20px; color:#9ca3af; }
.field input{
  border:0; outline:0; font:inherit; padding:0; background:transparent; color:inherit;
}
.field input::placeholder{ color:#9ca3af; }

.auth-btn{
  display:inline-grid; grid-auto-flow:column; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px 16px; border:0; border-radius:12px; cursor:pointer;
  background:var(--btn); color:var(--btn-text); font-weight:600; letter-spacing:.2px;
  transition:transform .06s ease, opacity .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(37,99,235,.22);
}
.auth-btn:hover{ transform: translateY(-1px); }
.auth-btn:active{ transform: translateY(0); }
.auth-btn.is-busy{ opacity:.7; pointer-events:none; }

.auth-msg{ min-height:1.2em; color:#ef4444; margin:6px 2px 0; font-size:14px; }

@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0c10; --card:#111318; --text:#e5e7eb; --muted:#94a3b8; --shadow:none; }
  .field{ border-color:#232632; background:#0f1116; }
  .field:focus-within{ box-shadow:0 0 0 4px rgba(37,99,235,.25); }
}