@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --login-canvas: #f7f5f1;
    --login-paper: #fffefd;
    --login-ink: #292f2b;
    --login-muted: #626b64;
    --login-border: #e6e2dc;
    --login-accent: #46aef5;
    --login-accent-dark: #2486c5;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--login-canvas); color: var(--login-ink); font-family: 'DM Sans', 'Segoe UI', sans-serif; font-size: 15px; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid rgba(70, 174, 245, .55); outline-offset: 3px; }
.login-shell { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(480px, .9fr); min-height: 100vh; }
.login-visual { background: #c8e8fb; color: #fff; min-height: 100vh; overflow: hidden; position: relative; }
.login-visual-image { background: radial-gradient(ellipse at 23% 26%, rgba(255, 255, 255, .88), transparent 36%), radial-gradient(ellipse at 82% 22%, rgba(234, 245, 253, .82), transparent 39%), radial-gradient(ellipse at 81% 83%, rgba(70, 174, 245, .25), transparent 42%), linear-gradient(135deg, #f5fbff 0%, #c8e8fb 48%, #8dcdf5 100%); inset: 0; position: absolute; }
.login-visual-wash { background: linear-gradient(180deg, rgba(28, 83, 122, .02) 0%, rgba(28, 83, 122, .08) 37%, rgba(20, 66, 98, .68) 100%); inset: 0; position: absolute; }
.login-brand { display: block; left: 45px; position: absolute; top: 28px; z-index: 1; }
.login-brand img { display: block; height: auto; max-width: min(170px, 100%); object-fit: contain; width: 170px; }
.login-visual-copy { bottom: 14%; left: clamp(36px, 7vw, 100px); max-width: 560px; position: absolute; right: 40px; z-index: 1; }
.login-kicker { color: var(--login-accent-dark); display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; margin: 0 0 11px; }
.login-visual-copy .login-kicker { color: #eaf5fd; }
.login-visual-copy h1 { color: #fff; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(50px, 6.5vw, 84px); font-weight: 500; letter-spacing: -.025em; line-height: .93; margin: 0 0 20px; }
.login-visual-copy p { color: rgba(255, 255, 255, .85); font-size: 16px; line-height: 1.7; margin: 0; }
.login-visual-caption { bottom: 33px; color: rgba(255, 255, 255, .72); font-size: 9px; font-weight: 600; letter-spacing: .15em; position: absolute; right: 38px; z-index: 1; }
.login-visual-caption span { padding: 0 5px; }
.login-panel { align-items: center; background: var(--login-canvas); display: flex; justify-content: center; min-height: 100vh; padding: 55px clamp(35px, 7vw, 105px); }
.login-card { max-width: 440px; width: 100%; }
.login-mobile-brand { display: none; }
.login-card h2 { color: var(--login-ink); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 43px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 9px; }
.login-intro { color: var(--login-muted); font-size: 14px; margin: 0 0 31px; }
.login-field { margin-bottom: 20px; }
.login-field > label { color: #414942; display: block; font-size: 12px; font-weight: 700; margin: 0 0 8px; }
.login-field input { background: var(--login-paper); border: 1px solid var(--login-border); border-radius: 10px; color: var(--login-ink); height: 52px; outline: 0; padding: 0 14px; transition: border-color 180ms ease, box-shadow 180ms ease; width: 100%; }
.login-field input::placeholder { color: #737a73; }
.login-field input:focus { border-color: var(--login-accent); box-shadow: 0 0 0 3px rgba(70, 174, 245, .18); }
.login-field input.is-invalid { border-color: #b6574d; }
.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 65px; }
.login-password-toggle { background: transparent; border: 0; border-radius: 7px; color: var(--login-accent-dark); font-size: 12px; font-weight: 700; height: 36px; padding: 0 9px; position: absolute; right: 8px; top: 8px; }
.login-password-toggle:hover { background: #eaf5fd; }
.login-field-error { color: #a33d34; display: block; font-size: 11px; margin-top: 6px; }
.login-alert { border: 1px solid transparent; border-radius: 9px; font-size: 12px; margin: 0 0 18px; padding: 12px 14px; }
.login-alert.alert-danger, .login-alert.alert-error { background: #fbefed; border-color: #f1d6d2; color: #873c35; }
.login-alert.alert-success { background: #eaf5fd; border-color: #d7ebfa; color: #226e9e; }
.login-alert.alert-warning { background: #faf4e5; border-color: #f0e2be; color: #715b2f; }
.login-submit { align-items: center; background: var(--login-accent); border: 1px solid var(--login-accent); border-radius: 10px; color: #fff; display: flex; font-size: 14px; font-weight: 700; height: 51px; justify-content: space-between; margin-top: 27px; padding: 0 17px; transition: background 180ms ease, transform 180ms ease; width: 100%; }
.login-submit:hover { background: var(--login-accent-dark); transform: translateY(-1px); }
.login-submit span { font-size: 18px; font-weight: 400; }
.login-register { color: var(--login-muted); font-size: 12px; margin: 23px 0 0; text-align: center; }
.login-register a { color: var(--login-accent-dark); font-weight: 700; text-decoration: none; }
.login-register a:hover { text-decoration: underline; }
.login-security { align-items: center; border-top: 1px solid var(--login-border); color: #68716a; display: flex; font-size: 11px; gap: 8px; justify-content: center; margin: 43px 0 0; padding-top: 19px; }
.login-security svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 15px; }

@media (max-width: 900px) {
    .login-shell { grid-template-columns: minmax(300px, .85fr) minmax(430px, 1fr); }
    .login-brand { left: 32px; }
    .login-panel { padding-left: 38px; padding-right: 38px; }
}
@media (max-width: 700px) {
    .login-shell { display: block; }
    .login-visual { display: none; }
    .login-panel { min-height: 100vh; padding: 36px 23px; }
    .login-card { max-width: 440px; }
    .login-mobile-brand { margin-bottom: 43px; }
    .login-mobile-brand { display: block; }
    .login-mobile-brand img { display: block; height: auto; max-width: min(170px, 100%); object-fit: contain; width: 170px; }
    .login-card h2 { font-size: 39px; }
    .login-security { margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}