#my-work-page .my-mgmt-panel {
  --my-mgmt-accent-soft: color-mix(in srgb, var(--cp-accent) 10%, transparent);
  --my-mgmt-warning-soft: color-mix(in srgb, var(--warning) 12%, transparent);
  --my-mgmt-warning-border: color-mix(in srgb, var(--warning) 28%, transparent);
  display: grid;
  gap: var(--space-3, 12px);
}

#my-work-page .my-mgmt-lane {
  display: grid;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-1);
  box-shadow: var(--shadow-xs, none);
  animation: my-mgmt-in var(--dur-fast, 160ms) ease-out both;
}

#my-work-page .my-mgmt-lane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  color: var(--content-secondary);
}

#my-work-page .my-mgmt-lane > header strong {
  color: var(--cp-accent);
}

#my-work-page .my-mgmt-area-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

#my-work-page .my-mgmt-area-chip {
  display: flex;
  align-items: baseline;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill, 999px);
  background: var(--my-mgmt-accent-soft);
  font-size: var(--text-sm, 13px);
}

#my-work-page .my-mgmt-area-chip strong {
  color: var(--cp-accent);
}

#my-work-page .my-mgmt-worker {
  display: grid;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px) 0;
  border-top: 1px solid var(--border-subtle);
}

#my-work-page .my-mgmt-worker:first-child {
  border-top: 0;
}

#my-work-page .my-mgmt-worker > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm, 13px);
  color: var(--content-secondary);
}

#my-work-page .my-mgmt-worker-items,
#my-work-page .my-mgmt-attention {
  display: grid;
  gap: var(--space-1, 4px);
}

#my-work-page .my-mgmt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-2, var(--surface-1));
  min-width: 0;
}

#my-work-page .my-mgmt-item.is-overdue {
  border-left: 3px solid var(--warning);
  background: var(--my-mgmt-warning-soft);
}

#my-work-page .my-mgmt-item.is-unrouted {
  border-left: 3px solid var(--cp-accent);
}

#my-work-page .my-mgmt-item-main {
  min-width: 0;
}

#my-work-page .my-mgmt-item-main strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#my-work-page .my-mgmt-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  font-size: var(--text-xs, 12px);
  color: var(--content-tertiary, var(--content-secondary));
}

#my-work-page .my-mgmt-hint {
  margin: 0;
  font-size: var(--text-xs, 12px);
  color: var(--content-tertiary, var(--content-secondary));
}

@keyframes my-mgmt-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
