.login-page { box-sizing: border-box; }
.login-page, .login-page * { box-sizing: border-box; }
.login-shell { position: relative; isolation: isolate; margin-inline: auto; min-width: 0; }
.login-shell > * { min-width: 0; }
.login-shell::before { content: ""; position: absolute; inset: 5% -2% 8%; z-index: -1; background: radial-gradient(ellipse at 25% 40%, #d8e9ff80, transparent 65%); pointer-events: none; }
.login-showcase { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 28px; padding: 32px; background: radial-gradient(ellipse at 85% 5%, #294a70, transparent 65%), linear-gradient(155deg, #172e4b, #0c192d); color: #f4f8ff; border: 1px solid #476080; box-shadow: 0 24px 60px -28px #142e5b80, inset 0 1px 0 #ffffff1a; }
.login-showcase::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, #ffffff07, transparent 45%); }
.login-kicker { display: flex; align-items: center; gap: 9px; color: #9bb7d5; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.login-kicker span, .login-kicker i { display: block; width: 5px; height: 5px; border-radius: 999px; background: #86c1ff; box-shadow: 0 0 12px #70b2ff; }
.login-kicker i { width: 28px; height: 1px; border-radius: 0; background: #5f83aa; box-shadow: none; }
.login-showcase h2 { margin-top: 30px; font-size: clamp(28px, 3vw, 38px); font-weight: 750; line-height: 1.35; letter-spacing: -.035em; }
.login-showcase h2 span { color: #96c8ff; }
.login-showcase-description { margin-top: 12px; color: #b5c7dc; font-size: 13px; line-height: 1.9; max-width: 340px; }
.login-artwork { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin: auto -20px; overflow: visible; }
.login-capabilities { display: flex; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid #ffffff1a; color: #c4d6e9; font-size: 12px; }
.login-capabilities span { display: flex; align-items: center; gap: 7px; }
.login-capabilities svg { width: 16px; height: 16px; color: #8dbbef; flex: none; }
.login-form-card { min-width: 0; background: #fffffff2; border: 1px solid #dfe7f1; box-shadow: 0 18px 45px -24px #15345440, inset 0 1px 0 #fff; }
.login-tabs { padding: 5px; border-radius: 14px; background: #eef3f9; }
.login-tabs [role="tab"] { color: #62728a; transition: background .2s, color .2s; }
.login-tabs [role="tab"][aria-selected="true"] { background: #fff; color: #1d5daa; box-shadow: 0 2px 6px #1d47751a; }
.login-tabs [role="tab"] { min-height: 42px; white-space: nowrap; }
.login-panels { min-height: 470px; }
.login-panels-single { min-height: 0; }
.login-panel[hidden] { display: none; }
.wechat-qr-frame { padding: 14px; border: 1px solid #e2eaf4; border-radius: 18px; background: linear-gradient(145deg, #fbfdff, #f2f6fb); }
.wechat-qr-frame iframe { display: block; width: 100%; max-width: 300px; min-height: 280px; margin: 0 auto; border: 0; }
.login-shell input:not([type="hidden"]):not([type="checkbox"]) { background: #f7f9fc; }
/* 手机号是主要操作入口，使用白色底和清晰边框，避免灰色底看起来像禁用状态。 */
.login-shell #sms-phone { background: #fff !important; border: 1px solid #d2dbe8; }
.login-shell #sms-phone:focus { background: #fff !important; border-color: #1d5daa; }
.login-shell input:focus-visible, .login-shell button:focus-visible, .login-shell a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }
.login-shell form > button { background: linear-gradient(115deg, #206bc8, #3287e7); box-shadow: 0 6px 16px -6px #206bc880; }
.login-shell form > button:hover:not(:disabled) { background: linear-gradient(115deg, #195eb4, #2876d2); }
.login-float-main { animation: login-float 7s ease-in-out infinite; }
.login-float-back { animation: login-float 8s ease-in-out -3s infinite; }
.login-float-front { animation: login-float 6s ease-in-out -2s infinite; }
@keyframes login-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
html.theme-dark .login-shell { color: #edf3fc; }
html.theme-dark .login-shell::before { background: radial-gradient(ellipse at 25% 40%, #23477340, transparent 65%); }
html.theme-dark .login-form-card { background: #192536; border-color: #34465f; box-shadow: 0 18px 45px -24px #0008; }
html.theme-dark .wechat-qr-frame { background: linear-gradient(145deg, #1c2b40, #152235); border-color: #344b68; }
html.theme-dark .login-tabs { background: #111d2d; }
html.theme-dark .login-tabs [role="tab"] { color: #a4b6cc; }
html.theme-dark .login-tabs [role="tab"][aria-selected="true"] { background: #304764; color: #e0edff; }
html.theme-dark .login-shell input:not([type="hidden"]):not([type="checkbox"]) { background: #142032; color: #edf3fc; --tw-ring-color: #415570; }
html.theme-dark .login-shell #sms-phone { background: #1b2a3d !important; border-color: #415570; }
html.theme-dark .login-shell #sms-phone:focus { background: #1b2a3d !important; border-color: #8dc7ff; }
html.theme-dark .login-shell .text-ink-500, html.theme-dark .login-shell .text-ink-400 { color: #a9bad0; }
html.theme-dark .login-shell a.text-ink-900 { color: #a8cfff; }
html.theme-dark .login-shell #sms-send { --tw-ring-color: #415570; }
@media (max-width: 1023px) { .login-shell { width: 100%; max-width: 440px; } .login-panels { min-height: 520px; } }
@media (prefers-reduced-motion: reduce) { .login-artwork g { animation: none; } .login-tabs [role="tab"] { transition: none; } }