/* One charcoal language for dashboard header controls and their popovers. */
body.dashboard-page .top-actions { gap: 10px; }
body.dashboard-page .top-primary-actions,
body.dashboard-page .top-account-actions { gap: 4px; }
body.dashboard-page .top-account-actions { padding-right: 12px; border-right-color: #ffffff1c; }
body.dashboard-page .top-actions :is(.dashboard-minimal-native,.notification-toggle) {
  display: inline-grid;
  place-items: center;
  width: 40px!important;
  min-width: 40px!important;
  max-width: 40px!important;
  height: 40px!important;
  min-height: 40px!important;
  padding: 0!important;
  border: 1px solid transparent!important;
  border-radius: 10px;
  background: transparent!important;
  box-shadow: none!important;
  color: #d7d9df;
  transition: color .18s,background-color .18s,border-color .18s;
}
body.dashboard-page .top-actions :is(.dashboard-minimal-native,.notification-toggle):is(:hover,:focus-visible,[aria-expanded="true"]) {
  border-color: #ffffff16!important;
  background: #ffffff0c!important;
  box-shadow: none!important;
  color: #fff;
}
body.dashboard-page .top-actions :is(.dashboard-minimal-native,.notification-toggle):focus-visible { outline: 2px solid #ae91eb; outline-offset: 2px; }
body.dashboard-page .top-actions :is(.dashboard-create-shortcut,.dashboard-circle-shortcut,.hero-credit-trigger,.user-menu) > span > svg,
body.dashboard-page .top-actions .dashboard-circle-mobile > span > svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.dashboard-page .top-actions .dashboard-create-shortcut > span > svg { width: 20px; height: 20px; }
body.dashboard-page .top-actions .notification-toggle svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
body.dashboard-page .top-actions .user-menu .avatar { width: 29px; height: 29px; color: inherit; }
body.dashboard-page .top-actions .hero-credit-trigger > span { color: inherit; }
body.dashboard-page .top-actions .hero-credit-trigger {
  display: inline-flex!important;
  align-items: center;
  gap: 7px;
  width: auto!important;
  min-width: 0!important;
  max-width: none!important;
  padding-inline: 9px!important;
  white-space: nowrap;
}
body.dashboard-page .top-actions .hero-credit-trigger > strong {
  display: inline-block!important;
  color: #f1e9ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
body.dashboard-page .top-actions .hero-credit-trigger > span { display: grid; place-items: center; flex: none; }
body.dashboard-page .top-actions .notification-dot { min-width: 16px; height: 16px; inset: -4px auto auto -3px; padding: 0 3px; border: 1px solid #101115; background: #765aa5; box-shadow: none; font-size: 8px; line-height: 15px; }
body.dashboard-page .top-actions .dashboard-circle-mobile { display: none!important; }

body.dashboard-page :is(.hero-credit-popover,.notifications-panel,.profile-menu) {
  z-index: 9200;
  border: 1px solid #3a3c45;
  border-radius: 16px;
  background: #1a1c21;
  box-shadow: 0 20px 52px #000a,0 1px #ffffff0a inset;
  color: #e8e9ed;
}
body.dashboard-page :is(.hero-credit-popover,.notifications-panel,.profile-menu)[hidden] { display: none!important; }
body.dashboard-page .hero-credit-popover { position: fixed; width: min(320px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; }
body.dashboard-page .hero-credit-popover::before { display: none; }
body.dashboard-page .hero-credit-popover header { padding-bottom: 14px; border-bottom-color: #ffffff16; }
body.dashboard-page .hero-credit-popover header small { color: #a5a7b0; font-size: 10px; }
body.dashboard-page .hero-credit-popover header strong { color: #f5f3f8; font-size: 19px; }
body.dashboard-page .hero-credit-popover header > span,
body.dashboard-page .hero-credit-details > div > span { width: 28px; height: 28px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #bba4e7; font-size: 19px; }
body.dashboard-page .hero-credit-details { gap: 13px; padding: 16px 0; }
body.dashboard-page .hero-credit-details > div { align-items: center; gap: 10px; }
body.dashboard-page .hero-credit-details b { color: #e0e0e6; font-size: 11px; }
body.dashboard-page .hero-credit-details small { color: #a2a5ae; font-size: 10px; line-height: 1.8; }
body.dashboard-page .hero-credit-topup { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #ffffff1b; border-radius: 9px; background: #24262d; color: #e7dffa; font: 700 11px Vazirmatn,Tahoma,sans-serif; box-shadow: none; }
body.dashboard-page .hero-credit-topup:hover { border-color: #8b75b2; background: #2b2933; filter: none; }
body.dashboard-page .hero-credit-topup > span { font-size: 16px; color: #bca6e5; }

body.dashboard-page .notifications-panel { width: min(390px,calc(100vw - 24px)); overflow: hidden; }
body.dashboard-page .notifications-head { min-height: 54px; padding: 12px 16px; border-bottom-color: #ffffff17; }
body.dashboard-page .notifications-head strong { font-size: 13px; }
body.dashboard-page .notifications-list { max-height: min(430px,55dvh); scrollbar-color: #42434a transparent; }
body.dashboard-page .notification-item { border-bottom-color: #ffffff12; }
body.dashboard-page .notification-item:hover { background: #ffffff08; }
body.dashboard-page .notification-item.read { opacity: .72; }
body.dashboard-page .notification-open { align-items: flex-start; gap: 10px; padding: 14px 34px 14px 16px; color: #e7e8ec; }
body.dashboard-page .notification-open strong { font-size: 11px; line-height: 1.8; }
body.dashboard-page .notification-open small { color: #adb0ba; font-size: 10px; line-height: 1.9; }
body.dashboard-page .notification-open time { color: #898d99; font-size: 9px; }
body.dashboard-page .notification-icon { width: 21px; height: 22px; border: 0; border-radius: 0; background: transparent!important; font-size: 15px; font-weight: 700; }
body.dashboard-page .notification-icon.success { color: #79cba9; }
body.dashboard-page .notification-icon.error { color: #ec9aa8; }
body.dashboard-page .notification-icon.warning { color: #e7c18b; }
body.dashboard-page .notification-remove { color: #9799a3; }
body.dashboard-page .notification-remove:hover { background: #ffffff0c; color: #f0a1ac; }
body.dashboard-page .notifications-manage { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 43px; padding: 9px 16px; border-top: 1px solid #ffffff16; background: #1a1c21; color: #d3c3ed; font: 700 10px Vazirmatn,Tahoma,sans-serif; }
body.dashboard-page .notifications-manage:hover { background: #25242b; color: #fff; }

body.dashboard-page .profile-menu { width: 220px; padding: 8px; }
body.dashboard-page .profile-menu .profile-label { padding: 8px 10px 11px; border-bottom: 1px solid #ffffff13; color: #9fa2ad; font-size: 10px; }
body.dashboard-page .profile-menu button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 41px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #e2e3e8; text-align: right; font: 700 11px Vazirmatn,Tahoma,sans-serif; }
body.dashboard-page .profile-menu button:hover { background: #ffffff0c; color: #fff; }
body.dashboard-page .profile-menu button svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: #b8a6d8; }
body.dashboard-page .profile-menu [data-logout] { color: #e9a1ad; }
body.dashboard-page .profile-menu [data-logout] svg { color: inherit; }
body.dashboard-page .profile-menu button:focus-visible,
body.dashboard-page :is(.hero-credit-popover,.notifications-panel) button:focus-visible { outline: 2px solid #ae91eb; outline-offset: -2px; }
.dashboard-action-tooltip { z-index: 9500; border-color: #3b3d46; background: #24262c; box-shadow: 0 8px 24px #0008; color: #f1f1f4; }

@media (min-width: 761px) and (max-width: 900px) {
  body.dashboard-page .top-actions .dashboard-circle-mobile { display: inline-grid!important; }
  body.dashboard-page .top-actions .dashboard-circle-shortcut { display: none!important; }
}
@media (max-width: 760px) {
  body.dashboard-page .top-actions { gap: 3px; }
  body.dashboard-page .top-account-actions { padding-right: 0; border: 0; }
  body.dashboard-page .top-actions .dashboard-circle-mobile { display: inline-grid!important; }
  body.dashboard-page .top-actions :is(.dashboard-minimal-native,.notification-toggle) { width: 36px!important; min-width: 36px!important; max-width: 36px!important; height: 36px!important; min-height: 36px!important; }
  body.dashboard-page .top-actions .hero-credit-trigger { width: auto!important; min-width: 0!important; max-width: 112px!important; padding-inline: 6px!important; gap: 4px; }
  body.dashboard-page .top-actions .hero-credit-trigger > span { display: grid; }
  body.dashboard-page .top-actions .hero-credit-trigger > strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
  body.dashboard-page .hero-credit-popover { position: fixed; right: auto; width: min(320px,calc(100vw - 24px)); }
  body.dashboard-page .hero-credit-popover::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.dashboard-page .top-actions :is(.dashboard-minimal-native,.notification-toggle) { transition: none; }
}