/* ===========================
   LIFFY Notifications
=========================== */

body{
    background:#f6f7fb;
}

.notification-header{

position:sticky;
top:0;

z-index:1000;

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

padding:18px 22px;

background:#fff;

border-bottom:1px solid #ececec;

}

.notification-header h2{

margin:0;
font-size:24px;
font-weight:800;

}

.back-btn{

text-decoration:none;
color:#222;

font-size:28px;

font-weight:bold;

}

.notification-container{

max-width:750px;

margin:auto;

padding:15px;

}

.notification-item{

display:flex;

align-items:center;

gap:15px;

background:#fff;

padding:16px;

margin-bottom:14px;

border-radius:18px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

transition:.25s;

}

.notification-item:hover{

transform:translateY(-2px);

}

.notification-avatar img{

width:58px;

height:58px;

border-radius:50%;

object-fit:cover;

border:2px solid #eee;

}

.notification-content{

flex:1;

}

.notification-content p{

margin:0;

font-size:15px;

line-height:1.5;

color:#333;

}

.notification-content strong{

font-size:16px;

color:#111;

}

.notification-time{

display:block;

margin-top:6px;

font-size:12px;

color:#999;

}

.notification-post img{

width:68px;

height:68px;

border-radius:14px;

object-fit:cover;

background:#f2f2f2;

}

.notification-empty{

text-align:center;

padding:70px 20px;

color:#888;

}

.notification-empty h3{

margin-bottom:10px;

font-size:24px;

}