/* ═══════════════════════════════════════════════════════════════
   AICM · Login — Split Layout
   ═══════════════════════════════════════════════════════════════ */

:root {
    --font: 'Poppins', sans-serif;
    --radius-xl: 1rem;
    --radius-lg: .75rem;
    --radius-md: .55rem;

    /* Light */
    --bg-body:      #f0f2f5;
    --bg-card:      #ffffff;
    --text-main:    #1e293b;
    --text-muted:   #64748b;
    --border:       #e2e8f0;
    --input-bg:     #f8fafc;
    --input-focus:  #6366f1;
    --accent:       #6366f1;
    --accent-dark:  #4f46e5;
    --shadow:       0 4px 24px rgba(0,0,0,.07);
}

[data-bs-theme="dark"] {
    --bg-body:    #0f172a;
    --bg-card:    #1e293b;
    --text-main:  #f1f5f9;
    --text-muted: #94a3b8;
    --border:     #334155;
    --input-bg:   #1e293b;
    --shadow:     0 4px 24px rgba(0,0,0,.35);
}

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

html, body {
    margin: 0; padding: 0;
    height: 100%;
    font-family: var(--font);
    color: var(--text-main);
    background: var(--bg-body);
}

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

/* ══════════════════════════════════════════════════════════════
   LEFT PANEL — Branding
══════════════════════════════════════════════════════════════ */
.lg-left {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #1a0842 0%, #2d1270 30%, #4c1d95 60%, #6d28d9 85%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 4rem;
}

/* Decorative circles */
.lg-left-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.lg-deco-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

.lg-deco-c1 {
    width: 520px; height: 520px;
    top: -140px; left: -140px;
    animation: float1 18s ease-in-out infinite;
}
.lg-deco-c2 {
    width: 380px; height: 380px;
    bottom: -100px; right: -80px;
    background: rgba(255,255,255,.03);
    animation: float1 22s ease-in-out infinite reverse;
}
.lg-deco-c3 {
    width: 200px; height: 200px;
    bottom: 30%; left: 55%;
    background: rgba(255,255,255,.05);
    animation: float1 14s ease-in-out infinite 3s;
}

@keyframes float1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(18px, 28px) scale(1.03); }
}

/* Left content */
.lg-left-content {
    position: relative;
    z-index: 1;
    max-width: 520px;
    width: 100%;
}

.lg-logo-wrap {
    margin-bottom: 2.25rem;
}

.lg-logo-svg {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.25));
}

.lg-headline {
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: .85rem;
    letter-spacing: -.02em;
}

.lg-subline {
    font-size: .93rem;
    color: rgba(255,255,255,.7);
    line-height: 1.65;
    max-width: 400px;
    margin-bottom: 2rem;
}

/* Feature list */
.lg-features {
    list-style: none;
    padding: 0; margin: 0 0 2.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.lg-features li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .88rem;
    color: rgba(255,255,255,.85);
    font-weight: 500;
}

.lg-features li i {
    width: 28px; height: 28px;
    border-radius: .45rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem;
    flex-shrink: 0;
}

/* Stats row */
.lg-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.1rem 1.5rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
}

.lg-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.lg-stat-num {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.lg-stat-lbl {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.55);
    line-height: 1.3;
}

.lg-stat-div {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.18);
}

/* ══════════════════════════════════════════════════════════════
   RIGHT PANEL — Form
══════════════════════════════════════════════════════════════ */
.lg-right {
    flex: 0 0 420px;
    min-width: 360px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    position: relative;
    overflow-y: auto;
    box-shadow: -8px 0 40px rgba(0,0,0,.06);
}

[data-bs-theme="dark"] .lg-right {
    box-shadow: -8px 0 40px rgba(0,0,0,.3);
}

.lg-form-wrap {
    width: 100%;
    max-width: 360px;
}

/* Form header */
.lg-form-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.lg-form-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-lg);
    background: rgba(99,102,241,.1);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: .85rem;
}

.lg-form-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: .3rem;
}

.lg-form-sub {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0;
}

/* Alerts */
.lg-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem .9rem;
    border-radius: var(--radius-md);
    font-size: .82rem;
    margin-bottom: 1.25rem;
    line-height: 1.45;
}

.lg-alert i { flex-shrink: 0; margin-top: .05rem; }

.lg-alert--error {
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.22);
    color: #b91c1c;
}

.lg-alert--success {
    background: rgba(16,185,129,.07);
    border: 1px solid rgba(16,185,129,.22);
    color: #065f46;
}

[data-bs-theme="dark"] .lg-alert--error  { color: #fca5a5; }
[data-bs-theme="dark"] .lg-alert--success { color: #6ee7b7; }

/* Field groups */
.lg-field-group {
    margin-bottom: 1rem;
}

.lg-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .4rem;
}

.lg-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.lg-input-ico {
    position: absolute;
    left: .9rem;
    color: var(--text-muted);
    font-size: .9rem;
    pointer-events: none;
    z-index: 1;
}

.lg-input {
    width: 100%;
    padding: .65rem .9rem .65rem 2.5rem;
    background: var(--input-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: .88rem;
    font-family: var(--font);
    color: var(--text-main);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    -webkit-appearance: none;
}

.lg-input:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    background: var(--bg-card);
}

.lg-input::placeholder { color: var(--text-muted); opacity: .6; }

.lg-input-eye {
    position: absolute;
    right: .75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: .2rem;
    font-size: .9rem;
    line-height: 1;
    z-index: 1;
    transition: color .15s;
}
.lg-input-eye:hover { color: var(--accent); }

/* Meta row */
.lg-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.35rem;
}

.lg-remember {
    display: flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    font-size: .8rem;
    color: var(--text-muted);
    user-select: none;
}

.lg-remember input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
    border-radius: .25rem;
}

.lg-forgot {
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: opacity .15s;
}
.lg-forgot:hover { opacity: .75; text-decoration: underline; }

/* Submit button */
.lg-btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 3px 14px rgba(99,102,241,.35);
    margin-bottom: 1.25rem;
}
.lg-btn-submit:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,102,241,.4);
}
.lg-btn-submit:active { transform: translateY(0); }

/* Divider */
.lg-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .78rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.lg-divider::before,
.lg-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Social button */
.lg-btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    padding: .65rem 1rem;
    background: var(--input-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-main);
    font-family: var(--font);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
    margin-bottom: 1.5rem;
}
.lg-btn-social:hover {
    background: var(--bg-card);
    border-color: var(--text-muted);
    box-shadow: var(--shadow);
    color: var(--text-main);
}

/* Register link */
.lg-register {
    text-align: center;
    font-size: .82rem;
    color: var(--text-muted);
}
.lg-register a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s;
}
.lg-register a:hover { opacity: .75; text-decoration: underline; }

/* ── Theme toggle ──────────────────────────────────────────── */
.theme-toggle-fixed {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
}

.theme-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(128,128,128,.2);
    background: var(--bg-card);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    box-shadow: var(--shadow);
}
.theme-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lg-left { display: none; }
    .lg-right { flex: 1; min-width: 0; box-shadow: none; padding: 2rem 1.25rem; }
    .lg-form-wrap { max-width: 420px; }
}

@media (max-width: 480px) {
    .lg-right { padding: 1.5rem 1rem; }
}