:root{
    --ms-bg:#eef5f1;
    --ms-surface:#ffffff;
    --ms-surface-soft:#f8fbf9;
    --ms-text:#17231d;
    --ms-muted:#66756e;
    --ms-border:#dbe7e0;
    --ms-primary:#16a36a;
    --ms-primary-dark:#0c6e4b;
    --ms-primary-soft:#dcf8ea;
    --ms-danger:#dc2626;
    --ms-danger-soft:#fff1f2;
    --ms-success:#15803d;
    --ms-success-soft:#ecfdf3;
    --ms-shadow:0 28px 80px rgba(19,50,36,.16);
    --ms-radius:30px;
}
*{box-sizing:border-box}
html{min-height:100%}
body.ms-login-page{
    min-height:100vh;
    margin:0;
    display:grid;
    place-items:center;
    padding:34px;
    color:var(--ms-text);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 12% 18%, rgba(22,163,106,.25), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(14,116,144,.16), transparent 30%),
        linear-gradient(135deg, #eef8f2 0%, #f6fbf8 48%, #eaf2ee 100%);
}
.ms-login-shell{
    width:min(1120px,100%);
    min-height:650px;
    display:grid;
    grid-template-columns:minmax(360px,1.05fr) minmax(360px,.95fr);
    border:1px solid rgba(255,255,255,.64);
    border-radius:var(--ms-radius);
    overflow:hidden;
    background:rgba(255,255,255,.74);
    box-shadow:var(--ms-shadow);
    backdrop-filter:blur(18px);
}
.ms-login-brand-panel{
    position:relative;
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    color:#fff;
    background:
        linear-gradient(145deg, rgba(11,85,63,.98), rgba(19,124,84,.92)),
        radial-gradient(circle at top right, rgba(255,255,255,.20), transparent 35%);
}
.ms-login-brand-panel:before,
.ms-login-brand-panel:after{
    content:"";
    position:absolute;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    pointer-events:none;
}
.ms-login-brand-panel:before{width:280px;height:280px;right:-105px;top:-80px}
.ms-login-brand-panel:after{width:220px;height:220px;left:-90px;bottom:-70px;background:rgba(255,255,255,.08)}
.ms-login-brand-top,.ms-login-copy,.ms-login-feature-grid{position:relative;z-index:1}
.ms-login-brand-top{display:flex;gap:16px;align-items:center}
.ms-login-logo{
    width:58px;height:58px;border-radius:18px;
    display:grid;place-items:center;
    font-weight:900;letter-spacing:.02em;
    color:#0d5d42;background:#fff;
    box-shadow:0 16px 36px rgba(0,0,0,.18);
}
.ms-login-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.78);
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.ms-login-card .ms-login-kicker{color:var(--ms-primary-dark)}
.ms-login-brand-top h1,.ms-login-copy h2,.ms-login-card h2{margin:0}
.ms-login-brand-top h1{font-size:24px;line-height:1.1;margin-top:4px}
.ms-login-copy{max-width:520px;margin-top:80px}
.ms-login-badge{
    display:inline-flex;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    color:#fff;
    background:rgba(255,255,255,.12);
    font-size:12px;
    font-weight:800;
    margin-bottom:18px;
}
.ms-login-copy h2{font-size:42px;line-height:1.05;letter-spacing:-.04em;max-width:600px}
.ms-login-copy p{font-size:16px;line-height:1.75;color:rgba(255,255,255,.78);max-width:510px;margin:18px 0 0}
.ms-login-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:34px;
}
.ms-login-feature-grid div{
    padding:16px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:18px;
    background:rgba(255,255,255,.10);
}
.ms-login-feature-grid strong{display:block;font-size:15px;margin-bottom:4px}
.ms-login-feature-grid span{display:block;font-size:12px;color:rgba(255,255,255,.70)}
.ms-login-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:50px clamp(30px,5vw,58px);
    background:linear-gradient(180deg,#ffffff,#fbfdfc);
}
.ms-login-card-head{margin-bottom:24px}
.ms-login-card h2{font-size:34px;letter-spacing:-.035em;margin-top:8px}
.ms-login-card p{margin:9px 0 0;color:var(--ms-muted);line-height:1.6}
.ms-login-alert{
    display:grid;
    gap:3px;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid var(--ms-border);
    margin-bottom:18px;
    font-size:14px;
}
.ms-login-alert strong{font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.ms-login-alert-error{border-color:#fecdd3;background:var(--ms-danger-soft);color:#9f1239}
.ms-login-alert-success{border-color:#bbf7d0;background:var(--ms-success-soft);color:#166534}
.ms-login-form{display:grid;gap:18px}
.ms-login-field{display:grid;gap:9px}
.ms-login-field label{font-size:13px;font-weight:800;color:#26362f}
.ms-input-wrap{
    height:54px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    border:1px solid var(--ms-border);
    border-radius:18px;
    background:#fff;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ms-input-wrap:focus-within{
    border-color:rgba(22,163,106,.75);
    box-shadow:0 0 0 5px rgba(22,163,106,.11);
    transform:translateY(-1px);
}
.ms-input-icon{
    width:28px;height:28px;
    display:grid;place-items:center;
    flex:0 0 auto;
    border-radius:10px;
    color:var(--ms-primary-dark);
    background:var(--ms-primary-soft);
    font-weight:900;
    font-size:13px;
}
.ms-input-wrap input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--ms-text);
    font:inherit;
    min-width:0;
}
.ms-input-wrap input::placeholder{color:#9aa8a1}
.ms-password-toggle{
    border:0;
    background:#eef6f1;
    color:var(--ms-primary-dark);
    font-weight:900;
    font-size:12px;
    padding:8px 10px;
    border-radius:999px;
    cursor:pointer;
    transition:background .18s ease,color .18s ease;
}
.ms-password-toggle:hover{background:var(--ms-primary);color:#fff}
.ms-login-meta{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:var(--ms-muted);
    font-size:12px;
    font-weight:700;
}
.ms-login-submit{
    height:56px;
    border:0;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#fff;
    background:linear-gradient(135deg,var(--ms-primary),#0b7c59);
    box-shadow:0 18px 34px rgba(22,163,106,.28);
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ms-login-submit:hover{transform:translateY(-2px);box-shadow:0 22px 42px rgba(22,163,106,.34);filter:saturate(1.08)}
.ms-login-submit:active{transform:translateY(0)}
.ms-login-footer-note{
    margin:20px 0 0!important;
    text-align:center;
    color:#7a8982!important;
    font-size:12px;
}
@media (max-width: 920px){
    body.ms-login-page{padding:18px;place-items:start center}
    .ms-login-shell{grid-template-columns:1fr;min-height:unset}
    .ms-login-brand-panel{padding:28px;min-height:360px}
    .ms-login-copy{margin-top:45px}
    .ms-login-copy h2{font-size:32px}
    .ms-login-card{padding:32px 22px}
}
@media (max-width: 560px){
    body.ms-login-page{padding:0;background:#fff}
    .ms-login-shell{border-radius:0;border:0;box-shadow:none;min-height:100vh}
    .ms-login-brand-panel{min-height:auto;border-radius:0;padding:24px}
    .ms-login-copy{margin-top:36px}
    .ms-login-copy h2{font-size:28px}
    .ms-login-feature-grid{grid-template-columns:1fr 1fr;gap:8px}
    .ms-login-feature-grid div{padding:12px;border-radius:14px}
    .ms-login-card h2{font-size:28px}
    .ms-login-meta{flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){
    *{transition:none!important;scroll-behavior:auto!important}
}