/* The same white surface, radius and motion as the shared hamburger drawer. */
:root {
  --academy-panel-surface: #fff;
  --academy-panel-border: #dce5e7;
  --academy-panel-radius: 22px;
  --academy-panel-shadow: 0 5px 0 #e4e8e6, 0 12px 30px rgb(14 27 53 / 5%);
  --academy-panel-ink: #0e1b35;
  --academy-panel-muted: #536075;
  --academy-panel-accent: #0076a8;
  --academy-panel-soft: #eaf8fe;
}
.academy-surface {
  box-sizing: border-box; border: 1px solid var(--academy-panel-border);
  border-radius: var(--academy-panel-radius); background: var(--academy-panel-surface);
  color: var(--academy-panel-ink); box-shadow: var(--academy-panel-shadow);
}
.academy-dialog {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px);
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  font-family: var(--site-font, sans-serif); direction: rtl;
  box-shadow: 0 28px 70px rgb(14 27 53 / 20%);
}
.academy-dialog::backdrop { background: rgb(14 27 53 / 28%); backdrop-filter: blur(7px); }
.academy-action,.academy-secondary-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border: 1px solid var(--academy-panel-accent);
  border-radius: 12px; background: var(--academy-panel-accent); color: #fff;
  box-shadow: 0 4px 0 #00516f; font: inherit; font-weight: 800; text-decoration: none;
  cursor: pointer; text-align: center;
}
.academy-action:hover { background: #00658f; color: #fff; }
.academy-secondary-action { background: #fff; color: var(--academy-panel-accent); border-color: var(--academy-panel-border); box-shadow: none; }
.academy-secondary-action:hover { background: var(--academy-panel-soft); }
.academy-action:disabled { background: #e9eef1; color: #647583; border-color: #d8e1e6; box-shadow: none; cursor: not-allowed; }
.academy-close {
  display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center;
  padding: 0; border: 1px solid var(--academy-panel-border); border-radius: 10px;
  background: #f4f7f8; color: var(--academy-panel-muted); font: inherit; font-size: 1.4rem; cursor: pointer;
}
.academy-close:hover { background: var(--academy-panel-soft); color: var(--academy-panel-accent); }
.academy-surface :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #75c7e6; outline-offset: 3px; }
.account-avatar-color { background: var(--account-avatar-bg, #eaf8fe); color: var(--academy-panel-accent); }
.topbar .account-menu .account-button.account-avatar-color,
.topbar .account-menu .large-avatar.account-avatar-color,
.profile-page .profile-avatar.account-avatar-color,
.profile-settings-page .settings-avatar-preview.account-avatar-color {
  background: var(--account-avatar-bg, #eaf8fe) !important; color: var(--academy-panel-accent) !important;
  border-color: #d4eaf4 !important; text-shadow: none !important;
}
.topbar .account-menu .account-button.account-avatar-color { font-size: 1rem; font-weight: 800; box-shadow: none !important; }
body .topbar .account-menu .account-button.account-avatar-color[aria-expanded][data-account-button] {
  background: var(--account-avatar-bg, #eaf8fe) !important; color: var(--academy-panel-accent) !important; text-shadow: none !important;
}
.topbar .account-menu .account-button.account-avatar-color:hover,
.topbar .account-menu .account-button.account-avatar-color[aria-expanded="true"] { box-shadow: 0 0 0 3px #8bd1eb !important; }
.account-menu .account-popover {
  width: min(310px, calc(100vw - 28px)); max-height: calc(100dvh - var(--topbar-height) - 30px);
  overflow: auto; padding: 0; border: 1px solid var(--academy-panel-border); border-radius: 22px;
  background: #fff; color: var(--academy-panel-ink); box-shadow: 0 28px 70px rgb(14 27 53 / 18%);
  font-family: var(--site-font, sans-serif);
}
.account-menu .account-information { padding: 18px; border-bottom-color: #e7edf0; }
.account-menu .account-information strong { font-size: .9rem; color: var(--academy-panel-ink); }
.account-menu .account-information small { font-size: .75rem; color: var(--academy-panel-muted); }
.account-menu .account-navigation { display: grid; gap: 5px; padding: 10px; }
.account-menu .account-navigation > a,
.account-menu .account-navigation form button {
  display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 10px;
  min-height: 48px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--academy-panel-ink); text-align: start; font: inherit;
  font-size: .85rem; cursor: pointer; text-decoration: none;
}
.account-menu .account-navigation > a:hover,.account-menu .account-navigation form button:hover { background: var(--academy-panel-soft); color: var(--academy-panel-accent); }
.account-menu .account-navigation .compact-drawer-icon { background: #f1f6f8; color: var(--academy-panel-accent); }
.account-menu .account-navigation .compact-drawer-icon svg { width: 20px; height: 20px; }
.account-menu .account-navigation form { padding-top: 5px; border-top: 1px solid #e7edf0; }
.account-menu .account-navigation form button { color: #9b3e48; }
.account-menu .account-navigation form button:hover { background: #fff3f3; color: #9b3e48; }
.access-panel .access-primary.academy-action { background: var(--academy-panel-accent); border-color: var(--academy-panel-accent); box-shadow: 0 4px 0 #00516f; }
.access-panel .access-primary.academy-action:hover:not(:disabled) { background: #00658f; border-color: #00658f; box-shadow: 0 4px 0 #00516f; transform: none; }
.access-page:has(.access-standalone.academy-surface) { background: #f9fcfb; }
@media (max-width: 540px) {
  .academy-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  .account-menu .account-popover { border-radius: 18px; max-height: calc(100dvh - var(--topbar-height) - 20px); }
}

/* Keep the avatar readable even when a dark hero controls header colors. */
body:is(.site-header-light-text,.site-header-overlay,.figma-v18-body) .topbar .account-menu .account-button.account-avatar-color { background:var(--account-avatar-bg,#eaf8fe)!important; color:var(--academy-panel-accent)!important; }
.account-menu .account-popover:not([hidden]) { animation:academy-panel-enter 190ms cubic-bezier(.22,1,.36,1) both; }
.account-menu .account-navigation form button:focus-visible { outline:3px solid #75c7e6; outline-offset:2px; }
.account-menu .account-navigation form button .compact-drawer-icon { color:inherit; }
.account-menu .account-navigation>a .compact-drawer-icon { flex:none; }
.access-dialog.academy-dialog { border-color:var(--academy-panel-border); border-radius:var(--academy-panel-radius); background:var(--academy-panel-surface); }
.access-standalone.academy-surface { border-color:var(--academy-panel-border); border-radius:var(--academy-panel-radius); box-shadow:var(--academy-panel-shadow); }
.access-page { background:#f9fcfb; }
.access-panel .access-header { margin:0 -28px 22px; padding:0 28px 18px; border-bottom:1px solid #e7edf0; }
.access-panel .access-description { margin-bottom:20px; font-size:.86rem; }
.access-panel .access-primary.academy-action { background:var(--academy-panel-accent); border-color:var(--academy-panel-accent); box-shadow:0 4px 0 #00516f; transform:none; }
.access-panel .access-primary.academy-action:hover { background:#00658f; transform:none; }
.access-panel .access-primary.academy-action:disabled { background:#dfe8ed; border-color:#dfe8ed; color:#617682; opacity:1; box-shadow:none; }
.access-panel .access-close.academy-close { background:#f4f7f8; border-color:var(--academy-panel-border); }
body:is(.auth-body,.account-page-body,.access-page-body).site-header-overlay .site-main>:first-child { margin-top:0!important; padding-top:28px; }
@keyframes academy-panel-enter { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
@media(max-width:540px) { .access-panel .access-header { margin-inline:-20px; padding-inline:20px; } .account-menu .account-information { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .account-menu .account-popover:not([hidden]),.academy-dialog[open] { animation:none; } }