/* ============================================================
   DS Confirm — a small, theme-matching confirmation modal that
   replaces the browser's native confirm() dialog everywhere in
   the app, for a consistent, professional look and feel.
   ============================================================ */

.ds-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,25,20,.42);
  backdrop-filter:blur(1.5px);
  opacity:0;
  transition:opacity .18s ease;
  padding:20px;
}
.ds-confirm-overlay.show{opacity:1}

.ds-confirm-box{
  width:min(92vw,360px);
  background:var(--surface,#fff);
  border:1px solid var(--line,#dde3ee);
  border-radius:16px;
  box-shadow:0 30px 70px rgba(15,35,75,.28);
  padding:22px 22px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  transform:scale(.92) translateY(6px);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.ds-confirm-overlay.show .ds-confirm-box{transform:scale(1) translateY(0)}

.ds-confirm-icon{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  font-size:20px;font-weight:800;line-height:1;
  background:#fbeceb;color:#b94549;
}
.ds-confirm-box.tone-primary .ds-confirm-icon{background:#eaf2fb;color:#3f66a8}

.ds-confirm-msg{font-size:12.5px;font-weight:700;color:var(--text,#183327);line-height:1.7}

.ds-confirm-actions{display:flex;gap:8px;width:100%;margin-top:6px}
.ds-confirm-actions .btn{flex:1}