:root {
    --admin-bg: #eef2f7;
    --admin-primary: #2563eb;
    --admin-primary-dark: #1d4ed8;
    --admin-text: #111827;
    --admin-muted: #64748b;
    --admin-border: rgba(148, 163, 184, .28);
}

body {
    min-height: 100vh;
    color: var(--admin-text);
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .20), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(15, 23, 42, .16), transparent 32rem),
        linear-gradient(135deg, #f8fafc, var(--admin-bg));
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.login-frame {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 2rem;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 34px 90px rgba(15, 23, 42, .18);
    backdrop-filter: blur(18px);
    padding: 1rem;
}

.login-hero,
.login-card {
    border: 1px solid var(--admin-border);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, .82);
    padding: clamp(1.25rem, 4vw, 2rem);
}

.login-hero {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(circle at 90% 10%, rgba(37, 99, 235, .16), transparent 16rem),
        linear-gradient(145deg, #ffffff, #eef4ff);
}

.login-hero::after {
    content: "";
    position: absolute;
    inset: auto -4rem -5rem auto;
    width: 18rem;
    height: 18rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, .10);
}

.brand-mark {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1.1rem;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #111827, #2563eb);
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .26);
}

h1 {
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 4rem);
    line-height: .95;
    letter-spacing: -.06em;
}

.lede {
    color: var(--admin-muted);
    max-width: 520px;
}

.mini-card {
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .72);
    padding: 1rem;
}

label {
    font-weight: 800;
    font-size: .82rem;
    margin-bottom: .35rem;
}

.form-control {
    border-radius: 1rem;
    padding: .82rem .95rem;
    border-color: #dbe3ef;
}

.form-control:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .12);
}

.btn-primary {
    --bs-btn-bg: var(--admin-primary);
    --bs-btn-border-color: var(--admin-primary);
    --bs-btn-hover-bg: var(--admin-primary-dark);
    --bs-btn-hover-border-color: var(--admin-primary-dark);
    border-radius: 999px;
    font-weight: 850;
    padding: .82rem 1rem;
}

@media (max-width: 900px) {
    .login-frame {
        grid-template-columns: 1fr;
    }

    .login-hero {
        min-height: auto;
    }
}