#loginDialog.auth-split { width: min(1100px,calc(100vw - 48px)); height: min(780px,calc(100dvh - 48px)); max-height: none; padding: 10px; border: 1px solid #ffffff25; border-radius: 22px; background: #f9faf7; color: #182c25; overflow: hidden; box-shadow: 0 32px 120px #0008; color-scheme: light; }
#loginDialog.auth-split[open] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0,1fr); }
#loginDialog .center-panel { display: flex; flex-direction: column; gap: 0; padding: 34px clamp(24px,4vw,60px); min-width: 0; overflow-y: auto; scrollbar-width: thin; }
.auth-wordmark { font-family: 'Space Grotesk',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -1px; margin-bottom: clamp(30px,8vh,85px); }
.auth-wordmark span { display: block; margin-top: 9px; font: 9px Inter,sans-serif; letter-spacing: 1.9px; color: #7a8981; }
#loginDialog .center-header { align-items: center; margin-bottom: 10px; gap: 8px; }
#loginDialog h2 { font-size: clamp(23px,2.5vw,32px); letter-spacing: -1px; font-weight: 500; line-height: 1.2; }
#loginDialog .center-header .icon-button { color: #62776b; background: transparent; flex-shrink: 0; }
.auth-intro { color: #748077; font-size: 12px; line-height: 1.7; margin-bottom: 30px; }
#firebaseLogin { display: grid; gap: 17px; }
#firebaseLogin .field { color: #3d5146; font-size: 11px; gap: 8px; }
#firebaseLogin input { height: 45px; width: 100%; border: 1px solid #d5ddd5; border-radius: 9px; padding: 11px 13px; background: #ffffffa6; color: #193c2e; outline: none; font: inherit; font-size: 13px; transition: border-color 180ms,box-shadow 180ms; }
#firebaseLogin input:focus { border-color: #527e68; box-shadow: 0 0 0 3px #527e6814; }
#firebaseLogin .account-save { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
#firebaseLogin .action-button { justify-content: center; border: 1px solid #d5ddd5; border-radius: 9px; padding: 12px 10px; background: transparent; color: #315440; font-size: 12px; }
#firebaseLogin .action-button:hover { background: #edf2ec; border-color: #a4b9ab; }
#firebaseLogin [type=submit] { grid-column: 1/-1; background: #183f30; color: #fff; border-color: #183f30; }
#firebaseLogin [type=submit]:hover { background: #24553f; }
#firebaseLogin [data-auth=reset] { grid-column: 1/-1; border-color: transparent; color: #758579; font-size: 11px; }
#firebaseLogin .form-message { font-size: 12px; color: #9a493a; line-height: 1.5; }
#firebaseLogin .form-message:empty { display: none; }
#firebaseLogin .registration-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#firebaseLogin .registration-fields > :first-child,#firebaseLogin .registration-fields > :last-child { grid-column: 1/-1; }
#firebaseLogin .donate-note { color: #7d887f; font-size: 10px; line-height: 1.6; }
#loginDialog.is-register .auth-wordmark { margin-bottom: 30px; }
.auth-art { position: relative; isolation: isolate; overflow: hidden; min-height: 0; border-radius: 14px; background: #ccdcd0; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; color: #f5faf2; }
.auth-paint { position: absolute; z-index: -2; inset: -12%; background: radial-gradient(ellipse at 22% 18%,#ffffff 0%,#f0f4e8 14%,transparent 40%),radial-gradient(ellipse at 95% 35%,#f2f3df 0%,#c8d3bb 13%,transparent 39%),radial-gradient(ellipse at 42% 52%,#eff2e0 0%,#acbfa9 18%,transparent 42%),radial-gradient(ellipse at 4% 78%,#46725b 0%,#183f30 30%,transparent 55%),radial-gradient(ellipse at 90% 90%,#092c22 0%,#1d4939 35%,transparent 64%),linear-gradient(135deg,#dfe8dd,#587963 48%,#123428); filter: blur(20px); transform: rotate(-12deg) scale(1.08); }
.auth-art::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); mix-blend-mode: multiply; pointer-events: none; }
.auth-art::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,transparent 38%,#08251e77 100%); }
.auth-art-top,.auth-art-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth-art-top { color: #244a38; font-size: 9px; letter-spacing: 2px; }
.auth-art-top > :last-child { font-size: 28px; }
.auth-art-copy { margin-top: auto; padding: 160px 0 52px; }
.auth-art-copy > span { font-size: 9px; letter-spacing: 2px; color: #d6e3d4; }
.auth-art-copy h3 { margin: 18px 0; font-family: Georgia,serif; font-size: clamp(34px,4vw,52px); font-weight: 400; line-height: 1.07; letter-spacing: -1.7px; }
.auth-art-copy p { max-width: 240px; color: #d6e0d6; font-size: 12px; line-height: 1.7; }
.auth-art-bottom { border-top: 1px solid #ffffff25; padding-top: 20px; font-size: 13px; }
.auth-art-bottom > :last-child { font-size: 8px; letter-spacing: 1.4px; color: #d0ded1; }
@media(max-width:700px) { #loginDialog.auth-split { width: calc(100vw - 20px); height: calc(100dvh - 20px); padding: 6px; } #loginDialog.auth-split[open] { grid-template-columns: 1fr; } #loginDialog .center-panel { padding: 24px; } .auth-art { display: none; } .auth-wordmark { margin-bottom: 40px; } }
#loginDialog.auth-split { background: radial-gradient(ellipse at 85% 12%,#25483a35,transparent 55%),linear-gradient(135deg,#171e1b,#101613 55%,#19241e); color: #e7eee8; color-scheme: dark; border-color: #c9ebd51a; box-shadow: 0 32px 120px #000a,inset 0 1px 0 #ffffff08; }
#loginDialog::backdrop { background: radial-gradient(ellipse at 20% 25%,#204e3e80,transparent 65%),linear-gradient(140deg,#080e0be8,#17241be8); backdrop-filter: blur(12px); }
#loginDialog .center-panel { grid-column: 1; grid-row: 1; transform: translateX(100%); transition: transform 760ms cubic-bezier(.65,0,.2,1); scrollbar-color: #40574a transparent; }
#loginDialog .auth-art { grid-column: 1; grid-row: 1; z-index: 2; transform: translateX(0); transition: transform 760ms cubic-bezier(.65,0,.2,1); box-shadow: 0 12px 32px #0004; }
#loginDialog.is-register .center-panel { transform: translateX(0); }
#loginDialog.is-register .auth-art { transform: translateX(100%); }
#loginDialog.auth-switching .center-panel,#loginDialog.auth-switching .auth-art { transition: none; }
#loginDialog .auth-art { width: 100%; min-width: 0; }
#loginDialog .auth-google-icon { width: 18px; height: 18px; flex: 0 0 18px; }
#firebaseLogin [data-auth=google] { display: flex; align-items: center; gap: 9px; }
#loginDialog .auth-wordmark { color: #ecf4ed; }
#loginDialog .auth-wordmark span,.auth-intro { color: #94a69a; }
#loginDialog .center-header .icon-button { color: #9bb4a4; }
#firebaseLogin .field { color: #b7c9bd; }
#firebaseLogin input { border-color: #92b6a12b; background: #09120d66; color: #e6f1e9; box-shadow: inset 0 1px 3px #0002; }
#firebaseLogin input:focus { border-color: #8ebba0; box-shadow: 0 0 0 3px #86b69a14; }
#firebaseLogin .action-button { border-color: #92b6a130; color: #c5d9cd; background: #ffffff03; }
#firebaseLogin .action-button:hover { background: #8ebba00f; border-color: #8ebba067; }
#firebaseLogin [type=submit] { background: linear-gradient(120deg,#bfdbc8,#91b99f); color: #132c1f; border-color: #c6e5d066; box-shadow: 0 4px 18px #9ecaab0d; font-weight: 600; }
#firebaseLogin [type=submit]:hover { background: linear-gradient(120deg,#d3e9d9,#a5cbb3); }
#firebaseLogin [data-auth=reset] { border-color: transparent; color: #a1b2a7; }
#firebaseLogin .donate-note { color: #96a79c; }
#firebaseLogin .form-message { color: #e4a994; }
#loginDialog .auth-paint { transition: transform 1200ms cubic-bezier(.22,1,.36,1); }
#loginDialog.is-register .auth-paint { transform: rotate(8deg) scale(1.16); }
@media(max-width:700px) { #loginDialog .center-panel,#loginDialog.is-register .center-panel { transform: none; } }
@media(prefers-reduced-motion:reduce) { #firebaseLogin input,#loginDialog .center-panel,#loginDialog .auth-art,#loginDialog .auth-paint { transition: none; } }