:root { color-scheme: light; --paper: var(--reis-canvas); --ink: var(--reis-ink); --muted: #77746d; --wood: var(--reis-primary); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.login-page { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(400px, .94fr); padding: 20px; }
.login-photo { min-height: 660px; position: relative; isolation: isolate; overflow: hidden; border-radius: 16px; background: #584737; }
.project-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 43% center; z-index: -2; }
.login-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #181b1633, transparent 35%, #171a176b 72%, #171a17c9); }
.photo-signature { position: absolute; top: 36px; left: 38px; display: flex; align-items: center; gap: 11px; font-size: 10px; font-weight: 600; letter-spacing: 2.1px; color: #fff; }
.photo-signature > span { width: 6px; height: 6px; border: 1px solid #ead6b8; border-radius: 50%; }
.photo-caption { position: absolute; bottom: 36px; left: 38px; right: 38px; color: #fff; }
.eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 1.8px; line-height: 1.6; }
.photo-caption > .eyebrow { color: #f0e0c8; }
.photo-caption h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(42px, 4.3vw, 68px); line-height: 1.07; letter-spacing: -1.5px; margin: 19px 0 30px; }
.photo-caption-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid #fff4; padding-top: 19px; font-size: 11px; color: #f4f0e8; letter-spacing: .15px; }
.photo-caption-footer > span:last-child:not(:first-child) { font-size: 9px; letter-spacing: 1.5px; }
.login-panel { display: flex; flex-direction: column; padding: 36px clamp(32px, 5vw, 90px) 14px; min-width: 0; }
.login-content { width: 100%; max-width: 360px; margin: auto; padding: 16px 0 32px; }
.login-logo { display: block; width: 106px; height: 106px; object-fit: contain; margin: 0 0 35px -6px; }
.login-header .eyebrow { color: var(--wood); margin: 0 0 12px; }
.login-header h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 38px; line-height: 1.16; font-weight: 400; letter-spacing: -1.2px; margin: 0 0 13px; }
.login-intro { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 310px; }
.login-form { margin-top: 31px; }
.login-field { margin-bottom: 20px; }
.login-field label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 500; color: #4d463e; }
.login-field input { width: 100%; min-width: 0; height: 49px; padding: 0 14px; border: 1px solid #dcd8d0; border-radius: 7px; outline: none; background: #fffdfa; color: var(--ink); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.login-field input::placeholder { color: #aaa59c; opacity: 1; }
.login-field input:hover { border-color: #bcb2a5; }
.login-field input:focus { border-color: #947050; box-shadow: 0 0 0 3px #94705016; }
.login-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fffdfa inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
.password-field { position: relative; }
.password-field input { padding-right: 49px; }
.password-toggle { position: absolute; right: 3px; top: 3px; height: 43px; width: 43px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: 5px; color: #8b8073; cursor: pointer; }
.password-toggle:hover { color: var(--wood); background: #eee6dc66; }
.eye-slash { display: none; }
.password-toggle[aria-pressed=true] .eye-slash { display: inline; }
.login-submit { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 49px; padding: 12px 17px; margin-top: 27px; border: 1px solid #41372c; border-radius: 7px; color: #fffaf3; background: #41372c; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s; }
.login-submit:hover { background: #5a4532; border-color: #5a4532; }
.login-submit:active { background: #30271f; }
button:focus-visible { outline: 2px solid #947050; outline-offset: 3px; }
.login-security { display: flex; justify-content: center; align-items: center; gap: 7px; color: #8b857c; font-size: 10px; margin: 20px 0 0; line-height: 1.5; }
.login-security svg { flex-shrink: 0; }
.login-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; color: #938b80; font-size: 9px; line-height: 1.6; padding-top: 16px; border-top: 1px solid #e6e1d9; }
.login-alert { padding: 11px 13px; border: 1px solid; border-radius: 7px; margin-top: 18px; font-size: 12px; line-height: 1.6; }
.alert-success { color: #386045; background: #edf4ed; border-color: #d5e2d4; }
.alert-warning { color: #7b5b28; background: #fbf3e4; border-color: #eadbbd; }
.alert-danger { color: #9b4134; background: #fbefeb; border-color: #ebd0c8; }
.alert-info { color: #566471; background: #edf1f4; border-color: #d7dfe5; }
@media (min-width: 1600px) { .login-content { max-width: 390px; } .login-header h1 { font-size: 42px; } }
@media (max-width: 1050px) { .login-page { grid-template-columns: minmax(0, .95fr) minmax(370px, 1fr); padding: 14px; } .login-panel { padding: 26px 32px 12px; } .photo-caption { left: 28px; right: 28px; bottom: 30px; } .photo-signature { top: 30px; left: 28px; } .login-header h1 { font-size: 34px; } }
@media (max-width: 760px) { .login-page { display: block; padding: 0; } .login-photo { display: none; } .login-panel { min-height: 100vh; min-height: 100svh; padding: 30px 27px 20px; } .login-content { max-width: 380px; padding: 12px 0 38px; } .login-logo { width: 94px; height: 94px; margin-bottom: 35px; } .login-header h1 { font-size: 35px; } .login-field input { font-size: 16px; height: 51px; } .password-toggle { height: 45px; } .login-footer { max-width: 380px; width: 100%; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }