/* ============================================================
   LOGIN — AI-oriented split screen, matches Sigma CRM theme
   ============================================================ */
body { display: block; min-height: 100vh; background: var(--crm-bg); }

.auth-wrap {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

/* ── LEFT: AI brand / showcase panel ── */
.auth-brand {
    position: relative;
    overflow: hidden;
    padding: 48px 56px;
    color: #fff;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 30%, #696cff 65%, #03c3ec 120%);
    background-size: 200% 200%;
    animation: gradientShift 14s ease infinite;
}
/* soft floating orbs */
.auth-brand::before,
.auth-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}
.auth-brand::before {
    width: 420px; height: 420px; right: -140px; top: -160px;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 65%);
    animation: floatY 9s ease-in-out infinite;
}
.auth-brand::after {
    width: 300px; height: 300px; left: -110px; bottom: -120px;
    background: radial-gradient(circle, rgba(3,195,236,.35), transparent 62%);
    animation: floatY 11s ease-in-out infinite reverse;
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(26px); }
}
/* subtle grid mesh */
.auth-mesh {
    position: absolute; inset: 0; z-index: 0; opacity: .35;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 30% 20%, #000 40%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 40%, transparent 78%);
}
.auth-brand > * { position: relative; z-index: 1; }

.auth-logo { display: flex; align-items: center; gap: 12px; }
.auth-logo-icon {
    width: 46px; height: 46px; border-radius: 13px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
}
.auth-logo-text { font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
.auth-logo-text small { display: block; font-weight: 400; font-size: .72rem; opacity: .8; }

.auth-brand-mid { margin-top: auto; margin-bottom: auto; padding: 40px 0; max-width: 460px; }
.auth-ai-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(6px);
    padding: 7px 15px; border-radius: 30px;
    font-size: .76rem; font-weight: 600; margin-bottom: 22px;
}
.auth-ai-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #71dd37; box-shadow: 0 0 0 0 rgba(113,221,55,.6); animation: liveDot 2s infinite; }
.auth-headline { font-size: 2.5rem; font-weight: 900; line-height: 1.12; letter-spacing: -.02em; }
/* word-by-word reveal */
.auth-headline .word {
    display: inline-block;
    opacity: 0; transform: translateY(22px) rotate(2deg);
    animation-name: wordUp;
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    animation-fill-mode: forwards;
}
@keyframes wordUp { to { opacity: 1; transform: none; } }
/* animated gradient shimmer on the highlighted words */
.auth-headline .grad {
    background: linear-gradient(90deg, #fff 0%, #a5f3fc 30%, #e9d5ff 55%, #fff 80%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation-name: wordUp, shimmerText;
    animation-duration: .6s, 4s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1), linear;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
}
@keyframes shimmerText { to { background-position: -220% center; } }
.auth-sub { margin-top: 16px; font-size: .95rem; line-height: 1.65; opacity: .9; max-width: 420px; }

/* feature list */
.auth-feats { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.auth-feat { display: flex; align-items: center; gap: 13px; font-size: .88rem; font-weight: 500; }
.auth-feat-ic {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.auth-feat span small { display: block; font-size: .74rem; opacity: .72; font-weight: 400; }

/* stats footer */
.auth-stats { display: flex; gap: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.auth-stat b { font-size: 1.5rem; font-weight: 800; display: block; line-height: 1; }
.auth-stat span { font-size: .74rem; opacity: .8; }

/* ── RIGHT: form panel ── */
.auth-form-side {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 32px; background: var(--crm-card);
}
.auth-card { width: 100%; max-width: 400px; animation: fadeInUp .6s ease both; }

/* animated security illustration (pure SVG — crisp at any size) */
.auth-illus {
    width: 168px; height: 168px; margin: 0 auto 22px;
    border-radius: 50%; position: relative;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 45%, var(--crm-primary-light), #8b5cf612 62%, transparent 72%);
    animation: fadeInScale .6s ease both;
}
.auth-illus::before {
    content: ''; position: absolute; inset: -7px; border-radius: 50%;
    border: 1.5px dashed #8b5cf640; animation: spin 20s linear infinite;
}
.auth-illus svg {
    width: 150px; height: 150px; position: relative; z-index: 1;
    overflow: visible;
    filter: drop-shadow(0 10px 20px rgba(105,108,255,.22));
    animation: bob 3.8s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ===== One synced 5s story loop: type password → unlock → verify → relock =====
   locked+typing (0-32%) · lock pops open + check draws (40-58%) · hold (58-80%) · relock+clear (86-100%) */

/* padlock shackle: pops UP to unlock, swings back down to lock */
.sec-shackle { transform-box: fill-box; transform-origin: 90% 100%; animation: unlock 5s ease-in-out infinite; }
@keyframes unlock {
    0%, 34%   { transform: translateY(0) rotate(0deg); }
    44%, 80%  { transform: translateY(-13px) rotate(9deg); }
    90%, 100% { transform: translateY(0) rotate(0deg); }
}
/* lock body gives a tiny happy hop right as it opens */
.sec-body { transform-box: fill-box; transform-origin: center; animation: hop 5s ease-in-out infinite; }
@keyframes hop {
    0%, 38%, 60%, 100% { transform: translateY(0) scale(1); }
    46% { transform: translateY(1px) scale(1.04); }
}

/* shield check: draws when unlocked, clears when relocked */
.sec-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: check 5s ease-in-out infinite; }
@keyframes check {
    0%, 42%   { stroke-dashoffset: 40; }
    56%, 82%  { stroke-dashoffset: 0; }
    90%, 100% { stroke-dashoffset: 40; }
}
.sec-shield { transform-box: fill-box; transform-origin: center; animation: shieldPop 5s ease-in-out infinite; }
@keyframes shieldPop {
    0%, 42% { transform: scale(1); }
    50% { transform: scale(1.14); }
    60%, 100% { transform: scale(1); }
}

/* password stars: type in one-by-one, hold, then clear before relock */
.sec-star { transform-box: fill-box; transform-origin: center; opacity: 0; animation: type 5s ease-in-out infinite; }
.sec-star:nth-of-type(1) { animation-delay: 0s; }
.sec-star:nth-of-type(2) { animation-delay: .28s; }
.sec-star:nth-of-type(3) { animation-delay: .56s; }
.sec-star:nth-of-type(4) { animation-delay: .84s; }
@keyframes type {
    0%   { opacity: 0; transform: scale(.2); }
    6%   { opacity: 1; transform: scale(1.35); }
    10%, 78% { opacity: 1; transform: scale(1); }
    86%, 100% { opacity: 0; transform: scale(.2); }
}

/* floating sparkle particles — burst brighter at the unlock moment */
.sec-spark { transform-box: fill-box; transform-origin: center; opacity: 0; animation: sparkle 5s ease-in-out infinite; }
.sec-spark:nth-of-type(1) { animation-delay: .2s; }
.sec-spark:nth-of-type(2) { animation-delay: .9s; }
.sec-spark:nth-of-type(3) { animation-delay: 1.5s; }
.sec-spark:nth-of-type(4) { animation-delay: 2.1s; }
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(.3) translateY(4px); }
    50% { opacity: 1; transform: scale(1) translateY(-4px); }
}

.auth-form-head { margin-bottom: 30px; }
.auth-form-head h1 { font-size: 1.75rem; font-weight: 800; color: var(--crm-text); letter-spacing: -.01em; }
.auth-form-head p { margin-top: 6px; font-size: .88rem; color: var(--crm-text-muted); }

/* fields */
.auth-field { margin-bottom: 18px; }
.auth-label { display: block; font-size: .8rem; font-weight: 600; color: var(--crm-text); margin-bottom: 7px; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap > i {
    position: absolute; left: 14px; font-size: 19px; color: var(--crm-text-light);
    pointer-events: none; transition: color .2s ease;
}
.auth-input {
    width: 100%; padding: 12px 14px 12px 44px;
    border: 1.5px solid var(--crm-border); border-radius: 10px;
    font-family: inherit; font-size: .9rem; color: var(--crm-text);
    background: #fff; transition: var(--crm-transition); outline: none;
}
.auth-input::placeholder { color: var(--crm-text-light); }
.auth-input:focus { border-color: var(--crm-primary); box-shadow: 0 0 0 4px var(--crm-primary-light); }
.auth-input:focus + .auth-eye,
.auth-input-wrap:focus-within > i { color: var(--crm-primary); }
.auth-eye {
    position: absolute; right: 12px; background: none; border: none; cursor: pointer;
    color: var(--crm-text-light); font-size: 19px; display: flex; padding: 4px; border-radius: 6px;
    transition: var(--crm-transition);
}
.auth-eye:hover { color: var(--crm-primary); background: var(--crm-primary-light); }

.auth-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--crm-text-muted); cursor: pointer; user-select: none; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--crm-primary); cursor: pointer; }
.auth-link { font-size: .82rem; font-weight: 600; color: var(--crm-primary); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

/* validation error banner */
.auth-alert {
    display: flex; align-items: center; gap: 9px;
    background: #ffe5e5; border: 1px solid #ffb3b3; color: #c0392b;
    padding: 11px 14px; border-radius: 10px; font-size: .83rem; font-weight: 500;
    margin-bottom: 20px;
}
.auth-alert i { font-size: 18px; flex-shrink: 0; }

.auth-submit {
    width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, #696cff, #8b5cf6);
    color: #fff; font-family: inherit; font-size: .92rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 6px 18px rgba(105,108,255,.32);
    transition: var(--crm-transition); position: relative; overflow: hidden;
}
.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(105,108,255,.42); }
.auth-submit:active { transform: translateY(0) scale(.99); }
.auth-submit .ti-loader-2 { display: none; animation: spin .7s linear infinite; }
.auth-submit.loading .label,
.auth-submit.loading .ti-arrow-right { display: none; }
.auth-submit.loading .ti-loader-2 { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* shine sweep */
.auth-submit::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
}
.auth-submit:hover::after { animation: sweep .8s ease; }
@keyframes sweep { to { left: 130%; } }

.auth-secure { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .72rem; color: var(--crm-text-light); }

/* mobile top brand (hidden on desktop) */
.auth-mobile-brand { display: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-form-side { background: var(--crm-bg); padding: 32px 20px; }
    .auth-card {
        background: var(--crm-card); border: 1px solid var(--crm-border);
        border-radius: var(--crm-radius-lg); padding: 32px 26px;
        box-shadow: var(--crm-shadow-lg);
    }
    .auth-mobile-brand {
        display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 26px;
    }
    .auth-mobile-brand .ic {
        width: 44px; height: 44px; border-radius: 12px; color: #fff; font-size: 22px;
        background: linear-gradient(135deg, var(--crm-primary), var(--crm-violet));
        display: flex; align-items: center; justify-content: center;
    }
    .auth-mobile-brand .tx { font-weight: 800; font-size: 1.15rem; color: var(--crm-text); }
    .auth-mobile-brand .tx small { display: block; font-weight: 400; font-size: .7rem; color: var(--crm-text-muted); }
}
@media (max-width: 420px) {
    .auth-sso { grid-template-columns: 1fr; }
}