*{box-sizing:border-box}html{background:#0d1317}body{margin:0;min-height:100dvh;color:#edf2f4;background:radial-gradient(circle at 15% 0,#263039 0,transparent 34%),#0d1317;font-family:"Tajawal","Segoe UI",Arial,sans-serif}a{text-decoration:none;color:inherit}button{font:inherit}header{min-height:70px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;border-bottom:1px solid #354149;background:#10171bed;position:sticky;top:0;z-index:5;backdrop-filter:blur(15px)}header a,header button{min-height:44px;padding:8px 14px;border:1px solid #3c4a52;border-radius:12px;color:#e9d497;background:#20292f;cursor:pointer}header button{justify-self:end}header strong{color:#efcf77;font-size:18px}main{width:min(760px,100%);margin:auto;padding:24px max(15px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left))}.notifications-hero{padding:22px;border:1px solid #3b484f;border-radius:22px;background:linear-gradient(145deg,#202a30,#131b20)}.notifications-hero small{color:#67d8d0}.notifications-hero h1{margin:6px 0;color:#f0d27f;font-size:clamp(25px,6vw,38px)}.notifications-hero p{margin:0;color:#aebbc2;line-height:1.7}#notificationStatus{color:#9eacb4;text-align:center}.notification-list{display:grid;gap:10px}.notification-card{padding:16px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;border:1px solid #34434b;border-radius:17px;background:#182126}.notification-card.unread{border-color:#b89445;background:linear-gradient(145deg,#29271e,#182126)}.notification-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:#101719;background:#dbb85e;font-weight:900}.notification-copy{min-width:0;display:grid;gap:5px}.notification-copy b{color:#f4e4b7}.notification-copy p{margin:0;color:#c0cbd0;line-height:1.65;overflow-wrap:anywhere}.notification-copy small{color:#82949e}.notification-reward{padding:6px 9px;border-radius:999px;color:#f1d27a;background:#30291a;font-size:11px;white-space:nowrap}.empty-notifications{padding:40px 15px;border:1px dashed #3d4a50;border-radius:18px;color:#9cabb2;text-align:center}@media(max-width:520px){header{grid-template-columns:auto 1fr auto}header a,header button{padding-inline:9px;font-size:11px}.notifications-hero{padding:18px}.notification-card{padding:13px;grid-template-columns:auto 1fr}.notification-reward{grid-column:2}.notification-icon{width:37px;height:37px}}