:root {
            color-scheme: light;
            --login-primary: #2455df;
            --login-primary-hover: #1d45c2;
            --login-ink: #0f172a;
            --login-muted: #64748b;
            --login-border: #dce5f0;
            --login-surface: #ffffff;
            --login-background: #f4f7fc;
        }

        *, *::before, *::after { box-sizing: border-box; }

        html, body { min-height: 100%; }

        body.admin-login-page {
            min-height: 100svh;
            margin: 0;
            background: var(--login-background);
            color: var(--login-ink);
            font-family: Inter, "Segoe UI", Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            display: flex;
            flex-direction: column;
        }

        .login-brand-bar {
            height: 66px;
            display: flex;
            align-items: center;
            background: var(--login-surface);
            border-bottom: 1px solid var(--login-border);
        }

        .login-brand-inner {
            width: min(1200px, 100%);
            margin: 0 auto;
            padding: 0 28px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .login-brand-mark {
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            background: var(--login-primary);
            color: #fff;
            font-size: 17px;
        }

        .login-brand-name {
            margin: 0;
            color: var(--login-muted);
            font-size: .88rem;
            font-weight: 800;
            letter-spacing: .09em;
        }

        .login-page-main {
            width: 100%;
            flex: 1;
            min-height: 0;
            margin: 0;
            padding: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-card {
            width: min(420px, 100%);
            justify-self: center;
            padding: clamp(30px, 4vw, 50px);
            background: var(--login-surface);
            border: 1px solid var(--login-border);
            border-radius: 24px;
            box-shadow: 0 18px 48px rgba(15, 23, 42, .075);
        }

        .login-header { margin-bottom: 32px; text-align: center; }

        .login-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: #eff5ff;
            color: var(--login-primary);
            font-size: 34px;
        }

        .login-header h1 {
            margin: 0 0 10px;
            color: var(--login-ink);
            font-size: clamp(1.65rem, 3vw, 2rem);
            font-weight: 700;
            letter-spacing: -.035em;
        }

        .login-header p {
            max-width: 440px;
            margin: 0 auto;
            color: var(--login-muted);
            font-size: .98rem;
            line-height: 1.65;
        }

        .login-error {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 0 0 22px;
            padding: 13px 15px;
            color: #b91c1c;
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 10px;
            font-size: .9rem;
            line-height: 1.5;
        }

        .login-field { margin-bottom: 26px; }

        .login-field label {
            display: block;
            margin-bottom: 10px;
            color: #26364f;
            font-size: .92rem;
            font-weight: 600;
        }

        .required-mark { color: #dc2626; }

        .login-input-wrap { position: relative; }

        .login-input-icon {
            position: absolute;
            top: 50%;
            left: 17px;
            transform: translateY(-50%);
            color: #91a2ba;
            font-size: 1rem;
            pointer-events: none;
        }

        .login-input {
            width: 100%;
            min-height: 54px;
            padding: 13px 16px 13px 48px;
            color: var(--login-ink);
            background: #f8faff;
            border: 1px solid #d5dfed;
            border-radius: 11px;
            font: inherit;
            font-size: .94rem;
            transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }

        .login-input::placeholder { color: #94a3b8; }

        .login-input:focus {
            outline: none;
            background: #fff;
            border-color: var(--login-primary);
            box-shadow: 0 0 0 4px rgba(36, 85, 223, .12);
        }

        .login-input.is-invalid,
        .login-input.is-invalid:focus {
            border-color: #dc2626;
            box-shadow: 0 0 0 4px rgba(220, 38, 38, .12);
        }
        .login-field .field-validation-message:not(:empty) {
            display: block;
            margin-top: .35rem;
            color: #b91c1c;
            font-size: .82rem;
            line-height: 1.4;
        }
        .login-field .field-validation-message:empty { display: none; }

        .login-submit {
            width: 100%;
            min-height: 58px;
            margin-top: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: 0;
            border-radius: 11px;
            background: var(--login-primary);
            color: #fff;
            font: inherit;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 5px 12px rgba(36, 85, 223, .18);
            transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
        }

        .login-submit:hover {
            background: var(--login-primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(36, 85, 223, .22);
        }

        .login-submit:focus-visible {
            outline: 3px solid rgba(36, 85, 223, .32);
            outline-offset: 3px;
        }

        @media (max-width: 900px) {
            .login-page-main {
                padding: 24px 22px;
            }

            .login-card { width: min(560px, 100%); }
        }

        @media (max-width: 520px) {
            .login-brand-bar { height: 58px; }
            .login-brand-inner { padding: 0 18px; }
            .login-brand-mark { width: 32px; height: 32px; font-size: 15px; }
            .login-brand-name { font-size: .78rem; }
            .login-page-main {
                padding: 18px 14px;
            }
            .login-card { padding: 24px 20px; border-radius: 18px; }
            .login-header { margin-bottom: 22px; }
            .login-logo { width: 62px; height: 62px; margin-bottom: 13px; font-size: 27px; }
            .login-header p { font-size: .9rem; }
            .login-field { margin-bottom: 18px; }
            .login-input { min-height: 50px; }
            .login-submit { min-height: 50px; }
        }
.admin-toast {
    position: fixed;
    z-index: 14000;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    max-width: min(24rem, calc(100vw - 2rem));
    min-height: 3.5rem;
    padding: 0.8rem 1rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #059669;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    color: #1e293b;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16), 0 3px 10px rgba(15, 23, 42, 0.06);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -0.6rem, 0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.admin-toast.is-visible { opacity: 1; transform: translateY(0); }
.admin-toast-icon { flex: 0 0 auto; color: #059669; font-size: 1.1rem; }
.admin-toast-message { overflow-wrap: anywhere; }
.admin-toast-timer { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #059669; transform-origin: left; }
.admin-toast.is-visible .admin-toast-timer { animation: admin-toast-countdown 5s linear forwards; }
.admin-toast.is-error { border-left-color: #dc2626; }
.admin-toast.is-error .admin-toast-icon, .admin-toast.is-error .admin-toast-timer { color: #dc2626; background-color: #dc2626; }
.admin-toast.is-info { border-left-color: #2563eb; }
.admin-toast.is-info .admin-toast-icon, .admin-toast.is-info .admin-toast-timer { color: #2563eb; background-color: #2563eb; }
@keyframes admin-toast-countdown { to { transform: scaleX(0); } }
.db-operation-loader { position: fixed; z-index: 13000; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(248, 250, 252, 0.58); backdrop-filter: blur(2px); }
.db-operation-loader.is-visible { display: flex; }
.db-operation-spinner { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border: 3px solid #bfdbfe; border-top-color: #2563eb; border-radius: 50%; animation: db-operation-spin 0.75s linear infinite; }
@keyframes db-operation-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .admin-toast { top: 0.75rem; right: 0.75rem; max-width: calc(100vw - 1.5rem); } }