/* ============================================================
   KOTH — auth.css   ·   sign-in / register (brutalist)
   Big typographic left panel, square form on the right.
   ============================================================ */

.auth-root { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
@media(max-width:760px) { .auth-root { grid-template-columns: 1fr; } .auth-art { display: none !important; } }

.auth-art {
  background: var(--text);
  border-right: 2px solid var(--rule);
  display: flex; align-items: flex-end; justify-content: flex-start;
  position: relative; overflow: hidden;
}
.auth-art-grid {
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.auth-art-inner { position: relative; z-index: 1; text-align: left; padding: 56px; }
.auth-art-title { font-family: var(--display); font-size: clamp(56px,7vw,96px); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--paper); text-transform: uppercase; }
.auth-art-title span { color: var(--accent); }
.auth-art-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.55); margin-top: 18px; text-transform: uppercase; }
.auth-art-line { width: 56px; height: 3px; background: var(--accent); margin: 22px 0; }
.auth-art-desc { font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,0.7); max-width: 320px; line-height: 1.7; }

.auth-side { display: flex; align-items: center; justify-content: center; padding: 48px 36px; background: var(--paper); }
.auth-form-wrap { width: 100%; max-width: 360px; }
.auth-logo { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px solid var(--rule); }
.auth-logo-title { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; text-transform: uppercase; }
.auth-logo-title span { color: var(--accent); }
.auth-logo-sub { font-family: var(--mono); font-size: 11px; color: var(--sub); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.auth-tabs { display: flex; gap: 0; margin-bottom: 28px; border: 1.5px solid var(--text); }
.auth-tab {
  flex: 1; padding: 10px; border-radius: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border: none; border-right: 1.5px solid var(--text); background: transparent; color: var(--sub);
  transition: background var(--transition), color var(--transition);
}
.auth-tab:last-child { border-right: none; }
.auth-tab.active { background: var(--text); color: var(--paper); }