/* Pre-save guards: "this name matches an Etsy listing" and "a project with that
   name already exists". Both reuse the shared themed-dialog shell; only the
   quoted value and the three-way action row are specific. */
.saveGuard{ max-width:540px; }
.saveGuard .themedDialogIcon img{ width:26px; height:26px; display:block; }
.saveGuardQuote{
  margin:10px 0 !important; padding:11px 13px;
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-left-width:3px; border-radius:10px;
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  color:var(--text); font-weight:800; line-height:1.4;
}
.saveGuardWhy{ color:var(--muted); font-size:.82rem; line-height:1.55; }
/* Three choices, so they stack rather than squeeze on a narrow dialog. */
.saveGuardActions{ display:flex; flex-wrap:wrap; gap:9px; }
.saveGuardActions .btn{ flex:1 1 auto; }
@media (max-width:560px){
  .saveGuardActions{ flex-direction:column; }
  .saveGuardActions .btn{ width:100%; }
}

/* Reformatted Etsy-name body: a short lead, the quoted listing, then the two
   choices as a scannable list keyed to the two buttons -- clearer than one long
   paragraph that wrapped awkwardly. */
.saveGuardLead{ margin:0; }
.saveGuardOptions{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.saveGuardOptions li{
  position:relative; padding:10px 12px 10px 14px; font-size:.86rem; line-height:1.5;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius:9px;
}
.saveGuardOptions li b{ color:var(--text); }