/* ═══════════════════════════════════════════════════════════════
   ISKMOR — Auth pages (login.php, register.php)
   Design: dark fantasy, glowing runes, amber-gold palette
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #07090f;
  --panel:    #0c0f1a;
  --panel-2:  #111624;
  --border:   rgba(255,255,255,.08);
  --ink:      #d8dce8;
  --muted:    #5c687a;
  --amber:    #d4a847;
  --amber-dim: rgba(212,168,71,.12);
  --amber-glow: rgba(212,168,71,.22);
  --red:      #c05050;
  --green:    #4a9a5a;
  --shadow:   0 8px 40px rgba(0,0,0,.7);
}

html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  padding: 24px 16px;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212,168,71,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 80% 80%, rgba(107,94,168,.04) 0%, transparent 50%);
}

/* ─── LOGO ─── */
.logo {
  margin-bottom: 32px;
  text-align: center;
}

.logo img {
  width: min(240px, 72vw);
  height: 112px;
  display: block;
  margin: 0 auto;
  border-radius: 22px;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 0 34px rgba(212,168,71,.22));
}

.logo span {
  display: inline-block;
  color: var(--amber);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 0 40px rgba(212,168,71,.4);
}

.logo::before {
  content: "";
  display: block;
  width: 96px;
  height: 1px;
  margin: 0 auto 12px;
  background: linear-gradient(90deg, transparent, rgba(212,168,71,.55), transparent);
}

/* ─── AUTH CARD ─── */
.auth-container {
  width: 100%;
  max-width: 380px;
  padding: 32px;
  border: 1px solid rgba(212,168,71,.18);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow), 0 0 80px rgba(212,168,71,.04);
  animation: fadeUp .4s ease;
  position: relative;
  overflow: hidden;
}

.auth-container::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,71,.5), transparent);
}

.auth-container h2 {
  margin-bottom: 24px;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ─── INPUTS ─── */
.auth-container label {
  display: block;
  margin-bottom: 14px;
}

.auth-container .label-text {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.auth-container input[type="text"],
.auth-container input[type="email"],
.auth-container input[type="password"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: #090c16;
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.auth-container input::placeholder { color: rgba(255,255,255,.18); }

.auth-container input:focus {
  border-color: rgba(212,168,71,.45);
  box-shadow: 0 0 0 3px rgba(212,168,71,.08);
}

/* ─── BUTTON ─── */
.auth-container button[type="submit"] {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid rgba(212,168,71,.4);
  border-radius: 10px;
  background: rgba(212,168,71,.12);
  color: var(--amber);
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}

.auth-container button[type="submit"]:hover {
  background: rgba(212,168,71,.22);
  border-color: rgba(212,168,71,.65);
  box-shadow: 0 0 20px rgba(212,168,71,.12);
  transform: translateY(-1px);
}

.auth-container button[type="submit"]:active { transform: none; }

/* ─── LINK ─── */
.auth-container a {
  display: inline-block;
  margin-top: 18px;
  color: var(--muted);
  font-size: .82rem;
  transition: color .13s;
  text-decoration: none;
}

.auth-container a:hover { color: var(--amber); }

/* ─── MESSAGES ─── */
.msg-error {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(192,80,80,.3);
  background: rgba(192,80,80,.1);
  color: #d08080;
  font-size: .84rem;
  font-weight: 600;
}

.msg-ok {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(74,154,90,.3);
  background: rgba(74,154,90,.1);
  color: #80c890;
  font-size: .84rem;
  font-weight: 600;
}

/* ─── BAN BLOCK ─── */
.ban-block {
  background: rgba(139,48,48,.12) !important;
  border: 1px solid rgba(192,80,80,.25) !important;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
  color: #c08080;
}

/* ─── ANIMATION ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .auth-container { padding: 22px; }
}