.action-center-heading {
  align-items: flex-start;
  gap: 1rem;
}

.action-center-heading__counts {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.action-center-heading__counts span {
  align-items: center;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: .82rem;
  gap: .35rem;
  padding: .45rem .7rem;
}

.action-center-heading__counts b {
  color: var(--text);
}

.action-center-toolbar {
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(140px, 1fr)) auto;
  margin: 1rem 0;
  padding: 1rem;
}

.action-center-toolbar label {
  display: grid;
  font-size: .78rem;
  font-weight: 700;
  gap: .35rem;
}

.action-center-toolbar select {
  background: #080809;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 42px;
  padding: .55rem .7rem;
  width: 100%;
}

.action-center-toolbar__check {
  align-items: center;
  display: flex !important;
  flex-direction: row;
  min-height: 42px;
}

.action-center-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: .35rem;
  margin-bottom: 1rem;
}

.action-center-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  padding: .8rem 1rem;
}

.action-center-tabs button.is-active {
  border-bottom-color: var(--red);
  color: var(--text);
}

.action-center-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: flex-end;
  margin-bottom: .8rem;
}

.action-center-list {
  display: grid;
  gap: .75rem;
}

.action-center-card,
.action-center-notification {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid #89939d;
  border-radius: 16px;
  overflow-wrap: anywhere;
  padding: 1rem;
}

.action-center-card--critical,
.action-center-notification.severity-critical {
  border-left-color: #b42318;
}

.action-center-card--high,
.action-center-notification.severity-warning {
  border-left-color: #dc6803;
}

.action-center-notification.severity-success {
  border-left-color: #16803c;
}

.action-center-notification.is-unread {
  background: linear-gradient(135deg, rgba(226, 185, 95, .1), rgba(255, 48, 37, .035)), var(--surface);
  box-shadow: inset 0 0 0 1px rgba(226, 185, 95, .3);
}

.action-center-card__heading,
.action-center-notification {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.action-center-card h3,
.action-center-notification h3 {
  font-size: 1.02rem;
  margin: .25rem 0;
}

.action-center-card p,
.action-center-notification p {
  color: #b4b4ba;
  line-height: 1.45;
  margin: 0;
}

.action-center-card__priority,
.action-center-notification__severity {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.action-center-card--critical .action-center-card__priority,
.severity-critical .action-center-notification__severity,
.action-center-card__meta .is-overdue {
  color: #ff766e;
}

.action-center-card__meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .8rem;
  gap: .8rem;
  margin-top: .7rem;
}

.action-center-card__blocking {
  color: #ff9a94;
  margin: .65rem 0 0;
  padding-left: 1.1rem;
}

.action-center-notification__copy {
  flex: 1;
  min-width: 0;
}

.action-center-notification__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
}

.action-center-button {
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  min-height: 40px;
  padding: .55rem .8rem;
}

.action-center-button--ghost {
  background: transparent;
  border-color: var(--line);
  color: #d8d8dc;
}

.action-center-button:disabled {
  cursor: wait;
  opacity: .58;
}

.action-center-button:focus-visible,
.action-center-tabs button:focus-visible,
.action-center-toolbar select:focus-visible,
.action-center-card:focus-visible {
  outline: 3px solid #f3a847;
  outline-offset: 2px;
}

.action-center-empty {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  padding: 1.5rem;
  text-align: center;
}

[data-action-center-state].is-error {
  color: #ff766e;
}

@media (max-width: 820px) {
  .action-center-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .action-center-heading > div:first-child {
    min-width: 0;
  }

  .action-center-heading__counts {
    margin-top: 1rem;
  }

  .action-center-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .action-center-card__heading,
  .action-center-notification {
    align-items: stretch;
    flex-direction: column;
  }

  .action-center-notification__actions,
  .action-center-panel__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .action-center-heading h1 {
    font-size: clamp(42px, 14vw, 52px);
    overflow-wrap: anywhere;
  }

  .action-center-toolbar {
    grid-template-columns: 1fr;
    padding: .8rem;
  }

  .action-center-tabs {
    overflow-x: auto;
  }

  .action-center-tabs button {
    white-space: nowrap;
  }

  .action-center-button,
  .action-center-notification__actions .action-center-button {
    width: 100%;
  }

  .action-center-heading__counts {
    width: 100%;
  }

  .action-center-heading__counts span,
  .action-center-heading__counts .refresh-button {
    flex: 1 1 auto;
    justify-content: center;
  }
}