:root { color-scheme: dark; font-family: "Microsoft YaHei", Inter, Arial, sans-serif; color: #edf7f5; background: #071417; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #071417; }
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(135deg, rgba(17,75,72,.35), transparent 42%), repeating-linear-gradient(90deg, rgba(103,174,165,.035) 0 1px, transparent 1px 56px); pointer-events: none; }
.login-shell { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1.15fr) minmax(360px, .85fr); }
.brand-panel { padding: clamp(42px, 7vw, 110px); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #244044; background: rgba(7, 24, 27, .72); }
.brand-mark { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #3c7771; color: #70d7c3; background: #0c2e30; font-size: 19px; font-weight: 800; }
.eyebrow { color: #72d8c3; font-size: 12px; letter-spacing: 2px; }
h1 { margin: 18px 0; max-width: 650px; font-size: clamp(42px, 5vw, 76px); line-height: 1.08; letter-spacing: 0; }
.description { max-width: 520px; color: #9bb0b4; font-size: 17px; line-height: 1.8; }
.system-state { display: flex; align-items: center; gap: 10px; color: #a9c1c5; font-size: 13px; }
.system-state span { width: 9px; height: 9px; border-radius: 50%; background: #64d5ac; box-shadow: 0 0 14px #64d5ac; }
.form-panel { display: grid; place-items: center; padding: 32px; background: rgba(10, 28, 32, .9); }
form { width: min(410px, 100%); }
form header span { color: #72d8c3; font-size: 12px; }
h2 { margin: 8px 0; font-size: 30px; letter-spacing: 0; }
form header p, small { color: #82999e; line-height: 1.6; }
label { display: grid; gap: 8px; margin-top: 24px; color: #bed0d2; font-size: 13px; }
input { width: 100%; height: 48px; border: 1px solid #345057; border-radius: 6px; padding: 0 14px; background: #0b2024; color: #fff; outline: none; font-size: 15px; }
input:focus { border-color: #39bda5; box-shadow: 0 0 0 3px rgba(57,189,165,.13); }
button { width: 100%; height: 48px; margin: 28px 0 16px; border: 0; border-radius: 6px; background: #20a98f; color: #041310; font-weight: 700; font-size: 15px; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.error { padding: 10px 12px; margin: 16px 0 -8px; border-left: 3px solid #ff756d; background: #321a1d; color: #ffaaa4; font-size: 13px; }
@media (max-width: 800px) { .login-shell { grid-template-columns: 1fr; } .brand-panel { min-height: 290px; padding: 28px; border-right: 0; border-bottom: 1px solid #244044; } h1 { font-size: 38px; } .description { margin-bottom: 30px; } .form-panel { place-items: start center; padding: 42px 24px; } }