@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap");
/* Shared public account entrance and staff login, scoped away from app pages. */
.account-brand{background:#0f1117;color:#fff;padding:52px clamp(24px,4vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:64px;border-right:3px solid #00cc6a;min-width:0;text-align:left;font-family:Inter,Arial,sans-serif}
.account-brand .account-logo{width:min(280px,100%);height:auto!important;margin:0;display:block}
.account-brand .account-kicker,.account-brand .account-social>p{font-size:11px;letter-spacing:1.6px;color:#bdc9c1;margin:20px 0 0;line-height:1.6}
.account-brand h2{font-family:Inter,Arial,sans-serif;font-size:clamp(32px,4vw,54px);font-weight:500;letter-spacing:-1.8px;line-height:1.15;margin:0;color:#fff}
.account-brand h2 span{color:#00cc6a}
.account-social-row{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}
.account-social-row a{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:white;border:1px solid #d5dfd8}
.account-social-row img{width:27px;height:27px!important;margin:0!important}
.account-social-row .instagram{filter:invert(32%) sepia(80%) saturate(1300%) hue-rotate(295deg)}
.account-social-row .tiktok{filter:drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55)}
.account-brand .account-handle{letter-spacing:.3px!important;font-size:12px!important}
#signIn.authFull,#createAccount.authFull{background:#fff;color:#151a17;min-height:100vh;margin-top:-24px}
#signIn>.authBanner,#createAccount>.authBanner{display:none}
#signIn>.authSplit,#createAccount>.authSplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
#signIn .authFormPane,#createAccount .authFormPane{padding:48px clamp(24px,4vw,60px);background:#fff;min-width:0}
#signIn .authFormInner,#createAccount .authFormInner{max-width:390px;text-align:left}
#signIn h1,#createAccount h1{font:600 32px/1.2 Inter,Arial,sans-serif!important;letter-spacing:-1px!important}
#signIn .authFormInner>p,#createAccount .authFormInner>p{font-size:14px!important;font-weight:400!important;color:#626b65!important;line-height:1.6!important}
#signIn input,#createAccount input{border-radius:4px!important;font-weight:400!important;font-size:16px!important;min-height:46px}
#signIn .oauthBtn,#createAccount .oauthBtn{border-radius:4px!important;font-weight:500!important;min-height:46px}
#signIn button[onclick="doSignin()"],#createAccount button[onclick="doSignup()"]{background:#00cc6a!important;color:#081b11!important;border-radius:4px!important;font-weight:600!important;box-shadow:none!important}
.account-mode-tabs{display:flex;border-bottom:1px solid #d9e1dc;margin-bottom:32px;gap:20px}
.account-mode-tabs a,.account-mode-tabs button{flex:1;text-align:center;background:none;border:0;border-bottom:3px solid transparent;padding:13px 0;color:#606b63;text-decoration:none;font:500 14px Inter,Arial,sans-serif;cursor:pointer}
.account-mode-tabs [aria-current="page"],.account-mode-tabs [aria-selected="true"]{border-bottom-color:#008545;color:#151a17}
#login.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;align-items:stretch;background:#fff;color:#151a17}
#login .loginCard{max-width:430px;align-self:center;justify-self:center;border:0;border-radius:0;padding:48px 32px;width:100%;background:#fff}
#login .loginCard>img{display:none}
#login .loginCard h2{font:600 30px/1.2 Inter,Arial,sans-serif;margin:0 0 12px!important}
#login .loginCard input,#login .loginCard .btn{border-radius:4px;min-height:46px}
#login .loginCard .primary{background:#00cc6a;color:#081b11;border:0}
#login .note{line-height:1.6}
#login .account-access-note{margin-top:24px;font-size:13px}
@media(max-width:700px){
#signIn>.authSplit,#createAccount>.authSplit,#login.login{grid-template-columns:minmax(0,1fr)}
.account-brand{padding:28px 25px;gap:24px;border-right:0;border-bottom:3px solid #00cc6a}
.account-brand .account-logo{width:205px}
.account-brand h2{font-size:27px;letter-spacing:-.8px}
.account-brand h2 br{display:none}
.account-brand .account-kicker,.account-brand .account-social{display:none}
#signIn .authFormPane,#createAccount .authFormPane{padding:28px 25px}
#login .loginCard{padding:30px 25px}
}

.account-social-row svg{width:27px;height:27px;display:block}
#login [hidden]{display:none!important}
/* Auth brand typography must win over the app's editorial heading rules. */
#signIn .account-brand h2,#createAccount .account-brand h2,#login .account-brand h2{font-family:Inter,Arial,sans-serif!important;font-size:clamp(32px,4vw,54px)!important;font-weight:500!important;line-height:1.15!important;color:#fff!important;text-shadow:none!important}
@media(max-width:700px){#signIn .account-brand h2,#createAccount .account-brand h2,#login .account-brand h2{font-size:27px!important}}
@media(max-width:700px){
 .account-brand{align-items:center;text-align:center;gap:20px}
 .account-brand .account-logo{margin-left:auto;margin-right:auto}
 #signIn .account-brand h2,#createAccount .account-brand h2,#login .account-brand h2{font-size:clamp(16px,4.1vw,23px)!important;letter-spacing:-.45px!important;white-space:nowrap;line-height:1.3!important;text-align:center}
}

#signIn .account-brand h2,#createAccount .account-brand h2,#login .account-brand h2{font-family:'Playfair Display',Georgia,serif!important}

#signIn .account-brand h2,#createAccount .account-brand h2,#login .account-brand h2{font-style:italic!important}

/* Compact account footer, shared by sign in and create account. */
.account-page-footer{margin-top:36px;padding-top:18px;border-top:1px solid #e5eae7;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#717974;font:400 12px/1.4 Inter,Arial,sans-serif}
.account-page-footer .account-about-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 16px;background:#0f1117;color:#fff!important;border-radius:4px;text-decoration:none;font:500 14px/1.4 Inter,Arial,sans-serif;white-space:nowrap}
.account-about-button span{color:#00cc6a;font-size:20px;line-height:1}
.account-about-button:hover{background:#22272b}
.account-about-button:focus-visible{outline:3px solid #008545;outline-offset:3px}

/* Staff entrance follows the public account design without changing access. */
#login .loginCard{box-sizing:border-box;max-width:510px;padding:48px 60px;font-family:Inter,Arial,sans-serif;text-align:left}
#login .loginCard h2{font:600 32px/1.2 Inter,Arial,sans-serif;letter-spacing:-1px}
#login .loginCard .note{font:400 14px/1.6 Inter,Arial,sans-serif;color:#626b65}
#login .loginCard .googleBtn{margin-top:28px;font:500 14px/1.4 Inter,Arial,sans-serif;border:1px solid #d9e1dc;color:#151a17}
#login .loginDivider{margin:20px 0;font:400 12px/1.4 Inter,Arial,sans-serif;letter-spacing:0;text-transform:none}
#login .loginCard .field{margin:20px 0}
#login .loginCard input{box-sizing:border-box;width:100%;padding:14px 16px;background:#fff;border:1px solid #d9e1dc;color:#151a17;font:400 16px/1.4 Inter,Arial,sans-serif}
#login .loginCard .primary{font:600 14px/1.4 Inter,Arial,sans-serif;box-shadow:none}
#login .account-access-note{font:400 13px/1.6 Inter,Arial,sans-serif;text-align:center}
#login .account-access-note a{color:#006b38}
@media(max-width:700px){#login .loginCard{max-width:440px;padding:28px 25px;width:100%}}

/* Preserve the approved compact black button dimensions after renaming. */
#signIn .account-page-footer .account-about-button,#createAccount .account-page-footer .account-about-button,#login .account-page-footer .account-about-button{box-sizing:border-box;display:inline-flex;min-width:164px;min-height:44px;padding:10px 16px;gap:12px;background:#0f1117!important;color:#fff!important;border:0;border-radius:4px!important;text-decoration:none!important;font:500 14px/1.4 Inter,Arial,sans-serif;box-shadow:none}
#signIn .account-about-button span,#createAccount .account-about-button span,#login .account-about-button span{color:#00cc6a!important;font-size:20px;line-height:1}

/* Shared signup layout, with a fuller introduction for bio/email visitors. */
#createAccount #signupWelcomeIntro[hidden]{display:none!important}
#createAccount .signup-brand-message{max-width:540px}
#createAccount #signupWelcomeIntro{margin-top:28px}
#createAccount #signupWelcomeIntro p{color:#d6ddd9!important;font:400 17px/1.65 Inter,Arial,sans-serif!important;margin:0}
#createAccount #signupWelcomeIntro strong{color:#fff;font-weight:700}
#createAccount #signupWelcomeIntro .signup-available{margin-top:22px;padding-top:20px;border-top:1px solid #58615e;font-size:15px!important}
#createAccount h1{font-weight:750!important}
#createAccount .account-mode-tabs [aria-current="page"]{font-weight:700}
#createAccount :focus-visible{outline:3px solid #008545;outline-offset:3px}
@media(max-width:700px){
 #createAccount #signupWelcomeIntro{margin-top:20px;text-align:left}
 #createAccount #signupWelcomeIntro p{font-size:15px!important;line-height:1.6!important}
 #createAccount #signupWelcomeIntro .signup-available{font-size:14px!important;margin-top:16px;padding-top:16px}
}

/* Welcome keeps the simple brand heading on phones; the introduction is desktop-only. */
@media(max-width:700px){#createAccount #signupWelcomeIntro{display:none!important}}