.notification-settings {max-width:58rem;margin-inline:auto;min-width:0}
.notification-settings h1 {font-size:clamp(1.4rem,3vw,1.9rem)}
.notification-settings p {color:var(--text-secondary,#526071);line-height:1.55}
.notification-card {border:1px solid var(--border);background:var(--surface,var(--card-bg));border-radius:12px;padding:clamp(1rem,3vw,1.5rem);margin-block:1rem}
.notification-event {display:grid;grid-template-columns:minmax(0,1fr) minmax(9rem,13rem) auto;align-items:center;gap:.75rem;padding-block:.85rem;border-bottom:1px solid var(--border)}
.notification-event:last-child {border:0}
.notification-event label {display:flex;align-items:center;gap:.6rem;min-width:0}
.notification-event input[type=checkbox] {width:1.2rem;height:1.2rem;flex-shrink:0}
.notification-event select {width:100%;min-width:0;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:.55rem;min-height:44px}
.notification-actions {display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.notification-settings button,.notification-settings .btn-primary,.notification-settings .btn-secondary {border-radius:8px;min-height:44px;padding:.55rem .85rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.notification-status {min-height:1.5rem;margin-block:.8rem;color:var(--text-secondary,#526071)}
.notification-volume {display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-block:1rem}
.notification-volume input {width:min(100%,18rem);min-height:44px}
.notification-live {position:fixed;bottom:1rem;right:1rem;width:min(25rem,calc(100vw - 2rem));padding:1rem;background:var(--surface,#fff);color:var(--text,#172638);border:1px solid var(--border,#d5dde6);border-left:4px solid var(--primary,#2563eb);border-radius:10px;box-shadow:0 6px 24px #0002;z-index:10030}
.notification-live a {display:inline-flex;min-height:44px;align-items:center;color:var(--primary,#2563eb);margin-right:1rem}
.notification-live button {min-height:44px;min-width:44px;border:0;background:transparent;color:inherit}
@media(max-width:520px){.notification-event {grid-template-columns:minmax(0,1fr) auto}.notification-event label {grid-column:1/-1;min-height:44px}.notification-actions>* {flex:1 1 auto}.notification-card {padding:1rem}}