:root { color-scheme: light; }
body { margin: 0; background: #eef5fa; color: #123a5c; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.notification-shell { display: grid; gap: 20px; width: min(1380px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 52px; }
.notification-hero { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; padding: 34px; border-radius: 28px; color: white; background: radial-gradient(circle at 82% 0%,rgba(40,220,187,.27),transparent 32%),linear-gradient(135deg,#073c74,#0a6eaa); box-shadow: 0 24px 60px rgba(6,55,101,.2); }
.notification-hero > div:first-child { max-width: 760px; }
.notification-hero span,.notification-card > span,.notification-card header span,.readiness-notice span { font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.notification-hero h1 { max-width: 720px; margin: 8px 0; font-size: clamp(30px,5vw,58px); line-height: 1.02; letter-spacing: -.045em; }
.notification-hero p { max-width: 670px; margin: 0; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.55; }
.notification-score { display: grid; align-content: center; min-width: 210px; padding: 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 20px; background: rgba(255,255,255,.12); }
.notification-score strong { font-size: 46px; line-height: 1; }.notification-score small{margin-top:8px;color:rgba(255,255,255,.8)}
.readiness-notice { display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;border:1px solid #f0c3a8;border-radius:19px;background:#fff8f1;box-shadow:0 10px 30px rgba(126,65,23,.06)}
.readiness-notice div{display:grid;gap:4px}.readiness-notice span{color:#a35a27}.readiness-notice strong{font-size:19px;color:#713d1b}.readiness-notice p{margin:0;color:#8c633f}.readiness-notice a{padding:10px 14px;border-radius:10px;color:white;background:#ae5b25;font-weight:800;text-decoration:none;white-space:nowrap}
.notification-layout { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.65fr);gap:20px;align-items:start }
.notification-main,.notification-side{display:grid;gap:20px}.notification-card{padding:22px;border:1px solid #d6e4ee;border-radius:22px;background:white;box-shadow:0 12px 35px rgba(15,62,99,.07)}
.notification-card header{display:flex;align-items:center;justify-content:space-between;gap:12px}.notification-card h2{margin:4px 0;color:#0b355a;font-size:22px}.notification-card > span,.notification-card header span{color:#67839a}
.notification-card button{min-height:39px;padding:0 13px;border:1px solid #c7dbe8;border-radius:10px;color:#1c597f;background:white;font-weight:850;cursor:pointer}.notification-card button:hover{border-color:#6ba4c8}.notification-card .notification-primary{color:white;border-color:#0871b3;background:#0871b3}
.notification-filters{display:flex;gap:6px;margin:18px 0;padding:5px;overflow:auto;border-radius:99px;background:#edf4f8}.notification-filters button{min-height:34px;border:0;border-radius:99px;background:transparent;white-space:nowrap}.notification-filters button.is-active{color:white;background:#0b68aa}
.notification-list{display:grid;gap:10px}.notification-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:start;padding:16px;border:1px solid #dce8f0;border-radius:16px;background:#fbfdff}.notification-item.is-unread{border-color:#9bc8e3;background:#f4fbff}.notification-item.is-urgent{border-left:5px solid #dd674d}.notification-item.is-celebration{border-left:5px solid #16a87e}
.notification-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#0871a8;background:#e3f3fb;font-size:12px;font-weight:950;text-transform:uppercase}.notification-content{display:grid;gap:4px}.notification-content strong{color:#0c375a;font-size:16px}.notification-content p{margin:0;color:#607c91;line-height:1.45}.notification-meta{color:#8096a6;font-size:11px;font-weight:800;text-transform:uppercase}
.notification-actions{display:flex;gap:6px;align-items:center}.notification-actions a{padding:9px 11px;border-radius:9px;color:#0870ad;background:#e9f5fb;font-size:12px;font-weight:850;text-decoration:none}.notification-actions button{min-height:34px;font-size:12px}.notification-empty{padding:34px;border:1px dashed #c8dce9;border-radius:15px;color:#70889a;text-align:center}
.preference-card{display:grid;gap:14px}.preference-card > p{margin:0;color:#688297;line-height:1.45}.preference-card label{display:flex;gap:11px;align-items:flex-start;padding:12px;border:1px solid #dfebf2;border-radius:13px;background:#fbfdff}.preference-card input{width:19px;height:19px;margin-top:2px;accent-color:#0871b3}.preference-card label span{display:grid;gap:3px}.preference-card label strong{color:#173e5e}.preference-card label small{color:#71899b;line-height:1.35}.digest-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:900px){.notification-layout{grid-template-columns:1fr}.notification-side{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.notification-shell{width:min(100% - 20px,1380px)}.notification-hero{padding:24px;flex-direction:column}.notification-score{min-width:0}.readiness-notice{align-items:flex-start;flex-direction:column}.notification-side{grid-template-columns:1fr}.notification-item{grid-template-columns:auto 1fr}.notification-actions{grid-column:1/-1}.notification-card header{align-items:flex-start;flex-direction:column}}