@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --purple: #8b459b;
    --purple-dark: #642d70;
    --navy: #4b2454;
    --ink: #2d2430;
    --muted: #6f6372;
    --surface: #f6f3f7;
    --border: #e5dce7;
}

* { box-sizing: border-box; }
body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--ink);
    background: var(--surface);
    font-family: 'Inter', Arial, sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0 0 auto;
    height: 8px;
    background: var(--purple);
}

body::after {
    content: '';
    position: fixed;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(139,69,155,.13);
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
}

.back-link {
    position: fixed;
    top: 28px;
    left: 32px;
    z-index: 3;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.back-link:hover { color: var(--purple); }

.login-shell { position: relative; z-index: 2; display: flex; justify-content: center; padding-top: 64px; padding-bottom: 40px; }
.login-shell > .row { justify-content: center !important; }
.login-card { border: 1px solid var(--border); border-top: 5px solid var(--purple); border-radius: 6px; box-shadow: 0 18px 50px rgba(75,36,84,.12); }
.login-title { display: flex; flex-direction: column; align-items: center; color: var(--navy); }
.login-title .logo { width: 150px; height: 72px; object-fit: contain; margin-bottom: 10px; }
.login-eyebrow { margin: 0 0 8px; color: var(--purple); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.login-title h1 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: 0; }
.login-intro { max-width: 360px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.form-label { color: var(--navy); font-size: 13px; font-weight: 700; }
.form-control { min-height: 46px; border-radius: 3px; border-color: var(--border); }
.form-control:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139,69,155,.12); }
.form-check-label { color: var(--muted); font-size: 13px; }
.form-check-input:checked { background-color: var(--purple); border-color: var(--purple); }
.btn { min-height: 46px; border-radius: 3px; font-size: 13px; font-weight: 700; }
.btn-primary { background: var(--purple); border-color: var(--purple); }
.btn-primary:hover, .btn-primary:focus { background: var(--purple-dark); border-color: var(--purple-dark); }
.btn-outline-secondary { color: var(--navy); border-color: var(--navy); }
.btn-outline-secondary:hover { color: #fff; background: var(--navy); border-color: var(--navy); }
.register-prompt, .recovery-link { color: var(--muted); font-size: 12px; }
.recovery-link a { color: var(--purple); font-weight: 700; }

.registration-shell { padding-top: 76px; padding-bottom: 40px; }
.registration-card { width: 100%; }
.registration-card .form-select {
    min-height: 46px;
    border-radius: 3px;
    border-color: var(--border);
    color: var(--ink);
}
.registration-card .form-select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(139,69,155,.12);
}
.registration-card .text-muted { color: var(--muted) !important; }
.registration-card .alert-danger {
    color: var(--purple-dark);
    background: #f7eff8;
    border-color: #e5dce7;
    border-radius: 3px;
    font-size: 13px;
}

.recovery-shell { padding-top: 76px; padding-bottom: 40px; }
.recovery-card { width: 100%; }
.recovery-card .login-title .logo { width: 145px; }
.recovery-alert { border-radius: 3px; font-size: 13px; line-height: 1.55; }
.recovery-card .alert-success { color: #3f654c; background: #eef7f1; border-color: #cfe4d6; }
.recovery-card .alert-danger { color: var(--purple-dark); background: #f7eff8; border-color: var(--border); }
.recovery-back-link { color: var(--purple); font-size: 13px; font-weight: 700; text-decoration: none; }
.recovery-back-link:hover { color: var(--purple-dark); text-decoration: underline; }

@media (max-width: 600px) {
    body::after { width: 260px; height: 260px; }
    .back-link { top: 22px; left: 18px; }
    .login-shell { padding: 68px 14px 28px; }
    .login-card { box-shadow: 0 10px 30px rgba(75,36,84,.10); }
}