@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

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

body {
  font-family: 'Inter', sans-serif;
  color: #1a1d23;
}

/* Vertical split: brand panel (left) + form panel (right) */
.login-split {
  display: flex;
  min-height: 100vh;
}

.login-brand {
  flex: 1;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
}

.login-brand img {
  width: 200px;
  height: auto;
  display: block;
}

.login-brand-sub {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}

.login-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #f7f8fa;
}

.login-form {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-eyebrow {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #000000;
}

.login-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}

input[type=password] {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 7px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: 'DM Mono', monospace;
  color: #1a1d23;
  outline: none;
  letter-spacing: 0.1em;
  transition: border-color 0.15s;
}

input[type=password]::placeholder { color: #9aa1ab; }
input[type=password]:focus { border-color: #2563eb; }

button {
  width: 100%;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
}

button:hover { opacity: 0.95; transform: translateY(-1px); }

.login-error {
  display: none;
  font-size: 12px;
  color: #dc2626;
  font-family: 'DM Mono', monospace;
}

.login-hint {
  font-size: 12px;
  color: #6b7280;
}

/* Error state, toggled server-side via body class */
body.has-error .login-error { display: block; }
body.has-error input[type=password] { border-color: #dc2626; }

/* Stack vertically on small screens */
@media (max-width: 720px) {
  .login-split { flex-direction: column; }
  .login-brand { flex: none; padding: 40px; }
  .login-brand img { width: 150px; }
  .login-panel { flex: 1; padding: 40px 28px; }
  .login-form { width: 100%; max-width: 340px; }
}