:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: #181818; background: #f7f8fa; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, 43%) 1fr; }
.brand-panel { position: relative; overflow: hidden; padding: 42px 54px; color: #fff; background: linear-gradient(145deg, #ff7a00 0%, #f4511e 58%, #d93615 100%); }
.brand-panel::before, .brand-panel::after { content: ""; position: absolute; border: 1px solid #ffffff2e; border-radius: 50%; }
.brand-panel::before { width: 540px; height: 540px; right: -260px; top: -170px; }
.brand-panel::after { width: 390px; height: 390px; left: -230px; bottom: -180px; }
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 650; letter-spacing: 1px; }
.brand-mark { width: 31px; height: 25px; display: inline-block; position: relative; border: 4px solid currentColor; border-left-color: transparent; border-right-color: transparent; }
.brand-mark::before, .brand-mark::after, .brand-mark i { content: ""; position: absolute; width: 8px; height: 8px; background: currentColor; }
.brand-mark::before { left: -3px; top: 5px; }.brand-mark::after { right: -3px; top: 5px; }.brand-mark i { left: 8px; top: 5px; }
.brand-content { position: relative; z-index: 1; max-width: 520px; margin-top: min(21vh, 190px); }
.overline { margin: 0 0 14px; font-size: 12px; letter-spacing: 3px; color: #fff9; }
.brand-content h1 { margin: 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: 1px; }
.brand-content > p:not(.overline) { max-width: 440px; margin-top: 24px; color: #fffbd4; font-size: 16px; line-height: 1.9; }
.energy-graphic { position: relative; width: 360px; height: 150px; margin-top: 48px; opacity: .68; }
.sun { position: absolute; width: 54px; height: 54px; border: 2px solid #fff; border-radius: 50%; right: 20px; top: 0; box-shadow: 0 0 45px #fff8; }
.grid { position: absolute; bottom: 0; width: 126px; height: 72px; border: 2px solid #fff; transform: skewX(-24deg); background: repeating-linear-gradient(90deg, transparent 0 29px, #ffffff80 30px 31px), repeating-linear-gradient(0deg, transparent 0 21px, #ffffff80 22px 23px); }
.grid-one { left: 5px; }.grid-two { left: 118px; }.grid-three { left: 231px; }
.brand-footer { position: absolute; z-index: 1; left: 54px; bottom: 35px; margin: 0; color: #ffffffa6; font-size: 12px; }
.login-main { display: grid; place-items: center; padding: 48px; }
.login-card { width: min(420px, 100%); padding: 45px 44px 38px; background: #fff; border: 1px solid #e8eaed; border-radius: 4px; box-shadow: 0 14px 45px #1f273314; }
.mobile-brand { display: none; color: #ff6a00; font-weight: 650; align-items: center; gap: 10px; margin-bottom: 30px; }
.welcome { margin: 0 0 7px; color: #ff6a00; font-size: 13px; font-weight: 600; }
h2 { margin: 0; font-size: 28px; font-weight: 600; }
.hint { margin: 12px 0 30px; color: #7a8493; }
.login-error { margin: -12px 0 20px; padding: 10px 12px; color: #cf1322; background: #fff2f0; border: 1px solid #ffccc7; border-radius: 3px; font-size: 13px; }
label { display: block; margin: 18px 0 8px; color: #3d4651; font-size: 13px; }
.input-wrap { height: 46px; display: flex; align-items: center; border: 1px solid #d9d9d9; border-radius: 3px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.input-wrap:focus-within { border-color: #ff6a00; box-shadow: 0 0 0 2px #ff6a001a; }
.input-wrap span { width: 44px; color: #a8afb8; font-size: 12px; text-align: center; border-right: 1px solid #eceef1; }
input { min-width: 0; flex: 1; height: 100%; padding: 0 13px; border: 0; outline: 0; font: inherit; }
input::placeholder { color: #bdc2ca; }
button { width: 100%; height: 46px; margin-top: 28px; border: 0; border-radius: 3px; color: #fff; background: #ff6a00; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px #ff6a0033; }
button:hover { background: #e85d00; }
button:focus-visible { outline: 3px solid #ff6a0040; outline-offset: 2px; }
.support { margin: 24px 0 0; color: #a0a7b1; font-size: 12px; text-align: center; }
@media (max-width: 820px) { .login-layout { display: block; }.brand-panel { display: none; }.login-main { min-height: 100vh; padding: 24px; }.login-card { padding: 36px 28px; }.mobile-brand { display: flex; } }