:root { color-scheme: light; --ink:#132019; --green:#1d6548; --deep:#12291e; --lime:#cce66b; --paper:#f4f2ea; --muted:#718078; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Microsoft YaHei UI", "Noto Sans SC", sans-serif; }
button, input { font: inherit; }
.hidden { display:none !important; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(460px, 1.08fr) minmax(430px, .92fr); }
.login-story { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(36px,5vw,72px); color: white; background: radial-gradient(circle at 85% 18%,rgba(204,230,107,.22),transparent 31%),linear-gradient(145deg,#10261b,#1d543d 68%,#2a674d); }
.login-story::after { content:""; position:absolute; width:520px; height:520px; right:-250px; bottom:-250px; border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018); }
.login-brand { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.login-brand > span,.mobile-brand > span { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--lime); color:var(--deep); font:700 26px Georgia,serif; }
.login-brand strong { display:block; font-size:19px; letter-spacing:.08em; }.login-brand small { display:block; margin-top:4px; color:#a9bfb1; font-size:9px; letter-spacing:.18em; }
.story-copy { position:relative; z-index:1; max-width:650px; }.eyebrow,.panel-kicker { color:var(--lime); font-size:10px; font-weight:800; letter-spacing:.2em; }.story-copy h1 { margin:20px 0; font:500 clamp(38px,4.3vw,65px)/1.22 Georgia,"Microsoft YaHei",serif; letter-spacing:-.04em; }.story-copy > p:last-child { max-width:555px; color:#bdd0c3; font-size:14px; line-height:1.9; }
.story-metrics { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:28px; color:#acc1b3; font-size:10px; letter-spacing:.05em; }.story-metrics span { display:flex; align-items:center; gap:9px; }.story-metrics b { color:var(--lime); font:500 17px Georgia,serif; }
.login-panel { display:grid; place-items:center; padding:48px; background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.9),transparent 40%),var(--paper); }
#login-form { width:min(420px,100%); padding:42px 40px; background:rgba(255,255,255,.72); border:1px solid rgba(193,197,187,.75); border-radius:24px; box-shadow:0 28px 80px rgba(24,48,34,.09); backdrop-filter:blur(10px); }
.mobile-brand { display:none; }.panel-kicker { color:var(--green); }.login-panel h2 { margin:12px 0 8px; font:600 34px Georgia,"Microsoft YaHei",serif; }.panel-intro { margin:0 0 30px; color:var(--muted); font-size:12px; }
label { display:block; margin:17px 0 0; color:#43534a; font-size:11px; font-weight:800; }
input { width:100%; margin-top:8px; padding:13px 14px; border:1px solid #cfd4cd; border-radius:11px; outline:0; background:white; color:var(--ink); transition:.2s; }
input:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(29,101,72,.1); }
.password-wrap { position:relative; display:block; }.password-wrap input { padding-right:62px; }.password-wrap button { position:absolute; right:7px; top:15px; padding:7px 9px; border:0; background:transparent; color:var(--green); font-size:10px; font-weight:800; cursor:pointer; }
.login-error { min-height:20px; margin:12px 0 0; color:#ad4d3d; font-size:10px; line-height:1.5; }
.dingtalk-login { width:100%; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; margin:24px 0 4px; padding:12px 14px; border:1px solid #b8d5c8; border-radius:11px; color:#143d2c; background:#edf7f2; cursor:pointer; text-align:left; }.dingtalk-login:hover { border-color:var(--green); background:#e5f3ec; }.dingtalk-login:disabled { opacity:.65; cursor:wait; }.dingtalk-login span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#1788ff; color:#fff; font-weight:900; }.dingtalk-login strong { font-size:12px; }.dingtalk-login i { color:var(--green); font-style:normal; font-weight:900; }
.login-divider { display:flex; align-items:center; gap:10px; margin:22px 0 4px; color:#8a958e; font-size:9px; }.login-divider::before,.login-divider::after { content:""; flex:1; height:1px; background:#daddd7; }.login-divider span { white-space:nowrap; }
.login-submit { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding:14px 16px; border:0; border-radius:11px; color:white; background:var(--green); font-weight:800; cursor:pointer; box-shadow:0 12px 25px rgba(29,101,72,.18); }.login-submit:hover { background:#174f39; }.login-submit:disabled { opacity:.62; cursor:wait; }
.security-copy { margin:20px 0 0; color:#859088; font-size:9px; line-height:1.7; }
@media (max-width:900px) { .login-shell { grid-template-columns:1fr; }.login-story { display:none; }.login-panel { min-height:100vh; padding:24px; }.mobile-brand { display:flex; align-items:center; gap:12px; margin-bottom:34px; }.mobile-brand > span { width:40px; height:40px; border-radius:11px; font-size:22px; }.mobile-brand strong { font-size:17px; }.panel-kicker { margin-top:0; } }
@media (max-width:480px) { #login-form { padding:32px 24px; border-radius:18px; }.login-panel { padding:14px; }.login-panel h2 { font-size:30px; } }