.auth-api-page { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 28px; color: #fff; background: #101827 url('../public/auth-mountains.png') center / cover fixed; }
.auth-api-page::before { position: absolute; inset: 0; content: ''; background: linear-gradient(120deg, rgba(7, 13, 24, .84), rgba(11, 21, 36, .51) 52%, rgba(7, 12, 23, .78)); }
.auth-api-shell { position: relative; z-index: 1; width: min(1080px, 100%); min-height: 650px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 1fr); overflow: hidden; border: 1px solid rgba(255, 255, 255, .17); border-radius: 22px; background: rgba(12, 20, 34, .67); box-shadow: 0 30px 90px rgba(0, 0, 0, .35); backdrop-filter: blur(12px); }
.auth-showcase { min-height: 650px; display: flex; flex-direction: column; justify-content: space-between; padding: 55px 58px 35px; border-right: 1px solid rgba(255, 255, 255, .11); background: linear-gradient(145deg, rgba(18, 30, 49, .61), rgba(8, 15, 27, .16)); }
.auth-showcase-brand .logo { color: #fff; font-size: 24px; }
.auth-showcase-brand .logo img { width: 34px; height: 34px; }
.auth-showcase-copy { margin: auto 0; padding: 68px 0 85px; }
.auth-eyebrow { color: #ff866b; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.auth-showcase-copy h1 { max-width: 380px; margin: 14px 0 10px; color: #fff; font-size: clamp(38px, 5vw, 63px); line-height: 1.02; letter-spacing: -.065em; }
.auth-showcase-copy > p { margin: 0; color: #bec9d8; font-size: 16px; }
.auth-features { display: grid; gap: 15px; margin-top: 46px; color: #d7deea; font-size: 12px; }
.auth-features div { display: flex; align-items: center; gap: 11px; }
.feature-check { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .23); border-radius: 50%; color: #ff8064; background: rgba(255, 255, 255, .06); font-size: 11px; font-weight: 800; }
.auth-version { color: #7f8ca2; font-size: 10px; }
.auth-panel { display: flex; flex-direction: column; padding: 27px 31px; }
.auth-panel-top { display: flex; align-items: center; justify-content: flex-end; gap: 20px; color: #aab7c9; font-size: 11px; }
.auth-panel-top .language-switcher { color: #dce4ee; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
.auth-panel-top .language-switcher:hover { color: #fff; border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .11); }
.auth-panel-top .auth-switch { color: #ff947d; }
.auth-panel-top .auth-switch:hover { color: #ffb09d; }
.auth-api-card { width: min(100%, 470px); margin: auto; padding: 34px 38px 27px; border-color: rgba(255, 255, 255, .13); border-radius: 17px; background: rgba(32, 46, 66, .9); box-shadow: 0 22px 48px rgba(0, 0, 0, .2); }
.auth-api-card .auth-status-icon { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 19px; border: 1px solid rgba(255, 126, 99, .48); border-radius: 50%; color: #ff8267; background: rgba(255, 105, 74, .12); font-size: 14px; font-weight: 800; }
.auth-api-card h2 { margin: 0; color: #fff; font-size: 26px; letter-spacing: -.045em; }
.auth-api-card > p { margin: 10px 0 24px; color: #aab7c9; text-align: left; line-height: 1.55; }
.oauth-actions { display: grid; gap: 9px; }
.oauth-button { min-height: 45px; display: flex; align-items: center; gap: 11px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; color: #fff; font-size: 12px; font-weight: 700; transition: transform .2s ease, filter .2s ease, border-color .2s ease; }
.oauth-button:hover { transform: translateY(-1px); filter: brightness(1.07); border-color: rgba(255, 255, 255, .35); }
.oauth-google { background: #ff6845; }
.oauth-github { background: #151f30; }
.oauth-mark { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 6px; color: #ff6845; background: #fff; font-size: 13px; font-weight: 800; }
.oauth-mark-github { color: #fff; background: rgba(255, 255, 255, .12); font-size: 9px; }
.oauth-arrow { margin-left: auto; color: rgba(255, 255, 255, .75); font-size: 16px; }
.auth-or { display: flex; align-items: center; gap: 11px; margin: 21px 0 18px; color: #7f8da3; font-size: 10px; }
.auth-or::before, .auth-or::after { flex: 1; height: 1px; content: ''; background: rgba(255, 255, 255, .12); }
.auth-api-card form { gap: 13px; }
.auth-api-card label { color: #c2ccda; }
.auth-api-card input[type="email"], .auth-api-card input[type="password"], .auth-api-card input[type="text"] { height: 43px; border-color: rgba(255, 255, 255, .14); color: #fff; background: rgba(7, 14, 25, .42); }
.auth-api-card input:focus { border-color: #ff8065; box-shadow: 0 0 0 3px rgba(255, 105, 74, .14); }
.auth-api-card input::placeholder { color: #75849a; }
.auth-api-card .forgot-link, .auth-api-card .checkbox-label a { color: #ff947d; }
.auth-api-card .checkbox-label { color: #aebaca; }
.auth-api-card .checkbox-label input { accent-color: #ff6845; }
.auth-api-card .auth-submit { min-height: 45px; margin-top: 4px; border-color: #ff6845; background: #ff6845; }
.auth-api-card .auth-submit:hover { background: #f75a38; }
.auth-api-card .auth-submit span { margin-left: auto; font-size: 16px; }
.auth-api-card .auth-bottom { margin-top: 19px !important; color: #8997aa; font-size: 11px; }
.auth-api-card .auth-bottom a { color: #ff947d; }
.auth-api-note { display: block; margin-top: 22px; color: #718096; text-align: center; font-size: 9px; line-height: 1.45; }
.auth-api-card .server-message-error { margin-bottom: 17px; color: #ffd9d1; border-color: rgba(255, 104, 69, .42); background: rgba(140, 39, 24, .28); }
@media (max-width: 820px) { .auth-api-page { padding: 16px; place-items: start center; overflow: auto; }.auth-api-shell { grid-template-columns: 1fr; margin: auto 0; }.auth-showcase { min-height: 310px; padding: 30px 28px 24px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .11); }.auth-showcase-copy { padding: 38px 0 20px; }.auth-showcase-copy h1 { font-size: 42px; }.auth-features { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 27px; font-size: 10px; }.auth-features div { align-items: flex-start; }.auth-features .feature-check { flex: 0 0 auto; }.auth-panel { padding: 20px 14px 25px; }.auth-api-card { margin-top: 28px; padding: 28px 22px 23px; } }
@media (max-width: 500px) { .auth-api-page { padding: 0; }.auth-api-shell { width: 100%; min-height: 100vh; border: 0; border-radius: 0; }.auth-showcase { min-height: 280px; }.auth-showcase-copy h1 { font-size: 36px; }.auth-features { grid-template-columns: 1fr; gap: 10px; }.auth-panel-top { gap: 10px; font-size: 10px; }.auth-panel-top > span { max-width: 170px; text-align: right; }.auth-api-card { width: 100%; border-radius: 14px; } }