/* Login is intentionally independent of dashboard and certificate styles. */
:root {
    color-scheme:light;
    --green:#187454;
    --ink:#183a32;
    --muted:#71817b
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:#f5f8f5;
    color:var(--ink);
    font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif
}
.login-layout {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    min-height:100vh;
    min-height:100dvh
}
.brand-panel {
    position:relative;
    overflow:hidden;
    background:#113c31;
    color:#fff;
    padding:48px 9%;
    display:flex;
    flex-direction:column
}
.brand {
    display:flex;
    gap:14px;
    align-items:center;
    color:inherit;
    text-decoration:none;
    font-size:26px;
    font-weight:700;
    letter-spacing:2px;
    z-index:1
}
.brand img {
    width:50px;
    height:50px;
    object-fit:contain;
    background:#fff;
    border-radius:14px;
    padding:7px
}
.brand-caption {
    display:block;
    font-size:11px;
    letter-spacing:3px;
    font-weight:400;
    color:#bbd9cb;
    margin-top:3px
}
.brand-copy {
    margin:auto 0;
    padding:80px 0;
    position:relative;
    z-index:1
}
.eyebrow,.login-kicker {
    font-size:11px;
    letter-spacing:2px;
    font-weight:650
}
.eyebrow {
    color:#a9cfb8
}
.brand-copy h1 {
    font-size:clamp(32px,3.2vw,52px);
    line-height:1.5;
    letter-spacing:1px;
    font-weight:600;
    margin:22px 0
}
.brand-copy p {
    font-size:15px;
    line-height:1.9;
    color:#bbd5c9
}
.brand-tags {
    display:flex;
    gap:10px;
    margin-top:32px;
    flex-wrap:wrap
}
.brand-tags span {
    border:1px solid #ffffff26;
    border-radius:30px;
    padding:8px 15px;
    font-size:12px;
    color:#d6e8df
}
.brand-panel footer {
    font-size:11px;
    color:#a6c3b4;
    letter-spacing:1px;
    z-index:1
}
.brand-art {
    position:absolute;
    width:470px;
    height:470px;
    right:-240px;
    bottom:-120px;
    transform:rotate(-30deg);
    pointer-events:none
}
.brand-art span {
    position:absolute;
    inset:0;
    border:1px solid #b8e2b72e;
    border-radius:48% 0 48% 0;
    background:linear-gradient(140deg,#7da96618,transparent)
}
.brand-art span:nth-child(2) {
    inset:60px
}
.brand-art span:nth-child(3) {
    inset:120px
}
.form-panel {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:70px 32px;
    position:relative
}
.login-card {
    width:min(380px,100%);
    animation:enter .5s ease-out
}
.login-kicker {
    color:var(--green)
}
h2 {
    font-size:32px;
    font-weight:650;
    margin:18px 0 10px;
    letter-spacing:1px
}
.intro {
    font-size:14px;
    color:var(--muted);
    line-height:1.8;
    margin-bottom:36px
}
form label {
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:10px
}
input {
    width:100%;
    height:52px;
    padding:0 16px;
    border:1px solid #d7e1da;
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    font-size:14px;
    outline:none;
    transition:border-color .18s,box-shadow .18s
}
input:focus {
    border-color:var(--green);
    box-shadow:0 0 0 4px #18745412
}
input::placeholder {
    color:#9aa9a1
}
button {
    width:100%;
    height:52px;
    border:0;
    border-radius:10px;
    background:var(--green);
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:600;
    margin-top:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    cursor:pointer;
    box-shadow:0 6px 16px #1874541c;
    transition:background .18s,transform .18s,box-shadow .18s
}
button:hover {
    background:#125d43;
    transform:translateY(-2px);
    box-shadow:0 9px 20px #18745426
}
button:active {
    transform:translateY(0)
}
button:focus-visible {
    outline:3px solid #71b899;
    outline-offset:4px
}
.access-note {
    font-size:12px;
    color:#89968e;
    margin-top:24px;
    text-align:center
}
.access-note span {
    margin-right:6px
}
.form-footer {
    position:absolute;
    bottom:30px;
    font-size:10px;
    letter-spacing:2px;
    color:#9aa69f
}
.login-error {
    background:#fff0ed;
    border:1px solid #f2d5cf;
    color:#a33b2e;
    padding:12px 14px;
    border-radius:9px;
    font-size:13px;
    line-height:1.6;
    margin-bottom:22px
}
@keyframes enter {
    from {
        opacity:0;
        transform:translateY(14px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@media(max-width:760px) {
    .login-layout {
        grid-template-columns:1fr
    }
    .brand-panel {
        padding:26px 28px;
        min-height:190px
    }
    .brand-copy {
        padding:24px 0 0
    }
    .brand-copy h1 {
        font-size:24px;
        line-height:1.4;
        margin:12px 0 0
    }
    .brand-copy h1 br {
        display:none
    }
    .brand-copy p,.brand-tags,.brand-panel footer,.eyebrow {
        display:none
    }
    .brand {
        font-size:22px
    }
    .brand img {
        width:42px;
        height:42px
    }
    .form-panel {
        padding:42px 28px 80px;
        align-items:flex-start
    }
    .form-footer {
        bottom:24px
    }
    h2 {
        font-size:28px
    }
    .intro {
        margin-bottom:26px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation:none!important;
        transition:none!important
    }
}