body.auth-body,
.auth-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
}

/* ---- left: visual panel — quiet, not decorative ---- */
.auth-visual {
  flex: 1 1 44%;
  min-width: 0;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px;
  color: var(--text-on-ink);
}

/* one quiet line connecting two points — animated inline as an SVG (see
   HTML) so a small pulse can actually travel along it, rather than a
   static background-image */
.auth-visual-line {
  position: absolute;
  right: -60px;
  bottom: -40px;
  pointer-events: none;
}
.auth-visual-line-pulse {
  stroke-dasharray: 30 520;
  animation: authLineFlow 3.5s linear infinite;
}
@keyframes authLineFlow {
  from { stroke-dashoffset: 550; }
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-visual-line-pulse { animation: none; }
}

.auth-visual-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}
.auth-visual-top img { height: 22px; width: 22px; border-radius: 5px; }
.auth-visual-top .brand-name { font-size: 14.5px; font-weight: 600; }

.auth-visual-copy {
  position: relative;
  z-index: 1;
  max-width: 360px;
}
.auth-visual-copy h1 {
  font-size: 28px;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.auth-visual-copy p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-on-ink-muted);
  margin: 0;
}

/* ---- right: form panel ---- */
.auth-form-panel {
  flex: 1 1 56%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--bg);
}

.auth-shell { width: 100%; max-width: 360px; }

.auth-shell-brand {
  display: none; /* shown only on mobile, where the visual panel is hidden */
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
}
.auth-shell-brand img { height: 22px; width: 22px; border-radius: 5px; }
.auth-shell-brand .brand-name { font-size: 14.5px; font-weight: 600; }

.auth-card h1 {
  font-size: 19px;
  margin: 0 0 4px;
}
.auth-card .sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 22px;
}

.auth-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 22px;
}
.auth-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 7px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 5px;
  color: var(--text-muted);
}
.auth-tabs button[aria-selected="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .btn { justify-content: center; width: 100%; margin-top: 2px; }

/* API key reveal, shown once on signup */
.key-reveal { display: flex; flex-direction: column; gap: 13px; }
.key-box {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.key-warning { font-size: 12.5px; color: var(--danger); margin: 0; }

.hidden { display: none !important; }

@media (max-width: 860px) {
  .auth-visual { display: none; }
  .auth-form-panel { flex: 1 1 100%; padding: 48px 24px; }
  .auth-shell-brand { display: flex; }
}

.auth-legal { font-size: 12px; color: var(--text-muted); margin: 12px 0 0; text-align: center; line-height: 1.5; }
.auth-legal a { color: var(--text-muted); text-decoration: underline; }