/* t38u toasts: high contrast in both themes (dark on light pages, light on dark pages). */
.txs { position: fixed; top: 84px; right: 18px; z-index: 120; display: grid; gap: 10px; width: min(400px, calc(100% - 24px)); pointer-events: none; }
.txs:empty { display: none; }
.tx {
  --tx-bg: #13221c; --tx-ink: #fbf7ef; --tx-sub: #d6dfd9; --tx-ok: #5fd39a; --tx-err: #ff9d9d; --tx-info: #f0c36d; --tx-line: rgba(255,255,255,.14);
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: 34px 1fr 36px; gap: 12px; align-items: center;
  padding: 13px 10px 15px 14px; border-radius: 16px;
  background: var(--tx-bg); color: var(--tx-ink); border: 1px solid var(--tx-line);
  box-shadow: 0 18px 44px rgba(10, 18, 14, .32), 0 2px 6px rgba(10, 18, 14, .18);
  font: 500 .95rem/1.4 Outfit, "Segoe UI", sans-serif;
  animation: tx-in .32s cubic-bezier(.2,.8,.2,1);
}
html[data-theme="dark"] .tx {
  --tx-bg: #fbf7ef; --tx-ink: #15201b; --tx-sub: #3f4a44; --tx-ok: #12784a; --tx-err: #b42323; --tx-info: #8a5a14; --tx-line: rgba(0,0,0,.08);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.tx-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 1.05rem; color: var(--tx-ok); background: color-mix(in srgb, var(--tx-ok) 18%, transparent); }
.tx-error .tx-icon { color: var(--tx-err); background: color-mix(in srgb, var(--tx-err) 18%, transparent); }
.tx-info .tx-icon { color: var(--tx-info); background: color-mix(in srgb, var(--tx-info) 18%, transparent); }
.tx-body { min-width: 0; }
.tx-body strong { display: block; font-weight: 650; color: var(--tx-ink); margin-bottom: 1px; }
.tx-body p { margin: 0; color: var(--tx-ink); overflow-wrap: anywhere; }
.tx-body strong + p { color: var(--tx-sub); }
.tx-close {
  width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--tx-sub); cursor: pointer; font-size: 1rem;
}
.tx-close:hover { background: color-mix(in srgb, var(--tx-ink) 12%, transparent); color: var(--tx-ink); }
.tx-close:focus-visible { outline: 2px solid var(--tx-ink); outline-offset: 1px; }
.tx-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: var(--tx-ok); opacity: .85; }
.tx-error .tx-timer { background: var(--tx-err); }
.tx-info .tx-timer { background: var(--tx-info); }
.tx.is-running .tx-timer { animation: tx-timer var(--tx-dur, 6s) linear forwards; }
.tx.is-paused .tx-timer { animation-play-state: paused; }
.tx.is-out { opacity: 0; transform: translateX(14px); transition: opacity .25s ease, transform .25s ease; }
.tx-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes tx-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tx-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .tx { animation: none; } .tx.is-running .tx-timer { animation: none; } }
body.udash .txs, .desk ~ .txs { top: 76px; }
.gate .txs { top: 18px; }
@media (max-width: 760px) { .txs, body.udash .txs, .desk ~ .txs { top: 66px; left: 12px; right: 12px; width: auto; } }