/* ========= Reusable Modal (root) ========= */
.m-root[hidden] { display: none !important; }
.m-root {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  font-family: inherit;
}

/* Backdrop */
.m-backdrop {
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}

/* Dialog */
.m-dialog {
  position: relative;
  width: min(92vw, 460px);
  background: #fff; color: #0b3d1b;
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  z-index: 1;
}

/* Header / Title / Close */
.m-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.m-title { margin:0; font-weight: 800; font-size: 20px; }
.m-close {
  border:0; background:#f1f5f9; color:#111; font-size:18px;
  width:32px; height:32px; border-radius:8px; cursor:pointer;
}

/* Body */
.m-body { margin:12px 0 16px; }

/* Footer / actions */
.m-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Utility buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:9px; font-weight:700;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn--primary { background:#15803d; color:#fff; border-color:rgba(0,0,0,.04); }
.btn--ghost   { background:#fff; color:#0b3d1b; border:1px solid #cbd5e1; }
.btn--warn    { background:#f59e0b; color:#111; }

/* Shared small helpers */
.m-muted { color:#475569; font-size:12px; opacity:.85; }
.m-number { font-size: 26px; font-weight: 800; letter-spacing: .5px; margin: 10px 0 14px; }