.df-notification-center{display:grid;gap:18px;color:#224554;padding-bottom:24px}
.df-notification-center *{box-sizing:border-box}
.ux-notifications-hero{padding:28px 30px;border:1px solid #d1e5eb;border-radius:23px;background:linear-gradient(115deg,#edf8f5,#edf5fc)}
.ux-notifications-hero>span{font-size:10px;font-weight:800;letter-spacing:.12em;color:#4c747c}.ux-notifications-hero h2{font-size:29px;line-height:1.25;letter-spacing:-.8px;margin:9px 0}.ux-notifications-hero p{font-size:14px;line-height:1.7;color:#526f7d;margin:0;max-width:620px}
.df-notification-center .df-device-notifications{padding:12px 16px;box-shadow:none;border:1px solid #dde8ee;border-radius:13px;background:#f7fafc;gap:14px}
.df-device-notifications[data-ux-collapsed=true]>:not(.ux-device-toggle){display:none!important}
.df-notification-center .ux-device-toggle{min-height:40px;background:transparent;color:#506f7e;border:0;font-size:12px;padding:8px;text-align:left}
.df-notification-center .df-device-notifications[data-ux-collapsed=false]{flex-wrap:wrap}.df-device-notifications[data-ux-collapsed=false]>.ux-device-toggle{flex-basis:100%}
.df-notification-center .df-notification-toolbar{padding:20px;border:1px solid #dce7ed;background:white;border-radius:18px;gap:18px}.df-notification-toolbar>div:first-child strong{font-size:23px;letter-spacing:-.5px;color:#204b5c}.df-notification-toolbar small{font-size:12px;line-height:1.5;color:#607b86}.df-notification-toolbar>div:last-child{gap:8px;flex-wrap:wrap}
.df-notification-center button{min-height:44px}.df-notification-center :focus-visible{outline:3px solid #d9a02c;outline-offset:3px}
.df-notification-center .df-notification-toolbar button{border:1px solid #d3e2e8;background:#f8fbfc;color:#416678;border-radius:10px;padding:10px 13px;font-size:12px}.df-notification-center button:disabled{opacity:.5;cursor:not-allowed}
.df-notification-center .df-notification-filters{display:flex;gap:8px;flex-wrap:wrap;border:0;padding:0;background:transparent}.df-notification-center .df-notification-filters button{border:1px solid #d5e3e9;background:white;color:#4b6d7d;border-radius:12px;padding:10px 14px;font-size:12px;display:flex;align-items:center;gap:7px}.df-notification-center .df-notification-filters button[aria-selected=true]{background:#205e78;border-color:#205e78;color:white}.df-notification-center .df-notification-filters small{background:#ffffff30;color:inherit;border-radius:6px;padding:2px 5px}
.ux-notifications-controls{display:flex;align-items:end;gap:12px}.ux-notifications-controls label{flex:1;display:grid;gap:7px;font-size:12px;font-weight:650;color:#4b6979}.ux-notifications-controls input{min-width:0;width:100%;padding:12px 14px;border:1px solid #bed3de;border-radius:11px;background:white;font:inherit;font-size:14px;color:#264a5c}.ux-notifications-controls button,.ux-notifications-empty button{padding:11px 16px;border:1px solid #c8dce5;border-radius:11px;background:white;color:#416678;font-size:12px;font-weight:650}.ux-notifications-controls button[aria-pressed=true]{background:#e2f3ef;color:#216855;border-color:#a8d6c7}
.ux-notifications-result{margin:-5px 0;font-size:12px;color:#627d89}.df-notification-groups>section>header{margin:8px 0 12px;display:flex;align-items:center;gap:10px}.df-notification-groups>section>header h2{font-size:16px;color:#3c606f}.df-notification-groups>section>header>span:not(.ux-notifications-count){display:none}.ux-notifications-count{font-size:11px;background:#e6eff3;color:#517082;padding:3px 8px;border-radius:7px}
.df-notification-center .df-notification-list{gap:12px}.df-notification-center .df-notification-list>article{border:1px solid #dae6ec;border-radius:17px;background:white;box-shadow:0 3px 13px #22425305;overflow:hidden}.df-notification-center .df-notification-list>article.unread{border-left:4px solid #36929f;background:#f6fcfc}.df-notification-center .df-notification-main{padding:20px;gap:16px;width:100%;text-align:left;background:transparent;border:0;color:inherit}.df-notification-center .df-notification-icon{width:45px;height:45px;border-radius:13px;background:#eaf3f8;color:#50849b;flex:0 0 45px}.df-notification-center .df-notification-icon.emergency,.df-notification-center .df-notification-icon.alert{background:#fff0df;color:#9a691e}.df-notification-main>div:nth-child(2)>span{font-size:10px;font-weight:750;letter-spacing:.04em;color:#547788}.df-notification-center .df-notification-main h2{font-size:16px;line-height:1.5;margin:5px 0;letter-spacing:-.2px;color:#254a5b}.df-notification-center .df-notification-main p{font-size:13px;line-height:1.7;color:#536f7c;margin:5px 0}.df-notification-center .df-notification-main small{font-size:11px;color:#6b8591}
.df-notification-center .df-notification-inline-actions{padding:11px 20px;border-top:1px solid #e4edf1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.df-notification-center .df-notification-inline-actions button{border:1px solid #cddfe8;color:#2d6680;border-radius:10px;background:white;padding:9px 13px;font-size:12px;font-weight:650;gap:7px}.ux-read-status{font-size:11px;color:#67838f;margin-right:auto}.unread .ux-read-status{color:#227369;font-weight:750}
.df-notification-center .df-notification-preferences{border:1px solid #d4e3eb;border-radius:17px;padding:22px;background:white;overflow:auto}.df-notification-center .df-empty-state,.ux-notifications-empty{padding:32px 22px;border:1px dashed #c9dce6;border-radius:18px;background:#f7fbfd;text-align:center}.ux-notifications-empty h3{font-size:18px;margin:0 0 10px}.ux-notifications-empty p{font-size:13px;line-height:1.6;color:#5c7887}
.df-notification-center [hidden]{display:none!important}
@media(max-width:640px){.df-notification-center{gap:14px}.ux-notifications-hero{padding:23px;border-radius:19px}.ux-notifications-hero h2{font-size:25px}.ux-notifications-hero p{font-size:13px}.df-notification-center .df-notification-toolbar{padding:17px;align-items:stretch;flex-direction:column}.df-notification-toolbar>div:last-child{display:flex;gap:7px}.df-notification-center .df-notification-toolbar button{font-size:11px;padding:9px}.df-notification-center .df-notification-filters{gap:6px}.df-notification-center .df-notification-filters button{flex:1 0 auto;font-size:11px;padding:9px 10px}.ux-notifications-controls{flex-wrap:wrap}.ux-notifications-controls label{flex-basis:100%}.ux-notifications-controls>button{width:100%}.df-notification-center .df-notification-main{padding:17px;gap:12px}.df-notification-center .df-notification-icon{width:37px;height:37px;flex-basis:37px;border-radius:11px}.df-notification-center .df-notification-main h2{font-size:15px}.df-notification-center .df-notification-inline-actions{padding:10px 16px}.df-notification-center .df-notification-main p{overflow-wrap:anywhere}}