:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #17231f; background: #eef2ef; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 520px); overflow: hidden; transition: grid-template-columns .72s cubic-bezier(.2,.8,.2,1); }
.brand-panel { min-width: 0; background: linear-gradient(145deg, #123d34, #235f4e); color: #fff; padding: clamp(38px, 8vw, 120px); display: flex; flex-direction: column; justify-content: center; transition: transform .72s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #c4e0a6; border-radius: 50%; color: #e8f2dc; font-weight: 800; margin-bottom: 48px; }
.eyebrow { margin: 0 0 10px; color: #799e72; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.brand-panel .eyebrow { color: #c4e0a6; }
h1 { max-width: 430px; margin: 0; font-size: clamp(3rem, 6vw, 5.8rem); letter-spacing: -.06em; }
.brand-copy { max-width: 360px; margin: 22px 0 0; color: #d8e8df; font-size: 1.1rem; line-height: 1.6; }
.login-panel { align-self: center; width: min(100%, 520px); padding: clamp(32px, 7vw, 72px); transition: width .72s cubic-bezier(.2,.8,.2,1); }
.login-layout.is-authenticated { grid-template-columns: 0 minmax(360px, 1fr); }
.login-layout.is-authenticated .brand-panel { opacity: 0; pointer-events: none; transform: translateX(-110%); }
.login-layout.is-authenticated .login-panel { width: min(100%, 680px); margin-inline: auto; }
h2 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }
.hint { color: #63736b; line-height: 1.55; margin: 12px 0 30px; }
form { display: grid; gap: 9px; }
label { font-size: .9rem; font-weight: 700; margin-top: 10px; }
input { min-height: 48px; border: 1px solid #cbd6ce; border-radius: 8px; padding: 0 13px; font: inherit; }
input:focus { outline: 3px solid #c4e0a6; border-color: #276a54; }
.password-toggle { display: flex; align-items: center; gap: 9px; width: fit-content; margin-top: 5px; color: #52645a; cursor: pointer; font-size: .86rem; font-weight: 600; }
.password-toggle input { appearance: none; display: grid; place-content: center; width: 17px; min-height: 17px; height: 17px; margin: 0; padding: 0; border-radius: 4px; cursor: pointer; }
.password-toggle input::before { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); }
.password-toggle input:checked { background: #1d604c; border-color: #1d604c; }
.password-toggle input:checked::before { transform: rotate(-45deg) scale(1); }
button { min-height: 48px; border: 0; border-radius: 8px; background: #1d604c; color: #fff; cursor: pointer; font: inherit; font-weight: 800; margin-top: 20px; }
button:hover { background: #174f3e; }
button:disabled { opacity: .65; cursor: wait; }
.secondary { background: #e0e9e2; color: #173c35; }
.error { margin: 12px 0 0; border-left: 3px solid #b92828; color: #8d1c1c; padding-left: 10px; line-height: 1.4; }
.warehouse-sections { display: grid; gap: 14px; margin: 28px 0 14px; }
.warehouse-card { display: flex; align-items: center; gap: 16px; min-height: 132px; border: 1px solid #cfdbd1; border-radius: 12px; padding: 22px; color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.warehouse-card:hover, .warehouse-card:focus-visible { transform: translateY(-2px); border-color: #2d735d; box-shadow: 0 12px 28px rgba(17, 55, 43, .12); outline: none; }
.finished-card { background: linear-gradient(135deg, #eef7ee, #dcebdd); }
.dry-card { background: linear-gradient(135deg, #f7f1e7, #efe2c9); }
.card-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .72); color: #1d604c; font-size: 1.7rem; font-weight: 800; }
.dry-card .card-icon { color: #815c29; }
.card-content { display: grid; gap: 6px; flex: 1; }
.card-content strong { font-size: 1.14rem; letter-spacing: -.02em; }
.card-content span, .section-note { color: #596b61; font-size: .92rem; line-height: 1.45; }
.card-arrow { color: #1d604c; font-size: 1.5rem; }
.dry-card .card-arrow { color: #815c29; }
.section-note { margin: 0 0 18px; }
@media (max-width: 760px) { .login-layout, .login-layout.is-authenticated { grid-template-columns: 1fr; } .brand-panel { min-height: 260px; padding: 40px 28px; } .login-layout.is-authenticated .brand-panel { display: none; } .brand-mark { margin-bottom: 28px; } h1 { font-size: 3.4rem; } .login-panel { padding: 42px 28px 60px; } }
@media (prefers-reduced-motion: reduce) { .login-layout, .brand-panel, .login-panel { transition: none; } }