.cd-backdrop { display:none; position:fixed; inset:0; background:rgba(11,11,11,0.45); align-items:center; justify-content:center; z-index:1000; }
.cd-backdrop.show { display:flex; }
.cd-modal { background:var(--surface-1,#fcfcfb); border:1px solid var(--border,rgba(11,11,11,0.10)); border-radius:16px; padding:28px; width:340px; max-width:calc(100vw - 32px); text-align:center; box-shadow:0 20px 60px rgba(11,11,11,0.18); font-family:inherit; }
.cd-logo { height:44px; width:auto; display:block; margin:0 auto 22px; }
.cd-message { font-size:15px; color:var(--text-primary,#0b0b0b); margin:0 0 18px; line-height:1.5; white-space:pre-wrap; }
.cd-input { width:100%; box-sizing:border-box; font:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--border,rgba(11,11,11,0.10)); border-radius:9px; margin:-4px 0 22px; }
.cd-input:focus { outline:none; border-color:var(--accent,#2a78d6); }
.cd-actions { display:flex; gap:10px; }
.cd-actions button { flex:1; font:inherit; font-size:14px; font-weight:600; border-radius:9px; padding:10px 16px; cursor:pointer; border:1px solid transparent; }
.cd-cancel { background:var(--surface-page,#f9f9f7); border-color:var(--border,rgba(11,11,11,0.10)); color:var(--text-primary,#0b0b0b); }
.cd-cancel:hover { border-color:var(--text-muted,#898781); }
.cd-ok { background:var(--accent,#2a78d6); color:#fff; }
.cd-ok:hover { background:var(--accent-hover,#1f63b3); }
.cd-stars { display:none; justify-content:center; gap:6px; margin:-6px 0 20px; }
.cd-star { background:none; border:none; cursor:pointer; padding:2px; font-size:26px; line-height:1; color:var(--border,#d8d7d0); transition:color .1s ease, transform .1s ease; }
.cd-star:hover { transform:scale(1.12); }
.cd-star.filled { color:#e0a000; }

/* ---- Undo toast (added Sept 2026, see showUndoToast in dialogs.js) ---------------------------
   Deliberately a fixed dark chip regardless of the page's light/dark theme (the common toast/
   snackbar pattern) rather than theme-variable-driven like the confirm modal above -- it's a
   brief, low-chrome overlay, not a themed surface the rest of the page reads as part of the UI. */
.undo-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  display: flex; align-items: center; gap: 16px;
  background: #232322; color: #f5f5f3; border-radius: 10px;
  padding: 12px 14px 12px 18px; box-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.2);
  font-size: 14px; line-height: 1.4; z-index: 1100;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  max-width: calc(100vw - 32px);
}
.undo-toast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.undo-toast-message { white-space: pre-wrap; }
.undo-toast-btn {
  flex: none; background: none; border: none; color: #7db8ff; font: inherit; font-weight: 700;
  cursor: pointer; padding: 4px 2px; border-radius: 4px;
}
.undo-toast-btn:hover { text-decoration: underline; }
.undo-toast-btn:focus-visible { outline: 2px solid #7db8ff; outline-offset: 2px; }