:root { --ink:#142b2a; --muted:#70807e; --green:#087f73; --green-dark:#05675e; --mint:#e8f5f2; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; color:var(--ink); background:#f7faf9; }
button,input { font:inherit; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(430px,1.05fr) minmax(500px,.95fr); }
.brand-panel { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:10vh 9vw; color:white; background:linear-gradient(145deg,#086d65 0%,#087f73 48%,#0a9b86 100%); }
.brand-mark { position:absolute; top:54px; left:64px; display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:15px; font-size:32px; font-weight:300; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); }
.brand-copy { position:relative; z-index:1; max-width:590px; }
.eyebrow { margin:0 0 22px; font-size:12px; font-weight:700; letter-spacing:.28em; color:#aee5dc; }
.brand-copy h1 { margin:0 0 22px; font-size:clamp(38px,4.3vw,66px); line-height:1.15; letter-spacing:-.05em; }
.brand-copy>p:last-child { margin:0; font-size:18px; line-height:1.8; color:rgba(255,255,255,.75); }
.feature-row { position:absolute; z-index:1; left:9vw; right:5vw; bottom:9vh; display:flex; gap:25px; flex-wrap:wrap; }
.feature-row span { display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.78); }
.feature-row i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-style:normal; font-size:10px; background:rgba(255,255,255,.13); }
.brand-orbit { position:absolute; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.orbit-one { width:430px; height:430px; right:-160px; top:-110px; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.orbit-two { width:280px; height:280px; left:-120px; bottom:-110px; }
.form-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px; background:radial-gradient(circle at 80% 5%,#e7f4f1,transparent 28%),#f8faf9; }
.login-card { width:100%; max-width:430px; }
.mobile-brand { display:none; }
.form-heading { margin-bottom:35px; }
.form-heading p { margin:0 0 8px; color:var(--green); font-size:13px; font-weight:700; letter-spacing:.08em; }
.form-heading h2 { margin:0 0 10px; font-size:34px; letter-spacing:-.03em; }
.form-heading span { font-size:14px; color:var(--muted); }
.alert { margin-bottom:20px; padding:12px 15px; border-radius:10px; color:#a73f3f; font-size:13px; background:#fff0f0; border:1px solid #f6d2d2; }
.field { display:block; margin-bottom:20px; }
.field>span { display:block; margin-bottom:9px; font-size:13px; font-weight:700; }
.input-wrap { position:relative; }
.input-wrap svg { position:absolute; top:50%; left:15px; width:19px; height:19px; transform:translateY(-50%); fill:none; stroke:#8a9997; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.input-wrap input { width:100%; height:52px; padding:0 16px 0 46px; border:1px solid #dce5e3; border-radius:12px; outline:none; background:#fff; transition:.2s; }
.input-wrap input:focus { border-color:#43aa9d; box-shadow:0 0 0 4px rgba(8,127,115,.09); }
.remember { display:flex; align-items:center; gap:8px; width:max-content; margin:4px 0 24px; color:#5f706e; font-size:13px; }
.remember input { accent-color:var(--green); }
.login-button { width:100%; height:52px; border:0; border-radius:12px; color:white; background:var(--green); font-weight:700; cursor:pointer; box-shadow:0 12px 24px rgba(8,127,115,.2); transition:.2s; }
.login-button:hover { background:var(--green-dark); transform:translateY(-1px); }
.login-button span { margin-left:8px; }
.demo-box { margin-top:30px; padding-top:22px; border-top:1px solid #e3eae8; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.demo-box>div { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.demo-box strong { font-size:13px; }
.demo-box small { color:#93a09e; }
.demo-box button { padding:12px; border:1px solid #dfe9e6; border-radius:10px; text-align:left; cursor:pointer; background:white; }
.demo-box button:hover { border-color:#80c5bc; background:#f2faf8; }
.demo-box button b,.demo-box button span { display:block; }
.demo-box button b { margin-bottom:5px; color:var(--green); font-size:12px; }
.demo-box button span { color:#697976; font-size:11px; }
.form-panel footer { position:absolute; bottom:25px; color:#a1adaa; font-size:11px; }
@media (max-width:900px) {
  .login-shell { display:block; }
  .brand-panel { display:none; }
  .form-panel { min-height:100vh; padding:32px 22px 70px; }
  .mobile-brand { display:flex; align-items:center; gap:10px; margin-bottom:64px; color:var(--green); font-weight:700; }
  .mobile-brand span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:white; background:var(--green); font-size:24px; font-weight:300; }
  .form-heading h2 { font-size:30px; }
  .form-panel footer { position:static; margin-top:50px; }
}