/* LISTOOL AI V113 — Notifications */

.notifications-page{
    width:min(980px,calc(100% - 32px));
    margin:0 auto;
    padding:120px 0 100px;
}

.notifications-hero{
    text-align:center;
    margin-bottom:40px;
}

.notifications-badge{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
}

.notifications-hero h1{
    margin:22px 0 14px;
    font-size:clamp(42px,7vw,82px);
    line-height:.95;
    letter-spacing:-.06em;
    color:#fff;
}

.notifications-hero p{
    max-width:720px;
    margin:0 auto;
    color:rgba(255,255,255,.7);
}

.notifications-list{
    display:grid;
    gap:18px;
}

.notification-item{
    display:grid;
    grid-template-columns:60px 1fr auto;
    gap:20px;
    align-items:center;
    padding:24px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:26px;
    background:rgba(255,255,255,.04);
}

.notification-item__icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(135deg,#7c5cff,#00d4ff);
    color:#fff;
}

.notification-item h3{
    color:#fff;
    margin-bottom:8px;
}

.notification-item p,
.notification-item span{
    color:rgba(255,255,255,.68);
}

.notification-read-btn{
    min-height:40px;
    padding:0 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:#fff;
    cursor:pointer;
}

.is-read{
    opacity:.7;
}

@media(max-width:780px){
    .notification-item{
        grid-template-columns:1fr;
    }
}