/* =========================================================================
   KAAC Panel — Auth-Redesign 2026 (Login / Aktivierung / Logout)
   Laedt NACH auth.css und legt den flachen Navy-Gold-Look drueber.
   ========================================================================= */

:root {
  --auth-bg: #080f20;
  --auth-card: #101c34;
  --auth-line: rgba(148, 178, 232, 0.14);
  --auth-gold: #f0c65a;
  --auth-gold-2: #e0a93f;
  --auth-text: #eef3fb;
  --auth-muted: #a2b3cf;
  --auth-danger: #ff7a7a;
  --auth-shadow: 0 20px 46px rgba(2, 6, 16, 0.5);
  --auth-input-bg: #16233f;
}

body.standalone-page {
  background: var(--auth-bg);
}

.standalone-card {
  max-width: 440px;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid var(--auth-line);
  background: var(--auth-card);
  box-shadow: var(--auth-shadow);
  backdrop-filter: none;
}
.auth-card { max-width: 420px; }

.brand { margin-bottom: 20px; }
.brand img {
  max-height: 76px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.brand h1,
.message-card h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--auth-text);
}
.message-card h1.danger-title { color: var(--auth-danger); }
.brand p, .message-card p { color: var(--auth-muted); font-size: 13.5px; }

.standalone-form label {
  margin: 15px 0 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--auth-muted);
}
.standalone-form input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--auth-line);
  background: var(--auth-input-bg);
  color: var(--auth-text);
  font-size: 14px;
}
.standalone-form input:focus {
  border-color: color-mix(in srgb, var(--auth-gold) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-gold) 12%, transparent);
}

button, .btn {
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--auth-gold);
  color: #231a05;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: none;
  box-shadow: none;
}
button:hover, .btn:hover { filter: brightness(1.06); }
.btn.alt {
  background: transparent;
  color: var(--auth-text);
  border: 1px solid var(--auth-line);
}
.btn.alt:hover { background: rgba(148, 178, 232, 0.08); filter: none; }

.status-tag {
  background: color-mix(in srgb, var(--auth-gold) 14%, transparent);
  border: 1px solid var(--auth-line);
  color: var(--auth-gold);
  font-weight: 600;
  letter-spacing: 0.4px;
  border-radius: 999px;
}
.message-box {
  border-radius: 10px;
  font-size: 13px;
}
.message-box.error {
  background: color-mix(in srgb, var(--auth-danger) 14%, transparent);
  border-color: var(--auth-line);
  color: var(--auth-danger);
}
.perm-box {
  border-radius: 10px;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-line);
  color: var(--auth-text);
  font-size: 13px;
}
.standalone-foot { color: var(--auth-muted); font-size: 11.5px; }