/* Guest access is a full-page experience; member account sheets retain their UI. */
.auth-page-brand,.auth-page-benefits{display:none}
#account-dialog.account-dialog:is([data-account-phase="guest"],[data-account-phase="error"],[data-account-phase="loading"]){
  --auth-ink:#f3f3f3;
  --auth-muted:#9c9c9c;
  position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;
  padding:30px clamp(28px,6vw,104px) 48px;border:0;border-radius:0;
  color:var(--auth-ink);background:radial-gradient(ellipse at 12% 18%,#3a3a3a66,transparent 44%),radial-gradient(ellipse at 82% 100%,#2a2a2a55,transparent 46%),#090909;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  grid-template-columns:minmax(0,1fr) minmax(380px,500px);grid-template-rows:auto minmax(min-content,1fr);
  column-gap:clamp(32px,6vw,112px);row-gap:48px;isolation:isolate;
  &[open]{display:grid;animation:auth-page-in .28s ease-out both}
  &::backdrop{background:#090909;backdrop-filter:none}
  & .account-heading{grid-column:1/-1;grid-row:1;min-height:48px;position:relative;z-index:1}
  & .account-kicker{display:none}
  & .auth-page-brand{display:inline-flex;align-items:center;gap:13px;font-size:18px;font-weight:650;letter-spacing:-.6px}
  & .auth-page-brand svg{width:36px;height:33px;fill:currentColor;stroke:none;filter:none}
  & .account-heading .close-button{margin-left:auto;width:44px;height:44px;padding:12px;border:1px solid #ffffff24;border-radius:50%;background:#ffffff05;color:#d5d5d5;transition:background .18s,border-color .18s}
  & .account-heading .close-button:hover{background:#ffffff12;border-color:#ffffff50;transform:none}
  & .account-heading .close-button svg{width:19px;height:19px}
  & .account-intro{grid-column:1;grid-row:2;align-self:center;display:block;max-width:630px;padding:30px 0 48px;margin:0}
  & .account-emblem{display:flex;align-items:center;justify-content:flex-start;width:82px;height:76px;margin:0 0 32px;padding:0;border:0;border-radius:0;background:none;color:#fff}
  & .account-emblem svg{width:80px;height:72px;fill:currentColor;stroke:none;filter:none}
  & .account-intro h2{max-width:620px;margin:0 0 23px;font-size:clamp(46px,5.2vw,78px);font-weight:650;line-height:1.04;letter-spacing:-3px;text-wrap:balance}
  & .account-intro>p{max-width:370px;margin:0;font-size:15px;line-height:1.8;color:#a4a4a4}
  & .auth-page-benefits{display:grid;gap:17px;margin-top:46px;color:#c1c1c1;font-size:12px;line-height:1.5}
  & .auth-page-benefits>span{display:flex;align-items:center;gap:13px}
  & .auth-page-benefits svg{flex:none;width:19px;height:19px;fill:none;stroke:#afafaf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  & #account-guest{grid-column:2;grid-row:2;align-self:center;width:100%;padding:33px 34px 30px;border:1px solid #ffffff16;border-radius:24px;background:linear-gradient(145deg,#ffffff06,#ffffff01);box-shadow:0 24px 70px #0003;margin:0;min-width:0}
  & .account-auth-tabs{display:flex;gap:24px;margin:0 0 34px;padding:0 0 1px;border:0;border-bottom:1px solid #ffffff14;border-radius:0;background:none}
  & .account-auth-tabs button{position:relative;min-height:43px;padding:0 1px 14px;border-radius:0;font-size:13px;font-weight:550;line-height:1.3;background:none;box-shadow:none;color:#898989}
  & .account-auth-tabs button:after{content:'';position:absolute;inset:auto 0 -1px;height:2px;border-radius:2px;background:transparent;transition:background .18s}
  & .account-auth-tabs button[aria-pressed="true"]{color:#fff;background:none;box-shadow:none}
  & .account-auth-tabs button[aria-pressed="true"]:after{background:#f2f2f2}
  & .account-auth-tabs button:hover{color:#fff}
  & .account-auth-heading{font-size:30px;font-weight:600;letter-spacing:-1px;line-height:1.2;margin:0 0 10px!important}
  & #account-auth-description{font-size:13px;line-height:1.7;color:#a1a1a1;margin:0 0 27px;max-width:none}
  & .account-auth-social{margin:0}
  & .account-social-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  & .account-social-button{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;min-height:64px;padding:11px 8px;border:1px solid #ffffff25;border-radius:13px;background:#ffffff03;color:#eeeeee;font-size:12px;font-weight:550;transition:background .18s,border-color .18s,box-shadow .18s}
  & .account-social-button svg{flex:none;width:20px;height:20px;transform:none;filter:none}
  & #account-auth-google{background:#f5f5f5;border-color:#f5f5f5;color:#191919}
  & #account-auth-google:hover{background:#fff;border-color:#fff;box-shadow:0 0 20px #ffffff0a;transform:none}
  & #account-auth-discord:hover{background:#ffffff0c;border-color:#ffffff45;transform:none}
  & .account-social-button .account-discord-icon{width:21px;height:21px;color:#d7d7d7}
  & .account-provider-label{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0;line-height:1.25}
  & .account-provider-label small{display:block;max-width:100%;font-size:10px;line-height:1.25;font-weight:400;white-space:normal;color:inherit;opacity:.62}
  & .account-provider-label small[hidden]{display:none}
  & #account-auth-email-controls{display:block;min-width:0}
  & .account-auth-divider{margin:25px 0 22px;gap:13px;color:#777777;font-size:10px}
  & .account-auth-divider:before,& .account-auth-divider:after{background:#ffffff12}
  & .account-auth-field{margin-bottom:17px}
  & .account-auth-field label{font-size:11px;color:#cbcbcb;margin-bottom:8px}
  & .account-auth-field input{height:49px;padding:12px 14px;background:#0003;border-color:#ffffff22;border-radius:12px;font-size:13px;color:#f0f0f0}
  & .account-auth-field input:focus{border-color:#ffffff65;background:#0005}
  & .account-auth-field input::placeholder{color:#6a6a6a}
  & .account-password-input input{padding-right:48px}
  & .account-auth-text-button{font-size:10px;color:#a9a9a9}
  & .account-auth-form .account-primary{margin-top:23px;min-height:49px;border-radius:13px;background:#f3f3f3;color:#181818;font-size:13px}
  & .account-auth-hint{color:#898989;font-size:10px}
  & .account-auth-unavailable{margin:0 0 18px;padding:0;border:0;border-radius:0;background:none;color:#999;font-size:11px;line-height:1.65;text-align:left}
  & .account-auth-message{margin:20px 0 0;font-size:12px;line-height:1.65;border-radius:12px}
  & .account-auth-retry{display:block;min-height:40px;padding:8px 18px;margin:10px auto 0;border:1px solid #ffffff28;border-radius:10px;background:#ffffff05;font-size:12px;color:#e5e5e5}
  & .account-auth-retry:hover{background:#ffffff10}
  & .account-auth-back{margin-top:18px;font-size:12px;min-height:42px}
  & #account-loading{grid-column:2;grid-row:2;align-self:center;justify-content:center;padding:48px 24px;border:1px solid #ffffff14;border-radius:24px;background:#ffffff03}
  & #account-error,& #account-retry{grid-column:2;justify-self:start;margin:0}
  & #account-guest[hidden],& #account-loading[hidden],& #account-auth-retry[hidden],& #account-auth-social-divider[hidden],& #account-auth-email-controls[hidden]{display:none}
}
@keyframes auth-page-in{from{opacity:0}to{opacity:1}}
@media(min-width:1100px){
  #account-dialog.account-dialog:is([data-account-phase="guest"],[data-account-phase="error"],[data-account-phase="loading"]){
    & .account-provider-label{flex-direction:row;align-items:center;gap:4px;white-space:nowrap;font-size:12px}
    & .account-provider-label small{font-size:12px;white-space:nowrap;opacity:1}
  }
}
@media(min-width:901px) and (max-height:800px){
  #account-dialog.account-dialog:is([data-account-phase="guest"],[data-account-phase="error"],[data-account-phase="loading"]){
    padding-top:18px;padding-bottom:24px;row-gap:18px;
    & .account-heading{min-height:44px}
    & #account-guest{padding-top:24px;padding-bottom:24px}
    & .account-auth-tabs{margin-bottom:20px}
    & .account-auth-tabs button{min-height:44px;padding-bottom:12px}
    & .account-auth-heading{margin-bottom:8px!important}
    & #account-auth-description{margin-bottom:18px}
    & .account-social-button{min-height:52px;padding-top:10px;padding-bottom:10px}
    & .account-auth-divider{margin-top:18px;margin-bottom:16px}
    & .account-auth-field{margin-bottom:14px}
    & .account-auth-form .account-primary{margin-top:17px}
    & .account-auth-unavailable{margin-bottom:14px}
    & .account-intro{padding-top:12px;padding-bottom:24px}
    & .account-emblem{margin-bottom:24px}
    & .auth-page-benefits{margin-top:32px}
  }
}
@media(max-width:900px){
  #account-dialog.account-dialog:is([data-account-phase="guest"],[data-account-phase="error"],[data-account-phase="loading"]){
    padding:22px 24px 40px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(min-content,1fr);row-gap:28px;
    & .account-heading{grid-row:1}
    & .account-intro{grid-column:1;grid-row:2;justify-self:center;width:100%;max-width:500px;padding:10px 0 0}
    & .account-emblem,& .auth-page-benefits{display:none}
    & .account-intro h2{max-width:380px;margin:0 0 12px;font-size:36px;line-height:1.12;letter-spacing:-1.3px}
    & .account-intro>p{font-size:13px;line-height:1.75;max-width:360px}
    & #account-guest{grid-column:1;grid-row:3;align-self:start;justify-self:center;max-width:500px;padding:28px}
    & #account-loading{grid-column:1;grid-row:3;align-self:start;justify-self:center;width:100%;max-width:500px}
    & #account-error,& #account-retry{grid-column:1;justify-self:center;max-width:500px}
  }
}
@media(max-width:480px){
  #account-dialog.account-dialog:is([data-account-phase="guest"],[data-account-phase="error"],[data-account-phase="loading"]){
    padding:18px 22px 32px;row-gap:25px;
    & .auth-page-brand{font-size:16px;gap:11px}
    & .auth-page-brand svg{width:31px;height:29px}
    & .account-heading .close-button{width:40px;height:40px;padding:11px}
    & .account-intro{padding-top:6px}
    & .account-intro h2{font-size:31px;letter-spacing:-1px;max-width:340px}
    & .account-intro>p{font-size:12px;max-width:330px}
    & #account-guest{padding:25px 21px 24px;border-radius:20px}
    & .account-auth-tabs{margin-bottom:27px;gap:22px}
    & .account-auth-heading{font-size:27px}
    & #account-auth-description{font-size:12px;margin-bottom:24px}
    & .account-social-buttons{gap:8px}
    & .account-social-button{flex-direction:row;gap:9px;font-size:12px;min-height:62px;padding:11px 9px}
    & .account-auth-field input{font-size:16px}
  }
}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) #account-dialog[open]{animation:none}}
html[data-motion="reduced"] #account-dialog[open]{animation:none}