/* ═══════════════════════════════════════════════════════════════
   settings-save.css — bottom action bar inside the Settings panel
   (Save / Reset) + global toast for save confirmation.
   ═══════════════════════════════════════════════════════════════ */

/* Action bar — sticks to the bottom of the scrollable Settings card. */
.mb-action-bar {
  display: flex;
  gap: 10px;
  padding: 14px 0 6px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#settingsSaveBtn {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--amber);
  color: #18121b;
  border: none;
  border-radius: 12px;
  font-family: var(--f-sans);
  font-weight: 800;
  font-size: 0.96rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s, transform 0.12s;
}
#settingsSaveBtn:hover  { filter: brightness(1.08); }
#settingsSaveBtn:active { transform: translateY(1px); }

#settingsResetBtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#settingsResetBtn:hover {
  border-color: #ef5350;
  color: #ef5350;
}
#settingsResetBtn.settings-reset-armed {
  border-color: #ef5350;
  color: #ef5350;
  background: rgba(239, 83, 80, 0.10);
  animation: settings-reset-armed-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes settings-reset-armed-pulse {
  from { background: rgba(239, 83, 80, 0.08); }
  to   { background: rgba(239, 83, 80, 0.18); }
}

.light-mode #settingsResetBtn {
  color: rgba(0, 0, 0, 0.65);
  border-color: rgba(0, 0, 0, 0.18);
}

/* Toast — global, slides up from the bottom rail. */
.settings-toast {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));   /* above the bottom-nav, above the rail */
  transform: translate(-50%, 12px);
  z-index: 10050;                                          /* above EVERYTHING — even Settings */
  padding: 11px 18px;
  background: #1a1820;
  color: #fff;
  border: 1px solid rgba(232, 163, 61, 0.55);
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-toast.settings-toast-in {
  opacity: 1;
  transform: translate(-50%, 0);
}
.settings-toast-err { border-color: #ef5350; color: #ef5350; }

.light-mode .settings-toast {
  background: #fff;
  color: #18121b;
  border-color: rgba(232, 163, 61, 0.6);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}