/* 登录页布局：视口居中的单卡片。共享 tokens、字段与按钮来自 ui-base / ui-components。 */
.login-page {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(ellipse 55% 50% at 50% 0%, rgb(34 211 238 / 14%), transparent 72%),
        radial-gradient(ellipse 45% 50% at 92% 94%, rgb(167 139 250 / 11%), transparent 76%),
        var(--bg-base);
}
.login-shell { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--space-8) var(--space-8) 96px; }
.login-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-main); font-size: var(--text-lg); font-weight: 650; text-decoration: none; }
.brand-caption { color: var(--text-soft); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; }
.login-panel { width: 100%; }
.login-card { position: relative; width: min(100%, 408px); margin-inline: auto; padding: var(--space-8); border: 1px solid transparent; border-radius: var(--radius-lg); background: linear-gradient(var(--surface-1), var(--surface-1)) padding-box, var(--grad-border) border-box; box-shadow: var(--shadow-overlay), 0 0 80px rgb(34 211 238 / 6%); }
@supports (backdrop-filter: blur(12px)) {
    .login-card { background: linear-gradient(var(--surface-glass), var(--surface-glass)) padding-box, var(--grad-border) border-box; backdrop-filter: blur(16px); }
}
.login-card::before { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: var(--grad-hairline); pointer-events: none; }
.login-card-header { text-align: center; }
.login-card-header .eyebrow { display: inline-flex; margin-bottom: 0; color: var(--text-main); font-family: var(--font-ui); font-size: 26px; font-weight: 650; letter-spacing: 0.08em; }
.login-card-header .eyebrow::before { width: 8px; height: 8px; background: var(--accent-cyan); box-shadow: var(--glow-sm); clip-path: none; border-radius: 2px; transform: rotate(45deg); }
.login-card-header p { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--text-soft); }
.demo-credentials { margin-top: var(--space-6); padding: var(--space-3) var(--space-4); border-left: 2px solid var(--accent-violet); background: rgb(84 68 137 / 16%); color: var(--text-sub); font-size: var(--text-xs); line-height: 1.7; }
.login-form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.password-control { position: relative; }
.password-control .input { padding-right: 64px; }
.password-toggle { position: absolute; top: 50%; right: 4px; min-height: 32px; padding: 4px 9px; transform: translateY(-50%); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--accent-blue); font-size: var(--text-xs); font-weight: 550; }
.password-toggle:hover { background: var(--surface-hover); }
.login-submit {
    position: relative;
    width: 100%;
    min-height: 48px;
    margin-top: var(--space-2);
    overflow: hidden;
    border: 0;
    background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-violet) 100%);
    color: #fff;
    font-size: var(--text-md);
    font-weight: 650;
    letter-spacing: 0.12em;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 8px 24px rgb(99 102 241 / 28%);
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), filter var(--motion-base) var(--ease-out);
}
/* 悬停时的流光扫过效果 */
.login-submit::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 28%), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--ease-out);
    pointer-events: none;
}
.login-submit .icon { width: 16px; height: 16px; stroke-width: 2.2; transition: transform var(--motion-base) var(--ease-out); }
.login-submit:hover:not(:disabled) {
    background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-violet) 100%);
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 12px 32px rgb(99 102 241 / 40%);
}
.login-submit:hover:not(:disabled)::before { left: 120%; }
.login-submit:hover:not(:disabled) .icon { transform: translateX(3px); }
.login-submit:active:not(:disabled) { transform: translateY(0); filter: brightness(0.96); box-shadow: inset 0 2px 4px rgb(0 0 0 / 22%); }
.login-submit:focus-visible { outline: 2px solid var(--accent-violet); outline-offset: 3px; }
.login-submit:disabled, .login-submit[aria-busy="true"] { background: linear-gradient(120deg, var(--brand-blue), var(--brand-violet)); color: #fff; opacity: 0.75; box-shadow: none; }
.login-footer {
    position: fixed;
    z-index: 1;
    bottom: var(--space-6);
    left: 50%;
    width: min(calc(100% - 48px), 440px);
    margin: 0;
    color: var(--text-sub);
    font-size: var(--text-xs);
    line-height: 1.6;
    text-align: center;
    transform: translateX(-50%);
    overflow-wrap: anywhere;
}
.login-footer a { color: var(--text-main); text-decoration: none; }
.login-footer a:hover { color: var(--accent-blue); }
.login-security-note { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--text-soft); font-size: var(--text-xs); }
.login-security-note :is(.icon, .fas) { width: 16px; margin-top: 2px; color: var(--accent-violet); }
.login-status-text { min-height: 1.6em; margin-top: var(--space-3); color: var(--success); font-size: var(--text-xs); }
.login-noscript { position: fixed; right: var(--space-4); bottom: var(--space-4); max-width: min(440px, calc(100% - 32px)); }
.skip-link { position: fixed; top: 8px; left: 8px; padding: 12px; background: var(--surface-2); z-index: 100; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

@media (max-width: 480px) {
    .login-shell { padding: var(--space-4) var(--space-4) 96px; }
    .banquan { bottom: var(--space-5); width: calc(100% - 32px); }
    .login-card { padding: var(--space-6); }
    .login-footer { bottom: var(--space-5); width: calc(100% - 32px); }
}
@media (max-width: 820px), (pointer: coarse) {
    .password-toggle { min-height: 40px; }
}
.banquan {
    position: fixed;
    z-index: 1;
    bottom: var(--space-6);
    left: 50%;
    width: min(calc(100% - 48px), 440px);
    margin: 0;
    color: var(--text-sub);
    font-size: var(--text-xs);
    line-height: 1.6;
    text-align: center;
    transform: translateX(-50%);
    overflow-wrap: anywhere;
}
.banquan a { color: var(--text-main); text-decoration: none; }
.banquan a:hover { color: var(--accent-blue); }