body .notification-bell { position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:8px; border:1px solid var(--color-border,#d9dfed); border-radius:50%; background:var(--color-surface,#fff); color:var(--color-text,#172541); cursor:pointer; }
body .notification-bell[hidden], .notification-badge[hidden] { display:none; }
/* Matched account utilities: consistent circles, quiet surfaces, one accent. */
body .user-controls { gap:8px; }
body .user-controls #themeToggle,
body .user-controls #notificationBell,
body .user-controls #accountButton { display:inline-flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; min-width:40px; height:40px; min-height:40px; padding:0; border:1px solid transparent; border-radius:50%; background:var(--color-surface-muted); color:var(--color-text-secondary); line-height:1; box-shadow:none; transition:background .15s ease,color .15s ease; }
body .user-controls #accountButton .account-menu-image { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; object-position:center; }
body .user-controls #themeToggle { font-size:20px; }
body .user-controls #accountButton { background:var(--color-accent-surface); color:var(--color-accent); font-size:14px; font-weight:600; }
body .user-controls #themeToggle:hover,
body .user-controls #notificationBell:hover,
body .user-controls #accountButton:hover { background:var(--color-accent-surface); color:var(--color-accent); }
body .user-controls #themeToggle:focus-visible,
body .user-controls #notificationBell:focus-visible,
body .user-controls #accountButton:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
body .user-controls #notificationBell[hidden],body .user-controls #accountButton[hidden] { display:none; }
body.signed-in-mode .user-controls .account-plan-control{position:relative;display:inline-grid;flex:0 0 44px;width:44px;height:44px;place-items:center}
body.signed-in-mode .user-controls .account-plan-control[hidden]{display:none}
body.signed-in-mode .user-controls .account-plan-control #accountButton{width:40px;min-width:40px;height:40px;min-height:40px;overflow:hidden}
body.signed-in-mode .user-controls .account-plan-control .plan-status{position:absolute;z-index:2;right:-8px;bottom:-1px;display:inline-block;min-width:0;min-height:0;padding:2px 4px 1px;border:1px solid #c77618;border-top-color:#ffe1ae;border-left-color:#ffe1ae;outline:0;border-radius:4px;background:#fff7e9;color:#9c4b00;font-family:Inter,"Segoe UI",system-ui,sans-serif;font-size:9px;font-weight:800;line-height:1;letter-spacing:.01em;text-align:center;pointer-events:none;box-shadow:inset 0 1px 0 #fffdf8,0 1px 1px #7a450526}
body.signed-in-mode.dark-mode .user-controls .account-plan-control .plan-status{border-color:#a76113;border-top-color:#ffc77b;border-left-color:#ffc77b;background:#35220f;color:#ffd399;box-shadow:inset 0 1px 0 #ffffff1a,0 1px 1px #00000066}
@media (max-width:760px), (pointer:coarse) {
  body .user-controls #themeToggle,body .user-controls #notificationBell,body .user-controls #accountButton { flex-basis:44px; width:44px; min-width:44px; height:44px; min-height:44px; }
  body.signed-in-mode .user-controls .account-plan-control{flex-basis:42px;width:42px;height:42px}
  body.signed-in-mode .user-controls .account-plan-control #accountButton{width:38px;min-width:38px;height:38px;min-height:38px}
  body.signed-in-mode .user-controls .account-plan-control .plan-status{right:-5px;bottom:-1px;min-width:0;min-height:0;padding:2px 3px 1px;font-size:8px}
}
.notification-bell svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.notification-badge { position:absolute; top:-3px; right:-5px; min-width:17px; height:17px; padding:0 3px; border-radius:12px; background:#e67e00; color:#fff; font-family:inherit; font-weight:600; font-size:10px; line-height:17px; }
body .notification-dialog { box-sizing:border-box; width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:16px 16px auto auto; padding:24px; border:1px solid var(--color-border,#d9dfed); border-radius:20px; background:var(--color-surface,#fff); color:var(--color-text,#172541); box-shadow:0 24px 80px #10204026; }
.notification-dialog::backdrop { background:#10204026; }
.notification-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.notification-heading h2 { margin:0; font-size:21px; letter-spacing:-.5px; }
.notification-heading button { width:32px; height:32px; border:1px solid var(--color-border,#d9dfed); border-radius:8px; background:transparent; color:inherit; cursor:pointer; }
.notification-intro,.notification-status { font-size:13px; line-height:1.6; color:var(--color-text-muted,#566580); }
.notification-list { list-style:none; margin:0; padding:0; }
.notification-item { padding:20px 0; border-top:1px solid var(--color-border,#d9dfed); overflow-wrap:anywhere; }
.notification-eyebrow { color:var(--color-text-muted,#566580); font-size:10px; font-weight:600; letter-spacing:1px; }
.notification-item h3 { margin:8px 0; font-size:17px; }
.notification-item p { font-size:13px; line-height:1.6; margin:6px 0; }
.notification-meta { color:var(--color-text-muted,#566580); }
.notification-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.notification-actions button { padding:10px 14px; border:1px solid var(--color-border,#d9dfed); border-radius:9px; font:inherit; font-size:13px; cursor:pointer; }
.notification-item:has(.notification-accept) { border-left: 2px solid var(--color-accent,#3549d5); padding-left: 14px; }
.notification-accept { background:#3549d5; color:white; }
.notification-decline { background:transparent; color:inherit; }
.notification-dialog button:disabled { opacity:.6; cursor:wait; }
.notification-refresh { padding:8px 0; background:transparent; border:0; color:var(--color-primary,#3549d5); font:inherit; font-size:13px; cursor:pointer; }
.notification-dialog button:focus-visible,.notification-bell:focus-visible { outline:3px solid #7e91ff; outline-offset:3px; }