:root{--green:#174b2c;--green2:#267344;--bg:#eef5ef;--text:#17211a;--muted:#68736b;--border:#dfe8e0}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif;background:radial-gradient(circle at 75% 12%,rgba(64,144,83,.13),transparent 30%),linear-gradient(145deg,#f6faf6,#e8f2ea);color:var(--text)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(430px,100%);padding:34px;border:1px solid rgba(30,95,53,.12);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 24px 70px rgba(20,74,42,.13)}
.login-brand{display:flex;align-items:center;gap:14px}.login-brand img{width:62px;height:62px;object-fit:contain}.login-brand h1{margin:0;font-size:24px}.login-brand p{margin:2px 0 0;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.login-copy{margin:28px 0 20px}.login-copy h2{margin:0;font-size:21px}.login-copy p{margin:6px 0 0;color:var(--muted)}form{display:grid;gap:15px}label{display:grid;gap:7px;font-weight:700;font-size:13px}input{width:100%;height:44px;padding:0 13px;border:1px solid var(--border);border-radius:11px;background:#fff;font:inherit;outline:none}input:focus{border-color:#6aaa78;box-shadow:0 0 0 3px rgba(74,151,91,.12)}button{height:45px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;font:inherit;font-weight:800;cursor:pointer}button:disabled{opacity:.65;cursor:wait}.login-message{min-height:21px;color:#b63f3f;font-size:13px}footer{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);color:#8a948d;font-size:12px;text-align:center}


.login-footer{margin-top:4px;text-align:center;font-size:13px}.login-footer a{color:var(--green2);font-weight:700;text-decoration:none}.login-footer a:hover{text-decoration:underline}

/* M3.3 · align the entry pages with the operations-console visual system */
.login-shell {
    position: relative;
    isolation: isolate;
}

.login-shell::before,
.login-shell::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.login-shell::before {
    width: min(52vw, 620px);
    height: min(52vw, 620px);
    top: -28vw;
    right: -16vw;
    background: radial-gradient(circle, rgba(65, 150, 84, .17), rgba(65, 150, 84, 0) 68%);
}

.login-shell::after {
    width: min(38vw, 440px);
    height: min(38vw, 440px);
    bottom: -22vw;
    left: -13vw;
    background: radial-gradient(circle, rgba(186, 218, 191, .42), rgba(186, 218, 191, 0) 68%);
}

.login-card {
    border-color: rgba(35, 102, 55, .14);
    border-radius: 18px;
    box-shadow:
        0 22px 54px rgba(20, 68, 37, .11),
        0 1px 0 rgba(255, 255, 255, .92) inset;
}

.login-brand {
    padding-bottom: 17px;
    border-bottom: 1px solid #e5ece6;
}

.login-brand img {
    padding: 4px;
    border: 1px solid #e1ebe2;
    border-radius: 14px;
    background: #f8fbf8;
}

.login-brand p {
    color: #77857b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: none;
}

.login-copy h1,
.login-copy h2 {
    color: #203428;
    letter-spacing: -.02em;
}

.login-copy p {
    color: #728078;
    font-size: 13px;
}

.login-card input {
    border-color: #d4e0d6;
    background: #fcfdfc;
}

.login-card input:hover {
    border-color: #b8cdbb;
}

.login-card button {
    background: linear-gradient(135deg, #2b8c50 0%, #1f7040 100%);
    box-shadow: 0 9px 18px rgba(31, 112, 64, .16);
}

.login-card button:hover {
    background: linear-gradient(135deg, #247d46 0%, #176238 100%);
    box-shadow: 0 11px 22px rgba(31, 98, 56, .20);
}

/* M2.8.2.14 · login mobile safe area + minimalist product style */
@media (max-width: 720px) {
    :root {
        --login-safe-top:
            max(
                env(safe-area-inset-top),
                12px
            );
    }

    body {
        padding-top:
            var(--login-safe-top);
        background:
            linear-gradient(
                180deg,
                #f3f7f3 0%,
                #eef4ef 100%
            );
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height:
            var(--login-safe-top);
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                #edf5ef,
                #f3f7f3
            );
    }

    .login-shell {
        min-height:
            calc(
                100svh -
                var(--login-safe-top)
            );
        padding:
            18px
            max(
                14px,
                env(safe-area-inset-right)
            )
            max(
                20px,
                env(safe-area-inset-bottom)
            )
            max(
                14px,
                env(safe-area-inset-left)
            );
    }

    .login-card {
        padding: 25px 21px;
        border-color: #e0e8e1;
        border-radius: 16px;
        box-shadow:
            0 8px 28px
            rgba(28, 61, 38, .06);
    }

    .login-brand img {
        width: 52px;
        height: 52px;
    }

    .login-brand h1 {
        font-size: 21px;
    }

    .login-copy {
        margin: 23px 0 18px;
    }

    .login-copy h2 {
        font-size: 19px;
    }

    button {
        background: #247542;
        box-shadow: none;
    }
}