:root {
    --login-accent: #9b452d;
    --login-accent-dark: #7d3825;
    --login-deep: #35251f;
    --login-text: #4f443f;
    --login-muted: #80736d;
    --login-line: #e6ddd5;
    --login-cream: #f4ede4;
    --login-white: #fffdfb;
}

* {box-sizing: border-box}
html, body {min-height: 100%}
body.login-page {margin: 0;color: var(--login-text);font-family: Arial, sans-serif;background: var(--login-cream)}
button, input {font: inherit}

.login-page:before, .login-page:after {position: fixed;z-index: 0;width: 420px;height: 420px;border-radius: 50%;content: "";filter: blur(2px);pointer-events: none}
.login-page:before {top: -210px;right: -150px;background: rgba(175, 107, 68, .14)}
.login-page:after {bottom: -250px;left: -130px;background: rgba(98, 70, 55, .1)}
.login-main {position: relative;z-index: 1;display: grid;min-height: 100vh;padding: 32px;place-items: center}
.login-card {display: grid;grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.1fr);width: min(980px, 100%);min-height: 610px;overflow: hidden;border: 1px solid rgba(83, 59, 47, .1);border-radius: 28px;background: var(--login-white);box-shadow: 0 28px 80px rgba(66, 43, 32, .16)}

.login-brand {position: relative;display: flex;overflow: hidden;padding: 54px;flex-direction: column;justify-content: space-between;color: #fff;background: linear-gradient(145deg, #3b2922, #6e3c2c 58%, #9b5136)}
.login-brand:before, .login-brand:after {position: absolute;border: 1px solid rgba(255, 255, 255, .13);border-radius: 50%;content: ""}
.login-brand:before {right: -130px;bottom: 30px;width: 360px;height: 360px;box-shadow: 0 0 0 45px rgba(255, 255, 255, .025), 0 0 0 90px rgba(255, 255, 255, .02)}
.login-brand:after {right: 52px;bottom: 132px;width: 62px;height: 62px;background: rgba(255, 255, 255, .05)}
.login-brand-content, .login-brand-note {position: relative;z-index: 1}
.login-kicker {display: inline-flex;align-items: center;gap: 10px;color: #e8c8b7;font-size: 12px;font-weight: 700;letter-spacing: 1.6px;text-transform: uppercase}
.login-kicker:before {width: 28px;height: 1px;background: #d7a98f;content: ""}
.login-brand h1 {max-width: 420px;margin: 80px 0 20px;color: #fff;font-family: Georgia, serif;font-size: clamp(36px, 4vw, 54px);font-weight: 500;line-height: 1.1;letter-spacing: -.8px}
.login-brand p {max-width: 360px;margin: 0;color: rgba(255, 255, 255, .72);font-size: 15px;line-height: 1.7}
.login-brand-note {display: flex;align-items: center;gap: 10px;color: rgba(255, 255, 255, .72);font-size: 12px}
.login-brand-note span {width: 8px;height: 8px;border: 2px solid rgba(255, 255, 255, .6);border-radius: 50%;box-shadow: 0 0 0 4px rgba(255, 255, 255, .08)}

.login-form-panel {display: flex;padding: 52px 64px 34px;flex-direction: column;background: var(--login-white)}
.login-header {display: flex;margin-bottom: 42px;align-items: center;gap: 18px}
.login-logo {width: 80px;height: 80px;border-radius: 18px;object-fit: contain;background: #fff;box-shadow: 0 8px 20px rgba(73, 47, 35, .08)}
.login-header h2 {margin: 0 0 6px;color: var(--login-deep);font-size: 25px;line-height: 1.2}
.login-header p {margin: 0;color: var(--login-muted);font-size: 14px}
.login-mobile-kicker {display: none}

.login-field {margin-bottom: 21px}
.login-field label {display: block;margin-bottom: 9px;color: var(--login-deep);font-size: 13px;font-weight: 700}
.login-input-wrap {position: relative;display: flex;height: 52px;align-items: center}
.login-input-wrap > svg {position: absolute;left: 16px;width: 19px;height: 19px;fill: none;stroke: #9a8d86;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round;pointer-events: none}
.login-input-wrap input {width: 100%;height: 100%;padding: 0 58px 0 48px;outline: 0;border: 1px solid var(--login-line);border-radius: 13px;color: var(--login-deep);background: #fff;transition: border-color .2s, box-shadow .2s, background .2s}
.login-input-wrap input::placeholder {color: #aaa09b}
.login-input-wrap input:hover {border-color: #cfc1b7}
.login-input-wrap input:focus {border-color: var(--login-accent);background: #fffdfb;box-shadow: 0 0 0 4px rgba(155, 69, 45, .1)}
.login-input-action {position: absolute;right: 8px;height: 36px;padding: 0 10px;border: 0;border-radius: 9px;color: var(--login-accent);font-size: 12px;font-weight: 700;background: transparent;cursor: pointer}
.login-input-action:hover {background: #f7eee9}

.login-options {display: flex;margin: 2px 0 23px;align-items: center;justify-content: space-between;gap: 12px}
.login-options small {color: #9b918c;font-size: 11px}
.login-checkbox {display: inline-flex;align-items: center;gap: 9px;color: #665b56;font-size: 13px;cursor: pointer;user-select: none}
.login-checkbox input {position: absolute;opacity: 0;pointer-events: none}
.login-checkbox span {position: relative;width: 18px;height: 18px;border: 1px solid #cdbfb6;border-radius: 5px;background: #fff;transition: .2s}
.login-checkbox input:checked + span {border-color: var(--login-accent);background: var(--login-accent)}
.login-checkbox input:checked + span:after {position: absolute;top: 2px;left: 5px;width: 5px;height: 9px;border: solid #fff;border-width: 0 2px 2px 0;content: "";transform: rotate(45deg)}
.login-checkbox input:focus-visible + span {box-shadow: 0 0 0 4px rgba(155, 69, 45, .12)}

.login-message {display: none;margin: -7px 0 16px;padding: 11px 13px;border: 1px solid #efc5bd;border-radius: 10px;color: #a13a2d;font-size: 13px;line-height: 1.4;background: #fff4f1}
.login-message.is-visible {display: block}
.login-message.is-pending {border-color: #efd9ad;color: #865c16;background: #fff8e8}
.login-submit {position: relative;display: flex;width: 100%;height: 52px;border: 0;border-radius: 13px;align-items: center;justify-content: center;color: #fff;font-weight: 700;background: linear-gradient(135deg, var(--login-accent), var(--login-accent-dark));box-shadow: 0 12px 22px rgba(125, 56, 37, .2);cursor: pointer;transition: transform .2s, box-shadow .2s, opacity .2s}
.login-submit:not(:disabled):hover {transform: translateY(-1px);box-shadow: 0 15px 28px rgba(125, 56, 37, .25)}
.login-submit:not(:disabled):active {transform: translateY(0)}
.login-submit:disabled {opacity: .72;cursor: wait}
.login-submit i {display: none;width: 20px;height: 20px;flex: 0 0 20px;border: 2px solid rgba(255, 255, 255, .35);border-top-color: #fff;border-radius: 50%;animation: login-spin .8s linear infinite;transform: translateZ(0);will-change: transform}
.login-submit.is-loading span {display: none}
.login-submit.is-loading i {display: block}
.login-footer {margin-top: auto;padding-top: 32px;color: #9b918c;font-size: 11px;line-height: 1.5;text-align: center}

@keyframes login-spin {from {transform: translateZ(0) rotate(0)} to {transform: translateZ(0) rotate(360deg)}}

@media (max-width: 820px) {
    .login-main {padding: 20px}
    .login-card {grid-template-columns: 1fr;width: min(480px, 100%);min-height: 0;border-radius: 24px}
    .login-brand {display: none}
    .login-form-panel {min-height: 590px;padding: 38px 34px 28px}
    .login-mobile-kicker {display: block;margin-bottom: 5px;color: var(--login-accent);font-size: 10px;font-weight: 700;letter-spacing: 1px;text-transform: uppercase}
}

@media (max-width: 480px) {
    .login-main {padding: 12px}
    .login-card {border-radius: 20px}
    .login-form-panel {min-height: calc(100vh - 24px);padding: 30px 22px 22px}
    .login-header {margin-bottom: 36px;gap: 14px}
    .login-logo {width: 58px;height: 58px;border-radius: 15px}
    .login-header h2 {font-size: 21px}
    .login-options small {display: none}
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {scroll-behavior: auto !important;animation-duration: .01ms !important;transition-duration: .01ms !important}
}