/* ============================================================
   Промт — подтверждение действия. Компонент дизайн-кита.
   Окно принадлежит своему документу, а не странице: затемняется
   только та деталка, к которой относится вопрос. Иначе при двух
   открытых платёжках непонятно, что именно утверждают.
   ============================================================ */

.pr-scrim{position:fixed;z-index:90;background:rgba(20,26,41,.28);
          display:grid;place-items:center;padding:16px;
          animation:pr-in .12s ease-out}
@keyframes pr-in{from{opacity:0}to{opacity:1}}

.pr{width:min(340px,100%);background:var(--paper);border:1px solid var(--line);border-radius:8px;
    box-shadow:var(--shadow);padding:16px 16px 12px;
    animation:pr-up .14s ease-out}
@keyframes pr-up{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pr-scrim,.pr{animation:none}}

.pr h4{margin:0;font:600 14px/1.35 var(--sans);color:var(--ink)}
.pr .note{margin:8px 0 0;font:12.5px/1.45 var(--sans);color:var(--ink2)}
/* было → станет: значения моноширинно, стрелка служебная */
.pr .note .was{font:12.5px var(--mono);color:var(--muted);text-decoration:line-through;
               text-decoration-color:var(--line)}
.pr .note .now{font:600 12.5px var(--mono);color:var(--ink)}
.pr .note .arr{color:var(--faint);padding:0 5px}

.pr .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.pr button{height:30px;padding:0 14px;border-radius:6px;border:1px solid var(--line);
           background:var(--paper);font:500 12.5px var(--sans);color:var(--ink2);cursor:pointer}
.pr button:hover{border-color:var(--val);color:var(--val)}
.pr button.pri{background:var(--val);border-color:var(--val);color:var(--paper)}
.pr button.pri:hover{filter:brightness(1.08);color:var(--paper)}
.pr.danger button.pri{background:var(--bad);border-color:var(--bad)}
.pr button:focus-visible{outline:2px solid var(--val);outline-offset:2px}
.pr.danger button.pri:focus-visible{outline-color:var(--bad)}