:root {
  --auth-bg: #0A0A0B;
  --auth-panel: #0F0F11;
  --auth-raised: #151517;
  --auth-text: #F2F2F3;
  --auth-muted: #96969D;
  --auth-line: rgba(255, 255, 255, 0.10);
  --auth-line-strong: rgba(255, 255, 255, 0.18);
  --auth-accent: #7CE38B;
  --auth-sans: "Geist", "Inter", sans-serif;
  --auth-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

body {
  background: var(--auth-bg);
  color: var(--auth-text);
  font-family: var(--auth-sans);
  font-variant-numeric: tabular-nums lining-nums;
}

.auth-left {
  flex-basis: 46%;
  border-color: var(--auth-line);
  padding: clamp(28px, 4vw, 58px);
  background: var(--auth-bg);
}

.auth-left::before,
.auth-left::after,
.auth-right::before {
  display: none;
}

.auth-left-noise {
  opacity: 0.22;
  background-image:
    linear-gradient(var(--auth-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--auth-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.auth-left-top,
.auth-left-bottom {
  position: relative;
  z-index: 1;
}

.auth-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--auth-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.auth-wordmark-mark {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid var(--auth-line-strong);
}

.auth-wordmark-mark::before,
.auth-wordmark-mark::after {
  position: absolute;
  content: "";
  background: var(--auth-accent);
}

.auth-wordmark-mark::before {
  top: 3px;
  bottom: 3px;
  left: 6px;
  width: 1px;
}

.auth-wordmark-mark::after {
  top: 6px;
  right: 3px;
  left: 3px;
  height: 1px;
}

.auth-left-logo {
  margin-bottom: clamp(58px, 11vh, 110px);
}

.auth-left-headline {
  max-width: 620px;
  margin-bottom: 18px;
  color: var(--auth-text);
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.auth-left-headline em {
  background: none;
  color: var(--auth-muted);
  font-style: normal;
  -webkit-text-fill-color: currentColor;
}

.auth-left-sub {
  max-width: 540px;
  margin-bottom: 42px;
  color: var(--auth-muted);
  font-size: 14px;
  line-height: 1.65;
}

.auth-features {
  gap: 0;
  border-top: 1px solid var(--auth-line);
}

.auth-feat {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  border-bottom: 1px solid var(--auth-line);
  padding: 14px 0;
}

.auth-feat-icon {
  width: 28px;
  height: 28px;
  border-color: var(--auth-line-strong);
  border-radius: 2px;
  background: transparent;
}

.auth-feat-icon svg * {
  stroke: var(--auth-accent);
}

.auth-feat-text strong {
  color: var(--auth-text);
  font: 500 11px/1.35 var(--auth-mono);
}

.auth-feat-text span {
  color: var(--auth-muted);
  font: 400 10px/1.5 var(--auth-mono);
}

.auth-left-tagline {
  color: var(--auth-muted);
  font: 400 9px/1.5 var(--auth-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.auth-right {
  padding: clamp(28px, 5vw, 72px);
  background: var(--auth-panel);
}

.auth-form-wrap {
  max-width: 410px;
}

.auth-form-wrap::before {
  display: block;
  margin-bottom: 14px;
  color: var(--auth-accent);
  content: "RESEARCH WORKSPACE / ACCESS";
  font: 500 9px/1 var(--auth-mono);
  letter-spacing: 0.11em;
}

.auth-form-title {
  color: var(--auth-text);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.045em;
}

.auth-form-sub {
  margin-bottom: 28px;
  color: var(--auth-muted);
  font-size: 13px;
}

.auth-alert {
  border-radius: 2px;
  font: 400 11px/1.55 var(--auth-mono);
}

.auth-google-btn {
  min-height: 42px;
  border-color: var(--auth-line-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--auth-text);
  box-shadow: none;
  font: 500 11px/1 var(--auth-mono);
}

.auth-google-btn:hover {
  border-color: var(--auth-text);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
  transform: none;
}

.auth-divider {
  color: var(--auth-muted);
  font: 400 9px/1 var(--auth-mono);
}

.auth-divider::before,
.auth-divider::after {
  background: var(--auth-line);
}

.auth-field {
  margin-bottom: 15px;
}

.auth-field label {
  color: var(--auth-muted);
  font: 500 10px/1 var(--auth-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-field input {
  min-height: 42px;
  border-color: var(--auth-line-strong);
  border-radius: 2px;
  background: var(--auth-bg);
  color: var(--auth-text);
  font: 400 12px/1 var(--auth-mono);
  box-shadow: none;
}

.auth-field input:focus {
  border-color: var(--auth-accent);
  background: var(--auth-bg);
  box-shadow: 0 0 0 2px rgba(124, 227, 139, 0.15);
}

.auth-field input::placeholder {
  color: #5f5f66;
}

.auth-submit {
  min-height: 43px;
  border: 1px solid var(--auth-accent);
  border-radius: 2px;
  background: var(--auth-accent);
  color: #071009;
  font: 600 11px/1 var(--auth-mono);
  letter-spacing: 0.02em;
}

.auth-submit:hover {
  border-color: #a4efae;
  background: #a4efae;
  box-shadow: none;
  transform: none;
}

.auth-switch {
  color: var(--auth-muted);
  font: 400 10px/1.5 var(--auth-mono);
}

.auth-switch a {
  color: var(--auth-accent);
}

@media (max-width: 820px) {
  body {
    display: block;
  }

  .auth-left {
    width: 100%;
    min-width: 0;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--auth-line);
    padding: 24px;
  }

  .auth-left-logo {
    margin-bottom: 28px;
  }

  .auth-left-headline {
    max-width: 520px;
    font-size: clamp(34px, 10vw, 54px);
  }

  .auth-left-sub {
    margin-bottom: 0;
  }

  .auth-features,
  .auth-left-bottom {
    display: none;
  }

  .auth-right {
    width: 100%;
    min-width: 0;
    min-height: auto;
    padding: 42px 24px 58px;
  }

  .auth-form-wrap {
    width: min(100%, 410px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}