/* ============================================================
   KOTH — auth.css   ·   sign-in / register (Console)
   Calm split: a branded info panel + a compact form card.
   ============================================================ */

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

.auth-art {
  background: var(--paper);
  border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-start;
  position: relative; overflow: hidden;
}
.auth-art-grid {
  position: absolute; inset: 0; opacity: 1; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 30% 40%, #000, transparent 75%);
}
.auth-art-crown { display: none; }
.auth-art-inner { position: relative; z-index: 1; text-align: left; padding: 56px; max-width: 460px; }
.auth-art-title { font-family: var(--display); font-size: clamp(34px,4vw,48px); font-weight: 750; line-height: 1.02; letter-spacing: -0.03em; color: var(--text); text-transform: none; }
.auth-art-title span { color: var(--accent); }
.auth-art-sub { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); margin-top: 14px; text-transform: uppercase; }
.auth-art-line { width: 40px; height: 2px; background: var(--accent); margin: 20px 0; }
.auth-art-desc { font-family: var(--sans); font-size: 14px; color: var(--sub); max-width: 340px; line-height: 1.65; }
.auth-art-feats { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.auth-art-feat { font-family: var(--sans); font-size: 13px; color: var(--sub); display: flex; align-items: center; gap: 10px; letter-spacing: 0; }
.auth-art-feat::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); flex-shrink: 0; }
.auth-art-feat b { color: var(--text); font-weight: 600; }

.auth-side { display: flex; align-items: center; justify-content: center; padding: 48px 36px; background: var(--black); }
.auth-form-wrap { width: 100%; max-width: 372px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 30px 32px; box-shadow: var(--shadow); }
.auth-logo { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.auth-logo-title { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; text-transform: none; }
.auth-logo-title span { color: var(--accent); }
.auth-logo-sub { font-family: var(--sans); font-size: 13px; color: var(--sub); margin-top: 5px; text-transform: none; letter-spacing: 0; }
.auth-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin-bottom: 22px; border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--surface); padding: 3px; }
.auth-tab {
  padding: 8px; border-radius: 4px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  border: none; background: transparent; color: var(--sub);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.auth-tab.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }