:root{
  --bg:#0b1220; --card:rgba(255,255,255,.08); --txt:#eaf2ff; --sub:#a7b3c9;
  --brand:#3aa0ff; --ring:#8ec5ff; --err:#ef4444; --ok:#16a34a;
  --border: rgba(255,255,255,.12); --borderLight:#dbe3f0; --shadow:0 12px 34px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --card:#ffffff; --txt:#12233d; --sub:#5b6a86;
    --brand:#0078D4; --ring:#9bd0ff; --border: rgba(16,24,40,.08); --shadow:0 12px 34px rgba(16,24,40,.08);
  }
}

.auth-wrap{
  min-height:calc(100dvh - 120px);
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(58,160,255,.15), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(0,120,212,.12), transparent 50%),
    var(--bg);
  padding:32px 16px;
}

.auth-card{
  width:min(560px, 95vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:22px 22px 18px;
  color:var(--txt);
}

.auth-title{ margin:4px 0 6px; font-weight:800; font-size:1.6rem; letter-spacing:.2px; color:var(--txt); }
.auth-sub{ color:var(--sub); margin-bottom:14px; }

.auth-label{ display:block; margin:.6rem 0 .35rem; color:var(--txt); font-weight:600; font-size:.95rem; }

.auth-in{
  display:flex; align-items:center; background:#fff;
  border-radius:10px; border:1px solid var(--borderLight);
  overflow:hidden;
}
.auth-in input{
  flex:1; border:0; outline:0; font-size:1rem;
  padding:.8rem .9rem; background:transparent; color:#111;
}
.auth-in .auth-addon{
  border-left:1px solid #e6edf8; padding:0 .75rem; cursor:pointer; user-select:none; color:#111;
}

.auth-row{ display:flex; justify-content:space-between; align-items:center; margin-top:.6rem; gap:8px; flex-wrap:wrap; }
.auth-hint{ font-size:.9rem; color:var(--sub); }
.auth-link{ color:var(--brand); text-decoration:none; }
.auth-link:hover{ text-decoration:underline; }

.auth-btn{
  width:100%; margin-top:14px; padding:.9rem 1rem; border:0; border-radius:12px; cursor:pointer;
  font-weight:800; color:white; background:linear-gradient(135deg, var(--brand), #60b6ff);
}
.auth-btn:focus-visible{ outline:4px solid var(--ring) }

.auth-flashes{ list-style:none; padding:0; margin:0 0 8px 0; }
.auth-flashes li{ padding:.6rem .8rem; border-radius:10px; margin-bottom:6px; font-size:.95rem; }
.auth-flashes .success{ background:rgba(22,163,74,.12); color:var(--ok); }
.auth-flashes .error{ background:rgba(239,68,68,.12); color:var(--err); }
.auth-flashes .info{ background:rgba(59,130,246,.12); color:#3b82f6; }

.auth-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#fff; border:1px solid var(--borderLight);
  border-radius:10px; padding:.6rem .8rem; color:#111;
}
.auth-code.w100{ width:100%; }

.auth-grid{ display:grid; grid-template-columns: 180px 1fr; gap:16px; align-items:start; }
.auth-qr{
  width:180px; height:180px; border-radius:12px; background:#fff; display:grid; place-items:center;
  overflow:hidden; border:1px solid var(--borderLight)
}

.auth-btn-inline{
  padding:.6rem .9rem; border:0; border-radius:10px; cursor:pointer;
  font-weight:700; color:white; background:linear-gradient(135deg, var(--brand), #60b6ff);
}

/* Brand anpassen: */
:root { --brand-h: 207; } /* nur als Hinweis – du kannst --brand oben ändern */