/* css/account.css */




.ak-overlay:not([hidden]) {
  display: block;
  opacity: 1;
}

/* Hidden means hidden. Period. */
#account-overlay[hidden],
#account-wrap[hidden],
#plans-wrap[hidden],
#projects-wrap[hidden] {
  display: none !important;
}


/* ===========================
   ACCOUNT OVERLAY + PANEL
   =========================== */

/* Hidden means hidden. Period. */
#account-overlay[hidden],
#projects-wrap[hidden],
#account-wrap[hidden] {
  display: none !important;
}

/* Overlay (fade in when not hidden) */
/* stylelint-disable-next-line no-duplicate-selectors */
#account-overlay.ak-overlay {
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.748);
  inset: 0;
  opacity: 0;
  position: fixed;
  transition: opacity 180ms ease;
  z-index: 996;     
  pointer-events: auto;   
}

#account-overlay.ak-overlay:not([hidden]) {
  display: block !important;
  opacity: 1;
}

#plans-wrap.account-panel,
#account-wrap.account-panel{
  z-index: 997; 
}





.account-panel {
  display: flex;
  flex-direction: column;
  position: fixed;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* size */
  width: min(480px, calc(100vw - 32px));
  height: 580px;            
  overflow: hidden;

  --panel-pad-x: 36px;
  --panel-pad-y: 36px;

    background-color: var(--ak-white-sec);
}

#plans-wrap.account-panel,
#projects-wrap.account-panel{
  z-index: 970; /* width comes from .account-panel */
    width: min(720px, calc(100vw - 32px));

}



/* Header never scrolls */
.account-panel>.floating-panel__header {
  flex: 0 0 auto;
}

.account-panel>.floating-panel__body {
  padding: var(--panel-pad-y) var(--panel-pad-x);
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

}

/* Account panel must NOT scroll */
#account-wrap.account-panel > .floating-panel__body{
  overflow-y: hidden;
}



#projects-wrap.account-panel>.floating-panel__body::-webkit-scrollbar,
#account-wrap.account-panel>.floating-panel__body::-webkit-scrollbar {
  width: 10px;
}



#projects-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-track,
#account-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-track {
  background: transparent;
}


#projects-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-thumb,
#account-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-thumb {
  background: #797979 !important;
  border: none;
  border-radius: 999px;
}


#projects-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-thumb:hover,
#account-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-thumb:hover {
  background: rgb(0, 0, 0) !important;
}

/* ===========================
   ACCOUNT PANEL AUTH LAYOUT
   =========================== */

/* Make panel body a flex column so we can pin footer */

#account-wrap.account-panel > .floating-panel__body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* DO NOT center the whole stack */
  padding: var(--panel-pad-y) var(--panel-pad-x);
}

#plans-wrap.account-panel > .floating-panel__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--panel-pad-y) var(--panel-pad-x);
}



#account-wrap .auth-module{
  width: 100%;
  max-width: 480px;
  margin: 0 auto;

  position: relative;
  display: flex;
  flex-direction: column;

  flex: 1 1 auto;
  min-height: 0;

  gap: 0;
  text-align: left;

  /* Only affects header placement; keeps auth block centered */
  --auth-head-top: 0px;        
  --auth-head-reserve: 20px;  

  padding-top: var(--auth-head-reserve);
}

/* header placement tied to #account-wrap state */
#account-wrap:not(.is-signedin) .auth-head{
  position: absolute;
  top: var(--auth-head-top);
  left: 0; right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  /* auth view reserves head space */
}
#account-wrap.is-signedin .auth-module{ padding-top: 0; }
#account-wrap.is-signedin .auth-head{ position: static; margin-bottom: var(--s18-p-); }

/* prevent overlap during state transitions */
#account-wrap[hidden] { display: none !important; }



#plans-wrap .auth-head__kicker,
#account-wrap .auth-head__kicker,
#projects-wrap .auth-head__kicker,
#signin-toast .auth-head__kicker{
  font-size: var(--a-size);
  font-weight: var(--h1-weight);
  color: var(--ak-dark);
  letter-spacing: var(--h1-letter-spacing);
  padding-left: var(--s8-p-);
  margin-bottom: var(--s18-p-);
}
#plans-wrap .auth-head__kicker,
#projects-wrap .auth-head__kicker{
  padding-left: var(--s36-p-);
}

#account-wrap .auth-head__title{
  font-size: var(--b-size);
   font-weight: var(--h1-weight);
  color: var(--ak-dark);
    letter-spacing: var(--h1-letter-spacing);
}

#account-wrap .auth-head__meta{
  margin-top: 30px;
  font-size: var(--font1-size);
  font-weight: var(--font3-weight);

}

#account-wrap .auth-block{
  flex: 1 1 auto;          /* critical: take remaining height after reserved header */
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
}

#account-wrap .auth-block > #auth-mount{
  width: 100%;
  max-width: 420px;
}

/* Continue-without-account bar: full-width strip at the bottom of the panel body */
#account-wrap .auth-foot{
  margin-top: auto;
  width: 100%;
  padding-top: 0;
}

#account-wrap .auth-guestbar{
  margin-left: calc(var(--panel-pad-x) * -1);
  margin-right: calc(var(--panel-pad-x) * -1);
  margin-bottom: calc(var(--panel-pad-y) * -1);
  background: rgb(224, 224, 224);
  padding: 18px 24px;
  border: 0;
  display: flex;
  justify-content: center;
}

#account-wrap .auth-guestbar__btn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
color: #5a5a5a;
  text-decoration: none;   /* matches your expected bar style */
  cursor: pointer;
}




#account-wrap .auth-guestbar__btn:focus-visible{
  outline: none;

}


#account-wrap .auth-link{
  display: inline;
  width: auto;
  margin: 0;
  line-height: 1.2;
}




/* Footer link: keep it visually separate */
#continue-no-account{
  font-size: var(--h3-size);
  font-weight: var(--font4-weight);
}

/* When plans panel is open, dim account panel a bit (optional, but clear) */
#projects-wrap.ak-under,
#account-wrap.ak-under{
  opacity: 0.25;
  filter: blur(0.2px);
}
/* ===========================
   ACCOUNT/PLANS PANELS ONLY
   =========================== */

/* Make header taller + ensure absolute positioning is possible */
#projects-wrap .floating-panel__header,
#plans-wrap .floating-panel__header{
  position: relative;
  padding: 28px 28px;
  min-height: 72px;
}

#account-wrap .floating-panel__header{
  position: relative;
  padding: 16px 20px;   /* tighter */
  min-height: 0;        /* no forced empty height */
}

/* Put the close button top-right */
#projects-wrap .floating-panel__header-buttons,
#plans-wrap .floating-panel__header-buttons{
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
}

#account-wrap .floating-panel__header-buttons{
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
}
#account-wrap:not(.is-signedin) .floating-panel__header-buttons{
  display: none;
}

/* Optional: make the icon/button a clean click target */
#projects-wrap .floating-panel__btn,
#account-wrap .floating-panel__btn,
#plans-wrap .floating-panel__btn{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}


#projects-wrap .floating-panel__btn img,
#account-wrap .floating-panel__btn img,
#plans-wrap .floating-panel__btn img{
  width: 24px;
  height: 24px;
  display: block;
}

.auth-substep[aria-hidden="true"] { display: none; }
.auth-substep[aria-hidden="false"] { display: flex; flex-direction: column; gap: 12px; }
.auth-error { min-height: 1.2em; }

#auth-form #btn-email-next[aria-hidden="true"] { display: none !important; }


#account-wrap .auth-disclosure{
  text-align: left;
  margin-top: 8px;
}
/* single source of truth: state lives on #account-wrap */
#account-wrap.is-signedin .auth-module { display: none !important; }   /* hide auth when signed in */
#account-wrap.is-signedin #account-mount { display: flex !important; } /* show account view */

#account-wrap:not(.is-signedin) .auth-module { display: flex !important; }  /* show auth when signed out */
#account-wrap:not(.is-signedin) #account-mount { display: none !important; }/* hide account view */

#account-mount { flex: 1 1 auto; min-height: 0; } /* retain layout when visible */


#account-wrap.account-panel.is-signedin > .floating-panel__body{
  padding-top: var(--s16-p-);
}


/* ===========================
   ACCOUNT VIEW (SIGNED IN)
   =========================== */

#account-wrap #account-mount{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;

  /* critical: allow footer push-down */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#account-wrap .account-divider{
  width: 100%;
  border-bottom: var(--s1-p-) solid rgba(0,0,0,0.14);
  margin: var(--s12-p-) 0;
}

/* Add divider directly under the "Account" title (no extra markup) */
#account-wrap #account-mount::before{
  content: "";
  display: block;
  border-bottom: var(--s1-p-) solid rgba(0,0,0,0.14);
  margin: var(--s18-p-) 0 var(--s10-p-) 0;
}

/* Rows are flat (no cards). 2 columns by default: label + value */
#account-wrap .account-row{
  display: grid;
  align-items: center;
  padding: var(--s14-p-) 0;

}

/* Key/Value rows (Username/Company + Sign-in): 2nd column narrower */
#account-wrap .account-row--kv,
#account-wrap .account-row--signin{
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 200px);
  column-gap: var(--s20-p-);
}

/* Plan row: left text + right button */
#account-wrap .account-row--plan{
  grid-template-columns: minmax(180px, 1fr) 1fr;
  column-gap: var(--s20-p-);
}

#account-wrap .account-row--plan .account-row__action{
  justify-self: start;
}

/* Labels */
#account-wrap .account-row__label{
  font-size: var(--account-size_reg);
  font-weight: var(--account--font-weight_1);
  color: var(--ak-dark);
  line-height: var(--lh-1-1);
}

/* Optional "(optional)" tag */
#account-wrap .account-row__opt{
  color: rgba(0,0,0,0.45);
  font-weight: var(--app_font_regular--font-weight);
}

/* Values: never wrap into vertical nonsense */
#account-wrap .account-row__value{
    font-size: var(--account-size_reg);
  font-weight: var(--account--font-weight_1);
  letter-spacing: var(--account--letter-spacing_small);
  color: var(--ak-dark);
  line-height: var(--lh-1-1);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#account-wrap .account-row__value .account-row--plan
{
    font-size: var(--account-size_large);
}


/* Plan button */
#account-wrap .account-pill{
  appearance: none;
  border: var(--s1-p-) solid var(--ak-dark);
  background: transparent;
  color: var(--ak-dark);
  height: var(--s40-p-);
  width: 140px;

  border-radius: 999px;
  font: inherit;
  font-size: var(--account-size_reg);
  font-weight: var(--font3-weight);

  cursor: pointer;
}


#account-wrap .account-pill:hover{ background: var(--ak-hover); }
#account-wrap .account-pill:active{ background: rgba(0,0,0,0.07); }

/* Sign-in method: put reset button on its own line under the row */
#account-wrap .account-row--signin .account-row__action{
  grid-column: 1 / -1;
  margin-top: var(--s42-p-);
}

/* reset password chip */
#account-wrap .account-chip{
  appearance: none;
  border: 0;
  background:var(--ak-vertex-light);
  color: var(--ak-dark);

  height: var(--s28-p-);
  padding: 0 var(--s14-p-);
   border-radius: 999px;

  font: inherit;
  font-size: var(--account-size_small);
  letter-spacing: var(--account--letter-spacing_small);
  font-weight: var(--account--font-weight_1);
  cursor: pointer;
}

#account-wrap .account-chip:hover{

  background:var(--ak-accent);

}

/* Footer actions: two grey pills at bottom */
#account-wrap .account-actions{
  margin-top: auto;
  padding-top: var(--s28-p-);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s48-p-);
}

#account-wrap .account-delete,
#account-wrap .account-signout{
  appearance: none;
  border: 0;
  height: var(--s36-p-);
  padding: 0 var(--s16-p-);
  border-radius: var(--ak-radius-pill);
  font: inherit;
    font-size: var(--account-size_small);
  font-weight: var(--account--font-weight_1);
  cursor: pointer;
}

#account-wrap .account-delete{
  background: var(--ak-offwhite);
  color: var(--ak-mid-gray);
}


#account-wrap .account-signout{
  background: var(--ak-vertex-light);
  color: var(--ak-inactive);

}



#account-wrap .account-delete:hover
{ background: rgb(175, 48, 48);
  color: var(--ak-dark);
 }


#account-wrap .account-signout:hover
{ background: var(--ak-accent);
  color: var(--ak-dark);
}


#account-wrap .account-delete:active,
#account-wrap .account-signout:active
{ background: rgba(0,0,0,0.14); }

#account-wrap .account-view{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#account-wrap .account-input{
  appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;

  font: inherit;        /* you control weight/color elsewhere */
  color: inherit;
  font-weight: inherit;
}

#account-wrap .account-plan__brand{
  font-weight: var(--account--font-weight_1) !important;
  font-size: var(--account-size_large);
}

#account-wrap .account-plan__name.is-free{
  font-weight: var(--account--font-weight_2) !important;
    font-size: var(--account-size_large);
}
#account-wrap .account-plan__name.is-plus{
  font-weight: var(--account--font-weight_2) !important;
    font-size: var(--account-size_large);
}
#account-wrap .account-plan__name.is-pro{
  font-weight: var(--account--font-weight_2) !important;
    font-size: var(--account-size_large);
}
#account-wrap #account-planbtn-b.is-plus{
  font-weight: var(--account--font-weight_2);
}

/* make hidden steps truly non-hit-testable */
.auth-start[hidden],
.auth-emailstep[hidden],
.auth-substep[hidden] { display: none !important; pointer-events: none !important; }

/* belt-and-suspenders: keep inputs above neighbors */
#account-wrap .auth-input { position: relative; z-index: 1; pointer-events: auto; }

/* Manage popover (Invoices / Cancel) */
.export-manage-menu,
.account-manage-menu {
  position: fixed;
  width: 240px;
  max-width: calc(100vw - 24px);
  background: var(--ak-white-sec, #fff);
  border: var(--s1-p-, 1px) solid rgba(0,0,0,0.14);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  padding: 8px;
  z-index: 990; /* above other panels */
}


.export-manage-menu__item,
.account-manage-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: var(--account-size_reg, 14px);
  line-height: 1.2;
  color: var(--ak-dark, #111);
  cursor: pointer;
}
.export-manage-menu__item:hover,
.export-manage-menu__item:focus,
.account-manage-menu__item:hover,
.account-manage-menu__item:focus {
  background: var(--ak-hover, rgba(0,0,0,0.06));
  outline: none;
}


.account-manage-menu__item.is-danger { color: #b52318; }

.export-manage-menu__item.is-danger:hover,
.export-manage-menu__item.is-danger:focus,
.account-manage-menu__item.is-danger:hover,
.account-manage-menu__item.is-danger:focus { background: rgba(181,35,24,0.08); }
.account-manage-menu__note {
  display: block;
  padding: 8px 12px 6px 12px;
  font-size: var(--account-size_small, 12px);
  line-height: 1.2;
  color: rgba(0,0,0,0.66);
  pointer-events: none;
}



#account-wrap .account-plan__sub{
  margin-top: 4px;
  font-size: var(--account-size_small);
  line-height: var(--lh-1-1);
  color: var(--ak-mid-gray);
}

#account-wrap .account-plan__sub.is-cancelled{
  color: #b33; /* or a token like var(--ak-danger) */
  font-weight: var(--account--font-weight_1);
}

/* Optional: note inside the Manage menu ("Ends DD-MM-YY") */
.account-manage-menu__note{
  padding: 8px 12px;
  font-size: var(--account-size_small);
  color: var(--ak-mid-gray);
  pointer-events: none;
}


/* ===========================
   PLANS PANEL (account skin)
   =========================== */

#plans-wrap .plans-ui{
  width: 100%;
}

#plans-wrap .plans-title{
  margin: 0 0 var(--s18-p-);
  font-size: var(--a-size);
  font-weight: var(--account--font-weight_1);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--ak-dark);
}

#plans-wrap .plans-cards{
  display: grid;
  gap: var(--s20-p-);
}

#plans-wrap .plans-card{
  background: var(--ak-white);
  border: var(--s1-p-) solid rgba(0,0,0,0.08);
  border-radius: var(--ak-radius-card);
  box-shadow: 0 var(--s5-p-) var(--s16-p-) rgba(0,0,0,.06);
  padding: var(--s18-p-);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) 180px;
  column-gap: var(--s18-p-);
  row-gap: var(--s12-p-);
  align-items: flex-start;

}


#plans-wrap .plans-card__top{
  grid-column: 1 / 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s18-p-);
  margin-bottom: 0;
}

#plans-wrap .plans-card__plan{
  font-size: var(--b-size);
  font-weight: var(--account--font-weight_2);
  color: var(--ak-dark);
}

#plans-wrap .plans-card__slash,
#plans-wrap .plans-card__mode{
  font-size: var(--b-size);
  font-weight: var(--account--font-weight_0);
  color: var(--ak-dark)
}

#plans-wrap .plans-card__slash{ margin: 0px; }

#plans-wrap .plans-card__sub{
  margin-top: 4px;
  font-size: var(--account-size_small);
  color: var(--ak-dark);
}

#plans-wrap .plans-card__price{
  text-align: right;
  white-space: nowrap;
}

#plans-wrap .plans-card__amount{
  font-size: var(--a-size);
  font-weight: var(--account--font-weight_1);
  letter-spacing: var(--account--letter-spacing_small);
  color: var(--ak-dark);
}

#plans-wrap .plans-card__per{
  font-size: var(--account-size_small);
    font-weight: var(--account--font-weight_0);
  letter-spacing: var(--account--letter-spacing_small);
  color: var(--ak-dark);
  margin-left: 0px;
}

#plans-wrap .plans-btn{
  grid-column: 3 / 4;
  justify-self: stretch;
  align-self: center;
  width: 100%;
  padding: 0 var(--s24-p-);
  height: var(--ak-height-pill);
  border-radius: calc(var(--ak-radius-pill) * 1.8);
  border: var(--s1-p-) solid var(--ak-dark);
  background: var(--ak-white-sec);
  color: var(--ak-dark);
  font: inherit;
  font-size: var(--account-size_reg);
  font-weight: var(--account--font-weight_1);
  cursor: pointer;
  box-shadow: var(--ak-shadow-soft);
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

#plans-wrap .plans-btn:hover{
  background: var(--ak-hover);
}

#plans-wrap .plans-btn--primary{
  background: var(--ak-dark);
  color: var(--ak-white);
  border-color: transparent;
}

#plans-wrap .plans-btn--primary:hover{
  background: var(--ak-hover);
  color: var(--ak-dark);
}

#plans-wrap .plans-list{
  grid-column: 1 / 3;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s12-p-);
  font-size: var(--account-size_reg);
  color: rgba(1,23,43,.80);
}


#plans-wrap .plans-list li{
  display: flex;
  gap: var(--s10-p-);
  align-items: flex-start;
}

#plans-wrap .plans-list li::before{
  content: "✓";
  display: inline-block;
  width: 1.2em;
  color: var(--ak-dark);
  opacity: 0.9;
}



@media (max-width: 420px){
  #account-wrap .account-row--kv,
  #account-wrap .account-row--signin{
    grid-template-columns: 1fr;
  }
  #account-wrap .account-actions{
    grid-template-columns: 1fr;
  }
}

#signin-toast.signin-toast.account-panel {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
  height: 720px;
  min-height: 0;
  z-index: 995;
}

#signin-toast[hidden] {
  display: none !important;
  pointer-events: none !important;
}

#signin-toast:not([hidden]) {
  display: flex !important;
  pointer-events: auto;
}

#signin-toast .signin-toast__header {
  min-height: 0;
  padding: 10px 14px 0 14px;
}

#signin-toast .signin-toast__bodywrap {
  padding: var(--panel-pad-y) var(--panel-pad-x);
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#signin-toast .signin-toast__body {
  font-size: var(--font1-size);
  font-weight: var(--font3-weight);
  color: var(--ak-dark);
  margin: 0 0 14px 0;
  display: none;
}

#signin-toast .auth-module {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  text-align: left;
  --auth-head-top: 0px;
  --auth-head-reserve: 20px;
  padding-top: var(--auth-head-reserve);
}

#signin-toast .auth-head {
  position: absolute;
  top: var(--auth-head-top);
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

#signin-toast .signin-toast__title {
  font-size: var(--b-size);
  font-weight: var(--h1-weight);
  color: var(--ak-dark);
  letter-spacing: var(--h1-letter-spacing);
}

#signin-toast .auth-foot {
  margin-top: auto;
  width: 100%;
  padding-top: 0;
}

#signin-toast .auth-guestbar {
  margin-left: calc(var(--panel-pad-x) * -1);
  margin-right: calc(var(--panel-pad-x) * -1);
  margin-bottom: calc(var(--panel-pad-y) * -1);
  background: rgb(224, 224, 224);
  padding: 18px 24px;
  border: 0;
  display: flex;
  justify-content: center;
}

#signin-toast .signin-toast__block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

#signin-toast .signin-toast__cta {
  width: 100%;
}

#signin-toast .signin-toast__dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #5a5a5a;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 821px) {
  #signin-toast.signin-toast.account-panel {
    width: min(480px, calc(100vw - 32px));
    height: 580px;
  }
#plans-wrap.account-panel,
#projects-wrap.account-panel,
  .account-panel {
  height: 580px;            
}
}