:root {
    --erp-primary-ink: #9A6B3A;
    --erp-primary-line: #D9B98F;
    --login-green: #2B2119;
    --login-green-soft: #3A2D22;
    --login-orange: #D7A978;
    --login-orange-hover: #D7A978;
    --login-text: #2A221B;
    --login-muted: #7a857f;
    --login-border: #e6dfd6;
    --login-warm: #F6EBDD;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    padding: 0;
    color: var(--login-text);
    background: var(--login-warm);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.login-page { display: grid; min-height: 100vh; grid-template-columns: minmax(420px, 46%) 1fr; }
.login-story {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    min-height: 100vh;
    padding: clamp(34px, 5vw, 76px);
    color: #fff;
    background:
        radial-gradient(circle at 86% 82%, rgba(215,169,120,.22) 0 1px, transparent 2px) 0 0 / 22px 22px,
        linear-gradient(145deg, #2B2119 0%, #2B2119 66%, #3A2D22 100%);
}
.login-story:before,
.login-story:after { position: absolute; content: ""; pointer-events: none; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.login-story:before { right: -18vw; bottom: -18vw; width: 46vw; height: 46vw; }
.login-story:after { right: -10vw; bottom: -10vw; width: 29vw; height: 29vw; border-color: rgba(217,185,143,.28); }
.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.login-brand > span,
.login-mobile-mark { display: grid; width: 46px; height: 46px; place-items: center; color: #2A1C0E; background: linear-gradient(145deg,#D7A978,#D7A978); border-radius: 13px; box-shadow: 0 10px 25px rgba(0,0,0,.16); font-size: 22px; font-weight: 700; }
.login-brand > div { display: flex; flex-direction: column; gap: 3px; }
.login-brand b { font-size: 19px; letter-spacing: .5px; }
.login-brand small { color: #99aea6; font-size: 11px; letter-spacing: 1px; }
.login-story-copy { position: relative; z-index: 1; max-width: 590px; margin: auto 0; padding: 70px 0; }
.login-eyebrow { margin: 0 0 26px; color: #9A6B3A; font-size: 11px; font-weight: 700; letter-spacing: 3px; }
.login-story h1 { margin: 0; color: #fff; font-family: "Songti SC", SimSun, serif; font-size: clamp(48px, 5.2vw, 78px); font-weight: 500; line-height: 1.22; letter-spacing: 2px; }
.login-slogan { margin: 31px 0 0; color: #9A6B3A; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: 2px; }
.login-divider { width: 42px; height: 3px; margin: 32px 0 22px; background: var(--login-orange); border-radius: 3px; }
.login-description { max-width: 430px; margin: 0; color: #91a69e; font-size: 13px; line-height: 1.8; }
.login-copyright { position: relative; z-index: 1; margin: 0; color: #708a80; font-size: 11px; }

.login-panel { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 46px; background: #faf7f2; }
.login-layout { position: relative; top: auto; left: auto; z-index: 3; width: min(430px, 100%); margin: 0; }
.login-layout .top { width: 100%; height: auto; margin: 0 0 30px; color: var(--login-text); text-align: left; text-shadow: none; }
.login-layout .top:before { display: none; }
.login-layout .top > p { margin: 0 0 10px; color: var(--login-orange); font-size: 13px; font-weight: 700; letter-spacing: .8px; }
.login-layout .top h2 { height: auto; margin: 0; color: var(--login-text); font-size: 30px; font-weight: 720; line-height: 1.35; letter-spacing: -.6px; }
.login-layout .top h6 { height: auto; margin: 9px 0 0; color: var(--login-muted); font-size: 14px; font-weight: 400; line-height: 1.6; }
.login-mobile-mark { display: none; margin-bottom: 24px; }

#form_login { width: 100%; padding: 30px; background: rgba(255,255,255,.92); border: 1px solid var(--login-border); border-radius: 16px; box-shadow: 0 22px 55px rgba(44,37,30,.08); }
.lock-holder { display: flex; flex-direction: column; width: 100%; gap: 20px; }
.lock-holder .form-group { float: none; width: 100%; }
.lock-holder .form-group label { position: static; display: block; height: auto; margin: 0 0 8px; padding: 0; color: #46534c; border: 0; font-size: 13px; font-weight: 650; line-height: 20px; }
.login-input-wrap { position: relative; }
.login-user-icon,
.login-lock-icon { position: absolute; top: 50%; left: 15px; z-index: 2; width: 15px; height: 15px; transform: translateY(-50%); color: #9aa39e; }
.login-user-icon:before { position: absolute; top: 0; left: 4px; width: 7px; height: 7px; content: ""; border: 1.7px solid currentColor; border-radius: 50%; }
.login-user-icon:after { position: absolute; right: 1px; bottom: 0; left: 1px; height: 6px; content: ""; border: 1.7px solid currentColor; border-bottom: 0; border-radius: 9px 9px 0 0; }
.login-lock-icon:before { position: absolute; top: 0; left: 3px; width: 8px; height: 7px; content: ""; border: 1.7px solid currentColor; border-bottom: 0; border-radius: 7px 7px 0 0; }
.login-lock-icon:after { position: absolute; right: 1px; bottom: 0; left: 1px; height: 9px; content: ""; border: 1.7px solid currentColor; border-radius: 3px; }
.lock-holder input.input-text { width: 100%; height: 48px; padding: 0 45px 0 43px; color: var(--login-text); background: #fbfaf8; border: 1px solid var(--login-border); border-radius: 10px; box-shadow: none; text-shadow: none; font-size: 14px; transition: border-color .18s, box-shadow .18s, background .18s; }
.lock-holder input.input-text::placeholder { color: #a8afa9; }
.lock-holder input.input-text:focus { background: #fff; border-color: #D9B98F; box-shadow: 0 0 0 4px rgba(215,169,120,.09); }
.login-input-wrap:focus-within > i { color: var(--login-orange); }
.password-toggle { position: absolute; top: 50%; right: 13px; z-index: 3; width: 24px; height: 24px; padding: 0; transform: translateY(-50%); background: transparent; border: 0; cursor: pointer; }
.password-toggle:before { position: absolute; top: 7px; left: 3px; width: 16px; height: 10px; content: ""; border: 1.5px solid #98a19c; border-radius: 50% / 60%; }
.password-toggle:after { position: absolute; top: 10px; left: 9px; width: 4px; height: 4px; content: ""; background: #98a19c; border-radius: 50%; }
.password-toggle.is-visible:before { border-color: var(--login-orange); }
.password-toggle.is-visible:after { background: var(--login-orange); }
.avatar { display: none; }
.submit { margin-top: 25px; text-align: left; }
.submit span { display: block; }
.submit .input-button { width: 100%; height: 48px; margin: 0; color: #fff; background: var(--login-orange); border: 1px solid var(--login-orange); border-radius: 10px; box-shadow: 0 9px 22px rgba(215,169,120,.2); text-shadow: none; cursor: pointer; font-size: 14px; font-weight: 650; transition: .18s ease; }
.submit .input-button:hover { background: var(--login-orange-hover); box-shadow: 0 11px 26px rgba(215,169,120,.27); transform: translateY(-1px); }
.submit .input-button:active { box-shadow: none; transform: translateY(0); }
.submit2 { margin-top: 24px; }
.submit2 .progress { width: 100%; background: #F6EBDD; }
.progress-bar-success { background: var(--login-orange); }
.login-security { margin: 20px 0 0; color: #9aa29d; text-align: center; font-size: 11px; }
.login-security i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; background: #4ba688; border-radius: 50%; }

@media (max-width: 900px) {
    .login-page { grid-template-columns: 1fr; }
    .login-story { display: none; }
    .login-panel { padding: 32px 22px; }
    .login-mobile-mark { display: grid; }
}
@media (max-width: 520px) {
    .login-panel { align-items: flex-start; padding-top: 12vh; }
    .login-layout .top { margin-bottom: 23px; }
    .login-layout .top h2 { font-size: 26px; }
    #form_login { padding: 24px 20px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}