/* Banner Notifications (Flying Top Banner) */
.bn-wrap{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:2147483000;max-width:min(980px,calc(100vw - 18px));width:100%;pointer-events:none}
@supports(padding: max(0px)){
  .bn-wrap{top:calc(74px + env(safe-area-inset-top));}
}
.bn-wrap.show{animation:bnDrop .55s cubic-bezier(.16,.84,.44,1)}
.bn-wrap.hide{animation:bnHide .25s ease forwards}

@keyframes bnDrop{from{opacity:0;transform:translateX(-50%) translateY(-22px) scale(.98)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes bnHide{to{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.98)}}

.bn-card{pointer-events:auto;display:flex;gap:12px;align-items:center;position:relative;
  padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.22)), var(--bn-bg);
  color:var(--bn-tx);
  box-shadow:0 18px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow:hidden
}
.bn-card::before{content:'';position:absolute;inset:-140px auto auto -140px;width:260px;height:260px;opacity:.22;
  background:radial-gradient(circle at 30% 30%, var(--bn-ac), transparent 70%);
  transform:rotate(18deg)
}
.bn-left{flex:0 0 auto;position:relative;z-index:1}
.bn-mid{flex:1 1 auto;min-width:0;position:relative;z-index:1}
.bn-right{flex:0 0 auto;display:flex;gap:10px;align-items:center;position:relative;z-index:1}

.bn-thumb{width:44px;height:44px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.bn-thumb.placeholder{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28);color:var(--bn-ac);font-size:18px}

.bn-title{font-weight:900;font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-body{font-size:12px;opacity:.9;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.bn-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(135deg, var(--bn-ac), rgba(139,0,0,1));
  color:#fff;text-decoration:none;font-weight:900;font-size:12px;white-space:nowrap;
  box-shadow:0 10px 25px rgba(0,0,0,.35)
}
.bn-cta:hover{filter:brightness(1.06)}

.bn-close{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.bn-close:hover{background:rgba(255,77,77,.18);border-color:rgba(255,77,77,.35)}

@media (max-width: 768px){
  .bn-wrap{top:62px;max-width:calc(100vw - 14px)}
  .bn-thumb{width:40px;height:40px;border-radius:12px}
  .bn-cta{padding:9px 10px;border-radius:12px;font-size:11px}
}