/* ============================================
   KDP PILOT — Auth · Split-panel Midnight UI
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

.auth-body {
    margin: 0; min-height: 100vh;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    background: #0d0d13;
    color: #f4f4f5;
}

/* ── Split container ─────────────────────── */
.auth-split {
    display: flex;
    min-height: 100vh;
}

/* ══════════════════════════════════════════
   LEFT PANEL
══════════════════════════════════════════ */
.auth-left {
    position: relative;
    flex: 1.1;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(110% 90% at 0% 10%, rgba(109,40,217,.50), transparent 52%),
        radial-gradient(60% 55% at 15% 105%, rgba(34,211,238,.12), transparent 50%),
        linear-gradient(160deg, #130d24 0%, #0e1020 55%, #0d0d13 100%);
    padding: 52px 56px;
}

/* starfield */
.auth-left::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.72), transparent),
        radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.5px 1.5px at 55% 60%, rgba(255,255,255,.45), transparent),
        radial-gradient(1px 1px at 30% 82%,    rgba(255,255,255,.5),  transparent),
        radial-gradient(1px 1px at 90% 70%,    rgba(255,255,255,.4),  transparent),
        radial-gradient(1px 1px at 6%  55%,    rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 68% 88%,    rgba(255,255,255,.4),  transparent);
}

/* decorative glowing orbs */
.al-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.al-orb-1 { width: 340px; height: 340px; background: rgba(109,40,217,.38); top: -80px; left: -80px; }
.al-orb-2 { width: 220px; height: 220px; background: rgba(34,211,238,.10); bottom: -40px; left: 60px; }

.al-inner { position: relative; z-index: 1; max-width: 460px; width: 100%; display: flex; flex-direction: column; }

.al-logo { display: inline-block; margin-bottom: 32px; }
.al-logo img { height: 36px; width: auto; }

.al-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.55rem; font-weight: 700; line-height: 1.13;
    letter-spacing: -.025em; margin: 0 0 14px;
    background: linear-gradient(135deg, #f4f4f5 30%, #a78bfa 80%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.al-sub { color: #a1a1aa; font-size: .93rem; line-height: 1.6; margin: 0 0 24px; max-width: 380px; }

.al-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.al-features li { display: flex; align-items: center; gap: 14px; }
.al-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px;
    background: rgba(139,92,246,.18); border: 1px solid rgba(139,92,246,.28);
    display: flex; align-items: center; justify-content: center;
    color: #a78bfa; font-size: 1rem;
}
.al-features li div { font-size: .86rem; line-height: 1.45; color: #a1a1aa; }
.al-features li div strong { color: #e4e4e7; font-weight: 600; display: block; margin-bottom: 1px; }

.al-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    color: #a1a1aa; font-size: .8rem; font-weight: 500;
}
.al-badge i { color: #fbbf24; }

/* ══════════════════════════════════════════
   RIGHT PANEL
══════════════════════════════════════════ */
.auth-right {
    flex: 0 0 420px;
    display: flex; align-items: center; justify-content: center;
    background: #0f0f16;
    border-left: 1px solid rgba(255,255,255,.05);
    padding: 40px 28px;
}

.ar-inner { width: 100%; max-width: 340px; display: flex; flex-direction: column; }

/* card is now just padding + subtle border */
.auth-card {
    background: #16161f;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 30px 28px 24px;
    box-shadow: 0 0 0 1px rgba(139,92,246,.08), 0 20px 50px rgba(0,0,0,.45);
    position: relative;
    overflow: hidden;
}
/* top shimmer line */
.auth-card::before {
    content: '';
    position: absolute; top: 0; left: 16%; right: 16%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.7), transparent);
}

/* favicon above form */
.auth-brand { text-align: center; margin-bottom: 20px; }
.auth-favicon { height: 52px; width: auto; }

.auth-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em;
    text-align: center; margin: 0 0 6px; color: #f4f4f5;
}
.auth-subtitle { text-align: center; color: #71717a; font-size: .88rem; margin: 0 0 26px; line-height: 1.5; }

/* ── custom fields ─── */
.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; font-size: .8rem; font-weight: 600; color: #a1a1aa; margin-bottom: 7px; letter-spacing: .01em; }

.auth-input-wrap {
    position: relative; display: flex; align-items: center;
    background: #0d0d16; border: 1px solid #262630;
    border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
.auth-input-wrap:focus-within {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,.22), 0 0 18px rgba(139,92,246,.12);
}
.auth-input-wrap > i {
    position: absolute; left: 14px;
    color: #52525b; font-size: 15px; pointer-events: none;
    transition: color .15s;
}
.auth-input-wrap:focus-within > i { color: #8b5cf6; }

.auth-input {
    width: 100%; background: transparent; border: none; outline: none;
    color: #f4f4f5; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .92rem; padding: 13px 14px 13px 42px;
    border-radius: 12px;
}
.auth-input::placeholder { color: #3f3f50; }

.auth-eye {
    position: absolute; right: 12px;
    background: none; border: none; color: #52525b; cursor: pointer;
    padding: 4px 6px; border-radius: 6px; transition: color .15s, background .15s;
}
.auth-eye:hover { color: #a1a1aa; background: rgba(255,255,255,.06); }

/* remember + forgot row */
.auth-row-mid { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.auth-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .85rem; color: #a1a1aa; }
.auth-check input[type="checkbox"] {
    appearance: none; width: 16px; height: 16px; border-radius: 5px;
    border: 1.5px solid #3f3f50; background: #0d0d16; cursor: pointer; flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.auth-check input[type="checkbox"]:checked { background: #8b5cf6; border-color: #8b5cf6; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23fff' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 65%; background-repeat: no-repeat; background-position: center; }
.auth-link-muted { font-size: .85rem; color: #8b5cf6; font-weight: 500; text-decoration: none; }
.auth-link-muted:hover { color: #a78bfa; text-decoration: underline; }

/* sign in button */
.auth-btn-primary {
    width: 100%; padding: 13px; border: none; border-radius: 12px; cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .97rem; font-weight: 600; color: #fff; letter-spacing: .01em;
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
    box-shadow: 0 4px 20px rgba(109,40,217,.45), 0 1px 0 rgba(255,255,255,.12) inset;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    position: relative; overflow: hidden;
}
.auth-btn-primary::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transition: left .5s ease;
}
.auth-btn-primary:hover::before { left: 140%; }
.auth-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 8px 28px rgba(109,40,217,.55); }
.auth-btn-primary:active { transform: translateY(0); }

/* alt link */
.auth-alt-link { text-align: center; margin-top: 20px; font-size: .875rem; color: #71717a; }
.auth-alt-link a { color: #a78bfa; font-weight: 600; text-decoration: none; }
.auth-alt-link a:hover { color: #c4b5fd; text-decoration: underline; }

/* alerts */
.auth-card .alert { border-radius: 10px; font-size: .86rem; padding: 10px 14px; margin-bottom: 16px; border: 1px solid transparent; }
.auth-card .alert-success { background: rgba(52,211,153,.1); color: #6ee7b7; border-color: rgba(52,211,153,.2); }
.auth-card .alert-danger  { background: rgba(248,113,113,.1); color: #fca5a5; border-color: rgba(248,113,113,.2); }
.auth-card .alert-warning { background: rgba(251,191,36,.1); color: #fcd34d; border-color: rgba(251,191,36,.2); }
.auth-card .alert-info    { background: rgba(34,211,238,.1); color: #67e8f9; border-color: rgba(34,211,238,.2); }

/* footer */
.auth-footer-text { text-align: center; color: #3f3f50; font-size: .76rem; margin-top: 20px; }

/* ── Responsive: stack on mobile ─────────── */
@media (max-width: 900px) {
    .auth-split { flex-direction: column; }
    .auth-left  { flex: none; padding: 36px 28px; min-height: auto; }
    .al-headline { font-size: 1.85rem; }
    .al-features { display: none; } /* hide on small */
    .auth-right { flex: none; border-left: none; border-top: 1px solid rgba(255,255,255,.06); padding: 32px 20px 48px; }
    .ar-inner { max-width: 400px; }
}

/* ── Polish fixes ───────────────────────── */
/* vertical gradient divider instead of hard border */
.auth-right { border-left: none; position: relative; }
.auth-right::before {
    content: '';
    position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(139,92,246,.35) 40%, rgba(139,92,246,.35) 60%, transparent);
}

/* left panel — push content to upper-center, not dead center */
.auth-left { align-items: center; justify-content: flex-start; padding-left: 7%; padding-right: 5%; }
.al-inner { padding-top: 0; }

/* feature icon — vertically align with text middle */
.al-features li { align-items: center; }
.al-features li div { line-height: 1.4; }

/* badge margin tighter */
.al-badge { margin-top: 0; }

/* right panel card shadow more contained */
.auth-card { box-shadow: 0 0 0 1px rgba(139,92,246,.1), 0 12px 40px rgba(0,0,0,.5); }

/* auth-favicon bigger, more presence */
.auth-favicon { height: 56px; width: auto; border-radius: 16px; }