.notification-page{color:#18324e;gap:18px;width:min(1040px,100% - 32px);margin:28px auto 64px;display:grid}.notification-page>header{background:linear-gradient(135deg,#f5fbf8,#f6f9fd);border:1px solid #dfe7ed;border-radius:14px;padding:28px 30px}.notification-page>header p{color:#13715c;letter-spacing:.06em;margin:0;font-size:.72rem;font-weight:900}.notification-page>header h1{margin:5px 0 7px;font:500 clamp(2.1rem,5vw,3.4rem)/1 Georgia,serif}.notification-page>header span{color:#65778a}.notification-list{gap:10px;display:grid}.notification-list article{background:#fff;border:1px solid #dfe7ed;border-radius:12px;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px;display:grid}.notification-list article.unread{background:#fbfffd;border-left:4px solid #18816a}.notification-list article>span{color:#17735f;background:#e8f5f0;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.notification-list small,.notification-list time{color:#738397;font-size:.72rem}.notification-list h2{margin:3px 0;font-size:1rem}.notification-list p{color:#566b7d;margin:0 0 6px;font-size:.86rem}.notification-list article>div:last-child{gap:7px;display:flex}.notification-list .button{min-height:40px}.notification-loading,.notification-empty{text-align:center;background:#fff;border:1px solid #dfe7ed;border-radius:12px;place-items:center;gap:8px;min-height:220px;padding:30px;display:grid}.notification-empty h2,.notification-empty p{margin:0}.notification-empty p{color:#687b8c}@media (max-width:700px){.notification-page{width:min(100% - 20px,1040px);margin-top:12px}.notification-page>header{padding:22px 18px}.notification-list article{grid-template-columns:38px 1fr;align-items:start;padding:15px}.notification-list article>div:last-child{grid-column:1/-1}.notification-list .button{flex:1;justify-content:center}}