.notification-panel,.notification-item { background:var(--planzzz-paper,#fffdf8); border:1px solid var(--planzzz-border,#d6c9ad); border-radius:var(--radius-panel,22px); padding:clamp(16px,3vw,24px); margin:16px 0; color:var(--planzzz-ink,#17150f); }
.notifications-page { max-width:850px; margin:0 auto; padding:16px; overflow-wrap:anywhere; }
.notification-panel h2,.notification-item h2 { font-size:1.35rem; margin:8px 0; }
.notification-panel fieldset { border:0; padding:8px 0; margin:12px 0; }
.notification-panel legend { font-size:1rem; font-weight:700; }
.notification-panel label { display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 0; flex-wrap:wrap; }
.notification-panel input[type=checkbox] { width:24px; height:24px; accent-color:#8c6300; flex:none; }
.notification-panel select,.notification-panel textarea,.notification-panel input[type=datetime-local] { width:100%; max-width:100%; min-height:48px; border:1px solid #8b7a54; border-radius:13px; padding:12px; background:#fffdf8; color:#17150f; font:inherit; }
.notification-panel textarea { min-height:120px; }
.notification-setting,.notification-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0; }
.notification-setting { justify-content:space-between; }
.notification-panel button,.notification-item button,.notifications-page>button { min-height:48px; padding:10px 16px; white-space:normal; max-width:100%; }
.notification-count { display:inline-flex; align-items:center; justify-content:center; min-width:1.75em; padding:2px 8px; border-radius:999px; background:#ffe48a; color:#17150f; font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; }
.notification-link { display:flex; gap:8px; align-items:center; padding:12px; min-height:48px; color:var(--planzzz-cream,#f4ede2); }
.notification-list { padding:0; list-style:none; }
.notification-item.is-unread { border-inline-start:5px solid #936900; }
.notification-read-state { font-weight:700; }
.notification-item time { color:#625744; font-size:.9rem; }
.notification-body { white-space:pre-wrap; }
.notification-panel :focus-visible,.notification-item :focus-visible,.notification-link:focus-visible { outline:3px solid #8c6300; outline-offset:3px; }
.notification-panel [role=status],.notifications-page>[role=status] { min-height:1.5em; }
.notification-panel .notification-secondary,.notification-item .notification-secondary,.notifications-page>.notification-secondary { background:var(--planzzz-paper); box-shadow:none; border-bottom-width:1px; font-weight:600; }
.notification-item .pz-action-primary { --action-face:var(--planzzz-face-cream); }
.notification-link:focus-visible { outline-color:var(--planzzz-highlight); }