/* GAIJIN Control — unified authentication interface */

:root {
  --auth-bg:#0b1020;
  --auth-surface:#121a2b;
  --auth-surface-2:#182235;
  --auth-border:#27344d;
  --auth-text:#f1f5f9;
  --auth-muted:#9aa9bd;
  --auth-brand:#4f8cff;
  --auth-brand-2:#7c3aed;
  --auth-good:#36c76c;
  --auth-bad:#ff616d;
}

html,
body {
  min-height:100% !important;
  height:auto !important;
  overflow-x:hidden !important;
  background:var(--auth-bg) !important;
}

body {
  min-height:100vh !important;
  min-height:100dvh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:
    max(24px, env(safe-area-inset-top))
    16px
    max(24px, env(safe-area-inset-bottom)) !important;
  color:var(--auth-text) !important;
  background:
    radial-gradient(circle at 15% 10%, rgba(79,140,255,.18), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(124,58,237,.15), transparent 38%),
    var(--auth-bg) !important;
  animation:none !important;
}

body::before {
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
  background-size:32px 32px !important;
  filter:none !important;
  animation:none !important;
  opacity:.45 !important;
}

body::after {
  display:none !important;
}

.login-wrap,
.reg-card,
body > .card,
.lock-wrap {
  position:relative !important;
  z-index:1 !important;
}

.login-wrap {
  width:100% !important;
  max-width:410px !important;
  margin:auto 0 !important;
  animation:none !important;
}

.login-card,
.reg-card,
body > .card,
.lock-wrap {
  width:100% !important;
  max-width:410px !important;
  padding:28px !important;
  color:var(--auth-text) !important;
  border:1px solid var(--auth-border) !important;
  border-radius:24px !important;
  background:rgba(18,26,43,.96) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.38) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  animation:none !important;
}

.lock-wrap {
  margin:auto !important;
  text-align:center !important;
}

.logo-box {
  margin-bottom:22px !important;
}

.logo-box img,
.lock-logo img {
  width:72px !important;
  height:72px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:0 12px 34px rgba(0,0,0,.34) !important;
}

.logo-box h2,
.reg-card h2,
body > .card h2 {
  color:var(--auth-text) !important;
  font-size:23px !important;
  font-weight:850 !important;
  letter-spacing:-.035em !important;
  text-shadow:none !important;
}

.logo-box p,
.footer {
  color:var(--auth-muted) !important;
  text-shadow:none !important;
}

.login-tabs {
  gap:5px !important;
  padding:5px !important;
  margin-bottom:20px !important;
  border:1px solid var(--auth-border) !important;
  background:var(--auth-surface-2) !important;
}

.login-tab {
  min-height:58px !important;
  color:var(--auth-muted) !important;
  border-radius:11px !important;
}

.login-tab.active {
  color:#fff !important;
  background:var(--auth-brand) !important;
  box-shadow:none !important;
}

.form-label,
.reg-card .form-label,
body > .card label {
  color:var(--auth-muted) !important;
  font-size:11px !important;
  font-weight:750 !important;
  letter-spacing:.06em !important;
}

.form-control,
.reg-card .form-control,
body > .card input {
  width:100% !important;
  min-height:50px !important;
  padding:13px 15px !important;
  color:var(--auth-text) !important;
  border:1px solid var(--auth-border) !important;
  border-radius:13px !important;
  background:var(--auth-surface-2) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.form-control:focus,
.reg-card .form-control:focus,
body > .card input:focus {
  color:var(--auth-text) !important;
  border-color:var(--auth-brand) !important;
  background:var(--auth-surface-2) !important;
  box-shadow:0 0 0 3px rgba(79,140,255,.18) !important;
}

.form-control::placeholder,
body > .card input::placeholder {
  color:#687892 !important;
}

.btn-main,
.btn-reg,
.btn-unlock,
body > .card button {
  min-height:48px !important;
  color:#fff !important;
  border:0 !important;
  border-radius:13px !important;
  background:var(--auth-brand) !important;
  box-shadow:none !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.btn-main:disabled,
.btn-unlock:disabled {
  opacity:.42 !important;
}

.auth-password-wrap {
  position:relative;
}

.auth-password-wrap .form-control {
  padding-right:50px !important;
}

.auth-password-toggle {
  position:absolute;
  top:50%;
  right:7px;
  width:38px;
  height:38px;
  min-height:38px !important;
  padding:0 !important;
  transform:translateY(-50%);
  color:var(--auth-muted) !important;
  background:transparent !important;
}

.faceid-icon {
  width:88px !important;
  height:88px !important;
  color:var(--auth-brand) !important;
  border:1px solid var(--auth-border) !important;
  border-radius:24px !important;
  background:var(--auth-surface-2) !important;
  font-size:44px !important;
  animation:none !important;
}

.faceid-hint,
.pin-username-display,
.lock-hint,
p.sub,
.field-hint {
  color:var(--auth-muted) !important;
}

.pin-keypad {
  gap:9px !important;
  max-width:300px !important;
  margin-right:auto !important;
  margin-left:auto !important;
}

.pin-key {
  color:var(--auth-text) !important;
  border:1px solid var(--auth-border) !important;
  background:var(--auth-surface-2) !important;
  box-shadow:none !important;
}

.pin-key.action {
  color:var(--auth-muted) !important;
  border:0 !important;
  background:transparent !important;
}

.pin-dot {
  border-color:#65748c !important;
}

.pin-dot.filled {
  border-color:var(--auth-brand) !important;
  background:var(--auth-brand) !important;
  box-shadow:none !important;
}

.alert,
.error,
.success {
  border-radius:12px !important;
  box-shadow:none !important;
}

.error {
  color:var(--auth-bad) !important;
  background:rgba(255,97,109,.1) !important;
}

.success {
  color:var(--auth-good) !important;
  background:rgba(54,199,108,.1) !important;
}

.reg-link,
.login-link,
.back {
  border-color:var(--auth-border) !important;
}

.reg-link a,
.login-link a,
.back a {
  color:#75a4ff !important;
}

.logout-link {
  position:fixed !important;
  bottom:max(14px, env(safe-area-inset-bottom)) !important;
}

@media (max-width:480px) {
  body {
    align-items:flex-start !important;
    padding-right:12px !important;
    padding-left:12px !important;
  }

  .login-card,
  .reg-card,
  body > .card,
  .lock-wrap {
    padding:22px 18px !important;
    border-radius:20px !important;
  }

  .logo-box img,
  .lock-logo img {
    width:64px !important;
    height:64px !important;
    border-radius:16px !important;
  }

  .pin-keypad {
    max-width:276px !important;
  }
}