:root {
    color-scheme:light;
    --bg-main:#f7fafb; --bg-card:#fff; --text-main:#152a37; --text-muted:#566b78;
    --border:#dbe5e9; --accent-blue:#096d62; --accent-hover:#075c53;
    --auth-soft:#e4f4ef; --auth-button:#0c7067; --shadow:#132c4014;
    --auth-danger:#b94141; --auth-danger-bg:#fff5f4; --auth-danger-border:#eed6d3;
}
:root[data-theme=dark] {
    color-scheme:dark;
    --bg-main:#10181f; --bg-card:#18242e; --text-main:#eef5f8; --text-muted:#a9becb;
    --border:#30434f; --accent-blue:#66dbc6; --accent-hover:#8ae6d5;
    --auth-soft:#203d38; --shadow:#00000035;
    --auth-danger:#ffabab; --auth-danger-bg:#2d2025; --auth-danger-border:#5a3b42;
}
.auth-page {margin:0; background:var(--bg-main); color:var(--text-main); font-family:Inter,system-ui,-apple-system,sans-serif; line-height:1.5;}
.auth-page * {box-sizing:border-box;}
.auth-page [hidden] {display:none!important;}
.auth-page h1, .auth-page h2, .auth-page p {margin:0;}
.auth-page a {color:inherit; text-decoration:none;}
.auth-page button, .auth-page input {font-family:inherit;}
.auth-page button {cursor:pointer;}
.auth-page svg {width:20px; height:20px; flex-shrink:0;}
.auth-page a:focus-visible, .auth-page button:focus-visible {outline:3px solid var(--accent-blue); outline-offset:4px;}
.auth-wrap {width:calc(100% - 72px); max-width:1120px; margin:auto;}
.auth-shell {min-height:100vh; display:flex; flex-direction:column;}
.auth-nav {min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--border);}
.auth-brand {display:flex; align-items:center; gap:9px; font-size:23px; font-weight:800; letter-spacing:-1px; flex-shrink:0;}
.auth-brand em {color:var(--accent-blue); font-style:normal;}
.auth-logo {display:grid; place-items:center; width:32px; height:35px; border-radius:9px; background:var(--auth-button); color:#fff; font-size:22px; transform:rotate(-5deg);}
.auth-nav-actions {display:flex; align-items:center; gap:22px;}
.auth-nav-link {font-size:12px; font-weight:600; color:var(--accent-blue)!important;}
.auth-icon-button {display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--bg-card); color:var(--text-muted); font-size:16px; flex-shrink:0;}
.auth-icon-button:hover {background:var(--auth-soft); color:var(--accent-blue); border-color:var(--accent-blue);}
.auth-layout {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:80px; align-items:center; flex:1; padding:52px 0 60px;}
.auth-story {min-width:0; background:radial-gradient(ellipse at 25% 35%,color-mix(in srgb,var(--auth-soft) 70%,transparent),transparent 65%);}
.auth-tag {display:block; font-size:10px; font-weight:650; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent-blue);}
.auth-story h2 {font-size:clamp(34px,4vw,48px); line-height:1.12; font-weight:750; letter-spacing:-1.9px; margin:20px 0;}
.auth-story h2 span {color:var(--accent-blue);}
.auth-story > p {max-width:410px; font-size:14px; line-height:1.85; color:var(--text-muted);}
.auth-modes {display:flex; flex-wrap:wrap; gap:9px; margin-top:25px;}
.auth-modes > span {display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg-card); font-size:11px; font-weight:600;}
.auth-modes svg {width:15px; height:15px; color:var(--accent-blue);}
.auth-note {display:flex; align-items:flex-start; gap:12px; max-width:400px; padding:18px; margin-top:28px; border:1px solid var(--border); border-radius:13px; background:var(--bg-card);}
.auth-note-icon {display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:9px; background:var(--auth-soft); color:var(--accent-blue);}
.auth-note-icon svg {width:17px; height:17px;}
.auth-note strong {display:block; font-size:12px; line-height:1.6; font-weight:600;}
.auth-note p {font-size:11px; line-height:1.75; color:var(--text-muted); margin-top:5px;}
.auth-story .auth-free-note {font-size:10px; margin-top:15px;}
.auth-path {display:grid; gap:17px; margin-top:30px;}
.auth-path > div {display:flex; align-items:center; gap:14px;}
.auth-path span {display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--auth-soft); color:var(--accent-blue); font-size:11px; font-weight:650; flex-shrink:0;}
.auth-path p {font-size:12px; color:var(--text-muted); line-height:1.7;}
.auth-card {min-width:0; padding:32px; border:1px solid var(--border); border-radius:18px; background:var(--bg-card); box-shadow:0 20px 65px var(--shadow);}
.auth-card-icon {display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--auth-soft); color:var(--accent-blue); margin-bottom:18px;}
.auth-card h1 {font-size:27px; font-weight:700; line-height:1.3; letter-spacing:-.9px;}
.auth-description {font-size:12px; line-height:1.8; color:var(--text-muted); margin-top:8px!important; margin-bottom:23px!important;}
.auth-google {display:flex; align-items:center; justify-content:center; gap:11px; min-height:46px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-card); color:var(--text-main); font-size:13px; font-weight:600;}
.auth-google svg {width:20px; height:20px;}
.auth-google:hover {background:var(--bg-main); border-color:var(--text-muted);}
.auth-divider {display:flex; align-items:center; gap:13px; margin:20px 0; color:var(--text-muted); font-size:10px;}
.auth-divider::before, .auth-divider::after {content:''; flex:1; height:1px; background:var(--border);}
.auth-field {margin-bottom:17px;}
.auth-field label {display:block; margin-bottom:8px; color:var(--text-main); font-size:12px; font-weight:600;}
.auth-field input {display:block; width:100%; min-height:46px; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--bg-main); color:var(--text-main); font-size:16px;}
.auth-field input::placeholder {color:var(--text-muted); opacity:.85; font-size:13px;}
.auth-field input:focus-visible {outline:2px solid var(--accent-blue); outline-offset:2px; border-color:var(--accent-blue);}
.auth-field small {display:block; font-size:10px; margin-top:7px; color:var(--text-muted);}
.auth-password-field {position:relative;}
.auth-password-field input {padding-right:49px;}
.auth-password-toggle {position:absolute; right:3px; top:3px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--text-muted);}
.auth-password-toggle svg {width:18px; height:18px;}
.auth-password-toggle:hover {color:var(--accent-blue); background:var(--auth-soft);}
.auth-password-toggle[aria-pressed=true] {color:var(--accent-blue); background:var(--auth-soft);}
.auth-checkbox {display:flex; align-items:flex-start; gap:9px; min-width:0;}
.auth-checkbox input {width:18px; height:18px; flex-shrink:0; margin:0; accent-color:var(--auth-button); cursor:pointer;}
.auth-checkbox input:focus-visible {outline:2px solid var(--accent-blue); outline-offset:3px;}
.auth-checkbox label {font-size:11px; line-height:1.7; cursor:pointer; color:var(--text-muted);}
.auth-checkbox a {font-weight:600; color:var(--accent-blue); text-decoration:underline; text-underline-offset:2px;}
.auth-login-options {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin:20px 0;}
.auth-login-options > a {font-size:11px; font-weight:600; color:var(--accent-blue);}
.auth-terms {margin:21px 0;}
.auth-terms.has-error input {outline:2px solid var(--auth-danger); outline-offset:2px;}
.auth-terms-error {font-size:11px; color:var(--auth-danger); line-height:1.7; margin:-10px 0 17px!important;}
.auth-submit {display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:46px; padding:12px 15px; border:1px solid transparent; border-radius:10px; background:var(--auth-button); color:#fff!important; font-size:13px; font-weight:600;}
.auth-submit:hover {background:#075c53;}
.auth-switch {text-align:center; margin-top:24px!important; padding-top:21px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); line-height:1.8;}
.auth-switch a {color:var(--accent-blue); font-weight:600; margin-left:3px;}
.auth-form-note {font-size:10px; line-height:1.8; text-align:center; color:var(--text-muted); margin-top:12px!important;}
.auth-back-link {display:flex; align-items:center; justify-content:center; gap:7px; width:fit-content; margin:23px auto 0; color:var(--accent-blue)!important; font-size:12px; font-weight:600;}
.auth-back-link svg {width:15px; height:15px;}
.auth-alert, .auth-reset-message > div {padding:13px 15px; border:1px solid var(--border); border-radius:10px; font-size:12px; line-height:1.8; margin:20px 0; overflow-wrap:anywhere;}
.auth-alert-error, .auth-reset-message .error {background:var(--auth-danger-bg); border-color:var(--auth-danger-border)!important; color:var(--auth-danger);}
.auth-alert-success, .auth-reset-message .success-text, .auth-reset-message .success {background:var(--auth-soft); color:var(--accent-blue);}
.auth-success-description {font-size:12px; color:var(--text-muted); line-height:1.9; margin:18px 0 25px!important;}
.auth-footer {display:flex; justify-content:space-between; gap:25px; padding:24px 0; border-top:1px solid var(--border); color:var(--text-muted); font-size:10px;}
.auth-footer > div {display:flex; gap:15px; flex-wrap:wrap;}
.auth-footer a:hover {color:var(--accent-blue);}
.auth-page .btn-cookie {background:var(--auth-button); color:#fff;}
.auth-story, .auth-card {animation:auth-enter .65s cubic-bezier(.2,.7,.2,1) backwards;}
.auth-card {animation-delay:.1s;}
@media(hover:hover) and (pointer:fine) {
    .auth-logo, .auth-icon-button, .auth-submit {transition:transform .2s ease;}
    .auth-brand:hover .auth-logo {transform:rotate(5deg);}
    .auth-icon-button:hover, .auth-submit:hover {transform:translateY(-2px);}
}
@keyframes auth-enter {from {opacity:0; transform:translateY(16px);} to {opacity:1; transform:translateY(0);}}
:root[data-motion=off] .auth-page *, :root[data-motion=off] .auth-page *::before, :root[data-motion=off] .auth-page *::after {animation:none!important; transition:none!important;}
@media(prefers-reduced-motion:reduce) {
    .auth-page *, .auth-page *::before, .auth-page *::after {animation:none!important; transition:none!important;}
}
@media(max-width:1000px) {
    .auth-layout {gap:35px; grid-template-columns:minmax(0,1fr) minmax(0,420px);}
    .auth-story h2 {font-size:36px;}
}
@media(max-width:850px) {
    .auth-wrap {width:calc(100% - 44px);}
    .auth-layout {grid-template-columns:minmax(0,460px); justify-content:center; padding:38px 0 45px;}
    .auth-story {display:none;}
}
@media(max-width:640px) {
    .auth-wrap {width:calc(100% - 36px);}
    .auth-nav {min-height:76px; gap:10px;}
    .auth-brand {font-size:21px;}
    .auth-nav-link {display:none;}
    .auth-icon-button {width:34px; height:34px;}
    .auth-layout {padding:28px 0 35px;}
    .auth-card {padding:23px; border-radius:16px;}
    .auth-card h1 {font-size:25px;}
    .auth-card-icon {width:38px; height:38px; margin-bottom:16px; border-radius:10px;}
    .auth-description {font-size:12px;}
    .auth-google {font-size:12px;}
    .auth-footer {flex-direction:column; gap:13px; padding:22px 0;}
    .auth-footer > div {gap:12px;}
}