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

:root {
  --bg:         #14141A;
  --surface:    #1E1E26;
  --accent:     #2DC4A7;
  --accent-ink: #06231C;
  --text:       #ECEAE4;
  --muted:      #9B988F;
  --line:       rgba(255,255,255,.07);
  --radius:     14px;
}

html, body {
  height: 100%;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* ─── LAYOUT ──────────────────────────────────────────────── */
.page {
  display: grid;
  grid-template-columns: 1fr 460px;
  height: 100vh;
}

/* ─── LEFT PANEL ──────────────────────────────────────────── */
.left {
  position: relative;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: 52px 60px;
  overflow: hidden;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}

.glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(45,196,167,0.13) 0%, transparent 65%);
  pointer-events: none;
}

/* second glow - bottom left, dimmer */
.left::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(45,196,167,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.left-logo {
  position: relative;
  z-index: 2;
}
.left-logo img { width: 110px; }

.left-body {
  position: relative;
  z-index: 2;
  margin: auto 0;
  padding: 48px 0;
}

.left-eyebrow {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.left-headline {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(46px, 4.6vw, 70px);
  line-height: 1.06;
  color: var(--text);
  margin-bottom: 26px;
  letter-spacing: -0.02em;
}
.left-headline em {
  font-style: normal;
  color: var(--accent);
}

.left-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.72;
  max-width: 380px;
}

.left-footer {
  position: relative;
  z-index: 2;
}

.left-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.feat {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--muted);
}

.left-tagline {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--accent);
}

/* ─── RIGHT PANEL ─────────────────────────────────────────── */
.right {
  background: var(--bg);
  border-left: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 44px;
}

.right-inner {
  width: 100%;
  max-width: 360px;
}

.logo { margin-bottom: 44px; }
.logo img { width: 130px; }

.form-heading { margin-bottom: 28px; }
.form-heading h1 {
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.form-heading p {
  font-size: 13.5px;
  color: var(--muted);
}

/* ─── ALERTS ──────────────────────────────────────────────── */
.alert-bar {
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 20px;
}
.alert-error {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.22);
  color: #f87171;
}
.alert-info {
  background: rgba(45,196,167,0.07);
  border: 1px solid rgba(45,196,167,0.18);
  color: var(--muted);
}

/* ─── FIELDS ──────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.field > input,
.input-wrap > input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field > input::placeholder,
.input-wrap > input::placeholder {
  color: rgba(155,152,143,0.45);
}
.field > input:focus,
.input-wrap > input:focus {
  border-color: rgba(45,196,167,0.45);
  box-shadow: 0 0 0 3px rgba(45,196,167,0.08);
}

.input-wrap { position: relative; }
.input-wrap > input { padding-right: 46px; }

.pw-toggle {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  opacity: 0.45;
  transition: opacity 0.2s;
  line-height: 1;
}
.pw-toggle:hover { opacity: 0.9; }

.field-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -4px;
  margin-bottom: 20px;
}
.remember {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.remember input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.forgot {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.forgot:hover { color: var(--accent); }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn-login {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-ink);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-login:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); opacity: 1; }
.btn-login:disabled { opacity: 0.6; cursor: default; transform: none; }

.divider {
  position: relative;
  text-align: center;
  margin: 20px 0;
}
.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.divider span {
  position: relative;
  background: var(--bg);
  padding: 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.btn-sso {
  width: 100%;
  padding: 13px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-sso:hover { border-color: rgba(255,255,255,0.18); color: var(--text); }

.form-footer {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.form-footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
.form-footer a:hover { text-decoration: underline; }

/* ─── ENTRANCE ANIMATIONS ─────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.right-inner > * { animation: fadeUp 0.5s ease both; }
.logo               { animation-delay: 0.04s; }
.form-heading       { animation-delay: 0.09s; }
.field:nth-child(3) { animation-delay: 0.14s; }
.field:nth-child(4) { animation-delay: 0.17s; }
.field-footer       { animation-delay: 0.20s; }
.btn-login          { animation-delay: 0.23s; }
.divider            { animation-delay: 0.26s; }
.btn-sso            { animation-delay: 0.29s; }
.form-footer        { animation-delay: 0.32s; }

.left-logo   { animation: fadeIn 0.6s 0.1s ease both; }
.left-body   { animation: fadeUp 0.7s 0.08s ease both; }
.left-footer { animation: fadeUp 0.7s 0.18s ease both; }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  html, body { overflow: auto; }
  .page { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .left { display: none; }
  .right { padding: 60px 32px; min-height: 100vh; }
}