:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif; color: #1d1d1f; background: #f5f5f7; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100dvh; margin: 0; background: radial-gradient(circle at 78% 20%, #e9f4ff 0, transparent 30%), #f5f5f7; }
.login-shell { display: grid; min-height: 100dvh; grid-template-rows: auto 1fr auto; width: min(100%, 1280px); margin: auto; padding: 28px clamp(24px, 6vw, 88px); }
.brand { display: inline-flex; align-items: center; gap: 9px; width: max-content; color: #1d1d1f; text-decoration: none; font-size: 16px; }
.login-brand-logo { display: block; width: 28px; height: 28px; border-radius: 8px; background: #fff; object-fit: contain; }
.login-card { align-self: center; width: min(100%, 420px); margin: 32px auto 64px; padding: 44px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 18px; background: rgba(255, 255, 255, .84); box-shadow: 0 18px 46px rgba(0, 0, 0, .08); backdrop-filter: blur(18px) saturate(150%); }
.eyebrow { margin: 0 0 11px; color: #6e6e73; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
h1 { margin: 0; font-size: 34px; letter-spacing: 0; }
.lede { margin: 12px 0 30px; color: #6e6e73; font-size: 15px; line-height: 1.55; }
form { display: grid; gap: 17px; }
label { display: grid; gap: 7px; color: #424245; font-size: 13px; font-weight: 600; }
input { width: 100%; min-height: 46px; border: 1px solid #d2d2d7; border-radius: 10px; padding: 0 13px; outline: none; color: #1d1d1f; background: #fff; font: inherit; transition: border-color .18s, box-shadow .18s; }
input:focus { border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0, 113, 227, .14); }
.captcha-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; }
.captcha-row input { min-width: 0; letter-spacing: .09em; text-transform: uppercase; }
.captcha-image-button { display: grid; min-height: 46px; margin: 0; overflow: hidden; border: 1px solid #d2d2d7; border-radius: 10px; padding: 0; background: #f5f8fc; }
.captcha-image-button:hover { border-color: #0071e3; background: #f5f8fc; }
.captcha-image-button img { width: 100%; height: 46px; object-fit: cover; }
button { min-height: 46px; margin-top: 8px; border: 1px solid #0071e3; border-radius: 999px; color: #fff; background: #0071e3; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; transition: background .18s, transform .18s; }
button:hover { background: #0077ed; }
button:active { transform: scale(.985); }
button:disabled { cursor: wait; opacity: .65; }
.form-error { margin: -4px 0 0; color: #d70015; font-size: 13px; line-height: 1.45; }
.hint, .footnote { color: #86868b; font-size: 12px; line-height: 1.55; }
.hint { margin: 24px 0 0; text-align: center; }
.footnote { margin: 0; text-align: center; }
@media (max-width: 540px) { .login-shell { padding: 22px; } .login-card { margin-block: 28px; padding: 32px 24px; border-radius: 16px; } h1 { font-size: 30px; } }