.support-attention-panel {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.75fr);
  gap: 14px;
  margin: 12px 0 2px;
  padding: 14px;
  border: 1px solid #f2c76e;
  border-radius: 17px;
  background: linear-gradient(105deg, #fff7dc, #fffdf6);
  box-shadow: 0 9px 24px rgba(154, 99, 7, .10);
}
.support-attention-panel[hidden] { display: none; }
.support-attention-title { display: flex; align-items: center; gap: 11px; color: #74450a; }
.support-attention-title > span { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px; background: #e11d48; color: #fff; font-size: 20px; font-weight: 950; }
.support-attention-title strong,.support-attention-title small { display: block; }
.support-attention-title strong { font-size: 17px; }
.support-attention-title small { margin-top: 3px; color: #8b6a35; font-size: 11px; }
.support-attention-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.support-attention-list > a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; min-width: 0; padding: 10px 11px; border: 1px solid #ead7a6; border-radius: 12px; background: #fff; color: #57370d; }
.support-attention-list > a span { overflow: hidden; font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.support-attention-list > a b { display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 7px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 12px; }
.support-attention-list > a small { grid-column: 1 / -1; color: #8a7147; font-size: 9px; }
[data-support-attention] { position: relative; overflow: visible !important; }
.page-hub .secondary-grid > a { --tool-color: #1769c2; --tool-soft: #eaf3ff; }
.page-hub .secondary-grid > a[data-tool="supplies"] { --tool-color: #d76518; --tool-soft: #fff0e3; }
.page-hub .secondary-grid > a[data-tool="leave"] { --tool-color: #d23e68; --tool-soft: #ffe9f0; }
.page-hub .secondary-grid > a[data-tool="overtime"] { --tool-color: #7654d8; --tool-soft: #eee9ff; }
.page-hub .secondary-grid > a[data-tool="calculator"] { --tool-color: #07867f; --tool-soft: #e2f7f5; }
.page-hub .secondary-grid > a[data-tool="payroll"] { --tool-color: #2458b8; --tool-soft: #e8efff; }
.page-hub .secondary-grid > a[data-tool="commission"] { --tool-color: #a86c00; --tool-soft: #fff3cc; }
.page-hub .secondary-grid > a[data-tool="website"] { --tool-color: #21865e; --tool-soft: #e4f7ee; }
.page-hub .secondary-grid > a[data-tool="employees"] { --tool-color: #167ca8; --tool-soft: #e4f4fb; }
.page-hub .secondary-grid > a > span { background: var(--tool-soft); color: var(--tool-color); }
.page-hub .secondary-grid > a > i { color: var(--tool-color); }
.page-hub .secondary-grid > a:hover { border-color: color-mix(in srgb, var(--tool-color) 55%, #d9e3ee); background: color-mix(in srgb, var(--tool-soft) 48%, #fff); }
.system-attention-badge { position: absolute; z-index: 8; top: -9px; right: -8px; display: grid; place-items: center; min-width: 29px; height: 29px; padding: 0 8px; border: 3px solid #fff; border-radius: 999px; background: #e11d48; color: #fff; font-size: 12px; font-weight: 950; line-height: 1; box-shadow: 0 7px 18px rgba(190, 18, 60, .30); }
html[data-dark="true"] .support-attention-panel { border-color: #765923; background: linear-gradient(105deg, #2b2516, #182138); }
html[data-dark="true"] .support-attention-title { color: #ffe7aa; }
html[data-dark="true"] .support-attention-title small { color: #d8bd7e; }
html[data-dark="true"] .support-attention-list > a { border-color: #5f4d2b; background: #101d38; color: #fff3d1; }
html[data-dark="true"] .system-attention-badge { border-color: #101d38; }
@media (max-width: 980px) { .support-attention-panel { grid-template-columns: 1fr; } .support-attention-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 580px) { .support-attention-list { grid-template-columns: 1fr 1fr; } .support-attention-title small { font-size: 10px; } }