/* ==========================================================================
   dialog.css — the in-app confirm / prompt / alert boxes.
   Must be loaded anywhere dialog.js is, or the dialog renders as bare HTML.
   ========================================================================== */
/* Own defaults, so the dialog looks right on any page. A host stylesheet that
   defines these tokens overrides them; one that doesn't still gets a dialog. */
.dlg{
  --dlg-ink:#151515; --dlg-ink-2:#5B5B58; --dlg-line:#E8E8E4; --dlg-bg-2:#F6F6F4;
  --dlg-brand:#151515; --dlg-brand-600:#000; --dlg-brand-50:#F4F1FE; --dlg-brand-100:#EDE9FE;
  --dlg-accent:#7C3AED; --dlg-red:#DC2626; --dlg-red-bg:#FEF2F2;
}
.dlg{position:fixed;inset:0;background:rgba(24,26,42,.55);backdrop-filter:blur(2px);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:24px}
.dlg[hidden]{display:none}
.dlg-box{background:#fff;border-radius:16px;width:100%;max-width:420px;padding:28px 26px 22px;
  text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.32);animation:dlgPop .16s ease}
@keyframes dlgPop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.dlg-icon{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:var(--dlg-brand-100);color:var(--dlg-accent)}
.dlg-icon svg{width:26px;height:26px}
.dlg[data-tone="danger"] .dlg-icon{background:var(--dlg-red-bg);color:var(--dlg-red)}
.dlg-title{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.dlg-msg{font-size:14.5px;color:var(--dlg-ink-2);line-height:1.6}
.dlg-msg[hidden]{display:none}
.dlg-label{display:block;text-align:left;font-size:13.5px;font-weight:600;color:var(--dlg-ink-2);
  margin:18px 0 7px}
.dlg-label[hidden]{display:none}
.dlg-input[hidden]{display:none}
.dlg-input{width:100%;padding:11px 14px;border:1px solid var(--dlg-line);border-radius:9px;
  font-family:inherit;font-size:15px;margin-top:16px}
.dlg-input:focus{outline:none;border-color:var(--dlg-brand);box-shadow:0 0 0 3px var(--dlg-brand-50)}
.dlg-label:not([hidden])+.dlg-input{margin-top:0}
.dlg-actions{display:flex;gap:10px;margin-top:24px}
.dlg-btn{flex:1;padding:11px 18px;border-radius:9px;border:1px solid transparent;font-family:inherit;
  font-size:14.5px;font-weight:600;cursor:pointer;transition:background .14s,border-color .14s}
.dlg-cancel{background:#fff;border-color:var(--dlg-line);color:var(--dlg-ink)}
.dlg-cancel:hover{background:var(--dlg-bg-2)}
.dlg-cancel[hidden]{display:none}
.dlg-ok{background:var(--dlg-brand);color:#fff}
.dlg-ok:hover{background:var(--dlg-brand-600)}
.dlg[data-tone="danger"] .dlg-ok{background:var(--dlg-red)}
.dlg[data-tone="danger"] .dlg-ok:hover{filter:brightness(.93)}