/* notification container */
.notify-wrap {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 360px;
  max-width: calc(100% - 36px);
  pointer-events: none;
}

.notice {
  pointer-events: auto;
  display:flex;
  gap:12px;
  align-items:flex-start;
/*  background: linear-gradient(180deg, var(--success_alert_BG1), var(--success_alert_BG2)); */
  background: linear-gradient(180deg,#0b1220 0%, #061023 100%);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 20px rgba(2,6,23,0.55);
  border: 1px solid rgba(255,255,255,0.03);
  color: #fff;
  transform-origin: right top;
  position: relative;
  transition: transform 0.28s cubic-bezier(.2,.9,.2,1), opacity 0.28s ease;
}

.notice .icon {
  width:40px; height:40px; flex:0 0 40px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px;
  
}

.notice .body { flex:1 1 auto; min-width:0; }
.notice .title { font-weight:700; margin-bottom:6px; font-size:15px; color: #fff; }
.notice .msg { font-size:13px; color: #fff; line-height:1.25; }

.notice .close {
  background:transparent; border: none; color: rgba(255,255,255,0.7);
  cursor:pointer; padding:6px; border-radius:6px; align-self:flex-start;
}
.notice .close:focus { outline:2px solid rgba(255,255,255,0.08); }

.notice .progress {
  position:absolute; left:0; bottom:0; height:4px; background: rgba(255,255,255,0.06);
  width:100%;
}
.notice .progress > span {
  display:block; height:100%; width:100%;
  transform-origin:left; transform: scaleX(1);
}

 /* color variants */
  .notice.success .icon { background: linear-gradient(180deg, rgba(22,163,74,0.12), rgba(22,163,74,0.06)); color: var(--success); }
  .notice.success .progress > span { background: linear-gradient(90deg, rgba(22,163,74,0.95), rgba(16,185,129,0.95)); }

  .notice.error .icon { background: linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06)); color: var(--error); }
  .notice.error .progress > span { background: linear-gradient(90deg, rgba(239,68,68,0.95), rgba(239,68,68,0.8)); }

  .notice.warn .icon { background: linear-gradient(180deg, rgba(245,158,11,0.12), rgba(245,158,11,0.06)); color: var(--warn); }
  .notice.warn .progress > span { background: linear-gradient(90deg, rgba(245,158,11,0.95), rgba(249,115,22,0.95)); }

  .notice.info .icon { background: linear-gradient(180deg, rgba(59,130,246,0.12), rgba(59,130,246,0.06)); color: var(--info); }
  .notice.info .progress > span { background: linear-gradient(90deg, rgba(59,130,246,0.95), rgba(96,165,250,0.95)); }

/* animations */
@keyframes popIn {
  0% { opacity: 0; transform: translateX(24px) scale(.96); }
  60% { opacity: 1; transform: translateX(-6px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes popOut {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(18px) scale(.96); }
}
.notice.enter { animation: popIn .42s cubic-bezier(.2,.9,.2,1) forwards; }
.notice.exit  { animation: popOut .28s ease forwards; }

.notice:hover { transform: translateX(-6px) scale(1.01); }

@media (max-width:520px){
  .notify-wrap { right: 12px; left: 12px; width: auto; }
  .notice { padding-right:8px; }
}