/* ============================================================================
   PrimaBI login — verbatim implementation of "Liquid Glass Login Light"
   from the Claude Design handoff bundle. Standalone on purpose (no imports,
   prototype hex values inline) so nothing else can interfere while the design
   is being reviewed. Tokenize via theme-tokens.css when promoted.
   ============================================================================ */

html, body { margin: 0; padding: 0; height: 100%; }
body {
    background: #f2f1fb;
    font-family: 'Jost', sans-serif;
    overflow: hidden;
}
a { color: #3d34a0; text-decoration: none; }
a:hover { color: #2fd68f; }
input { font-family: 'Jost', sans-serif; }
input::placeholder { color: rgba(61,52,160,0.35); }

/* ---------- keyframes (verbatim from the prototype) ---------- */
@keyframes blobMorph {
    0%, 100% { border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%; transform: translate(0,0) rotate(0deg) scale(1); }
    25%      { border-radius: 45% 55% 48% 52% / 62% 45% 55% 38%; transform: translate(40px,-50px) rotate(8deg) scale(1.06); }
    50%      { border-radius: 52% 48% 40% 60% / 45% 55% 45% 55%; transform: translate(-30px,30px) rotate(-6deg) scale(0.96); }
    75%      { border-radius: 40% 60% 58% 42% / 55% 40% 60% 45%; transform: translate(25px,45px) rotate(5deg) scale(1.04); }
}
@keyframes blobDrift {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(-60px,-40px) scale(1.12); }
}
@keyframes floatOrb {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-35px); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sheenSweep {
    0%        { transform: translateX(-120%) skewX(-18deg); }
    60%, 100% { transform: translateX(220%) skewX(-18deg); }
}

/* ---------- page ---------- */
.lg-page {
    position: fixed;
    inset: 0;
    background: radial-gradient(120% 120% at 80% 10%, #ffffff 0%, #f2f1fb 55%, #e6e3f7 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8vw;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .lg-page { justify-content: center; padding-right: 0; }
}

/* ---------- animated background blobs ---------- */
.lg-blob-purple {
    position: absolute; left: -12%; top: -18%;
    width: 62vw; height: 62vw; min-width: 520px; min-height: 520px;
    background: linear-gradient(135deg, #8578f2 0%, #5a4fcf 45%, #3d34a0 100%);
    animation: blobMorph 22s ease-in-out infinite;
    opacity: 0.75;
}
.lg-blob-green {
    position: absolute; right: -18%; bottom: -25%;
    width: 48vw; height: 48vw; min-width: 420px; min-height: 420px;
    background: linear-gradient(160deg, #2fd68f 0%, #21b573 55%, #2a6fa8 100%);
    border-radius: 47% 53% 58% 42% / 55% 45% 55% 45%;
    animation: blobDrift 18s ease-in-out infinite;
    opacity: 0.55;
}
.lg-orb-purple {
    position: absolute; left: 14%; bottom: 8%;
    width: 130px; height: 130px;
    background: linear-gradient(135deg, #9a8ef5, #5a4fcf);
    border-radius: 50%;
    animation: floatOrb 9s ease-in-out infinite;
    opacity: 0.7;
}
.lg-orb-green {
    position: absolute; right: 20%; top: 12%;
    width: 70px; height: 70px;
    background: linear-gradient(135deg, #4fe3a4, #21b573);
    border-radius: 50%;
    animation: floatOrb 7s ease-in-out 1.5s infinite;
    opacity: 0.6;
}

/* ---------- liquid glass card ---------- */
.lg-card {
    position: relative;
    width: 430px;
    max-width: calc(100vw - 48px);
    border-radius: 28px;
    padding: 52px 44px 44px;
    /* glassBlur 0 per review - blobs read fully sharp through the card */
    backdrop-filter: blur(0) saturate(150%);
    -webkit-backdrop-filter: blur(0) saturate(150%);
    background: linear-gradient(145deg,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.30) 55%,
        rgba(255,255,255,0.42) 100%);
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow:
        0 24px 60px rgba(61,52,160,0.18),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    box-sizing: border-box;
}
@supports not (backdrop-filter: blur(6px)) {
    .lg-card { background: rgba(255,255,255,0.88); }
}

.lg-sheen-clip {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 28px;
}
.lg-sheen {
    position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
    animation: sheenSweep 7s ease-in-out infinite;
}

/* ---------- logo ---------- */
.lg-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    overflow: hidden;
    margin-bottom: 28px;
}
.lg-logo { width: 200px; flex-shrink: 0; }

/* ---------- fields ---------- */
.lg-fields { display: flex; flex-direction: column; gap: 28px; }
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-label { color: #2a2453; font-size: 15px; font-weight: 500; }
.lg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1.5px solid rgba(61,52,160,0.45);
    padding-bottom: 10px;
}
.lg-row input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #2a2453;
    font-size: 17px;
    padding: 4px 0;
}
.lg-row input.lg-password { letter-spacing: 2px; }
.lg-ico { opacity: 0.9; flex-shrink: 0; }
.lg-eye {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.9;
}
.lg-eye:hover { opacity: 1; }
.lg-error { color: #d63a5f; font-size: 13px; }
.lg-error:empty { display: none; }

/* ---------- login button ---------- */
.lg-btn {
    width: 100%;
    margin-top: 30px;
    padding: 16px 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #2fd68f 0%, #21b573 100%);
    color: #ffffff;
    font-family: 'Jost', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(33,181,115,0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lg-btn:hover  { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(33,181,115,0.55); }
.lg-btn:active { transform: translateY(0); }
.lg-btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.lg-spinner {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}