* { box-sizing: border-box; }
body.login-page { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif; }
.login-layout { display: grid; grid-template-columns: minmax(400px, 1fr) minmax(440px, 1fr); min-height: 100vh; }
.login-intro { display: flex; flex-direction: column; background: #fff200; padding: 48px 64px; color: #171715; }
.login-intro .brand { text-decoration: none; display: inline-flex; align-self: flex-start; }
.login-intro .brand img { width: 48px; height: 48px; }
.login-intro .brand small { color: #5b5625; }
.intro-copy { margin: auto 0; padding: 64px 0 48px; }
.login-eyebrow { font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: 2px; color: #666445; }
.intro-copy .login-eyebrow { color: #615d1f; }
.intro-copy h1 { font-size: 52px; line-height: 1.4; font-weight: 600; margin: 24px 0; letter-spacing: 1px; }
.intro-copy p { font-size: 14px; line-height: 2; color: #575321; margin: 0; }
.login-workflow { display: flex; list-style: none; margin: 0; padding: 24px 0; border-top: 1px solid #d6cc22; gap: 32px; }
.login-workflow li { font-size: 12px; display: flex; align-items: center; gap: 10px; }
.login-workflow span { font-size: 11px; color: #706a25; }
.brand-tagline { font-size: 12px; line-height: 1.8; margin-top: 24px; color: #615d21; }
.login-form-region { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 48px 32px; background: #f6f6f1; }
.login-card { width: 100%; max-width: 384px; margin: auto 0; padding: 32px 0; }
.login-card h2 { font-size: 28px; line-height: 1.5; margin: 16px 0 8px; font-weight: 600; color: #252621; }
.login-subtitle { color: #74756b; font-size: 13px; line-height: 1.8; margin: 0 0 40px; }
.login-field { margin-bottom: 24px; }
.login-field label { display: block; font-size: 13px; line-height: 1.5; margin-bottom: 8px; color: #484940; }
.login-field input { width: 100%; height: 48px; border: 1px solid #d8d9ce; border-radius: 8px; background: white; padding: 12px 16px; font: inherit; font-size: 14px; color: #292a24; }
.login-field input::placeholder { color: #9d9e93; }
.login-field input:focus { border-color: #8c861f; }
#login-submit { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; margin-top: 32px; padding: 12px 20px; border: 1px solid #ddd100; border-radius: 8px; background: #fff200; color: #20211a; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#login-submit:hover:not(:disabled) { background: #f1e500; }
#login-submit:disabled { opacity: .6; cursor: wait; }
.login-error { font-size: 13px; line-height: 1.8; color: #9f3b32; background: #fff0ed; border: 1px solid #eed7d0; border-radius: 8px; padding: 12px 16px; }
.login-error[hidden] { display: none; }
.login-help { font-size: 12px; color: #85867b; line-height: 1.8; margin: 24px 0 0; }
.login-footer { font-size: 10px; letter-spacing: 1px; color: #96978c; line-height: 1.8; padding-top: 32px; }
.login-footer span { margin: 0 8px; }
@media (min-width: 1600px) { .login-intro { padding: 64px 96px; } .intro-copy h1 { font-size: 60px; } }
@media (max-width: 1000px) { .login-intro { padding: 40px 32px; } .intro-copy h1 { font-size: 44px; } .login-layout { grid-template-columns: 1fr 1fr; } .login-workflow { gap: 16px; flex-wrap: wrap; } .login-form-region { padding: 48px 32px 24px; } }
@media (max-width: 720px) { .login-layout { grid-template-columns: 1fr; } .login-intro { padding: 24px; } .intro-copy { margin: 0; padding: 40px 0 24px; } .intro-copy h1 { font-size: 32px; margin: 16px 0; } .intro-copy h1 br { display: none; } .intro-copy p { font-size: 12px; } .login-workflow { padding: 16px 0 0; gap: 24px; } .login-workflow li { font-size: 11px; gap: 8px; } .brand-tagline { display: none; } .login-form-region { min-height: 500px; padding: 32px 24px 24px; } .login-card { padding: 0; } .login-card h2 { font-size: 24px; } .login-subtitle { margin-bottom: 32px; } .login-footer { margin-top: 24px; } }