:root { color-scheme: dark; font-family: system-ui, "Microsoft JhengHei", sans-serif; background: #0c111c; color: #f4f5f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: radial-gradient(ellipse at 30% 10%, #152b3c 0%, transparent 55%); }
main { width: min(440px, calc(100% - 32px)); margin: 28px auto; padding: 30px; border: 1px solid #2b3b50; border-radius: 24px; background: #141e2d; box-shadow: 0 20px 60px #0004; }
header { display: flex; align-items: center; gap: 14px; }
.eyebrow { color: #79d8d4; font-size: 10px; letter-spacing: .12em; }
h1 { margin: 4px 0; font-size: 24px; }
p { color: #b7c5d9; line-height: 1.7; }
.intro { font-size: 13px; margin: 20px 0; }
label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 8px; }
input:not([type=hidden]) { width: 100%; min-height: 46px; border: 1px solid #35455e; border-radius: 10px; background: #0c1524; color: #f4f5f8; padding: 11px 13px; font: inherit; font-size: 16px; }
input::placeholder { color: #76869f; font-size: 14px; }
.password-field { position: relative; }
.password-field input { padding-right: 66px; }
.password-field button { position: absolute; right: 5px; top: 4px; min-height: 38px; border: 0; background: transparent; color: #a6bbdd; padding: 0 12px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; font: inherit; border-radius: 10px; }
.primary { width: 100%; min-height: 48px; border: 0; background: linear-gradient(100deg, #60e0d2, #8ac9ff); color: #0c2433; font-weight: 700; }
button:disabled { cursor: wait; opacity: .6; }
#login-message { font-size: 13px; min-height: 22px; margin: 13px 0; overflow-wrap: anywhere; }
#login-message.error { color: #ffb0b5; }
#captcha { margin: 16px 0; min-height: 78px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: #8ca0bd; font-size: 12px; }
.divider::before, .divider::after { content: ''; height: 1px; background: #2b3b50; flex: 1; }
a { display: block; color: #a2c7f6; text-align: center; text-decoration: none; border-radius: 10px; }
.sso { border: 1px solid #365775; padding: 13px 8px; font-size: 14px; }
aside { margin-top: 24px; padding: 14px; background: #0d1726; border-radius: 10px; color: #9baec9; font-size: 12px; line-height: 1.8; }
.renew { padding: 16px 0 0; font-size: 12px; }
:focus-visible { outline: 3px solid #79ddd6; outline-offset: 3px; }
@media (max-width: 400px) { main { padding: 22px 18px; } h1 { font-size: 22px; } }