/* ── Login page overrides ── */
html, body { height: auto; overflow: auto; background: #080b14; }

/* Layout */
.lp-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 420px; max-width: 1160px; margin: 0 auto; padding: 40px 32px; gap: 48px; align-items: center; }

/* Hero */
.lp-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; }
.lp-brand-icon { width: 38px; height: 38px; background: linear-gradient(135deg, #7C5CFC, #10B981); border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.lp-brand-name { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.lp-headline { font-size: 42px; font-weight: 800; color: #fff; line-height: 1.12; letter-spacing: -.8px; margin-bottom: 18px; }
.lp-headline em { font-style: normal; background: linear-gradient(90deg, #7C5CFC, #10B981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lp-sub { font-size: 15px; color: rgba(255,255,255,.48); line-height: 1.7; max-width: 400px; margin-bottom: 48px; }
.lp-features { display: flex; flex-direction: column; gap: 20px; }
.lp-feat { display: flex; align-items: center; gap: 14px; }
.lp-feat-icon { width: 38px; height: 38px; min-width: 38px; background: rgba(124,92,252,.1); border: 1px solid rgba(124,92,252,.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #9d7eff; }
.lp-feat-body strong { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: 2px; }
.lp-feat-body span { font-size: 12px; color: rgba(255,255,255,.38); }

/* Card */
.lp-card { background: rgba(14,16,28,.96); border: 1px solid rgba(255,255,255,.07); border-radius: 22px; padding: 36px 32px; box-shadow: 0 40px 100px rgba(0,0,0,.65); backdrop-filter: blur(24px); }
.lp-card-head { margin-bottom: 28px; }
.lp-card-head h2 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.lp-card-head p { font-size: 13px; color: rgba(255,255,255,.38); }

/* Tabs */
.auth-tabs { display: flex; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; padding: 3px; gap: 2px; margin-bottom: 28px; }
.auth-tab { flex: 1; padding: 9px 4px; border: none; background: none; border-radius: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.38); cursor: pointer; transition: all .18s; font-family: 'Inter', sans-serif; letter-spacing: .01em; }
.auth-tab.is-active { background: rgba(124,92,252,.2); color: #c4b0ff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* Panels */
.auth-panel { display: none; }
.auth-panel.is-visible { display: block; animation: lpFade .18s ease; }
@keyframes lpFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Form */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.f-field { display: flex; flex-direction: column; gap: 6px; }
.f-field label { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.32); }
.f-field input { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 11px 14px; font-size: 14px; color: #fff; outline: none; transition: border-color .18s, box-shadow .18s; font-family: 'Inter', sans-serif; width: 100%; }
.f-field input::placeholder { color: rgba(255,255,255,.16); }
.f-field input:focus { border-color: rgba(124,92,252,.55); box-shadow: 0 0 0 3px rgba(124,92,252,.1); }
.auth-hint { font-size: 11px; color: rgba(255,255,255,.28); line-height: 1.5; margin-top: 3px; }

/* Buttons */
.btn-lp { width: 100%; padding: 12px; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: filter .18s, transform .1s; margin-top: 6px; }
.btn-lp:active { transform: scale(.99); }
.btn-lp.primary { background: linear-gradient(135deg, #7C5CFC, #5e3fe0); color: #fff; }
.btn-lp.primary:hover { filter: brightness(1.09); }
.btn-lp.ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.72); }
.btn-lp.ghost:hover { background: rgba(255,255,255,.1); }

/* Alerts */
.auth-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 12px; line-height: 1.55; margin-bottom: 4px; }
.auth-alert svg { flex-shrink: 0; margin-top: 1px; }
.alert--ok { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.22); color: #34d399; }
.alert--err { background: rgba(244,63,94,.08); border: 1px solid rgba(244,63,94,.2); color: #fb7185; }

/* Responsive */
@media (max-width: 860px) {
  .lp-wrap { grid-template-columns: 1fr; max-width: 440px; padding: 32px 16px; }
  .lp-hero { display: none; }
}