/* SUBZ — уведомления «Готово / Ошибка» v2: всплывающие карточки справа сверху под шапкой (на телефоне — по ширине),
   круглая иконка, заголовок и текст, крестик, полоска-таймер внутри. Логика — flash-v1.js (автозакрытие, пауза при наведении).
   Разметка — base.html: .x-toasts > .x-flash[data-flash] > .x-flash__ico + .x-flash__txt + .x-flash__x. */
.x-toasts{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 14px);right:20px;z-index:130;display:grid;gap:10px;width:min(400px,calc(100vw - 24px));pointer-events:none}
.x-toasts .x-flash[data-flash]{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 28px;align-items:center;gap:12px;margin:0;padding:14px 12px 17px 14px;overflow:hidden;border:1px solid rgb(255 255 255 / .1);border-radius:16px;background:rgb(24 24 27 / .92);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 24px 60px -24px rgb(0 0 0 / .9),0 0 0 1px rgb(0 0 0 / .4);font-size:14px;color:var(--fg);pointer-events:auto;animation:xToastIn .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes xToastIn{from{opacity:0;transform:translateX(24px) scale(.98)}}
@keyframes xToastInM{from{opacity:0;transform:translateY(-14px) scale(.98)}}
.x-flash__ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgb(52 199 89 / .14);color:#34c759;font-style:normal}
.x-flash--err .x-flash__ico{background:rgb(255 107 107 / .14);color:#ff6b6b}
.x-flash__ico .ico{width:18px;height:18px}
.x-flash__txt{display:grid;gap:2px;min-width:0;text-align:left}
.x-toasts .x-flash__txt b{padding:0;font-family:var(--f-body);font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;color:#fff}
.x-flash__txt span{line-height:1.4;color:var(--fg-2);overflow-wrap:anywhere}
.x-toasts .x-flash__x{position:static;display:grid;place-items:center;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;opacity:.5;cursor:pointer;transition:opacity .2s,background .2s}
.x-toasts .x-flash__x:hover,.x-toasts .x-flash__x:focus-visible{opacity:1;background:rgb(255 255 255 / .08)}
.x-toasts .x-flash__x svg{width:15px;height:15px}
.x-toasts .x-flash[data-flash]::after{content:"";position:absolute;right:14px;bottom:7px;left:14px;height:3px;border-radius:3px;background:#34c759;opacity:.75;transform-origin:left;transform:scaleX(1)}
.x-toasts .x-flash--err[data-flash]::after{background:#ff6b6b}
.x-toasts .x-flash[data-flash].is-run::after{animation:xFlashBar var(--t,5s) linear forwards}
.x-toasts .x-flash[data-flash].is-paused::after{animation-play-state:paused}
@keyframes xFlashBar{to{transform:scaleX(0)}}
.x-toasts .x-flash[data-flash].is-gone{opacity:0;transform:translateX(24px);transition:opacity .25s,transform .3s}
@media (max-width:720px){
  .x-toasts{top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 10px);right:12px;left:12px;width:auto}
  .x-toasts .x-flash[data-flash]{animation-name:xToastInM}
  .x-toasts .x-flash[data-flash].is-gone{transform:translateY(-12px)}
}
@media (prefers-reduced-motion:reduce){.x-toasts .x-flash[data-flash],.x-toasts .x-flash[data-flash].is-run::after{animation:none}}