/* =========================================================
   SeeYouIOS Notification Center V2
   ========================================================= */

.sy-notif-wrap{
 position:relative;
 display:inline-flex;
 align-items:center;
}


.sy-notif-bell{
 position:relative;

 width:35px!important;
 height:35px!important;

 display:grid!important;
 place-items:center!important;

 padding:0!important;

 border:
  1px solid rgba(148,163,184,.10)!important;

 border-radius:
  10px!important;

 background:
  rgba(255,255,255,.02)!important;

 color:#8290a5!important;

 box-shadow:none!important;

 cursor:pointer;

 transition:
  color .14s ease,
  background .14s ease,
  border-color .14s ease!important;
}


.sy-notif-bell:hover{
 color:#e2e8f0!important;

 border-color:
  rgba(34,211,238,.17)!important;

 background:
  rgba(34,211,238,.035)!important;
}


.sy-notif-bell svg{
 width:16px;
 height:16px;

 fill:none;

 stroke:currentColor;

 stroke-width:1.7;

 stroke-linecap:round;
 stroke-linejoin:round;
}


.sy-notif-badge{
 position:absolute;

 top:-5px;
 right:-5px;

 min-width:17px;
 height:17px;

 display:grid;
 place-items:center;

 box-sizing:border-box;

 padding:0 4px;

 border:
  2px solid #070b14;

 border-radius:999px;

 background:#ef4444;

 color:#fff;

 font-size:6px;

 font-weight:950;

 box-shadow:
  0 0 13px
  rgba(239,68,68,.25);
}


/* POPOVER */

.sy-notif-popover{
 position:absolute;

 top:45px;
 right:0;

 z-index:18500;

 width:
  min(390px,calc(100vw - 24px));

 overflow:hidden;

 border:
  1px solid rgba(148,163,184,.13);

 border-radius:16px;

 background:
  linear-gradient(
   155deg,
   rgba(14,21,36,.99),
   rgba(6,11,21,.995)
  );

 box-shadow:
  0 30px 90px rgba(0,0,0,.46);

 opacity:0;

 visibility:hidden;

 transform:
  translateY(-5px)
  scale(.985);

 transform-origin:
  top right;

 transition:
  opacity .15s ease,
  transform .15s ease,
  visibility .15s ease;
}


.sy-notif-wrap.open
.sy-notif-popover{
 opacity:1;

 visibility:visible;

 transform:none;
}


.sy-notif-head{
 display:flex;

 align-items:center;

 justify-content:space-between;

 gap:12px;

 padding:13px 14px;

 border-bottom:
  1px solid rgba(148,163,184,.08);
}


.sy-notif-head strong{
 display:block;

 color:#e8edf6;

 font-size:10px;

 font-weight:900;
}


.sy-notif-head small{
 display:block;

 margin-top:3px;

 color:#536277;

 font-size:7px;
}


.sy-notif-attention{
 padding:4px 7px;

 border:
  1px solid rgba(148,163,184,.08);

 border-radius:999px;

 background:
  rgba(255,255,255,.02);

 color:#75859a;

 font-size:7px;

 font-weight:850;
}


.sy-notif-list{
 max-height:390px;

 overflow:auto;

 padding:6px;
}


.sy-notif-item{
 display:flex!important;

 align-items:flex-start;

 gap:10px;

 min-height:57px;

 box-sizing:border-box;

 margin:2px 0;

 padding:
  9px 9px!important;

 border:
  1px solid transparent!important;

 border-radius:
  11px!important;

 background:
  transparent!important;

 color:inherit!important;

 text-decoration:none!important;

 transition:
  background .12s ease,
  border-color .12s ease;
}


.sy-notif-item:hover{
 border-color:
  rgba(148,163,184,.08)!important;

 background:
  rgba(255,255,255,.025)!important;
}


.sy-notif-icon{
 width:31px;
 height:31px;

 flex:
  0 0 31px;

 display:grid;
 place-items:center;

 border:
  1px solid rgba(148,163,184,.09);

 border-radius:9px;

 background:
  rgba(255,255,255,.025);

 color:#8ea0b8;

 font-size:8px;

 font-weight:950;
}


.sy-notif-item.attention
.sy-notif-icon{
 border-color:
  rgba(245,158,11,.15);

 background:
  rgba(245,158,11,.07);

 color:#fbbf24;
}


.sy-notif-item.critical
.sy-notif-icon{
 border-color:
  rgba(251,113,133,.17);

 background:
  rgba(251,113,133,.07);

 color:#fda4af;
}


.sy-notif-item.success
.sy-notif-icon{
 border-color:
  rgba(52,211,153,.14);

 background:
  rgba(52,211,153,.06);

 color:#6ee7b7;
}


.sy-notif-item.guarded
.sy-notif-icon{
 border-color:
  rgba(91,140,255,.13);

 background:
  rgba(91,140,255,.06);

 color:#93c5fd;
}


.sy-notif-copy{
 min-width:0;
}


.sy-notif-copy strong{
 display:block;

 overflow:hidden;

 color:#c9d4e3;

 font-size:9px;

 font-weight:850;

 white-space:nowrap;

 text-overflow:ellipsis;
}


.sy-notif-copy > span{
 display:block;

 margin-top:3px;

 color:#66768d;

 font-size:7px;

 line-height:1.45;
}


.sy-notif-copy small{
 display:block;

 margin-top:4px;

 color:#405067;

 font-size:6px;
}


.sy-notif-empty{
 padding:25px 15px;

 text-align:center;

 color:#526178;

 font-size:8px;
}


.sy-notif-footer{
 display:block!important;

 padding:11px 14px!important;

 border-top:
  1px solid rgba(148,163,184,.08)!important;

 background:
  rgba(255,255,255,.01)!important;

 color:#77a8d8!important;

 text-align:center;

 text-decoration:none!important;

 font-size:8px!important;

 font-weight:850!important;
}


/* =========================================================
   FULL PAGE
   ========================================================= */

.sy-notif-page{
 width:min(1280px,100%);

 box-sizing:border-box;

 margin:0 auto;

 padding:
  27px 28px 55px;
}


.sy-notif-hero{
 display:flex;

 align-items:flex-end;

 justify-content:space-between;

 gap:18px;

 margin-bottom:18px;

 padding:
  23px 24px;

 border:
  1px solid rgba(148,163,184,.10);

 border-radius:18px;

 background:
  linear-gradient(
   135deg,
   rgba(34,211,238,.045),
   rgba(91,140,255,.035),
   rgba(139,92,246,.04)
  );
}


.sy-notif-hero small{
 color:#5f7188;

 font-size:7px;

 font-weight:900;

 letter-spacing:.15em;

 text-transform:uppercase;
}


.sy-notif-hero h1{
 margin:
  6px 0 5px;

 color:#f5f7fb;

 font-size:23px;

 letter-spacing:-.035em;
}


.sy-notif-hero p{
 margin:0;

 color:#718198;

 font-size:9px;
}


.sy-notif-live{
 display:flex;

 align-items:center;

 gap:7px;

 color:#6f8197;

 font-size:8px;

 white-space:nowrap;
}


.sy-notif-live i{
 width:7px;
 height:7px;

 border-radius:50%;

 background:#34d399;

 box-shadow:
  0 0 12px
  rgba(52,211,153,.55);
}


.sy-notif-stats{
 display:grid;

 grid-template-columns:
  repeat(4,minmax(0,1fr));

 gap:10px;

 margin-bottom:16px;
}


.sy-notif-stat{
 padding:15px;

 border:
  1px solid rgba(148,163,184,.09);

 border-radius:14px;

 background:
  linear-gradient(
   150deg,
   rgba(13,20,35,.88),
   rgba(7,12,23,.93)
  );
}


.sy-notif-stat span{
 display:block;

 color:#64748b;

 font-size:7px;

 font-weight:850;

 letter-spacing:.07em;

 text-transform:uppercase;
}


.sy-notif-stat strong{
 display:block;

 margin-top:8px;

 color:#f1f5f9;

 font-size:22px;

 letter-spacing:-.04em;
}


.sy-notif-panel{
 overflow:hidden;

 border:
  1px solid rgba(148,163,184,.10);

 border-radius:16px;

 background:
  rgba(8,13,24,.82);
}


.sy-notif-panel-head{
 display:flex;

 align-items:center;

 justify-content:space-between;

 padding:
  13px 15px;

 border-bottom:
  1px solid rgba(148,163,184,.08);
}


.sy-notif-panel-head strong{
 color:#cbd5e1;

 font-size:9px;

 font-weight:900;
}


.sy-notif-feed{
 padding:8px;
}


.sy-notif-feed
.sy-notif-item{
 min-height:68px;

 padding:
  11px!important;
}


.sy-notif-feed
.sy-notif-icon{
 width:36px;
 height:36px;

 flex-basis:36px;
}


.sy-notif-feed
.sy-notif-copy strong{
 font-size:10px;
}


.sy-notif-feed
.sy-notif-copy > span{
 font-size:8px;
}


@media(max-width:800px){

 .sy-notif-stats{
  grid-template-columns:
   1fr 1fr;
 }


 .sy-notif-page{
  padding:
   18px 13px 40px;
 }


 .sy-notif-hero{
  align-items:flex-start;

  flex-direction:column;
 }
}


@media(max-width:500px){

 .sy-notif-popover{
  position:fixed;

  top:70px;
  left:10px;
  right:10px;

  width:auto;
 }


 .sy-notif-stats{
  grid-template-columns:
   1fr 1fr;
 }


 .sy-notif-hero h1{
  font-size:20px;
 }
}