:root{
  --bg:#0b0506;
  --text:#f1f1f1;
  --muted:#a9a9a9;
  --primary:#ff4d4d;
  --ring:rgba(255,77,77,.55);
  --border:rgba(255,255,255,.12);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--text);text-decoration:none}
.login-bg{background:var(--bg);overflow:hidden}

/* Animated aurora (ruhig) */
.aurora{
  position:fixed;inset:-20vmax;z-index:-3;pointer-events:none;filter:saturate(1.2);
  background:
    radial-gradient(70vmax 40vmax at 15% 10%, rgba(255,77,77,.35), transparent 60%),
    radial-gradient(60vmax 35vmax at 85% 20%, rgba(255,120,120,.22), transparent 60%),
    radial-gradient(80vmax 45vmax at 50% 120%, rgba(120,0,0,.35), transparent 70%),
    radial-gradient(120vmax 70vmax at -10% 120%, rgba(255,77,77,.18), transparent 70%);
  animation: auroraMove 20s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  0%{transform:translate3d(0,0,0) scale(1);filter:hue-rotate(0deg)}
  50%{transform:translate3d(2vmax,-1vmax,0) scale(1.03);filter:hue-rotate(8deg)}
  100%{transform:translate3d(-2vmax,1vmax,0) scale(1.02);filter:hue-rotate(-8deg)}
}

/* Particles */
#particles{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35}

/* === STAGE: perfekt zentriert inkl. Safe-Area === */
.stage{
  min-height:100svh;                 /* mobile-viewport ohne Browserleisten */
  padding: clamp(16px, 3vw, 24px);
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top:    max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  display:grid;
  place-items:center;                 /* horizontal & vertikal mittig */
}

/* Card */
.login-card{
  width:min(680px, 94vw);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px 26px 18px;
  box-shadow:0 20px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04),0 0 80px rgba(255,77,77,.18);
  backdrop-filter:blur(10px);
}

/* Header */
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:12px}
.brand{letter-spacing:.18em;text-transform:uppercase;color:#eaeaea;opacity:.95;font-size:.88rem;white-space:nowrap}
.brand span{color:var(--primary)}
.badge{
  font-size:.75rem;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: inset 0 0 20px rgba(255,255,255,.03);
  color:#fff;
}

/* Titles */
.title{font-size:clamp(26px,6vw,40px);margin:.15em 0 .25em;color:var(--text);letter-spacing:.2px}
.subtitle{margin:0 0 18px;color:var(--muted);line-height:1.55}

/* Alerts */
.alert{margin:10px 0 14px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.alert.error{border-color:rgba(255,77,77,.5);background:rgba(255,77,77,.10)}
.alert.warn{border-color:#d1b354;background:rgba(209,179,84,.14)}
.alert.ok{border-color:#4ad19a;background:rgba(74,209,154,.15)}

/* Discord Button (ruhig) */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  height:48px;padding:0 16px;border-radius:12px;
  font-weight:700;letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(90deg,#5865F2,#7289DA);
  color:#0e0e0e; user-select:none;
  box-shadow:0 10px 26px rgba(88,101,242,.32),0 0 0 1px rgba(255,255,255,.05) inset;
}
.btn:hover{border-color:rgba(88,101,242,.7);box-shadow:0 14px 34px rgba(88,101,242,.45),0 0 0 1px rgba(255,255,255,.06) inset}
.icon-discord{width:20px;height:20px;color:#fff}
.btn .btn-glow{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px 80px at 50% 50%, rgba(255,77,77,.25), transparent 60%);
  opacity:.6;mix-blend-mode:screen;filter:blur(.2px);
}

/* Help */
.login-help{margin:12px 0 6px;color:var(--muted);text-align:left}
.login-help a{color:#ffffff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5)}
.login-help a:hover{color:#fff;text-decoration-color:#fff}

/* === Mobile Tweaks === */
@media (max-width:560px){
  .login-card{
    width:min(460px, 100%);
    padding:20px 16px 14px;
    border-radius:16px;
  }
  .card-head{gap:8px}
  .badge{padding:5px 9px}
  .btn{width:100%;justify-content:center}    /* Button full-width, leichter tap */
  .login-help{text-align:center}              /* Text unter dem Button zentriert */
}