/* --- Kanboard-Style Login (kompakt ~1/3 kleiner, 1:1 mit bündigen Rändern) --- */
:root{
  --brand:#cf102d;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --paper:#ffffff;
  --bg:#f3f4f6;
}
html,body{height:100%}
body.auth{
  margin:0;
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
/* alles inkl. Padding/Border in die 100%-Breite einrechnen */
body.auth, .auth *, .auth *::before, .auth *::after { box-sizing: border-box; }

/* Wrapper: Logo oben, Karte mittig darunter */
.auth .wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  padding:32px 16px;
}

/* Logo kompakter */
.auth .brand-top{ width:100%; text-align:center; margin:0; }
.auth .brand-top img{
  max-width:370px;
  width:min(85vw,370px);
  height:auto;
}

/* Karte schmaler */
.auth .panel{
  width:100%;
  max-width:480px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* Innenleben kompakter */
.auth .content{ padding:18px 20px 20px 20px; }
.auth .title{
  font-weight:900;
  font-size:20px;
  margin:0 0 12px 0;
}
.auth label{
  display:block;
  font-weight:800;
  margin:8px 0 4px;
}

/* Inputs / Button kleiner (einheitlich, bündig) */
.auth input[type="text"],
.auth input[type="password"]{
  display:block;
  width:100%;
  height:36px;
  padding:0 12px;
  border:1.5px solid #e6e9ed;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  outline:none;
  font-size:14px;
}
.auth input:focus{ border-color:#d4d8dd; box-shadow:0 0 0 2px rgba(207,16,45,.09); }

.auth .btn-primary{
  display:block;
  width:100%;
  height:36px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  border-radius:10px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}

/* Abstände im Formular */
.auth .stack{ display:grid; grid-template-columns:1fr; gap:10px; }

/* Hinweis & Fehler kompakter */
.auth .hint{
  text-align:center;
  color:var(--muted);
  margin-top:10px;
  font-size:13px;
}
.auth .error{
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #ffd3d3;
  background:#fff2f2;
  color:#711313;
  font-weight:600;
  font-size:14px;
}

/* sehr kleine Screens */
@media (max-width:420px){
  .auth .content{ padding:16px; }
  .auth .title{ font-size:18px; }
}