#auth-login, #auth-login *, #auth-login *::before, #auth-login *::after { box-sizing: border-box; }
#auth-login { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); min-height: 100vh; min-height: 100dvh; background: #191510; color: #fff7ed; font-family: 'DM Sans', sans-serif; }
#auth-login a { text-decoration: none; }
#auth-login .auth-login__visual { position: relative; isolation: isolate; min-height: 680px; overflow: hidden; background: #000 url('../img/auth/login.jpg') center center / cover no-repeat; }
#auth-login .auth-login__visual::before { position: absolute; inset: 0; z-index: -1; content: ''; background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.18) 39%, rgba(0,0,0,.88) 100%), linear-gradient(90deg, rgba(0,0,0,.38), transparent 75%); }
#auth-login .auth-login__visual-inner { display: flex; flex-direction: column; width: min(100% - 80px, 780px); min-height: 100%; margin: 0 auto; }
#auth-login .auth-login__nav { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
#auth-login .auth-login__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .1em; line-height: 1; }
#auth-login .auth-login__brand img { width: 50px; height: 50px; object-fit: contain; }
#auth-login .auth-login__brand small { display: block; margin-top: 5px; color: #ef7900; font-size: 10px; font-weight: 800; letter-spacing: .32em; }
#auth-login .auth-login__back { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
#auth-login .auth-login__back span { font-size: 20px; }
#auth-login .auth-login__back:hover, #auth-login .auth-login__back:focus-visible { color: #ef7900; }
#auth-login .auth-login__intro { max-width: 650px; margin: auto 0 80px; padding-top: 100px; }
#auth-login .auth-login__eyebrow { margin: 0 0 18px; color: #ef7900; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
#auth-login .auth-login__intro h1 { margin: 0; color: #fff7ed; font: 800 clamp(42px, 4.3vw, 68px)/1.06 'Bricolage Grotesque', sans-serif; letter-spacing: -.05em; }
#auth-login .auth-login__intro h1 em { color: #ef7900; font-style: normal; }
#auth-login .auth-login__intro > p:last-child { max-width: 460px; margin: 22px 0 0; color: #dfd8d1; font-size: 16px; line-height: 1.65; }
#auth-login .auth-login__visual-caption { margin: 0 0 30px; color: #d2c8bd; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
#auth-login .auth-login__visual-caption span { margin: 0 7px; color: #ef7900; }
#auth-login .auth-login__panel { display: flex; align-items: center; justify-content: center; padding: 72px 48px; }
#auth-login .auth-login__card { width: min(100%, 460px); padding: 42px; border: 1px solid #493322; border-radius: 8px; background: #0d0b09; box-shadow: 0 24px 70px rgba(0,0,0,.24); }
#auth-login .auth-login__card h2 { display: block; margin: 0; padding: 0; border: 0; color: #fff7ed; font: 800 42px/1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.045em; text-transform: none; }
#auth-login .auth-login__lead { margin: 13px 0 30px; color: #aaa29a; font-size: 14px; line-height: 1.6; }
#auth-login .auth-login__notice { margin-bottom: 22px; padding: 13px 15px; border: 1px solid #6b4a30; border-radius: 5px; background: #23180f; color: #fff7ed; font-size: 13px; }
#auth-login .auth-login__field { margin-bottom: 22px; }
#auth-login .auth-login__field label { display: block; margin: 0 0 9px; color: #fff7ed; font-size: 13px; font-weight: 700; }
#auth-login .auth-login__field-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#auth-login .auth-login__field-heading a { color: #ef7900; font-size: 12px; font-weight: 700; }
#auth-login .auth-login__field-heading a:hover, #auth-login .auth-login__field-heading a:focus-visible { color: #ffa343; text-decoration: underline; }
#auth-login .auth-login__field input { display: block; width: 100%; min-height: 52px; padding: 12px 15px; border: 1px solid #6b4a30; border-radius: 5px; outline: 0; background: #191510; color: #fff7ed; font: 500 15px 'DM Sans', sans-serif; }
#auth-login .auth-login__field input::placeholder { color: #8f867e; }
#auth-login .auth-login__field input:focus { border-color: #ef7900; box-shadow: 0 0 0 3px rgba(239,121,0,.18); }
#auth-login .auth-login__field input[aria-invalid="true"] { border-color: #ff9d83; }
#auth-login .auth-login__error { margin: 8px 0 0; color: #ffb09a; font-size: 12px; line-height: 1.45; }
#auth-login .auth-login__remember { display: inline-flex; align-items: center; gap: 11px; margin: 0 0 27px; color: #c8c1ba; font-size: 13px; cursor: pointer; }
#auth-login .auth-login__remember input { width: 17px; height: 17px; margin: 0; accent-color: #ef7900; cursor: pointer; }
#auth-login .auth-login__submit { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 54px; padding: 0 19px; border: 0; border-radius: 5px; background: #ef7900; color: #000; font: 800 14px 'DM Sans', sans-serif; cursor: pointer; transition: background .2s, transform .2s; }
#auth-login .auth-login__submit span { font-size: 22px; font-weight: 400; }
#auth-login .auth-login__submit:hover { background: #ffa343; transform: translateY(-2px); }
#auth-login .auth-login__help { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid #493322; color: #aaa29a; font-size: 12px; text-align: center; }
#auth-login .auth-login__help a { color: #fff7ed; font-weight: 700; }
#auth-login .auth-login__help a:hover, #auth-login .auth-login__help a:focus-visible { color: #ef7900; }
#auth-login :focus-visible { outline: 3px solid #ef7900; outline-offset: 3px; }

@media (max-width: 1000px) {
    #auth-login { grid-template-columns: minmax(0, 1fr) minmax(390px, 1fr); }
    #auth-login .auth-login__visual-inner { width: min(100% - 48px, 780px); }
    #auth-login .auth-login__panel { padding: 48px 28px; }
    #auth-login .auth-login__card { padding: 32px; }
    #auth-login .auth-login__back { font-size: 0; }
    #auth-login .auth-login__back span { font-size: 23px; }
}

@media (max-width: 760px) {
    #auth-login { display: block; }
    #auth-login .auth-login__visual { min-height: 310px; background-position: center 48%; }
    #auth-login .auth-login__visual-inner { min-height: 310px; }
    #auth-login .auth-login__nav { padding: 18px 0; }
    #auth-login .auth-login__brand { font-size: 14px; }
    #auth-login .auth-login__brand img { width: 40px; height: 40px; }
    #auth-login .auth-login__brand small { font-size: 8px; }
    #auth-login .auth-login__back { font-size: 12px; }
    #auth-login .auth-login__back span { font-size: 18px; }
    #auth-login .auth-login__intro { margin: auto 0 20px; padding-top: 35px; }
    #auth-login .auth-login__intro h1 { max-width: 480px; font-size: clamp(31px, 7vw, 44px); }
    #auth-login .auth-login__intro > p:last-child, #auth-login .auth-login__visual-caption { display: none; }
    #auth-login .auth-login__panel { padding: 28px 24px 60px; }
    #auth-login .auth-login__card { width: min(100%, 520px); }
}

@media (max-width: 480px) {
    #auth-login .auth-login__visual-inner { width: min(100% - 36px, 780px); }
    #auth-login .auth-login__visual, #auth-login .auth-login__visual-inner { min-height: 260px; }
    #auth-login .auth-login__intro { padding-top: 18px; }
    #auth-login .auth-login__intro h1 { font-size: 31px; }
    #auth-login .auth-login__panel { padding: 20px 16px 48px; }
    #auth-login .auth-login__card { padding: 28px 22px; }
    #auth-login .auth-login__card h2 { font-size: 35px; }
}