body.login-card-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 36px 20px;
    color: #fff;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(151, 26, 68, .58), transparent 48%),
        linear-gradient(135deg, #4d0a25 0%, #700d31 52%, #510a27 100%);
    font-family: 'DM Sans', system-ui, sans-serif;
}

.login-card {
    width: min(100%, 440px);
    min-height: 600px;
    padding: 34px 36px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(255, 220, 230, .32);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    box-shadow: 0 24px 80px rgba(20, 0, 10, .26), inset 0 1px rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
}

.login-card-seal { width: 116px; height: 116px; object-fit: contain; border-radius: 50%; margin: 0 0 18px; filter: drop-shadow(0 4px 12px #21000c55); }
.login-card-motto { margin: 0 0 12px; color: #f5dce5; font-size: .72rem; font-weight: 800; letter-spacing: .19em; text-align: center; }
.login-card h1 { margin: 0; color: #fff; font-size: 1.8rem; letter-spacing: -.035em; text-align: center; }
.login-card-school { margin: 5px 0 26px; color: #f2dce5; font-size: .94rem; text-align: center; }
.login-card-form { width: 100%; }
.login-card-field { min-height: 54px; margin: 0 0 16px; display: flex; align-items: center; gap: 13px; padding: 0 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(70, 0, 25, .48); box-shadow: inset 0 1px 3px #24000d35; }
.login-card-field:focus-within { border-color: rgba(255, 194, 212, .68); box-shadow: 0 0 0 3px rgba(255, 180, 205, .12); }
.login-card-field svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: #e8c8d4; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-card-field input { display: block; flex: 1 1 auto; width: 0; min-width: 0; max-width: 100%; height: 50px; margin: 0; padding: 0; border: 0; outline: 0; appearance: none; background: transparent; box-shadow: none; color: #fff; font-size: .9rem; }
.login-card-field input:focus { border: 0; box-shadow: none; }
.login-card-field input::placeholder { color: #ead3dc; opacity: .86; }
.login-card-field input:-webkit-autofill,
.login-card-field input:-webkit-autofill:hover,
.login-card-field input:-webkit-autofill:focus,
.login-card-field input:-webkit-autofill:active { -webkit-text-fill-color: #fff !important; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #64102f inset !important; box-shadow: 0 0 0 1000px #64102f inset !important; transition: background-color 99999s ease-out 0s; }
.login-card-field input:autofill { color: #fff; box-shadow: 0 0 0 1000px #64102f inset; }
.login-password-toggle { flex: 0 0 auto; margin: 0; padding: 8px 0 8px 8px; border: 0; background: transparent; color: #f5dce5; font-size: .78rem; }
.login-password-toggle:hover { transform: none; background: transparent; box-shadow: none; color: #fff; }
.login-card-access { margin: 0 0 18px; color: #f4dce5; font-size: .78rem; }
.login-card-access span { margin-right: 7px; font-size: 1rem; }
.login-card-submit { width: 100%; min-height: 53px; justify-content: space-between; padding: 0 17px; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(100deg, #a50f27, #e00019); box-shadow: 0 8px 18px rgba(50,0,14,.2); }
.login-card-submit:hover { background: linear-gradient(100deg, #b90e2b, #f10b25); }
.login-card-submit span { font-size: 1.2rem; }
.login-card-help { margin: 20px 0 22px; color: #f0d5df; font-size: .78rem; text-align: center; }
.login-card-footer { width: 100%; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); color: #e8c8d4; font-size: .76rem; text-align: center; }
.login-card .alert { width: 100%; margin: 0 0 16px; }
.login-card .error { color: #8c1329; }

@media (max-width: 520px) {
    body.login-card-page { padding: 18px 16px; }
    .login-card { min-height: 0; padding: 28px 24px 20px; border-radius: 24px; }
    .login-card-seal { width: 98px; height: 98px; margin-bottom: 15px; }
    .login-card h1 { font-size: 1.65rem; }
    .login-card-school { margin-bottom: 22px; }
    .login-card-help { margin: 18px 0; }
}

@media (prefers-reduced-motion: reduce) { .login-card-page *, .login-card-page *::before, .login-card-page *::after { transition: none !important; } }