:root {
    --wht-auth-primary: #2563eb;
    --wht-auth-primary-hover: #1d4ed8;
    --wht-auth-border: #dcdfe6;
    --wht-auth-ink: #172033;
    --wht-auth-muted: #8a94a6;
}

html, body.auth-body { width: 100%; min-height: 100%; }
body.auth-body {
    margin: 0;
    overflow-x: hidden;
    background: #f5f7fb;
    position: relative;
    color: var(--wht-auth-ink);
}
body.auth-body.auth-login-body {
    isolation: isolate;
    background: #f5f7fb;
}
.auth-login-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #f5f7fb; }
.auth-login-background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.auth-login-body .auth-page { position: relative; z-index: 1; background: transparent !important; }
.auth-page { position: relative; z-index: 1; min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; box-sizing: border-box; }
.auth-admin-page { position: relative; isolation: isolate; }
.auth-card { position: relative; z-index: 2; width: min(100%, 420px); padding: 36px; box-sizing: border-box; background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 16px 40px rgba(61, 76, 107, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.auth-brand { margin: 0 0 28px; text-align: center; }
.auth-brand h1 { margin: 0 0 6px; color: var(--wht-auth-ink); font-size: 24px; line-height: 1.35; font-weight: 650; }
.auth-brand p { margin: 0; color: var(--wht-auth-muted); font-size: 14px; }
.auth-form .layui-form-item { margin-bottom: 16px; }
.auth-input-wrap { position: relative; }
.auth-input-wrap .layui-icon { position: absolute; z-index: 1; top: 13px; left: 14px; color: #8a94a6; font-size: 17px; pointer-events: none; }
.auth-input-wrap .layui-input { box-sizing: border-box; width: 100%; height: 44px; padding-left: 42px; border-color: var(--wht-auth-border); }
.auth-input-wrap .layui-input:focus { border-color: var(--wht-auth-primary) !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, .12); }
.auth-captcha-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
.auth-captcha-image { display: block; width: 120px; height: 44px; border: 1px solid var(--wht-auth-border); cursor: pointer; object-fit: cover; }
.auth-captcha-image:focus { outline: 2px solid rgba(37, 99, 235, .35); outline-offset: 1px; }
.auth-submit { width: 100%; height: 44px; background: var(--wht-auth-primary); font-size: 15px; }
.auth-submit:hover { background: var(--wht-auth-primary-hover); }
.auth-error { margin: 0 0 18px; padding: 11px 13px; border: 1px solid #fecaca; background: #fff1f2; color: #be123c; line-height: 1.5; font-size: 13px; }
.auth-footer { margin-top: 22px; color: var(--wht-auth-muted); text-align: center; font-size: 13px; }
.auth-footer a, .auth-link, .auth-appeal { color: var(--wht-auth-primary); }
.auth-appeal { display: block; margin-top: 12px; text-align: center; font-size: 13px; }
.auth-tabs { display: flex; margin: 0 0 22px; border-bottom: 1px solid #e5e7eb; }
.auth-tab { flex: 1; padding: 10px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #667085; font-size: 14px; cursor: pointer; }
.auth-tab:hover, .auth-tab.active { color: var(--wht-auth-primary); }
.auth-tab.active { border-bottom-color: var(--wht-auth-primary); font-weight: 600; }
.auth-hint { margin: -8px 0 15px; color: var(--wht-auth-muted); font-size: 12px; }
@media (max-width: 480px) {
    .auth-page { padding: 18px 12px; }
    .auth-card { width: min(92vw, 380px); padding: 28px 20px; }
    .auth-brand { margin-bottom: 24px; }
}