#tt-toast {
  --tt-top: var(--tt-top-pc, 90px);
  --tt-right: var(--tt-right-pc, 8px);
  position: fixed;
  top: var(--tt-top, 90px);
  right: min(var(--tt-right), calc(100vw - 96px));
  right: max(env(safe-area-inset-right, 0px), min(var(--tt-right), calc(100vw - 96px)));
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(680px, calc(100vw - max(8px, env(safe-area-inset-left, 0px)) - max(env(safe-area-inset-right, 0px), min(var(--tt-right), calc(100vw - 96px)))));
  padding: 14px 18px 14px 22px;
  border: 1px solid rgba(134,197,249,.65);
  border-radius: 999px;
  box-shadow: 0 0 9px rgba(134,197,249,.35);
  background: var(--tt-bg, transparent);
  color: var(--tt-color, #1e293b);
  text-shadow: none;
  font: 600 clamp(12px, 2.8vw, 16px)/1.5 Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(100% + 24px));
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
  isolation: isolate;
}
#tt-toast::before {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(110deg, #6d7e95 0%, #e9f2ff 15%, #8b9aaf 28%, #fff 40%, #86c5f9 50%, #d7e2f2 62%, #707f94 75%, #fff 87%, #6d7e95 100%);
  background-size: 400% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: tt-mirror 1.1s linear infinite;
  pointer-events: none;
}
@keyframes tt-mirror { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
#tt-toast.tt-visible { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }
#tt-toast .tt-viewport { min-width: 0; overflow: hidden; white-space: nowrap; flex: 1 1 auto; }
#tt-toast span { display: inline-block; white-space: nowrap; overflow-wrap: normal; max-width: none; }
body.admin-bar #tt-toast { top: calc(var(--tt-top, 90px) + 32px); }
@media (max-width: 782px) { body.admin-bar #tt-toast { top: calc(var(--tt-top, 90px) + 46px); } }
@media (max-width: 480px) { #tt-toast { gap: 8px; padding: 10px 12px 10px 14px; } }
@media (prefers-reduced-motion: reduce) { #tt-toast { transition: none; transform: none; } #tt-toast::before { animation: none; } }

@media (max-width: 767px) {
  #tt-toast { --tt-top: var(--tt-top-mobile, 90px); --tt-right: var(--tt-right-mobile, 8px); }
}