/* Compound selector (not just .action-center) so this reliably wins over
   the generic .card rule in components-v039.css regardless of stylesheet
   load order — this element carries both classes (action-center.js's
   ensure() sets className="action-center card hidden"), and since the two
   rules have equal specificity otherwise, .card's later-loaded background/
   border was silently winning and left this card looking half-themed: a
   light .card background around still-dark-hardcoded .action-center-item
   rows. This card is a deliberate always-dark "spotlight" regardless of
   theme, matching its light-on-dark item rows below — restoring that
   consistently in both themes, not switching it to a themed card, since a
   from-scratch redesign of its look is out of scope here. */
.action-center.card { margin-bottom: 18px; padding: 20px; border-color: rgba(139,210,224,.24); background: linear-gradient(135deg,rgba(11,43,63,.98),rgba(7,29,46,.98)); }
/* v0.42 Deel G: the notifications bell opens the same computed items in a
   #notifications-panel section (same look, own id — see action-center.js)
   through the shared modal sheet, kept a bit narrower than a full-size
   form modal to read as a compact popover rather than another big page. */
#notifications-panel { border: 1px solid rgba(139,210,224,.24); background: linear-gradient(135deg,rgba(11,43,63,.98),rgba(7,29,46,.98)); border-radius: var(--radius-lg); padding: 20px; color: #dff3f8; }
.modal-sheet.notifications-sheet { max-width: min(420px, calc(100vw - 32px)); }
/* This card never follows the light/dark toggle (see the compound-selector
   comment above) — its own eyebrow/heading/muted text can't lean on the
   generic theme tokens either, since those flip to dark ink in light mode
   and would go straight to illegible against this card's own always-dark
   background. Hardcoded light-on-dark values here instead, matching the
   already-hardcoded background/badge colors below rather than mixing in
   theme tokens that would only work in one of the two themes. */
.action-center.card .eyebrow, #notifications-panel .eyebrow { color: #8bd2e0; }
.action-center.card h2, .action-center.card b, #notifications-panel h2, #notifications-panel b { color: #f4faf9; }
.action-center-heading,.action-center-clear { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.action-center-heading h2 { margin:2px 0 0; }
.action-center-heading>strong { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#082238; background:#8bd2e0; }
.action-center-list { display:grid; gap:8px; margin-top:15px; }
.action-center-item { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 12px; border:1px solid rgba(139,210,224,.24); border-radius:13px; background:rgba(3,23,37,.52); }
.action-center-item>span,.action-center-clear>span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#082238; font-weight:800; background:#8bd2e0; }
.action-center-item.action-urgent>span { background:#f2937a; }
.action-center-item b,.action-center-item small,.action-center-clear b,.action-center-clear small { display:block; }
.action-center-item small,.action-center-clear small { margin-top:2px; color:#a9c3ce; }
.action-center-item button { min-height:40px; }
.action-center-clear { justify-content:flex-start; }
.action-center-clear>button { margin-left:auto; }
.action-center-loading { margin:0; color:#a9c3ce; }
.setup-guide-dismiss { margin-top:14px; }
.setup-guide-launcher { display:block; margin:-5px 0 15px; }
#dashboard-guidance-slot > .action-center { margin-bottom: 0; }
@media(max-width:600px){.action-center{padding:17px 14px}.action-center-item{grid-template-columns:28px minmax(0,1fr)}.action-center-item button{grid-column:2;width:100%}.action-center-clear{display:grid;grid-template-columns:30px minmax(0,1fr)}.action-center-clear>button{grid-column:1/-1;width:100%;margin:4px 0 0}}