.notifications-page { max-width:1000px; margin-inline:auto; }
.notices-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 16px; margin-bottom:16px; }
.notices-title { display:flex; align-items:center; gap:12px; min-width:0; }
.notices-heading h1 { margin:0; font-size:clamp(1.5rem,3vw,1.875rem); letter-spacing:-.04em; }
.notices-count { display:grid; place-items:center; flex:none; min-width:28px; height:28px; padding:0 7px; border-radius:50px; background:var(--green); color:#fff; font-size:.875rem; font-weight:700; font-variant-numeric:tabular-nums; }
.notices-count.is-zero { background:#e8eeed; color:#61716d; }
.notices-read-all { border:0; background:transparent; color:var(--green); min-height:44px; padding:8px 0 8px 8px; margin-left:auto; font:inherit; font-size:1rem; font-weight:650; white-space:nowrap; cursor:pointer; }
.notices-read-all:hover:not(:disabled) { text-decoration:underline; text-underline-offset:4px; }
.notices-read-all:disabled { background:transparent; color:var(--muted); cursor:default; }
.notifications-page .notification-list { display:grid; gap:10px; overflow:visible; padding:0; border:0; background:transparent; }
.notifications-page .notice-card { position:relative; display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface,#fff); text-decoration:none; overflow:hidden; }
.notifications-page .notice-card:last-child { border-bottom:1px solid var(--line); }
.notifications-page .notice-card.unread::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--green); }
.notifications-page .notice-card:hover { border-color:var(--green); }
.notifications-page .notification-symbol { width:40px; height:40px; border-radius:11px; background:#eff2f5; color:#637184; }
.notifications-page .notice-card.unread .notification-symbol { background:#e4f5ef; color:var(--green); }
.notifications-page .notification-symbol > svg { width:22px; height:22px; }
.notifications-page .notice-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; min-width:0; flex:1; overflow-wrap:anywhere; }
.notifications-page .notice-copy strong { grid-column:1; grid-row:1; color:var(--ink); font-size:1rem; font-weight:650; line-height:1.4; margin:0; }
.notifications-page .notice-copy > span { grid-column:1 / -1; grid-row:2; color:var(--muted); font-size:.875rem; line-height:1.5; white-space:pre-wrap; }
.notifications-page .notice-image { grid-column:1 / -1; grid-row:4; display:block; max-width:100%; max-height:320px; width:auto; height:auto; object-fit:contain; border-radius:12px; margin-top:8px; }
.notifications-page .notice-copy small { grid-column:2; grid-row:1; color:var(--muted); margin:0; font-size:.875rem; line-height:1.6; text-align:right; white-space:nowrap; }
.notifications-page .notice-unread-dot { width:7px; height:7px; margin-top:8px; border-radius:50%; background:var(--green); display:block; flex:none; }
.notices-empty { text-align:center; padding:48px 24px; background:var(--surface,#fff); border:1px solid var(--line); border-radius:16px; }
.notices-empty > svg { width:32px; height:32px; color:var(--green); }
.notices-empty h2 { margin:14px 0 8px; font-size:1.25rem; }
.notices-empty p { color:var(--muted); font-size:1rem; margin:0; }
.notifications-page :is(a,button):focus-visible { outline:3px solid var(--green); outline-offset:3px; }
@media(max-width:600px) {
 .notices-heading { gap:4px 12px; margin-bottom:12px; }
 .notices-title { gap:9px; }
 .notices-heading h1 { font-size:1.5rem; }
 .notices-count { min-width:26px; height:26px; padding:0 6px; font-size:.875rem; }
 .notices-read-all { font-size:.875rem; padding-left:0; }
 .notifications-page .notice-card { gap:10px; padding:14px; }
 .notifications-page .notification-symbol { width:36px; height:36px; border-radius:10px; }
 .notifications-page .notification-symbol > svg { width:21px; height:21px; }
 .notifications-page .notice-copy { grid-template-columns:minmax(0,1fr); gap:3px; }
 .notifications-page .notice-copy small { grid-column:1; grid-row:3; margin-top:3px; text-align:left; white-space:normal; }
}
[data-appearance="dark"] .notifications-page .notification-symbol { background:#29363b; color:#a7b7c2; }
[data-appearance="dark"] .notifications-page .notice-card.unread .notification-symbol { background:#203e36; color:var(--green); }
[data-appearance="dark"] .notices-count { color:#102d25; }
[data-appearance="dark"] .notices-count.is-zero { background:#293b35; color:var(--muted); }