/* AUJUNPEAK — V33 Unified Notification
   Single accent: Aurora Teal (#21c7b7)
   Compact horizontal notification surface; no purple gradient. */
:root{
  --wn33:#21c7b7;
  --wn33-strong:#2ad6c5;
  --wn33-deep:#0f8f86;
  --wn33-soft:rgba(33,199,183,.12);
  --wn33-line:rgba(33,199,183,.28);
}

.wn-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:99990!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
  background:rgba(3,8,12,.76)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .22s ease!important;
}
.wn-overlay.wn-open{opacity:1!important;pointer-events:auto!important}

.wn-modal{
  position:relative!important;
  width:min(560px,calc(100vw - 32px))!important;
  max-width:560px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(148,163,184,.18)!important;
  border-radius:20px!important;
  background:#0c1319!important;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 10px 32px rgba(33,199,183,.08)!important;
  transform:translateY(12px) scale(.985)!important;
  opacity:0!important;
  transition:transform .26s cubic-bezier(.22,.8,.28,1),opacity .22s ease!important;
}
.wn-overlay.wn-open .wn-modal{transform:translateY(0) scale(1)!important;opacity:1!important}
.wn-modal::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--wn33)!important;
  box-shadow:0 0 18px rgba(33,199,183,.28);
}

.wn-close{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  width:32px!important;
  height:32px!important;
  border-radius:10px!important;
  border:1px solid rgba(148,163,184,.14)!important;
  background:#121b22!important;
  color:#8fa1ad!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  font-size:.78rem!important;
  line-height:1!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
}
.wn-close:hover{
  background:var(--wn33-soft)!important;
  border-color:var(--wn33-line)!important;
  color:var(--wn33-strong)!important;
  transform:translateY(-1px)!important;
}

.wn-header{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:14px!important;
  align-items:center!important;
  margin:0!important;
  padding:22px 54px 16px 24px!important;
  text-align:left!important;
}
.wn-icon-wrap{
  position:relative!important;
  grid-row:1 / span 2!important;
  width:56px!important;
  height:56px!important;
  margin:0!important;
  border-radius:16px!important;
  border:1px solid var(--wn33-line)!important;
  background:var(--wn33-soft)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:var(--wn33-strong)!important;
  font-size:1.18rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  animation:wn33Lift 3.2s ease-in-out infinite!important;
}
.wn-icon-dot{
  position:absolute!important;
  top:5px!important;
  right:5px!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:var(--wn33-strong)!important;
  border:2px solid #0c1319!important;
  box-shadow:0 0 0 4px rgba(33,199,183,.08)!important;
  animation:wn33Pulse 1.8s ease-in-out infinite!important;
}
@keyframes wn33Lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes wn33Pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.82}}

.wn-title{
  margin:0!important;
  color:#eef5f7!important;
  font-size:1.12rem!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:.01em!important;
}
.wn-subtitle{
  margin:5px 0 0!important;
  color:#6f818c!important;
  font-size:.68rem!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}

.wn-body{
  margin:0 20px 16px 20px!important;
  background:#0f181f!important;
  border:1px solid rgba(148,163,184,.12)!important;
  border-radius:14px!important;
  overflow:hidden!important;
}
.wn-item{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  padding:11px 12px!important;
  min-height:46px!important;
  border-bottom:1px solid rgba(148,163,184,.09)!important;
  color:inherit!important;
  text-decoration:none!important;
  transition:background .18s ease,padding-left .18s ease!important;
}
.wn-item:last-child{border-bottom:none!important}
.wn-item:hover{background:rgba(33,199,183,.05)!important;padding-left:15px!important}
.wn-item-icon{
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  border-radius:9px!important;
  border:1px solid var(--wn33-line)!important;
  background:rgba(33,199,183,.08)!important;
  color:var(--wn33-strong)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:.72rem!important;
}
.wn-item-text{
  flex:1!important;
  min-width:0!important;
  color:#b3c1c8!important;
  font-size:.8rem!important;
  line-height:1.4!important;
}
.wn-item-text strong{color:#eef5f7!important;font-weight:750!important}
.wn-item-link{color:var(--wn33-strong)!important;text-decoration:none!important;font-weight:700!important}

.wn-footer{
  display:grid!important;
  grid-template-columns:1fr 1.2fr!important;
  gap:10px!important;
  align-items:center!important;
  padding:0 20px 20px!important;
}
.wn-btn-remind,.wn-btn-ok{
  min-height:42px!important;
  border-radius:12px!important;
  font-size:.79rem!important;
  font-weight:750!important;
  letter-spacing:.01em!important;
  cursor:pointer!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.wn-btn-remind{
  padding:10px 12px!important;
  border:1px solid rgba(148,163,184,.16)!important;
  background:#121b22!important;
  color:#8fa1ad!important;
  box-shadow:none!important;
}
.wn-btn-remind:hover{
  background:#162229!important;
  border-color:rgba(148,163,184,.24)!important;
  color:#c1cfd4!important;
  transform:translateY(-1px)!important;
}
.wn-btn-ok{
  padding:10px 14px!important;
  border:1px solid rgba(33,199,183,.34)!important;
  background:var(--wn33)!important;
  color:#06221f!important;
  box-shadow:0 8px 18px rgba(33,199,183,.18)!important;
}
.wn-btn-ok:hover{
  background:var(--wn33-strong)!important;
  box-shadow:0 10px 24px rgba(33,199,183,.25)!important;
  transform:translateY(-1px)!important;
}
.wn-btn-ok:active,.wn-btn-remind:active{transform:translateY(0)!important}

@media(max-width:520px){
  .wn-overlay{padding:12px!important;align-items:flex-end!important}
  .wn-modal{width:100%!important;max-width:none!important;border-radius:18px 18px 14px 14px!important}
  .wn-header{grid-template-columns:48px minmax(0,1fr)!important;padding:18px 50px 14px 18px!important;column-gap:11px!important}
  .wn-icon-wrap{width:48px!important;height:48px!important;border-radius:14px!important;font-size:1.05rem!important}
  .wn-title{font-size:1rem!important}
  .wn-subtitle{font-size:.61rem!important;letter-spacing:.12em!important}
  .wn-body{margin:0 14px 12px!important}
  .wn-item{padding:10px!important}
  .wn-item-text{font-size:.77rem!important}
  .wn-footer{grid-template-columns:1fr 1fr!important;padding:0 14px 14px!important;gap:8px!important}
  .wn-btn-remind,.wn-btn-ok{min-height:40px!important;font-size:.74rem!important}
}

@media(prefers-reduced-motion:reduce){
  .wn-overlay,.wn-modal,.wn-close,.wn-item,.wn-btn-remind,.wn-btn-ok{transition:none!important}
  .wn-icon-wrap,.wn-icon-dot{animation:none!important}
}