.auth {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 140px);
  padding: 20px 16px;
}

.auth * { box-sizing: border-box; font-family: var(--font-mono); }

.auth .login-container {
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(255, 213, 79, 0.22);
  padding: 28px 22px;
  background: rgba(11, 16, 32, 0.92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 213, 79, 0.10) inset;
  position: relative;
  border-radius: 18px;
  backdrop-filter: blur(10px);
}
.auth .login-container::before { display: none; }

.auth h1 { color: rgba(255, 213, 79, 0.96); margin: 4px 0 18px; font-size: 24px; font-weight: 900; text-align: center; letter-spacing: 0.6px; }

.auth-subtitle {
  text-align: center;
  color: var(--text-1);
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.45;
}

.auth .input-group { margin-bottom: 14px; position: relative; }
.auth label { display: block; margin-bottom: 8px; font-weight: 800; color: rgba(226, 232, 240, 0.9); letter-spacing: 0.4px; font-size: 12px; }
.auth input { width: 100%; padding: 12px 14px; border: 1px solid rgba(148, 163, 184, 0.22); background-color: rgba(10, 19, 41, 0.70); color: var(--text-0); font-size: 14px; outline: none; transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; border-radius: 12px; }
.auth input::placeholder { color: #91a0c6; }
.auth input:focus { border-color: rgba(255, 213, 79, 0.62); background-color: rgba(10, 19, 41, 0.86); box-shadow: 0 0 0 2px rgba(255, 213, 79, 0.22), 0 0 16px rgba(255, 213, 79, 0.14); }
.auth input:focus-visible { outline: none; }

.auth button { width: 100%; padding: 12px 14px; background-color: var(--banana-1); color: var(--bg-0); border: 1px solid rgba(0, 0, 0, 0.18); font-size: 14px; font-weight: 900; cursor: pointer; margin-top: 10px; transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; border-radius: 12px; box-shadow: 0 10px 24px rgba(255, 213, 79, 0.18); }
.auth button:hover { background-color: rgba(255, 213, 79, 0.92); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 213, 79, 0.18); transform: translateY(-1px); }
.auth button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 213, 79, 0.38), 0 0 0 5px rgba(255, 213, 79, 0.16), 0 18px 44px rgba(255, 213, 79, 0.14); }
.auth button:disabled { opacity: 0.7; cursor: not-allowed; }

.auth .divider { display: flex; align-items: center; margin: 18px 0; color: rgba(226,232,240,0.85); font-weight: 900; letter-spacing: 0.6px; font-size: 12px; }
.auth .divider::before, .auth .divider::after { content: ""; flex: 1; border-bottom: 2px solid rgba(255, 213, 79, 0.70); margin: 0 10px; }

.auth .social-login { display: flex; justify-content: center; gap: 15px; }
.auth .social-btn { width: 50px; height: 50px; border: 1px solid rgba(148, 163, 184, 0.22); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; background: rgba(10, 19, 41, 0.70); color: var(--text-0); border-radius: 14px; font-weight: 900; }
.auth .social-btn:hover { box-shadow: 0 0 18px rgba(255, 213, 79, 0.16); border-color: rgba(255, 213, 79, 0.44); transform: translateY(-1px); background: rgba(255, 213, 79, 0.08); }
.auth .social-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 213, 79, 0.38), 0 0 12px rgba(255, 213, 79, 0.12); }

.auth .footer { text-align: center; margin-top: 18px; color: #e6e9f1; }
.auth .footer a { color: rgba(255, 213, 79, 0.96); font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.auth .footer a:hover { color: rgba(255, 213, 79, 0.86); }

.region-result {
  margin-top: 20px;
}

.region-check-result {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 14px 14px;
}

.region-check-result__title {
  font-weight: 900;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.region-check-result__grid {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.region-check-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.region-check-key {
  color: var(--text-1);
  font-weight: 800;
}

.region-check-value {
  color: var(--text-0);
  font-weight: 700;
  text-align: right;
}

.region-check-value--strong {
  font-weight: 900;
}

.region-check-result--success {
  border-color: rgba(255, 213, 79, 0.44);
  background: rgba(255, 213, 79, 0.08);
}

.region-check-result--success .region-check-result__title {
  color: rgba(255, 213, 79, 0.92);
}

.region-check-result--error {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.10);
}

.region-check-result--error .region-check-result__title {
  color: rgba(248, 113, 113, 0.95);
  margin-bottom: 0;
}

.region-check-result--loading {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.35);
  color: var(--text-1);
  text-align: center;
  font-weight: 800;
}

.auth .auth-alert {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 14px 14px;
  margin: 12px 0 18px;
}
.auth .auth-alert__title {
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #e6e9f1;
  margin-bottom: 6px;
}
.auth .auth-alert__text {
  color: #e6e9f1;
  font-size: 14px;
  line-height: 1.35;
}
.auth .auth-alert__hint {
  margin-top: 8px;
  color: #91a0c6;
  font-size: 12px;
}
.auth .auth-alert--danger {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.18);
}

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