/* Scoped to the pilot settings card; use the host's existing theme tokens. */
#notificationBell{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:10px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:13px}
#notificationBell svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#notificationBell:focus-visible{outline:2px solid var(--accent-1);outline-offset:3px}
.notification-count{position:absolute;top:-3px;right:-3px;min-width:18px;padding:2px 4px;border-radius:10px;background:var(--accent-1);color:#050505;font-size:10px;font-weight:750;line-height:1.2}
.notification-inbox-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}
.notification-inbox-head strong{margin-right:auto}
#deviceNotifications{scroll-margin-top:100px}
@media(max-width:440px){html body .topbar{gap:4px!important;padding-left:10px!important;padding-right:10px!important}html body .topbar-actions{gap:3px!important}html body .topbar-title{min-width:0!important}html body #topbarBrand{font-size:12px!important;letter-spacing:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html body #topbarProduct{font-size:9px!important;letter-spacing:0!important}html body .home-mark,html body .home-mark img{width:32px!important;height:32px!important}}
#deviceNotifications{grid-column:1/-1;min-width:0}
#notificationSettings p{margin:12px 0;overflow-wrap:anywhere}
#notificationSettings p:has(button){display:flex;flex-wrap:wrap;gap:8px}
#notificationSettings button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;max-width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:var(--panel-2);font:inherit;font-size:14px;line-height:1.4;text-align:left}
#notificationSettings button:disabled{opacity:.5;cursor:default}
#notificationSettings button:focus-visible,#notificationSettings summary:focus-visible{outline:2px solid var(--accent-1);outline-offset:3px}
#notificationSettings [data-notification="enable"]{border-color:var(--accent-1);font-weight:650}
#notificationSettings label{display:flex;align-items:center;gap:10px;min-height:44px}
#notificationSettings input{width:20px;height:20px;accent-color:var(--accent-1)}
#notificationSettings ul{padding-left:20px;max-height:240px;overflow:auto}
#notificationSettings li{padding:8px 0;overflow-wrap:anywhere}
#notificationSettings summary{min-height:44px;padding:12px 0;cursor:pointer}
#notificationSettings button svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#notificationSettings button:has(svg):not(:has(span)){padding:10px;width:44px}
@media(hover:hover){#notificationSettings button:not(:disabled):hover{border-color:var(--accent-1)}}