/* Shared modal chrome (charter §12.2, 2026-11-05): one top-right X for every
   dialog, with the same hover fill as the other icon buttons. The control is
   injected/normalized by src/modal.js, so no dialog copies its markup. */
.modal-card { position: relative; }
.modal-x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid transparent;
  border-radius: 9px; background: transparent; color: var(--sc-muted, #9fb6b0);
  cursor: pointer;
}
.modal-x .ico { width: 18px; height: 18px; }
.modal-x.modal-x-inline { position: static; margin-left: auto; }
.modal-x:hover, .modal-x:focus-visible {
  background: var(--sc-soft, rgba(127,127,127,.16));
  border-color: var(--sc-border, #2a3242);
  color: var(--sc-accent, #a8e6c8);
}

/* Blocking fullscreen spinner (charter §12.2, 2026-11-05): Argon2id and other
   long operations must show progress instead of a frozen page. z-index is above
   the message modal (1090), the call layer (1102) and the entropy overlay (10000). */
.sc-spinner-layer {
  position: fixed; inset: 0; z-index: 11000; display: flex;
  align-items: center; justify-content: center;
  background: rgba(4, 6, 12, .72);
}
.sc-spinner-layer[hidden] { display: none; }
.sc-spinner-box {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 26px; border: 1px solid var(--sc-border, #2a3242);
  border-radius: 16px; background: var(--sc-panel, #151a24);
  color: #edf6f2; box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.sc-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(168, 230, 200, .25);
  border-top-color: var(--sc-accent, #a8e6c8);
  animation: sc-spin .8s linear infinite;
}
.sc-spinner-text { margin: 0; font-size: 13px; color: var(--sc-muted, #9fb6b0); }
@keyframes sc-spin { to { transform: rotate(360deg); } }