.notification-settings-button { margin-right: 1.25rem; }
.notification-panel { position: fixed; z-index: 10000; bottom: 0; right: 1rem; width: min(40rem, calc(100% - 2rem)); box-sizing: border-box; max-height: 80dvh; overflow-y: auto; padding: 1.25rem; background: #182432; color: #dce6ef; border: 1px solid #426078; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 32px #0009; text-align: left; transform: translateY(100%); transition: transform 200ms ease; }
.notification-panel[hidden] { display: none; }
.notification-panel.is-open { transform: translateY(0); }
.notification-panel header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.notification-panel h2, .notification-panel h3 { margin: 0; color: #fff; }
.notification-panel p { font-size: .85rem; line-height: 1.5; color: #b7c8d8; }
.notification-panel button { background: #304b62; color: #fff; padding: .5rem .75rem; border-radius: 5px; border: 1px solid #55738a; cursor: pointer; }
.notification-panel button:hover { background: #406783; }
.notification-panel :focus-visible { outline: 3px solid #66c0f4; outline-offset: 4px; }
.notification-master { padding: .5rem 0; border-bottom: 1px solid #426078; font-weight: bold; }
.notification-servers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.notification-servers fieldset { min-width: 0; margin: 0; padding: .65rem; border: 1px solid #426078; border-radius: 8px; }
.notification-servers fieldset:disabled { opacity: .5; }
.notification-servers legend { padding: 0 .3rem; color: #66c0f4; font-weight: bold; font-size: .9rem; }
.notification-option { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 38px; font-size: .85rem; cursor: pointer; }
.notification-switch { position: relative; display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.notification-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.notification-switch-track { display: block; width: 38px; height: 22px; background: #465363; border-radius: 20px; transition: background 150ms; pointer-events: none; }
.notification-switch-track::after { content: ''; display: block; width: 16px; height: 16px; margin: 3px; border-radius: 50%; background: #d6dce2; transition: transform 150ms; }
.notification-switch input:checked + .notification-switch-track { background: #1a9fff; }
.notification-switch input:checked + .notification-switch-track::after { transform: translateX(16px); background: #fff; }
.notification-switch input:focus-visible + .notification-switch-track { outline: 3px solid #66c0f4; outline-offset: 3px; }
.notification-switch input:disabled { cursor: default; }
.notification-switch-state { width: 1.6rem; font-size: .75rem; pointer-events: none; }
.notification-history { padding-left: 1.2rem; max-height: 12rem; overflow-y: auto; font-size: .85rem; }
.notification-history li { margin: .65rem 0; }
.notification-done { width: 100%; }
.notification-toast { position: fixed; z-index: 10001; right: 1rem; bottom: calc(var(--footer-height, 140px) + 1rem); max-width: min(24rem, calc(100vw - 4rem)); padding: 1rem; border: 1px solid #66c0f4; border-radius: 8px; color: #fff; background: #182432; box-shadow: 0 4px 20px #0008; pointer-events: none; }
.notification-toast:empty { display: none; }
@media (max-width: 520px) { .notification-panel { right: 0; width: 100%; } .notification-servers { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .notification-panel, .notification-switch-track, .notification-switch-track::after { transition: none; } }