main.login-page { max-width: 1180px; margin: 2.5rem auto; padding: 0 1.5rem; }
.login-shell { display: grid; grid-template-columns: 1.12fr 1fr; padding: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 18px 65px #163b2912; border: 1px solid #dce6df; }
.login-visual { position: relative; padding: 3.5rem 2.75rem; background: radial-gradient(ellipse at 0% 100%, #267449 0%, transparent 65%), linear-gradient(145deg, #152e22, #1a4c32); color: white; overflow: hidden; }
.login-visual::before { content: ""; position: absolute; width: 330px; height: 330px; border: 1px solid #ffffff0d; border-radius: 50%; top: -170px; right: -130px; box-shadow: 0 0 0 45px #ffffff04, 0 0 0 90px #ffffff03; pointer-events: none; }
.login-eyebrow { display: inline-block; color: #b6e6c7; font-size: .7rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.login-visual h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.18; letter-spacing: -.035em; margin: 1.1rem 0; font-weight: 650; }
.login-visual > p { color: #bed3c6; font-size: .9rem; line-height: 1.8; max-width: 370px; }
.procurement-art { position: relative; background: #ffffff0d; border: 1px solid #ffffff22; border-radius: 16px; padding: 1.4rem; margin: 2.5rem 0 3.8rem; box-shadow: 0 15px 35px #071c1926; }
.art-topline { display: flex; align-items: center; gap: .75rem; font-size: .86rem; font-weight: 600; }
.art-topline small, .art-document small { display: block; font-size: .67rem; font-weight: 400; color: #bbd4c5; margin-top: .2rem; }
.art-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #b8e8ca1c; color: #b6e6c7; font-size: 1.4rem; }
.art-dot { height: 7px; width: 7px; border-radius: 50%; background: #87dca5; margin-left: auto; }
.art-chart { display: grid; gap: 1.1rem; margin: 1.7rem 0; }
.art-chart > div { display: grid; grid-template-columns: 65px 1fr; align-items: center; gap: .8rem; font-size: .66rem; color: #d2e5d9; }
.art-track { height: 17px; border-radius: 4px; background: #ffffff09; }
.art-track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #69b887, #a7ddba); }
.art-chart > div:nth-child(2) i { background: linear-gradient(90deg, #9edbb4, #d1efdc); }
.art-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; padding-top: .9rem; border-top: 1px solid #ffffff17; font-size: .6rem; color: #bcd4c6; }
.art-document { display: flex; gap: .65rem; align-items: center; position: absolute; bottom: -35px; right: -12px; padding: .9rem 1.1rem; background: #f5faf6; color: #274c35; border-radius: 11px; box-shadow: 0 8px 24px #061b2026; font-size: .75rem; font-weight: 600; }
.art-document small { color: #6d8073; }
.document-check { display: grid; place-items: center; height: 30px; width: 30px; border-radius: 50%; background: #e1f1e5; color: #277443; }
.login-workflow { display: flex; align-items: center; gap: .65rem; color: #c1d8c9; font-size: .65rem; }
.login-workflow i { height: 1px; background: #ffffff29; flex: 1; }
.login-page .login { max-width: none; margin: 0; padding: 3rem; box-shadow: none; align-self: center; box-sizing: border-box; min-width: 0; }
.login-page .login-logo { max-width: 215px; margin-bottom: 2.3rem; }
.login-page .login-heading { text-align: left; margin-bottom: 1.8rem; }
.login-form-eyebrow { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #698173; font-weight: 600; }
.login-heading h1 { font-size: 1.9rem; margin: .6rem 0; }
.login-page .login-heading p { font-size: .85rem; line-height: 1.65; }
.login-page .field { margin-bottom: 1.25rem; }
.login-page input { padding: .85rem .9rem; background: #fbfdfb; border-color: #d4e0d7; border-radius: 8px; }
.login-page input:focus { background: white; border-color: #70a983; }
.login-page .login button { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; margin-top: 1.7rem; }
.login-footer { text-align: center; color: #819087; font-size: .68rem; line-height: 1.7; margin: 2rem 0 0; }
@media (max-width: 850px) {
    main.login-page { max-width: 560px; margin: 1.5rem auto; }
    .login-shell { grid-template-columns: 1fr; }
    .login-visual { padding: 2rem; }
    .login-visual h2 { font-size: 1.8rem; }
    .procurement-art, .login-workflow { display: none; }
    .login-visual > p { margin-bottom: 0; max-width: none; }
    .login-page .login { padding: 2rem; }
}
@media (max-width: 420px) {
    main.login-page { padding: 0 .85rem; }
    .login-page .login, .login-visual { padding: 1.5rem; }
    .login-heading h1 { font-size: 1.65rem; }
}

.login-heading .login-title-procurement { color: #176340; }
.login-heading .login-title-supplier { color: #24558a; }
.login-switch { display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap; margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid #e4ebe7; font-size: .8rem; color: #65776d; }
.login-switch-link { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem .85rem; font-size: .8rem; font-weight: 650; border: 1px solid; border-radius: 7px; text-decoration: none; }
.login-switch-supplier { color: #24558a; background: #f1f6fc; border-color: #a9bfd9; }
.login-switch-supplier:hover { background: #e5eef9; border-color: #6389b3; }
.login-switch-procurement { color: #176340; background: #eff7f2; border-color: #accdb8; }
.login-switch-procurement:hover { background: #e2f0e7; border-color: #719c81; }