/* ═══════════════════════════════════════════════════════════
   Лидоруб — auth.css
   Стили страницы авторизации. Базовые токены — в base.css.
   ═══════════════════════════════════════════════════════════ */

.ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.ambient-blob {
  position: absolute; border-radius: 50%; filter: blur(120px); opacity: .18;
  animation: blobDrift 12s ease-in-out infinite alternate;
}
.ambient-blob--blue  { width:600px;height:600px;background:var(--blue);top:-200px;left:-150px; }
.ambient-blob--green { width:400px;height:400px;background:var(--green);bottom:-100px;right:-80px;opacity:.10;animation-delay:-6s; }
@keyframes blobDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(40px,30px) scale(1.06); }
}

.grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 48px 48px;
}

.page {
  position: relative; z-index: 1; min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
}

/* ── Left panel ── */
.panel-left {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px; border-right: 1px solid var(--border); position: relative; overflow: hidden;
}
.panel-left::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(79,142,255,.04) 0%, transparent 60%);
  pointer-events: none;
}

.logo { display:flex;align-items:center;gap:10px; }
.logo-icon {
  width:36px;height:36px;background:linear-gradient(135deg,var(--blue),#2E6EFF);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
}
.logo-icon svg { width:18px;height:18px; }
.logo-name  { font-size:17px;font-weight:700;letter-spacing:-.3px; }
.logo-badge {
  font-size:10px;font-weight:600;color:var(--blue);background:var(--blue-dim);
  border:1px solid var(--blue-border);border-radius:4px;padding:2px 6px;
  letter-spacing:.5px;text-transform:uppercase;
}

.hero-content { flex:1;display:flex;flex-direction:column;justify-content:center; }

.hero-title {
  font-size:40px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;
  color:var(--text);margin-bottom:20px;
}
.hero-title em {
  font-style:normal;
  background:linear-gradient(90deg,var(--blue),#8BB8FF);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-desc { font-size:15px;color:var(--muted);line-height:1.7;max-width:500px;margin-bottom:40px; }

.stats { display:flex;gap:32px; }
.stat-value { font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.1; }
.stat-value span { color:var(--blue); }
.stat-label { font-size:12px;color:var(--muted);margin-top:2px;font-weight:500; }

.testimonial {
  display:flex;align-items:flex-start;gap:14px;background:var(--bg2);
  border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-top:40px;
}
.testimonial-avatar {
  width:38px;height:38px;border-radius:50%;background:var(--blue-dim);
  border:1px solid var(--blue-border);display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700;color:var(--blue);flex-shrink:0;
}
.testimonial-text   { font-size:13px;color:var(--muted);line-height:1.6; }
.testimonial-author { font-size:12px;color:var(--dim);margin-top:6px;font-weight:600; }

/* ── Right panel ── */
.panel-right { display:flex;align-items:center;justify-content:center;padding:48px; }

.auth-card { width:100%;max-width:450px;animation:cardIn .4s cubic-bezier(.22,.68,0,1.2) both; }
@keyframes cardIn {
  from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)}
}

.auth-header    { margin-bottom:32px; }
.auth-title     { font-size:26px;font-weight:800;letter-spacing:-.6px;margin-bottom:6px; }
.auth-subtitle  { font-size:14px;color:var(--muted); }
.auth-subtitle strong { color:var(--text);font-weight:600; }

.auth-step-indicator { display:flex;align-items:center;gap:8px;margin-bottom:20px; }
.step-dot { width:6px;height:6px;border-radius:50%;background:var(--dim);transition:all .3s; }
.step-dot.active { background:var(--blue);width:20px;border-radius:3px; }
.step-dot.done   { background:var(--green); }

.form-group   { margin-bottom:18px; }
.form-label   { display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px; }
.form-input   { /* расширяет .input из base.css */ }
.form-input   {
  width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:10px;
  padding:13px 16px;font-family:var(--font);font-size:15px;font-weight:500;color:var(--text);
  outline:none;transition:border-color var(--transition),box-shadow var(--transition);
}
.form-input::placeholder { color:var(--dim); }
.form-input:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(79,142,255,.12); }
.form-input.error { border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim); }

.otp-input { font-size:28px;font-weight:700;letter-spacing:12px;text-align:center;padding:16px 20px; }

.otp-hint      { display:flex;align-items:center;justify-content:space-between;margin-top:6px; }
.otp-hint-text { font-size:12px;color:var(--muted); }
.otp-timer     { font-size:12px;color:var(--dim);font-weight:600; }

.form-error {
  display:flex;align-items:center;gap:12px;font-size:13px;color:var(--red);
  background:var(--red-dim);border:1px solid rgba(255,91,91,.15);
  border-radius:8px;padding:10px 14px;margin-bottom:18px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 16px;
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: rgba(255,255,255,.22); }
.btn-ghost:disabled { opacity: .45; cursor: default; }

.security-note {
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);
  margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
}

.mobile-logo { display:none; }

@media (max-width:900px) {
  .page { grid-template-columns:1fr; }
  .panel-left { display:none; }
  .panel-right { padding:32px 24px;flex-direction:column; }
  .mobile-logo { display:flex;margin-bottom:24px; }
}