:root { color-scheme: light; font-family: "Microsoft YaHei", system-ui, sans-serif; --green:#153f36; --orange:#dd6c37; --paper:#f5f1e9; --ink:#24312d; }
* { box-sizing: border-box; }
body { min-height:100vh; min-height:100dvh; margin:0; color:var(--ink); background:var(--paper); }
button,input { font:inherit; }
.login-shell { display:grid; grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr); min-height:100vh; min-height:100dvh; }
.intro { position:relative; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:clamp(45px,8vw,110px); color:white; background:var(--green); }
.intro::after { content:""; position:absolute; right:-130px; bottom:-160px; width:430px; height:430px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.brand-mark,.mobile-brand i { display:grid; place-items:center; width:48px; height:48px; border-radius:13px; color:var(--green); background:#f3d5b9; font:700 23px Georgia,serif; font-style:normal; }
.intro p { margin:27px 0 12px; color:#a9c0b9; font-size:10px; font-weight:700; letter-spacing:3px; }
.intro h1 { margin:0; font:700 clamp(32px,4vw,52px)/1.3 Georgia,"Microsoft YaHei",serif; letter-spacing:1px; }
.intro span { margin-top:25px; color:#afc1bc; font-size:13px; }
.login-card { align-self:center; width:min(420px,calc(100% - 48px)); margin:auto; padding:42px; border:1px solid rgba(30,63,53,.09); border-radius:20px; background:rgba(255,255,255,.86); box-shadow:0 25px 70px rgba(31,55,47,.12); backdrop-filter:blur(12px); }
.mobile-brand { display:none; }.eyebrow { margin:0 0 10px; color:var(--orange); font-size:9px; font-weight:800; letter-spacing:2.2px; }.login-card h2 { margin:0; font:700 31px Georgia,"Microsoft YaHei",serif; }.hint { margin:9px 0 28px; color:#7e8985; font-size:12px; }
form { display:grid; gap:18px; }label>span { display:block; margin-bottom:7px; color:#586762; font-size:11px; font-weight:700; }input { width:100%; height:48px; border:1px solid #d9e0dc; border-radius:10px; padding:0 13px; outline:0; color:var(--ink); background:white; }input:focus { border-color:#5d8b7d; box-shadow:0 0 0 4px rgba(64,120,101,.1); }.password-field { position:relative; }.password-field input { padding-right:62px; }.password-field button { position:absolute; top:7px; right:7px; height:34px; border:0; border-radius:7px; padding:0 10px; color:#70807a; background:#eef2f0; font-size:10px; }.submit { height:49px; border:0; border-radius:10px; color:white; background:var(--orange); font-weight:700; box-shadow:0 10px 22px rgba(221,108,55,.2); }.submit:hover { background:#c85b2b; }.submit:disabled { cursor:wait; opacity:.65; }.error { margin:-5px 0 0; border-radius:8px; padding:9px 11px; color:#a43f39; background:#f9e7e5; font-size:11px; }.login-card>small { display:block; margin-top:22px; color:#929c98; font-size:9px; text-align:center; }
@media(max-width:760px){ .login-shell{display:flex; align-items:center; padding:max(22px,env(safe-area-inset-top)) 0 max(22px,env(safe-area-inset-bottom)); background:linear-gradient(160deg,#153f36 0 32%,#f5f1e9 32% 100%)}.intro{display:none}.login-card{width:min(420px,calc(100% - 28px)); padding:28px 22px; border-radius:17px}.mobile-brand{display:flex; align-items:center; gap:10px; margin-bottom:27px}.mobile-brand i{width:37px;height:37px;border-radius:10px;font-size:18px}.mobile-brand strong{font-size:16px;letter-spacing:1px}.login-card h2{font-size:27px}.hint{margin-bottom:23px}input,.submit{height:50px}}