/* ============ CONFIRM DIALOG ============ */
.cf-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
}
.cf-modal.open{display:flex}

.cf-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  cursor:pointer;
}

.cf-card{
  position:relative;z-index:1;
  width:100%;max-width:420px;
  background:var(--surface-1,#0e0e0c);
  border:1px solid var(--line,#2a2a25);
  border-radius:16px;
  padding:32px 28px 24px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:cf-pop .22s ease-out;
}
@keyframes cf-pop{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.cf-icon{
  width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line,#2a2a25);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;color:var(--ink-dim,#888);
}
.cf-icon svg{width:22px;height:22px}
.cf-card.danger .cf-icon{
  background:rgba(220,80,80,.1);
  border-color:rgba(220,80,80,.3);
  color:#e87575;
}

.cf-title{
  font-family:"Fraunces",serif;font-weight:500;font-size:22px;
  letter-spacing:-.01em;margin:0 0 10px;color:var(--ink,#e8e6dc);
}

.cf-msg{
  font-size:14px;line-height:1.55;color:var(--ink-dim,#999);
  margin:0 0 24px;
}

.cf-actions{
  display:flex;gap:10px;justify-content:center;
}

.cf-actions .btn{
  min-width:110px;padding:10px 22px;font-size:13.5px;font-weight:500;
}

.cf-cancel{
  background:transparent;
  border:1px solid var(--line,#2a2a25);
  color:var(--ink,#e8e6dc);
}
.cf-cancel:hover{background:rgba(255,255,255,.04)}

.cf-confirm{
  background:var(--accent,#d4ff3e);
  border:1px solid var(--accent,#d4ff3e);
  color:#0a0a08;font-weight:600;
}
.cf-confirm:hover{filter:brightness(1.08)}

.cf-confirm.danger{
  background:#e35454;
  border-color:#e35454;
  color:#fff;
}
.cf-confirm.danger:hover{background:#d63d3d;border-color:#d63d3d}

@media (max-width:480px){
  .cf-card{margin:16px;padding:26px 22px 20px}
  .cf-actions{flex-direction:column-reverse}
  .cf-actions .btn{width:100%}
}
