:root { --deep: #10261f; --green: #0b6e4f; --mint: #dff4e9; --ink: #17251f; --muted: #65736d; --line: #dce5e0; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-height: 100vh; display: grid; place-items: center; padding: 28px; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink); background: radial-gradient(circle at 15% 12%, #ddf5e8 0, transparent 30%), linear-gradient(135deg, #edf4f0 0%, #f8faf9 55%, #e6f1eb 100%); }
.login-shell { width: min(920px, 100%); min-height: 530px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border: 1px solid rgba(11,110,79,.14); border-radius: 22px; background: #fff; box-shadow: 0 28px 70px rgba(16,38,31,.15); }
.login-brand { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 58px; overflow: hidden; color: #fff; background: var(--deep); }
.login-brand::before, .login-brand::after { content: ""; position: absolute; border: 1px solid rgba(140,236,191,.18); border-radius: 50%; }
.login-brand::before { width: 360px; height: 360px; right: -190px; top: -130px; }
.login-brand::after { width: 260px; height: 260px; left: -150px; bottom: -120px; }
.energy-mark { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 54px; border-radius: 17px; background: #35c77d; color: var(--deep); font-size: 30px; font-weight: 800; box-shadow: 0 12px 30px rgba(53,199,125,.25); }
.eyebrow { margin: 0 0 8px; color: #71dba6; font-size: 11px; font-weight: 750; letter-spacing: .18em; }
.login-brand h1 { margin: 0; font-size: clamp(42px, 6vw, 68px); line-height: 1; letter-spacing: -.045em; }
.intro { max-width: 330px; margin: 22px 0 0; color: #c5d7cf; font-size: 17px; }
.brand-credit { position: absolute; bottom: 28px; left: 58px; color: #92aaa0; font-size: 12px; }
.brand-credit strong { color: #fff; }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: 58px; }
.login-card h2 { margin: 0; font-size: 29px; letter-spacing: -.02em; }
.hint { margin: 10px 0 30px; color: var(--muted); }
form { display: grid; }
label { margin: 0 0 7px; font-size: 13px; font-weight: 650; }
input { width: 100%; height: 48px; margin-bottom: 19px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; outline: none; font: inherit; color: var(--ink); background: #fbfcfb; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11,110,79,.1); }
button { height: 48px; border: 0; border-radius: 10px; cursor: pointer; background: var(--green); color: #fff; font: inherit; font-weight: 700; transition: transform .15s, background .15s; }
button:hover { background: #085d43; transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .65; transform: none; }
.error { min-height: 22px; margin: -7px 0 10px; color: #b3261e; font-size: 13px; }
.setup-note { margin: 22px 0 0; padding: 10px 12px; border-radius: 8px; background: #fff5dc; color: #765411; font-size: 12px; }
.setup-note code { word-break: break-word; }
.hidden { display: none; }
@media (max-width: 720px) { body { padding: 16px; } .login-shell { grid-template-columns: 1fr; } .login-brand { min-height: 230px; padding: 34px; } .energy-mark { margin-bottom: 28px; } .brand-credit { left: auto; right: 34px; bottom: 24px; } .login-card { padding: 36px 34px 42px; } }