.notifications-app {
  min-height: 100vh;
}

.notifications-layout {
  align-items: stretch;
}

.notifications-main {
  display: flex;
  flex-direction: column;
  gap: 18px;

  min-width: 0;
}

.notifications-hero {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;

  min-height: 220px;
  padding: 34px;

  overflow: hidden;

  background-image:
    linear-gradient(
      90deg,
      rgba(9, 9, 9, .96),
      rgba(9, 9, 9, .74),
      rgba(9, 9, 9, .38)
    ),
    url("../images/hero.png");

  background-position: center;
  background-size: cover;

  border: 1px solid var(--border);
  border-radius: var(--radius-large);

  box-shadow: var(--shadow-small);
}

.notifications-hero::before {

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 18% 30%,
      rgba(249,201,47,.12),
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 70%,
      rgba(211,31,95,.10),
      transparent 36%
    );

  content: "";

}

.notifications-hero>*{

  position:relative;
  z-index:2;

}

.hero-label{

  display:inline-flex;
  align-items:center;
  gap:8px;

  color:var(--yellow);

  font-size:.62rem;
  font-weight:900;
  letter-spacing:.15em;

}

.notifications-hero h1{

  margin:10px 0;

  color:#fff;

  font-size:clamp(2.8rem,4vw,4.5rem);
  line-height:.95;
  letter-spacing:-.05em;

}

.notifications-hero p{

  max-width:650px;

  color:#cfc8c0;

  font-size:.78rem;
  line-height:1.75;

}

.notification-counter{

  display:grid;
  grid-template-columns:repeat(2,minmax(140px,1fr));
  gap:12px;

}

.notification-counter div{

  display:grid;
  gap:4px;

  min-height:95px;
  padding:18px;

  background:rgba(0,0,0,.48);

  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;

  backdrop-filter:blur(12px);

}

.notification-counter strong{

  color:#fff;

  font-size:2rem;

}

.notification-counter span{

  color:#b9b4ac;

  font-size:.56rem;

}

.notification-toolbar{

  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;

  padding:18px;

  background:linear-gradient(
    145deg,
    #171717,
    #101010
  );

  border:1px solid var(--border);
  border-radius:var(--radius-large);

}

.notification-search{

  flex:1;

}

.notification-search input{

  width:100%;
  height:48px;
  padding:0 18px;

  color:#fff;

  background:#111;

  border:1px solid var(--border);
  border-radius:999px;

  outline:none;

  font-size:.65rem;

}

.notification-search input:focus{

  border-color:rgba(249,201,47,.45);

  box-shadow:
    0 0 0 4px rgba(249,201,47,.08);

}

.notification-filters{

  display:flex;
  flex-wrap:wrap;
  gap:8px;

}

.notification-filters button{

  height:40px;
  padding:0 16px;

  color:#d5d0c8;

  background:#1b1b1b;

  border:1px solid var(--border);
  border-radius:999px;

  font-size:.56rem;
  font-weight:800;

  cursor:pointer;

  transition:.18s;

}

.notification-filters button:hover{

  transform:translateY(-2px);

}

.notification-filters button.active{

  color:#171207;

  background:var(--yellow);

}

.notifications-list{

  display:grid;
  gap:14px;

}

.notification-card{

  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;
  align-items:flex-start;

  padding:18px;

  background:linear-gradient(
    145deg,
    #171717,
    #101010
  );

  border:1px solid var(--border);
  border-radius:18px;

  transition:
    transform .18s,
    border-color .18s,
    background .18s;

  cursor:pointer;

}

.notification-card:hover{

  transform:translateY(-2px);

  border-color:rgba(249,201,47,.28);

}

.notification-card.unread{

  background:
    linear-gradient(
      145deg,
      rgba(249,201,47,.05),
      #111
    );

  border-left:4px solid var(--yellow);

}

.notification-icon{

  display:grid;
  place-items:center;

  width:56px;
  height:56px;

  border-radius:50%;

  color:#fff;

  font-size:1.25rem;
  font-weight:900;

}

.notification-icon.friend{

  background:
    linear-gradient(
      135deg,
      #ff4d7c,
      #b21548
    );

}

.notification-icon.message{

  background:
    linear-gradient(
      135deg,
      #2aa5ff,
      #145bba
    );

}

.notification-icon.visitor{

  background:
    linear-gradient(
      135deg,
      #29c18f,
      #10735a
    );

}

.notification-icon.system{

  background:
    linear-gradient(
      135deg,
      #a27cff,
      #5f39bb
    );

}

.notification-content{

  display:grid;
  gap:7px;

}

.notification-header{

  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

}

.notification-header h3{

  color:#fff;

  font-size:.78rem;

}

.notification-badge{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:22px;
  padding:0 9px;

  border-radius:999px;

  color:#171207;

  background:var(--yellow);

  font-size:.44rem;
  font-weight:900;

}

.notification-text{

  color:#cbc5bc;

  font-size:.63rem;
  line-height:1.75;

}

.notification-meta{

  display:flex;
  flex-wrap:wrap;
  gap:16px;

  color:#8d877f;

  font-size:.5rem;

}

.notification-actions{

  display:flex;
  flex-direction:column;
  gap:8px;

}

.notification-actions button{

  min-width:110px;
  height:36px;

  color:#fff;

  background:#222;

  border:1px solid var(--border);
  border-radius:999px;

  font-size:.5rem;
  font-weight:800;

  cursor:pointer;

  transition:.18s;

}

.notification-actions button:hover{

  background:#2c2c2c;

}

.notification-actions button.primary{

  color:#171207;

  background:var(--yellow);

}

.notification-actions button.danger{

  color:#ffcaca;

  background:rgba(231,53,53,.08);

  border-color:rgba(231,53,53,.18);

}

.notifications-empty{

  display:grid;
  justify-items:center;
  gap:10px;

  padding:90px 20px;

  background:#141414;

  border:1px solid var(--border);
  border-radius:20px;

}

.notifications-empty span{

  display:grid;
  place-items:center;

  width:70px;
  height:70px;

  border-radius:50%;

  background:#1f1f1f;

  font-size:2rem;

}

.notifications-empty h2{

  color:#fff;

  font-size:1rem;

}

.notifications-empty p{

  max-width:500px;

  color:#a7a19a;

  text-align:center;

  line-height:1.7;

}

.notifications-sidebar{

  display:flex;
  flex-direction:column;
  gap:18px;

}

.sidebar-card{

  padding:20px;

  background:linear-gradient(
    145deg,
    #171717,
    #101010
  );

  border:1px solid var(--border);
  border-radius:20px;

}

.sidebar-card h3{

  margin-bottom:18px;

  color:#fff;

  font-size:.82rem;

}

.stats-grid{

  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;

}

.stats-grid div{

  display:grid;
  gap:5px;

  padding:14px;

  background:#1c1c1c;

  border-radius:14px;

}

.stats-grid strong{

  color:#fff;

  font-size:1.2rem;

}

.stats-grid span{

  color:#a59f97;

  font-size:.5rem;

}

.sidebar-buttons{

  display:grid;
  gap:10px;

}

.sidebar-buttons a{

  display:flex;
  align-items:center;
  justify-content:center;

  height:42px;

  color:#fff;

  background:#222;

  border:1px solid var(--border);
  border-radius:999px;

  font-size:.55rem;
  font-weight:800;

  transition:.18s;

}

.sidebar-buttons a:hover{

  color:#171207;

  background:var(--yellow);

}

.live-feed{

  display:grid;
  gap:12px;

}

.live-feed li{

  color:#c7c2ba;

  font-size:.56rem;
  line-height:1.6;

  padding-bottom:10px;

  border-bottom:1px solid rgba(255,255,255,.05);

}

.live-feed li:last-child{

  border-bottom:0;
  padding-bottom:0;

}

.notification-modal{

  position:fixed;
  inset:0;
  z-index:900;

  display:grid;
  place-items:center;

  padding:20px;

  opacity:0;
  pointer-events:none;

  transition:opacity .2s;

}

.notification-modal.is-open{

  opacity:1;
  pointer-events:auto;

}

.notification-modal-backdrop{

  position:absolute;
  inset:0;

  background:rgba(0,0,0,.78);

  backdrop-filter:blur(8px);

}

.notification-modal-window{

  position:relative;
  z-index:2;

  width:min(720px,100%);
  max-height:90vh;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #181818,
      #101010
    );

  border:1px solid var(--border);
  border-radius:22px;

  box-shadow:var(--shadow-large);

  animation:notificationModal .22s ease;

}

.notification-modal-window header{

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:22px 24px;

  border-bottom:1px solid rgba(255,255,255,.06);

}

.notification-modal-window h2{

  color:#fff;

  font-size:.95rem;

}

.notification-modal-window header button{

  display:grid;
  place-items:center;

  width:38px;
  height:38px;

  color:#fff;

  background:#222;

  border-radius:10px;

  cursor:pointer;

}

.notification-modal-content{

  max-height:60vh;

  overflow-y:auto;

  padding:24px;

  color:#d3cec7;

  font-size:.66rem;
  line-height:1.8;

  scrollbar-width:thin;

}

.notification-modal-content h3{

  margin-bottom:14px;

  color:#fff;

  font-size:.86rem;

}

.notification-modal-content p{

  margin-bottom:18px;

}

.notification-modal-content img{

  width:100%;

  border-radius:16px;

  margin:18px 0;

}

.notification-modal-content ul{

  display:grid;
  gap:10px;

  margin-left:20px;

}

.notification-modal footer{

  display:flex;
  justify-content:flex-end;
  gap:10px;

  padding:20px 24px;

  border-top:1px solid rgba(255,255,255,.06);

}

.notification-modal footer button{

  height:42px;
  padding:0 18px;

  border-radius:999px;

  font-size:.55rem;
  font-weight:800;

  cursor:pointer;

}

#deleteNotification{

  color:#ffd0d0;

  background:rgba(231,53,53,.08);

  border:1px solid rgba(231,53,53,.20);

}

#closeNotification{

  color:#171207;

  background:var(--yellow);

}

.notifications-toast{

  position:fixed;

  right:25px;
  bottom:25px;

  display:flex;
  align-items:center;
  gap:10px;

  min-width:280px;
  min-height:60px;

  padding:0 20px;

  color:#fff;

  background:#1b1b1b;

  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;

  box-shadow:0 18px 45px rgba(0,0,0,.45);

  transform:translateY(30px);

  opacity:0;

  transition:.22s;

  z-index:950;

}

.notifications-toast.visible{

  transform:translateY(0);

  opacity:1;

}

.notifications-toast::before{

  content:"✓";

  display:grid;
  place-items:center;

  width:34px;
  height:34px;

  color:#171207;

  background:var(--yellow);

  border-radius:50%;

  font-weight:900;

}

.notification-loading{

  display:grid;
  gap:14px;

}

.notification-skeleton{

  height:88px;

  border-radius:18px;

  background:
    linear-gradient(
      90deg,
      #1d1d1d,
      #2a2a2a,
      #1d1d1d
    );

  background-size:300% 100%;

  animation:skeletonMove 1.2s infinite linear;

}

@keyframes skeletonMove{

  from{

    background-position:100% 0;

  }

  to{

    background-position:-100% 0;

  }

}

@keyframes notificationModal{

  from{

    transform:translateY(25px) scale(.96);

    opacity:0;

  }

  to{

    transform:translateY(0) scale(1);

    opacity:1;

  }

}

@media (max-width:1400px){

  .notifications-layout{

    grid-template-columns:260px 1fr;

  }

  .notifications-sidebar{

    display:none;

  }

}

@media (max-width:1050px){

  .notifications-hero{

    grid-template-columns:1fr;

  }

  .notification-counter{

    width:100%;

  }

  .notification-toolbar{

    flex-direction:column;
    align-items:stretch;

  }

}

@media (max-width:760px){

  .notification-card{

    grid-template-columns:1fr;

  }

  .notification-actions{

    flex-direction:row;
    flex-wrap:wrap;

  }

  .notification-actions button{

    flex:1;

  }

  .notification-counter{

    grid-template-columns:1fr;

  }

  .notification-modal-window{

    width:100%;

  }

}

@media (max-width:520px){

  .notifications-hero{

    padding:22px;

  }

  .notifications-hero h1{

    font-size:2.4rem;

  }

  .notification-filters{

    display:grid;
    grid-template-columns:repeat(2,1fr);

  }

  .notification-filters button{

    width:100%;

  }

  .notifications-toast{

    left:12px;
    right:12px;

    min-width:unset;

  }

  .notification-modal footer{

    flex-direction:column;

  }

  .notification-modal footer button{

    width:100%;

  }

}