body.creta-login-page {
    --creta-font: 'Plus Jakarta Sans', sans-serif;
    --creta-bg: #f5f8fb;
    --creta-surface: rgba(255, 255, 255, 0.82);
    --creta-surface-strong: rgba(255, 255, 255, 0.94);
    --creta-border: rgba(43, 101, 175, 0.14);
    --creta-border-strong: rgba(146, 165, 187, 0.28);
    --creta-text: #253142;
    --creta-text-soft: #5f6b7a;
    --creta-text-muted: #92a5bb;
    --creta-primary: #2B65AF;
    --creta-secondary: #137f70;
    --creta-accent-green: rgb(91, 183, 69);
    --creta-accent-green-soft: rgba(91, 183, 69, 0.12);
    --creta-accent-green-border: rgba(91, 183, 69, 0.22);
    --creta-accent-green-text: rgb(72, 155, 52);
    --creta-danger-soft: rgba(239, 68, 68, 0.08);
    margin: 0;
    min-height: 100vh;
    font-family: var(--creta-font);
    color: var(--creta-text);
    background:
        radial-gradient(circle at top left, rgba(43, 101, 175, 0.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(19, 127, 112, 0.14), transparent 28%),
        linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
}

.creta-login-blobs { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.creta-login-blob { position: absolute; border-radius: 999px; filter: blur(70px); opacity: 0.75; }
.creta-login-blob--one { width: 340px; height: 340px; top: -80px; left: -90px; background: rgba(43, 101, 175, 0.18); }
.creta-login-blob--two { width: 300px; height: 300px; right: -70px; bottom: -50px; background: rgba(19, 127, 112, 0.14); }
.creta-login-blob--three { width: 240px; height: 240px; top: 42%; left: 48%; background: rgba(184, 116, 0, 0.10); }

.creta-login-root {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.creta-login-shell {
    width: min(1280px, calc(100vw - 24px));
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--creta-border);
    background: var(--creta-surface);
    box-shadow: 0 24px 60px rgba(44, 64, 105, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.creta-login-info {
    padding: 40px 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(237, 244, 255, 0.92) 100%);
    border-right: 1px solid rgba(112, 135, 176, 0.12);
}

.creta-login-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.creta-login-brand-mark {
    min-width: 132px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(43, 101, 175, 0.16);
}
.creta-login-brand-logo { max-width: 100%; max-height: 26px; object-fit: contain; }
.creta-login-brand-text { display: flex; flex-direction: column; gap: 2px; }
.creta-login-brand-text strong { font-size: 1rem; font-weight: 800; }
.creta-login-brand-text span { font-size: 0.78rem; color: var(--creta-text-muted); }

.creta-login-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 0.8rem; border-radius: 999px;
    background: rgba(43, 101, 175, 0.08); border: 1px solid rgba(43, 101, 175, 0.12);
    color: var(--creta-primary); font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
}

.creta-login-badge--accent {
    background: var(--creta-accent-green-soft);
    border: 1px solid var(--creta-accent-green-border);
    color: var(--creta-accent-green-text);
}

.creta-login-copy h1 {
    margin: 22px 0 16px; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.08; font-weight: 800;
}
.creta-login-copy h1 .accent {
    background: var(--creta-accent-green);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.creta-login-copy p { margin: 0; line-height: 1.75; color: var(--creta-text-soft); }

.creta-login-features { display: grid; gap: 12px; margin-top: 24px; }
.creta-login-feature {
    display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 14px; border-radius: 16px;
    background: rgba(255,255,255,0.74); border: 1px solid rgba(112, 135, 176, 0.14);
}
.creta-login-feature-icon {
    width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(43, 101, 175, 0.08); color: var(--creta-primary);
}
.creta-login-feature strong { display: block; margin-bottom: 4px; }
.creta-login-feature span { font-size: 0.84rem; color: var(--creta-text-soft); line-height: 1.5; }

.creta-login-form-pane {
    padding: 34px 26px; background: var(--creta-surface-strong);
    display: flex; align-items: center; justify-content: center;
}
.creta-login-form-box { width: min(420px, 100%); }
.creta-login-eyebrow {
    margin-bottom: 10px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--creta-primary);
}
.creta-login-form-box h2 { margin: 0 0 8px; font-size: 2rem; font-weight: 800; }
.creta-login-sub { margin: 0 0 20px; color: var(--creta-text-soft); }
.creta-login-sub a { color: var(--creta-primary); font-weight: 700; text-decoration: none; }

.creta-login-form { display: grid; gap: 12px; }
.creta-login-form-section {
    margin-top: 4px; padding-top: 12px; border-top: 1px dashed rgba(146, 165, 187, 0.35);
}
.creta-login-form-section h3 {
    margin: 0 0 6px; font-size: 0.92rem; font-weight: 700; color: var(--creta-text);
}
.creta-login-form-section p {
    margin: 0 0 12px; font-size: 0.82rem; line-height: 1.5; color: var(--creta-text-muted);
}

.creta-login-field label {
    display: block; margin-bottom: 8px; font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--creta-text-muted);
}
.creta-login-input {
    width: 100%; height: 48px; padding: 0 16px; border-radius: 14px;
    border: 1px solid var(--creta-border-strong); background: rgba(255,255,255,0.9);
    font-family: var(--creta-font); font-size: 0.95rem;
}
.creta-login-input:focus {
    outline: none; border-color: rgba(43, 101, 175, 0.42);
    box-shadow: 0 0 0 4px rgba(43, 101, 175, 0.12);
}

.creta-login-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.84rem; color: var(--creta-text-soft); }
.creta-login-check input { margin-top: 4px; }

.creta-login-submit {
    width: 100%; height: 52px; border: none; border-radius: 14px;
    background: var(--creta-accent-green); color: #fff; font-weight: 800; cursor: pointer;
    box-shadow: 0 18px 28px rgba(91, 183, 69, 0.24);
    transition: box-shadow 0.2s ease, transform 0.12s ease;
}
.creta-login-submit:hover {
    box-shadow: 0 22px 30px rgba(91, 183, 69, 0.30);
}
.creta-login-submit:active {
    transform: scale(0.99);
}
.creta-login-submit:disabled { opacity: 0.85; cursor: wait; }

#retail-register-error, #retail-dashboard-error, #retail-dashboard-success {
    display: none; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; font-size: 0.88rem;
}
#retail-register-error, #retail-dashboard-error {
    background: var(--creta-danger-soft); border: 1px solid rgba(239, 68, 68, 0.22); color: #cc3a3a;
}
#retail-dashboard-success {
    background: var(--creta-accent-green-soft);
    border: 1px solid var(--creta-accent-green-border);
    color: var(--creta-accent-green-text);
}

.retail-badge {
    display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
    background: var(--creta-accent-green-soft); color: var(--creta-accent-green-text);
}

.retail-btn--primary {
    background: var(--creta-accent-green);
    box-shadow: 0 12px 22px rgba(91, 183, 69, 0.22);
}

@media (max-width: 991.98px) {
    .creta-login-shell { grid-template-columns: 1fr; }
    .creta-login-info { border-right: 0; border-bottom: 1px solid rgba(112, 135, 176, 0.12); }
}