#toast-root {
  position: fixed;
  z-index: 100;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  position: relative;
  inset: auto;
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 11px;
  min-width: 0;
  max-width: 100%;
  padding: 13px 12px 15px;
  overflow: hidden;
  border: 1px solid #e8e9f1;
  border-radius: 17px;
  background: rgba(255, 255, 255, .97);
  color: #292d43;
  box-shadow: 0 18px 50px rgba(30, 34, 68, .18), 0 2px 8px rgba(30, 34, 68, .05);
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  transform: none;
  animation: toast-enter .22s cubic-bezier(.2,.8,.2,1) both;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.toast-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 13px;
  background: #e5f7f1;
  color: #299778;
}

.toast-icon .icon { width: 19px; height: 19px; stroke-width: 2.2; }
.toast[data-type="error"] .toast-icon { background: #fff0f0; color: #d45f69; }
.toast[data-type="warning"] .toast-icon { background: #fff4e6; color: #c88636; }
.toast[data-type="info"] .toast-icon { background: #f0edff; color: #7562d8; }
.toast[data-type="loading"] .toast-icon { background: #f0edff; color: #7562d8; }

.toast-copy { display: grid; gap: 3px; min-width: 0; }
.toast-copy strong { font-size: 12px; font-weight: 820; letter-spacing: -.1px; }
.toast-copy > span { color: #737b8d; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }

.toast-close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  align-self: start;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #a1a6b3;
}

.toast-close:hover { background: #f2f3f7; color: #565e70; }
.toast-close .icon { width: 15px; height: 15px; }

.toast-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #a99bff, #7762e8);
  transform-origin: left;
  animation: toast-progress linear forwards;
}

.toast[data-type="error"] .toast-progress { background: #d96a73; }
.toast[data-type="warning"] .toast-progress { background: #d99a49; }
.toast[data-type="success"] .toast-progress { background: #42b898; }
.toast-spinner { width: 19px; height: 19px; border: 2px solid #d9d3ff; border-top-color: #7562d8; border-radius: 50%; animation: toast-spin .7s linear infinite; }
.toast.toast-leaving { animation: toast-leave .18s ease-in forwards; }

@keyframes toast-enter { from { opacity: 0; transform: translateY(-9px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-leave { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes toast-progress { to { transform: scaleX(0); } }
@keyframes toast-spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  #toast-root { right: 10px; left: 10px; width: auto; }
  .toast { grid-template-columns: 36px minmax(0, 1fr) 27px; gap: 9px; padding: 11px 10px 14px; border-radius: 15px; }
  .toast-icon { width: 35px; height: 35px; border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.toast-leaving, .toast-spinner, .toast-progress { animation-duration: .01ms !important; }
}

.profile-avatar { padding: 0; border: 0; font-family: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.profile-avatar:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(80, 67, 150, .15); }
.profile-avatar:focus-visible { outline: 3px solid #afa4ff; outline-offset: 3px; }
.profile-identity { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid #eeedf5; border-radius: 17px; background: linear-gradient(135deg, #faf9ff, #f6f5fc); }
.profile-avatar-large { display: grid; width: 51px; height: 51px; flex: 0 0 51px; place-items: center; border-radius: 17px; background: linear-gradient(140deg, #9d8bea, #6c5bc3); color: white; font-size: 16px; font-weight: 850; letter-spacing: .2px; box-shadow: 0 6px 15px rgba(92, 75, 180, .2); }
.profile-identity > div:last-child { display: grid; gap: 5px; min-width: 0; }
.profile-identity strong { overflow: hidden; color: #32344b; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.profile-identity span { color: #9298a8; font-size: 10.5px; }
.profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 13px 0 17px; }
.profile-stats > div { display: grid; gap: 4px; padding: 12px; border: 1px solid #eeedf5; border-radius: 13px; background: white; }
.profile-stats strong { color: #393552; font-size: 17px; letter-spacing: -.4px; }
.profile-stats span { color: #979cad; font-size: 10px; }
.profile-shortcuts { display: grid; gap: 8px; }
.profile-shortcut { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #ececf3; border-radius: 13px; background: #fff; color: #7565c8; text-align: left; }
.profile-shortcut:hover { border-color: #d7d1fa; background: #fbfaff; }
.profile-shortcut > .icon { width: 17px; height: 17px; }
.profile-shortcut > .icon:last-child { width: 14px; height: 14px; margin-left: auto; color: #a2a6b3; }
.profile-shortcut span { display: grid; gap: 3px; }
.profile-shortcut strong { color: #4c5265; font-size: 11px; font-weight: 780; }
.profile-shortcut small { color: #9a9fae; font-size: 10px; }