.notification-button{position:relative;min-width:44px;height:44px;border:1px solid var(--border,var(--line,#d9c9b4));border-radius:12px;background:var(--surface,var(--panel,#fff));color:inherit;font-size:1.15rem;cursor:pointer}
.notification-badge{position:absolute;right:-5px;top:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#b42318;color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;border:2px solid var(--surface,var(--panel,#fff))}
.notification-badge:empty{display:none}.notification-panel{position:fixed;right:18px;top:72px;z-index:1000;width:min(420px,calc(100vw - 24px));max-height:min(680px,calc(100vh - 90px));overflow:auto;border:1px solid var(--border,var(--line,#d9c9b4));border-radius:18px;background:var(--surface,var(--panel,#fff));color:var(--text,var(--text-primary,#2b2926));box-shadow:0 22px 70px #0004;padding:16px}
.notification-panel.hidden{display:none}.notification-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px}.notification-panel h2{font-size:1.15rem;margin:0}.notification-tabs{display:flex;gap:8px;margin:14px 0}.notification-tabs button,.notification-actions button,.pwa-install-button{border:1px solid var(--border,var(--line,#d9c9b4));background:transparent;color:inherit;border-radius:10px;padding:8px 10px;cursor:pointer}.notification-tabs button.active{background:#b87916;color:#fff}.notification-list{display:grid;gap:9px}.notification-item{border:1px solid var(--border,var(--line,#d9c9b4));border-radius:13px;padding:12px;display:grid;gap:6px;background:color-mix(in srgb,var(--surface,var(--panel,#fff)) 94%,#b87916 6%)}.notification-item.unread{border-left:4px solid #b87916}.notification-item p,.notification-item small{margin:0}.notification-item small{opacity:.7}.notification-item-actions{display:flex;gap:8px;justify-content:flex-end}.notification-item-actions button{border:0;background:transparent;color:#9b6612;text-decoration:underline;cursor:pointer}.notification-empty{padding:28px 8px;text-align:center;opacity:.7}.notification-settings{border-top:1px solid var(--border,var(--line,#d9c9b4));margin-top:14px;padding-top:14px;display:grid;gap:10px}.notification-settings label{display:flex;justify-content:space-between;gap:16px;align-items:center}.notification-permission{padding:12px;border-radius:12px;background:#b8791614}.ios-install-guide{font-size:.9rem;line-height:1.45;padding:12px;border:1px solid var(--border,var(--line,#d9c9b4));border-radius:12px}.pwa-install-button{font-weight:700}.notification-actions{display:flex;gap:8px;flex-wrap:wrap}.notification-close{border:0;background:transparent;color:inherit;font-size:1.4rem;cursor:pointer}
.notification-status{min-height:1.2em;margin:6px 0;color:#237a3b;font-size:.9rem}.notification-status.error{color:#b42318}
.push-optin-banner{display:flex;align-items:center;gap:20px;border:1px solid var(--gold,#bd811b);border-left-width:4px;border-radius:16px;padding:18px;margin-bottom:20px;background:color-mix(in srgb,var(--surface,#fff) 94%,var(--gold,#bd811b) 6%);color:var(--text,#28241f)}.push-optin-copy{flex:1;min-width:0}.push-optin-copy h3{margin:0 0 7px;font-size:1.05rem}.push-optin-copy p{margin:0;line-height:1.5;font-size:.93rem}.push-optin-copy .push-optin-explanation{margin-top:9px}.push-optin-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}.push-optin-actions button{min-height:44px;border-radius:11px;padding:10px 13px;font:inherit;cursor:pointer}.push-optin-enable{border:0;background:var(--gold,#bd811b);color:#16130e;font-weight:800!important}.push-optin-enable:disabled{opacity:.65;cursor:wait}.push-optin-snooze{border:1px solid var(--line,#dfd6ca);background:transparent;color:inherit}.push-optin-help{margin-top:10px;padding:12px;border:1px solid var(--line,#dfd6ca);border-radius:10px;line-height:1.5;font-size:.9rem}.push-optin-status:empty{display:none}.push-optin-status:not(:empty){margin-top:9px;color:var(--danger,#b53a46)}.push-optin-success{padding:12px 16px;margin-bottom:16px;border:1px solid var(--ok,#26735d);border-radius:12px;color:var(--ok,#26735d);background:var(--surface,#fff)}
@media(max-width:600px){.push-optin-banner{flex-direction:column;align-items:stretch;padding:15px;gap:13px}.push-optin-actions{flex-shrink:1}.push-optin-actions button{flex:1;white-space:normal}}
@media(max-width:600px){.notification-panel{right:8px;left:8px;top:66px;width:auto;max-height:calc(100vh - 76px)}.notification-button{height:40px;min-width:40px}.pwa-install-button{font-size:.78rem;padding:7px}}
