/* ui-modal.css — minimal look; won't override your existing styles */
:root{ --ui-bg:#0f172a; --ui-fg:#e2e8f0; --ui-accent:#22c55e; --ui-border:#334155; }

.ui-modal{ position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:50; }
.ui-modal.open{ opacity:1; pointer-events:auto; }
.ui-modal > .panel{ width:min(560px,92vw); background:var(--ui-bg); color:var(--ui-fg);
  border:1px solid var(--ui-border); border-radius:1rem; padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.ui-modal header{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
  border-bottom:1px solid var(--ui-border); padding-bottom:.5rem; margin-bottom:.75rem; }
.ui-modal header h2{ margin:0; font-size:1.1rem; }
.ui-modal .actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; }
.ui-modal label{ display:block; font-size:.9rem; margin:.5rem 0 .25rem; }
.ui-modal input, .ui-modal textarea{ width:100%; background:#0b1222; color:var(--ui-fg);
  border:1px solid var(--ui-border); border-radius:.5rem; padding:.6rem .7rem; }

/* Optional baseline if you want it for any button with data-action */
[data-action]{ cursor:pointer; }