.toast {
      position: fixed;
      left: 50%;
      bottom: calc(82px + var(--safe-bottom) + var(--bottom-lift));
      transform: translateX(-50%);
      background: #222;
      border: 1px solid #444;
      color: var(--text-secondary);
      padding: 10px 14px;
      border-radius: 999px;
      font-size: 14px;
      z-index: 400;
      display: none;
    }

.toast.show {
      display: block;
      animation: toastFade 1600ms ease forwards;
    }

/* Sticky/action toast (e.g. "update available - Reload"): no auto-fade, stays until acted on or
   dismissed. Same pill shell as the plain toast; flex row for message + action + dismiss. */
.toast.toast-sticky {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: calc(100vw - 32px);
      animation: none;
      opacity: 1;
    }

.toast-action {
      border: none;
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      background: var(--accent);
      cursor: pointer;
      flex-shrink: 0;
    }

.toast-dismiss {
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 16px;
      line-height: 1;
      padding: 4px 6px;
      cursor: pointer;
      flex-shrink: 0;
    }

/* ── Long-press action sheet ──
   The canonical, LAYOUT-ONLY rules live in community.css (Motion owns the backdrop fade +
   sheet slide via inline styles). The legacy rules that lived here (opacity:0 +
   pointer-events:none on the backdrop, transform+transition on the sheet, .active toggles)
   leaked through the cascade: Motion's inline opacity overrode the 0, but pointer-events:none
   was never overridden - so tapping the backdrop to dismiss the sheet did NOTHING - and the
   CSS transition fought Motion's per-frame transform. Do not re-add them. */

/* Custom confirm/alert/prompt modal */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 3100;
      background: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
    }

.modal-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

.modal-card {
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 18px;
      padding: 24px 22px;
      max-width: 370px;
      width: 100%;
      transform: scale(0.92);
      transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
    }

.modal-overlay.show .modal-card {
      transform: scale(1);
    }

.modal-message {
      font-size: 15px;
      line-height: 1.5;
      color: var(--text-secondary);
      margin-bottom: 20px;
      white-space: pre-wrap;
    }

.modal-input {
      width: 100%;
      border: 1px solid #444;
      border-radius: 10px;
      padding: 11px 13px;
      background: #111;
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

.modal-input:focus {
      outline: none;
      border-color: #4a9eff;
    }

.modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }

.modal-actions button {
      padding: 9px 20px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid #333;
      transition: background 0.15s ease;
    }

.modal-btn-cancel {
      background: #202020;
      color: var(--text-muted);
    }

.modal-btn-cancel:hover {
      background: #444;
    }

.modal-btn-confirm {
      background: #eee;
      color: #111;
      border-color: #eee !important;
    }

.modal-btn-confirm:hover {
      background: #ddd;
    }

.modal-btn-danger {
      background: #3a1515;
      color: #e55;
      border-color: #753030 !important;
    }

.modal-btn-danger:hover {
      background: #4d1c1c;
    }

.modal-btn-branch {
      background: #1a5fb4;
      color: var(--text-primary);
      border-color: #3584e4 !important;
    }

.modal-btn-branch:hover {
      background: #2365c0;
    }

.modal-btn-ok {
      background: #eee;
      color: #111;
      border-color: #eee !important;
      min-width: 72px;
    }

.modal-btn-ok:hover {
      background: #ddd;
    }