/* tp-toasts.css — Apple-like glass toasts (fallback mode) */
:root{
  /* Светлая тема */
  --tp-bg: rgba(255,255,255,.82);
  --tp-fg: #0b0b0b;
  --tp-br: rgba(0,0,0,.08);
  --tp-shadow: 0 14px 40px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.08);
  --tp-chip-bg: rgba(0,0,0,.06);
  --tp-chip-br: rgba(0,0,0,.10);

  /* Тёмная тема */
  --tp-bg-dark: rgba(28,28,30,.88);
  --tp-fg-dark: #fff;
  --tp-br-dark: rgba(255,255,255,.14);
  --tp-shadow-dark: 0 18px 50px rgba(0,0,0,.65);
  --tp-chip-bg-dark: rgba(255,255,255,.10);
  --tp-chip-br-dark: rgba(255,255,255,.18);
}

@media (prefers-color-scheme: dark){
  :root{
    --tp-bg: var(--tp-bg-dark);
    --tp-fg: var(--tp-fg-dark);
    --tp-br: var(--tp-br-dark);
    --tp-shadow: var(--tp-shadow-dark);
    --tp-chip-bg: var(--tp-chip-bg-dark);
    --tp-chip-br: var(--tp-chip-br-dark);
  }
}

/* Фолбэк-стили (если браузер без Shadow DOM) */
html body .tp-toast,
body .tp-toast{
  position:fixed !important;
  z-index:2147483646 !important;
  max-width:420px;
  padding:14px 40px 14px 16px;
  background:var(--tp-bg) !important;
  color:var(--tp-fg) !important;
  border:1px solid var(--tp-br) !important;
  border-radius:14px !important;
  box-shadow:var(--tp-shadow) !important;
  backdrop-filter:saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(16px) !important;
  font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial !important;
  letter-spacing:.01em !important;
  transform:translateY(6px) scale(.98);
  opacity:0;
  animation:tp-pop .28s cubic-bezier(.18,.9,.2,1) forwards;
  pointer-events:auto !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@keyframes tp-pop { to{ opacity:1; transform:translateY(0) scale(1); } }

html body .tp-toast b{font-weight:700 !important;}
html body .tp-toast__content{margin-right:16px !important;}

html body .tp-toast__close{
  position:absolute !important; top:6px !important; right:8px !important;
  width:28px !important; height:28px !important;
  border:0 !important; background:transparent !important; color:inherit !important;
  font-size:20px !important; line-height:1 !important; cursor:pointer !important; border-radius:8px !important;
}
html body .tp-toast__close:hover{background:rgba(0,0,0,.06) !important}
@media (prefers-color-scheme: dark){
  html body .tp-toast__close:hover{background:rgba(255,255,255,.10) !important}
}

html body .tp-toast__arrow{
  position:absolute !important; width:12px !important; height:12px !important;
  background:var(--tp-bg) !important; transform:rotate(45deg) !important;
  border-left:1px solid var(--tp-br) !important; border-top:1px solid var(--tp-br) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.08) !important;
}
html body .tp-toast--bottom .tp-toast__arrow{top:-7px !important; left:28px !important}
html body .tp-toast--top .tp-toast__arrow{
  bottom:-7px !important; left:28px !important; border-left:0 !important; border-top:0 !important;
  border-right:1px solid var(--tp-br) !important; border-bottom:1px solid var(--tp-br) !important;
}
html body .tp-toast--right .tp-toast__arrow{left:-7px !important; top:50% !important; margin-top:-6px !important}
html body .tp-toast--left .tp-toast__arrow{
  right:-7px !important; top:50% !important; margin-top:-6px !important; border-left:0 !important; border-top:0 !important;
  border-right:1px solid var(--tp-br) !important; border-bottom:1px solid var(--tp-br) !important;
}

html body .tp-toast__kbd{
  display:inline-block !important; padding:0 6px !important; border-radius:8px !important;
  border:1px solid var(--tp-chip-br) !important; background:var(--tp-chip-bg) !important;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size:.9em !important;
}

@media (max-width:480px){
  html body .tp-toast{max-width:calc(100vw - 24px) !important; left:12px!important; right:12px!important}
}