:root {
  --bg-deep: #202d3e;
  --bg-panel: #1d2a3b;
  --bg-surface: #25364b;
  --surface-line: #6f90b5;
  --text-strong: #f5f9ff;
  --text-muted: #c6d9ec;
  --brand-header: #545e75;
  --brand-primary: #63adf2;
  --brand-secondary: #a7cced;
  --brand-accent: #d5e7f8;
  --danger: #ff8da0;
}

[data-theme="dark"] {
  --bg-deep: #0d1117;
  --bg-panel: #090d12;
  --bg-surface: #161b22;
  --surface-line: #30363d;
  --text-strong: #e6edf3;
  --text-muted: #8b949e;
  --brand-header: #161b22;
  --brand-secondary: #90c6f4;
  --brand-accent: #c0dcf5;
}


* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg-deep);
  color: var(--text-strong);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 58% 42%;
}

.hero-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand-header) 78%, #1a2435 22%) 0%, #141d2a 100%);
  isolation: isolate;
}

.pixel-blast-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 20%, rgba(99, 173, 242, 0.18) 0%, rgba(99, 173, 242, 0) 34%),
    radial-gradient(circle at 74% 68%, rgba(167, 204, 237, 0.16) 0%, rgba(167, 204, 237, 0) 44%),
    linear-gradient(130deg, rgba(19, 27, 41, 0.22) 0%, rgba(19, 27, 41, 0.74) 62%, rgba(19, 27, 41, 0.9) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-copy {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  bottom: clamp(28px, 5vh, 52px);
  max-width: 33rem;
  color: #f5f7ff;
  z-index: 2;
}

.brand-kicker {
  margin: 0 0 10px;
  color: var(--brand-secondary);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.hero-copy p {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  max-width: 29rem;
}

.form-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 90%, var(--brand-header) 10%) 0%, color-mix(in srgb, var(--bg-panel) 78%, #111826 22%) 100%),
    radial-gradient(circle at 50% -20%, rgba(167, 204, 237, 0.2) 0%, rgba(167, 204, 237, 0) 50%);
  border-left: 1px solid rgba(167, 204, 237, 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(26px, 4vw, 58px);
}

.form-shell {
  width: min(100%, 420px);
  padding: 6px;
}

.brand-mark {
  margin: 0 0 38px;
  color: var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: -0.015em;
  font-weight: 700;
}

.brand-mark img {
  width: 30px;
  height: 30px;
  display: block;
}

.form-shell h2 {
  margin: 0;
  font-size: clamp(2rem, 2.4vw, 2.6rem);
  letter-spacing: -0.02em;
}

.panel-copy {
  margin: 10px 0 22px;
  color: var(--text-muted);
  font-size: 1rem;
}

.login-form {
  display: grid;
  gap: 11px;
}

.login-form label {
  color: var(--brand-accent);
  font-size: 0.92rem;
  font-weight: 600;
}

.login-form input {
  width: 100%;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-surface) 92%, #121a28 8%);
  color: var(--text-strong);
  font: inherit;
  font-size: 0.97rem;
  padding: 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.login-form input::placeholder {
  color: #8fa6c2;
}

.login-form input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(99, 173, 242, 0.28);
}

.login-error {
  min-height: 1.2rem;
  margin: 2px 0 1px;
  color: var(--danger);
  font-size: 0.88rem;
}

.login-form button {
  margin-top: 6px;
  border: 0;
  border-radius: 8px;
  background: var(--brand-primary);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 11px 14px;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.login-form button:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.login-form button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
}

.form-foot {
  margin: 42px 0 0;
  text-align: center;
  color: #9eb6d0;
  font-size: 0.94rem;
}

.form-foot span {
  color: var(--brand-secondary);
  font-weight: 600;
}

@media (max-width: 980px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    min-height: 44vh;
  }

  .form-panel {
    margin-top: -16px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    position: relative;
    z-index: 3;
    border-left: 0;
    border-top: 1px solid rgba(167, 204, 237, 0.3);
  }

  .brand-mark {
    margin-bottom: 30px;
  }
}

@media (max-width: 560px) {
  .hero-copy h1 {
    font-size: 2.1rem;
  }

  .hero-copy p {
    font-size: 0.95rem;
  }

  .form-shell h2 {
    font-size: 1.85rem;
  }
}