/* Shared toast surface for authentication, dashboard, Hub, and payments. */
.auth-shell .alert,
:is(.dash-app, .payment-page) .dash-notice {
  --toast-accent: #26805e;
  --toast-icon-bg: #e7f5ed;
  --toast-bg: #ffffff;
  --toast-ink: #202121;
  --toast-muted: #69717d;
  --toast-border: #e3e5e9;
  --toast-button-bg: #f2f5f8;
  --toast-button-hover: #e8edf3;
  --toast-button-border: #d9e1e9;
  --toast-button-ink: #253244;
  --toast-primary-bg: #202a38;
  --toast-primary-ink: #ffffff;
  --toast-close: #758294;
  --toast-close-hover: #edf1f5;
  position: fixed !important;
  box-sizing: border-box !important;
  z-index: 2000 !important;
  top: auto !important;
  bottom: calc(var(--toast-bottom, 20px) + env(safe-area-inset-bottom, 0px)) !important;
  right: 20px !important;
  left: auto !important;
  width: min(360px, calc(100vw - 32px)) !important;
  min-height: 52px !important;
  max-height: min(360px, calc(100dvh - 40px));
  margin: 0 !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 18px !important;
  gap: 10px !important;
  align-items: center !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  border: 1px solid var(--toast-border) !important;
  border-radius: 10px !important;
  background: var(--toast-bg) !important;
  color: var(--toast-ink) !important;
  font: 400 14px/1.5 Arial, Helvetica, sans-serif !important;
  line-height: 1.45 !important;
  box-shadow: 0 6px 22px rgba(25, 42, 65, .09) !important;
  backdrop-filter: none !important;
  animation: toastUniversalIn .38s cubic-bezier(.16, 1, .3, 1) both !important;
}

.auth-shell .alert.error,
:is(.dash-app, .payment-page) .dash-notice.error {
  --toast-accent: #b94d5b;
  --toast-icon-bg: #fcebf0;
}

.auth-shell .alert.tip,
:is(.dash-app, .payment-page) .dash-notice.tip {
  --toast-accent: #286db4;
  --toast-icon-bg: #eaf3ff;
  z-index: 2001 !important;
}



.auth-shell[data-theme="dark"] .alert,
:is(.dash-app, .payment-page)[data-theme="dark"] .dash-notice {
  --toast-accent: #89d4af;
  --toast-icon-bg: #29463b;
  --toast-bg: #191c24;
  --toast-ink: #edf2fc;
  --toast-muted: #a6afbe;
  --toast-border: #303540;
  --toast-button-bg: #292d36;
  --toast-button-hover: #343a46;
  --toast-button-border: #3a414e;
  --toast-button-ink: #f6f7fa;
  --toast-primary-bg: #f5f6f8;
  --toast-primary-ink: #1b1e24;
  --toast-close: #8993a1;
  --toast-close-hover: #303640;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24) !important;
}

.auth-shell[data-theme="dark"] .alert.error,
:is(.dash-app, .payment-page)[data-theme="dark"] .dash-notice.error {
  --toast-accent: #ff9b9b;
  --toast-icon-bg: #423039;
}

.auth-shell[data-theme="dark"] .alert.tip,
:is(.dash-app, .payment-page)[data-theme="dark"] .dash-notice.tip {
  --toast-accent: #9fc5ff;
  --toast-icon-bg: #293b54;
}

.auth-shell .alert .toast-icon,
:is(.dash-app, .payment-page) .dash-notice .toast-icon {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 24px;
  border-radius: 7px !important;
  background: var(--toast-icon-bg) !important;
  color: var(--toast-accent) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.auth-shell .alert .toast-content,
:is(.dash-app, .payment-page) .dash-notice .toast-content {
  min-width: 0;
  display: block;
  padding-top: 0;
}

.auth-shell .alert .toast-content :is(strong, b),
:is(.dash-app, .payment-page) .dash-notice .toast-content :is(strong, b) {
  display: block;
  margin: 0 0 3px;
  color: var(--toast-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  line-height: 1.4;
}

:is(.dash-app, .payment-page) .dash-notice.success .toast-content > strong {
  display: none !important;
}

:is(.dash-app, .payment-page) .dash-notice.success .toast-message {
  color: var(--toast-ink) !important;
}

.auth-shell .alert .toast-message,
:is(.dash-app, .payment-page) .dash-notice .toast-message {
  display: block;
  color: var(--toast-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
}

.auth-shell .alert .toast-actions,
:is(.dash-app, .payment-page) .dash-notice .toast-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.auth-shell .alert .toast-action,
:is(.dash-app, .payment-page) .dash-notice .toast-action {
  appearance: none;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--toast-button-border) !important;
  border-radius: 6px !important;
  background: var(--toast-button-bg) !important;
  color: var(--toast-button-ink) !important;
  font: 400 12px/1 Arial, Helvetica, sans-serif !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}

.auth-shell .alert .toast-action:hover,
:is(.dash-app, .payment-page) .dash-notice .toast-action:hover {
  transform: none !important;
  background: var(--toast-button-hover) !important;
  border-color: var(--toast-border) !important;
}

.auth-shell .alert .toast-action.primary,
:is(.dash-app, .payment-page) .dash-notice .toast-action.primary {
  border-color: var(--toast-primary-bg) !important;
  background: var(--toast-primary-bg) !important;
  color: var(--toast-primary-ink) !important;
}

.auth-shell .alert .toast-action.primary:hover,
:is(.dash-app, .payment-page) .dash-notice .toast-action.primary:hover { filter: brightness(.9); }

.auth-shell .alert .toast-close,
:is(.dash-app, .payment-page) .dash-notice .toast-close {
  width: 18px !important;
  height: 22px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--toast-close) !important;
  font: 400 20px/1 Arial, sans-serif !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: color .18s, background .18s !important;
}

.auth-shell .alert .toast-close:hover,
:is(.dash-app, .payment-page) .dash-notice .toast-close:hover {
  background: var(--toast-close-hover) !important;
  color: var(--toast-ink) !important;
}

.auth-shell .alert .toast-progress,
:is(.dash-app, .payment-page) .dash-notice .toast-progress {
  display: none !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--toast-accent);
  opacity: .75;
  transform-origin: left;
  animation: toastProgress 5s linear forwards;
}

.auth-shell .alert.tip .toast-progress,
:is(.dash-app, .payment-page) .dash-notice.tip .toast-progress { animation-duration: 12s; }

.auth-shell .alert.is-hiding,
:is(.dash-app, .payment-page) .dash-notice.is-hiding {
  pointer-events: none !important;
  animation: toastUniversalOut .28s cubic-bezier(.4, 0, 1, 1) forwards !important;
}

.is-hiding .toast-progress { animation-play-state: paused; }
@keyframes toastUniversalIn {
  from { opacity: 0; transform: translateX(20px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes toastUniversalOut {
  to { opacity: 0; transform: translateX(20px) scale(.97); }
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 600px) {
  .auth-shell .alert,
  :is(.dash-app, .payment-page) .dash-notice {
    top: auto !important;
    bottom: calc(var(--toast-bottom, 12px) + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    min-height: 52px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    grid-template-columns: 24px minmax(0, 1fr) 18px !important;
    gap: 10px !important;
  }


}

@media (prefers-reduced-motion: reduce) {
  .auth-shell .alert,
  :is(.dash-app, .payment-page) .dash-notice,
  .auth-shell .alert.is-hiding,
  :is(.dash-app, .payment-page) .dash-notice.is-hiding,
  .toast-progress { animation: none !important; }
}

/* Action groups share one compact row; narrow screens place them below the text. */
:is(.auth-shell,.dash-app,.payment-page) :is(.alert,.dash-notice).toast-has-actions{width:min(400px,calc(100vw - 24px))!important;grid-template-columns:24px minmax(0,1fr) auto 18px!important;align-items:center!important}
:is(.auth-shell,.dash-app,.payment-page) .toast-has-actions>.toast-icon{grid-column:1;grid-row:1}
:is(.auth-shell,.dash-app,.payment-page) .toast-has-actions>.toast-content{grid-column:2;grid-row:1}
:is(.auth-shell,.dash-app,.payment-page) .toast-has-actions>.toast-actions{grid-column:3;grid-row:1;margin:0!important;max-width:160px}
:is(.auth-shell,.dash-app,.payment-page) .toast-has-actions>.toast-close{grid-column:4;grid-row:1;align-self:center}
@media(max-width:600px){:is(.auth-shell,.dash-app,.payment-page) :is(.alert,.dash-notice).toast-has-actions{width:auto!important}}
@media(max-width:380px){:is(.auth-shell,.dash-app,.payment-page) :is(.alert,.dash-notice).toast-has-actions{grid-template-columns:24px minmax(0,1fr) 18px!important;row-gap:8px!important}:is(.auth-shell,.dash-app,.payment-page) .toast-has-actions>.toast-actions{grid-column:2;grid-row:2;max-width:100%}:is(.auth-shell,.dash-app,.payment-page) .toast-has-actions>.toast-close{grid-column:3}}
/* One actionable notice replaces the low-balance error + tip stack. */
:is(.dash-app,.payment-page) .dash-notice.balance-notice{width:min(400px,calc(100vw - 24px))!important;min-height:68px!important;padding:12px!important;grid-template-columns:24px minmax(0,1fr) auto 18px!important;align-items:center!important;gap:10px!important}
:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-icon{grid-column:1;grid-row:1;margin:0}
:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-content{grid-column:2;grid-row:1}
:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-content>strong{font-size:13px!important;font-weight:500!important;margin:0 0 3px}
:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-message{font-size:13px!important}
:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-actions{grid-column:3;grid-row:1;display:flex!important;width:auto!important;margin:0!important;padding:0!important;gap:0!important}
:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-action{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:none!important;width:auto!important;height:32px!important;min-height:32px!important;max-height:32px!important;margin:0!important;padding:0 10px!important;border-radius:6px!important;font:400 12px/1 Arial,Helvetica,sans-serif!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:none!important}
:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-close{grid-column:4;grid-row:1;width:18px!important;height:22px!important;align-self:center}
:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-action:hover{transform:none}
@media(max-width:380px){:is(.dash-app,.payment-page) .dash-notice.balance-notice{grid-template-columns:24px minmax(0,1fr) 18px!important;row-gap:8px!important}:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-close{grid-column:3}:is(.dash-app,.payment-page) .dash-notice.balance-notice .toast-actions{grid-column:2;grid-row:2;justify-self:start}}